/* Final theme layer. App/admin only; leave public site, media and QR pixels intact. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7edf5;
  --muted: #a7b5c8;
  --panel: #151f30;
  --canvas: #0c1320;
  --soft: #1b293d;
  --line: #33435b;
  --blue: #89b5ff;
  --blue-dark: #a9caff;
  --primary: #89b5ff;
  --panel-bg: var(--panel);
  --soft-panel-bg: var(--soft);
  --card: var(--panel);
  --surface: var(--soft);
  --border: var(--line);
  --border-color: var(--line);
  --muted-text: var(--muted);
  --ca-control-bg: #101a2a;
  --ca-control-bg-soft: #162236;
  --ca-control-border: #40516a;
  --ca-control-border-hover: #6682a6;
  --ca-control-focus: #89b5ff;
  --ca-control-text: #e7edf5;
  --ca-control-placeholder: #9daec3;
  --ca-control-shadow: none;
  --ca-control-focus-ring: 0 0 0 3px rgb(137 181 255 / 22%);
  --shadow-soft: 0 8px 24px rgb(0 0 0 / 18%);
}

html[data-theme="dark"] body,
html[data-theme="dark"] :is(.page, .content, .workspace, .main-content, .profile-settings-page) {
  background: var(--canvas) !important;
  color: var(--ink);
}

/* Cover the reusable surfaces used throughout commerce, support, AI and admin. */
html[data-theme="dark"] body :is(
  .panel, .card, .topbar, .sidebar, .app-toast, .profile-settings-card,
  .profile-settings-nav, .profile-settings-header,
  [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "],
  [class$="-modal"], [class*="-modal "], [class$="-dialog"],
  [class$="-popover"], [class$="-dropdown"], [class$="-menu"],
  [class$="-hero"], [class$="-intro"], [class$="-toolbar"],
  .automation-policy-rule, .automation-policy-number, .automation-policy-master,
  .automation-policy-status, .automation-policy-weekdays,
  .automation-policy-return > label, .automation-policy-versions > span,
  .woo-abandoned-hero-score, .woo-abandoned-tabs, .woo-abandoned-filters,
  .woo-abandoned-modal, .woo-order-live-modal, .woo-order-edit-modal,
  .contactflow-inbox-shell, .contactflow-inbox-chat, .contactflow-inbox-side,
  .contactflow-kanban-column, .live-support-shell > aside, .live-support-shell > section,
  .react-flow__node, .react-flow__controls, .react-flow__minimap
) {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"][data-theme="dark"][data-theme="dark"] body :is(h1, h2, h3, h4, h5, h6, strong, legend, dt) {
  color: var(--ink) !important;
}
html[data-theme="dark"][data-theme="dark"][data-theme="dark"] body :is(p, small, label, em, .hint, .hint-text) {
  color: var(--muted) !important;
}
html[data-theme="dark"][data-theme="dark"][data-theme="dark"] body :is(span, b, dd, li, summary) {
  color: var(--ink) !important;
}
html[data-theme="dark"] body svg text { fill: #a7b5c8 !important; }
html[data-theme="dark"] body :is(a, .link-button, .text-button) {
  color: #a9caff;
}

html[data-theme="dark"] body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  textarea, select
),
html[data-theme="dark"] body :is(input, textarea, select):focus,
html[data-theme="dark"] body :is(input, textarea, select):focus-visible {
  background: var(--ca-control-bg) !important;
  color: var(--ca-control-text) !important;
  border-color: var(--ca-control-border) !important;
}
html[data-theme="dark"] body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  textarea, select
):is(:focus, :focus-visible) {
  background: var(--ca-control-bg) !important;
  color: var(--ca-control-text) !important;
  border-color: var(--ca-control-focus) !important;
  box-shadow: var(--ca-control-focus-ring) !important;
}
html[data-theme="dark"] body :is(input, textarea, select):focus-visible {
  border-color: var(--ca-control-focus) !important;
  box-shadow: var(--ca-control-focus-ring) !important;
}
html[data-theme="dark"] body :is(input, textarea)::placeholder {
  color: var(--ca-control-placeholder) !important;
}
html[data-theme="dark"] body :is(input, select, textarea):disabled {
  background: #1a2434 !important;
  color: #96a6bb !important;
}
html[data-theme="dark"] body :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: #89b5ff;
}
html[data-theme="dark"] body select option { background: #101a2a; color: #e7edf5; }

html[data-theme="dark"] body button:not(.primary-button):not(.danger-button):not(.link-button):not(.text-button) {
  background: #1b293d !important;
  color: #e7edf5 !important;
  border-color: #40516a !important;
}
html[data-theme="dark"] body button:hover:not(:disabled) { filter: brightness(1.12); }
html[data-theme="dark"] body button:focus-visible,
html[data-theme="dark"] body a:focus-visible { outline: 2px solid #89b5ff; outline-offset: 3px; }
html[data-theme="dark"] body button.active,
html[data-theme="dark"] body button[aria-pressed="true"] {
  background: #263f65 !important;
  color: #eaf2ff !important;
  border-color: #89b5ff !important;
}
html[data-theme="dark"] body .primary-button {
  background: #2563c4 !important;
  border-color: #5288db !important;
  color: #fff !important;
}
html[data-theme="dark"] body .danger-button {
  background: #3d202b !important; color: #ffc2cb !important; border-color: #955463 !important;
}
html[data-theme="dark"] body button:disabled { opacity: .55; cursor: not-allowed; }

html[data-theme="dark"] body :is(table, tbody, tr, td, .table-row) {
  background: transparent !important; color: var(--ink) !important; border-color: var(--line) !important;
}
html[data-theme="dark"] body :is(thead, th, .table-head) {
  background: var(--soft) !important; color: #bac9dd !important; border-color: var(--line) !important;
}
html[data-theme="dark"] body tbody tr:hover { background: #1b293d !important; }
html[data-theme="dark"] body :is(code, pre, .token-box, .debug-box) {
  background: #0b1422 !important; color: #c7dcff !important; border-color: var(--line) !important;
}
html[data-theme="dark"] body :is(.modal-backdrop, .profile-settings-backdrop) {
  background: rgb(3 8 17 / 78%) !important;
  backdrop-filter: blur(5px);
}

/* Status is communicated with text/icon as well as color. */
html[data-theme="dark"] body :is(.inline-alert, .toast-inline, .woo-info-note, .check-row) {
  background: #1b293d !important; color: #c7dcff !important; border-color: #40516a !important;
}
html[data-theme="dark"] body :is(.inline-alert.success, .automation-policy-status.success, .woo-abandoned-recovered-banner) {
  background: #13352d !important; color: #a0edcf !important; border-color: #397d65 !important;
}
html[data-theme="dark"] body :is(.inline-alert.warning, .automation-policy-status.warning, .woo-abandoned-safety-warning) {
  background: #372d1c !important; color: #f5d795 !important; border-color: #80683a !important;
}
html[data-theme="dark"] body :is(.inline-alert.danger, .automation-policy-errors, .app-toast.danger) {
  background: #3d202b !important; color: #ffc2cb !important; border-color: #955463 !important;
}
html[data-theme="dark"] body :is(.react-flow, .flow-canvas) { background: #0c1320 !important; }
html[data-theme="dark"] body .react-flow__controls-button svg { fill: #e7edf5; }
html[data-theme="dark"] body .react-flow__edge-path { stroke: #829bbd; }
html[data-theme="dark"] body .react-flow__minimap-mask { fill: rgb(12 19 32 / 65%); }
html[data-theme="dark"] body ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] body ::-webkit-scrollbar-track { background: #101a2a; }
html[data-theme="dark"] body ::-webkit-scrollbar-thumb { background: #40516a; border: 2px solid #101a2a; border-radius: 8px; }
html[data-theme="dark"] body ::selection { background: #315c94; color: #fff; }

/* Legacy nested surfaces verified across the complete operator navigation. */
html[data-theme="dark"] body :is(
  .metric, .standard-date-filter, .main-suite-dashboard, .main-suite-loading,
  .dashboard-alert-center, .main-dashboard-score, .main-dashboard-hero-copy,
  .main-dashboard-live-chips, .ranking-table, .woo-chart-mode,
  .woo-abandoned-filter, .woo-filter-applied-note, .woo-dashboard-loading-overlay,
  .woo-live-map-side-list, .woo-live-map-bottom-grid, .woo-live-event-trail,
  .woo-live-table-row, .conversation-person, .conversation-phone,
  .contactflow-tabs, .contactflow-advanced-picker, .contactflow-empty-preview,
  .team-role-guide, .team-role-guide > div, .store-backup-hero-status,
  .store-backup-info-note, .logs-event-row, .logs-empty-channel,
  .ai-final-safe-note, .ai-production-readiness, .ai-overview-next-steps,
  .ai-persona-choice-grid, .chat-bubble.client, .ai-settings-readonly,
  .ai-simulator-mode-switch, .meta-list-summary, .meta-optin-status,
  .meta-web-sidebar, .meta-web-sidebar-head, .meta-web-chat-head,
  .meta-web-chat-foot, .meta-web-details, .integration-all-good,
  .commerce-apis-summary, .commerce-api-note,
  .woo-abandoned-preview, .woo-abandoned-schedule-summary,
  .woo-abandoned-contact-history-list article, .woo-order-live-modal article,
  .woo-order-live-modal details, .woo-order-live-modal summary,
  .woo-order-live-modal dl, .woo-order-live-modal header,
  .notification-center-modal, .notification-center-item,
  .profile-logo-preview, .woo-source-note, .woo-analytics-scroll, .woo-analytics-chart,
  .beta-launch-head > strong, .setup-assistant-icon,
  .backup-alert-row, .risk-title-actions > span,
  .woo-operational-banner, .woo-abandoned-row-meta,
  .woo-recovery-message-proof > div, .woo-abandoned-row-card em,
  .woo-order-live-modal p, .woo-order-live-loading > span,
  .login-shell, .login-card, .login-form, .auth-card, .auth-form,
  .loading-screen, .boot-loading,
  .woo-live-google-map-state, .woo-live-empty, .woo-live-empty-state,
  .meta-web-readonly, main article > header span,
  .woo-next-step, .woo-order-row, .woo-automation-score, .woo-automation-ready,
  .woo-advanced-details, .form-actions.woo-actions,
  .source-pill, .woo-live-map-chip, .woo-live-map-status, .woo-live-health-dot,
  .queue-status, .queue-status-summary, .ai-rule-risk, .ai-simulator-dev-engine,
  .whatsapp-phone-status, .woo-bridge-version-pill, .backup-status,
  .woo-customer-route-step, .secondary-button,
  main label, .profile-settings-page label,
  .main-suite-kpis > article, .team-summary > article, .store-backup-summary > article,
  .woo-abandoned-product-map > article, .ai-production-checklist > article,
  .smart-log-list > article, .finance-table > header,
  .woo-orders-kpi-grid > article, .woo-products-kpi-grid > article,
  .woo-capability-kpis > article, .woo-automation-guide > article,
  .woo-live-visitor-card > footer, .logs-complete-timeline > summary
) {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] body :is(
  .woo-live-ga-metrics, .woo-live-pixel-health-grid, .woo-live-kpi-grid,
  .woo-live-device-pills, .woo-store-usage-metrics, .woo-live-visitor-main,
  .woo-live-route, .main-suite-attention, .main-dashboard-live-chips,
  .woo-product-pills, .woo-dependency-status, .woo-abandoned-kpis,
  .woo-abandoned-row-main, .woo-abandoned-row-meta, .conversation-meta,
  .team-role-line, .team-section-title, .meta-optin-flow, .meta-list-summary,
  .meta-sample-row, .meta-web-details, .ai-agent-current-stats,
  .ai-simulator-hero-actions, .woo-abandoned-modal-grid,
  .woo-abandoned-schedule-summary, .woo-order-modal-summary,
  .integration-card-stats, .profile-session-table
  , .woo-detail-grid, .woo-status-chip-list, .woo-alert-strip, .woo-mini-tags,
  .woo-score-checks, .woo-client-list, .woo-product-list, .woo-operation-grid,
  .woo-insight-list, .woo-campaign-list, .woo-capability-modules,
  .woo-automation-status-row
  , .logs-event-title, .logs-event-meta, .woo-abandoned-rules,
  .woo-order-live-status, .woo-order-live-fields, .woo-order-live-records
) > :is(span, article, div, strong, small, i) {
  background: var(--soft) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] body :is(
  .panel-title > span, .woo-live-analytics-head > small,
  .woo-store-usage-actions > strong, .woo-live-countdown-card > span,
  .woo-live-visitor-card em, .conversation-person > span,
  .store-backup-section-head > strong, .commerce-api-card > header span
  , .woo-section-head > span, .woo-shipping-config-panel small
) {
  background: var(--soft) !important; color: var(--ink) !important; border-color: var(--line) !important;
}
html[data-theme="dark"] body :is(.chat-bubble.bot, .meta-web-bubble.outgoing, .message.outgoing) {
  background: #183c3a !important; color: #ddf6ec !important; border-color: #397d65 !important;
}
html[data-theme="dark"] body :is(.meta-web-chat, .meta-web-chat-body, .chat-preview-phone) {
  background: #101a2a !important; background-image: none !important;
}
html[data-theme="dark"] body :is(.source-pill.ok, .queue-status.delivered, .queue-status.read, .backup-status.ok, .whatsapp-phone-status.connected) {
  background: #13352d !important; color: #a0edcf !important; border-color: #397d65 !important;
}
html[data-theme="dark"] body :is(.queue-status-summary.warning, .woo-bridge-version-pill.warning, .woo-customer-route-step.blocked) {
  background: #372d1c !important; color: #f5d795 !important; border-color: #80683a !important;
}
html[data-theme="dark"] body :is(.logs-event-row.error, .logs-event-row.danger) {
  background: #30202a !important; border-color: #955463 !important;
}

/* A QR code needs a white quiet zone for reliable scanning, in either theme. */
html[data-theme="dark"] body :is(.wa-connect-qr-frame, .qr-code, .qrcode) { background: #fff !important; }

/* Important declarations in this named layer take precedence over legacy
   unlayered !important typography, without growing selector specificity. */
@layer contactassist-night-contrast {
  html[data-theme="dark"] body :is(h1, h2, h3, h4, h5, h6, strong, legend, dt, span, b, dd, li, summary) {
    color: var(--ink) !important;
  }
  html[data-theme="dark"] body :is(p, small, label, em, time, .hint, .hint-text) {
    color: var(--muted) !important;
  }
  html[data-theme="dark"] body :is([class*="-pill"], [class*="-badge"], .edge-text,
    .subscription-plan-steps strong, .main-suite-attention b, .react-flow__handle,
    .ranking-table b, .beta-launch-icon, .kpi-icon, .mini-avatar) {
    background: var(--soft) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
  }
  html[data-theme="dark"] body .react-flow__attribution a { color: #a9caff !important; }
  html[data-theme="dark"] body .flow-node > header { background: #254778 !important; }
}