/* ============================================================
   AMS Fone CRM — Dark Mode Fix
   ------------------------------------------------------------
   Dark-mode-ONLY overrides. EVERY selector is prefixed with
   [data-theme="dark"], so this file is a complete no-op in light
   mode. Linked LAST in each page <head> (after common.css +
   responsive.css) so it wins the cascade.

   WHY: each page's inline <style> hardcodes white surfaces
   (background:#fff / slate-50) + the fixed slate palette, which the
   semantic dark tokens (--bg-card/--text-* flip in common.css) do
   NOT override. So in dark mode those surfaces stay white while text
   tokens flip light → light-on-white = invisible. We re-skin the
   leaking page-specific surfaces/controls to the dark tokens.

   !important is used deliberately: many leaks are id-specificity or
   inline rules, and these rules only ever apply in dark mode, so
   there is zero light-mode risk. AMS Blue (#03A9F4) preserved.

   Dark tokens (from common.css): --bg-card #1e293b,
   --bg-primary #0f172a, --text-primary #f1f5f9,
   --text-secondary #cbd5e1, --border-color #334155.

   v=20260624-DARKFIX
   ============================================================ */

/* ---------- 1. SURFACES: cards / panels / bars / sections ---------- */
[data-theme="dark"] .section-card,
[data-theme="dark"] .profile-hero,
[data-theme="dark"] .tabs-bar,
[data-theme="dark"] .tabs-shell,
[data-theme="dark"] .set-card,
[data-theme="dark"] .ai-ctrl-card,
[data-theme="dark"] .ai-list,
[data-theme="dark"] .ai-empty,
[data-theme="dark"] .ai-stat,
[data-theme="dark"] .ai-feed-rollup,
[data-theme="dark"] .tp-card,
[data-theme="dark"] .tp-section,
[data-theme="dark"] .tp-header,
[data-theme="dark"] .tp-sidebar,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .usage-card,
[data-theme="dark"] .stat-tile,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .lists-card,
[data-theme="dark"] .calls-card,
[data-theme="dark"] .tasks-card,
[data-theme="dark"] .et-card,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .member-detail-panel,
[data-theme="dark"] .savebar,
[data-theme="dark"] .denied-card,
[data-theme="dark"] .lead-card,
[data-theme="dark"] .timeline,
[data-theme="dark"] .nlist,
[data-theme="dark"] .report-tabs,
[data-theme="dark"] .fh-tabs,
[data-theme="dark"] .contact-header,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .date-filters,
[data-theme="dark"] .rep-date-filters,
[data-theme="dark"] .tags-input-wrapper,
[data-theme="dark"] .form-footer,
[data-theme="dark"] .step,
[data-theme="dark"] .adv-panel,
[data-theme="dark"] .adv-panel-head,
[data-theme="dark"] .adv-panel-body,
[data-theme="dark"] .adv-panel-foot,
[data-theme="dark"] #poojaDisabledNotice {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    color: var(--text-primary, #f1f5f9);
}

/* ---------- 2. FORM CONTROLS (generic): dark field + light text ---------- */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-secondary, #94a3b8) !important;
    opacity: 1;
}

/* ---------- 3. WHITE FILTER / TOGGLE / SECONDARY BUTTONS → dark ---------- */
[data-theme="dark"] .filter-dropdown,
[data-theme="dark"] .page-btn,
[data-theme="dark"] .btn-secondary-outline,
[data-theme="dark"] .date-filter-btn,
[data-theme="dark"] .rep-date-filter-btn,
[data-theme="dark"] .action-btn.secondary,
[data-theme="dark"] .quick-action,
[data-theme="dark"] .ai-tab,
[data-theme="dark"] .pg-btn,
[data-theme="dark"] .report-tab,
[data-theme="dark"] .et-tab,
[data-theme="dark"] .pub-tab,
[data-theme="dark"] .type-chip,
[data-theme="dark"] .filter-pill,
[data-theme="dark"] .ams-access-pill,
[data-theme="dark"] .stage-option,
[data-theme="dark"] .staff-chip,
[data-theme="dark"] .chart-mini-btn,
[data-theme="dark"] .cd-qe-chip {
    background-color: var(--bg-card, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

/* ---------- 4. ACTIVE states keep an AMS-blue accent (readable) ---------- */
[data-theme="dark"] .filter-dropdown.active,
[data-theme="dark"] .date-filter-btn.active,
[data-theme="dark"] .rep-date-filter-btn.active,
[data-theme="dark"] .filter-pill.active,
[data-theme="dark"] .report-tab.active,
[data-theme="dark"] .ai-tab.active,
[data-theme="dark"] .et-tab.active,
[data-theme="dark"] .pub-tab.active,
[data-theme="dark"] .type-chip.active,
[data-theme="dark"] .page-btn.active {
    background-color: var(--ams-blue, #03A9F4) !important;
    color: #fff !important;
    border-color: var(--ams-blue, #03A9F4) !important;
}
/* Tab bars usually use an underline-style active tab — keep transparent bg
   so the page's own active styling (blue underline/text) shows through. */
[data-theme="dark"] .tab-btn.active {
    color: var(--ams-blue, #03A9F4) !important;
}

/* ---------- 5. Text that would stay dark-on-dark → light ---------- */
[data-theme="dark"] .section-title,
[data-theme="dark"] .detail-title,
[data-theme="dark"] .lists-card-title,
[data-theme="dark"] .stat-tile-value,
[data-theme="dark"] .info-value,
[data-theme="dark"] .summary-value,
[data-theme="dark"] .usage-value,
[data-theme="dark"] .member-name-lg,
[data-theme="dark"] .portal-name,
[data-theme="dark"] .permission-title,
[data-theme="dark"] .security-row-title {
    color: var(--text-primary, #f1f5f9) !important;
}

/* ---------- 6. WhatsApp surfaces (page + quick-popup read-only panel) ---------- */
[data-theme="dark"] .wa-layout,
[data-theme="dark"] .wa-list-panel,
[data-theme="dark"] .wa-cpanel,
[data-theme="dark"] .wa-compose,
[data-theme="dark"] .wa-chat-item {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    color: var(--text-primary, #f1f5f9);
}
[data-theme="dark"] .wa-chat-item.active {
    background-color: var(--bg-primary, #0f172a) !important;
}
/* Quick-popup WhatsApp read-only chat: darken the chat surface; keep the
   outgoing green bubble, darken the incoming (white) bubble. */
[data-theme="dark"] .qp-wa-msgs { background-color: #0b141a !important; }
[data-theme="dark"] .qp-wa-in .qp-wa-bubble { background: #1f2c33 !important; }
[data-theme="dark"] .qp-wa-in .qp-wa-text { color: #e6edf0 !important; }
[data-theme="dark"] .qp-wa-head,
[data-theme="dark"] .qp-wa-compose { background-color: var(--bg-card, #1e293b) !important; border-color: var(--border-color, #334155) !important; }

/* ---------- 7. Straggler surfaces / toggles found in re-audit ---------- */
[data-theme="dark"] .tag-row,
[data-theme="dark"] .dnd-toggle,
[data-theme="dark"] .ai-pooja-chip,
[data-theme="dark"] .ai-uni-empty,
[data-theme="dark"] .detail-stat-pill,
[data-theme="dark"] .view-toggle button {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    color: var(--text-primary, #f1f5f9) !important;
}
[data-theme="dark"] .dnd-label { color: var(--text-primary, #f1f5f9) !important; }

/* File inputs: native white button → dark. */
[data-theme="dark"] input[type="file"] {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border: 1px solid var(--border-color, #334155) !important;
    border-radius: 8px;
}

/* Active segmented controls: clear AMS-blue active on dark. */
[data-theme="dark"] .view-toggle button.active {
    background-color: var(--ams-blue, #03A9F4) !important;
    color: #fff !important;
    border-color: var(--ams-blue, #03A9F4) !important;
}
/* Active tab pill → dark elevated with blue text (was a bright white pill). */
[data-theme="dark"] .tab-btn.active {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--ams-blue, #03A9F4) !important;
}
/* Tab HOVER: settings.html `.tab-btn:hover{background:white;color:slate-900}`
   (0,1,1) turned the tab white on hover in dark mode — out-specify + !important. */
[data-theme="dark"] .tab-btn:hover {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] .tab-btn.active:hover {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--ams-blue, #03A9F4) !important;
}
/* Generic white filter/toggle .btn that aren't .btn-secondary (e.g. #onlyUnread). */
[data-theme="dark"] #onlyUnread.btn {
    background-color: var(--bg-card, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

/* ---------- 8. Final stragglers ---------- */
/* pooja-gate "not enabled" banner: bg already darkened (section 1); its text is
   inline-hardcoded dark -> force light (needs !important to beat inline style). */
[data-theme="dark"] #poojaDisabledNotice strong { color: var(--text-primary, #f1f5f9) !important; }
[data-theme="dark"] #poojaDisabledNotice div { color: var(--text-secondary, #cbd5e1) !important; }

/* Pipeline kanban column-count badge. */
[data-theme="dark"] .column-count {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

/* Tenant-portal buttons. */
[data-theme="dark"] .tp-btn {
    background-color: var(--bg-card, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

/* Team "remove member" outline-danger button (white in dark) -> dark danger. */
[data-theme="dark"] #tmRemoveBtn.btn-danger {
    background-color: var(--bg-card, #1e293b) !important;
    color: #f87171 !important;
    border-color: #7f1d1d !important;
}

/* ---------- 9. Contacts list: row action icons + row hover / selected ---------- */
/* Action icon buttons (call / whatsapp / more) were white boxes in dark mode.
   Transparent box, light icon, dark accent hovers. */
[data-theme="dark"] .icon-btn {
    background-color: transparent !important;
    border-color: var(--border-color, #334155) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}
[data-theme="dark"] .icon-btn:hover {
    background-color: var(--slate-700, #334155) !important;
    border-color: var(--slate-600, #475569) !important;
    color: #fff !important;
}
[data-theme="dark"] .icon-btn.call:hover {
    background-color: rgba(3, 169, 244, 0.18) !important;
    border-color: var(--ams-blue, #03A9F4) !important;
    color: var(--ams-blue-light, #81D4FA) !important;
}
[data-theme="dark"] .icon-btn.whatsapp:hover {
    background-color: rgba(34, 197, 94, 0.18) !important;
    border-color: var(--green, #22c55e) !important;
    color: #4ade80 !important;
}
/* Contact row hover + selected (scoped to the contacts stacked-table list so
   other tables are untouched). Clear, distinct dark highlight. */
[data-theme="dark"] .ams-stacked-table tbody tr:hover {
    background-color: #243047 !important;
}
[data-theme="dark"] .ams-stacked-table tbody tr.selected {
    background-color: rgba(3, 169, 244, 0.18) !important;
}
[data-theme="dark"] .ams-stacked-table tbody tr.selected:hover {
    background-color: rgba(3, 169, 244, 0.26) !important;
}

/* ---------- 10. Tasks list: row action icons (white boxes) + row hover ---------- */
/* Tasks use .task-action-btn (not .icon-btn) — white 30px boxes in dark mode. */
[data-theme="dark"] .task-action-btn {
    background-color: transparent !important;
    border-color: var(--border-color, #334155) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}
[data-theme="dark"] .task-action-btn:hover {
    background-color: var(--slate-700, #334155) !important;
    border-color: var(--slate-600, #475569) !important;
    color: #fff !important;
}
[data-theme="dark"] .task-action-btn.call:hover {
    background-color: rgba(3, 169, 244, 0.18) !important;
    border-color: var(--ams-blue, #03A9F4) !important;
    color: var(--ams-blue-light, #81D4FA) !important;
}
[data-theme="dark"] .task-action-btn.whatsapp:hover,
[data-theme="dark"] .task-action-btn.complete:hover {
    background-color: rgba(34, 197, 94, 0.18) !important;
    border-color: var(--green, #22c55e) !important;
    color: #4ade80 !important;
}
/* Task row hover — clearly visible dark highlight (matches contacts). */
[data-theme="dark"] .task-row:hover {
    background-color: #243047 !important;
}

/* ---------- 11. Filter dropdowns + Date Range popover ---------- */
/* (a) Date Range popover (#cFilterPopover, contacts) — inline white styles. */
[data-theme="dark"] #cFilterPopover {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] #cFilterPopover label { color: var(--text-secondary, #cbd5e1) !important; }
[data-theme="dark"] #cFilterPopover button[data-preset],
[data-theme="dark"] #cFilterPopover #cDateClearBtn {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] #cFilterPopover button[data-preset]:hover,
[data-theme="dark"] #cFilterPopover #cDateClearBtn:hover {
    background-color: var(--slate-700, #334155) !important;
}

/* (b) SearchableDropdown filter panel (#__amsSearchableDropdownPanel) — used by
   Temperature / Stage / Tags / Owner / List / Source. Inline white styles. */
[data-theme="dark"] #__amsSearchableDropdownPanel,
[data-theme="dark"] #__amsSearchableDropdownPanel > div {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] #__amsSearchableDropdownPanel {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
/* option rows (carry aria-selected) — light text, dark hover, AMS-blue selected. */
[data-theme="dark"] #__amsSearchableDropdownPanel button[aria-selected] {
    color: var(--text-primary, #f1f5f9) !important;
}
[data-theme="dark"] #__amsSearchableDropdownPanel button[aria-selected]:hover {
    background-color: #243047 !important;
}
[data-theme="dark"] #__amsSearchableDropdownPanel button[aria-selected="true"] {
    background-color: rgba(3, 169, 244, 0.18) !important;
    color: #fff !important;
}
/* footer Cancel button (first button in the footer/last div) -> dark; Apply stays blue. */
[data-theme="dark"] #__amsSearchableDropdownPanel > div:last-child > button:first-child {
    background-color: var(--bg-card, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}

/* (c) Native date/time picker controls -> dark UI (calendar icon visible). */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="month"] {
    color-scheme: dark;
}

/* ---------- 12. Click-opened menus: Export / scope dropdowns / calendar ---------- */
/* (a) Export dropdowns — contacts (.export-menu), tasks (#taskExportMenu),
   reports (#repExportMenu). White panels + items. */
[data-theme="dark"] .export-menu,
[data-theme="dark"] #taskExportMenu,
[data-theme="dark"] #repExportMenu {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .export-menu button,
[data-theme="dark"] #taskExportMenu button,
[data-theme="dark"] #repExportMenu button {
    color: var(--text-primary, #f1f5f9) !important;
    background-color: transparent !important;
}
[data-theme="dark"] .export-menu button:hover,
[data-theme="dark"] #taskExportMenu button:hover,
[data-theme="dark"] #repExportMenu button:hover {
    background-color: #243047 !important;
    color: #fff !important;
}
[data-theme="dark"] .export-menu button svg { color: var(--text-secondary, #cbd5e1) !important; }

/* (b) Tasks scope/priority/assignee dropdowns (shared .scope-dd-menu). */
[data-theme="dark"] .scope-dd-menu {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .scope-dd-menu .quick-filter {
    background-color: transparent !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .scope-dd-menu .quick-filter:hover {
    background-color: #243047 !important;
}
[data-theme="dark"] .scope-dd-menu .quick-filter.active {
    background-color: var(--ams-blue, #03A9F4) !important;
    color: #fff !important;
    border-color: var(--ams-blue, #03A9F4) !important;
}

/* (c) Calls date-range calendar popover (.rangecal). */
[data-theme="dark"] .rangecal {
    background-color: var(--bg-card, #1e293b) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .rangecal-preset,
[data-theme="dark"] .rangecal-nav {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .rangecal-mtitle,
[data-theme="dark"] .rangecal-range-txt,
[data-theme="dark"] .rangecal-day { color: var(--text-primary, #f1f5f9) !important; }
[data-theme="dark"] .rangecal-day:hover { background-color: #243047 !important; }
[data-theme="dark"] .rangecal-day.in-range { background-color: rgba(3, 169, 244, 0.18) !important; }
[data-theme="dark"] .rangecal-foot { border-top-color: var(--border-color, #334155) !important; }

/* ---------- 13. More menus: WhatsApp ⋮ · reports calendar · team action ---------- */
/* (a) WhatsApp chat-header "More" (⋮) menu (.wa-more-menu — runtime-injected). */
[data-theme="dark"] .wa-more-menu {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .wa-more-item { color: var(--text-primary, #f1f5f9) !important; }
[data-theme="dark"] .wa-more-item:hover { background-color: #243047 !important; color: #fff !important; }
[data-theme="dark"] .wa-more-item.wa-more-danger { color: #f87171 !important; }
[data-theme="dark"] .wa-more-item.wa-more-danger:hover { background-color: rgba(220, 38, 38, 0.22) !important; color: #fca5a5 !important; }
[data-theme="dark"] .wa-more-sep { background-color: var(--border-color, #334155) !important; }

/* (b) Reports range calendar (.repcal — prefixed copy of the calls .rangecal). */
[data-theme="dark"] .repcal {
    background-color: var(--bg-card, #1e293b) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .repcal-preset,
[data-theme="dark"] .repcal-nav {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .repcal-mtitle,
[data-theme="dark"] .repcal-range-txt,
[data-theme="dark"] .repcal-day { color: var(--text-primary, #f1f5f9) !important; }
[data-theme="dark"] .repcal-day:hover { background-color: #243047 !important; }
[data-theme="dark"] .repcal-day.in-range { background-color: rgba(3, 169, 244, 0.18) !important; }
[data-theme="dark"] .repcal-foot { border-top-color: var(--border-color, #334155) !important; }

/* (c) Team member action menu (#tmActionMenu — JS-built inline white). */
[data-theme="dark"] #tmActionMenu {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] #tmActionMenu button { color: var(--text-primary, #f1f5f9) !important; }
[data-theme="dark"] #tmActionMenu button[data-key="remove"] { color: #f87171 !important; }
[data-theme="dark"] #tmActionMenu button:hover { background-color: #243047 !important; }

/* (d) Contact-detail "More" menu (.cd-more-menu). */
[data-theme="dark"] .cd-more-menu {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .cd-more-item { color: var(--text-primary, #f1f5f9) !important; }
[data-theme="dark"] .cd-more-item:hover { background-color: #243047 !important; color: #fff !important; }
[data-theme="dark"] .cd-more-divider { background-color: var(--border-color, #334155) !important; }
[data-theme="dark"] .cd-more-danger { color: #f87171 !important; }
[data-theme="dark"] .cd-more-danger:hover { background-color: rgba(220, 38, 38, 0.22) !important; color: #fca5a5 !important; }

/* ---------- 14. ai-setup.html — AI Intent → CRM Mapping (chips + rows) ---------- */
/* Intent rows + labels. */
[data-theme="dark"] .im-row { border-color: var(--border-color, #334155) !important; }
[data-theme="dark"] .im-label { color: var(--text-primary, #f1f5f9) !important; }
[data-theme="dark"] .im-ctl > label { color: var(--text-secondary, #cbd5e1) !important; }
[data-theme="dark"] .im-empty { border-color: var(--border-color, #334155) !important; }
/* Tag chips: UNSELECTED -> dark (was white); SELECTED (.on) -> AMS-blue dark tint.
   The per-tag colour lives on the inner .dot (inline) and is preserved. */
[data-theme="dark"] .im-chip {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .im-chip:hover,
[data-theme="dark"] .im-chip.ro:hover {
    background-color: #243047 !important;
    border-color: var(--slate-600, #475569) !important;
}
[data-theme="dark"] .im-chip.on {
    background-color: rgba(3, 169, 244, 0.18) !important;
    border-color: var(--ams-blue, #03A9F4) !important;
    color: var(--ams-blue-light, #81D4FA) !important;
}

/* ---------- 15. whatsapp.html — right contact panel + chat surfaces ---------- */
/* Right-panel action buttons (Call / Pooja / Message / Assign) — white boxes. */
[data-theme="dark"] .wa-cp-act {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .wa-cp-act:hover {
    background-color: rgba(3, 169, 244, 0.18) !important;
    border-color: var(--ams-blue, #03A9F4) !important;
    color: var(--ams-blue-light, #81D4FA) !important;
}
[data-theme="dark"] .wa-cp-act.is-on {
    background-color: var(--ams-blue, #03A9F4) !important;
    border-color: var(--ams-blue, #03A9F4) !important;
    color: #fff !important;
}
/* Follow-up / complete / cancel buttons. */
[data-theme="dark"] .wa-cp-fu-btn {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .wa-cp-fu-btn:hover:not(:disabled) {
    background-color: rgba(3, 169, 244, 0.18) !important;
    border-color: var(--ams-blue, #03A9F4) !important;
    color: var(--ams-blue-light, #81D4FA) !important;
}
[data-theme="dark"] .wa-cp-fu-btn.active {
    background-color: var(--ams-blue, #03A9F4) !important;
    color: #fff !important;
    border-color: var(--ams-blue, #03A9F4) !important;
}
[data-theme="dark"] .wa-cp-fu-cancel {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
}
/* Info tiles + accent boxes (pooja status / complete / rec / call-dir). */
[data-theme="dark"] .wa-cp-info-grid > div { background-color: var(--bg-primary, #0f172a) !important; }
[data-theme="dark"] .wa-cp-complete,
[data-theme="dark"] .wa-cp-rec,
[data-theme="dark"] .wa-cp-call-dir,
[data-theme="dark"] .wa-cp-pooja-status {
    background-color: rgba(3, 169, 244, 0.18) !important;
    color: var(--ams-blue-light, #81D4FA) !important;
    border-color: var(--ams-blue, #03A9F4) !important;
}
[data-theme="dark"] .wa-cp-call-dir.missed { background-color: rgba(220, 38, 38, 0.22) !important; color: #fca5a5 !important; }
/* FU limit warning -> dark amber. */
[data-theme="dark"] .wa-cp-fu-limit {
    background-color: rgba(180, 83, 9, 0.18) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    color: #fcd34d !important;
}
/* Borders on heads/rows/cards/tabs. */
[data-theme="dark"] .wa-cp-head,
[data-theme="dark"] .wa-cp-actions,
[data-theme="dark"] .wa-cp-leadrow,
[data-theme="dark"] .wa-cp-tabs,
[data-theme="dark"] .wa-cp-note,
[data-theme="dark"] .wa-cp-task,
[data-theme="dark"] .wa-cp-fu-form,
[data-theme="dark"] .wa-cp-call { border-color: var(--border-color, #334155) !important; }
/* Names/section text + active tab accent. */
[data-theme="dark"] .wa-cp-name,
[data-theme="dark"] .wa-cp-task-type { color: var(--text-primary, #f1f5f9) !important; }
[data-theme="dark"] .wa-cp-tab.active {
    color: var(--ams-blue-light, #81D4FA) !important;
    border-bottom-color: var(--ams-blue, #03A9F4) !important;
}
/* Chat area background -> WhatsApp dark. */
[data-theme="dark"] .wa-chat-panel { background-color: #0b141a !important; }

/* ---------- 16. whatsapp.html — incoming bubbles + header buttons ---------- */
/* (a) Incoming message bubbles are JS-rendered with INLINE `background: white`
   and no class, so match the inline style to override (outgoing green #dcf8c6
   is NOT matched and stays green). Dark-grey bubble + light text. */
[data-theme="dark"] .wa-messages div[style*="background: white"] {
    background-color: #2a3942 !important;
    color: #e6edf0 !important;
}
[data-theme="dark"] .wa-messages div[style*="background: white"] div {
    color: #9fb3c0 !important;            /* timestamp / meta inside the bubble */
}
/* Date separator pill (inline background: var(--slate-100)). */
[data-theme="dark"] .wa-messages span[style*="--slate-100"] {
    background-color: #243047 !important;
    color: #cbd5e1 !important;
}
/* (b) Header action buttons (.wa-header-btn — list header refresh/broadcast/
   templates/new-chat AND chat-header call/profile/more). White boxes -> dark. */
[data-theme="dark"] .wa-header-btn {
    background-color: transparent !important;
    color: var(--text-secondary, #cbd5e1) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .wa-header-btn:hover {
    background-color: #243047 !important;
    color: #fff !important;
}

/* ---------- 17. whatsapp.html — outgoing green bubbles readable in dark ---------- */
/* Outgoing bubbles are JS-inline `background: #dcf8c6` (+ the static
   .wa-msg-outgoing demo class). The pale green + dark text washes out on the
   dark chat. Deepen to a WhatsApp-dark teal-green and make text/time/tick light.
   Light mode has no [data-theme=dark], so it keeps the original #DCF8C6. */
[data-theme="dark"] .wa-messages div[style*="background: #dcf8c6"],
[data-theme="dark"] .wa-msg-outgoing {
    background-color: #056162 !important;
    color: #e9edef !important;
}
[data-theme="dark"] .wa-messages div[style*="background: #dcf8c6"] div,
[data-theme="dark"] .wa-msg-outgoing .wa-msg-text,
[data-theme="dark"] .wa-msg-outgoing .wa-msg-meta {
    color: #cfe9e2 !important;   /* timestamp + double-tick: dimmer light */
}

/* ---------- 18. quick-popup — Lead Source field + tag chips + action icon ---------- */
/* Lead Source readonly field (.qp-readonly / #qpSource) uses var(--bg-subtle),
   which is undefined in dark -> falls back to light #f8fafc. Force dark
   (Lead Owner/Stage are <select> already darkened by §2). */
[data-theme="dark"] .qp-readonly {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
/* Existing-tag chips (.qp-tag) — solid light blue -> dark blue tint. */
[data-theme="dark"] .qp-tag {
    background-color: rgba(3, 169, 244, 0.18) !important;
    color: var(--ams-blue-light, #81D4FA) !important;
}
/* Action icon circle base (Add Note) — solid ams-blue-50 -> blue tint.
   (act-call/end/wa/pooja variants keep their own rgba tints via higher specificity.) */
[data-theme="dark"] .qp-act-ico {
    background-color: rgba(3, 169, 244, 0.18) !important;
}
/* Task-limit warning chip (inline light amber). */
[data-theme="dark"] #qpFuLimit {
    background-color: rgba(180, 83, 9, 0.18) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    color: #fcd34d !important;
}

/* ---------- 19. reports.html — filter controls (All Staff/date dropdowns, chips, tabs) ---------- */
/* "All Staff" + "Last 30 Days" dropdown buttons (.rfr-control) — white boxes. */
[data-theme="dark"] .report-filter-row .rfr-control {
    background-color: var(--bg-card, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .report-filter-row .rfr-control:hover {
    background-color: #243047 !important;
    border-color: var(--slate-600, #475569) !important;
}
/* Staff chips: inactive white -> dark; active stays AMS-blue. */
[data-theme="dark"] .staff-chip {
    background-color: var(--bg-card, #1e293b) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .staff-chip:hover { background-color: #243047 !important; border-color: var(--slate-600, #475569) !important; }
[data-theme="dark"] .staff-chip.active {
    background-color: var(--ams-blue, #03A9F4) !important;
    color: #fff !important;
    border-color: var(--ams-blue, #03A9F4) !important;
}
/* Date-range chip containers (white) + their chips (active was slate-900 = dark
   on dark -> switch to AMS-blue). Covers Today/Yesterday/7 Days/This Month/Custom. */
[data-theme="dark"] .rep-date-filters,
[data-theme="dark"] .date-filters {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .rep-date-filter-btn,
[data-theme="dark"] .date-filter-btn { color: var(--text-secondary, #cbd5e1) !important; }
[data-theme="dark"] .rep-date-filter-btn:hover,
[data-theme="dark"] .date-filter-btn:hover { background-color: #243047 !important; color: #fff !important; }
[data-theme="dark"] .rep-date-filter-btn.active,
[data-theme="dark"] .date-filter-btn.active {
    background-color: var(--ams-blue, #03A9F4) !important;
    color: #fff !important;
}
/* Report tab pills: inactive (transparent) text lighten + dark hover; active stays AMS-blue. */
[data-theme="dark"] .report-tab { color: var(--text-secondary, #cbd5e1) !important; }
[data-theme="dark"] .report-tab:hover { background-color: #243047 !important; color: #fff !important; }

/* ---------- 20. settings.html — per-tab surfaces (section bars, tables, cards) ---------- */
/* Sticky section bars (notifications/lead-capture/whatsapp/lead-scoring) + titles. */
[data-theme="dark"] .section-bar {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .section-title { color: var(--text-primary, #f1f5f9) !important; }
/* Stages / Sources / Lead-capture tables (white wrap) + their text. */
[data-theme="dark"] .stages-table-wrap {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .stage-name-text { color: var(--text-primary, #f1f5f9) !important; }
[data-theme="dark"] .stage-contacts-link { color: var(--ams-blue-light, #81D4FA) !important; }
/* Privacy "Danger Zone" (light red) -> dark red tint. */
[data-theme="dark"] .danger-zone {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}
[data-theme="dark"] .danger-zone-desc { color: #fca5a5 !important; }
/* Lead Distribution: auto-assign mode cards + pool list (white). */
[data-theme="dark"] .aa-mode-card,
[data-theme="dark"] .aa-pool-list {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .aa-mode-card:has(input[type="radio"]:checked) {
    background-color: rgba(3, 169, 244, 0.18) !important;
    border-color: var(--ams-blue, #03A9F4) !important;
}
[data-theme="dark"] .aa-mode-title,
[data-theme="dark"] .aa-pool-name { color: var(--text-primary, #f1f5f9) !important; }
[data-theme="dark"] .aa-mode-card input[type="radio"]:checked ~ div .aa-mode-title { color: var(--ams-blue-light, #81D4FA) !important; }
/* WhatsApp provider radio cards (white) — selected -> AMS-blue tint. */
[data-theme="dark"] .wa-provider-card {
    background-color: var(--bg-card, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
    color: var(--text-primary, #f1f5f9) !important;
}
[data-theme="dark"] .wa-provider-card:has(input:checked),
[data-theme="dark"] .wa-provider-card.selected {
    background-color: rgba(3, 169, 244, 0.18) !important;
    border-color: var(--ams-blue, #03A9F4) !important;
}
/* Logs tab: embed iframe element bg + Activity/Audit segment toggle. */
[data-theme="dark"] .logs-frame { background-color: var(--bg-card, #1e293b) !important; }
[data-theme="dark"] .logs-seg { border-color: var(--border-color, #334155) !important; }
[data-theme="dark"] .logs-seg-btn {
    background-color: var(--bg-card, #1e293b) !important;
    color: var(--text-secondary, #cbd5e1) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .logs-seg-btn:hover { background-color: #243047 !important; color: #fff !important; }
[data-theme="dark"] .logs-seg-btn.active { background-color: var(--ams-blue, #03A9F4) !important; color: #fff !important; }

/* ---------- 21. Header profile dropdown — Language EN/हिं toggle (shared) ---------- */
/* .menu-lang-btn are built inline `background:#fff;border:var(--slate-200)` in
   common.js -> white in dark. (The dropdown container + items already use
   var(--bg-card)/var(--text-*) tokens, so they're dark.) No JS marks the
   active language, so both buttons get the same dark style + AMS-blue hover. */
[data-theme="dark"] .menu-lang { color: var(--text-secondary, #cbd5e1) !important; }
[data-theme="dark"] .menu-lang-btn {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .menu-lang-btn:hover {
    background-color: rgba(3, 169, 244, 0.18) !important;
    border-color: var(--ams-blue, #03A9F4) !important;
    color: var(--ams-blue-light, #81D4FA) !important;
}
