/* ============================================================
   E-Cube CRM — Design Token System  v2.0
   Palette: Electric Slate
   ============================================================ */

:root {
  /* ─── Canvas ─── */
  --bg:     #070d18;   /* page canvas — deep navy-black         */
  --surf-1: #0d1625;   /* card / primary elevation              */
  --surf-2: #111e30;   /* inset panel / secondary elevation     */
  --surf-3: #172438;   /* active row / hover highlight          */

  /* ─── Text ─── */
  --text:   #eef2f7;   /* primary content                       */
  --muted:  #7c96b8;   /* labels, metadata, secondary           */
  --dim:    #4a637d;   /* timestamps, placeholders, disabled    */

  /* ─── Borders ─── */
  --border:      rgba(255,255,255,0.09);
  --border-act:  rgba(255,255,255,0.18);

  /* ─── Default Accent  (resolves to CRM/neutral) ─── */
  --accent:        #818cf8;
  --accent-solid:  #4f46e5;
  --accent-dim:    rgba(129,140,248,0.12);
  --accent-border: rgba(129,140,248,0.35);

  /* ─── CRM Module ─── */
  --accent-crm:          #818cf8;
  --accent-crm-solid:    #4f46e5;
  --accent-crm-dim:      rgba(129,140,248,0.12);
  --accent-crm-border:   rgba(129,140,248,0.35);

  /* ─── Quotation Tracker ─── */
  --accent-qt:           #22d3ee;
  --accent-qt-solid:     #0891b2;
  --accent-qt-dim:       rgba(34,211,238,0.12);
  --accent-qt-border:    rgba(34,211,238,0.35);

  /* ─── Design & Estimation ─── */
  --accent-design:       #34d399;
  --accent-design-solid: #059669;
  --accent-design-dim:   rgba(52,211,153,0.12);
  --accent-design-border:rgba(52,211,153,0.35);

  /* ─── Admin ─── */
  --accent-admin:        #fb923c;
  --accent-admin-solid:  #ea580c;
  --accent-admin-dim:    rgba(251,146,60,0.12);
  --accent-admin-border: rgba(251,146,60,0.35);

  /* ─── Status Semantics (fixed; independent of module accent) ─── */
  --st-green:         #4ade80;
  --st-green-bg:      rgba(74,222,128,0.12);
  --st-green-border:  rgba(74,222,128,0.30);

  --st-amber:         #fbbf24;
  --st-amber-bg:      rgba(251,191,36,0.12);
  --st-amber-border:  rgba(251,191,36,0.30);

  --st-red:           #f87171;
  --st-red-bg:        rgba(248,113,113,0.12);
  --st-red-border:    rgba(248,113,113,0.30);

  --st-blue:          #60a5fa;
  --st-blue-bg:       rgba(96,165,250,0.12);
  --st-blue-border:   rgba(96,165,250,0.30);

  --st-cyan:          #22d3ee;
  --st-cyan-bg:       rgba(34,211,238,0.12);
  --st-cyan-border:   rgba(34,211,238,0.30);

  --st-violet:        #a78bfa;
  --st-violet-bg:     rgba(167,139,250,0.12);
  --st-violet-border: rgba(167,139,250,0.30);

  --st-gray:          #7c96b8;
  --st-gray-bg:       rgba(124,150,184,0.10);
  --st-gray-border:   rgba(124,150,184,0.25);

  /* ─── Radius Scale ─── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 9999px;

  /* ─── Spacing ─── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;

  /* ─── Nav ─── */
  --nav-h:      56px;
  --nav-bg:     #0a1220;
  --nav-border: rgba(255,255,255,0.07);

  /* ─── Z-index Layers ─── */
  --z-nav:     300;
  --z-modal:   400;
  --z-toast:   500;
  --z-overlay: 600;

  /* ─── Typography ─── */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', monospace;

  /* ─── Motion ─── */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ─── Module Accent Resolution ─────────────────────────────── */

[data-module="crm"] {
  --accent:        var(--accent-crm);
  --accent-solid:  var(--accent-crm-solid);
  --accent-dim:    var(--accent-crm-dim);
  --accent-border: var(--accent-crm-border);
}
[data-module="qt"],
[data-module="quotation"] {
  --accent:        var(--accent-qt);
  --accent-solid:  var(--accent-qt-solid);
  --accent-dim:    var(--accent-qt-dim);
  --accent-border: var(--accent-qt-border);
}
[data-module="design"] {
  --accent:        var(--accent-design);
  --accent-solid:  var(--accent-design-solid);
  --accent-dim:    var(--accent-design-dim);
  --accent-border: var(--accent-design-border);
}
[data-module="admin"] {
  --accent:        var(--accent-admin);
  --accent-solid:  var(--accent-admin-solid);
  --accent-dim:    var(--accent-admin-dim);
  --accent-border: var(--accent-admin-border);
}

/* ============================================================
   Light Theme  —  "Slate Light"
   Activated by setting data-theme="light" on <html>.
   ============================================================ */

[data-theme="light"] {
  /* ─── Canvas ─── */
  --bg:     #f1f4f9;
  --surf-1: #ffffff;
  --surf-2: #f6f8fb;
  --surf-3: #e9edf5;

  /* ─── Text ─── */
  --text:   #1b2436;
  --muted:  #5b6b85;
  --dim:    #94a3b8;

  /* ─── Borders ─── */
  --border:      rgba(15,23,42,0.09);
  --border-act:  rgba(15,23,42,0.16);

  /* ─── Nav ─── */
  --nav-bg:     rgba(255,255,255,.92);
  --nav-border: rgba(15,23,42,0.08);

  /* ─── Module accents — darkened for contrast on light surfaces ─── */
  --accent-crm:    #4f46e5;
  --accent-qt:     #0e7490;
  --accent-design: #047857;
  --accent-admin:  #c2410c;

  /* ─── Status semantics — darkened for contrast on light surfaces ─── */
  --st-green:  #15803d;
  --st-amber:  #b45309;
  --st-red:    #dc2626;
  --st-blue:   #2563eb;
  --st-cyan:   #0e7490;
  --st-violet: #7c3aed;
  --st-gray:   #475569;
}

/* ── Global overrides for legacy hardcoded-dark component styles ──
   `[data-theme="light"] .x` has specificity (0,2,0), which beats the
   page-local `.x { ... }` rules (0,1,0) regardless of source order,
   so these apply across every template without touching each one. ── */

/* Top nav (.nb-*, shared shape across CRM/QT/Design/Admin pages) */
[data-theme="light"] .nb            { background: var(--nav-bg); border-bottom-color: var(--nav-border); }
[data-theme="light"] .nb-apps       { background: rgba(15,23,42,.04); color: var(--muted); border-color: var(--border); }
[data-theme="light"] .nb-apps:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-border); }
[data-theme="light"] .nb-sep        { background: rgba(15,23,42,.1); }
[data-theme="light"] .nb-title      { color: var(--text); }
[data-theme="light"] .nb-back       { color: var(--muted); border-color: var(--border); }
[data-theme="light"] .nb-back:hover { color: var(--text); border-color: var(--border-act); }
[data-theme="light"] .nb-crumb      { color: var(--accent); }
[data-theme="light"] .nb-tab        { color: var(--muted); }
[data-theme="light"] .nb-tab:hover  { color: var(--text); background: rgba(15,23,42,.04); }
[data-theme="light"] .nb-tab.active { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-border); }
[data-theme="light"] .nb-user       { color: var(--muted); }
[data-theme="light"] .nb-logout       { color: var(--muted); border-color: var(--border); }
[data-theme="light"] .nb-logout:hover { color: var(--st-red); border-color: var(--st-red-border); background: var(--st-red-bg); }
[data-theme="light"] .nb-ham        { background: rgba(15,23,42,.04); border-color: var(--border); }
[data-theme="light"] .nb-ham span   { background: var(--muted); }
[data-theme="light"] .nb-mobile     { background: var(--surf-1); border-top-color: var(--border); }
[data-theme="light"] .nb-mob-tab        { color: var(--muted); }
[data-theme="light"] .nb-mob-tab:hover  { background: rgba(15,23,42,.04); color: var(--text); }
[data-theme="light"] .nb-mob-tab.active { background: var(--accent-dim); color: var(--accent); }
[data-theme="light"] .nb-mob-hr     { border-top-color: var(--border); }

/* Form controls — "lighten the dark bg" overlays become "tint the light bg" */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea,
[data-theme="light"] .search-box,
[data-theme="light"] .filter-select,
[data-theme="light"] .filter-sel,
[data-theme="light"] .dr-date-input,
[data-theme="light"] .status-select,
[data-theme="light"] .nb-vas-select,
[data-theme="light"] .btn-ghost {
  background-color: rgba(15,23,42,.035);
  color-scheme: light;
}
[data-theme="light"] .btn-ghost:hover { background-color: rgba(15,23,42,.07); }
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus,
[data-theme="light"] .search-box:focus,
[data-theme="light"] .dr-date-input:focus { background-color: var(--surf-1); }

[data-theme="light"] .form-select option,
[data-theme="light"] .filter-select option,
[data-theme="light"] .filter-sel option,
[data-theme="light"] .status-select option,
[data-theme="light"] .nb-vas-select option,
[data-theme="light"] select option {
  background: #ffffff;
  color: #1b2436;
}

/* Period pills — fixed light-indigo text needs darkening on light bg */
[data-theme="light"] .period-pill:hover,
[data-theme="light"] .period-pill.active {
  color: var(--accent);
}

/* FAB dock */
[data-theme="light"] .fab-item         { background: var(--surf-1); border-color: var(--border-act); color: var(--text); box-shadow: 0 4px 14px rgba(15,23,42,.12); }
[data-theme="light"] .fab-item:hover   { background: var(--accent-dim); border-color: var(--accent-border); }
[data-theme="light"] .fab-trigger.open { background: #cbd5e1; box-shadow: 0 4px 14px rgba(15,23,42,.18); }

/* Modal borders that hardcode a white overlay */
[data-theme="light"] .modal-content { border-color: var(--border-act); }

/* KPI / stat number colors tuned for dark text-on-tint, darken for light bg */
[data-theme="light"] .kpi-c-green { color: var(--st-green); }
[data-theme="light"] .kpi-c-red   { color: var(--st-red); }
[data-theme="light"] .kpi-c-amber { color: var(--st-amber); }
[data-theme="light"] .kpi-c-blue  { color: var(--st-blue); }
[data-theme="light"] .kpi-c-muted { color: var(--muted); }

/* CRM/QT status badges using fixed light-on-dark colors */
[data-theme="light"] .status-Open                                    { color: var(--accent-crm); border-color: rgba(79,70,229,.35); }
[data-theme="light"] .status-In\.Progress, [data-theme="light"] .status-In-Progress { color: var(--st-amber); border-color: var(--st-amber-border); }
[data-theme="light"] .status-Won                                     { color: var(--st-green); border-color: var(--st-green-border); }
[data-theme="light"] .status-Lost                                    { color: var(--st-red); border-color: var(--st-red-border); }
[data-theme="light"] .status-On\.Hold, [data-theme="light"] .status-On-Hold, [data-theme="light"] .status-Closed { color: var(--st-gray); }

/* ── Per-page "light pastel" text colors (tuned for dark surfaces) ──────────
   Hundreds of badge/status/link/KPI classes across templates hardcode
   Tailwind 300/400-shade hexes (e.g. #a7f3d0, #f87171, #fbbf24, #818cf8)
   as `color` for legibility on dark backgrounds. On the light surface these
   are too pale to read, so remap each by hue to its darkened status/accent
   token. Selector order groups by target color; specificity (0,2,0+)
   beats the page-local (0,1,0)/(0,2,0) rules. ── */

[data-theme="light"] .alert,
[data-theme="light"] .alert-ok,
[data-theme="light"] .alert-success,
[data-theme="light"] .asgn-badge-completed,
[data-theme="light"] .asgn-due-pending,
[data-theme="light"] .assign-due.future,
[data-theme="light"] .badge-active,
[data-theme="light"] .badge-approved,
[data-theme="light"] .badge-green,
[data-theme="light"] .badge-in_progress,
[data-theme="light"] .badge-open,
[data-theme="light"] .bom-name,
[data-theme="light"] .bom-title,
[data-theme="light"] .btn-approve,
[data-theme="light"] .btn-excl-co.is-excl,
[data-theme="light"] .btn-excl-ct.is-excl,
[data-theme="light"] .btn-icon.success:hover,
[data-theme="light"] .btn-merge.merged,
[data-theme="light"] .btn-success,
[data-theme="light"] .c-green,
[data-theme="light"] .cb-done .cb-label,
[data-theme="light"] .cb-done .cb-pct,
[data-theme="light"] .co-badge-proj,
[data-theme="light"] .co-item:hover,
[data-theme="light"] .co-item:focus,
[data-theme="light"] .designer-name,
[data-theme="light"] .enq-conf-badge,
[data-theme="light"] .enq-open,
[data-theme="light"] .enq-row:hover .enq-row-title,
[data-theme="light"] .enq-status-Won,
[data-theme="light"] .entry-alloc-hrs,
[data-theme="light"] .entry-hours,
[data-theme="light"] .file-link-local,
[data-theme="light"] .grand-total-row td,
[data-theme="light"] .green,
[data-theme="light"] .hours-preview,
[data-theme="light"] .import-item-count,
[data-theme="light"] .info-box,
[data-theme="light"] .items-total,
[data-theme="light"] .mod-design,
[data-theme="light"] .month-title,
[data-theme="light"] .nav-btn,
[data-theme="light"] .panel-row-name,
[data-theme="light"] .pct-done,
[data-theme="light"] .pct-mid,
[data-theme="light"] .pd-cell.has-data,
[data-theme="light"] .pd-total,
[data-theme="light"] .pill-green,
[data-theme="light"] .pill.active,
[data-theme="light"] .pivot-table .task-group-hd td,
[data-theme="light"] .pri-Low,
[data-theme="light"] .prio-low,
[data-theme="light"] .qt-Won,
[data-theme="light"] .qt-st-Won,
[data-theme="light"] .report-table .grand-total td,
[data-theme="light"] .req-approve-btn,
[data-theme="light"] .req-btn.sent,
[data-theme="light"] .result-num.green,
[data-theme="light"] .result-ok,
[data-theme="light"] .role-design_manager,
[data-theme="light"] .s-completed,
[data-theme="light"] .s-open,
[data-theme="light"] .site-badge,
[data-theme="light"] .smtp-ok,
[data-theme="light"] .st-Won,
[data-theme="light"] .st-dot.done,
[data-theme="light"] .st-label.done,
[data-theme="light"] .stat-chip-value,
[data-theme="light"] .stat-cts,
[data-theme="light"] .step-done .enq-step-label,
[data-theme="light"] .step-done .enq-step-num,
[data-theme="light"] .sum-chip-value,
[data-theme="light"] .tag-btn,
[data-theme="light"] .tag-edit-btn,
[data-theme="light"] .tag-filter-chip.active,
[data-theme="light"] .task-link,
[data-theme="light"] .task-name:hover,
[data-theme="light"] .td-hours,
[data-theme="light"] .tgl-btn.on,
[data-theme="light"] .ti-meet,
[data-theme="light"] .toast-success,
[data-theme="light"] .toast.ok,
[data-theme="light"] .toggle-active-label,
[data-theme="light"] .tt-hrs,
[data-theme="light"] .type-pill.active.tel,
[data-theme="light"] .type-project,
[data-theme="light"] .val-badge,
[data-theme="light"] .vbadge-proj,
[data-theme="light"] .vbadge-won,
[data-theme="light"] .vd-tag-proj {
  color: var(--st-green);
}

[data-theme="light"] .task-link:hover {
  color: var(--st-green);
  filter: brightness(0.85);
}

[data-theme="light"] .alert-error,
[data-theme="light"] .asgn-due-overdue,
[data-theme="light"] .assign-due.overdue,
[data-theme="light"] .att-remove,
[data-theme="light"] .badge-closed,
[data-theme="light"] .badge-critical,
[data-theme="light"] .badge-denied,
[data-theme="light"] .badge-high,
[data-theme="light"] .badge-overdue,
[data-theme="light"] .badge-red,
[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-excl-co,
[data-theme="light"] .btn-excl-ct,
[data-theme="light"] .btn-icon.danger:hover,
[data-theme="light"] .btn-reject,
[data-theme="light"] .btn-undo-merge:hover,
[data-theme="light"] .c-red,
[data-theme="light"] .cb-over .cb-label,
[data-theme="light"] .cb-over .cb-pct,
[data-theme="light"] .clear-btn:hover,
[data-theme="light"] .cust-overdue,
[data-theme="light"] .day-over,
[data-theme="light"] .del-row-btn:hover,
[data-theme="light"] .due-overdue,
[data-theme="light"] .enq-pri-High,
[data-theme="light"] .enq-status-Lost,
[data-theme="light"] .error-box,
[data-theme="light"] .error-list,
[data-theme="light"] .flash-err,
[data-theme="light"] .followup-due.overdue,
[data-theme="light"] .fup-item-days,
[data-theme="light"] .fup-overdue,
[data-theme="light"] .fup-sp-count,
[data-theme="light"] .hide-btn:hover,
[data-theme="light"] .icon-btn-delete,
[data-theme="light"] .meta-chip.overdue-chip,
[data-theme="light"] .mlist-del:hover,
[data-theme="light"] .modal-close:hover,
[data-theme="light"] .modal-err,
[data-theme="light"] .multi-remove:hover,
[data-theme="light"] .nb-logout:hover,
[data-theme="light"] .overdue-chip,
[data-theme="light"] .p-high,
[data-theme="light"] .pct-over,
[data-theme="light"] .pill-red,
[data-theme="light"] .pill-red.active,
[data-theme="light"] .pri-Critical,
[data-theme="light"] .prio-high,
[data-theme="light"] .qt-Lost,
[data-theme="light"] .qt-st-Lost,
[data-theme="light"] .req,
[data-theme="light"] .req-deny-btn,
[data-theme="light"] .result-err,
[data-theme="light"] .result-num.red,
[data-theme="light"] .s-closed,
[data-theme="light"] .s1-clear:hover,
[data-theme="light"] .search-clear:hover,
[data-theme="light"] .sp-lost,
[data-theme="light"] .st-Lost,
[data-theme="light"] .stat-excl,
[data-theme="light"] .tag-filter-clear,
[data-theme="light"] .ti-miss,
[data-theme="light"] .toast-error,
[data-theme="light"] .toast.err,
[data-theme="light"] .val-msg,
[data-theme="light"] .vd-close:hover {
  color: var(--st-red);
}

[data-theme="light"] .amber,
[data-theme="light"] .approvals-count,
[data-theme="light"] .approvals-hd h3,
[data-theme="light"] .asgn-badge-pending,
[data-theme="light"] .assign-badge,
[data-theme="light"] .assign-due.today,
[data-theme="light"] .b-warn,
[data-theme="light"] .badge-medium,
[data-theme="light"] .badge-merge,
[data-theme="light"] .badge-on_hold,
[data-theme="light"] .badge-pending,
[data-theme="light"] .badge-soon,
[data-theme="light"] .badge-starred,
[data-theme="light"] .badge-today,
[data-theme="light"] .badge-yellow,
[data-theme="light"] .bom-cost,
[data-theme="light"] .btn-amber,
[data-theme="light"] .btn-merge,
[data-theme="light"] .btn-merge-co.is-merged,
[data-theme="light"] .btn-merge-co:hover,
[data-theme="light"] .c-amber,
[data-theme="light"] .cb-low .cb-label,
[data-theme="light"] .cb-low .cb-pct,
[data-theme="light"] .day-partial,
[data-theme="light"] .due-soon,
[data-theme="light"] .due-today,
[data-theme="light"] .edit-notice,
[data-theme="light"] .enq-pri-Medium,
[data-theme="light"] .enq-progress,
[data-theme="light"] .grp-head,
[data-theme="light"] .hidden-count,
[data-theme="light"] .hidden-tag,
[data-theme="light"] .merge-result-select,
[data-theme="light"] .merge-tag,
[data-theme="light"] .p-medium,
[data-theme="light"] .pa-hrs,
[data-theme="light"] .pct-low,
[data-theme="light"] .pill-amber.active,
[data-theme="light"] .pill-yellow,
[data-theme="light"] .pri-High,
[data-theme="light"] .prio-medium,
[data-theme="light"] .qt-Under-Review,
[data-theme="light"] .qt-st-Under-Review,
[data-theme="light"] .req-btn.pending,
[data-theme="light"] .result-warn,
[data-theme="light"] .s-in_progress,
[data-theme="light"] .st-Under-Review,
[data-theme="light"] .stat-new,
[data-theme="light"] .ti-near,
[data-theme="light"] .vbadge-quot,
[data-theme="light"] .vd-fup-block,
[data-theme="light"] .vd-fup-label,
[data-theme="light"] .vd-tag-fup,
[data-theme="light"] .vd-tag-quot,
[data-theme="light"] .warn-box {
  color: var(--st-amber);
}

[data-theme="light"] .att-item a,
[data-theme="light"] .att-row a,
[data-theme="light"] .blue,
[data-theme="light"] .c-blue,
[data-theme="light"] .contact-detail a:hover,
[data-theme="light"] .file-link-drive,
[data-theme="light"] .panel-cost-link,
[data-theme="light"] .pri-Medium,
[data-theme="light"] .sp-won,
[data-theme="light"] .timer span,
[data-theme="light"] .vd-meta-item a {
  color: var(--st-blue);
}

[data-theme="light"] .cyan {
  color: var(--st-cyan);
}

[data-theme="light"] .c-indigo,
[data-theme="light"] .enq-add-row,
[data-theme="light"] .fup-sp-name,
[data-theme="light"] .quick-chip-add,
[data-theme="light"] .sq-hint.mode-num,
[data-theme="light"] .vd-sp,
[data-theme="light"] .visit-link {
  color: var(--accent-crm);
}

[data-theme="light"] .badge-completed,
[data-theme="light"] .purple,
[data-theme="light"] .role-manager {
  color: var(--st-violet);
}

[data-theme="light"] .badge-high {
  color: var(--accent-admin);
}

/* ── Indigo-300 (#a5b4fc) text on indigo-tinted pill/badge backgrounds ──
   Same "light pastel on dark surface" pattern as the bucket above, one
   shade lighter. Remapped to the same CRM-indigo accent token. ── */
[data-theme="light"] .addr-tag-badge,
[data-theme="light"] .assign-company a:hover,
[data-theme="light"] .assign-log-btn,
[data-theme="light"] .assign-quote-tag,
[data-theme="light"] .assign-site-btn:hover,
[data-theme="light"] .assignee-chip,
[data-theme="light"] .badge-blue,
[data-theme="light"] .badge-enquiry,
[data-theme="light"] .badge-hours,
[data-theme="light"] .badge-inprog,
[data-theme="light"] .badge-new,
[data-theme="light"] .badge-product,
[data-theme="light"] .bom-tag,
[data-theme="light"] .btn-edit-co:hover,
[data-theme="light"] .btn-edit-ct:hover,
[data-theme="light"] .c-link:hover,
[data-theme="light"] .cluster-apply-btn,
[data-theme="light"] .cluster-badge,
[data-theme="light"] .cluster-tbl tr.c-canonical .c-name,
[data-theme="light"] .co-badge-enq,
[data-theme="light"] .co-item.focused,
[data-theme="light"] .company-avatar,
[data-theme="light"] .contact-avatar,
[data-theme="light"] .contact-chip,
[data-theme="light"] .cust-item.focused,
[data-theme="light"] .cust-item:hover,
[data-theme="light"] .cust-link:hover,
[data-theme="light"] .date-chip,
[data-theme="light"] .detail-btn:hover,
[data-theme="light"] .dl-value a.company-link:hover,
[data-theme="light"] .edit-tab.active,
[data-theme="light"] .enq-add-row:hover,
[data-theme="light"] .enq-badge,
[data-theme="light"] .enq-status-Open,
[data-theme="light"] .enq-type-Project,
[data-theme="light"] .file-type-tag,
[data-theme="light"] .found-label,
[data-theme="light"] .icon-btn-edit,
[data-theme="light"] .merge-selected-item,
[data-theme="light"] .mod-crm,
[data-theme="light"] .ms-chip,
[data-theme="light"] .nb-apps:hover,
[data-theme="light"] .nb-mob-tab.active,
[data-theme="light"] .nb-tab.active,
[data-theme="light"] .pb-type,
[data-theme="light"] .period-pill.active,
[data-theme="light"] .period-pill:hover,
[data-theme="light"] .pill-blue,
[data-theme="light"] .qt-Negotiation,
[data-theme="light"] .qt-st-Negotiation,
[data-theme="light"] .quick-chip,
[data-theme="light"] .quick-chip-add:hover,
[data-theme="light"] .range-pill.active,
[data-theme="light"] .req-btn,
[data-theme="light"] .req-filter-btn.active,
[data-theme="light"] .role-admin,
[data-theme="light"] .role-designer,
[data-theme="light"] .sort-hdr.active,
[data-theme="light"] .sp-chip,
[data-theme="light"] .st-Negotiation,
[data-theme="light"] .st-dot.active,
[data-theme="light"] .st-label.active,
[data-theme="light"] .stat-cos,
[data-theme="light"] .status-pill,
[data-theme="light"] .tab-badge,
[data-theme="light"] .tab-pill.active,
[data-theme="light"] .tab.active,
[data-theme="light"] .tag-prod,
[data-theme="light"] .type-enquiry,
[data-theme="light"] .vd-tag-prod,
[data-theme="light"] .visit-link:hover,
[data-theme="light"] .vt-telephonic,
[data-theme="light"] .vw-hdr-pill {
  color: var(--accent-crm);
}

/* Same indigo-300 text color set directly via inline style="" attributes
   (badges, links, table cells). Inline styles win over stylesheet rules
   regardless of specificity, so !important is required here. */
[data-theme="light"] [style^="color:#a5b4fc"],
[data-theme="light"] [style*=";color:#a5b4fc"] {
  color: var(--accent-crm) !important;
}

/* ── Remaining inline color:#XXXXXX values (badges, role labels, links,
   stat numbers) hardcoded for the dark surface. Same remap strategy as
   above: dark-theme "dim"/"muted" grays become --muted/--text, and
   pastel status hues become their matching status/accent tokens. ── */
[data-theme="light"] [style^="color:#94a3b8"],
[data-theme="light"] [style*=";color:#94a3b8"],
[data-theme="light"] [style^="color:#64748b"],
[data-theme="light"] [style*=";color:#64748b"] {
  color: var(--muted) !important;
}

[data-theme="light"] [style^="color:#f1f5f9"],
[data-theme="light"] [style*=";color:#f1f5f9"],
[data-theme="light"] [style^="color:#e2e8f0"],
[data-theme="light"] [style*=";color:#e2e8f0"] {
  color: var(--text) !important;
}

[data-theme="light"] [style^="color:#f87171"],
[data-theme="light"] [style*=";color:#f87171"],
[data-theme="light"] [style^="color:#fca5a5"],
[data-theme="light"] [style*=";color:#fca5a5"] {
  color: var(--st-red) !important;
}

[data-theme="light"] [style^="color:#4ade80"],
[data-theme="light"] [style*=";color:#4ade80"],
[data-theme="light"] [style^="color:#34d399"],
[data-theme="light"] [style*=";color:#34d399"],
[data-theme="light"] [style^="color:#a7f3d0"],
[data-theme="light"] [style*=";color:#a7f3d0"],
[data-theme="light"] [style^="color:#6ee7b7"],
[data-theme="light"] [style*=";color:#6ee7b7"] {
  color: var(--st-green) !important;
}

[data-theme="light"] [style^="color:#fbbf24"],
[data-theme="light"] [style*=";color:#fbbf24"],
[data-theme="light"] [style^="color:#fcd34d"],
[data-theme="light"] [style*=";color:#fcd34d"],
[data-theme="light"] [style^="color:#d97706"],
[data-theme="light"] [style*=";color:#d97706"] {
  color: var(--st-amber) !important;
}

[data-theme="light"] [style^="color:#38bdf8"],
[data-theme="light"] [style*=";color:#38bdf8"],
[data-theme="light"] [style^="color:#60a5fa"],
[data-theme="light"] [style*=";color:#60a5fa"] {
  color: var(--st-blue) !important;
}

[data-theme="light"] [style^="color:#a78bfa"],
[data-theme="light"] [style*=";color:#a78bfa"] {
  color: var(--st-violet) !important;
}

[data-theme="light"] [style^="color:#818cf8"],
[data-theme="light"] [style*=";color:#818cf8"],
[data-theme="light"] [style^="color:#6366f1"],
[data-theme="light"] [style*=";color:#6366f1"] {
  color: var(--accent-crm) !important;
}

/* ── Timesheet calendar day cells (design_timesheet_calendar.html) ──
   Dark-surface rgba fills (e.g. rgba(30,41,59,...)) render as muddy
   dark boxes on the light canvas. Remap to light surf tiers + status
   tokens, keeping the warm and cool pastel fills (amber, red, green)
   which already read fine on white. ── */
[data-theme="light"] .day-future {
  background: var(--surf-3);
  color: var(--dim);
}
[data-theme="light"] .day-empty {
  background: var(--surf-2);
  color: var(--muted);
}
[data-theme="light"] .day-empty:hover {
  background: var(--surf-3);
  color: var(--text);
  border-color: var(--border-act);
}
[data-theme="light"] .day-partial {
  color: var(--st-amber);
}
[data-theme="light"] .day-over {
  color: var(--st-red);
}
[data-theme="light"] .ld-empty {
  background: var(--surf-2);
  border-color: var(--border);
}
[data-theme="light"] .ld-future {
  background: var(--surf-3);
  border-color: var(--border);
}