/* ============================================================
   DARK MODE THEME
   Organized sections:
   1. JS-disabled fallback (media query, variables only)
   2. Dark palette (explicit, all variables)
   3. Global overrides (body, scrollbar, inputs, links, headings)
   4. Component overrides (cards, tables, badges, buttons, etc.)
   5. Inline style overrides ([style*="..."] with !important)
   6. Page-specific (inbox, dashboard, campaign wizard, login, etc.)
   7. Theme toggle button
   ============================================================ */

/* ===========================================
   1. JS-DISABLED FALLBACK
   Only variables — covers edge case when JS is blocked.
   The anti-flash script normally resolves auto→explicit.
   =========================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --primary-red: #EF4444;
        --primary-red-hover: #DC2626;
        --primary-red-light: #450A0A;
        --text-dark: #F1F5F9;
        --text-gray: #94A3B8;
        --text-light: #64748B;
        --bg-gray: #0F172A;
        --bg-gray-dark: #1E293B;
        --border-gray: #334155;
        --white: #1E293B;
        --bg-elevated: #283548;
        --border-subtle: #1E293B;
        --blue: #60A5FA;
        --green: #34D399;
        --purple: #A78BFA;
        --orange: #FBBF24;
        color-scheme: dark;
    }
}

/* ===========================================
   2. DARK PALETTE — all CSS custom properties
   =========================================== */
:root[data-theme="dark"] {
    --primary-red: #EF4444;
    --primary-red-hover: #DC2626;
    --primary-red-light: #450A0A;
    --text-dark: #F1F5F9;
    --text-gray: #94A3B8;
    --text-light: #64748B;
    --bg-gray: #0F172A;
    --bg-gray-dark: #1E293B;
    --border-gray: #334155;
    --white: #1E293B;
    --bg-elevated: #283548;
    --border-subtle: #1E293B;
    --blue: #60A5FA;
    --green: #34D399;
    --purple: #A78BFA;
    --orange: #FBBF24;
    --feature-overlay-bg: rgba(15, 23, 42, 0.8);
    color-scheme: dark;
}

/* ===========================================
   3. GLOBAL OVERRIDES
   =========================================== */

:root[data-theme="dark"] body {
    background-color: var(--bg-gray);
    color: var(--text-dark);
}

:root[data-theme="dark"] ::-webkit-scrollbar-track { background: #0F172A; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748B; }

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: #0F172A;
    color: var(--text-dark);
    border-color: var(--border-gray);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--text-light);
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

:root[data-theme="dark"] .search-input,
:root[data-theme="dark"] .filter-input {
    background-color: #0F172A;
    color: var(--text-dark);
    border-color: var(--border-gray);
}

:root[data-theme="dark"] a:not(.btn):not(.nav-item):not(.sidebar-logo):not(.attention-row):not(.pipeline-stat):not(.signal-item):not(.campaign-card) {
    color: var(--blue);
}

:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .card-title,
:root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 {
    color: #F1F5F9;
}
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .help-text,
:root[data-theme="dark"] .form-hint {
    color: #64748B;
}
:root[data-theme="dark"] hr {
    border-color: #334155;
}
:root[data-theme="dark"] pre,
:root[data-theme="dark"] code {
    background-color: #0F172A;
    color: #F1F5F9;
}

/* ===========================================
   4. COMPONENT OVERRIDES
   =========================================== */

/* --- Cards & panels --- */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .filter-bar,
:root[data-theme="dark"] .table-container,
:root[data-theme="dark"] .modal-container,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal-body,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .dropdown-content,
:root[data-theme="dark"] .wizard-container,
:root[data-theme="dark"] .detail-card,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .tab-content,
:root[data-theme="dark"] .ai-settings-card,
:root[data-theme="dark"] .dashboard-card,
:root[data-theme="dark"] .messages-panel,
:root[data-theme="dark"] .feature-locked-card {
    background-color: var(--white);
    color: var(--text-dark);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .detail-card,
:root[data-theme="dark"] .settings-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .top-header {
    background: var(--bg-gray);
    border-bottom-color: var(--border-gray);
}

:root[data-theme="dark"] .lead-detail-panel,
:root[data-theme="dark"] .detail-panel {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .tab-panel {
    background: #1E293B;
}

/* --- Settings tabs bar (was white — main bug) --- */
:root[data-theme="dark"] .settings-tabs {
    background: var(--bg-elevated);
    border-bottom-color: var(--border-gray);
}

/* --- Tables --- */
:root[data-theme="dark"] .table th {
    background-color: #0F172A;
    color: var(--text-gray);
    border-bottom-color: var(--border-gray);
}
:root[data-theme="dark"] .table td {
    border-bottom-color: var(--border-gray);
    color: var(--text-dark);
}
:root[data-theme="dark"] .table tr:hover td {
    background-color: rgba(255, 255, 255, 0.03);
}

/* --- Badges --- */
:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .status-badge {
    border-color: var(--border-gray);
}
:root[data-theme="dark"] .badge-gray {
    background-color: #334155;
    color: #94A3B8;
}
:root[data-theme="dark"] .badge-green,
:root[data-theme="dark"] .status-badge.active {
    background-color: #064E3B;
    color: #34D399;
}
:root[data-theme="dark"] .badge-red,
:root[data-theme="dark"] .status-badge.error {
    background-color: #450A0A;
    color: #EF4444;
}
:root[data-theme="dark"] .badge-blue {
    background-color: #1E3A5F;
    color: #60A5FA;
}
:root[data-theme="dark"] .badge-yellow,
:root[data-theme="dark"] .badge-orange {
    background-color: #451A03;
    color: #FBBF24;
}
:root[data-theme="dark"] .badge-purple {
    background-color: #2E1065;
    color: #A78BFA;
}

/* --- Stat card icons --- */
:root[data-theme="dark"] .stat-card .stat-icon {
    opacity: 0.85;
}
:root[data-theme="dark"] .stat-value {
    color: #F1F5F9;
}
:root[data-theme="dark"] .stat-label {
    color: #94A3B8;
}

/* --- Buttons --- */
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-outline {
    background-color: #1E293B;
    color: var(--text-dark);
    border-color: var(--border-gray);
}
:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .btn-outline:hover {
    background-color: #334155;
}

/* --- Modals --- */
:root[data-theme="dark"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}
:root[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-gray);
}
:root[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-gray);
}

/* --- Webhook cards --- */
:root[data-theme="dark"] .webhook-card {
    background: #1E293B !important;
    border-color: #334155 !important;
}

/* --- Tabs --- */
:root[data-theme="dark"] .tab-btn {
    color: var(--text-gray);
}
:root[data-theme="dark"] .tab-btn:hover {
    color: var(--text-dark);
}
:root[data-theme="dark"] .tab-btn.active {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
}

/* --- Pagination --- */
:root[data-theme="dark"] .pagination-btn {
    background-color: #1E293B;
    color: var(--text-gray);
    border-color: var(--border-gray);
}
:root[data-theme="dark"] .pagination-btn:hover {
    background-color: #334155;
}
:root[data-theme="dark"] .pagination-btn.active {
    background-color: var(--primary-red);
    color: #fff;
}

/* --- Toast --- */
:root[data-theme="dark"] .toast {
    background-color: #1E293B;
    color: var(--text-dark);
    border-color: var(--border-gray);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* --- Tooltips --- */
:root[data-theme="dark"] [data-tooltip]::after {
    background-color: #0F172A;
    color: #F1F5F9;
}
:root[data-theme="dark"] .tooltip-text {
    background: #0F172A;
    color: #F1F5F9;
    border: 1px solid #334155;
}

/* --- Progress --- */
:root[data-theme="dark"] .progress-bar-bg,
:root[data-theme="dark"] .progress-track {
    background-color: #334155;
}

/* --- Tags --- */
:root[data-theme="dark"] .tag {
    background-color: #334155;
    color: var(--text-gray);
}
:root[data-theme="dark"] .tag-dropdown {
    background-color: var(--white);
    border-color: var(--border-gray);
    color: var(--text-dark);
}

/* --- Empty state --- */
:root[data-theme="dark"] .empty-state {
    color: var(--text-gray);
}

/* --- User profile --- */
:root[data-theme="dark"] .user-profile {
    border-bottom-color: var(--border-gray);
}

/* --- Notification dropdown & items --- */
:root[data-theme="dark"] .notification-dropdown {
    background-color: #1E293B;
    border-color: var(--border-gray);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .notification-item.unread { background: #1E3A5F; }
:root[data-theme="dark"] .notification-item.unread:hover { background: #1E4A6F; }
:root[data-theme="dark"] .notification-item-icon.connection,
:root[data-theme="dark"] .notification-item-icon.campaign-start,
:root[data-theme="dark"] .notification-item-icon.campaign-complete { background: #064E3B; color: #34D399; }
:root[data-theme="dark"] .notification-item-icon.reply { background: #1E3A5F; color: #60A5FA; }
:root[data-theme="dark"] .notification-item-icon.sequence { background: #2E1065; color: #A78BFA; }
:root[data-theme="dark"] .notification-item-icon.intent,
:root[data-theme="dark"] .notification-item-icon.campaign-pause,
:root[data-theme="dark"] .notification-item-icon.limit { background: #451A03; color: #FBBF24; }
:root[data-theme="dark"] .notification-item-icon.view { background: #312E81; color: #818CF8; }
:root[data-theme="dark"] .notification-item-icon.keyword { background: #500724; color: #F9A8D4; }
:root[data-theme="dark"] .notification-item-icon.exec-pause { background: #7F1D1D; color: #FCA5A5; }
:root[data-theme="dark"] .notification-item-icon.message { background: #1E3A5F; color: #60A5FA; }
:root[data-theme="dark"] .notification-item-icon.engagement { background: #2E1065; color: #A78BFA; }
:root[data-theme="dark"] .notification-item-icon.campaign { background: #451A03; color: #FBBF24; }
:root[data-theme="dark"] .notification-item-icon.system { background: #312E81; color: #818CF8; }
:root[data-theme="dark"] .notification-item-icon.crm { background: #500724; color: #F9A8D4; }
:root[data-theme="dark"] .notification-item-time { color: #64748B; }
:root[data-theme="dark"] .notification-item-dismiss { color: #64748B; }
:root[data-theme="dark"] .notification-avatar-badge.connection { background: #064E3B; color: #34D399; }
:root[data-theme="dark"] .notification-avatar-badge.reply { background: #1E3A5F; color: #60A5FA; }
:root[data-theme="dark"] .notification-avatar-badge.sequence { background: #2E1065; color: #A78BFA; }
:root[data-theme="dark"] .notification-avatar-badge.intent { background: #451A03; color: #FBBF24; }
:root[data-theme="dark"] .notification-avatar-badge.view { background: #312E81; color: #818CF8; }
:root[data-theme="dark"] .notification-avatar-badge.keyword { background: #500724; color: #F9A8D4; }
:root[data-theme="dark"] .notification-avatar-badge.message { background: #1E3A5F; color: #60A5FA; }
:root[data-theme="dark"] .notification-avatar-badge.engagement { background: #2E1065; color: #A78BFA; }
:root[data-theme="dark"] .notification-avatar-badge.campaign { background: #451A03; color: #FBBF24; }
:root[data-theme="dark"] .notification-avatar-badge.system { background: #312E81; color: #818CF8; }
:root[data-theme="dark"] .notification-avatar-badge.crm { background: #500724; color: #F9A8D4; }

/* --- Action icons --- */
:root[data-theme="dark"] .action-icon {
    background: #334155;
    color: #94A3B8;
}
:root[data-theme="dark"] .action-icon:hover {
    background: #475569;
    color: #F1F5F9;
}

/* --- Sort button --- */
:root[data-theme="dark"] .sort-reset-btn {
    background: #1E293B;
    border-color: #334155;
    color: #94A3B8;
}

/* --- Avatars --- */
:root[data-theme="dark"] .message-avatar {
    background: #334155;
}
:root[data-theme="dark"] .lead-avatar-placeholder,
:root[data-theme="dark"] .avatar-placeholder {
    background: #334155;
    color: #94A3B8;
}

/* --- Feature locked --- */
:root[data-theme="dark"] .feature-locked-overlay {
    background: rgba(15, 23, 42, 0.85);
}

/* --- Vocative review --- */
:root[data-theme="dark"] .vocative-review-banner {
    border-color: #334155;
}

/* --- Impersonation bar --- */
:root[data-theme="dark"] .impersonation-bar {
    background-color: #1E3A5F;
}

/* --- AI Settings — lišta neuložených změn --- */
:root[data-theme="dark"] .ai-unsaved-bar {
    background: #422006;
    border-color: #92400e;
    color: #fcd34d;
}

/* --- Settings tab (individual tab items) --- */
:root[data-theme="dark"] .settings-tab {
    color: var(--text-gray);
    border-bottom-color: var(--border-gray);
}
:root[data-theme="dark"] .settings-tab.active {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
}

/* --- AI message components --- */
:root[data-theme="dark"] .ai-message-type-select {
    background-color: #0F172A;
    color: var(--text-dark);
    border-color: var(--border-gray);
}
:root[data-theme="dark"] .ai-message-textarea {
    background-color: #0F172A;
    color: var(--text-dark);
    border-color: var(--border-gray);
}
:root[data-theme="dark"] .ai-message-actions {
    background-color: var(--white);
    border-color: var(--border-gray);
}
:root[data-theme="dark"] .ai-action-btn {
    background-color: var(--white);
    color: var(--text-gray);
    border-color: var(--border-gray);
}

/* --- Messages panel (campaign detail) --- */
:root[data-theme="dark"] .messages-panel-header {
    background-color: var(--white);
    border-bottom-color: var(--border-gray);
    color: var(--text-dark);
}
:root[data-theme="dark"] .message-input-wrapper {
    background-color: var(--white);
    border-color: var(--border-gray);
}
:root[data-theme="dark"] .message-schedule-dropdown {
    background-color: var(--white);
    border-color: var(--border-gray);
    color: var(--text-dark);
}

/* --- Add lead button & modal --- */
:root[data-theme="dark"] .add-lead-btn {
    background-color: var(--white);
    border-color: var(--border-gray);
    color: var(--text-gray);
}
:root[data-theme="dark"] .add-lead-tabs { border-bottom-color: #334155; }
:root[data-theme="dark"] .add-lead-tab { color: #94A3B8; }
:root[data-theme="dark"] .add-lead-tab:hover { color: #F1F5F9; background: var(--bg-elevated); }
:root[data-theme="dark"] .add-lead-tab.active { color: var(--primary-red); }
:root[data-theme="dark"] .add-lead-hint { color: #64748B; }
:root[data-theme="dark"] .add-lead-input,
:root[data-theme="dark"] .add-lead-textarea {
    background: var(--white);
    border-color: var(--border-gray);
    color: var(--text-dark);
}
:root[data-theme="dark"] .add-lead-input:focus,
:root[data-theme="dark"] .add-lead-textarea:focus {
    background: var(--bg-elevated);
    border-color: #dc2626;
}
:root[data-theme="dark"] .add-lead-input::placeholder,
:root[data-theme="dark"] .add-lead-textarea::placeholder {
    color: #64748B;
}

/* --- Campaign status badges --- */
:root[data-theme="dark"] .campaign-status.active { background: #064E3B; color: #34D399; }
:root[data-theme="dark"] .campaign-status.paused { background: #451A03; color: #FBBF24; }
:root[data-theme="dark"] .campaign-status.scheduled { background: #312E81; color: #818CF8; }
:root[data-theme="dark"] .campaign-status.completed { background: #334155; color: #94A3B8; }
:root[data-theme="dark"] .campaign-status.draft { background: #334155; color: #94A3B8; }

/* --- Activity count badges --- */
:root[data-theme="dark"] .activity-count { background: #334155; color: #94A3B8; }
:root[data-theme="dark"] .activity-count.unread { background: #1E3A5F; color: #60A5FA; }
:root[data-theme="dark"] .activity-count.read:hover .count-number { color: #F1F5F9; }

/* --- Execution status badges --- */
:root[data-theme="dark"] .execution-status.status-waiting { background: #334155; color: #94A3B8; }
:root[data-theme="dark"] .execution-status.status-sent { background: #1E3A5F; color: #60A5FA; }
:root[data-theme="dark"] .execution-status.status-connected { background: #064E3B; color: #34D399; }
:root[data-theme="dark"] .execution-status.status-replied { background: #064E3B; color: #34D399; }
:root[data-theme="dark"] .execution-status.status-failed { background: #450A0A; color: #FCA5A5; }
:root[data-theme="dark"] .execution-status.status-skipped { background: #334155; color: #94A3B8; }

/* --- Lead detail panel --- */
:root[data-theme="dark"] .lead-detail-header { border-bottom-color: #334155; }
:root[data-theme="dark"] .lead-detail-profile { border-bottom-color: #334155; }
:root[data-theme="dark"] .lead-detail-section { border-bottom-color: #334155; }
:root[data-theme="dark"] .profile-title { color: #94A3B8; }
:root[data-theme="dark"] .profile-company { color: #94A3B8; }
:root[data-theme="dark"] .lead-detail-section h3 { color: #94A3B8; }
:root[data-theme="dark"] .detail-label { color: #94A3B8; }
:root[data-theme="dark"] .detail-value { color: #F1F5F9; }
:root[data-theme="dark"] .ai-overview-item { background: #0F172A; }
:root[data-theme="dark"] .ai-overview-text { color: #CBD5E1; }
:root[data-theme="dark"] .ai-message-result { background: #0F172A; border-color: #334155; }
:root[data-theme="dark"] .ai-message-loading { color: #94A3B8; }
:root[data-theme="dark"] .ai-message-context { color: #94A3B8; }
:root[data-theme="dark"] .ai-message-error { background: #450A0A; border-color: #DC2626; color: #FCA5A5; }
:root[data-theme="dark"] .back-btn { color: #94A3B8; }
:root[data-theme="dark"] .back-btn:hover { color: #F1F5F9; }
:root[data-theme="dark"] .archive-btn { background: #475569; }
:root[data-theme="dark"] .no-data { color: #64748B; }

/* --- Message bubbles & input --- */
:root[data-theme="dark"] .message-item.received .message-bubble { background: #334155; color: #F1F5F9; }
:root[data-theme="dark"] .message-item.connection_request .message-bubble { background: #064E3B; color: #6EE7B7; }
:root[data-theme="dark"] .message-input-container { background: #1E293B; border-top-color: #334155; }
:root[data-theme="dark"] .message-day-label { color: #94A3B8; }
:root[data-theme="dark"] .schedule-dropdown-header { color: #94A3B8; }
:root[data-theme="dark"] .schedule-option { color: #F1F5F9; }
:root[data-theme="dark"] .scheduled-message-content { color: #CBD5E1; }
:root[data-theme="dark"] .message-sending-indicator { color: #94A3B8; }

/* --- Filter, sort, misc --- */
:root[data-theme="dark"] .filter-checkbox:hover { background-color: #1E293B; }
:root[data-theme="dark"] .filter-group-nested { background: #0F172A; }
:root[data-theme="dark"] .sort-arrows { color: #64748B; }

/* --- Campaign phase badges & DG --- */
:root[data-theme="dark"] .campaign-phase-badge.dg { background: #1E3A5F; color: #60A5FA; }
:root[data-theme="dark"] .campaign-phase-badge.ready { background: #451A03; color: #FBBF24; }
:root[data-theme="dark"] .dg-badge { background: #1E3A5F; color: #60A5FA; }
:root[data-theme="dark"] .dg-btn { background: #1E3A5F; color: #60A5FA; border-color: #334155; }
:root[data-theme="dark"] .lead-row.dg-active { background: #0F172A; }

/* --- Signal items --- */
:root[data-theme="dark"] .signal-item.buyer-intent { background: #451A03; }
:root[data-theme="dark"] .signal-item.buyer-intent:hover { background: #5C2D0A; }

/* --- Lead-specific badges & buttons --- */
:root[data-theme="dark"] .pipedrive-link-btn { background: #064E3B; color: #34D399; }
:root[data-theme="dark"] .pipedrive-link-btn:hover { background: #065F46; }
:root[data-theme="dark"] .archived-badge { background: #334155; color: #94A3B8; }
:root[data-theme="dark"] .unarchive-btn { background: #1E293B; color: #94A3B8; }
:root[data-theme="dark"] .unarchive-btn:hover { background: #334155; color: #F1F5F9; }
:root[data-theme="dark"] .engagement-count-btn:hover { background: #1E3A5F; }
:root[data-theme="dark"] .lead-posts-badge { background: #1E3A5F; color: #60A5FA; }
:root[data-theme="dark"] .engagement-bell { background: #451A03; color: #FBBF24; }
:root[data-theme="dark"] .bi-stack:hover { background: #1E293B; }

/* --- Tag management --- */
:root[data-theme="dark"] .tag-manage-btn { color: #94A3B8; }
:root[data-theme="dark"] .tag-manage-btn:hover { color: #F1F5F9; border-color: #475569; }
:root[data-theme="dark"] .tag-manage-name { color: #F1F5F9; }
:root[data-theme="dark"] .tag-dd-item { color: #F1F5F9; }
:root[data-theme="dark"] .tag-color-option:hover { border-color: #94A3B8; }
:root[data-theme="dark"] .tag-color-option.selected { border-color: #F1F5F9; }

/* --- Timeline icons --- */
:root[data-theme="dark"] .timeline-icon.connection { background: #064E3B; color: #34D399; }
:root[data-theme="dark"] .timeline-icon.message { background: #1E3A5F; color: #60A5FA; }
:root[data-theme="dark"] .timeline-icon.campaign { background: #451A03; color: #FBBF24; }
:root[data-theme="dark"] .timeline-icon.engagement { background: #2E1065; color: #A78BFA; }
:root[data-theme="dark"] .timeline-icon.error { background: #450A0A; color: #FCA5A5; }
:root[data-theme="dark"] .timeline-icon.system { background: #312E81; color: #818CF8; }

/* --- Admin tab --- */
:root[data-theme="dark"] .admin-tab-btn:hover { color: #F1F5F9; }

/* ===========================================
   5. INLINE STYLE OVERRIDES
   =========================================== */

/* --- White/light backgrounds → dark surface --- */
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background:white"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #f8fafc"],
:root[data-theme="dark"] [style*="background: #f9fafb"],
:root[data-theme="dark"] [style*="background: #f3f4f6"],
:root[data-theme="dark"] [style*="background: #eff6ff"],
:root[data-theme="dark"] [style*="background: #f5f3ff"],
:root[data-theme="dark"] [style*="background: #fafafa"],
:root[data-theme="dark"] [style*="background: #f8f9fa"],
:root[data-theme="dark"] [style*="background:#fafafa"],
:root[data-theme="dark"] [style*="background: #F8FAFC"] {
    background-color: #1E293B !important;
}
:root[data-theme="dark"] [style*="background: #f0f9ff"] {
    background-color: #0F2A4A !important;
}
:root[data-theme="dark"] [style*="background: #f1f5f9"],
:root[data-theme="dark"] [style*="background:#f1f5f9"] {
    background-color: #334155 !important;
}

/* Gray backgrounds */
:root[data-theme="dark"] [style*="background: #e5e7eb"],
:root[data-theme="dark"] [style*="background:#e5e7eb"],
:root[data-theme="dark"] [style*="background: #E2E8F0"],
:root[data-theme="dark"] [style*="background:#E2E8F0"] {
    background-color: #334155 !important;
}
:root[data-theme="dark"] [style*="background-color: #9ca3af"],
:root[data-theme="dark"] [style*="background-color:#9ca3af"] {
    background-color: #64748B !important;
}

/* Semantic light backgrounds → deep dark variants */
:root[data-theme="dark"] [style*="background: #fffbeb"],
:root[data-theme="dark"] [style*="background: #fff3cd"],
:root[data-theme="dark"] [style*="background: #fefce8"],
:root[data-theme="dark"] [style*="background: #fef3c7"] {
    background-color: #451A03 !important;
}
:root[data-theme="dark"] [style*="background: #f0fdf4"],
:root[data-theme="dark"] [style*="background: #ecfdf5"] {
    background-color: #064E3B !important;
}
:root[data-theme="dark"] [style*="background: #fef2f2"],
:root[data-theme="dark"] [style*="background: #fee2e2"],
:root[data-theme="dark"] [style*="background:#FEE2E2"],
:root[data-theme="dark"] [style*="background: #FFF5F5"] {
    background-color: #450A0A !important;
}
:root[data-theme="dark"] [style*="background: #dbeafe"],
:root[data-theme="dark"] [style*="background: #DBEAFE"],
:root[data-theme="dark"] [style*="background: #f0f7ff"],
:root[data-theme="dark"] [style*="background: #EFF6FF"] {
    background-color: #1E3A5F !important;
}
:root[data-theme="dark"] [style*="background: #d1fae5"],
:root[data-theme="dark"] [style*="background: #DCFCE7"],
:root[data-theme="dark"] [style*="background: #dcfce7"] {
    background-color: #064E3B !important;
}
:root[data-theme="dark"] [style*="background: #fce7f3"],
:root[data-theme="dark"] [style*="background: #FCE7F3"] {
    background-color: #500724 !important;
}
:root[data-theme="dark"] [style*="background: #e0e7ff"],
:root[data-theme="dark"] [style*="background: #E0E7FF"] {
    background-color: #312E81 !important;
}
:root[data-theme="dark"] [style*="background: #F3E8FF"],
:root[data-theme="dark"] [style*="background: #f3e8ff"] {
    background-color: #2E1065 !important;
}
:root[data-theme="dark"] [style*="background: #FEF3C7"] {
    background-color: #451A03 !important;
}

/* --- Dark text → light text --- */
:root[data-theme="dark"] [style*="color: #1f2937"],
:root[data-theme="dark"] [style*="color:#1f2937"],
:root[data-theme="dark"] [style*="color: #1F2937"],
:root[data-theme="dark"] [style*="color:#1F2937"] {
    color: #F1F5F9 !important;
}
:root[data-theme="dark"] [style*="color: #1e293b"],
:root[data-theme="dark"] [style*="color:#1e293b"],
:root[data-theme="dark"] [style*="color: #1E293B"] {
    color: #F1F5F9 !important;
}
:root[data-theme="dark"] [style*="color: #0f172a"],
:root[data-theme="dark"] [style*="color:#0f172a"] {
    color: #F1F5F9 !important;
}
:root[data-theme="dark"] [style*="color: #1a1a1a"] {
    color: #F1F5F9 !important;
}
:root[data-theme="dark"] [style*="color: #374151"],
:root[data-theme="dark"] [style*="color:#374151"] {
    color: #CBD5E1 !important;
}
:root[data-theme="dark"] [style*="color: #334155"],
:root[data-theme="dark"] [style*="color:#334155"] {
    color: #CBD5E1 !important;
}
:root[data-theme="dark"] [style*="color: #4b5563"],
:root[data-theme="dark"] [style*="color:#4b5563"] {
    color: #CBD5E1 !important;
}
:root[data-theme="dark"] [style*="color: #475569"],
:root[data-theme="dark"] [style*="color:#475569"] {
    color: #CBD5E1 !important;
}
:root[data-theme="dark"] [style*="color: #6b7280"],
:root[data-theme="dark"] [style*="color:#6b7280"],
:root[data-theme="dark"] [style*="color: #6B7280"],
:root[data-theme="dark"] [style*="color:#6B7280"] {
    color: #94A3B8 !important;
}
:root[data-theme="dark"] [style*="color: #64748b"],
:root[data-theme="dark"] [style*="color:#64748b"],
:root[data-theme="dark"] [style*="color: #64748B"],
:root[data-theme="dark"] [style*="color:#64748B"] {
    color: #94A3B8 !important;
}
:root[data-theme="dark"] [style*="color: #9ca3af"],
:root[data-theme="dark"] [style*="color:#9ca3af"] {
    color: #CBD5E1 !important;
}
:root[data-theme="dark"] [style*="color: #94a3b8"],
:root[data-theme="dark"] [style*="color:#94a3b8"],
:root[data-theme="dark"] [style*="color: #94A3B8"],
:root[data-theme="dark"] [style*="color:#94A3B8"] {
    color: #CBD5E1 !important;
}
:root[data-theme="dark"] [style*="color: #666"] {
    color: #94A3B8 !important;
}

/* Low-contrast accent colors → brighter variants */
:root[data-theme="dark"] [style*="color: #b45309"] {
    color: #FBBF24 !important;
}
:root[data-theme="dark"] [style*="color: #d97706"],
:root[data-theme="dark"] [style*="color: #D97706"] {
    color: #FBBF24 !important;
}
:root[data-theme="dark"] [style*="color: #017737"] {
    color: #34D399 !important;
}
:root[data-theme="dark"] [style*="color: #059669"] {
    color: #34D399 !important;
}
:root[data-theme="dark"] [style*="color: #3b82f6"],
:root[data-theme="dark"] [style*="color: #3B82F6"] {
    color: #60A5FA !important;
}
:root[data-theme="dark"] [style*="color: #2563eb"],
:root[data-theme="dark"] [style*="color: #2563EB"] {
    color: #60A5FA !important;
}
:root[data-theme="dark"] [style*="color: #6366f1"],
:root[data-theme="dark"] [style*="color: #6366F1"] {
    color: #818CF8 !important;
}
:root[data-theme="dark"] [style*="color: #8b5cf6"],
:root[data-theme="dark"] [style*="color: #8B5CF6"] {
    color: #A78BFA !important;
}

/* Info/warning/success/error text colors */
:root[data-theme="dark"] [style*="color: #1e40af"],
:root[data-theme="dark"] [style*="color: #1E40AF"] {
    color: #93C5FD !important;
}
:root[data-theme="dark"] [style*="color: #92400e"],
:root[data-theme="dark"] [style*="color: #92400E"] {
    color: #FCD34D !important;
}
:root[data-theme="dark"] [style*="color: #856404"] {
    color: #FCD34D !important;
}
:root[data-theme="dark"] [style*="color: #ca8a04"] {
    color: #FCD34D !important;
}
:root[data-theme="dark"] [style*="color: #854d0e"] {
    color: #FCD34D !important;
}
:root[data-theme="dark"] [style*="color: #166534"] {
    color: #6EE7B7 !important;
}
:root[data-theme="dark"] [style*="color: #16a34a"] {
    color: #34D399 !important;
}
:root[data-theme="dark"] [style*="color: #15803d"] {
    color: #34D399 !important;
}
:root[data-theme="dark"] [style*="color: #065f46"] {
    color: #6EE7B7 !important;
}
:root[data-theme="dark"] [style*="color: #7f1d1d"] {
    color: #FCA5A5 !important;
}
:root[data-theme="dark"] [style*="color: #991b1b"],
:root[data-theme="dark"] [style*="color:#991b1b"] {
    color: #FCA5A5 !important;
}
:root[data-theme="dark"] [style*="color: #dc2626"],
:root[data-theme="dark"] [style*="color: #DC2626"],
:root[data-theme="dark"] [style*="color:#DC2626"] {
    color: #FCA5A5 !important;
}
:root[data-theme="dark"] [style*="color: #ef4444"],
:root[data-theme="dark"] [style*="color: #EF4444"],
:root[data-theme="dark"] [style*="color:#EF4444"],
:root[data-theme="dark"] [style*="color:#ef4444"] {
    color: #FCA5A5 !important;
}

/* LinkedIn brand blues → brighter */
:root[data-theme="dark"] [style*="color: #0073b1"],
:root[data-theme="dark"] [style*="color:#0073b1"] {
    color: #60A5FA !important;
}
:root[data-theme="dark"] [style*="color: #0A66C2"],
:root[data-theme="dark"] [style*="color:#0A66C2"] {
    color: #60A5FA !important;
}

/* --- Borders --- */
:root[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
:root[data-theme="dark"] [style*="border:1px solid #e5e7eb"] {
    border-color: #334155 !important;
}
:root[data-theme="dark"] [style*="border: 2px solid #e5e7eb"] {
    border-color: #334155 !important;
}
:root[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
:root[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
:root[data-theme="dark"] [style*="border: 1px solid #E2E8F0"] {
    border-color: #334155 !important;
}
:root[data-theme="dark"] [style*="border: 1px solid #d1d5db"],
:root[data-theme="dark"] [style*="border:1px solid #d1d5db"] {
    border-color: #475569 !important;
}
:root[data-theme="dark"] [style*="border-bottom: 2px solid #e5e7eb"] {
    border-bottom-color: #334155 !important;
}
:root[data-theme="dark"] [style*="border-top: 1px solid #e5e7eb"] {
    border-top-color: #334155 !important;
}
:root[data-theme="dark"] [style*="border-left: 3px solid #e5e7eb"] {
    border-left-color: #334155 !important;
}
:root[data-theme="dark"] [style*="border-left: 4px solid #94a3b8"] {
    border-left-color: #475569 !important;
}
:root[data-theme="dark"] [style*="border-left: 3px solid #2563eb"] {
    border-left-color: #3B82F6 !important;
}
:root[data-theme="dark"] [style*="border-left: 3px solid #eab308"] {
    border-left-color: #D97706 !important;
}
:root[data-theme="dark"] [style*="border: 1px solid #bfdbfe"] {
    border-color: #1E3A5F !important;
}
:root[data-theme="dark"] [style*="border: 1px solid #fde68a"] {
    border-color: #B45309 !important;
}
:root[data-theme="dark"] [style*="border: 1px solid #86efac"] {
    border-color: #059669 !important;
}
:root[data-theme="dark"] [style*="border: 1px solid #fecaca"] {
    border-color: #DC2626 !important;
}
:root[data-theme="dark"] [style*="border: 1px solid #f59e0b"] {
    border-color: #D97706 !important;
}
:root[data-theme="dark"] [style*="border: 1px dashed #d1d5db"] {
    border-color: #475569 !important;
}

/* --- Select/option with inline bg --- */
:root[data-theme="dark"] select[style*="background: white"],
:root[data-theme="dark"] select[style*="background: #fff"] {
    background-color: #0F172A !important;
    color: #F1F5F9 !important;
}

/* --- Details/summary --- */
:root[data-theme="dark"] details[style*="background: white"] {
    background-color: #1E293B !important;
}
:root[data-theme="dark"] details[style*="border: 1px solid #e5e7eb"] {
    border-color: #334155 !important;
}

/* --- Slider values and labels --- */
:root[data-theme="dark"] .slider-value {
    color: #F1F5F9;
}
:root[data-theme="dark"] .limit-slider {
    background: #334155 !important;
}

/* --- Sidebar elements with inline styles --- */
:root[data-theme="dark"] .sidebar .logout-btn {
    color: #94A3B8 !important;
}

/* ===========================================
   6. PAGE-SPECIFIC OVERRIDES
   =========================================== */

/* --- Inbox --- */
:root[data-theme="dark"] .inbox-conversations-panel,
:root[data-theme="dark"] .inbox-thread-header,
:root[data-theme="dark"] .inbox-reply-area,
:root[data-theme="dark"] .inbox-thread-lead-link,
:root[data-theme="dark"] .inbox-channel-btn,
:root[data-theme="dark"] .inbox-unread-toggle,
:root[data-theme="dark"] .inbox-reply-ai-btn,
:root[data-theme="dark"] .inbox-reply-channel-select {
    background: #1E293B;
    border-color: #334155;
    color: #94A3B8;
}
:root[data-theme="dark"] .inbox-search-bar {
    background: #0F172A;
    border-bottom-color: #334155;
}
:root[data-theme="dark"] .inbox-search-input,
:root[data-theme="dark"] .inbox-reply-textarea,
:root[data-theme="dark"] .inbox-reply-subject {
    background: #0F172A;
    border-color: #334155;
    color: #F1F5F9;
}
:root[data-theme="dark"] .inbox-thread-panel {
    background: #0F172A;
}
:root[data-theme="dark"] .inbox-conv-item {
    border-bottom-color: #1E293B;
}
:root[data-theme="dark"] .inbox-conv-item:hover {
    background: #1E293B;
}
:root[data-theme="dark"] .inbox-conv-item.active {
    background: #1E3A5F;
    border-left-color: #60A5FA;
}
:root[data-theme="dark"] .inbox-conv-item.unread {
    background: #1C1917;
}
:root[data-theme="dark"] .inbox-conv-name,
:root[data-theme="dark"] .inbox-thread-lead-name {
    color: #F1F5F9;
}
:root[data-theme="dark"] .inbox-conv-preview {
    color: #94A3B8;
}
:root[data-theme="dark"] .inbox-conv-item.unread .inbox-conv-preview {
    color: #CBD5E1;
}
:root[data-theme="dark"] .inbox-conv-avatar {
    background: #334155;
    color: #94A3B8;
}
:root[data-theme="dark"] .inbox-channel-btn.active {
    background: #1E3A5F;
    border-color: #60A5FA;
    color: #60A5FA;
}
:root[data-theme="dark"] .inbox-unread-toggle.active {
    background: #450A0A;
    border-color: #EF4444;
    color: #EF4444;
}
:root[data-theme="dark"] .inbox-conversations-panel {
    border-right-color: #334155;
}
:root[data-theme="dark"] .inbox-reply-area {
    border-top-color: #334155;
}
:root[data-theme="dark"] .inbox-thread-header {
    border-bottom-color: #334155;
}
:root[data-theme="dark"] .inbox-thread-empty,
:root[data-theme="dark"] .inbox-loading,
:root[data-theme="dark"] .inbox-empty {
    color: #64748B;
}
:root[data-theme="dark"] .inbox-thread-empty svg,
:root[data-theme="dark"] .inbox-empty-icon {
    color: #475569;
}
:root[data-theme="dark"] .inbox-reply-send-btn:disabled {
    background: #1E3A5F;
}
:root[data-theme="dark"] .inbox-msg-bubble {
    background: #334155;
    color: #F1F5F9;
}
:root[data-theme="dark"] .inbox-msg-bubble.sent {
    background: #EF4444;
    color: #fff;
}

/* --- Dashboard --- */
:root[data-theme="dark"] .pipeline-stat {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .pipeline-stat-value {
    color: #F1F5F9;
}
:root[data-theme="dark"] .pipeline-stat-label {
    color: #94A3B8;
}
:root[data-theme="dark"] .attention-name {
    color: #F1F5F9;
}
:root[data-theme="dark"] .attention-company {
    color: #94A3B8;
}
:root[data-theme="dark"] .attention-signal {
    color: #94A3B8;
}
:root[data-theme="dark"] .attention-arrow {
    color: #64748B;
}
:root[data-theme="dark"] .attention-row {
    border-bottom-color: #334155;
}
:root[data-theme="dark"] .attention-badge.hot {
    background: #450A0A;
    color: #FCA5A5;
}
:root[data-theme="dark"] .attention-badge.buyer-intent {
    background: #451A03;
    color: #FCD34D;
}
:root[data-theme="dark"] .attention-badge.new-activity {
    background: #1E3A5F;
    color: #93C5FD;
}
:root[data-theme="dark"] .attention-empty-text {
    color: #94A3B8;
}
:root[data-theme="dark"] .attention-empty-sub {
    color: #64748B;
}
:root[data-theme="dark"] .attention-count-badge {
    background: #334155;
    color: #94A3B8;
}
:root[data-theme="dark"] .signal-name {
    color: #F1F5F9;
}
:root[data-theme="dark"] .signal-title {
    color: #94A3B8;
}
:root[data-theme="dark"] .signal-time {
    color: #64748B;
}
:root[data-theme="dark"] .signal-item {
    border-bottom-color: #334155;
}
:root[data-theme="dark"] .signal-type-badge.post {
    background: #1E3A5F;
    color: #93C5FD;
}
:root[data-theme="dark"] .signal-type-badge.comment {
    background: #064E3B;
    color: #6EE7B7;
}
:root[data-theme="dark"] .signal-type-badge.reaction {
    background: #451A03;
    color: #FCD34D;
}
:root[data-theme="dark"] .signal-type-badge.profile-view {
    background: #450A0A;
    color: #FCA5A5;
}
:root[data-theme="dark"] .signal-type-badge.message-intent,
:root[data-theme="dark"] .signal-type-badge.keyword-intent {
    background: #451A03;
    color: #FCD34D;
}
:root[data-theme="dark"] .dashboard-status-bar {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .status-info-value {
    color: #F1F5F9;
}
:root[data-theme="dark"] .status-bar-divider {
    border-color: #334155;
}
:root[data-theme="dark"] .campaign-card {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .campaign-name {
    color: #F1F5F9;
}
:root[data-theme="dark"] .campaign-progress-bar {
    background: #334155;
}
:root[data-theme="dark"] .funnel-label {
    color: #94A3B8;
}
:root[data-theme="dark"] .chart-container {
    background: #1E293B;
}

/* --- Campaign Wizard & Detail --- */
:root[data-theme="dark"] .wizard-step {
    background-color: #1E293B;
    border-color: var(--border-gray);
}
:root[data-theme="dark"] .wizard-step.active {
    border-color: var(--primary-red);
}
:root[data-theme="dark"] .wizard-step .step-label {
    color: #94A3B8;
}
:root[data-theme="dark"] .wizard-step.active .step-label {
    color: #F1F5F9;
}
:root[data-theme="dark"] .step-content {
    background-color: #1E293B;
}
:root[data-theme="dark"] .sequence-step-card {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .step-name {
    color: #F1F5F9;
}
:root[data-theme="dark"] .step-number {
    color: #94A3B8;
}
:root[data-theme="dark"] .step-connection-filter {
    color: #94A3B8;
}
:root[data-theme="dark"] .step-delete-btn:hover {
    background: #450A0A;
}
:root[data-theme="dark"] .source-card {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .source-card:hover {
    border-color: #60A5FA;
}
:root[data-theme="dark"] .source-card.disabled {
    background: #0F172A;
    opacity: 0.7;
}
:root[data-theme="dark"] .source-card .source-title {
    color: #F1F5F9;
}
:root[data-theme="dark"] .source-card .source-description {
    color: #94A3B8;
}
:root[data-theme="dark"] .source-card.selected {
    border-color: var(--blue);
    background: #0F172A;
}
:root[data-theme="dark"] .schedule-card {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .campaign-summary {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .sales-navigator-form {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .url-example {
    background: #0F172A;
    border-color: #334155;
    color: #94A3B8;
}
:root[data-theme="dark"] .delay-card {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .step-type-dropdown,
:root[data-theme="dark"] .delay-dropdown,
:root[data-theme="dark"] .branch-dropdown {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .step-edit-modal {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .step-edit-actions .btn-secondary {
    background: #0F172A;
    border-color: #334155;
    color: #F1F5F9;
}
:root[data-theme="dark"] .datetime-input {
    background: #0F172A;
    border-color: #334155;
    color: #F1F5F9;
    color-scheme: dark;
}
:root[data-theme="dark"] .datetime-input:hover {
    background: #1E293B;
}
:root[data-theme="dark"] .datetime-input:focus {
    background: #1E293B;
    border-color: #3b82f6;
}
:root[data-theme="dark"] .datetime-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
:root[data-theme="dark"] .datetime-input::-webkit-calendar-picker-indicator:hover {
    background: #334155;
}
:root[data-theme="dark"] .sn-instructions {
    background: var(--white);
    color: var(--text-dark);
}
:root[data-theme="dark"] .sn-instructions h4 {
    color: var(--text-dark);
}
:root[data-theme="dark"] .sn-instructions ol li {
    color: #94A3B8;
}
/* SSI (Social Selling Index) */
:root[data-theme="dark"] .ssi-score-num {
    color: #F1F5F9;
}
:root[data-theme="dark"] .ssi-bar-track {
    background: #334155;
}
:root[data-theme="dark"] .ssi-ranking {
    border-top-color: #334155;
}
:root[data-theme="dark"] .ssi-rank-item strong {
    color: #F1F5F9;
}
:root[data-theme="dark"] .ssi-history-wrap {
    border-top-color: #334155;
}
:root[data-theme="dark"] .ssi-period-btn {
    background: #334155;
    color: #94A3B8;
}
:root[data-theme="dark"] .ssi-period-btn.active {
    background: #3B82F6;
    color: #fff;
}
:root[data-theme="dark"] .ssi-period-btn:hover:not(.active) {
    background: #475569;
}
:root[data-theme="dark"] .preview-table th {
    background: #0F172A;
    color: #94A3B8;
    border-color: #334155;
}
:root[data-theme="dark"] .preview-table td {
    border-color: #334155;
    color: #F1F5F9;
}
:root[data-theme="dark"] .upload-progress-bar {
    background: #334155;
}
:root[data-theme="dark"] .step-card,
:root[data-theme="dark"] .step-header {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .step-card.active,
:root[data-theme="dark"] .step-card:hover {
    border-color: #EF4444;
}
:root[data-theme="dark"] .condition-card {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .branch-container {
    border-color: #334155;
}
:root[data-theme="dark"] .tag-btn:hover {
    background: #1E3A5F;
    border-color: #3B82F6;
}
:root[data-theme="dark"] .condition-wait-input {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .add-step-branch-btn {
    background: #1E293B;
    border-color: #334155;
    color: #94A3B8;
}
:root[data-theme="dark"] .step-content-preview {
    color: #94A3B8;
}
:root[data-theme="dark"] .step-content-preview strong {
    color: #CBD5E1;
}
:root[data-theme="dark"] .stat-card {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .sequence-readonly {
    background: #0F172A;
}
:root[data-theme="dark"] .flow-connector-label {
    background: #1E293B;
    border-color: #334155;
    color: #94A3B8;
}
:root[data-theme="dark"] .flow-start-end {
    background: #1E293B;
    border-color: #334155;
    color: #F1F5F9;
}

/* --- Onboarding --- */
:root[data-theme="dark"] .onboarding-tooltip {
    background-color: #1E293B;
    color: var(--text-dark);
    border-color: var(--border-gray);
}
:root[data-theme="dark"] .onboarding-popover,
:root[data-theme="dark"] .onboarding-checklist {
    background: #1E293B;
    border-color: #334155;
    color: #F1F5F9;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .onboarding-step-item {
    border-color: #334155;
}
:root[data-theme="dark"] .onboarding-widget-card {
    background-color: var(--white);
    color: var(--text-dark);
    border-color: var(--border-gray);
}
:root[data-theme="dark"] .onboarding-modal {
    background-color: var(--white);
    color: var(--text-dark);
}
:root[data-theme="dark"] .onboarding-page-intro {
    background-color: var(--white);
    color: var(--text-dark);
    border-color: var(--border-gray);
}

/* --- Login --- */
:root[data-theme="dark"] .login-container {
    background: #0F172A;
}
:root[data-theme="dark"] .login-form-section {
    background: #1E293B;
}
:root[data-theme="dark"] .login-marketing {
    background: #0F172A;
}
:root[data-theme="dark"] .login-card {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .feature-item {
    background: #1E293B;
    border-color: #334155;
}
:root[data-theme="dark"] .social-btn {
    background: var(--white);
    border-color: var(--border-gray);
    color: var(--text-dark);
}
:root[data-theme="dark"] .social-btn:hover {
    background: var(--bg-elevated);
}
:root[data-theme="dark"] .linkedin-btn:hover {
    background: #1E3A5F;
    border-color: #3B82F6;
}

/* --- Tutorials --- */
:root[data-theme="dark"] .video-modal-container {
    background-color: var(--white);
    color: var(--text-dark);
}
:root[data-theme="dark"] .tutorial-card {
    background-color: var(--white);
    color: var(--text-dark);
    border-color: var(--border-gray);
}

/* --- Safety page (overrides embedded <style>) --- */
:root[data-theme="dark"] .safety-content h2 { color: #F1F5F9; }
:root[data-theme="dark"] .safety-content h3 { color: #E2E8F0; }
:root[data-theme="dark"] .safety-content p { color: #CBD5E1; }
:root[data-theme="dark"] .safety-content li { color: #CBD5E1; }
:root[data-theme="dark"] .safety-content table { background: #1E293B; }
:root[data-theme="dark"] .safety-content th { background: #0F172A; color: #94A3B8; border-color: #334155; }
:root[data-theme="dark"] .safety-content td { border-color: #334155; color: #CBD5E1; }
:root[data-theme="dark"] .safety-intro { background: #450A0A; border-color: #DC2626; }
:root[data-theme="dark"] .safety-intro p { color: #FCA5A5; }
:root[data-theme="dark"] .safety-quote { background: #0F172A; border-color: #475569; color: #94A3B8; }
:root[data-theme="dark"] .safety-callout { background: #064E3B; border-color: #10B981; }
:root[data-theme="dark"] .safety-callout p { color: #6EE7B7; }

/* ===========================================
   7. THEME TOGGLE BUTTON
   =========================================== */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-gray);
    background: transparent;
    color: var(--text-gray);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin: 0 0.75rem 0.75rem;
    padding: 0;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--bg-gray-dark);
    color: var(--text-dark);
}
.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* Smooth transition for theme switch */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}