/* ============================================================
   TiqLab — Lab Theme Overlay
   ------------------------------------------------------------
   Pairs with lab/assets/theme.js. Re-binds the CSS variables
   declared inline inside each lab/*.html page so the entire
   internal system gains a Light mode whose visual identity
   matches the public marketing page (tiqlab/index.html) —
   navy + teal on light surfaces — while preserving the
   existing dark (indigo + slate) identity as the default.

   Strategy:
   - Dark mode is the original inline :root values (no change).
   - :root[data-theme="light"] overrides only the colour-bearing
     tokens. Everything else (spacing, radii, gradients defined
     in terms of these tokens) adapts automatically.
   ============================================================ */

/* -----------------------------------------------------------
   Light mode — shared lab token re-binding
   ----------------------------------------------------------- */
:root[data-theme="light"] {
    /* ── Brand (mapped to tiqlab/index.html identity) ── */
    --primary:        #1C7C6C;   /* was #6366f1 — ngu-teal */
    --primary-dark:   #176A5C;   /* was #4f46e5 — teal hover */
    --primary-light:  #2EA08D;   /* was #818cf8 — ngu-teal-light */
    --secondary:      #2BB673;   /* was #10b981 — ngu-green */
    --secondary-dark: #1F9E5F;   /* was #059669 */
    --warning:        #E89F2B;   /* was #f59e0b — ngu-amber */
    --warning-dark:   #B57514;   /* was #d97706 */
    --danger:         #C75B5B;   /* was #ef4444 — ngu-rose */
    --danger-dark:    #A84747;   /* was #dc2626 */
    --info:           #1FA3D8;   /* was #3b82f6 — ngu-cyan */

    /* login.html-specific aliases */
    --error:   #C75B5B;   /* was #ef4444 */
    --success: #2BB673;   /* was #22c55e */

    /* ── Surfaces & text ── */
    --bg-dark:        #F5F7FA;   /* was #0f172a — ngu-bg (page surface) */
    --bg-card:        #FFFFFF;   /* was #1e293b — card surface */
    --bg-hover:       #EEF2F7;   /* was #334155 — ngu-bg-soft */
    --bg-input:       #FFFFFF;   /* was #0f172a — input surface */
    --text-primary:   #172033;   /* was #f1f5f9 — ngu-text */
    --text-secondary: #2A3852;   /* was #94a3b8 — ngu-text-soft */
    --text-muted:     #667085;   /* was #64748b — ngu-muted */
    --border:         #E4E9F0;   /* was #334155 — ngu-line */
    --border-focus:   var(--primary);

    /* ── Shadows — lighter for light surfaces ── */
    --shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.05), 0 1px 3px rgba(23, 32, 51, 0.04);
    --shadow-md: 0 4px 12px rgba(23, 32, 51, 0.06), 0 2px 4px rgba(23, 32, 51, 0.04);
    --shadow-lg: 0 18px 40px -14px rgba(31, 58, 95, 0.12), 0 6px 16px -6px rgba(23, 32, 51, 0.06);

    /* The default --gradient is defined per-page as
       linear-gradient(135deg, var(--primary), var(--secondary))
       and therefore re-renders automatically with the new
       teal + green values. No need to override it here. */
}

/* -----------------------------------------------------------
   Light mode — vip-landing.html (uses a different token set)
   Preserves the luxe honey/gold accents; only flips the
   black/dark/card surfaces and text to light counterparts.
   ----------------------------------------------------------- */
:root[data-theme="light"] {
    --black: #F5F7FA;        /* was #1a1a2e — page bg */
    --dark:  #EEF2F7;        /* was #16213e — secondary bg */
    --card:  #FFFFFF;        /* was #1e293b — card surface */
    --text:  #172033;        /* was #f8fafc — primary text */
    /* --text-muted, --success already remapped above */
    /* --honey, --gold, --bronze, --silver, --platinum stay — luxury accents */
    --gradient-dark: linear-gradient(135deg, #F5F7FA 0%, #EEF2F7 100%);
}

/* -----------------------------------------------------------
   Smooth swap on toggle (respect reduced-motion)
   ----------------------------------------------------------- */
html, body {
    transition: background-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    html, body { transition: none; }
}

/* -----------------------------------------------------------
   Floating theme toggle — injected by theme.js
   Sits at the top corner of every lab page above other UI.
   ----------------------------------------------------------- */
.theme-toggle-btn {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    inset-inline-end: calc(12px + env(safe-area-inset-right, 0px));
    z-index: 9999;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border, #334155);
    background: var(--bg-card, #1e293b);
    color: var(--text-primary, #f1f5f9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.4));
    transition: background-color .2s ease,
                border-color .2s ease,
                transform .2s ease,
                box-shadow .2s ease,
                color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle-btn:hover {
    transform: translateY(-1px);
    border-color: var(--primary, #6366f1);
    color: var(--primary, #6366f1);
}
.theme-toggle-btn:active {
    transform: translateY(0);
}
.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--primary, #6366f1);
    outline-offset: 2px;
}
.theme-toggle-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    transition: transform .25s ease, opacity .2s ease;
}
/* Show the icon that represents the *destination* theme:
   dark active  → show sun  (click to go light)
   light active → show moon (click to go dark) */
.theme-toggle-btn .icon-moon { display: none; }
.theme-toggle-btn .icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle-btn .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle-btn .icon-moon { display: block; }

/* RTL note: position uses logical `inset-inline-end` so the button
   anchors to the visual end (right in LTR, left in RTL with dir="rtl"
   on <html>) without extra rules. */

/* On very small screens nudge the button down a hair to clear
   common sticky page-toolbars. */
@media (max-width: 480px) {
    .theme-toggle-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        top: calc(8px + env(safe-area-inset-top, 0px));
        inset-inline-end: calc(8px + env(safe-area-inset-right, 0px));
    }
    .theme-toggle-btn svg { width: 18px; height: 18px; }
}

/* When the user prints, hide the floating control */
@media print {
    .theme-toggle-btn { display: none !important; }
}

/* ============================================================
   LIGHT MODE — CONTRAST PATCHES
   ------------------------------------------------------------
   Targeted overrides for hardcoded colours that the per-page
   CSS bakes in (i.e. values that don't flow through the shared
   tokens). Each block addresses a specific component that
   appears identically across multiple lab pages.

   Strategy:
   - Scope every rule under :root[data-theme="light"] so dark
     mode renders exactly as before.
   - Prefer class selectors that match existing markup so we
     never need to touch the HTML.
   - Use !important only where an inline style="..." attribute
     would otherwise win; never for stylesheet vs stylesheet.
   ============================================================ */

/* ── 1. Pastel status/profit text colours ────────────────────
   Pages bake in tailwind-style pastels (`#4ade80`, `#fbbf24`,
   `#f87171`, `#fca5a5`, `#818cf8`) that fail AA on a white
   surface. Remap them to AA-passing darker variants while
   keeping the same hue family. The inline styles in
   ticket.html / quick-ticket.html require !important. */
:root[data-theme="light"] .profit-badge.high,
:root[data-theme="light"] .profit-item-value.profit,
:root[data-theme="light"] .profit-value.profit,
:root[data-theme="light"] .profit-total-item .value.profit,
:root[data-theme="light"] .log-success,
:root[data-theme="light"] .status.success,
:root[data-theme="light"] .customer-badge.new,
:root[data-theme="light"] [style*="#4ade80"],
:root[data-theme="light"] [style*="#34d399"] {
    color: #1F9E5F !important;       /* dark green — AA on white */
}
:root[data-theme="light"] .profit-badge.medium,
:root[data-theme="light"] .customer-badge.vip,
:root[data-theme="light"] .log-skip,
:root[data-theme="light"] .status.warning,
:root[data-theme="light"] [style*="#fbbf24"] {
    color: #B57514 !important;       /* dark amber — AA on white */
}
:root[data-theme="light"] .profit-badge.low,
:root[data-theme="light"] .profit-item-value.cost,
:root[data-theme="light"] .profit-value.cost,
:root[data-theme="light"] .profit-total-item .value.cost,
:root[data-theme="light"] .log-error,
:root[data-theme="light"] .status.error,
:root[data-theme="light"] .customer-badge.inactive,
:root[data-theme="light"] .customer-badge.deleted-badge,
:root[data-theme="light"] [style*="#f87171"],
:root[data-theme="light"] [style*="#fca5a5"] {
    color: #B14040 !important;       /* dark red — AA on white */
}
:root[data-theme="light"] .summary-item-sub .cost-label,
:root[data-theme="light"] .stock-badge.zero {
    color: #B14040;
}
:root[data-theme="light"] .customer-badge.regular {
    color: #176A5C;                  /* teal-dark — matches new primary family */
}
/* stat-icon colour swatches inside .stat-icon.{blue,green,orange,purple}
   keep their dark-mode hue (those values already pass AA on a
   translucent background even in light). */

/* ── 2. .powered-by-nci badge ────────────────────────────────
   Appears in 8 headers as a small dark gradient pill with a
   green border. In light mode flip the gradient to a subtle
   light surface so the badge looks intentional, not glitched. */
:root[data-theme="light"] .powered-by-nci {
    background: linear-gradient(135deg, var(--bg-hover) 0%, var(--bg-card) 100%) !important;
    border-color: rgba(28, 124, 108, 0.35) !important;
    box-shadow: 0 1px 2px rgba(23, 32, 51, 0.05);
}
:root[data-theme="light"] .powered-by-nci .nci-label,
:root[data-theme="light"] .powered-by-nci .nci-name {
    color: var(--text-primary);
}

/* ── 3. .profit-analysis card (ticket.html) ──────────────────
   Hardcoded `linear-gradient(135deg, #0a1628, #0f172a)` —
   becomes a subtle teal-tinted card in light mode, preserving
   the green accent border. */
:root[data-theme="light"] .profit-analysis {
    background: linear-gradient(135deg, #F4FBF9 0%, #ECFDF5 100%) !important;
    border-color: rgba(28, 124, 108, 0.20) !important;
}
:root[data-theme="light"] .profit-analysis .profit-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
}

/* ── 4. Cost & Profit Analysis section in quick-ticket.html ──
   This one is set via inline style attribute:
     style="background: linear-gradient(135deg, #1a2332 0%, #0f172a 100%);
            border: 1px solid rgba(59, 130, 246, 0.2);"
   so we must override with !important. */
:root[data-theme="light"] .summary-section.profit-section {
    background: linear-gradient(135deg, #F4F8FC 0%, #EAF2FA 100%) !important;
    border: 1px solid rgba(31, 163, 216, 0.25) !important;
    color: var(--text-primary);
}

/* ── 5. sync-users.html — entirely hardcoded standalone page ─
   Body, .card, th, .log, .back-link all bake in slate values.
   We scope the body override via :has() so it only repaints
   the body on pages that actually contain the sync-users
   structure (container > card), not every lab page. */
:root[data-theme="light"] body:has(> .container > .card) {
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-hover) 100%) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .log {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="light"] table th {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="light"] table td,
:root[data-theme="light"] table th {
    border-color: var(--border) !important;
}
:root[data-theme="light"] .back-link {
    color: var(--text-secondary) !important;
}
:root[data-theme="light"] .back-link:hover {
    color: var(--primary) !important;
}

/* ── 6. ticket-label.html modal + toolbar ────────────────────
   Hardcoded #1e293b / #0f172a / #334155 surfaces. Override
   them to use the theme tokens so the print-prep view works
   in light too. */
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .modal-btn.cancel,
:root[data-theme="light"] .btn-close,
:root[data-theme="light"] .toggle-btn,
:root[data-theme="light"] .toggle-btn.return-mode {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}
:root[data-theme="light"] .modal-content input,
:root[data-theme="light"] .modal-content textarea,
:root[data-theme="light"] .modal-content select {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* ── 7. device-intake-form.html on-screen control bar ───────
   The bottom-fixed toolbar uses `background: #0f172a` plus
   `.btn-close { background: #334155; color: #e2e8f0; }`.
   Keep .btn-print (yellow) and .btn-pdf (red) untouched —
   those are intentional action colours. */
:root[data-theme="light"] .control-bar {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -4px 14px rgba(23, 32, 51, 0.08) !important;
}
:root[data-theme="light"] .control-bar .btn-close {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="light"] .control-divider {
    background: var(--border) !important;
}
:root[data-theme="light"] .field-value.empty,
:root[data-theme="light"] .field.block .field-value-inner.empty {
    color: var(--text-muted);
}

/* ── 8. vip-landing.html — luxury page surface fix ───────────
   The marketing-style page hardcodes its header bg, the
   tier-card list dividers and the modal close button. We
   scope every selector via `body:has(.tier-features)` so it
   ONLY applies on vip-landing (the only page with that
   structure) — without that guard we'd recolour the header
   on every internal lab page. */
:root[data-theme="light"] body:has(.tier-features) .header {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(8px);
}
:root[data-theme="light"] body:has(.tier-features) .tier-features li {
    border-bottom-color: var(--border) !important;
}
:root[data-theme="light"] body:has(.tier-features) .modal-close {
    background: rgba(20, 38, 63, 0.08) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="light"] body:has(.tier-features) .input-group input,
:root[data-theme="light"] body:has(.tier-features) .input-group select,
:root[data-theme="light"] body:has(.tier-features) .input-group textarea {
    border-color: var(--border) !important;
    color: var(--text-primary);
}

/* ── 9. VIP tier badges — silver/gold contrast on white ──────
   On dark backgrounds the metallic colours read fine; on a
   white surface they almost disappear. Swap to darker neutrals
   that still convey the same tier hierarchy. */
:root[data-theme="light"] .vip-badge.silver,
:root[data-theme="light"] .member-level.silver {
    background: rgba(120, 120, 130, 0.18) !important;
    color: #5A5F6A !important;
}
:root[data-theme="light"] .vip-badge.gold,
:root[data-theme="light"] .member-level.gold {
    background: rgba(217, 164, 6, 0.18) !important;
    color: #8A6508 !important;
}
:root[data-theme="light"] .vip-badge.platinum,
:root[data-theme="light"] .member-level.platinum {
    background: rgba(110, 120, 140, 0.18) !important;
    color: #4A5160 !important;
}
:root[data-theme="light"] .vip-badge.bronze,
:root[data-theme="light"] .member-level.bronze {
    background: rgba(160, 100, 40, 0.18) !important;
    color: #7A4A18 !important;
}

/* ── 10. Translucent white overlays on now-light surfaces ────
   `rgba(255,255,255,0.03/0.05)` is invisible on a white card.
   Flip them to a barely-visible navy tint. */
:root[data-theme="light"] .profit-item,
:root[data-theme="light"] .whatsnew-feature,
:root[data-theme="light"] .whatsnew-feat-icon,
:root[data-theme="light"] .insight-card {
    background-color: rgba(20, 38, 63, 0.03);
}

/* ── 11. Indigo glow shadows on buttons ──────────────────────
   `box-shadow: ... rgba(99, 102, 241, 0.X)` is hardcoded on
   primary CTAs. In light mode this clashes visually with the
   new teal primary. Replace the indigo glow with a matching
   teal one. The original dark-mode rule still applies in dark. */
:root[data-theme="light"] .welcome-btn-primary,
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .header-action-btn,
:root[data-theme="light"] .btn-submit {
    box-shadow: 0 6px 18px -6px rgba(28, 124, 108, 0.45);
}

/* ── 12. Header / nav lifted surfaces ────────────────────────
   Some headers use a hardcoded dark tint via box-shadow that
   reads heavy on light. Soften them. */
:root[data-theme="light"] .header,
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .app-header {
    box-shadow: 0 1px 2px rgba(23, 32, 51, 0.04);
}

/* ── 13. Empty / placeholder text ────────────────────────────
   Hardcoded `#9ca3af` is acceptable but slightly low contrast
   on pure white — bump to our muted token for AA. */
:root[data-theme="light"] .empty-state,
:root[data-theme="light"] .empty-message,
:root[data-theme="light"] .no-data {
    color: var(--text-muted);
}

/* ── 14. Onboarding / tour overlay backdrops ─────────────────
   Dashboard's onboarding uses `rgba(15, 23, 42, 0.95)` as a
   full-screen scrim. That's still acceptable in light (it's a
   *backdrop* meant to dim the page) — leave it. The card
   inside the overlay already uses var(--bg-card). */