/* Scoped Site Theme (does NOT affect standalone board / overlay components)
   Wrap page content in <div class="app-theme"> ... </div> to activate.
*/
/* Every value here is DERIVED from @gammonbase/theme (lib/gb-theme/tokens.css,
   loaded first in App.razor) — the site and the desktop app read one list.
   They used to be two: this block restated the same hex values, and the two
   copies drifted apart on the page background, the radius scale and the body
   font (the shared list had become Helvetica Neue, so Arial on Windows,
   against this one's Segoe UI). Reconciled 2026-08-03; these values won,
   because this is the shipping identity.

   The --color-* names stay. Renaming them across ~570 call sites would be
   churn on pages that are being replaced by the Svelte workspace, and the
   names are not the problem — two definition sites were.

   No fallback literals. A hex sitting behind a token reference is a second
   definition quietly waiting to disagree with the first, which is the exact
   failure being fixed. If tokens.css is missing the site looks wrong, loudly,
   which is the right outcome for a missing stylesheet. */
.app-theme {
    --color-bg: var(--gb-surface-0);
    --color-surface: var(--gb-surface-1);
    --color-surface-alt: var(--gb-surface-2);
    --color-border: var(--gb-surface-3);
    --color-border-soft: var(--gb-surface-4);
    --color-text: var(--gb-text);
    --color-text-muted: var(--gb-text-muted);
    --color-accent: var(--gb-accent);
    --color-accent-alt: var(--gb-accent-amber);
    --color-accent-rgb: var(--gb-accent-rgb);
    --color-focus: var(--gb-focus-ring);
    --color-positive: var(--gb-success);
    --color-warning: var(--gb-warning);
    --color-danger: var(--gb-danger);
    --color-input-border: var(--gb-input-border);
    /* Inverted controls: the field takes the muted text colour as its
       background and the surface colour as its text. Derived from this
       block's own values, not the palette, because the inversion is the
       rule — whatever those two resolve to. */
    --color-input-bg: var(--color-text-muted);
    --color-input-text: var(--color-surface);
    --radius-xs: var(--gb-radius-xs);
    --radius-sm: var(--gb-radius-sm);
    --radius: var(--gb-radius-md);
    --radius-lg: var(--gb-radius-lg);
    --shadow-sm: var(--gb-shadow-sm);
    --shadow: var(--gb-shadow);
    --gradient-accent: var(--gb-gradient-accent);
    --font-stack: var(--gb-font);

    font-family: var(--font-stack);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Layout */
.app-theme .top-bar { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:24px; padding:8px 20px; font-size:14px; background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-sm); border-bottom:1px solid var(--color-border); }
.app-theme .top-bar .brand { font-weight:600; cursor:pointer; user-select:none; letter-spacing:.5px; }
.app-theme .nav-links { display:flex; gap:16px; }
.app-theme .nav-links a { color:var(--color-text-muted); text-decoration:none; padding:6px 6px 4px; border-radius:6px; font-weight:500; transition:.18s ease; }
.app-theme .nav-links a:hover { background:var(--color-surface-alt); color:var(--color-text); }
.app-theme .auth-block { margin-left:auto; display:flex; align-items:center; gap:12px; }
.app-theme .user-name { font-weight:500; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--color-text-muted); }
.app-theme .btn-auth { color:#121317; text-decoration:none; background:var(--gradient-accent); padding:6px 12px; border-radius:6px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:.4rem; border:1px solid rgba(var(--color-accent-rgb),.45); box-shadow:0 4px 18px -6px rgba(var(--color-accent-rgb),.5); transition:.18s ease; }
.app-theme .btn-auth:hover { filter:brightness(1.07); }
.app-theme .page-shell { width:100%; margin:0; padding:16px clamp(12px,1.4vw,30px) 48px; background:linear-gradient(145deg,var(--color-surface-alt),var(--color-surface)); box-sizing:border-box; }

/* Panels / cards (Bootstrap card compatibility) */
.app-theme .card { background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); color:var(--color-text); }
.app-theme .card-header { background:var(--color-surface); border-bottom:1px solid var(--color-border-soft); padding:.65rem 1rem .55rem; font-weight:600; letter-spacing:.3px; }

/* Alerts */
.app-theme .alert { position:relative; padding:.75rem 1rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:.8rem; display:flex; gap:.55rem; background:var(--color-surface-alt); }
.app-theme .alert-success { border-color:rgba(76,205,123,.35); background:rgba(76,205,123,.10); color:var(--color-positive); }
.app-theme .alert-info { border-color:rgba(255,138,60,.35); background:rgba(255,138,60,.12); color:var(--color-accent); }
.app-theme .alert-danger { border-color:rgba(255,98,93,.4); background:rgba(255,98,93,.12); color:var(--color-danger); }
.app-theme .alert-secondary { border-color:var(--color-border); background:var(--color-surface-alt); color:var(--color-text-muted); }
.app-theme .alert-warning { border-color:rgba(255,200,90,.35); background:rgba(255,200,90,.10); color:var(--color-warning); }
.app-theme .text-info { color:var(--color-accent) !important; }
.app-theme .text-muted { color:var(--color-text-muted) !important; }
.app-theme .form-control { background:var(--color-input-bg); border:1px solid var(--color-input-border); color:var(--color-input-text); }
.app-theme .form-control:focus { border-color:var(--color-accent); box-shadow:0 0 0 3px var(--color-focus); }
.app-theme .table-striped>tbody>tr:nth-of-type(odd) { --bs-table-striped-bg:var(--color-surface-alt); }
.app-theme .table { --bs-table-bg:var(--color-surface); --bs-table-color:var(--color-text); --bs-table-border-color:var(--color-border); --bs-table-hover-bg:var(--color-surface-alt); --bs-table-hover-color:var(--color-text); }

/* Buttons */
.app-theme button, .app-theme .btn { font-family:var(--font-stack); font-weight:600; font-size:.75rem; letter-spacing:.4px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-surface-alt); color:var(--color-text-muted); padding:.55rem 1rem; display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; transition:.18s ease; }
.app-theme button:hover, .app-theme .btn:hover { background:var(--color-surface); color:var(--color-text); }
.app-theme button:focus-visible, .app-theme .btn:focus-visible { outline:0; box-shadow:0 0 0 3px var(--color-focus); }
.app-theme .btn-primary { background:var(--gradient-accent); color:#121317; border-color:var(--color-accent); box-shadow:0 4px 18px -6px rgba(var(--color-accent-rgb),.45); }
.app-theme .btn-primary:hover { filter:brightness(1.07); }
.app-theme .btn-success { background:var(--color-positive); border-color:var(--color-positive); color:#102016; }
.app-theme .btn-danger { background:var(--color-danger); border-color:var(--color-danger); color:#1a0505; }
.app-theme .btn-outline-secondary { background:transparent; color:var(--color-text-muted); }
.app-theme .btn-outline-secondary:hover { background:var(--color-surface-alt); color:var(--color-text); }
.app-theme .btn-outline-primary { background:transparent; color:var(--color-accent); border-color:var(--color-accent); }
.app-theme .btn-outline-primary:hover { background:var(--color-accent); color:#121317; }
.app-theme .btn-outline-danger { background:transparent; color:var(--color-danger); border-color:var(--color-danger); }
.app-theme .btn-outline-danger:hover { background:var(--color-danger); color:#fff; }

/* Forms */
.app-theme label { font-size:.62rem; letter-spacing:.14em; font-weight:600; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:.35rem; display:inline-block; }
.app-theme input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),
.app-theme textarea,
.app-theme select { background:var(--color-input-bg); border:1px solid var(--color-input-border); border-radius:var(--radius-sm); padding:.6rem .7rem; font:500 .8rem/1.2 var(--font-stack); color:var(--color-input-text); letter-spacing:.3px; transition:.18s ease; }
.app-theme input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):focus,
.app-theme textarea:focus,
.app-theme select:focus { outline:0; border-color:var(--color-accent); box-shadow:0 0 0 3px var(--color-focus); }
.app-theme .form-check-input { width:1rem; height:1rem; accent-color:var(--color-accent); cursor:pointer; }

/* Tables */
.app-theme .table-clean { width:100%; border-collapse:collapse; font-size:.72rem; }
.app-theme .table-clean th { text-align:left; padding:.55rem .7rem; background:var(--color-surface); color:var(--color-text-muted); font-weight:600; letter-spacing:.5px; border-bottom:1px solid var(--color-border); }
.app-theme .table-clean td { padding:.5rem .7rem; border-top:1px solid var(--color-border); color:var(--color-text); }
.app-theme .table-clean tr:hover td { background:var(--color-surface-alt); }

/* Event log */
.app-theme .event-log .event-entry { padding:4px 0; border-bottom:1px solid var(--color-border); font-size:.68rem; }
.app-theme .event-log .event-entry:last-child { border-bottom:none; }
.app-theme .event-log .timestamp { color:var(--color-text-muted); font-family:monospace; margin-right:8px; }
.app-theme .event-log .event-message { color:var(--color-text); }
.app-theme .event-log .event-error { background:rgba(255,98,93,.08); border-left:3px solid var(--color-danger); padding-left:8px; }
.app-theme .event-log .event-xgid { background:rgba(255,138,60,.08); border-left:3px solid var(--color-accent); padding-left:8px; }
.app-theme .event-log .event-window { background:rgba(76,205,123,.10); border-left:3px solid var(--color-positive); padding-left:8px; }

/* Status blocks */
.app-theme .xg-status.running { color:var(--color-positive); background:rgba(76,205,123,.10); border:1px solid rgba(76,205,123,.35); border-radius:var(--radius-sm); padding:.75rem; font-size:.75rem; }
.app-theme .xg-status.not-running { color:var(--color-danger); background:rgba(255,98,93,.10); border:1px solid rgba(255,98,93,.35); border-radius:var(--radius-sm); padding:.75rem; font-size:.75rem; }

/* Responsive */
@media (max-width:780px){ .app-theme .top-bar{flex-wrap:wrap; gap:8px;} .app-theme .nav-links{order:3; width:100%;} .app-theme .auth-block{order:2; margin-left:0;} .app-theme .page-shell{padding:14px 14px 40px;} }

/* ── Not found (Routes.razor <NotFound>) ──
   The one page nobody chooses to visit, so it has to do two things well: say
   plainly what happened, and offer a way out. The accent-gradient numeral keeps
   it in the site's warm register instead of reading as a framework default. */
.app-theme .not-found-card { max-width:640px; margin:6vh auto 0; padding:2.25rem 2rem 2rem; text-align:center; }
.app-theme .not-found-code { font-size:clamp(3.5rem,9vw,5.5rem); font-weight:800; line-height:1; letter-spacing:2px; background:var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.app-theme .not-found-title { margin:.75rem 0 .5rem; font-size:1.35rem; font-weight:700; color:var(--color-text); }
.app-theme .not-found-lead { margin:0 auto 1.5rem; max-width:46ch; color:var(--color-text-muted); font-size:.9rem; line-height:1.5; }
.app-theme .not-found-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.app-theme .not-found-actions .btn { text-decoration:none; }

/* No global element selectors: board / overlay components remain unaffected unless wrapped */

/* ── ConfirmDialog ──────────────────────────────────────────────────────────
   Deliberately NOT scoped under .app-theme: the dialog is appended where the
   page renders it, and a confirmation that loses its styling because a page
   forgot a wrapper class is a confirmation the user cannot read. Every value
   is a literal here for the same reason the rest of this file uses them. */
.gb-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(8, 9, 12, .68);
    display: grid;
    place-items: center;
    padding: 1rem;
}
.gb-confirm {
    background: #1f242c;
    color: #e0e4ea;
    border: 1px solid #2b313b;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
    max-width: 30rem;
    width: 100%;
    padding: 1.1rem 1.2rem;
}
.gb-confirm h3 {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
}
.gb-confirm-body {
    font-size: .86rem;
    color: #b9c4d3;
    line-height: 1.5;
}
/* Cancel left, destroy right — the safe action is where the hand rests. */
.gb-confirm-actions {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    margin-top: 1.1rem;
}