/* Theme tokens: dark is default, [data-theme="light"] overrides on . */ :root { --bg-page: #121417; --bg-surface: #1c1f26; --bg-elevated: #252a33; --bg-deep: #12141d; --bg-deepest: #17181b; --bg-surface-alt: #1c2333; --bg-gradient-start: #171a1e; --bg-gradient-mid: #161a1e; --border-subtle: #2a2f3a; --border-strong: #303645; --text-primary: #e6e9ef; --text-secondary: #a0a6b1; --text-tertiary: #6b7280; --text-muted: #9ca3af; --accent: #3b82f6; --accent-hover: #2563eb; --accent-light: #60a5fa; --accent-strong: #0a1f44; --danger: #ef4444; --danger-alt: #ff4742; --danger-hover: #dc2626; --danger-strong: #b81c1c; --danger-dark: #c82333; --danger-bs: #dc3545; --success: #22c55e; --success-alt: #2dce89; --warning: #ffd700; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.4); } html[data-theme="light"] { --bg-page: #f9fafb; --bg-surface: #ffffff; --bg-elevated: #f3f4f6; --bg-deep: #f9fafb; --bg-deepest: #f3f4f6; --bg-surface-alt: #f9fafb; --bg-gradient-start: #ffffff; --bg-gradient-mid: #f9fafb; --border-subtle: #e5e7eb; --border-strong: #d1d5db; --text-primary: #111827; --text-secondary: #4b5563; --text-tertiary: #6b7280; --text-muted: #6b7280; --accent: #3b82f6; --accent-hover: #2563eb; --accent-light: #60a5fa; --accent-strong: #1e3a8a; --shadow-card: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-elevated: 0 4px 12px rgba(17, 24, 39, 0.08); } html[data-theme="light"] body.background, html[data-theme="light"] .background { background-color: var(--bg-page); color: var(--text-primary); } /* ── Light-theme image/asset adjustments ── */ html[data-theme="light"] .ts-logo1, html[data-theme="light"] .ts-logo2, html[data-theme="light"] .ts-logo { filter: brightness(0); } html[data-theme="light"] .app-nav-img { filter: brightness(0); opacity: 1; } /* Results table external-link PNG: invert to dark in light mode */ html[data-theme="light"] .results-link img, html[data-theme="light"] .results2-link img { filter: brightness(0); } /* Action buttons & dropdown icons: default filter makes them pale — make dark in light mode */ html[data-theme="light"] .drop-icon, html[data-theme="light"] .results-delete img { filter: brightness(0); } /* Export emails / Delete buttons: add visible border in light mode */ html[data-theme="light"] .results-export-emails, html[data-theme="light"] .results-delete { border: 1px solid var(--border-strong) !important; } /* FontAwesome icons in nav — force inherit in light mode */ html[data-theme="light"] .app-nav-group a, html[data-theme="light"] .app-nav-group a .icon, html[data-theme="light"] .app-nav-group a .icon i, html[data-theme="light"] .app-nav-group a i.fa, html[data-theme="light"] .app-nav-group a svg { color: var(--text-primary); fill: currentColor; } html[data-theme="light"] .app-sidebar .active, html[data-theme="light"] .app-sidebar .active a, html[data-theme="light"] .app-sidebar .active .icon, html[data-theme="light"] .app-sidebar .active .icon i, html[data-theme="light"] .app-sidebar .active i.fa, html[data-theme="light"] .app-sidebar .active svg { color: #ffffff; fill: currentColor; } /* ── Sidebar depth in light mode ── */ html[data-theme="light"] .app-sidebar { background: #ffffff; border-right: 1px solid var(--border-subtle); } html[data-theme="light"] .app-sidebar .active a { color: #ffffff; } html[data-theme="light"] .app-sidebar .active .app-nav-img { filter: brightness(0) invert(1); opacity: 1; } /* ── Results tables: stripe + hover in light mode ── */ html[data-theme="light"] .app-results .table tr:nth-child(odd), html[data-theme="light"] .app-results2 .table tr:nth-child(odd) { background-color: #ffffff !important; } html[data-theme="light"] .app-results .table tr:nth-child(even), html[data-theme="light"] .app-results2 .table tr:nth-child(even) { background-color: #f3f4f6 !important; } html[data-theme="light"] .app-results .table tbody tr:hover, html[data-theme="light"] .app-results2 .table tbody tr:hover { background-color: #e5e7eb !important; } html[data-theme="light"] .app-results thead th, html[data-theme="light"] .app-results2 thead th, html[data-theme="light"] .app-head-results2 { background-color: var(--bg-page) !important; } /* ── Form controls & toggle rows in light mode ── */ html[data-theme="light"] .dark-input, html[data-theme="light"] .username-row, html[data-theme="light"] .single-input-row, html[data-theme="light"] .bulk-textarea, html[data-theme="light"] .profile-form-section .form-control, html[data-theme="light"] .webhook-form-group .form-control, html[data-theme="light"] #full-webhook-url { background: var(--bg-elevated) !important; border: 1px solid var(--border-strong) !important; } /* Enrich/Profiles Single/Bulk tabs — hover was white (invisible in light) */ html[data-theme="light"] button.mode-tab:hover { color: var(--text-primary) !important; background: var(--bg-elevated) !important; } html[data-theme="light"] button.mode-tab.active { color: var(--accent) !important; } /* Recent-searches history rows: give each row a visible pill container in light */ html[data-theme="light"] .history-item { background: var(--bg-elevated) !important; border: 1px solid var(--border-subtle) !important; } html[data-theme="light"] .history-item:hover { border-color: var(--border-strong) !important; } /* Upload zone: make the dashed border and hover state clearly visible in light */ html[data-theme="light"] .upload-zone { border: 1px solid var(--border-strong) !important; background: var(--bg-elevated) !important; } html[data-theme="light"] .upload-zone:hover { border-color: var(--accent) !important; background: rgba(59, 130, 246, 0.04) !important; } html[data-theme="light"] .upload-icon-box { border-color: var(--border-strong); background: var(--bg-surface); } html[data-theme="light"] .toggle-row, html[data-theme="light"] .section-divider + .toggle-row, html[data-theme="light"] button.expand-btn { background: var(--bg-elevated) !important; border-color: var(--border-subtle) !important; } html[data-theme="light"] button.expand-btn:hover { background: var(--border-subtle) !important; } html[data-theme="light"] .email-type-group { border-color: var(--border-strong) !important; } html[data-theme="light"] .email-type-group label.etype + label.etype { border-left-color: var(--border-strong) !important; } /* ── API table stripe ── */ html[data-theme="light"] .api-table th { background-color: var(--bg-elevated) !important; } html[data-theme="light"] .api-table tbody tr:nth-child(even) td { background-color: #f9fafb; } /* ── btn-secondary: profile/tab context needs dark text, app.css global forces white ── */ html[data-theme="light"] .profile-card .btn-secondary, html[data-theme="light"] .tab-panel .btn-secondary { background-color: transparent !important; color: var(--text-primary) !important; border: 1px solid var(--border-strong) !important; } html[data-theme="light"] .profile-card .btn-secondary:hover, html[data-theme="light"] .tab-panel .btn-secondary:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--accent) !important; } /* ── Sidebar profile button hover ── */ html[data-theme="light"] .nav-user-btn:hover { background: var(--bg-elevated); } /* ── Subscription / pricing page ── */ html[data-theme="light"] .p07 { background-color: var(--bg-page); } html[data-theme="light"] .p07_block { background-color: var(--bg-surface); border: 1px solid var(--border-subtle); } html[data-theme="light"] .p07_block_03 { background-color: var(--bg-surface); border: 1px solid var(--border-subtle); } html[data-theme="light"] .p07_pricing_wrap { color: var(--text-primary); } /* White-card plan text: use primary black, not dark blue */ html[data-theme="light"] .p07_text, html[data-theme="light"] .p07_h3 { color: var(--text-primary) !important; } /* White-card (.btn1) buttons: black with white text */ html[data-theme="light"] .btn1 { background-color: var(--text-primary) !important; color: #ffffff !important; } /* Blue-card (.btn2) button: white with black text */ html[data-theme="light"] .btn2 { background-color: #ffffff !important; color: var(--text-primary) !important; } html[data-theme="light"] .p07_info_text { color: var(--text-tertiary); } /* ── SweetAlert2 popup: re-theme via CSS vars ── */ html[data-theme="light"] .swal-dark-popup { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; } html[data-theme="light"] .swal-dark-title { color: var(--text-primary) !important; } html[data-theme="light"] .swal-dark-text { color: var(--text-secondary) !important; } html[data-theme="light"] .swal-dark-cancel { color: var(--text-secondary) !important; border: 1px solid var(--border-subtle) !important; } html[data-theme="light"] .swal-dark-cancel:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }