/* ============================================================================
   Thaithonburi shared theme — single source of truth for the design-system
   colour palette (CSS custom properties) AND the light-mode chrome overrides.

   Include in <head> AFTER the pre-paint snippet and BEFORE the page's own
   inline <style> (custom props resolve globally, and the light overrides win
   on specificity regardless of order):

     <link rel="stylesheet" href="../shared/theme.css">

   Pairs with shared/theme.js (toggle wiring). The canonical palette below was
   lifted from the Sales-Multichannel dashboard; probiokhlear and crm360 share
   the same class names, so the light-mode overrides cover all three. Selectors
   for components a given dashboard doesn't have are simply inert.
   ========================================================================== */

:root,
html[data-theme='dark']{
  --bg:#0a0e1a; --bg-2:#0f1524;
  --surface:#141b2e; --surface-2:#1a2238;
  --border:rgba(148,163,184,.12); --border-2:rgba(148,163,184,.2);
  --text:#e2e8f0; --text-dim:#94a3b8; --text-mute:#64748b;
  --brand:#60a5fa; --brand-2:#3b82f6;
  --accent:#a78bfa; --accent-2:#8b5cf6;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --pink:#f472b6; --teal:#2dd4bf;
  --shopee:#EE4D2D; --shopee-soft:rgba(238,77,45,.15);
  --lazada:#0F146E; --lazada-soft:rgba(75,134,217,.20); --lazada-bright:#4B86D9;
  --gradient:linear-gradient(135deg,#60a5fa 0%,#a78bfa 50%,#f472b6 100%);
  --shadow:0 10px 40px -10px rgba(0,0,0,.5);
  --body-bg:radial-gradient(ellipse 80% 50% at 20% -20%,rgba(96,165,250,.15),transparent 50%),radial-gradient(ellipse 60% 50% at 80% 10%,rgba(167,139,250,.12),transparent 50%),#0a0e1a;
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  --glass-soft:rgba(255,255,255,.04);
  --glass-soft-2:rgba(255,255,255,.08);
  --input-bg:rgba(0,0,0,.3);
  --sidebar-bg:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  --hover-tint:rgba(255,255,255,.05);
}
html[data-theme='light']{
  --bg:#f4f7f6; --bg-2:#eef2f1;
  --surface:#ffffff; --surface-2:#f9fafb;
  --border:#e5e7eb; --border-2:#d1d5db;
  --text:#111827; --text-dim:#4b5563; --text-mute:#6b7280;
  --brand:#770000; --brand-2:#550000;
  --accent:#26A69A; --accent-2:#1d847a;   /* mint green (Customer Journey mockup) */
  --ok:#10b981; --warn:#f59e0b; --bad:#ef4444;
  --pink:#be185d; --teal:#26A69A;
  --shopee:#EE4D2D; --shopee-soft:rgba(238,77,45,.10);
  --lazada:#0F146E; --lazada-soft:rgba(75,134,217,.10); --lazada-bright:#1e40af;
  --gradient:#770000;
  --shadow:0 4px 12px rgba(0,0,0,.06);
  --body-bg:radial-gradient(ellipse at 20% 0%, rgba(119,0,0,0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(38,166,154,0.04) 0%, transparent 50%), #f4f7f6;
  --glass-bg:#ffffff;
  --glass-soft:#f3f4f6;
  --glass-soft-2:#e5e7eb;
  --input-bg:#ffffff;
  --sidebar-bg:#ffffff;
  --hover-tint:#f3f4f6;
}

/* ============================================================================
   LIGHT-MODE CHROME OVERRIDES
   Replace dark-glass (rgba white/black) and blue-brand remnants with
   surface backgrounds + burgundy (#770000 → rgba(119,0,0,.x)) tints.
   Mint (--accent) shows through the palette + gradient.
   ========================================================================== */

/* ---- Auth / inputs / sidebar / logo ---- */
html[data-theme='light'] .auth-card{background:var(--surface);backdrop-filter:none}
html[data-theme='light'] .field input,
html[data-theme='light'] .field select,
html[data-theme='light'] .field textarea{background:var(--surface)}
html[data-theme='light'] .field input:focus,
html[data-theme='light'] .field select:focus,
html[data-theme='light'] .field textarea:focus{box-shadow:0 0 0 3px rgba(119,0,0,.15)}
html[data-theme='light'] #navToggle{background:var(--surface)}
html[data-theme='light'] #navToggle:hover{background:var(--surface-2)}
html[data-theme='light'] .sidebar{background:var(--sidebar-bg)}
html[data-theme='light'] .sidebar .foot-btn{background:var(--surface)}
html[data-theme='light'] .sidebar .foot-btn:hover{background:var(--surface-2);color:var(--text)}
html[data-theme='light'] .sidebar .foot-btn.primary{background:var(--gradient);color:#fff;border-color:var(--brand)}
html[data-theme='light'] .btn-ghost{background:var(--surface)}
html[data-theme='light'] .btn-ghost:hover{background:var(--surface-2);color:var(--text)}
html[data-theme='light'] .logo-dot{color:#fff}
html[data-theme='light'] .err{color:#b91c1c}
html[data-theme='light'] input[type="date"]{color-scheme:light !important}

/* ---- Filter bar inputs / channel select ---- */
html[data-theme='light'] .filter-bar{background:var(--surface)}
html[data-theme='light'] .filter-bar input,
html[data-theme='light'] .filter-bar select{background-color:var(--surface);color:var(--text)}
html[data-theme='light'] .filter-bar input:hover,
html[data-theme='light'] .filter-bar select:hover{background-color:var(--surface-2);border-color:var(--border-2)}
html[data-theme='light'] .filter-bar input:focus,
html[data-theme='light'] .filter-bar select:focus{box-shadow:0 0 0 3px rgba(119,0,0,.14)}
html[data-theme='light'] .filter-bar select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7280' d='M0 0l5 6 5-6z'/></svg>")}
html[data-theme='light'] .filter-bar select option{background:var(--surface);color:var(--text)}
html[data-theme='light'] .filter-bar select option:checked,
html[data-theme='light'] .filter-bar select option:hover{background:rgba(119,0,0,.10);color:var(--brand)}
html[data-theme='light'] .filter-dates input[type=date]{background:var(--surface);color:var(--text)}

/* ---- Date preset pills + segmented control ---- */
html[data-theme='light'] .preset{background:var(--surface);color:var(--text-dim)}
html[data-theme='light'] .preset:hover{background:var(--surface-2);color:var(--text)}
html[data-theme='light'] .preset.active{background:var(--gradient);color:#fff}
html[data-theme='light'] .seg-group{background:var(--bg-2)}
html[data-theme='light'] .ads-toggle{background:var(--bg-2)}
html[data-theme='light'] .seg-group .seg.active{box-shadow:0 3px 10px -4px rgba(119,0,0,.30)}
html[data-theme='light'] .ads-toggle .seg.active{box-shadow:0 3px 10px -4px rgba(119,0,0,.30)}

/* ---- Generic pill badge + active-filter chips ---- */
html[data-theme='light'] .pill{background:rgba(119,0,0,.10);color:var(--brand)}
html[data-theme='light'] .pill-regular{background:rgba(119,0,0,.10);color:var(--brand);border-color:rgba(119,0,0,.28)}
html[data-theme='light'] .b-blue{background:rgba(119,0,0,.10);color:var(--brand)}
html[data-theme='light'] .b-violet{background:rgba(38,166,154,.12);color:var(--accent)}
html[data-theme='light'] .filter-chip{background:rgba(119,0,0,.10);border-color:rgba(119,0,0,.28);color:var(--brand)}
html[data-theme='light'] .filter-chip.neutral{background:rgba(148,163,184,.10);border-color:var(--border-2);color:var(--text-dim)}
html[data-theme='light'] .filter-chip button{background:rgba(119,0,0,.16);color:var(--brand)}
html[data-theme='light'] .active-bar{background:rgba(255,255,255,.94);border-color:var(--border-2);box-shadow:var(--shadow)}

/* ---- Sidebar nav + role pill ---- */
html[data-theme='light'] .nav a:hover{background:var(--hover-tint);color:var(--text)}
html[data-theme='light'] .nav a.active{background:rgba(119,0,0,.10);border-color:rgba(119,0,0,.30);color:var(--brand)}
html[data-theme='light'] .sidebar .foot .role-pill{background:rgba(119,0,0,.12);color:var(--brand);border-color:rgba(119,0,0,.30)}

/* ---- Multi-select (page / product pickers) ---- */
html[data-theme='light'] .ms-btn{background-color:var(--surface)}
html[data-theme='light'] .ms-btn:hover{background-color:var(--surface-2);border-color:var(--border-2)}
html[data-theme='light'] .ms-btn.open,
html[data-theme='light'] .ms-btn:focus{box-shadow:0 0 0 3px rgba(119,0,0,.14)}
html[data-theme='light'] .ms-count{background:rgba(119,0,0,.14);color:var(--brand)}
html[data-theme='light'] .ms-pop{background:var(--surface);box-shadow:var(--shadow)}
html[data-theme='light'] .ms-search{background:var(--surface-2)}
html[data-theme='light'] .ms-opt:hover{background:var(--hover-tint)}
html[data-theme='light'] .ms-opt input[type=checkbox]{background:var(--surface-2)}
html[data-theme='light'] .ms-opt input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand)}
html[data-theme='light'] .ms-opt input[type=checkbox]:checked::after{border-color:#fff}
html[data-theme='light'] .ms-actions a:hover{background:var(--hover-tint);color:var(--text)}

/* ---- Cards / KPIs / tables ---- */
html[data-theme='light'] .kpi{background:var(--surface)}
html[data-theme='light'] .card{background:var(--surface)}
html[data-theme='light'] .kpi .split-inline .chip{background:var(--surface)}
html[data-theme='light'] .kpi .split-inline .chip:hover{background:var(--surface-2)}
html[data-theme='light'] .compact-table th,
html[data-theme='light'] .compact-table td{border-bottom-color:var(--border)}
html[data-theme='light'] tbody tr:hover,
html[data-theme='light'] table.t tr:hover td,
html[data-theme='light'] .modal-body tbody tr:hover,
html[data-theme='light'] .compact-table tbody tr:hover{background:var(--hover-tint)}
html[data-theme='light'] tr.cust-row:hover,
html[data-theme='light'] tr.cust-row:hover td{background:rgba(119,0,0,.05)}

/* ---- Misc buttons / chips / focus chips / CSV ---- */
html[data-theme='light'] .icon-btn{background:var(--surface);color:var(--text-dim)}
html[data-theme='light'] .icon-btn:hover{background:var(--surface-2);color:var(--text)}
html[data-theme='light'] .btn-sm{background:var(--surface)}
html[data-theme='light'] .btn-sm:hover{background:var(--surface-2)}
html[data-theme='light'] .note-btn{background:var(--surface);color:var(--text-dim)}
html[data-theme='light'] .note-btn:hover{background:var(--surface-2);color:var(--text)}
html[data-theme='light'] .chip{background:var(--surface)}
html[data-theme='light'] .info{background:var(--surface);border-color:var(--border)}
html[data-theme='light'] .info:hover{background:rgba(119,0,0,.10);color:var(--brand);border-color:var(--brand)}
html[data-theme='light'] .info[data-tip]:hover::after{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
html[data-theme='light'] .help-body code{background:var(--surface-2);color:var(--brand)}
html[data-theme='light'] .explain-btn{background:rgba(119,0,0,.08);border-color:rgba(119,0,0,.25)}
html[data-theme='light'] .explain-btn:hover{background:rgba(119,0,0,.18);color:var(--text);border-color:var(--brand)}
html[data-theme='light'] .focus-chip{background:rgba(148,163,184,.10);border-color:var(--border-2)}
html[data-theme='light'] .focus-chip:hover{color:var(--text);background:rgba(119,0,0,.08);border-color:rgba(119,0,0,.30)}
html[data-theme='light'] .focus-chip.active{color:var(--brand);background:rgba(119,0,0,.12);border-color:rgba(119,0,0,.45);box-shadow:0 0 0 3px rgba(119,0,0,.10)}
html[data-theme='light'] .csv-btn{background:rgba(119,0,0,.10);border-color:rgba(119,0,0,.30);color:var(--brand)}
html[data-theme='light'] .csv-btn:hover{background:rgba(119,0,0,.16)}
html[data-theme='light'] .seg:hover{background:var(--surface-2);border-color:var(--border-2)}
html[data-theme='light'] .seg-share{background:var(--surface-2);color:var(--text-dim)}
html[data-theme='light'] .close-x:hover{background:var(--hover-tint);color:var(--text)}
html[data-theme='light'] .search-box{background:var(--surface)}

/* ---- Modals / drill-downs ---- */
html[data-theme='light'] .modal{background:var(--surface)}
html[data-theme='light'] .modal-head .pill{background:rgba(119,0,0,.10);color:var(--brand)}
html[data-theme='light'] .modal-body thead th{background:var(--surface-2)}

/* ---- Prospect / customer status badges (blue→burgundy, violet→mint) ---- */
html[data-theme='light'] .prospect-kpi .cd-stat.active{background:rgba(119,0,0,.08)}
html[data-theme='light'] .ps-Contacted{background-color:rgba(119,0,0,.12);color:var(--brand);border-color:rgba(119,0,0,.35)}
html[data-theme='light'] .ps-Interested{background-color:rgba(38,166,154,.14);color:var(--accent);border-color:rgba(38,166,154,.35)}
html[data-theme='light'] select.prospect-status option{background:var(--surface);color:var(--text)}

/* ---- Customer-detail panel (probiokhlear: cd-*) ---- */
html[data-theme='light'] .cd-stats{background:var(--surface-2)}
html[data-theme='light'] .cd-stat{background:var(--surface)}
html[data-theme='light'] .cd-tabs{background:var(--bg-2)}
html[data-theme='light'] .notes-compose{background:var(--surface)}
html[data-theme='light'] .notes-textarea{background:var(--surface)}
html[data-theme='light'] .note-card{background:var(--surface)}

/* ---- Customer-profile modal (crm360: cp-*) ---- */
html[data-theme='light'] .cp-modal{background:var(--surface);border-color:var(--border-2)}
html[data-theme='light'] .cp-pill{background:rgba(119,0,0,.12);color:var(--brand)}
html[data-theme='light'] .cp-btn{background:var(--surface);border-color:var(--border-2);color:var(--text)}
html[data-theme='light'] .cp-btn:hover{background:var(--surface-2)}
html[data-theme='light'] .cp-body tbody tr:hover{background:var(--hover-tint)}
html[data-theme='light'] .cp-stats{background:var(--surface-2);border-bottom-color:var(--border)}
html[data-theme='light'] .cp-stat{background:var(--surface);border-color:var(--border)}
html[data-theme='light'] .cp-tabs{background:var(--bg-2);border-bottom-color:var(--border)}
html[data-theme='light'] .cp-notes-compose{background:var(--surface);border-bottom-color:var(--border)}
html[data-theme='light'] .cp-notes-textarea{background:var(--surface);border-color:var(--border-2);color:var(--text)}
html[data-theme='light'] .cp-note{background:var(--surface);border-color:var(--border)}
html[data-theme='light'] .cp-note-btn{background:var(--surface);border-color:var(--border);color:var(--text-dim)}
html[data-theme='light'] .cp-note-btn:hover{background:var(--surface-2);color:var(--text)}
html[data-theme='light'] .cp-ps-Contacted{background-color:rgba(119,0,0,.12);color:var(--brand);border-color:rgba(119,0,0,.35)}
html[data-theme='light'] select.cp-ps option{background:var(--surface);color:var(--text)}

/* ---- Winnie AI panel (blue / dark remnants) ---- */
html[data-theme='light'] .winnie-panel{background:var(--surface)}
html[data-theme='light'] .winnie-history{background:var(--surface)}
html[data-theme='light'] .winnie-head{background:linear-gradient(180deg,rgba(119,0,0,.07),transparent)}
html[data-theme='light'] .winnie-head-actions .btn-sm{background:var(--surface);color:var(--text)}
html[data-theme='light'] .winnie-head-actions .btn-sm:hover{background:var(--surface-2)}
html[data-theme='light'] .winnie-suggest button{background:rgba(119,0,0,.07);border-color:rgba(119,0,0,.22)}
html[data-theme='light'] .winnie-suggest button:hover{background:rgba(119,0,0,.13);color:var(--text);border-color:var(--brand)}
html[data-theme='light'] .winnie-chat-item:hover{background:var(--hover-tint)}
html[data-theme='light'] .winnie-chat-item.active{background:rgba(119,0,0,.09);border-color:rgba(119,0,0,.30)}
html[data-theme='light'] .winnie-msg.asst{background:var(--surface-2)}
html[data-theme='light'] .winnie-msg.asst .mobile-cell{color:var(--brand);text-decoration-color:rgba(119,0,0,.4)}
html[data-theme='light'] .winnie-msg.asst .mobile-cell:hover{text-decoration-color:var(--brand)}
html[data-theme='light'] .winnie-msg-actions button:hover{background:var(--hover-tint);color:var(--text-dim)}
html[data-theme='light'] .winnie-tool{background:var(--surface-2)}
html[data-theme='light'] .winnie-input-wrap{background:var(--surface)}
html[data-theme='light'] .winnie-input{background:var(--surface)}
