/* ================================================================
   DeltaSpares - colour modes (light / dark), shared by EVERY page.
   Loaded from theme_head() at the end of each <head>, so it wins over the page's own stylesheets.

   Two design systems live on this site and both are covered:
     1. The app pages + backend (style.css / cards.css / admin-*.css) are built on CSS variables.
        style.css holds the DARK values; the light set is below.
     2. The public storefront (marketplace.css & co.) is light by default; its dark version is
        theme-dark.css, loaded only on public pages.
   data-theme on <html> is set before first paint: the visitor's saved choice, else their system setting.
   ================================================================ */
html[data-theme="dark"] { color-scheme: dark; }
/* solid red fills (Delete buttons, count badges) use a deeper red than the red used for TEXT, so white lettering stays readable */
html[data-theme="dark"] .btn-delete, html[data-theme="dark"] .app-nav-link .badge, html[data-theme="dark"] .notif-badge { background: #da3633; color: #fff; }
html[data-theme="light"] .bi-filters a.active { color: #fff; }

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

/* Smooth cross-fade for the moment of switching only (assets/js/theme.js adds .theme-anim briefly) */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, fill .25s ease, stroke .25s ease, box-shadow .25s ease !important;
}

/* The light token set below applies to app-style pages (backend, sign-in, account, tracking) but NOT to storefront pages
   (body.mp-body / blog), which keep exactly the tokens they always had - their light theme is the storefront stylesheet itself. */
/* ================================================================
   Light theme for the admin / handler / shop-owner backend.
   The backend is built on CSS variables (style.css, cards.css), so the
   light theme is just a second set of values for them. It's switched by
   data-theme on <html>, set before the page paints by the snippet in theme_head()
   (no flash on load): the saved choice, else the system setting.
   ================================================================ */
@supports selector(:has(a)) {
html[data-theme="light"]:not(:has(body.mp-body)):not(:has(body.sx-blog-page)) {
    color-scheme: light;
    --bg: #f3f5f8;
    --surface: #ffffff;
    --border: #d9dfe7;
    --text: #17202b;
    --text-muted: #5d6978;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --card-line: #d9dfe7;
    --muted: #5d6978;
    --steel: #1f6fd1;
    --steel-bg: rgba(31,111,209,0.10);
    --green: #1f8a3b;
    --green-bg: rgba(31,138,59,0.12);
    --red: #d1322a;
    --error: #c62828;
    --red-bg: rgba(209,50,42,0.10);
    --amber-bg: rgba(240,165,0,0.16);
    --hover-tint: rgba(0,0,0,.06);
}
}
@supports not selector(:has(a)) {   /* browsers without :has() (Firefox < 121): no storefront exclusion possible, apply everywhere */
html[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f5f8;
    --surface: #ffffff;
    --border: #d9dfe7;
    --text: #17202b;
    --text-muted: #5d6978;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --card-line: #d9dfe7;
    --muted: #5d6978;
    --steel: #1f6fd1;
    --steel-bg: rgba(31,111,209,0.10);
    --green: #1f8a3b;
    --green-bg: rgba(31,138,59,0.12);
    --red: #d1322a;
    --error: #c62828;
    --red-bg: rgba(209,50,42,0.10);
    --amber-bg: rgba(240,165,0,0.16);
    --hover-tint: rgba(0,0,0,.06);
}
}
/* (no blanket body rule here: style.css already paints app-page bodies from the tokens, and each storefront page keeps its own background) */
html[data-theme="light"] .app-sidebar { box-shadow: 1px 0 0 var(--border); }
html[data-theme="light"] .app-nav-link:hover { background: rgba(240,165,0,.12); color: #a86f00; }
html[data-theme="light"] .app-nav-link.active { background: rgba(240,165,0,.18); color: #8a5b00; }
html[data-theme="light"] .app-tab.active { color: #a86f00; }
html[data-theme="light"] .cs-saved-note,
html[data-theme="light"] .banner-flash.ok { background: #e3f5e8; border-color: #9ed3ad; color: #1d6b35; }
html[data-theme="light"] body:not(.mp-body):not(.sx-blog-page) .pi-dialog { box-shadow: 0 24px 70px rgba(15,25,40,.22); }
html[data-theme="light"] body:not(.mp-body):not(.sx-blog-page) .pi-dialog::backdrop { background: rgba(15,25,40,.35); }
dialog { color: var(--text); }


/* ---- Light mode: accent colours that pass readability on a white background ----
   Amber doubles as a text colour and as a solid button fill. Bright #f0a500 reads
   well as a fill but is only ~2:1 as text on white, so light mode uses a deeper
   amber for both, with white text on the solid-amber buttons (about 5:1). */
@supports selector(:has(a)) {
html[data-theme="light"]:not(:has(body.mp-body)):not(:has(body.sx-blog-page)) {
    --amber: #9c6200;
    --accent: #9c6200;
    --accent-hover: #845300;
    --green: #1b7a34;
    --steel: #1a5fb4;
    --red: #b3261e;
    --muted: #525d6b;
    --text-muted: #525d6b;
}
}
@supports not selector(:has(a)) {   /* browsers without :has() (Firefox < 121): no storefront exclusion possible, apply everywhere */
html[data-theme="light"] {
    --amber: #9c6200;
    --accent: #9c6200;
    --accent-hover: #845300;
    --green: #1b7a34;
    --steel: #1a5fb4;
    --red: #b3261e;
    --muted: #525d6b;
    --text-muted: #525d6b;
}
}
html[data-theme="light"] .al-subtabs a.active,
html[data-theme="light"] .form-card button,
html[data-theme="light"] .auth-card button:hover,
html[data-theme="light"] body:not(.mp-body):not(.sx-blog-page) .pg-btn.is-current,
html[data-theme="light"] body:not(.mp-body):not(.sx-blog-page) .pi-btn:hover, html[data-theme="light"] body:not(.mp-body):not(.sx-blog-page) .pi-btn:focus-visible,
html[data-theme="light"] .wp-step.active span,
html[data-theme="light"] .wz-next,
html[data-theme="light"] .cpa-actions button, html[data-theme="light"] .cpa-tile-row button { color: #fff; }
html[data-theme="light"] .cpa-actions button, html[data-theme="light"] .cpa-tile-row button { background: var(--amber); }
html[data-theme="light"] .app-sidebar-brand .mark { color: #fff; background: linear-gradient(135deg, #c98a00, #9c6200); }
html[data-theme="light"] .app-nav-link:hover,
html[data-theme="light"] .app-nav-link.active,
html[data-theme="light"] .app-tab.active { color: #7a4d00; }
/* the small "i" info icons: a hardcoded light grey that vanished on white */
html[data-theme="light"] body:not(.mp-body):not(.sx-blog-page) .info-icon, html[data-theme="light"] body:not(.mp-body):not(.sx-blog-page) .pi-btn { color: var(--text-muted); background: #e6ebf1; }
html[data-theme="light"] body:not(.mp-body):not(.sx-blog-page) .pi-btn:hover { background: var(--amber); }
/* product form status/pricing toggles (inline colours designed for dark) */
html[data-theme="light"] .pf-toggle.active-draft { color: #8a6a00; }
html[data-theme="light"] .pf-toggle.active-active { color: #1b7a34; }
html[data-theme="light"] .pf-toggle.active-inactive { color: #b3261e; }
html[data-theme="light"] .cpa-alert.success { background: #e3f5e8; border-color: #9ed3ad; }
html[data-theme="light"] .cpa-alert.error { background: #fbe7e6; border-color: #e8aaa6; }
html[data-theme="light"] .pr-tabs a.active { color: #fff; }
/* Banner cards keep their dark photo-overlay bar in light mode (it sits on the image),
   so its buttons keep their bright dark-mode colours there. */
html[data-theme="light"] .banner-card2-bar .btn-freeze { color: #58a6ff; }
html[data-theme="light"] .banner-card2-bar .btn-approve { color: #3fb950; }
/* Banner image wells carry white overlay text, so they stay dark in either theme
   (a banner without a photo yet would otherwise put white text on a light box). */
html[data-theme="light"] .banner-card2,
html[data-theme="light"] .al-banner-img,
html[data-theme="light"] .banner-modal-imgwrap { background: #1b2430; }

/* ---- The sun / moon switch ----
   Shows the moon in light mode (click for dark) and the sun in dark mode (click for light). */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex-shrink: 0;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: #dbe6f2; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .25s; }
.theme-toggle:hover, .theme-toggle:focus-visible { background: rgba(255,255,255,.16); border-color: #f0a500; color: #f0a500; transform: rotate(14deg); outline: none; }
.theme-toggle .icon, .theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .tt-sun, .theme-toggle .tt-moon { display: inline-flex; }
.theme-toggle .tt-sun { display: none; }
html[data-theme="dark"] .theme-toggle .tt-sun { display: inline-flex; }
html[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
/* on the app pages the switch sits on a surface, not on the navy storefront bar */
.app-topbar .theme-toggle, .site-header .theme-toggle { width: 34px; height: 34px; border-color: var(--border); background: transparent; color: var(--text); }
.app-topbar .theme-toggle:hover, .site-header .theme-toggle:hover, .app-topbar .theme-toggle:focus-visible, .site-header .theme-toggle:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--hover-tint, rgba(255,255,255,.06)); }
.site-header-right { display: flex; align-items: center; gap: 14px; }
.tt-mobile { display: none; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } .theme-toggle:hover { transform: none; } }

/* sign-in / register: no header, so the switch floats in the corner */
.auth-theme { position: fixed; top: 14px; right: 14px; z-index: 30; }
.auth-theme .theme-toggle { width: 36px; height: 36px; border-color: var(--border); background: var(--surface); color: var(--text); }
.auth-theme .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* the storefront's navy top bar: the switch sits at the far right */
/* sized to sit INSIDE the slim top bar without making it any taller (negative vertical margins absorb the difference) */
.mp-topbar .tt-topbar { width: 22px; height: 22px; margin: -4px 0 -4px 2px; }
.mp-topbar .tt-topbar .icon, .mp-topbar .tt-topbar svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
    .tt-mobile { display: inline-flex; width: 34px; height: 34px; border-color: rgba(255,255,255,.3); }
}

/* sign-in / register button: the light theme's deeper amber needs white lettering (dark text on it was only ~3.7:1) */
html[data-theme="light"] .auth-card button { color: #fff; }

/* ---- DeltaSpares wordmark (brand_logo_html()): "Delta" + "Spares". On dark surfaces "Delta" is white; on light surfaces it follows the
   theme text colour so it never disappears into a white card. "Spares" is the theme orange. ---- */
.dl-logo { font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.dl-logo .dl-d { color: var(--text, #fff); }
.dl-logo .dl-s { color: #f0a500; }
html[data-theme="light"] .dl-logo .dl-s { color: #d17a00; }

/* V118: in the light theme --amber is a dark gold (so it reads well as TEXT). Buttons filled with it therefore need white text - dark text on it was only about 3.3:1. */
html[data-theme="light"] .ap-seg button.on,
html[data-theme="light"] .wa-btn:not(.sec),
html[data-theme="light"] .cx-panel button:not([value$="_delete"]) { color: #fff; }
html[data-theme="light"] .cx-panel button[value$="_delete"] { color: var(--red); }