/* YAAASS theme: the brand.
   Palette, fonts and treatments lifted directly from yaaass.com so the app
   and the site read as one product. Must define exactly the variable set
   documented in deep-sea.css.

   Brand tokens (verbatim from the site's :root):
       pink #ff2d9b   pink-lt #ff6ec7   purple #a855f7
       cyan #23d5ff   lime    #9dff28   amber  #ff8a1e
       bg   #07060b   panel   #100e1a   txt    #f3eef7   dim #9c93ad
       display 'Anton' (italic)   body 'Archivo'   mono 'Share Tech Mono'

   HOW COLOUR IS APPLIED (this is the part that is easy to get wrong)
   -----------------------------------------------------------------
   The site is NOT a pink site. Pink is one of five hues and mostly carries
   the primary CTA. Everything else is distributed:
     * each card owns ONE colour, shown as a static 2px top rule that fades
       out at both ends -- never an animated rainbow, and never the same
       colour on every card;
     * icons glow in their card's colour;
     * stat numbers take their card's colour;
     * secondary/ghost buttons are neutral until hover, then CYAN;
     * headings are plain white italic display. Gradient text is reserved
       for the one page title, as the site reserves it for the hero.
   The per-card hue arrives as --card-hue from the ramp in app.css.

   LAYOUT RULES BELONG IN app.css, NOT HERE. A theme that repositions
   anything will break the other seven. In particular never give .sidebar a
   `position` -- it is `fixed` in app.css with .main-content compensating via
   margin-left:260px, and making it `relative` shifts the whole page right by
   260px. That exact bug shipped once already. */
:root {
    --accent: #ff2d9b;
    --accent-2: #a855f7;
    --on-accent: #12000a;

    --success: #9dff28;
    --success-2: #74c81a;
    --warning: #ff8a1e;
    /* The brand sheet has no red, so this is ours. It is deliberately pushed
       well away from --accent's magenta: at #ff2d6b, Stop and Start rendered
       as near-identical pinks, which is exactly the wrong thing for two
       buttons with opposite consequences. Keep the hue clearly RED. */
    --danger: #ff4d4d;
    --danger-2: #e02020;
    --info: #23d5ff;
    --lock-gold: #d4a017;

    --text-primary: #f3eef7;
    --text-secondary: #9c93ad;

    --background: linear-gradient(165deg, #07060b 0%, #0b0a12 55%, #0f0818 100%);
    --primary: rgba(255, 255, 255, 0.08);
    --secondary: rgba(255, 255, 255, 0.05);
    --glass: #100e1a;
    --border: rgba(255, 255, 255, 0.10);

    --ink: #07060b;
    --on-ink: #f3eef7;

    --surface: #100e1a;

    --console-bg: #07060b;
    --console-text: #9dff28;

    --menu-bg: #100e1a;
    --menu-bg-hover: #1c1730;
    --menu-bg-active: #15121f;
    --color-scheme: dark;

    /* Theme-private. Not part of the shared contract, so safe to add. */
    --yaaass-display: 'Anton', 'Archivo Black', 'Arial Narrow', Impact, sans-serif;
    --yaaass-body: 'Archivo', 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --yaaass-panel-2: #15121f;
}

[data-theme="yaaass"] body { font-family: var(--yaaass-body); }

/* --- Scanline grain --------------------------------------------------- */
/* body::after, NOT body::before: app.css already owns ::before for its
   animated gradient backdrop, and a higher-specificity ::before here would
   silently replace it. z-index stays -1 to match that backdrop -- at 0 this
   paints over page content, and "fixing" that with z-index on .main-content
   /.sidebar is what shifted the layout 260px last time. */
[data-theme="yaaass"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.027) 0px,
        rgba(255, 255, 255, 0.027) 1px,
        transparent 1px,
        transparent 3px);
}

/* --- Opaque surfaces don't need backdrop blur ------------------------- */
/* --glass/--surface here are SOLID (no alpha), so the base blur(8px)/
   blur(6px) from app.css is 100% hidden behind the opaque paint -- pure
   wasted per-frame GPU work on the default theme. Kill it outright; the
   frost was never visible. */
[data-theme="yaaass"] .sidebar,
[data-theme="yaaass"] .top-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* --- Cards: one colour each, static ----------------------------------- */
[data-theme="yaaass"] .card {
    position: relative;
    background: linear-gradient(180deg, var(--surface) 0%, #09070f 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease,
                box-shadow .25s ease, background .25s ease;
}
[data-theme="yaaass"] .card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    opacity: .9;
    background: linear-gradient(90deg, transparent, var(--card-hue), transparent);
}
[data-theme="yaaass"] .card:hover {
    transform: translateY(-5px);
    background: linear-gradient(180deg, var(--yaaass-panel-2) 0%, #0b0913 100%);
    border-color: color-mix(in srgb, var(--card-hue) 50%, transparent);
    box-shadow: 0 18px 50px color-mix(in srgb, var(--card-hue) 16%, transparent);
}

/* Header icons glow in the card's colour -- the site's .ic-* treatment. */
[data-theme="yaaass"] .card-title i,
[data-theme="yaaass"] .card-header > i {
    color: var(--card-hue);
    filter: drop-shadow(0 0 7px var(--card-hue));
}

/* --- Display type ----------------------------------------------------- */
[data-theme="yaaass"] .page-title {
    font-family: var(--yaaass-display);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: linear-gradient(100deg, #fff 0%, #ff6ec7 35%, var(--accent) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[data-theme="yaaass"] .card-title {
    font-family: var(--yaaass-display);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-primary);
}
/* The wordmark is white on the site, not accent-coloured. app.css paints
   .logo with var(--accent), which in this palette is hot pink.

   The login page restates the rule as `.login-logo .logo` inside its own
   inline <style>, which loads AFTER this file -- hence the extra selector
   here to out-specify it (0,3,0 beats 0,2,0). Both are needed. */
[data-theme="yaaass"] .logo,
[data-theme="yaaass"] .login-logo .logo {
    color: #fff;
    text-shadow: 0 0 18px rgba(255, 255, 255, .25);
}

/* Login's inline .btn-primary is white-on-pink-to-purple. Bring it in line
   with the rest of the brand buttons: dark text on the pink ramp. */
[data-theme="yaaass"] .login-form .btn-primary,
[data-theme="yaaass"] .btn-login.btn-primary {
    background: linear-gradient(135deg, #ff6ec7 0%, var(--accent) 100%);
    color: #12000a;
}

/* app.css deliberately blanks these to --text-primary (white) and lets a
   ::before icon carry the colour, at .stat-value.is-online specificity (0,2,0)
   -- which outranks a plain [data-theme] .stat-value rule, so the numbers came
   out white here while every other stat took its card hue. Match that
   specificity and colour the NUMBER too. */
[data-theme="yaaass"] .stat-value.is-online {
    color: var(--success);
    text-shadow: 0 0 18px color-mix(in srgb, var(--success) 45%, transparent);
}
[data-theme="yaaass"] .stat-value.is-offline {
    color: var(--danger);
    text-shadow: 0 0 18px color-mix(in srgb, var(--danger) 45%, transparent);
}

[data-theme="yaaass"] .stat-label {
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--text-secondary);
}
/* Each stat card's number takes that card's hue -- the site's 3/3 lime,
   41 cyan, 29.8 pink, 11m purple treatment. */
[data-theme="yaaass"] .stat-value {
    font-family: var(--yaaass-display);
    font-style: italic;
    color: var(--card-hue);
    text-shadow: 0 0 20px color-mix(in srgb, var(--card-hue) 45%, transparent);
}

/* --- Buttons ---------------------------------------------------------- */
/* Bright fills take DARK text, per the site (#12000a on pink, #001820 on
   cyan). White-on-neon is what made these look washed out. Cards lift 5px,
   buttons lift 2px. */
[data-theme="yaaass"] .btn {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
[data-theme="yaaass"] .btn-primary {
    background: linear-gradient(135deg, #ffb857 0%, var(--warning) 100%);
    border: none;
    color: #1a0a00;
    box-shadow: 0 0 24px rgba(255, 138, 30, .45);
}
[data-theme="yaaass"] .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 34px rgba(255, 138, 30, .75);
}
[data-theme="yaaass"] .btn-success {
    background: linear-gradient(135deg, #d4ff8c 0%, var(--success) 100%);
    border: none;
    color: #0b1a00;
    box-shadow: 0 0 24px rgba(157, 255, 40, .4);
}
[data-theme="yaaass"] .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 34px rgba(157, 255, 40, .7);
}
[data-theme="yaaass"] .btn-danger {
    background: linear-gradient(135deg, #ff8080 0%, var(--danger) 100%);
    border: none;
    color: #2a0000;
    box-shadow: 0 0 24px rgba(255, 77, 77, .42);
}
[data-theme="yaaass"] .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 34px rgba(255, 77, 77, .7);
}
/* Secondary is the site's ghost button: neutral until hover, then CYAN.
   This is what keeps the UI from being wall-to-wall pink -- most buttons in
   this app are secondary. */
[data-theme="yaaass"] .btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--text-primary);
}
[data-theme="yaaass"] .btn-secondary:hover {
    border-color: var(--info);
    color: var(--info);
    box-shadow: 0 0 24px rgba(35, 213, 255, .3);
}

/* --- Nav -------------------------------------------------------------- */
/* The site tags each nav item with a small coloured square. Same ramp,
   applied per item, so the sidebar carries the whole palette rather than
   six shades of one colour. */
[data-theme="yaaass"] .nav-item:nth-child(5n + 1) .nav-link i { color: var(--ramp-1); }
[data-theme="yaaass"] .nav-item:nth-child(5n + 2) .nav-link i { color: var(--ramp-2); }
[data-theme="yaaass"] .nav-item:nth-child(5n + 3) .nav-link i { color: var(--ramp-3); }
[data-theme="yaaass"] .nav-item:nth-child(5n + 4) .nav-link i { color: var(--ramp-4); }
[data-theme="yaaass"] .nav-item:nth-child(5n + 5) .nav-link i { color: var(--ramp-5); }
[data-theme="yaaass"] .nav-link.active i { filter: drop-shadow(0 0 7px currentColor); }

/* --- Event feed ------------------------------------------------------- */
/* The feed keeps its OWN semantic colours (chat cyan, join lime, death red).
   Do NOT fold these into --card-hue: here the colour carries meaning, and
   overriding it with the card's decorative hue throws away the only fast
   signal in the panel. */
[data-theme="yaaass"] .event-time,
[data-theme="yaaass"] .event-server { font-family: 'Share Tech Mono', monospace; }
[data-theme="yaaass"] .event-row:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, .05) 0%, transparent 60%);
}
[data-theme="yaaass"] .event-row.is-player-death { box-shadow: inset 2px 0 14px -6px var(--danger); }
[data-theme="yaaass"] .event-chip.is-active {
    background: linear-gradient(135deg, #ff6ec7 0%, var(--accent) 100%);
    border-color: transparent;
    color: #12000a;
}
[data-theme="yaaass"] .event-live-dot { box-shadow: 0 0 12px var(--success); }

[data-theme="yaaass"] .status-online,
[data-theme="yaaass"] .is-online {
    color: var(--success);
    text-shadow: 0 0 12px color-mix(in srgb, var(--success) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="yaaass"] .card:hover,
    [data-theme="yaaass"] .btn:hover { transform: none; }
}

/* ============================================================================
   Tone down pink overuse — the `html` prefix bumps specificity to (0,3,0)
   which beats app.css's (0,2,0) — otherwise app.css loads second and wins
   all same-specificity conflicts. These overrides replace `--accent` (hot
   pink) with cooler/neutral colours on non-primary interactive elements.
   ========================================================================= */

/* --- Navigation: replace pink active border + hover with purple ----------- */
html[data-theme="yaaass"] .nav-link:hover,
html[data-theme="yaaass"] .nav-link.active {
    background: var(--menu-bg-hover);
}
html[data-theme="yaaass"] .nav-item:nth-child(5n + 1) .nav-link.active,
html[data-theme="yaaass"] .nav-item:nth-child(5n + 1) .nav-link:hover { border-left-color: var(--ramp-1); }
html[data-theme="yaaass"] .nav-item:nth-child(5n + 2) .nav-link.active,
html[data-theme="yaaass"] .nav-item:nth-child(5n + 2) .nav-link:hover { border-left-color: var(--ramp-2); }
html[data-theme="yaaass"] .nav-item:nth-child(5n + 3) .nav-link.active,
html[data-theme="yaaass"] .nav-item:nth-child(5n + 3) .nav-link:hover { border-left-color: var(--ramp-3); }
html[data-theme="yaaass"] .nav-item:nth-child(5n + 4) .nav-link.active,
html[data-theme="yaaass"] .nav-item:nth-child(5n + 4) .nav-link:hover { border-left-color: var(--ramp-4); }
html[data-theme="yaaass"] .nav-item:nth-child(5n + 5) .nav-link.active,
html[data-theme="yaaass"] .nav-item:nth-child(5n + 5) .nav-link:hover { border-left-color: var(--ramp-5); }

/* Collapsed sidebar: same per-item colours on the right border. */
html[data-theme="yaaass"] .sidebar.collapsed .nav-item:nth-child(5n + 1) .nav-link.active,
html[data-theme="yaaass"] .sidebar.collapsed .nav-item:nth-child(5n + 1) .nav-link:hover { border-right-color: var(--ramp-1); }
html[data-theme="yaaass"] .sidebar.collapsed .nav-item:nth-child(5n + 2) .nav-link.active,
html[data-theme="yaaass"] .sidebar.collapsed .nav-item:nth-child(5n + 2) .nav-link:hover { border-right-color: var(--ramp-2); }
html[data-theme="yaaass"] .sidebar.collapsed .nav-item:nth-child(5n + 3) .nav-link.active,
html[data-theme="yaaass"] .sidebar.collapsed .nav-item:nth-child(5n + 3) .nav-link:hover { border-right-color: var(--ramp-3); }
html[data-theme="yaaass"] .sidebar.collapsed .nav-item:nth-child(5n + 4) .nav-link.active,
html[data-theme="yaaass"] .sidebar.collapsed .nav-item:nth-child(5n + 4) .nav-link:hover { border-right-color: var(--ramp-4); }
html[data-theme="yaaass"] .sidebar.collapsed .nav-item:nth-child(5n + 5) .nav-link.active,
html[data-theme="yaaass"] .sidebar.collapsed .nav-item:nth-child(5n + 5) .nav-link:hover { border-right-color: var(--ramp-5); }

/* --- Form inputs: use CYAN focus ring instead of pink -------------------- */
html[data-theme="yaaass"] .form-input:focus,
html[data-theme="yaaass"] .form-select:focus,
html[data-theme="yaaass"] .form-textarea:focus {
    border-color: var(--info);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 20%, transparent);
    background: color-mix(in srgb, var(--text-primary) 15%, transparent);
}

/* --- Scrollbar: no override needed --------------------------------------
   This used to re-colour the thumb away from pink for this theme only. The
   base rule in app.css is now neutral for every theme (and the old override
   leaned on `opacity` on a ::-webkit-scrollbar-thumb, which browsers ignore
   anyway), so the whole thing is gone rather than duplicated here. */

/* --- Table row hover: subtle neutral instead of pink tint ---------------- */
html[data-theme="yaaass"] .data-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* --- Toggle switch: use purple instead of pink when checked -------------- */
html[data-theme="yaaass"] .toggle input:checked + .toggle-slider {
    background: var(--accent-2);
    border-color: var(--accent-2);
}

/* --- Status-chip hover: use CYAN border like secondary buttons instead of pink */
html[data-theme="yaaass"] .status-chip:hover {
    border-color: var(--info);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--info) 20%, transparent);
}
html[data-theme="yaaass"] .status-chip:hover .status-label i {
    color: var(--info);
}

/* --- Loading spinner: use accent-2 (purple) instead of pink -------------- */
html[data-theme="yaaass"] .loading {
    border-top-color: var(--accent-2);
}

/* --- Focus-visible outlines: use CYAN instead of pink -------------------- */
html[data-theme="yaaass"] .server-card:focus-visible {
    outline-color: var(--info);
}
html[data-theme="yaaass"] .toggle input:focus-visible + .toggle-slider {
    outline-color: var(--info);
}

/* --- Progress fill: use purple→red instead of pink→red ------------------- */
html[data-theme="yaaass"] .progress-fill {
    background: linear-gradient(90deg, var(--accent-2), var(--danger));
}

/* --- Sidebar health hover: use purple tint instead of pink --------------- */
html[data-theme="yaaass"] .sidebar-health:hover {
    background: color-mix(in srgb, var(--accent-2) 12%, transparent);
}

/* --- Badge-info (cluster count pill): use CYAN instead of pink ----------- */
html[data-theme="yaaass"] .badge-info {
    color: var(--info);
    border-left-color: var(--info);
}