/* =====================================================================
 * Dark mode, same palette as the Xagio panel's (xagio-panel assets/stylesheets/dark.css).
 * Active when <html data-theme="dark">: set before first paint by the inline script in
 * template.php's <head> from localStorage "xagio-theme", flipped by the topbar moon/sun
 * button ([data-theme-toggle], main.js). Loaded after the page stylesheets so it wins.
 *
 * Re-pointing the main.css tokens does most of the work; --white is the surface colour
 * (text on coloured fills uses #fff directly). The rules below catch hardcoded light colours.
 * ===================================================================== */

html[data-theme="dark"] {
    color-scheme: dark;

    /* Studio's dark theme (studio.xagio.net src/app/globals.css): neutral greys, not navy.
       The sidebar keeps its navy in both themes, so --navy* / --side-* are not redefined. */
    --blue: #6C6DF3;            /* fill; lifted a touch so purple text reads on #1A1F27 */
    --blue-dark: #7D7EF5;
    --blue-soft: #23235A;
    --ink: #F5F7FB;
    --ink-2: #C3C9D4;
    --ink-3: #AAB2C0;
    --muted: #8D95A5;
    --line: #2E3540;
    --line-2: #384050;
    --line-soft: #2E3540;
    --bg: #12161D;
    --bg-2: #262C34;
    --white: #1A1F27;
    --green: #3CC97A;
    --green-text: #4FD68A;
    --green-soft: #14301F;
    --red: #FF5C6B;
    --red-text: #FF8A95;
    --red-soft: #3A1A1F;
    --orange: #FF9E5E;
    --orange-soft: #3A2A16;
    --yellow-soft: #3A2F14;
    --yellow-text: #FFC85C;
    --cyan: #5A9BFF;
    --cyan-soft: #16263F;
    /* No shadows and no borders on surfaces: page #12161D, card --white #1A1F27, raised --bg-2 #262C34. */
    --shadow: none;
    --shadow-sm: none;
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, .45);
}

/* ---------- Theme switch ---------- */

.icon-btn-theme { cursor: pointer; font: inherit; padding: 0; }
.icon-btn-theme .ico-sun,
html[data-theme="dark"] .icon-btn-theme .ico-moon { display: none; }
html[data-theme="dark"] .icon-btn-theme .ico-sun { display: block; }

/* Colours ease over when switching, not on page load */
html.theme-anim,
html.theme-anim * {
    transition: background-color .25s, border-color .25s, color .25s !important;
}

/* ---------- Shell ---------- */

/* Borderless chrome, as in the panel: no sidebar edge, no line under the top bar. */
html[data-theme="dark"] .sb { border-right: 0; }
html[data-theme="dark"] .topbar { background: var(--white); box-shadow: none; }
html[data-theme="dark"] .tb-search kbd { background: var(--white); color: var(--ink-3); }
html[data-theme="dark"] .tb-search input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7B8494; }
html[data-theme="dark"] .um-who small { color: var(--muted); }
html[data-theme="dark"] .footer { background: var(--white); }
html[data-theme="dark"] ::selection { background: rgba(113, 114, 245, .35); }

/* ---------- Components with hardcoded light colours ---------- */

html[data-theme="dark"] .table th { background: #1F252E; }
html[data-theme="dark"] .table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
html[data-theme="dark"] .pill { background: var(--bg-2); }
html[data-theme="dark"] .pill-blue { background: var(--blue-soft); }
html[data-theme="dark"] .pill-ok { background: var(--green-soft); }
html[data-theme="dark"] .pill-warn { background: var(--yellow-soft); }
html[data-theme="dark"] .pill-bad { background: var(--red-soft); }
html[data-theme="dark"] .pill-muted { background: var(--bg-2); }
html[data-theme="dark"] .pill-verified { background: #1F9D55; }

html[data-theme="dark"] .flash-error,
html[data-theme="dark"] .flash-bad,
html[data-theme="dark"] .notice-bad { background: var(--red-soft); }
html[data-theme="dark"] .flash-info,
html[data-theme="dark"] .notice-info { color: #8FBBFF; }

html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] input[readonly] { background-color: #20252D; }

/* white on the lifted dark green is 2.1:1; the light theme's darker fill keeps it readable */
html[data-theme="dark"] .btn-success { background: #15803D; }
html[data-theme="dark"] .btn-success:hover { background: #166534; }
html[data-theme="dark"] .val-range { border-color: rgba(47, 191, 106, .35); }
html[data-theme="dark"] .code { background: #0E1116; }
html[data-theme="dark"] .mdl { background: rgba(3, 6, 14, .7); }

/* ---------- Charts (inline SVG drawn by main.js / admin_charts.js with light-theme colours) ---------- */

html[data-theme="dark"] svg [stroke="#E3E8F1"] { stroke: #2E3540; }
html[data-theme="dark"] svg text[fill="#646D81"] { fill: #A3AABF; }

/* ---------- Page leftovers ---------- */

/* home: niche placeholder tiles (hue set inline per niche) */
html[data-theme="dark"] .lcard .shot .ph {
    color: hsl(var(--h) 55% 78%);
    background: radial-gradient(circle at 20% 15%, hsl(var(--h) 45% 24%), transparent 55%), linear-gradient(135deg, hsl(var(--h) 35% 16%), hsl(calc(var(--h) + 40) 35% 20%));
}
html[data-theme="dark"] .lcard .shot .veil { background: rgba(26, 31, 39, .92); }
/* hover: the light theme's hover shadow does not show on dark, so the card lifts to a lighter surface */
html[data-theme="dark"] .lcard:hover,
html[data-theme="dark"] .ex-card:hover { background: #20262F; }

/* listing: "Saved" button */
html[data-theme="dark"] .save-btn.on { background: var(--yellow-soft); color: var(--yellow-text); }

/* green text on green-soft fills */
html[data-theme="dark"] .cmp td.best,
html[data-theme="dark"] .best-key,
html[data-theme="dark"] .trust.api,
html[data-theme="dark"] .delta.up { color: var(--green-text); }
html[data-theme="dark"] .delta.down { color: var(--red-text); }

/* seller editor */
html[data-theme="dark"] .savebar { background: rgba(26, 31, 39, .94); }
html[data-theme="dark"] .xagio-import { background: var(--green-soft); }


/* admin */
html[data-theme="dark"] .kpi-accent { background: linear-gradient(180deg, rgba(113, 114, 245, .14), var(--white)); }
html[data-theme="dark"] .kpi-bad { background: var(--red-soft); }
html[data-theme="dark"] .mode-test { background: rgba(255, 140, 67, .15); color: #FFB37A; }
html[data-theme="dark"] .test-result.ok { background: var(--green-soft); }
html[data-theme="dark"] .test-result.bad { background: var(--red-soft); }
html[data-theme="dark"] .fee-preview { background: var(--blue-soft); }

html[data-theme="dark"] .test-strip { background: rgba(255, 140, 67, .12); color: #FFB37A; border-color: rgba(255, 140, 67, .4); }
html[data-theme="dark"] .smode-test .so-badge { color: #FFB37A; }
html[data-theme="dark"] .support-strip { background: rgba(255, 200, 60, .12); color: #FFD77A; }
html[data-theme="dark"] .support-strip .btn-dark { background: #FFD77A; color: #12161D; }