/* ============================================================
   EazyStock — Theme system (Light / Dark / System)   v3.83
   ------------------------------------------------------------
   Loaded LAST in every shell so its token overrides win.

   How it works
   ------------
   1.  Semantic design tokens (--ez-*) live in :root (light) and are
       flipped under html[data-theme="dark"].
   2.  The existing component CSS (eazydev.css / public-premium.css)
       references --ink-*, --glass-* and a NEW channel variable
       --surface-rgb. Re-mapping those few tokens in dark mode flips
       hundreds of component rules automatically — no per-component
       dark CSS required for the common surfaces.
   3.  --surface-rgb is the rgb channel of every "white" surface.
       eazydev/public-premium were converted so each
       rgba(255,255,255,α) became rgba(var(--surface-rgb),α): light
       mode is pixel-identical (channel = 255,255,255); dark mode
       flips every surface at once while preserving each opacity.

   Accessibility: dark surfaces are deep slate-indigo (not pure black)
   with WCAG-AA text contrast; muted text stays readable; focus rings,
   inputs, borders and badges all get explicit dark treatments below.
   Honour prefers-reduced-motion — the toggle never animates layout.
   ============================================================ */

:root {
    /* Channel for every convertible white surface (see header note). */
    --surface-rgb: 255, 255, 255;

    /* --ink-600 / --ink-800 are USED across eazydev.css (e.g. .onb-label) but
       were never defined — they fell back to dark literals that never flipped
       in dark mode. Define them here (light) + flip below (dark). */
    --ink-600: #475569;
    --ink-800: #1e293b;

    /* ---- Semantic theme tokens (requested API) ---- */
    --ez-bg:            #eef1ff;
    --ez-bg-soft:       #f5f7ff;
    --ez-surface:       #ffffff;
    --ez-surface-2:     #f8fafc;
    --ez-card:          #ffffff;
    --ez-border:        #e2e8f0;
    --ez-border-soft:   #eef1f6;
    --ez-text:          #0f172a;
    --ez-text-muted:    #64748b;
    --ez-heading:       #0f172a;
    --ez-primary:       #6366f1;
    --ez-primary-soft:  #eef2ff;
    --ez-danger:        #ef4444;
    --ez-success:       #10b981;
    --ez-warning:       #f59e0b;
    --ez-info:          #0ea5e9;
    --ez-input-bg:      #ffffff;
    --ez-input-border:  #d7deea;
    --ez-navbar-bg:     rgba(255, 255, 255, 0.72);
    --ez-sidebar-bg:    rgba(255, 255, 255, 0.55);
    --ez-footer-bg:     #0f172a;
    --ez-shadow:        0 12px 40px rgba(31, 38, 135, 0.12);
    --ez-overlay:       rgba(15, 23, 42, 0.45);

    color-scheme: light;
}

/* ============================================================
   DARK MODE
   Re-map the foundational tokens the component CSS already uses.
   ============================================================ */
html[data-theme="dark"] {
    color-scheme: dark;

    /* The single lever that flips every converted surface. */
    --surface-rgb: 26, 32, 52;

    /* ---- Ink scale FLIP (text light, "light" backgrounds dark) ---- */
    --ink-900: #e9edf6;   /* primary text          */
    --ink-700: #c5cde0;   /* strong secondary text */
    --ink-500: #9aa6c0;   /* muted but readable    */
    --ink-400: #7e8aa6;   /* faint                 */
    --ink-800: #d3dae9;   /* strong body text      */
    --ink-600: #97a3bd;   /* secondary text        */
    --ink-200: #313a5c;   /* borders / dividers    */
    --ink-100: #262d49;   /* hover / subtle fill   */
    --ink-50:  #1d2440;   /* lightest fill         */

    /* ---- Glass surfaces ---- */
    --glass-bg:        rgba(26, 32, 52, 0.66);
    --glass-bg-strong: rgba(26, 32, 52, 0.86);
    --glass-border:    rgba(148, 163, 210, 0.16);
    --glass-shadow:    0 14px 40px rgba(0, 0, 0, 0.50);
    --glass-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);

    /* ---- Brand soft tints (used as chip / hover backgrounds) ---- */
    --brand-50:  #20264a;
    --brand-100: #272f57;
    --brand-200: #34407a;
    /* brand-500/600/700 + accent stay the same — the indigo reads well on dark */

    /* ---- Status soft fills: deepen so text stays legible ---- */
    --success-soft: rgba(16, 185, 129, 0.18);
    --danger-soft:  rgba(239, 68, 68, 0.20);
    --warning-soft: rgba(245, 158, 11, 0.20);

    /* ---- Semantic --ez-* (dark) ---- */
    --ez-bg:            #0e1322;
    --ez-bg-soft:       #131a2c;
    --ez-surface:       #1a2034;
    --ez-surface-2:     #131a2c;
    --ez-card:          #1a2034;
    --ez-border:        #313a5c;
    --ez-border-soft:   #2a3252;
    --ez-text:          #e9edf6;
    --ez-text-muted:    #9aa6c0;
    --ez-heading:       #f1f4fb;
    --ez-primary:       #818cf8;
    --ez-primary-soft:  #20264a;
    --ez-input-bg:      #131a2c;
    --ez-input-border:  #3a4468;
    --ez-navbar-bg:     rgba(16, 21, 38, 0.82);
    --ez-sidebar-bg:    rgba(20, 26, 46, 0.80);
    --ez-footer-bg:     #0a0e1a;
    --ez-shadow:        0 14px 40px rgba(0, 0, 0, 0.5);
    --ez-overlay:       rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------
   Body backgrounds (the hardcoded gradients live outside the
   token system, so override them explicitly in dark mode).
   Higher specificity than the base rules + the public inline <style>.
   ------------------------------------------------------------ */
html[data-theme="dark"] body.app-shell {
    background:
        radial-gradient(1100px 600px at 80% -10%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(900px 500px at -10% 20%, rgba(139, 92, 246, 0.14), transparent 60%),
        radial-gradient(800px 500px at 50% 110%, rgba(14, 165, 233, 0.10), transparent 60%),
        linear-gradient(135deg, #0c1120 0%, #0e1322 50%, #120e22 100%);
    background-attachment: fixed;
}
html[data-theme="dark"] body.public-shell {
    background:
        radial-gradient(900px 600px at 80% -10%, rgba(99, 102, 241, 0.18), transparent 60%),
        radial-gradient(800px 500px at -10% 30%, rgba(139, 92, 246, 0.16), transparent 60%),
        radial-gradient(700px 500px at 50% 110%, rgba(14, 165, 233, 0.10), transparent 60%),
        linear-gradient(135deg, #0c1120 0%, #0e1322 50%, #120e22 100%) !important;
    background-attachment: fixed;
}
/* The root <html> element keeps a light fallback in eazydev.css; flip it so
   margins / overscroll / scrollbar gutters never show a light strip in dark. */
html[data-theme="dark"] { background-color: #0e1322 !important; }
html[data-theme="dark"] body { background-color: #0e1322; }

/* The auth shell keeps a vivid hero gradient, just deepened for dark. */
html[data-theme="dark"] body.auth-shell {
    background:
        radial-gradient(800px 500px at 80% 10%, rgba(139, 92, 246, 0.30), transparent 60%),
        radial-gradient(800px 500px at 10% 90%, rgba(99, 102, 241, 0.34), transparent 60%),
        linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
}

/* ------------------------------------------------------------
   Targeted dark fixups — surfaces that used SOLID colours the
   token remap can't reach, plus contrast guarantees.
   ------------------------------------------------------------ */
html[data-theme="dark"] {
    /* Bootstrap fallbacks some templates lean on */
    --bs-body-bg: #0e1322;
    --bs-body-color: #e9edf6;
}

/* Generic Bootstrap/util surfaces inside the dark app */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light { background-color: var(--ez-card) !important; }
html[data-theme="dark"] .text-dark { color: var(--ez-text) !important; }
html[data-theme="dark"] .text-muted { color: var(--ez-text-muted) !important; }
html[data-theme="dark"] .border { border-color: var(--ez-border) !important; }

/* Form controls — guarantee readable inputs in dark */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .premium-form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="tel"] {
    background-color: var(--ez-input-bg);
    border-color: var(--ez-input-border);
    color: var(--ez-text);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6b769180; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .premium-form-control:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.30);
}
/* Native date/number controls + dropdown chevrons go light */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); }

/* Tables — also override Bootstrap's --bs-table-* tokens, otherwise cell text
   falls back to near-black (#212529) which is invisible on dark. */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
    color: var(--ez-text);
    --bs-table-color: var(--ez-text);
    --bs-table-color-type: var(--ez-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ez-border);
    --bs-table-striped-color: var(--ez-text);
    --bs-table-hover-color: var(--ez-text);
}
html[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--ez-text);
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] thead th { color: var(--ez-text-muted); border-color: var(--ez-border); }
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] td, html[data-theme="dark"] th { border-color: var(--ez-border); }
html[data-theme="dark"] .table-hover tbody tr:hover > * { background-color: rgba(255, 255, 255, 0.04); }
/* v3.95.3 — the Sales table no longer uses sticky columns (the dual sticky froze
   the phone view); it scrolls cleanly as a whole, so no per-cell opaque override
   is needed. Only the swipe-hint text needs lifting off the dark background. */
html[data-theme="dark"] .sales-swipe-hint { color: #a5b4fc; }

/* Bootstrap modal + dropdown surfaces */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .offcanvas {
    background-color: var(--ez-card);
    color: var(--ez-text);
    border-color: var(--ez-border);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--ez-border); }
html[data-theme="dark"] .dropdown-item { color: var(--ez-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background-color: var(--ink-100); color: var(--ez-text); }
html[data-theme="dark"] .modal-backdrop { background: #000; }

/* Inputs/selects in the premium ez-select dropdown already dark-aware;
   keep its menu legible regardless of trigger surface */
html[data-theme="dark"] .ez-sel__trigger {
    background: var(--ez-input-bg);
    border-color: var(--ez-input-border);
    color: var(--ez-text);
}
html[data-theme="dark"] .ez-sel__label { color: var(--ez-text); }
html[data-theme="dark"] .ez-sel__placeholder { color: var(--ez-text-muted); }
html[data-theme="dark"] .ez-sel__chevron,
html[data-theme="dark"] .ez-sel__arrow { color: var(--ez-text-muted); }
html[data-theme="dark"] .ez-sel__trigger:focus,
html[data-theme="dark"] .ez-sel__trigger.is-open {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28);
}
html[data-theme="dark"] .ez-sel__menu {
    background: var(--ez-card);
    border-color: var(--ez-border);
    color: var(--ez-text);
}
html[data-theme="dark"] .ez-sel__opt { color: var(--ez-text); }
html[data-theme="dark"] .ez-sel__opt:hover,
html[data-theme="dark"] .ez-sel__opt[aria-selected="true"] { background: var(--ink-100); }

/* Brand-tinted labels (brand-700 #4338ca) read too dark on dark surfaces —
   lift them to a lighter indigo so sidebar group labels / role tags / small
   accent figures stay legible. */
html[data-theme="dark"] .nav-group__label,
html[data-theme="dark"] .role-tag,
html[data-theme="dark"] .onb-pct,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .badge-soft.brand,
html[data-theme="dark"] .topbar-help-label,
html[data-theme="dark"] .topbar-help,
html[data-theme="dark"] .help-chip,
html[data-theme="dark"] .help-chip-label,
html[data-theme="dark"] .help-chip .ez-ico,
html[data-theme="dark"] .kpi-accent { color: #a5b4fc !important; }
html[data-theme="dark"] .help-chip { border-color: rgba(165, 180, 252, 0.28); }

/* Code / pre */
html[data-theme="dark"] code, html[data-theme="dark"] pre,
html[data-theme="dark"] kbd { background: #0b0f1c; color: #d7def0; }

/* Horizontal rules / dividers */
html[data-theme="dark"] hr { border-color: var(--ez-border); opacity: 1; }

/* ============================================================
   PLATFORM ADMIN — already dark by design (--pa-* tokens).
   Provide a LIGHT remap so the admin honours Light mode too.
   ============================================================ */
html[data-theme="light"] body.pa-shell {
    --pa-bg:        #eef1f7;
    --pa-surface:   #ffffff;
    --pa-card:      #ffffff;
    --pa-surface-2: #f4f6fb;
    --pa-panel:     #ffffff;
    --pa-panel-2:   #f7f9fd;
    --pa-border:    #e6eaf3;
    --pa-border-2:  #d7deea;
    --pa-text:      #0f172a;
    --pa-muted:     #5b6678;
    /* v3.91 — light remap for the content-area tokens added in platform-admin.css.
       Cards on a light page need a SOFT shadow (not the deep dark one), neutral
       fills for chips/buttons/badges (the old rgba(255,255,255,x) was invisible
       on white), and a darker brand icon so it reads on a light tile. The dark
       sidebar + topbar chrome is intentionally left dark (approved design). */
    --pa-shadow:    0 6px 20px rgba(15,23,42,0.07);
    --pa-shadow-sm: 0 2px 8px rgba(15,23,42,0.05);
    --pa-fill:      #f3f5fb;
    --pa-fill-2:    #e9edf6;
    --pa-ico-bg:    rgba(99,102,241,0.10);
    --pa-ico-fg:    #4f46e5;
    --pa-warn-text: #b45309;   /* darker amber for pale-amber tints on white */
}
html[data-theme="light"] body.pa-shell {
    background: var(--pa-bg);
    color: var(--pa-text);
}
/* Light-mode content tweaks that can't be a pure token swap. */
html[data-theme="light"] body.pa-shell table.pa-table tr:hover td { background: #f6f8fc; }
html[data-theme="light"] body.pa-shell table.pa-table th { color: #475569; }
html[data-theme="light"] body.pa-shell .pa-input,
html[data-theme="light"] body.pa-shell .pa-select { background: #ffffff; }
html[data-theme="light"] body.pa-shell .pa-input::placeholder { color: #94a3b8; }
html[data-theme="light"] body.pa-shell .pa-empty i { color: #94a3b8; }
html[data-theme="light"] body.pa-shell .pa-table-wrap {
    scrollbar-color: rgba(99,102,241,0.5) rgba(15,23,42,0.06);
}
html[data-theme="light"] body.pa-shell .pa-table-wrap::-webkit-scrollbar-track { background: rgba(15,23,42,0.05); }
/* The premium select chevron is a light glyph (a5b4fc) baked for dark; on a
   white input use a darker brand glyph so it stays visible. */
html[data-theme="light"] body.pa-shell .pa-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* v3.91 — per-page admin CMS pages (Help / FAQ / Updates / Newsletter /
   Maintenance / Subscribers / Subscriptions) ship inline <style> blocks whose
   list titles, headings, slide-over panel headings + labels hardcode dark-mode
   light text (#fff / #e6eaf5 / #cbd5e1 / #e2e8f0). Their card + panel surfaces
   flip to white in light mode (via --pa-card / --pa-panel), so that text became
   washed-out/invisible. Flip ONLY the text colour in light mode (backgrounds +
   gradient-on icons are left alone). Dark mode is untouched. */
html[data-theme="light"] body.pa-shell :is(
    .ha-titles h2, .ha-title, .hap-head h3, .hap-check,
    .faq-q, .fqp-head h3, .fqp-check,
    .upd-head h2, .upd-title, .upp-head h3, .upp-check,
    .nlc-head h2, .nlc-title, .nlp-head h3, .nlp-check,
    .pa-sub-edit[open] > summary
) { color: var(--pa-text); }
html[data-theme="light"] body.pa-shell :is(
    .ha-chip, .ha-badge, .hap-body label, .hap-close,
    .fqp-body label, .fqp-close,
    .upp-body label, .upp-close,
    .nlp-body label, .nlp-close,
    .mw-window .val, .mw-cancel, .subs-close
) { color: var(--pa-muted); }
/* Light hover states that previously forced white text on a pale tint. */
html[data-theme="light"] body.pa-shell :is(
    .hap-close:hover, .fqp-close:hover, .upp-close:hover, .nlp-close:hover,
    .subs-close:hover, .mw-btn:hover
) { color: var(--pa-text); }

/* v3.91 — brand/violet-tinted pills, badges + buttons use LIGHT lavender text
   (#c7d2fe / #c4b5fd) designed for a dark surface. Over a pale indigo/violet
   tint on a white card that is low-contrast, so darken the text to a readable
   brand indigo in light mode (the translucent tint background is unchanged so
   dark mode is untouched). */
html[data-theme="light"] body.pa-shell :is(
    .pa-badge.brand,
    .mw-pill.active, .mw-pill.active .n, .mw-btn.go, .mw-btn-wide.go,
    .ha-badge.cat,
    .cms-badge, .cms-badge.st-internal
) { color: #4338ca; }
/* Amber feature/warning tints keep their hue but darkened for white-bg contrast. */
html[data-theme="light"] body.pa-shell :is(
    .ha-chip.admin, .ha-badge.feat, .cms-badge.feat,
    .cmp-pill.warn, .cmp-rbadge.warn, .cmp-link__badge.warn,
    .mw-b-scheduled, .mw-b-banner
) { color: var(--pa-warn-text); }
/* Rose "admin-only" tint darkened for white-bg contrast. */
html[data-theme="light"] body.pa-shell .ha-badge.admin { color: #be123c; }
/* Active filter pill: give it a readable brand-tint + darker label in light. */
html[data-theme="light"] body.pa-shell .mw-pill.active { background: rgba(99,102,241,0.14); }

/* ============================================================
   BRAND LOGO  (.ez-logo) — SVG-first, theme-aware (v3.86)
   Renders both the light + dark SVG; CSS shows the right one for the
   active html[data-theme]. Sized by HEIGHT so it scales crisply; never
   overflows its container on mobile.
   ============================================================ */
.ez-brand { display: inline-flex; align-items: center; text-decoration: none; max-width: 100%; }
.ez-logo {
    display: inline-flex;
    align-items: center;
    height: 34px;          /* default; override via inline height or a wrapper */
    line-height: 0;
    max-width: 100%;
}
.ez-logo__img {
    height: 100%;
    width: auto;
    max-width: 100%;
    display: block;
    user-select: none;
}
/* Theme swap — generic: show the light SVG in light themes, the dark SVG in
   dark. Forced logos (force="dark|light") render a single plain .ez-logo__img
   with no --light/--dark suffix, so they are intentionally unaffected. The
   pre-paint script sets data-theme before first paint, so there's no flash. */
.ez-logo__img--dark { display: none; }
html[data-theme="dark"] .ez-logo__img--light { display: none; }
html[data-theme="dark"] .ez-logo__img--dark { display: block; }

/* ============================================================
   THEME TOGGLE COMPONENT  (.ez-theme-toggle)
   A compact segmented control: sun / monitor / moon.
   Used in public nav, dashboard topbar, admin topbar, mobile menu.
   ============================================================ */
.ez-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(120, 130, 170, 0.14);
    border: 1px solid var(--glass-border, rgba(148, 163, 210, 0.18));
    line-height: 0;
}
.ez-theme-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 999px;
    color: var(--ink-500, #64748b);
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.ez-theme-toggle__btn:hover { color: var(--ink-900, #0f172a); }
.ez-theme-toggle__btn[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.40);
}
.ez-theme-toggle__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45);
}
.ez-theme-toggle .ez-ico { width: 17px; height: 17px; }

/* Dark-shell variant (platform admin dark / dashboard dark) */
html[data-theme="dark"] .ez-theme-toggle { background: rgba(255, 255, 255, 0.06); }
body.pa-shell .ez-theme-toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); }
body.pa-shell .ez-theme-toggle__btn { color: #9aa6c0; }
body.pa-shell .ez-theme-toggle__btn:hover { color: #fff; }

/* A floating toggle for standalone auth / error pages (no nav bar).
   Frosted glass chip — visible on the vivid auth gradient AND on plain pages. */
.ez-theme-fab {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1600;
    background: var(--glass-bg-strong, rgba(255, 255, 255, 0.82));
    border: 1px solid var(--glass-border, rgba(148, 163, 210, 0.30));
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-radius: 999px;
    padding: 3px;
}
.ez-theme-fab .ez-theme-toggle { background: transparent; border: 0; }
@media (max-width: 480px) {
    .ez-theme-fab { top: 10px; right: 10px; }
    .ez-theme-fab .ez-theme-toggle__btn { width: 28px; height: 28px; }
}

/* Account-settings full radio row (.ez-theme-choices) */
.ez-theme-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.ez-theme-choice {
    flex: 1 1 150px;
    min-width: 140px;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border: 1.5px solid var(--ez-border);
    border-radius: 14px;
    background: var(--ez-surface);
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.ez-theme-choice:hover { border-color: var(--brand-300, #a5b4fc); }
.ez-theme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ez-theme-choice.is-active {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}
.ez-theme-choice__ico {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: var(--ez-primary-soft);
    color: var(--brand-600);
}
.ez-theme-choice__t { font-weight: 700; font-size: 14px; color: var(--ez-heading); }
.ez-theme-choice__s { font-size: 12px; color: var(--ez-text-muted); }

/* Mobile-menu theme row (public nav) */
.ez-prem-mobile-menu__theme {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 4px 4px;
}
.ez-prem-mobile-menu__theme-label {
    font-weight: 600; font-size: 14px; color: var(--ink-700, #334155);
}

/* ============================================================
   Public-page dark fixups for the inline <style> gradients that
   live outside the token system (specificity beats the inline rules).
   ============================================================ */
html[data-theme="dark"] .public-nav { border-bottom-color: var(--glass-border); }
/* Gradient-text headlines use deep-indigo stops (e.g. .ez-prem-headline starts
   at #1e1b4b !important) that vanish on dark — force a light gradient. The
   !important is required to beat public-premium.css's own !important rule. */
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .ez-prem-headline,
html[data-theme="dark"] .ez-prem-hero__title,
html[data-theme="dark"] .section-title.grad,
html[data-theme="dark"] .grad-text,
html[data-theme="dark"] .gradient-text,
html[data-theme="dark"] .text-gradient,
html[data-theme="dark"] .svc-h2,
html[data-theme="dark"] .svc-hero-title {
    background: linear-gradient(135deg, #f1f4fb 0%, #a5b4fc 55%, #d8b4fe 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
/* Soften the brand-button glow in dark — the light-mode glow reads as a harsh
   halo on a dark page. */
html[data-theme="dark"] .btn-brand,
html[data-theme="dark"] .premium-btn,
html[data-theme="dark"] .ez-prem-nav__cta,
html[data-theme="dark"] .btn-primary {
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.22);
}
html[data-theme="dark"] .btn-brand:hover,
html[data-theme="dark"] .premium-btn:hover,
html[data-theme="dark"] .ez-prem-nav__cta:hover,
html[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.30);
}
/* Eyebrow / soft brand chips read fine (brand-soft flips). Cards on the
   public pages use --ink-* / converted surfaces, so they flip automatically. */
html[data-theme="dark"] .ez-prem-bg { opacity: 0.55; }

/* Footer already dark in light mode; deepen it a touch in dark mode. */
html[data-theme="dark"] .ez-prem-footer,
html[data-theme="dark"] footer.ez-prem-footer { background: var(--ez-footer-bg); }

/* ============================================================
   AUTH PAGES (dark) — the auth card has a LOCKED pure-white
   contract in LIGHT mode (CLAUDE §15.26), so we never sed-convert
   auth-form/auth-premium CSS. Instead, give the card an explicit
   dark treatment ONLY under [data-theme="dark"] (light untouched).
   The left hero panel keeps its deep-indigo gradient (works in both).
   ============================================================ */
/* High specificity + !important so we beat the locked v3.28.5 white-card
   selectors (e.g. body.auth-shell .ez-auth-form-wrap .auth-card). Dark only —
   the light contract is never touched. */
html[data-theme="dark"] body.auth-shell .auth-split,
html[data-theme="dark"] body.auth-shell .login-split {
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.65);
}
html[data-theme="dark"] body.auth-shell .auth-card,
html[data-theme="dark"] body.auth-shell .ez-auth-form-wrap .auth-card,
html[data-theme="dark"] body.auth-shell .auth-split .auth-card,
html[data-theme="dark"] body.auth-shell .auth-form-panel {
    background: #161c30 !important;
    border-color: #2a3252 !important;
    color: var(--ez-text) !important;
}
html[data-theme="dark"] body.auth-shell .auth-card__title,
html[data-theme="dark"] body.auth-shell .auth-form-group__label,
html[data-theme="dark"] body.auth-shell .auth-card h1,
html[data-theme="dark"] body.auth-shell .auth-card h2 { color: #f1f4fb !important; }
html[data-theme="dark"] body.auth-shell .auth-card__sub,
html[data-theme="dark"] body.auth-shell .auth-helper,
html[data-theme="dark"] body.auth-shell .auth-form-meta,
html[data-theme="dark"] body.auth-shell .auth-secured,
html[data-theme="dark"] body.auth-shell .auth-card p,
html[data-theme="dark"] body.auth-shell .auth-card label { color: var(--ez-text-muted) !important; }

html[data-theme="dark"] body.auth-shell .auth-input,
html[data-theme="dark"] body.auth-shell .premium-form-control,
html[data-theme="dark"] body.auth-shell .field input {
    background: #0f1525 !important;
    border-color: #313a5c !important;
    color: #e9edf6 !important;
}
html[data-theme="dark"] body.auth-shell .auth-input::placeholder { color: #6b7691 !important; }
html[data-theme="dark"] body.auth-shell .auth-input:focus {
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.26) !important;
}
html[data-theme="dark"] body.auth-shell .auth-input-icon,
html[data-theme="dark"] body.auth-shell .field-icon { color: #9aa6c0 !important; }
html[data-theme="dark"] body.auth-shell .auth-password-toggle,
html[data-theme="dark"] body.auth-shell .field-toggle { color: #9aa6c0 !important; }
html[data-theme="dark"] body.auth-shell .auth-password-toggle:hover { color: #fff !important; }

html[data-theme="dark"] body.auth-shell .auth-foot-link {
    background: #0f1525 !important;
    border-color: #2a3252 !important;
    color: #c5cde0 !important;
}
html[data-theme="dark"] body.auth-shell .auth-foot-link:hover { border-color: var(--brand-500) !important; color: #fff !important; }
html[data-theme="dark"] body.auth-shell .auth-link { color: #a5b4fc !important; }
html[data-theme="dark"] body.auth-shell .auth-copyright,
html[data-theme="dark"] body.auth-shell .ac-foot { color: #7e8aa6 !important; }

html[data-theme="dark"] body.auth-shell .auth-checkbox input[type="checkbox"] { accent-color: var(--brand-500); }
/* v4.3 — per-level auth alerts in dark mode. The old blanket rule painted
   EVERY .auth-alert red, so a SUCCESS activation message showed as a red error.
   Match the Django message level (tags: success/info/warning/error/danger). */
html[data-theme="dark"] body.auth-shell .auth-alert.success {
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: rgba(16, 185, 129, 0.40) !important;
    border-left-color: rgba(16, 185, 129, 0.70) !important;
    color: #6ee7b7 !important;
}
html[data-theme="dark"] body.auth-shell .auth-alert.info {
    background: rgba(99, 102, 241, 0.16) !important;
    border-color: rgba(99, 102, 241, 0.40) !important;
    border-left-color: rgba(129, 140, 248, 0.70) !important;
    color: #c7d2fe !important;
}
html[data-theme="dark"] body.auth-shell .auth-alert.warning {
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(245, 158, 11, 0.40) !important;
    border-left-color: rgba(245, 158, 11, 0.70) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] body.auth-shell .auth-alert.error,
html[data-theme="dark"] body.auth-shell .auth-alert.danger,
html[data-theme="dark"] body.auth-shell .auth-alert:not(.success):not(.info):not(.warning):not(.error):not(.danger) {
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    border-left-color: rgba(239, 68, 68, 0.70) !important;
    color: #fca5a5 !important;
}
/* Standalone single-card auth pages (reset / 2FA / activation). */
html[data-theme="dark"] body.auth-shell .ac-icon { background: #20264a !important; color: #c4b5fd !important; }
html[data-theme="dark"] body.auth-shell .ac-brand .wm,
html[data-theme="dark"] body.auth-shell .auth-card .ac-brand .wm { color: #f1f4fb !important; }

@media (prefers-reduced-motion: reduce) {
    .ez-theme-toggle__btn, .ez-theme-choice { transition: none; }
}

/* ============================================================
   v3.87.5 — dark-mode polish: POS cart headers, plan badges,
   info notes (invite modal), and validation states.
   ============================================================ */

/* Plain table headers had a HARDCODED light background that stayed bright on
   dark (the washed-out "ITEM / QTY / PRICE / TOTAL" bar on the offline POS
   cart). Give them a subtle dark strip + muted text in dark mode. Light mode
   is untouched. */
html[data-theme="dark"] .table-wrap thead th,
html[data-theme="dark"] .pos-cart-table thead th {
    background: rgba(255, 255, 255, 0.045);
    color: var(--ez-text-muted);
    border-color: var(--ez-border);
}
html[data-theme="dark"] .table-wrap.table-scroll thead th {
    background: var(--ez-card);
}

/* Account plan badge — the light tones were hardcoded light-bg + light-text and
   washed out on dark (the "FREE" pill was nearly invisible). Legible dark
   variants below; business/enterprise gradients already read fine, so kept. */
html[data-theme="dark"] .ez-plan-badge--free {
    background: rgba(255, 255, 255, 0.09); color: var(--ez-text);
    border-color: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .ez-plan-badge--starter {
    background: rgba(139, 92, 246, 0.20); color: #d8b4fe;
    border-color: rgba(139, 92, 246, 0.42);
}
html[data-theme="dark"] .ez-plan-badge--trial {
    background: rgba(99, 102, 241, 0.22); color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.42);
}
html[data-theme="dark"] .ez-plan-badge--grace {
    background: rgba(217, 119, 6, 0.20); color: #fcd34d;
    border-color: rgba(217, 119, 6, 0.42);
}
html[data-theme="dark"] .ez-plan-badge--expired {
    background: rgba(220, 38, 38, 0.20); color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.42);
}

/* Reusable info note (invite-member modal, any "must already have an account"
   style banner) — theme-aware so it never ships a bright box on a dark modal. */
.ez-info-note {
    display: block; background: var(--brand-50); color: var(--brand-700);
    border: 1px solid var(--brand-100); border-radius: 12px;
    padding: 12px; font-size: 13px; line-height: 1.5;
}
.ez-info-note b { color: inherit; }
.ez-info-note a { color: var(--brand-700); font-weight: 600; }
html[data-theme="dark"] .ez-info-note {
    background: rgba(99, 102, 241, 0.14); color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.34);
}
html[data-theme="dark"] .ez-info-note a { color: #a5b4fc; }

/* Light-red validation backgrounds (salesman cart + sale item rows) → readable
   dark-red tint in dark mode. */
html[data-theme="dark"] .sm-cart-row.is-bad,
html[data-theme="dark"] .sale-item-row.is-invalid {
    background: rgba(220, 38, 38, 0.13);
    border-color: rgba(248, 113, 113, 0.5);
}

/* Owner-only Danger zone (business settings) — the pale-red gradient + dark-red
   heading/body/button are unreadable on a dark surface. Flip to a deep-red
   tinted card with bright, legible red text. */
html[data-theme="dark"] .danger-zone {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.12), var(--glass-bg-strong)) !important;
    border-color: rgba(248, 113, 113, 0.40) !important;
}
html[data-theme="dark"] .danger-zone__title { color: #fca5a5 !important; }
html[data-theme="dark"] .danger-zone .text-muted-soft { color: #cbd5e1 !important; }
html[data-theme="dark"] .danger-zone__title .ez-ico,
html[data-theme="dark"] .danger-zone h5 .ez-ico { color: #f87171; }
html[data-theme="dark"] .btn-soft-danger {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fca5a5;
}
html[data-theme="dark"] .btn-soft-danger:hover {
    background: rgba(220, 38, 38, 0.28);
    color: #fecaca;
}

/* v4.1 — soft-brand buttons ("Install app" etc.) were dark-indigo text on a
   dark surface (unreadable). Lift to white text on a clear brand-tinted fill. */
html[data-theme="dark"] .btn-soft-brand {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(129, 140, 248, 0.45);
    color: #fff;
}
html[data-theme="dark"] .btn-soft-brand:hover {
    background: rgba(99, 102, 241, 0.34);
    color: #fff;
}
html[data-theme="dark"] .btn-soft-brand .ez-ico { color: #fff; }
/* Ghost CTA ("View pricing") — brand-700 text reads too dark on dark. */
html[data-theme="dark"] .ez-prem-cta--ghost,
html[data-theme="dark"] .ez-prem-cta--ghost span { color: #e6e9ff; }
html[data-theme="dark"] .ez-prem-cta--ghost:hover,
html[data-theme="dark"] .ez-prem-cta--ghost:hover span { color: #fff; }

/* Offline POS large-list browser (v3.97) — keep the low/out badges + the
   out-of-stock meta legible on the dark POS surface. */
html[data-theme="dark"] .pos-prod__badge--low { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
html[data-theme="dark"] .pos-prod__badge--out { background: rgba(220, 38, 38, 0.20); color: #fca5a5; }
html[data-theme="dark"] .pos-prod__out { color: #fca5a5; }
html[data-theme="dark"] .pos-chips::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); }