/* ═══════════════════════════════════════════════════════════
   TBM colour themes — a per-user choice (top bar palette icon).
   <html data-theme="…"> is set from users.theme. "classic" has no
   block here: it keeps main.css plus the admin brand colour.
   html[data-theme] outranks the :root brand-colour block in base.html.
   ═══════════════════════════════════════════════════════════ */

html[data-theme="ocean"] {
  --primary:    #0B7D82;
  --primary-dk: #08605F;
  --secondary:  #4FB3B7;
  --accent:     #EAF6F6;
  --sidebar-bg: #0F5E63;
  --page-bg:    #F1F8F8;
}

html[data-theme="sunset"] {
  --primary:    #C94A1E;
  --primary-dk: #A33A16;
  --secondary:  #EE8A63;
  --accent:     #FFF2EB;
  --sidebar-bg: #9A3412;
  --page-bg:    #FFF8F4;
}

html[data-theme="royal"] {
  --primary:    #5B45C9;
  --primary-dk: #45339F;
  --secondary:  #8E7FE0;
  --accent:     #F2F0FD;
  --sidebar-bg: #3B2A8C;
  --page-bg:    #F6F5FC;
}

html[data-theme="forest"] {
  --primary:    #2B7A52;
  --primary-dk: #1F5C3D;
  --secondary:  #6FB48C;
  --accent:     #EDF7F1;
  --sidebar-bg: #1F5135;
  --page-bg:    #F4F8F5;
}

/* Plain links follow the theme (Bootstrap reads these -rgb variables) */
html[data-theme="ocean"]    { --bs-link-color-rgb: 11,125,130;  --bs-link-hover-color-rgb: 8,96,95; }
html[data-theme="sunset"]   { --bs-link-color-rgb: 201,74,30;   --bs-link-hover-color-rgb: 163,58,22; }
html[data-theme="royal"]    { --bs-link-color-rgb: 91,69,201;   --bs-link-hover-color-rgb: 69,51,159; }
html[data-theme="forest"]   { --bs-link-color-rgb: 43,122,82;   --bs-link-hover-color-rgb: 31,92,61; }
html[data-theme="midnight"] { --bs-link-color-rgb: 96,165,250;  --bs-link-hover-color-rgb: 147,197,253; }

/* Focus rings match the theme instead of the default blue */
html[data-theme]:not([data-theme="classic"]) .form-control:focus,
html[data-theme]:not([data-theme="classic"]) .form-select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* ── Midnight (dark) ────────────────────────────────────────
   Bootstrap's own dark mode (data-bs-theme="dark", set alongside)
   handles forms, modals, dropdowns and alerts; this block covers the
   app's own surfaces plus the most common colours written inline in
   templates, which need !important to beat style="…". */
html[data-theme="midnight"] {
  --primary:    #3B82F6;
  --primary-dk: #2563EB;
  --secondary:  #60A5FA;
  --accent:     #1A2436;
  --sidebar-bg: #0B1220;
  --page-bg:    #0F172A;
  --surface:    #111827;
  --surface-2:  #1F2937;
  --bg:         #0F172A;
  --border:     #1F2937;
  --border-dk:  #334155;
  --text:       #E5E7EB;
  --text-muted: #94A3B8;
  --text-light: #64748B;
  --success:    #34D399;
  --warning:    #FBBF24;
  --danger:     #F87171;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.4);
  --shadow:     0 4px 12px rgba(0,0,0,.45);
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.35);
  --bs-body-bg: #0F172A;
  --bs-body-color: #E5E7EB;
  --bs-border-color: #334155;
  --bs-secondary-color: #94A3B8;
  color-scheme: dark;
}
html[data-theme="midnight"] body { background: var(--page-bg); color: var(--text); }
html[data-theme="midnight"] .tbm-topbar { background: var(--surface); border-color: var(--border); }
html[data-theme="midnight"] .search-input { background: var(--surface-2); color: var(--text); border-color: var(--border-dk); }
html[data-theme="midnight"] .text-muted { color: var(--text-muted) !important; }
html[data-theme="midnight"] .text-dark { color: var(--text) !important; }
html[data-theme="midnight"] .bg-light { background-color: var(--surface-2) !important; color: var(--text) !important; }
html[data-theme="midnight"] .bg-white { background-color: var(--surface) !important; }
html[data-theme="midnight"] .page-title,
html[data-theme="midnight"] h1, html[data-theme="midnight"] h2,
html[data-theme="midnight"] h3, html[data-theme="midnight"] h4,
html[data-theme="midnight"] h5, html[data-theme="midnight"] h6 { color: var(--text); }
html[data-theme="midnight"] .tbm-table th { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
html[data-theme="midnight"] .tbm-table td { border-color: var(--border); color: var(--text); }
html[data-theme="midnight"] .tbm-table tbody tr:hover td { background: var(--accent); }
html[data-theme="midnight"] .line-items-table tr:nth-child(even) td { background: #141C2B; }
html[data-theme="midnight"] .line-items-table th { background: #1E3A8A; }
html[data-theme="midnight"] .line-items-table .form-control,
html[data-theme="midnight"] .line-items-table .form-select,
html[data-theme="midnight"] .line-items-table .form-control:focus { background-color: var(--surface-2); color: var(--text); }
html[data-theme="midnight"] .line-items-table .form-control.price-zero { background-color: rgba(251,191,36,.15); }
html[data-theme="midnight"] .doc-number { color: var(--secondary); }
html[data-theme="midnight"] .customer-dropdown-item:hover { background: var(--accent); }
html[data-theme="midnight"] .customer-dropdown-item .cname { color: var(--text); }
html[data-theme="midnight"] .customer-search-wrap input { background: var(--surface-2) !important; border-color: var(--border-dk) !important; color: var(--text); }
html[data-theme="midnight"] .quote-card:active { background: var(--surface-2); }
html[data-theme="midnight"] .btn-outline-secondary { color: var(--text-muted); border-color: var(--border-dk); }

/* Page-specific cards (Analytics, Deliveries calendar, Guide) */
html[data-theme="midnight"] .kpi-card,
html[data-theme="midnight"] .chart-card,
html[data-theme="midnight"] .type-filter-btn,
html[data-theme="midnight"] .guide-section,
html[data-theme="midnight"] .del-cal-day { background: var(--surface); color: var(--text); }
html[data-theme="midnight"] .del-cal { background: var(--border); border-color: var(--border); }
html[data-theme="midnight"] .del-cal-head { background: var(--surface-2); }
html[data-theme="midnight"] .del-cal-day.other-month { background: #0D1424; color: #475569; }
html[data-theme="midnight"] .del-cal-day.today { background: var(--accent); }
html[data-theme="midnight"] .guide-tip { background: rgba(96,165,250,.12); }
html[data-theme="midnight"] [style*="background:#F5F3FF"] { background: rgba(167,139,250,.15) !important; }

/* Search dropdowns and pop-ups (hidden until used, so easy to miss):
   customer / SKU / vendor search on the quote, PI, SO and LPO forms,
   plus the sales-contact phone/email pickers. */
html[data-theme="midnight"] .search-dropdown { background: var(--surface-2); border-color: var(--border-dk); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
html[data-theme="midnight"] .search-dropdown .s-item { border-color: var(--border); color: var(--text); }
html[data-theme="midnight"] .search-dropdown .s-item:hover { background: rgba(96,165,250,.16); }
html[data-theme="midnight"] .search-dropdown .s-name { color: var(--text); }
html[data-theme="midnight"] .search-dropdown .s-sub,
html[data-theme="midnight"] .search-dropdown .s-empty { color: var(--text-muted); }
html[data-theme="midnight"] .activity-divider span { background: var(--surface); }
html[data-theme="midnight"] .guide-toc a:hover,
html[data-theme="midnight"] kbd { background: var(--surface-2); color: var(--text); }
html[data-theme="midnight"] #itemsTable tbody tr.item-row { background: var(--surface) !important; border-color: var(--border-dk) !important; }
html[data-theme="midnight"] #itemsTable tbody tr.item-row-heading { background: rgba(96,165,250,.12) !important; }

/* Colours that scripts set at runtime: the browser stores them as rgb(),
   so they need their own selectors (the hex ones below don't match). */
html[data-theme="midnight"] [style*="background: rgb(255, 255, 255)"] { background: var(--surface-2) !important; }
html[data-theme="midnight"] [style*="background: rgb(239, 246, 255)"] { background: rgba(96,165,250,.18) !important; }
html[data-theme="midnight"] [style*="background: rgb(249, 250, 251)"],
html[data-theme="midnight"] [style*="background: rgb(243, 244, 246)"] { background: var(--surface) !important; }
html[data-theme="midnight"] [style*="border: 1px solid rgb(229, 231, 235)"] { border-color: var(--border-dk) !important; }
html[data-theme="midnight"] [style*="border-bottom: 1px solid rgb(243, 244, 246)"] { border-bottom-color: var(--border) !important; }

/* Status / source badges: pale pastel fills become translucent tints */
html[data-theme="midnight"] .status-draft,
html[data-theme="midnight"] .status-inactive,
html[data-theme="midnight"] .status-archived,
html[data-theme="midnight"] .source-badge   { background: rgba(148,163,184,.15); color: #CBD5E1; }
html[data-theme="midnight"] .status-issued,
html[data-theme="midnight"] .status-active,
html[data-theme="midnight"] .status-won,
html[data-theme="midnight"] .status-lead-converted,
html[data-theme="midnight"] .status-lead-qualified { background: rgba(52,211,153,.15); color: #6EE7B7; }
html[data-theme="midnight"] .status-revised,
html[data-theme="midnight"] .status-lead-new,
html[data-theme="midnight"] .qc-rev          { background: rgba(96,165,250,.15); color: #93C5FD; }
html[data-theme="midnight"] .status-lead-quotation_sent { background: rgba(129,140,248,.18); color: #A5B4FC; }
html[data-theme="midnight"] .status-lost,
html[data-theme="midnight"] .status-cancelled,
html[data-theme="midnight"] .status-lead-lost,
html[data-theme="midnight"] .qc-followup-overdue { background: rgba(248,113,113,.15); color: #FCA5A5; }
html[data-theme="midnight"] .status-lead-contacted,
html[data-theme="midnight"] .qc-followup-today { background: rgba(251,191,36,.15); color: #FCD34D; }
html[data-theme="midnight"] [class*="source-"]:not(.source-badge) { filter: brightness(1.1); background-color: rgba(148,163,184,.12) !important; }

/* Common colours written inline in templates (style="…") */
html[data-theme="midnight"] [style*="background:#fff;"], html[data-theme="midnight"] [style*="background: #fff;"],
html[data-theme="midnight"] [style$="background:#fff"], html[data-theme="midnight"] [style*="background:white"],
html[data-theme="midnight"] [style*="background: white"], html[data-theme="midnight"] [style*="background:#ffffff"],
html[data-theme="midnight"] [style*="background:#FFFFFF"] { background: var(--surface) !important; }
html[data-theme="midnight"] [style*="background:#f9fafb"], html[data-theme="midnight"] [style*="background:#F9FAFB"],
html[data-theme="midnight"] [style*="background:#f3f4f6"], html[data-theme="midnight"] [style*="background:#F3F4F6"],
html[data-theme="midnight"] [style*="background:#fafafa"], html[data-theme="midnight"] [style*="background:#f8fafc"],
html[data-theme="midnight"] [style*="background:#F8FAFC"], html[data-theme="midnight"] [style*="background:#f1f5f9"],
html[data-theme="midnight"] [style*="background:#e5e7eb"], html[data-theme="midnight"] [style*="background:#E5E7EB"] { background: var(--surface-2) !important; }
html[data-theme="midnight"] [style*="background:#fffbeb"], html[data-theme="midnight"] [style*="background:#FFFBEB"],
html[data-theme="midnight"] [style*="background:#fef3c7"], html[data-theme="midnight"] [style*="background:#FEF3C7"],
html[data-theme="midnight"] [style*="background:#fffbf0"], html[data-theme="midnight"] [style*="background:#FFFBF0"],
html[data-theme="midnight"] [style*="background:#fff7ed"], html[data-theme="midnight"] [style*="background:#FFF7ED"] { background: rgba(251,191,36,.12) !important; }
html[data-theme="midnight"] [style*="background:#fef2f2"], html[data-theme="midnight"] [style*="background:#FEF2F2"],
html[data-theme="midnight"] [style*="background:#fee2e2"], html[data-theme="midnight"] [style*="background:#FEE2E2"] { background: rgba(248,113,113,.12) !important; }
html[data-theme="midnight"] [style*="background:#eff6ff"], html[data-theme="midnight"] [style*="background:#EFF6FF"],
html[data-theme="midnight"] [style*="background:#dbeafe"], html[data-theme="midnight"] [style*="background:#DBEAFE"] { background: rgba(96,165,250,.12) !important; }
html[data-theme="midnight"] [style*="background:#ecfdf5"], html[data-theme="midnight"] [style*="background:#ECFDF5"],
html[data-theme="midnight"] [style*="background:#f0fdf4"], html[data-theme="midnight"] [style*="background:#F0FDF4"] { background: rgba(52,211,153,.12) !important; }
html[data-theme="midnight"] [style*="color:#111"], html[data-theme="midnight"] [style*="color:#374151"],
html[data-theme="midnight"] [style*="color:#1e3a5f"], html[data-theme="midnight"] [style*="color:#1E3A5F"],
html[data-theme="midnight"] [style*="color:#1a1a1a"], html[data-theme="midnight"] [style*="color:#333"],
html[data-theme="midnight"] [style*="color:var(--text)"] { color: var(--text) !important; }
html[data-theme="midnight"] [style*="color:#92400e"], html[data-theme="midnight"] [style*="color:#92400E"],
html[data-theme="midnight"] [style*="color:#b45309"], html[data-theme="midnight"] [style*="color:#B45309"] { color: #FCD34D !important; }
html[data-theme="midnight"] [style*="color:#dc2626"], html[data-theme="midnight"] [style*="color:#DC2626"] { color: #FCA5A5 !important; }
html[data-theme="midnight"] [style*="color:#059669"], html[data-theme="midnight"] [style*="color:#15803d"],
html[data-theme="midnight"] [style*="color:#15803D"], html[data-theme="midnight"] [style*="color:#047857"] { color: #6EE7B7 !important; }
html[data-theme="midnight"] [style*="color:#1d4ed8"], html[data-theme="midnight"] [style*="color:#1D4ED8"],
html[data-theme="midnight"] [style*="color:#2563eb"], html[data-theme="midnight"] [style*="color:#2563EB"] { color: #93C5FD !important; }

/* ── Theme picker (top bar) ─────────────────────────────────── */
.theme-swatch {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.theme-menu .dropdown-item { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 7px 14px; }
.theme-menu .dropdown-item .bi-check2 { margin-left: auto; visibility: hidden; color: var(--primary); }
.theme-menu .dropdown-item.active,
.theme-menu .dropdown-item:active { background: var(--accent); color: var(--text); }
.theme-menu .dropdown-item.active .bi-check2 { visibility: visible; }

/* Quote form customer panel */
html[data-theme="midnight"] .cp-trn-missing { background: rgba(251,191,36,.12); color: #FCD34D; border-color: rgba(251,191,36,.35); }
html[data-theme="midnight"] .qd-internal { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.35); }
html[data-theme="midnight"] .qd-internal .qd-hint { color: #FCD34D; }
html[data-theme="midnight"] .qd-margin { background: rgba(52,211,153,.12); }
html[data-theme="midnight"] .qd-margin.qd-neg { background: rgba(248,113,113,.12); }