/* ---- Wingman theme ---------------------------------------------------- */
:root {
    --bg: #101922;
    --surface: #17232f;
    --surface-2: #0c141c;
    --border: #26323d;
    --text: #ffffff;
    --muted: #8b9bab;
    --accent: #17bae8;      /* cyan  */
    --accent-ink: #04141c;  /* text on a cyan button */
    --accent-2: #c2365b;    /* crimson */
    --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
    --radius: 8px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    padding: 1.5rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-weight: 600; line-height: 1.2; margin: 0 0 .6rem; }
h1 { font-size: 1.9rem; letter-spacing: -.015em; }
h2 { font-size: 1.2rem; }
h1:focus { outline: none; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--border); }

code, .mono { font-family: var(--font-mono); }

/* ---- controls --------------------------------------------------------- */
button, .btn {
    font-family: inherit;
    font-size: .875rem;
    padding: .4rem .8rem;
    border-radius: 6px;
    cursor: pointer;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    transition: border-color .15s, background .15s, color .15s, filter .15s;
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:disabled:hover { border-color: var(--border); color: var(--text); }

.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-accent:hover { filter: brightness(1.1); color: var(--accent-ink); border-color: var(--accent); }

.btn-danger { border-color: var(--accent-2); color: var(--accent-2); background: transparent; }
.btn-danger:hover { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }

input, select, textarea {
    font-family: inherit;
    font-size: .9rem;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .45rem .55rem;
}
input::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(23, 186, 232, .25);
}

/* ---- tables ----------------------------------------------------------- */
table { border-collapse: collapse; }
th { color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
td { text-align: left; }
thead tr { border-bottom: 1px solid var(--border); }
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: 0; }

/* ---- utilities -------------------------------------------------------- */
.muted { color: var(--muted); }
.error { color: var(--accent-2); }
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}
/* .topbar moved to css/topbar.css, shared with the public join page. */
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; }
.dot.online { background: var(--accent); box-shadow: 0 0 7px var(--accent); }
.dot.offline { background: #3a4855; }

/* ---- framework bits --------------------------------------------------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--accent); }
.invalid { outline: 1px solid var(--accent-2); }
.validation-message { color: var(--accent-2); }

.blazor-error-boundary {
    background: var(--accent-2);
    padding: 1rem 1rem 1rem 1rem;
    color: #fff;
    border-radius: var(--radius);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

/* ---- full-screen hint --------------------------------------------------- */
/* Global rather than in Home.razor.css on purpose: this element is created by
   wingman-screen.js, so it never gets the [b-xxxxx] attribute that Blazor's CSS
   isolation rewrites selectors to require, and a scoped rule would never match it. */
.fs-hint {
    position: absolute;
    top: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: .45rem .9rem;
    background: rgba(0, 0, 0, .82);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: #fff;
    font-size: .78rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
    transition: opacity .6s ease;
}

.fs-hint.fading { opacity: 0; }
.fs-hint.error { border-color: var(--accent-2); color: #ffd9e2; }