/**
 * WapBizSuite — Light / Dark Theme Overrides
 * Loaded on every page. When html.light-mode is set, these rules
 * override the hardcoded dark Tailwind hex-value utility classes.
 *
 * Dark palette  →  Light palette
 * #0F172A (slate-950, primary bg)   →  #FFFFFF
 * #1E293B (slate-800, secondary bg) →  #F8FAFC
 * #334155 (slate-700, card / border)→  #E2E8F0
 * #475569 (slate-600, hover bg)     →  #CBD5E1
 * #64748B (slate-500, muted bg)     →  #94A3B8
 * #94A3B8 (slate-400, secondary txt)→  #475569
 * #F1F5F9 (slate-100, primary text) →  #0F172A
 * Accent colours (#25D366 green, #3B82F6 blue, etc.) stay the same.
 */

/* ── CSS custom properties (for custom CSS using var(--) in <style> blocks) ── */
html.light-mode {
  --bg-primary:    #FFFFFF;
  --bg-secondary:  #F8FAFC;
  --bg-card:       #F8FAFC;
  --border:        #E2E8F0;
  --text-primary:  #0F172A;
  --text-secondary:#475569;
}

/* ── Body / global ── */
html.light-mode body {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}

/* ─────────────────────────────────────────────────────────────
   Tailwind arbitrary-value class overrides.
   Uses CSS attribute selectors ([class~="..."]) which match the
   raw HTML class attribute string — no CSS escaping needed and
   works regardless of how Tailwind CDN generates its selectors.
   ~= matches the exact whitespace-delimited class token.
   ───────────────────────────────────────────────────────────── */

/* ── Background overrides ── */
html.light-mode [class~="bg-[#0F172A]"]  { background-color: #FFFFFF !important; }
html.light-mode [class~="bg-[#1E293B]"]  { background-color: #F8FAFC !important; }
html.light-mode [class~="bg-[#334155]"]  { background-color: #E2E8F0 !important; }
html.light-mode [class~="bg-[#475569]"]  { background-color: #CBD5E1 !important; }
html.light-mode [class~="bg-[#64748B]"]  { background-color: #94A3B8 !important; }
html.light-mode [class~="bg-[#1da851]"]  { background-color: #16a34a !important; }
html.light-mode [class~="bg-[#1db954]"]  { background-color: #16a34a !important; }

/* Opacity variants for dark backgrounds (sticky topbar, overlays) */
html.light-mode [class~="bg-[#0F172A]/90"] { background-color: rgba(248,250,252,0.95) !important; }
html.light-mode [class~="bg-[#0F172A]/80"] { background-color: rgba(248,250,252,0.85) !important; }
html.light-mode [class~="bg-[#0F172A]/50"] { background-color: rgba(241,245,249,0.6)  !important; }
html.light-mode [class~="bg-[#0F172A]/40"] { background-color: rgba(241,245,249,0.4)  !important; }
html.light-mode [class~="bg-[#0F172A]/30"] { background-color: rgba(241,245,249,0.3)  !important; }
html.light-mode [class~="bg-[#334155]/50"] { background-color: rgba(226,232,240,0.5)  !important; }

/* Hover background variants */
html.light-mode [class~="hover:bg-[#0F172A]"]:hover { background-color: #F1F5F9 !important; }
html.light-mode [class~="hover:bg-[#1E293B]"]:hover { background-color: #F0F4F8 !important; }
html.light-mode [class~="hover:bg-[#334155]"]:hover { background-color: #E2E8F0 !important; }
html.light-mode [class~="hover:bg-[#475569]"]:hover { background-color: #CBD5E1 !important; }

/* Gradient stop overrides */
html.light-mode [class~="from-[#0F172A]"] { --tw-gradient-from: #F8FAFC !important; }
html.light-mode [class~="to-[#1E293B]"]   { --tw-gradient-to:   #F1F5F9 !important; }

/* ── Text colour overrides ── */
html.light-mode [class~="text-[#F1F5F9]"] { color: #0F172A !important; }
html.light-mode [class~="text-[#E2E8F0]"] { color: #1E293B !important; }
html.light-mode [class~="text-[#CBD5E1]"] { color: #334155 !important; }
html.light-mode [class~="text-[#94A3B8]"] { color: #475569 !important; }
html.light-mode [class~="text-[#64748B]"] { color: #64748B !important; }

/* text-white → dark on light backgrounds */
html.light-mode .text-white { color: #0F172A !important; }
html.light-mode [class~="hover:text-white"]:hover { color: #0F172A !important; }

/* Restore white text for elements WITH a coloured background (buttons, badges, avatars) */
html.light-mode [class*="bg-[#25D366]"].text-white,
html.light-mode [class*="bg-[#25D366]"] .text-white,
html.light-mode [class*="bg-[#3B82F6]"].text-white,
html.light-mode [class*="bg-[#3B82F6]"] .text-white,
html.light-mode [class*="bg-[#EF4444]"].text-white,
html.light-mode [class*="bg-[#EF4444]"] .text-white,
html.light-mode [class*="bg-[#10B981]"].text-white,
html.light-mode [class*="bg-[#10B981]"] .text-white,
html.light-mode [class*="bg-[#F59E0B]"].text-white,
html.light-mode [class*="bg-[#F59E0B]"] .text-white,
html.light-mode [class*="bg-[#8B5CF6]"].text-white,
html.light-mode [class*="bg-[#8B5CF6]"] .text-white,
html.light-mode [class*="bg-[#EC4899]"].text-white,
html.light-mode [class*="bg-[#EC4899]"] .text-white,
html.light-mode [class*="bg-[#1da851]"].text-white,
html.light-mode [class*="bg-[#1da851]"] .text-white,
html.light-mode [class*="bg-[#F97316]"].text-white,
html.light-mode [class*="bg-[#F97316]"] .text-white { color: #FFFFFF !important; }

/* ── Border colour overrides ── */
html.light-mode [class~="border-[#334155]"] { border-color: #E2E8F0 !important; }
html.light-mode [class~="border-[#475569]"] { border-color: #CBD5E1 !important; }
html.light-mode [class~="border-[#64748B]"] { border-color: #94A3B8 !important; }

/* Divide (horizontal separator) */
html.light-mode [class~="divide-[#334155]"] > * + * { border-color: #E2E8F0 !important; }

/* ── Sidebar specific (overrides inline CSS in <style> blocks) ── */
html.light-mode #sidebar {
  background: #FFFFFF !important;
  border-right-color: #E2E8F0 !important;
}
/* Brand name text (sidebar logo area — white bg in light mode) */
html.light-mode #sidebar .font-bold.text-white { color: #0F172A !important; }
html.light-mode .nav-link.active {
  background: rgba(37, 211, 102, 0.12) !important;
  color: #0F172A !important;
}
html.light-mode .nav-link:not(.active) { color: #475569 !important; }
html.light-mode .nav-link:not(.active):hover {
  color: #0F172A !important;
  background: rgba(226, 232, 240, 0.7) !important;
}

/* ── Main content wrappers ── */
html.light-mode #mainContent,
html.light-mode #pageContent,
html.light-mode main,
html.light-mode .main-content {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}

/* Danger card (Settings) */
html.light-mode .danger-card {
  background: #FFF5F5 !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

/* ── Form fields ── */
html.light-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.light-mode textarea,
html.light-mode select {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}
html.light-mode input::placeholder,
html.light-mode textarea::placeholder { color: #94A3B8 !important; }
html.light-mode input:focus,
html.light-mode textarea:focus,
html.light-mode select:focus {
  border-color: #25D366 !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15) !important;
}

/* ── Tables ── */
html.light-mode thead th {
  background-color: #F8FAFC !important;
  color: #475569 !important;
  border-color: #E2E8F0 !important;
}
html.light-mode tbody td {
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}
html.light-mode tbody tr:hover td {
  background-color: #F8FAFC !important;
}

/* ── Dropdowns / popover menus ── */
html.light-mode .dropdown-menu,
html.light-mode [class*="dropdown"],
html.light-mode [id*="Dropdown"] {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
/* The [class*="dropdown"] selector above also matches the .dropdown trigger
   wrapper div (used in all page headers). Reset it so it stays transparent. */
html.light-mode .dropdown {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.light-mode .dropdown-item { color: #0F172A !important; }
html.light-mode .dropdown-item:hover { background-color: #F8FAFC !important; }
html.light-mode .dropdown-item.danger { color: #EF4444 !important; }

/* ── Modals / drawers ── */
html.light-mode [id$="Modal"] > div,
html.light-mode [id$="Drawer"] > div,
html.light-mode [id$="Panel"] > div {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

/* ── Scrollbar ── */
html.light-mode ::-webkit-scrollbar-track { background: #F8FAFC !important; }
html.light-mode ::-webkit-scrollbar-thumb { background: #CBD5E1 !important; border-radius: 3px !important; }
html.light-mode ::-webkit-scrollbar-thumb:hover { background: #94A3B8 !important; }
/* Sidebar scrollbar always dark regardless of theme */
html.light-mode #sidebar::-webkit-scrollbar-track,
html.light-mode #sidebar ::-webkit-scrollbar-track { background: #1E293B !important; }
html.light-mode #sidebar::-webkit-scrollbar-thumb,
html.light-mode #sidebar ::-webkit-scrollbar-thumb { background: #334155 !important; border-radius: 3px !important; }
html.light-mode #sidebar::-webkit-scrollbar-thumb:hover,
html.light-mode #sidebar ::-webkit-scrollbar-thumb:hover { background: #475569 !important; }
html.light-mode #sidebar { scrollbar-color: #334155 #1E293B; }

/* ── Skeleton shimmer (light) ── */
html.light-mode .skeleton {
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%) !important;
  background-size: 600px 100% !important;
}

/* ── Toast / notification ── */
html.light-mode #toast,
html.light-mode .toast {
  background-color: #1E293B !important;
  color: #F1F5F9 !important;
}

/* ── Code / mono blocks ── */
html.light-mode code,
html.light-mode pre { background: #F1F5F9 !important; color: #0F172A !important; border-color: #E2E8F0 !important; }

/* ── Settings tab strip ── */
html.light-mode .st-tab {
  color: #475569 !important;
  border-color: transparent !important;
}
html.light-mode .st-tab.active,
html.light-mode .st-tab:hover {
  background: rgba(37, 211, 102, 0.1) !important;
  color: #0F172A !important;
}
html.light-mode .st-panel { background-color: #FFFFFF !important; border-color: #E2E8F0 !important; }

/* ── Pricing page public cards ── */
html.light-mode .plan-card,
html.light-mode [class*="rounded-2xl border"] {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

/* ── Inline CSS overrides for pages with hardcoded body style ── */
html.light-mode [class~="bg-[#0F172A]"][class~="min-h-screen"] { background-color: #F1F5F9 !important; }

/* ─────────────────────────────────────────────────────────────
   Inline <style> block overrides — element IDs with hardcoded colors
   (Tailwind class overrides don't reach CSS-rule-based colours)
   ───────────────────────────────────────────────────────────── */

/* Inbox panels */
html.light-mode #convPanel { background: #F8FAFC !important; border-right-color: #E2E8F0 !important; }

/* Chat panel & messages area — WhatsApp light mode background */
html.light-mode #chatPanel { background: #EBE5D5 !important; }
html.light-mode #messagesArea {
  background-color: #EBE5D5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect x='2' y='3' width='24' height='16' rx='8' fill='rgba(0,0,0,0.06)'/%3E%3Cpolygon points='5,19 2,25 11,19' fill='rgba(0,0,0,0.06)'/%3E%3Crect x='30' y='31' width='20' height='14' rx='6' fill='rgba(0,0,0,0.05)'/%3E%3Cpolygon points='47,45 51,51 44,45' fill='rgba(0,0,0,0.05)'/%3E%3Ccircle cx='50' cy='8' r='2.5' fill='rgba(0,0,0,0.05)'/%3E%3Ccircle cx='6' cy='47' r='1.5' fill='rgba(0,0,0,0.04)'/%3E%3C/svg%3E") !important;
  background-size: 56px 56px !important;
  background-repeat: repeat !important;
}
/* Chat header & input bar → WhatsApp light panel colour */
html.light-mode #chatHeader   { background: #F0F2F5 !important; border-bottom-color: #E2E8F0 !important; }
html.light-mode #chatHeader * { color: #111B21 !important; }
html.light-mode #chatHeader .text-white,
html.light-mode #chatHeader [style*="color:#94A3B8"],
html.light-mode #chatHeader [style*="color:#64748B"] { color: #54656F !important; }

/* Message bubbles — WhatsApp light mode colours
   These rules have higher specificity than the generic inline-style overrides
   below, so they win even though both use !important.                         */

/* Inbound bubble → white, dark text, light border */
html.light-mode #messagesArea [style*="background:#1E293B"] {
  background: #FFFFFF !important;
  color: #111B21 !important;
  border-color: #E9EBE8 !important;
}
/* Outbound bubble → WhatsApp light green */
html.light-mode #messagesArea [style*="background:#075E54"] {
  background: #D9FDD3 !important;
}
/* Outbound bubble text → dark */
html.light-mode #messagesArea [style*="color:#E2FFC7"]           { color: #111B21 !important; }
/* Outbound bubble timestamp → muted dark */
html.light-mode #messagesArea [style*="color:rgba(226,255,199"]  { color: rgba(17,27,33,0.45) !important; }
/* Date separator chip → semi-transparent white pill on beige */
html.light-mode #messagesArea [style*="background:#111B21"]      { background: rgba(255,255,255,0.85) !important; color: #667781 !important; }
/* Date separator divider lines */
html.light-mode #messagesArea [style*="height:1px"][style*="background:#334155"] { background: rgba(0,0,0,0.1) !important; }

html.light-mode #emojiPicker { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important; }
html.light-mode #catalogDrawer { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light-mode #contactInfoPanel { background: #F8FAFC !important; border-left-color: #E2E8F0 !important; }

/* Orders panel & cards */
html.light-mode #ordersPanel { background: #F8FAFC !important; border-left-color: #E2E8F0 !important; }
html.light-mode .order-card  { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light-mode .order-card:hover { border-color: #CBD5E1 !important; }

/* Provenance / stats bar below messages area */
html.light-mode #convProvenance {
  background: #F0F2F5 !important;
  border-top-color:    #E2E8F0 !important;
  border-bottom-color: #E2E8F0 !important;
  color: #54656F !important;
}

/* Profile panel (inline style override) */
html.light-mode #profilePanel { background: #F8FAFC !important; border-left-color: #E2E8F0 !important; }
html.light-mode #inboxTplList,
html.light-mode #newChatContactSuggestions,
html.light-mode #newChatTemplateList { background: #FFFFFF !important; border-color: #E2E8F0 !important; }

/* Settings, Chatbot, Analytics — dropdowns & panels with inline background */
html.light-mode .analytics-dropdown,
html.light-mode [id*="Dropdown"],
html.light-mode [id*="dropdown"] { background: #FFFFFF !important; border-color: #E2E8F0 !important; }

/* ─────────────────────────────────────────────────────────────
   Inline style="" attribute overrides
   Matches elements where the style attr contains dark hex values.
   !important beats inline styles in the cascade.
   ───────────────────────────────────────────────────────────── */

/* Background inline styles */
html.light-mode [style*="background:#0F172A"]  { background: #FFFFFF !important; }
html.light-mode [style*="background: #0F172A"] { background: #FFFFFF !important; }
html.light-mode [style*="background:#1E293B"]  { background: #F8FAFC !important; }
html.light-mode [style*="background: #1E293B"] { background: #F8FAFC !important; }
html.light-mode [style*="background:#334155"]  { background: #E2E8F0 !important; }
html.light-mode [style*="background: #334155"] { background: #E2E8F0 !important; }
html.light-mode [style*="background:#475569"]  { background: #CBD5E1 !important; }

/* Text inline styles */
html.light-mode [style*="color:#F1F5F9"]  { color: #0F172A !important; }
html.light-mode [style*="color: #F1F5F9"] { color: #0F172A !important; }
html.light-mode [style*="color:#94A3B8"]  { color: #475569 !important; }
html.light-mode [style*="color:#64748B"]  { color: #64748B !important; }

/* Border inline styles */
html.light-mode [style*="solid #334155"] { border-color: #E2E8F0 !important; }
html.light-mode [style*="solid #475569"] { border-color: #CBD5E1 !important; }

/* Separator dividers */
html.light-mode [style*="background:#334155"][style*="height:1px"],
html.light-mode [style*="background: #334155"][style*="height:1px"] { background: #E2E8F0 !important; }

/* ─────────────────────────────────────────────────────────────
   Inbox — Quick Reply Picker
   ───────────────────────────────────────────────────────────── */
html.light-mode #quickReplyPicker {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.10) !important;
}
html.light-mode #quickReplyPicker > div { border-color: #E2E8F0 !important; }
html.light-mode #quickReplySearch {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
html.light-mode #quickReplySearch::placeholder { color: #94A3B8 !important; }
html.light-mode #quickReplyList .qr-item {
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}
html.light-mode #quickReplyList .qr-item:hover { background: #F1F5F9 !important; }

/* ─────────────────────────────────────────────────────────────
   Inbox — Schedule Message Picker
   ───────────────────────────────────────────────────────────── */
html.light-mode #schedulePicker {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.10) !important;
}
html.light-mode #schedulePicker label,
html.light-mode #schedulePicker span { color: #0F172A !important; }
html.light-mode #scheduleDateTime {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  color-scheme: light !important;
}
html.light-mode #scheduleCancel {
  border-color: #CBD5E1 !important;
  color: #475569 !important;
  background: transparent !important;
}
html.light-mode #scheduleCancel:hover { background: #F1F5F9 !important; }

/* ─────────────────────────────────────────────────────────────
   Inbox — List Message Modal internals
   ───────────────────────────────────────────────────────────── */
html.light-mode #listMsgModal input,
html.light-mode #listMsgModal textarea {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
html.light-mode #listMsgModal input::placeholder,
html.light-mode #listMsgModal textarea::placeholder { color: #94A3B8 !important; }
html.light-mode #listMsgModal label,
html.light-mode #listMsgModal p,
html.light-mode #listMsgModal span { color: #0F172A !important; }
html.light-mode #listMsgModal [style*="border-top:1px"],
html.light-mode #listMsgModal [style*="border-top: 1px"] { border-color: #E2E8F0 !important; }

/* Section + row wrappers are created via JS style.cssText, which Chrome normalises
   to rgb() — so [style*="background:#..."] attribute selectors never match them.
   We add CSS classes in JS (list-section-el / list-row-el) and target those instead. */
html.light-mode .list-section-el {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}
html.light-mode .list-row-el {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
}

/* Description input uses border:1px solid #1E293B — not in the generic rules */
html.light-mode [style*="solid #1E293B"] { border-color: #E2E8F0 !important; }

/* ─────────────────────────────────────────────────────────────
   Inbox — Scheduled Messages list items
   (background:#0F172A — already caught above, belt-and-braces)
   ───────────────────────────────────────────────────────────── */
html.light-mode #scheduledMsgsList [style*="background:#0F172A"],
html.light-mode #scheduledMsgsList [style*="background: #0F172A"] {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}
html.light-mode #scheduledMsgsList [style*="color:#94A3B8"] { color: #475569 !important; }
html.light-mode #scheduledMsgsList [style*="color:#64748B"] { color: #64748B !important; }

/* ─────────────────────────────────────────────────────────────
   Theme Toggle Button
   Placed in sidebar logo area. Toggles sun ↔ moon icon.
   ───────────────────────────────────────────────────────────── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: transparent;
  cursor: pointer;
  color: #94A3B8;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
}
.theme-toggle-btn:hover {
  background: rgba(51, 65, 85, 0.6);
  color: #F1F5F9;
  border-color: #475569;
}
html.light-mode .theme-toggle-btn {
  border-color: #E2E8F0 !important;
  color: #64748B !important;
}
html.light-mode .theme-toggle-btn:hover {
  background: rgba(203, 213, 225, 0.6) !important;
  color: #0F172A !important;
}

/* ═════════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC CUSTOM CLASS OVERRIDES
   Covers <style>-block CSS classes that hardcode dark-mode hex values
   and are NOT reached by the Tailwind utility or inline-style selectors above.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Shared form & input helpers ───────────────────────────────────── */
html.light-mode .form-label   { color: #475569 !important; }
html.light-mode .form-select  { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #0F172A !important; }
html.light-mode .form-control { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #0F172A !important; }

/* ── Toggle switches (off-state track — both naming conventions) ─────── */
html.light-mode .toggle-track  { background: #CBD5E1 !important; }
html.light-mode .toggle-slider { background: #CBD5E1 !important; }

/* ── Generic card & secondary-button patterns ───────────────────────── */
html.light-mode .card         { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light-mode .model-card   { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
html.light-mode .btn-secondary { background: #F1F5F9 !important; border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .btn-secondary:hover { border-color: #CBD5E1 !important; background: #E2E8F0 !important; }
html.light-mode .btn-ghost     { color: #475569 !important; border-color: #E2E8F0 !important; }
html.light-mode .btn-ghost:hover { border-color: #CBD5E1 !important; }

/* ── Tab / filter elements shared across pages ─────────────────────── */
html.light-mode .filter-tab            { color: #475569 !important; }
html.light-mode .filter-tab.active     { background: #E2E8F0 !important; color: #0F172A !important; }
html.light-mode .filter-tab:not(.active) .badge { background: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .filter-pill           { border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .filter-pill:hover     { border-color: #CBD5E1 !important; }
html.light-mode .filter-chip           { border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .tab-btn               { color: #475569 !important; }
html.light-mode .ai-tab                { color: #475569 !important; }
html.light-mode .detail-tab            { color: #475569 !important; }

/* ── Radio-style button groups ─────────────────────────────────────── */
html.light-mode .radio-btn    { border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .rr-btn       { color: #475569 !important; border-color: #E2E8F0 !important; }
html.light-mode .rr-btn:hover { border-color: #CBD5E1 !important; }
html.light-mode .prio-option  { border-color: #E2E8F0 !important; }
html.light-mode .prio-option:hover { border-color: #CBD5E1 !important; }

/* ── queue.html ─────────────────────────────────────────────────────── */
html.light-mode .stat-card        { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #0F172A !important; }
html.light-mode .filter-tabs      { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
html.light-mode .queue-row        { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light-mode .queue-row:hover  { border-color: #CBD5E1 !important; background: #F8FAFC !important; }
html.light-mode .queue-row.priority-normal { border-left-color: #E2E8F0 !important; }
html.light-mode .prio-normal      { background: #F8FAFC !important; color: #475569 !important; border-color: #E2E8F0 !important; }
html.light-mode .my-status-btn    { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
html.light-mode .my-status-btn:hover { border-color: #CBD5E1 !important; }
html.light-mode .status-offline   { background: #94A3B8 !important; }
html.light-mode .agent-bar        { background: #E2E8F0 !important; }
html.light-mode .avatar           { background: #CBD5E1 !important; }
html.light-mode #bulkActionBar    { background: #F1F5F9 !important; border-bottom-color: #E2E8F0 !important; }

/* ── routing.html ───────────────────────────────────────────────────── */
html.light-mode .sla-card       { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light-mode .rule-card      { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light-mode .rule-card:hover { border-color: #CBD5E1 !important; }
html.light-mode .cond-row       { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
html.light-mode .cond-select    { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #0F172A !important; }
html.light-mode .cond-input     { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #0F172A !important; }

/* ── connections.html ───────────────────────────────────────────────── */
html.light-mode .store-card       { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light-mode .store-card:hover { border-color: #CBD5E1 !important; }

/* ── bulk.html ──────────────────────────────────────────────────────── */
html.light-mode .step-dot.pending { background: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .step-line        { background: #E2E8F0 !important; }
html.light-mode #detailPanel      { background: #F8FAFC !important; border-left-color: #E2E8F0 !important; }
html.light-mode .progress-bar     { background: #E2E8F0 !important; }

/* ── analytics.html ─────────────────────────────────────────────────── */
html.light-mode .date-preset-btn       { border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .date-preset-btn:hover { border-color: #CBD5E1 !important; }
html.light-mode .date-custom-input     { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #0F172A !important; }

/* ── templates.html ─────────────────────────────────────────────────── */
html.light-mode .more-dropdown-menu    { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light-mode #templateBody          { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #0F172A !important; }
html.light-mode .platform-radio label  { border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .platform-radio label:hover { border-color: #CBD5E1 !important; }
html.light-mode .two-panel-left        { border-bottom-color: #E2E8F0 !important; }
html.light-mode .filter-select         { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .tpl-group-header      { color: #475569 !important; }
html.light-mode .btn-builder-row       { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
html.light-mode .btn-builder-row select,
html.light-mode .btn-builder-row input { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #0F172A !important; }
html.light-mode .analytics-bar-label  { color: #475569 !important; }
html.light-mode .analytics-bar-track  { background: #E2E8F0 !important; }
html.light-mode .analytics-bar-val    { color: #475569 !important; }
html.light-mode .type-card-btn        { border-color: #E2E8F0 !important; background: #FFFFFF !important; color: #475569 !important; }
html.light-mode .type-card-btn:hover  { border-color: #CBD5E1 !important; }
html.light-mode .type-card-btn .btn-type-desc       { color: #475569 !important; }
html.light-mode .type-card-btn.active .btn-type-desc { color: #475569 !important; }
html.light-mode .step-label           { color: #475569 !important; }
html.light-mode .carousel-card        { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light-mode .carousel-card:hover  { border-color: #CBD5E1 !important; }
html.light-mode .carousel-card-header { background: #F8FAFC !important; }
html.light-mode .carousel-card-body input,
html.light-mode .carousel-card-body textarea { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #0F172A !important; }
html.light-mode .carousel-card-btn-row select { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .carousel-add-card    { border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .carousel-constraint-note { color: #475569 !important; }
html.light-mode .carousel-cards-scroll::-webkit-scrollbar-thumb { background: #CBD5E1 !important; }

/* ── flows.html ─────────────────────────────────────────────────────── */
html.light-mode .tpl-cat-btn       { border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .tpl-cat-btn:hover { border-color: #CBD5E1 !important; }
html.light-mode .tpl-card          { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light-mode .tpl-card:hover    { border-color: #CBD5E1 !important; }
html.light-mode .badge-draft       { color: #475569 !important; }

/* ── schedule.html ──────────────────────────────────────────────────── */
html.light-mode .sched-preset-btn       { border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .sched-preset-btn:hover { border-color: #CBD5E1 !important; }
html.light-mode .sched-date-input  { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #0F172A !important; }
html.light-mode .contact-dropdown  { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html.light-mode .contact-opt:hover { background: #F8FAFC !important; }

/* ── sequences.html ─────────────────────────────────────────────────── */
html.light-mode .seq-name           { color: #475569 !important; }
html.light-mode .badge-archived     { color: #64748B !important; }
html.light-mode .step-card          { border-color: #E2E8F0 !important; }
html.light-mode .step-card:hover    { border-color: #CBD5E1 !important; }
html.light-mode .step-connector::after { background: #E2E8F0 !important; }
html.light-mode .step-connector span { background: #F8FAFC !important; color: #475569 !important; }

/* ── automations.html ───────────────────────────────────────────────── */
html.light-mode .event-label { color: #475569 !important; }

/* ── widget_widgets.html ────────────────────────────────────────────── */
html.light-mode .pos-btn      { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .pos-btn:hover { border-color: #CBD5E1 !important; }
html.light-mode .size-btn     { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .size-btn:hover { border-color: #CBD5E1 !important; }
html.light-mode .anim-btn     { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #475569 !important; }
html.light-mode .anim-btn:hover { border-color: #CBD5E1 !important; }
html.light-mode .widget-card  { border-color: #E2E8F0 !important; background: #FFFFFF !important; }
html.light-mode .widget-card:hover { border-color: #CBD5E1 !important; }
html.light-mode .phone-notch  { background: #CBD5E1 !important; }
html.light-mode .phone-frame  { border-color: #CBD5E1 !important; }
html.light-mode .swatch       { border-color: #CBD5E1 !important; }
html.light-mode .embed-block  { background: #F8FAFC !important; border-color: #E2E8F0 !important; }

/* ── index.html gradient panel: preserve white text in light mode ── */
html.light-mode .gradient-panel                        { color: #ffffff !important; }
html.light-mode .gradient-panel .text-white            { color: #ffffff !important; }
html.light-mode .gradient-panel [class~="text-[#F1F5F9]"] { color: #ffffff !important; }
html.light-mode .gradient-panel [class~="text-[#94A3B8]"] { color: rgba(255,255,255,0.6) !important; }
html.light-mode .gradient-panel svg                    { color: inherit !important; }