/*
 * dark.css — SVPortal "Dark" theme
 *
 * Child theme: imports default.css and overrides design tokens only.
 * Place any custom background.png / headerimageblurred.png / mainlogo.png
 * in this same folder to override the default theme's images
 * (falls back to /themes/default/ via theme_image_url() if absent).
 *
 * Strict black & white — flat black surfaces, white text, and all accent
 * tokens (which default.css uses for buttons, links, badges etc.) mapped
 * to greyscale rather than the brand's purple/pink so nothing reads as
 * colour. Status dots (online/away) are the one deliberate exception —
 * see note below.
 */

@import url('../default/default.css');

:root {
    /* Tells the browser this page is dark-themed, so native widgets it
       draws itself (datetime-local calendar icon + its popup panel,
       scrollbars, etc.) use light-on-dark colours instead of assuming
       a light page and rendering dark-on-dark (invisible) controls. */
    color-scheme: dark;

    --clr-bg:          #000000;
    --clr-surface:     #000000;
    --clr-surface-2:   #141414;
    --clr-border:      #333333;
    --clr-border-light:#262626;

    /* "lilac" tokens repurposed as the primary accent — pure greyscale
       instead of purple, used for buttons, links, focus rings, badges */
    --clr-lilac-soft:  #1a1a1a;
    --clr-lilac-mid:   #999999;
    --clr-lilac-deep:  #ffffff;
    --clr-lilac-text:  #ffffff;

    /* "rose" tokens (secondary accent / danger-ish highlights) — also
       greyscale so no colour tint shows through */
    --clr-rose-soft:   #1a1a1a;
    --clr-rose-mid:    #cccccc;
    --clr-rose-accent: #1a1a1a;

    --clr-text-primary:   #ffffff;
    --clr-text-secondary: #d9d9d9;
    --clr-text-muted:     #a8a8a8;

    /* Left as-is deliberately: online/away/offline status dots carry real
       meaning (is someone online right now), so they stay colour-coded
       even in an otherwise monochrome theme. Say the word and these can
       go greyscale too. */
    --clr-online:  #5ecb95;
    --clr-away:    #e0a355;
    --clr-offline: #666666;

    /* Glass panels (notifications, friend-picker etc.) fall back to a
       bright white rgba() in default.css — override to a black glass so
       they don't blow out against the black background */
    --clr-surface-glass: rgba(0, 0, 0, 0.92);

    --shadow-card: 0 2px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-nav:  0 1px 0 var(--clr-border), 0 2px 16px rgba(0, 0, 0, 0.5);

    /* Login footer bar — flat black glass, white text/border, no colour tint */
    --clr-footer-bg:          rgba(0, 0, 0, 0.9);
    --clr-footer-border:      rgba(255, 255, 255, 0.18);
    --clr-footer-cell-bg:     rgba(0, 0, 0, 0.6);
    --clr-footer-gap:         rgba(255, 255, 255, 0.1);
    --clr-footer-text:        rgba(255, 255, 255, 0.85);
    --clr-footer-text-strong: #ffffff;
    --clr-footer-text-muted:  rgba(255, 255, 255, 0.5);
    --clr-footer-sep:         rgba(255, 255, 255, 0.4);
    --clr-footer-online:      #7ef08a;
    --clr-footer-online-dot:  #6ee87a;
    --clr-footer-online-glow: rgba(110, 232, 122, 0.5);
    --clr-footer-uri:         var(--clr-lilac-mid);
}

/* .login-news-title is styled with var(--clr-lilac-deep) in default.css
   rather than a text-color token; with lilac-deep now white this line is
   redundant but kept explicit for clarity/robustness. */
.login-news-title {
    color: var(--clr-text-primary);
}

/* login.php's "Register an account" link is a plain, unstyled <a> tag
   (no class in the markup), so it otherwise inherits the browser's
   default blue/visited-purple link color — give it an explicit
   greyscale color so it stays readable and on-theme. */
.login-hint a {
    color: var(--clr-lilac-mid);
    text-decoration-color: var(--clr-lilac-mid);
}
.login-hint a:visited {
    color: var(--clr-lilac-mid);
}
.login-hint a:hover {
    color: var(--clr-text-primary);
    text-decoration-color: var(--clr-text-primary);
}

/* default.css pairs several buttons/badges with a background of
   var(--clr-lilac-deep) / var(--clr-rose-accent) and a hardcoded white
   (#fff) text color — that combination was fine when those tokens were
   purple/pink, but now that this theme maps them to pure white it would
   mean white text on a white background. Override text to black on each
   of those elements so they render as black-on-white instead. */
.notif-btn-accept,
.btn-outline:hover,
.btn-primary,
.btn-primary-pill,
.filter-tab.active,
.events-trigger-count,
.maturity-option.active,
.fp-close:hover,
.fp-close:focus-visible,
.restart-status-badge.scheduled,
.restart-status-badge.stuck {
    color: #000000;
}

/* Toggle switches: the "on" track background is var(--clr-lilac-deep)
   (white here), but the sliding knob is also a hardcoded white circle —
   invisible against a white track. Give the knob a black fill instead. */
.toggle-wrap input:checked + .toggle-track::after,
.toggle-checkbox:checked + .toggle-switch::after {
    background: #000000;
}

/* default.css's body::before rule is a hardcoded deep-purple darkening
   overlay (rgba(20,10,35,...)) drawn over any page background image —
   not a token, so it wasn't caught by the token overrides above.
   Neutralize it to plain black. */
body::before {
    background: rgba(0, 0, 0, 0.45);
}

/* default.css's .topnav (the logged-in header bar) is a hardcoded light
   glass panel — rgba(255,255,255,0.88), not a token — so it stayed
   bright white/grey against this theme's black page. Override to a
   black glass panel instead. */
.topnav {
    background: rgba(0, 0, 0, 0.88);
}

/* default.css's body.login-page::before rule paints a purple + rose
   radial-gradient tint (hardcoded rgba, not a token) over the login
   page's starfield background image. Neutralize it to greyscale so no
   colour cast shows through on this theme. */
body.login-page::before {
    background:
        radial-gradient(ellipse 70% 50% at 20% 10%, rgba(255,255,255,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 90%, rgba(255,255,255,0.05) 0%, transparent 55%);
}

/* This selector (body.login-page.has-splash-bg::before) is MORE specific
   than the one above, so it wins and overrides it whenever a splash
   background image is configured for the login page. default.css
   hardcodes it to another purple rgba() — neutralize that one too, or
   the purple tint reappears as soon as a splash image is set. */
body.login-page.has-splash-bg::before {
    background: rgba(0, 0, 0, 0.45);
}