/* ============================================================ Theme System Themes applied via data-theme attribute on Default (no attribute or "warm-light") = current warm stone ============================================================ */ /* ── Design settings section ── */ .design-wrap { max-width: 820px; margin: 0 auto; } .design-heading { font-size: 1.375rem; font-weight: 700; color: #1c1917; letter-spacing: -0.025em; margin-bottom: 0.25rem; } .design-subtitle { font-size: 0.875rem; color: #78716c; margin-bottom: 2rem; } .design-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .design-theme-card { cursor: pointer; border-radius: 12px; border: 2px solid #e7e5e4; padding: 1rem; transition: border-color 0.15s, box-shadow 0.15s; display: block; background: transparent; } .design-theme-card:hover { border-color: #a8a29e; } .design-theme-card:has(.design-theme-radio:checked) { border-color: #1c1917; box-shadow: 0 0 0 1px #1c1917; } .design-theme-radio { position: absolute; opacity: 0; pointer-events: none; } .design-theme-name { font-size: 0.875rem; font-weight: 600; color: #1c1917; margin-top: 0.75rem; margin-bottom: 0.125rem; } .design-theme-desc { font-size: 0.75rem; color: #78716c; } /* ── Theme preview thumbnails ── */ .design-theme-preview { border-radius: 8px; overflow: hidden; display: flex; height: 100px; border: 1px solid #e7e5e4; } .design-preview-sidebar { width: 28%; flex-shrink: 0; } .design-preview-content { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .design-preview-bar { height: 8px; border-radius: 3px; width: 60%; } .design-preview-blocks { display: flex; gap: 6px; flex: 1; } .design-preview-block { flex: 1; border-radius: 4px; } /* Preview: Warm Light */ .design-preview--warm-light .design-preview-sidebar { background: #f2efe9; } .design-preview--warm-light .design-preview-content { background: #faf8f5; } .design-preview--warm-light .design-preview-bar { background: #e7e5e4; } .design-preview--warm-light .design-preview-block { background: #fff; border: 1px solid #e7e5e4; } /* Preview: Dark Sidebar */ .design-preview--dark-sidebar .design-preview-sidebar { background: #1c1917; } .design-preview--dark-sidebar .design-preview-content { background: #faf8f5; } .design-preview--dark-sidebar .design-preview-bar { background: #e7e5e4; } .design-preview--dark-sidebar .design-preview-block { background: #fff; border: 1px solid #e7e5e4; } /* Preview: Dark Mode */ .design-preview--dark-mode .design-preview-sidebar { background: #1c1917; } .design-preview--dark-mode .design-preview-content { background: #292524; } .design-preview--dark-mode .design-preview-bar { background: #44403c; } .design-preview--dark-mode .design-preview-block { background: #1c1917; border: 1px solid #44403c; } /* ── Mobile ── */ @media (max-width: 640px) { .design-themes { grid-template-columns: 1fr; } } /* ================================================================ THEME: Dark Sidebar Dark nav, warm stone content unchanged ================================================================ */ [data-theme="dark-sidebar"] .sidebar { background: #1c1917; border-right-color: rgba(255, 255, 255, 0.06); } [data-theme="dark-sidebar"] .sidebar-header { border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="dark-sidebar"] .sidebar-header .logo-text, [data-theme="dark-sidebar"] .sidebar-header a { color: #faf8f5; } [data-theme="dark-sidebar"] .sidebar-collapse-btn { color: rgba(255, 255, 255, 0.4); } [data-theme="dark-sidebar"] .sidebar-collapse-btn:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); } [data-theme="dark-sidebar"] .nav-section-label { color: rgba(255, 255, 255, 0.3); } [data-theme="dark-sidebar"] .nav-item { color: rgba(255, 255, 255, 0.55); } [data-theme="dark-sidebar"] .nav-item:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); } [data-theme="dark-sidebar"] .nav-item.active { background: rgba(255, 255, 255, 0.1); color: #fff; } [data-theme="dark-sidebar"] .nav-item .badge { background: rgba(255, 255, 255, 0.15); color: #fff; } [data-theme="dark-sidebar"] .nav-sub-item { color: rgba(255, 255, 255, 0.45); } [data-theme="dark-sidebar"] .nav-sub-item:hover { color: rgba(255, 255, 255, 0.75) !important; background: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark-sidebar"] .nav-sub-item.active { color: #fff !important; background: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark-sidebar"] .settings-nav-item { color: #a8a29e; } [data-theme="dark-sidebar"] .settings-nav-item:hover { background: rgba(255, 255, 255, 0.06) !important; color: #e7e5e4 !important; } [data-theme="dark-sidebar"] .settings-nav-item.active { background: rgba(255, 255, 255, 0.1) !important; color: #faf8f5 !important; } [data-theme="dark-sidebar"] .sidebar-footer { border-top-color: rgba(255, 255, 255, 0.08); } [data-theme="dark-sidebar"] .sidebar-avatar { background: #44403c !important; color: #faf8f5 !important; } [data-theme="dark-sidebar"] .sidebar-user-name { color: #faf8f5 !important; } [data-theme="dark-sidebar"] .sidebar-user-email { color: rgba(255, 255, 255, 0.4) !important; } [data-theme="dark-sidebar"] .sidebar-footer .logout-btn, [data-theme="dark-sidebar"] .sidebar-footer [data-lucide] { color: rgba(255, 255, 255, 0.35) !important; } [data-theme="dark-sidebar"] .sidebar-footer > div:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark-sidebar"] .nav-folder-chevron { color: rgba(255, 255, 255, 0.3) !important; } [data-theme="dark-sidebar"] .sidebar-nav::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); } [data-theme="dark-sidebar"] .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); } [data-theme="dark-sidebar"] .demo-mode-badge { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark-sidebar"] .sidebar-links-row a { color: rgba(255, 255, 255, 0.3) !important; } [data-theme="dark-sidebar"] .sidebar-links-row a:hover { color: rgba(255, 255, 255, 0.6) !important; } /* ================================================================ THEME: Dark Mode Full dark interface ================================================================ */ /* -- Sidebar (same as dark-sidebar) -- */ [data-theme="dark-mode"] .sidebar { background: #1c1917; border-right-color: #292524; } [data-theme="dark-mode"] .sidebar-header { border-bottom-color: #292524; } [data-theme="dark-mode"] .sidebar-header .logo-text, [data-theme="dark-mode"] .sidebar-header a { color: #faf8f5; } [data-theme="dark-mode"] .sidebar-collapse-btn { color: rgba(255, 255, 255, 0.4); } [data-theme="dark-mode"] .sidebar-collapse-btn:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); } [data-theme="dark-mode"] .nav-section-label { color: rgba(255, 255, 255, 0.3); } [data-theme="dark-mode"] .nav-item { color: rgba(255, 255, 255, 0.55); } [data-theme="dark-mode"] .nav-item:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); } [data-theme="dark-mode"] .nav-item.active { background: rgba(255, 255, 255, 0.1); color: #fff; } [data-theme="dark-mode"] .nav-item .badge { background: rgba(255, 255, 255, 0.15); color: #fff; } [data-theme="dark-mode"] .nav-sub-item { color: rgba(255, 255, 255, 0.45); } [data-theme="dark-mode"] .nav-sub-item:hover { color: rgba(255, 255, 255, 0.75) !important; background: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark-mode"] .nav-sub-item.active { color: #fff !important; background: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark-mode"] .sidebar-footer { border-top-color: #292524; } [data-theme="dark-mode"] .sidebar-avatar { background: #44403c !important; color: #faf8f5 !important; } [data-theme="dark-mode"] .sidebar-user-name { color: #faf8f5 !important; } [data-theme="dark-mode"] .sidebar-user-email { color: rgba(255, 255, 255, 0.4) !important; } [data-theme="dark-mode"] .sidebar-footer .logout-btn, [data-theme="dark-mode"] .sidebar-footer [data-lucide] { color: rgba(255, 255, 255, 0.35) !important; } [data-theme="dark-mode"] .sidebar-footer > div:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark-mode"] .nav-folder-chevron { color: rgba(255, 255, 255, 0.3) !important; } [data-theme="dark-mode"] .demo-mode-badge { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark-mode"] .sidebar-links-row a { color: rgba(255, 255, 255, 0.3) !important; } [data-theme="dark-mode"] .sidebar-links-row a:hover { color: rgba(255, 255, 255, 0.6) !important; } /* -- Body & main content -- */ [data-theme="dark-mode"] body { background: #1a1816; color: #e7e5e4; } [data-theme="dark-mode"] .main-content { background: #1a1816; } /* -- Cards & panels -- */ [data-theme="dark-mode"] .nb-form-card, [data-theme="dark-mode"] .nb-gcal-event, [data-theme="dark-mode"] .nb-confirmation, [data-theme="dark-mode"] .card { background: #292524; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .settings-card, [data-theme="dark-mode"] .billing-wrap { background: transparent; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .acct-wrap .acct-section { background: transparent; border-color: #44403c; color: #e7e5e4; } /* -- General text -- */ [data-theme="dark-mode"] h1, [data-theme="dark-mode"] h2, [data-theme="dark-mode"] h3, [data-theme="dark-mode"] .nb-page-title, [data-theme="dark-mode"] .design-heading, [data-theme="dark-mode"] .acct-heading, [data-theme="dark-mode"] .billing-heading { color: #faf8f5; } [data-theme="dark-mode"] p, [data-theme="dark-mode"] .nb-page-subtitle, [data-theme="dark-mode"] .design-subtitle, [data-theme="dark-mode"] .acct-subtitle, [data-theme="dark-mode"] .billing-subtitle { color: #a8a29e; } /* -- Inputs -- */ [data-theme="dark-mode"] .nb-input, [data-theme="dark-mode"] input[type="text"], [data-theme="dark-mode"] input[type="email"], [data-theme="dark-mode"] input[type="tel"], [data-theme="dark-mode"] input[type="number"], [data-theme="dark-mode"] input[type="date"], [data-theme="dark-mode"] input[type="time"], [data-theme="dark-mode"] input[type="password"], [data-theme="dark-mode"] select, [data-theme="dark-mode"] textarea { background: #1c1917; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .nb-input:focus, [data-theme="dark-mode"] input:focus, [data-theme="dark-mode"] select:focus, [data-theme="dark-mode"] textarea:focus { border-color: #78716c !important; box-shadow: 0 0 0 2.5px rgba(120, 113, 108, 0.15) !important; } [data-theme="dark-mode"] .nb-input::placeholder, [data-theme="dark-mode"] input::placeholder, [data-theme="dark-mode"] textarea::placeholder { color: #57534e; } /* -- Labels -- */ [data-theme="dark-mode"] .nb-label, [data-theme="dark-mode"] label { color: #a8a29e; } /* -- Borders / dividers -- */ [data-theme="dark-mode"] .nb-section-header, [data-theme="dark-mode"] .nb-submit-row, [data-theme="dark-mode"] .nb-gcal-details, [data-theme="dark-mode"] .nb-gcal-footer { border-color: #44403c; } [data-theme="dark-mode"] .nb-section-header { color: #e7e5e4; } /* -- Buttons -- */ [data-theme="dark-mode"] .nb-submit-btn, [data-theme="dark-mode"] .nb-submit-btn.btn-primary, [data-theme="dark-mode"] .pay-setup-btn, [data-theme="dark-mode"] .acct-btn-primary { background: #faf8f5 !important; color: #1c1917 !important; } [data-theme="dark-mode"] .nb-submit-btn:hover, [data-theme="dark-mode"] .nb-submit-btn.btn-primary:hover, [data-theme="dark-mode"] .pay-setup-btn:hover, [data-theme="dark-mode"] .acct-btn-primary:hover { background: #e7e5e4 !important; } [data-theme="dark-mode"] .nb-submit-row .btn-secondary, [data-theme="dark-mode"] .btn-secondary, [data-theme="dark-mode"] .acct-btn-secondary { background: transparent; border-color: #44403c; color: #a8a29e; } [data-theme="dark-mode"] .nb-submit-row .btn-secondary:hover, [data-theme="dark-mode"] .btn-secondary:hover { background: #292524; border-color: #57534e; } [data-theme="dark-mode"] .btn-ghost { color: #d6d3d1; } [data-theme="dark-mode"] .btn-ghost:hover { background: #44403c; color: #faf8f5; } /* -- Preview card -- */ [data-theme="dark-mode"] .nb-preview-header { color: #57534e; } [data-theme="dark-mode"] .nb-gcal-stripe { background: #faf8f5 !important; } [data-theme="dark-mode"] .nb-gcal-title { color: #faf8f5; } [data-theme="dark-mode"] .nb-gcal-time, [data-theme="dark-mode"] .nb-gcal-location { color: #a8a29e; } [data-theme="dark-mode"] .nb-gcal-detail-label { color: #57534e; } [data-theme="dark-mode"] .nb-gcal-detail-value { color: #e7e5e4; } [data-theme="dark-mode"] .nb-gcal-footer { color: #57534e; } /* -- Timeline -- */ [data-theme="dark-mode"] .nb-timeline-wrap { background: #292524 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .nb-timeline-title { color: #e7e5e4 !important; } [data-theme="dark-mode"] .nb-timeline-date-label { color: #57534e !important; } /* -- Settings nav -- */ [data-theme="dark-mode"] .settings-nav { background: #292524; border-color: #44403c; } [data-theme="dark-mode"] .settings-nav-item { color: #a8a29e; } [data-theme="dark-mode"] .settings-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #e7e5e4; } [data-theme="dark-mode"] .settings-nav-item.active { background: rgba(255, 255, 255, 0.1); color: #faf8f5; } /* -- Design theme cards (dark mode) -- */ [data-theme="dark-mode"] .design-theme-card { border-color: #44403c; background: #292524; } [data-theme="dark-mode"] .design-theme-card:hover { border-color: #57534e; } [data-theme="dark-mode"] .design-theme-card:has(.design-theme-radio:checked) { border-color: #faf8f5; box-shadow: 0 0 0 1px #faf8f5; } [data-theme="dark-mode"] .design-theme-name { color: #faf8f5; } [data-theme="dark-mode"] .design-theme-desc { color: #78716c; } [data-theme="dark-mode"] .design-theme-preview { border-color: #44403c; } /* ── Settings section tokens (covers account, billing, scheduling, jobtypes, availability, notifications, gcal, ai) ── */ [data-theme="dark-mode"] .acct-wrap { --acct-card-bg: #292524; --acct-border: #44403c; --acct-border-light: #292524; --acct-text-primary: #faf8f5; --acct-text-secondary: #a8a29e; --acct-text-muted: #78716c; --acct-hover-bg: #1c1917; } [data-theme="dark-mode"] .billing-wrap, [data-theme="dark-mode"] [data-settings-section="settings-billing"] { --bill-card-bg: #292524; --bill-border: #44403c; --bill-border-light: #292524; --bill-text-primary: #faf8f5; --bill-text-secondary: #a8a29e; --bill-text-muted: #78716c; --bill-hover-bg: #1c1917; --bill-green-bg: #1a2e1a; --bill-blue-light: #1e293b; } [data-theme="dark-mode"] [data-settings-section="settings-scheduling"] { --sched-card-bg: #292524; --sched-border: #44403c; --sched-border-light: #292524; --sched-text-primary: #faf8f5; --sched-text-secondary: #a8a29e; --sched-text-muted: #78716c; --sched-hover-bg: #1c1917; --sched-green-bg: #1a2e1a; } [data-theme="dark-mode"] [data-settings-section="settings-jobtypes"] { --jtype-card-bg: #292524; --jtype-border: #44403c; --jtype-border-light: #292524; --jtype-text-primary: #faf8f5; --jtype-text-secondary: #a8a29e; --jtype-text-muted: #78716c; --jtype-hover-bg: #1c1917; } [data-theme="dark-mode"] [data-settings-section="settings-booking"] { --avail-card-bg: #292524; --avail-border: #44403c; --avail-border-light: #292524; --avail-text-primary: #faf8f5; --avail-text-secondary: #a8a29e; --avail-text-muted: #78716c; --avail-hover-bg: #1c1917; } [data-theme="dark-mode"] [data-settings-section="settings-notifications"] { --notif-card-bg: #292524; --notif-border: #44403c; --notif-border-light: #292524; --notif-text-primary: #faf8f5; --notif-text-secondary: #a8a29e; --notif-text-muted: #78716c; --notif-hover-bg: #1c1917; } [data-theme="dark-mode"] [data-settings-section="settings-google-calendar"] { --gcal-card-bg: #292524; --gcal-border: #44403c; --gcal-border-light: #292524; --gcal-text-primary: #faf8f5; --gcal-text-secondary: #a8a29e; --gcal-text-muted: #78716c; --gcal-hover-bg: #1c1917; } [data-theme="dark-mode"] [data-settings-section="settings-ai"] { --bsms-card-bg: #292524; --bsms-border: #44403c; --bsms-border-light: #292524; --bsms-text-primary: #faf8f5; --bsms-text-secondary: #a8a29e; --bsms-text-muted: #78716c; --bsms-hover-bg: #1c1917; } /* ── Settings shared: button hover overrides ── */ [data-theme="dark-mode"] .acct-btn-primary:hover, [data-theme="dark-mode"] .billing-btn-primary:hover { background: #e7e5e4 !important; } [data-theme="dark-mode"] .acct-btn-secondary:hover, [data-theme="dark-mode"] .billing-btn-outline:hover, [data-theme="dark-mode"] .acct-btn-signout:hover { background: #1c1917 !important; border-color: #57534e !important; } [data-theme="dark-mode"] .acct-btn-danger:hover, [data-theme="dark-mode"] .gcal-btn-disconnect:hover { background: #292524 !important; } [data-theme="dark-mode"] .bsms-badge-paused { color: #fbbf24 !important; background: #292524 !important; } /* ── Settings heading area ── */ [data-theme="dark-mode"] .settings-section-header h2 { color: #faf8f5; } [data-theme="dark-mode"] .settings-section-header p { color: #a8a29e; } [data-theme="dark-mode"] .settings-nav-divider { background: #44403c; } /* ── Payments page tokens ── */ [data-theme="dark-mode"] .pay-page { --pay-text-primary: #faf8f5; --pay-text-secondary: #a8a29e; --pay-text-muted: #78716c; --pay-border: #44403c; --pay-border-light: #292524; --pay-hover-bg: #1c1917; color: #e7e5e4; } [data-theme="dark-mode"] .pay-setup-btn { background: #faf8f5 !important; color: #1c1917 !important; } [data-theme="dark-mode"] .pay-setup-btn:hover { background: #e7e5e4 !important; } [data-theme="dark-mode"] .pay-setup-step-num { background: #faf8f5; color: #1c1917; } [data-theme="dark-mode"] .pay-setup-steps { border-top-color: #44403c; } [data-theme="dark-mode"] .pay-connect-badge--incomplete { background: #292524; border-color: #44403c; color: #fbbf24; } [data-theme="dark-mode"] .pay-connect-badge--restricted { background: #292524; border-color: #44403c; } /* ── Dashboard tokens ── */ [data-theme="dark-mode"] .dash-page { --dash-text: #faf8f5; --dash-text-secondary: #a8a29e; --dash-text-muted: #78716c; --dash-border: #44403c; --dash-border-light: #292524; } [data-theme="dark-mode"] .dash-chart-tabs { background: #292524; } [data-theme="dark-mode"] .dash-chart-tab.active { background: #faf8f5; color: #1c1917; } [data-theme="dark-mode"] .dash-chart-tab { color: #a8a29e; } [data-theme="dark-mode"] .dash-today-row:hover, [data-theme="dark-mode"] .dash-lead-row:hover, [data-theme="dark-mode"] .dash-conv-item:hover, [data-theme="dark-mode"] .dash-week-slot:hover, [data-theme="dark-mode"] .dash-btn-dismiss:hover { background: #1c1917; } [data-theme="dark-mode"] .dash-btn-outline { background: #292524; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .dash-btn-outline:hover { background: #1c1917; } [data-theme="dark-mode"] .dash-week-day.is-today { background: rgba(255,255,255,0.03); } [data-theme="dark-mode"] .dash-week-day-badge.has-jobs { background: #1a2e1a; color: #4ade80; } [data-theme="dark-mode"] .dash-week-day-badge.at-capacity { background: #2e2410; color: #fbbf24; } [data-theme="dark-mode"] .dash-sms-bar { background: #44403c; } [data-theme="dark-mode"] .dash-sms-fill { background: #faf8f5; } [data-theme="dark-mode"] .setup-banner { background: #292524 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .setup-banner div[style*="background: white"], [data-theme="dark-mode"] .setup-banner div[style*="background:white"] { background: #1c1917 !important; border-color: #44403c !important; color: #e7e5e4 !important; } [data-theme="dark-mode"] .setup-banner div[style*="background: var(--gray-100)"] { background: #44403c !important; border-color: #44403c !important; color: #e7e5e4 !important; } [data-theme="dark-mode"] .dash-lead-status-pill { border-color: #44403c; } [data-theme="dark-mode"] .dash-kpi-grid { border-color: #44403c; } [data-theme="dark-mode"] .dash-kpi-card { background: transparent; border-color: #44403c; } [data-theme="dark-mode"] .dash-card { background: transparent; border-color: #44403c; } /* ── KPI cards (styles.css base) ── */ [data-theme="dark-mode"] .kpi-grid { border-color: #44403c; } [data-theme="dark-mode"] .kpi-card { background: #292524; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .kpi-value { color: #faf8f5; } [data-theme="dark-mode"] .kpi-label { color: #78716c; } /* ── Tables ── */ [data-theme="dark-mode"] table { color: #e7e5e4; } [data-theme="dark-mode"] th { color: #a8a29e; border-color: #44403c; } [data-theme="dark-mode"] td { border-color: #44403c; } [data-theme="dark-mode"] tr:hover td { background: #292524; } /* ── Toggles & switches ── */ [data-theme="dark-mode"] .toggle-slider { background: #44403c; } [data-theme="dark-mode"] .slider { background: #44403c; } [data-theme="dark-mode"] .toggle input:checked + .toggle-slider { background: #faf8f5; } [data-theme="dark-mode"] .toggle input:checked + .toggle-slider:before { background: #1c1917; } [data-theme="dark-mode"] .switch input:checked + .slider { background: #c2714a; } /* ── Badges ── */ [data-theme="dark-mode"] .badge-gray { background: #292524; color: #a8a29e; } [data-theme="dark-mode"] .badge-primary { background: rgba(194,113,74,0.15); color: #c2714a; } [data-theme="dark-mode"] .badge-success { background: #1a2e1a; color: #4ade80; } [data-theme="dark-mode"] .badge-warning { background: #2e2410; color: #fbbf24; } [data-theme="dark-mode"] .badge-error { background: #2e1a1a; color: #f87171; } [data-theme="dark-mode"] .badge-info { background: rgba(194,113,74,0.15); color: #c2714a; } [data-theme="dark-mode"] .badge-outline { border-color: #44403c; color: #a8a29e; } [data-theme="dark-mode"] .badge-outline.active { background: rgba(194,113,74,0.1); border-color: #c2714a; color: #c2714a; } /* ── Status tags ── */ [data-theme="dark-mode"] .status-tag.new { background: #1e293b; color: #93c5fd; } [data-theme="dark-mode"] .status-tag.responded { background: rgba(194,113,74,0.15); color: #c2714a; } [data-theme="dark-mode"] .status-tag.booked, [data-theme="dark-mode"] .status-tag.won { background: #1a2e1a; color: #4ade80; } [data-theme="dark-mode"] .status-tag.lost { background: #2e1a1a; color: #f87171; } [data-theme="dark-mode"] .tag { background: #292524; color: #a8a29e; } [data-theme="dark-mode"] .tag.success { background: #1a2e1a; color: #4ade80; } [data-theme="dark-mode"] .tag.warning { background: #2e2410; color: #fbbf24; } [data-theme="dark-mode"] .tag.error { background: #2e1a1a; color: #f87171; } /* ── Toasts ── */ [data-theme="dark-mode"] .toast { background: #292524; box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px #44403c; } [data-theme="dark-mode"] .toast-title { color: #faf8f5; } [data-theme="dark-mode"] .toast-message { color: #a8a29e; } [data-theme="dark-mode"] .toast-close { color: #78716c; } /* ── Empty states ── */ [data-theme="dark-mode"] .empty-state-icon { background: #292524; } [data-theme="dark-mode"] .empty-state h3 { color: #faf8f5; } [data-theme="dark-mode"] .empty-state p { color: #a8a29e; } /* ── Input premium (styles.css) ── */ [data-theme="dark-mode"] .input-premium { background: #1c1917; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .input-premium:hover { border-color: #57534e; } [data-theme="dark-mode"] .input-premium:disabled { background: #292524; color: #78716c; } /* ── Quick actions ── */ [data-theme="dark-mode"] .quick-action { background: #292524; } [data-theme="dark-mode"] .quick-action:hover { background: #1c1917; } [data-theme="dark-mode"] .quick-action-content h4 { color: #faf8f5; } [data-theme="dark-mode"] .quick-action-content p { color: #a8a29e; } /* ── Conversations (base + fix) ── */ [data-theme="dark-mode"] .conv-layout { background: #1a1816; border-color: #44403c; } [data-theme="dark-mode"] .conv-list { background: #1a1816; } [data-theme="dark-mode"] .conv-chat { background: #1a1816; } [data-theme="dark-mode"] .conv-chat-header { background: #1a1816; border-bottom-color: #44403c; } [data-theme="dark-mode"] .conv-session-bar { background: #292524; border-color: #44403c; } [data-theme="dark-mode"] .conv-session-tab { background: #292524; border-color: #44403c; color: #a8a29e; } [data-theme="dark-mode"] .conv-session-tab.active { background: #1c1917; color: #faf8f5; } [data-theme="dark-mode"] .conv-item:hover, [data-theme="dark-mode"] .conv-list-item:hover { background: #292524; } [data-theme="dark-mode"] .conv-item.active { background: #292524; } [data-theme="dark-mode"] .conv-item, [data-theme="dark-mode"] .conv-list-item { border-color: #44403c; } [data-theme="dark-mode"] .conv-page-title, [data-theme="dark-mode"] .conv-item-name, [data-theme="dark-mode"] .conv-chat-header-name { color: #faf8f5; } [data-theme="dark-mode"] .conv-page-subtitle, [data-theme="dark-mode"] .conv-item-preview { color: #a8a29e; } [data-theme="dark-mode"] .conv-bubble-ai { background: #292524; color: #e7e5e4; } [data-theme="dark-mode"] .conv-bubble-customer { background: #1c1917; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .conv-rich-confirm { background: #292524; border-color: #44403c; } [data-theme="dark-mode"] .conv-search-input { background: #1c1917; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .conv-header-action { background: #292524; border-color: #44403c; color: #a8a29e; } [data-theme="dark-mode"] .conv-empty-state { border-color: #44403c; } [data-theme="dark-mode"] .conv-empty-state h3 { color: #faf8f5; } [data-theme="dark-mode"] .conv-empty-state p { color: #a8a29e; } [data-theme="dark-mode"] .conv-empty-btn { border-color: #44403c; color: #a8a29e; } [data-theme="dark-mode"] .conv-empty-btn:hover { background: #292524; } [data-theme="dark-mode"] .conv-load-more-btn { border-color: #44403c; color: #a8a29e; } [data-theme="dark-mode"] .conv-load-more-btn:hover { background: #292524; } [data-theme="dark-mode"] .conv-count { background: #292524; color: #a8a29e; } [data-theme="dark-mode"] .conv-date-sep span { background: #1a1816; border-color: #44403c; color: #78716c; } [data-theme="dark-mode"] .conv-read-only-footer { background: #1a1816; border-top-color: #44403c; } [data-theme="dark-mode"] .conv-unread-dot { border-color: #1a1816; } /* ── Booking Requests ── */ [data-theme="dark-mode"] .br-page-title { color: #faf8f5; } [data-theme="dark-mode"] .br-page-subtitle { color: #a8a29e; } [data-theme="dark-mode"] .br-card { background: #292524; border-color: #44403c; } [data-theme="dark-mode"] .br-card-name { color: #faf8f5; } [data-theme="dark-mode"] .br-card-meta { color: #a8a29e; } [data-theme="dark-mode"] .br-info-item { color: #d6d3d1; } [data-theme="dark-mode"] .br-notes { background: #1c1917; border-color: #44403c; } [data-theme="dark-mode"] .br-notes-text { color: #d6d3d1; } [data-theme="dark-mode"] .br-notes-label { color: #a8a29e; } [data-theme="dark-mode"] .br-card-footer { border-top-color: #44403c; background: #1c1917; } [data-theme="dark-mode"] .br-empty-title { color: #a8a29e; } [data-theme="dark-mode"] .br-empty-desc { color: #78716c; } [data-theme="dark-mode"] .br-filter-count { background: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .br-badge--new { background: #1e293b; color: #93c5fd; } [data-theme="dark-mode"] .br-badge--responded { background: rgba(194,113,74,0.15); color: #c2714a; } [data-theme="dark-mode"] .br-badge--booked { background: #1a2e1a; color: #4ade80; } [data-theme="dark-mode"] .br-badge--won { background: #1a2e1a; color: #4ade80; } [data-theme="dark-mode"] .br-badge--lost { background: #2e1a1a; color: #f87171; } [data-theme="dark-mode"] .br-badge--rescheduled { background: #291e3b; color: #c084fc; } [data-theme="dark-mode"] .br-badge--cancelled { background: #292524; color: #a8a29e; } [data-theme="dark-mode"] .br-transcript-bubble--user { background: #292524; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .br-transcript-bubble--bot { background: #1c1917; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .br-reschedule-banner { background: #291e3b; border-color: #44403c; color: #c084fc; } /* ── Calendar page ── */ [data-theme="dark-mode"] .cal-view-tabs { border-bottom-color: #44403c; } [data-theme="dark-mode"] .cal-view-tab.active { color: #faf8f5; } [data-theme="dark-mode"] .cal-filter-tab:hover { background: rgba(255,255,255,0.04); } [data-theme="dark-mode"] .cal-filter-tab.active { background: rgba(255,255,255,0.06); } [data-theme="dark-mode"] .cal-fixed-cell { background: #1a1816; border-color: #44403c; } [data-theme="dark-mode"] .cal-fixed-cell:hover { background: #292524; } [data-theme="dark-mode"] .cal-fixed-cell.empty { background: #1c1917; } [data-theme="dark-mode"] .cal-fixed-cell.today { background: #292524; border-color: #faf8f5; } [data-theme="dark-mode"] .cal-booking-chip:hover { background: #292524; } [data-theme="dark-mode"] .cal-chip-time { color: #faf8f5; } [data-theme="dark-mode"] .cal-day-popup-content { background: #292524; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .cal-popup-job { background: #1c1917; } [data-theme="dark-mode"] .cal-popup-job:hover { background: #292524; } [data-theme="dark-mode"] .cal-legend { color: #a8a29e; } [data-theme="dark-mode"] .cal-header { border-bottom-color: #44403c; } [data-theme="dark-mode"] .cal-day-number { color: #e7e5e4; } [data-theme="dark-mode"] .booking-list-item { border-color: #44403c; } [data-theme="dark-mode"] .booking-item { background: #292524; } [data-theme="dark-mode"] .bdp-alert-blue { background: #292524; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .bdp-card { border-color: #44403c; } [data-theme="dark-mode"] .bdp-msg-ai .bdp-msg-bubble { background: #292524; border-color: #44403c; color: #e7e5e4; } /* ── Calendar grid ── */ [data-theme="dark-mode"] .calendar-grid { border-color: #44403c; } [data-theme="dark-mode"] .calendar-day { background: #1a1816; border-color: #44403c; } [data-theme="dark-mode"] .calendar-day-empty { background: #1c1917; } [data-theme="dark-mode"] .calendar-day-today { background: #292524; } [data-theme="dark-mode"] .calendar-day-number { color: #e7e5e4; } [data-theme="dark-mode"] .calendar-booking-more { background: #292524; color: #a8a29e; } /* ── Chat bubbles (styles.css base) ── */ [data-theme="dark-mode"] .chat-bubble.incoming { background: #292524; color: #e7e5e4; } [data-theme="dark-mode"] .chat-bubble.ai { background: #292524; color: #e7e5e4; } [data-theme="dark-mode"] .conversation-item:hover { background: #292524; } [data-theme="dark-mode"] .conversation-item.active { background: rgba(194,113,74,0.1); } [data-theme="dark-mode"] .conversation-name { color: #faf8f5; } [data-theme="dark-mode"] .conversation-preview { color: #a8a29e; } /* ── Connection status ── */ [data-theme="dark-mode"] .connection-status.live { background: #1a2e1a; color: #4ade80; } [data-theme="dark-mode"] .connection-status.reconnecting { background: #2e2410; color: #fbbf24; } [data-theme="dark-mode"] .connection-status.offline { background: #292524; color: #a8a29e; } /* ── Skeleton loaders ── */ [data-theme="dark-mode"] .skeleton { background: linear-gradient(90deg, #292524 25%, #44403c 50%, #292524 75%) !important; background-size: 200% 100% !important; } /* ── Settings help drawer ── */ [data-theme="dark-mode"] .settings-help-drawer { background: #292524; border-color: #44403c; } [data-theme="dark-mode"] .settings-help-drawer-header { border-bottom-color: #44403c; } [data-theme="dark-mode"] .settings-help-overlay { background: rgba(0,0,0,0.5); } [data-theme="dark-mode"] .sh-assistant .sh-bubble { background: #1c1917; border-color: #44403c; color: #a8a29e; } [data-theme="dark-mode"] .sh-bubble { color: #a8a29e; } [data-theme="dark-mode"] .sh-tips li { color: #a8a29e; } /* ── Analytics period tabs ── */ [data-theme="dark-mode"] .analytics-period-tabs { background: #292524; } [data-theme="dark-mode"] .analytics-tab.active { background: #1c1917; color: #faf8f5; } /* ── Heading area (page headers in main content) ── */ [data-theme="dark-mode"] .heading-area h1 { color: #faf8f5; } [data-theme="dark-mode"] .heading-area p { color: #a8a29e; } /* ── Btn primary inversion ── */ [data-theme="dark-mode"] .btn-primary { background: #faf8f5 !important; color: #1c1917 !important; } [data-theme="dark-mode"] .btn-primary:hover { background: #e7e5e4 !important; } /* ── Scrollbars ── */ [data-theme="dark-mode"] ::-webkit-scrollbar-track { background: #1a1816; } [data-theme="dark-mode"] ::-webkit-scrollbar-thumb { background: #44403c; } /* ── Sidebar logo invert ── */ [data-theme="dark-mode"] .sidebar-logo-full, [data-theme="dark-sidebar"] .sidebar-logo-full { filter: invert(1); } /* ── Primary buttons with hardcoded color:#fff (all settings sections) ── */ [data-theme="dark-mode"] .gcal-btn-connect, [data-theme="dark-mode"] .bsms-btn-primary, [data-theme="dark-mode"] .avail-btn-primary, [data-theme="dark-mode"] .sched-btn-primary, [data-theme="dark-mode"] .notif-btn-primary, [data-theme="dark-mode"] .billing-btn-primary { color: #1c1917 !important; } [data-theme="dark-mode"] .gcal-step-num { color: #1c1917 !important; } [data-theme="dark-mode"] .gcal-dot-gray { background: #78716c; box-shadow: 0 0 0 3px rgba(120,113,108,0.2); } /* ── Blocked dates calendar (Availability) ── */ [data-theme="dark-mode"] #blocked-dates-calendar { background: #292524 !important; border-color: #44403c !important; color: #e7e5e4 !important; } [data-theme="dark-mode"] .bdc-label { color: #e7e5e4 !important; } [data-theme="dark-mode"] .bdc-toggle-dot { background: #e7e5e4 !important; } [data-theme="dark-mode"] .bdc-hint { color: #78716c !important; } [data-theme="dark-mode"] .bdc-nav-btn { background: #1c1917 !important; border-color: #44403c !important; color: #a8a29e !important; } [data-theme="dark-mode"] .bdc-month-label { color: #e7e5e4 !important; } [data-theme="dark-mode"] .bdc-weekday-row { border-bottom-color: #44403c !important; } [data-theme="dark-mode"] .bdc-weekday { color: #78716c !important; } [data-theme="dark-mode"] .bdc-grid { border-left-color: #44403c !important; } [data-theme="dark-mode"] .bdc-cell { background: #292524 !important; color: #e7e5e4 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .bdc-cell.bdc-empty { background: #1c1917 !important; } [data-theme="dark-mode"] .bdc-cell.bdc-past { background: #1c1917 !important; color: #57534e !important; } [data-theme="dark-mode"] .bdc-cell.bdc-blocked-all { background: #2e1a1a !important; color: #f87171 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .bdc-cell.bdc-blocked-partial { background: #2e2410 !important; color: #fbbf24 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .bdc-cell.bdc-today { box-shadow: inset 0 0 0 2px #c2714a !important; color: #e7e5e4 !important; } [data-theme="dark-mode"] .bdc-cell:hover:not(.bdc-empty):not(.bdc-past) { background: #1c1917 !important; } [data-theme="dark-mode"] .bdc-indicator-all { background: #f87171 !important; } [data-theme="dark-mode"] .bdc-indicator-partial { background: #fbbf24 !important; } [data-theme="dark-mode"] .bdc-summary { border-top-color: #44403c !important; } [data-theme="dark-mode"] .bdc-summary-title { color: #a8a29e !important; } [data-theme="dark-mode"] .bdc-pill-allday { background: #2e1a1a !important; border-color: #44403c !important; } [data-theme="dark-mode"] .bdc-pill-allday .bdc-pill-text { color: #f87171 !important; } [data-theme="dark-mode"] .bdc-pill-allday .bdc-pill-remove { color: #f87171 !important; } [data-theme="dark-mode"] .bdc-pill-partial { background: #2e2410 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .bdc-pill-partial .bdc-pill-text { color: #fbbf24 !important; } [data-theme="dark-mode"] .bdc-pill-partial .bdc-pill-remove { color: #fbbf24 !important; } [data-theme="dark-mode"] .bdc-slot { background: #1c1917 !important; border-color: #44403c !important; color: #e7e5e4 !important; } /* ── Working hours rows (Availability) ── */ [data-theme="dark-mode"] .wh-main { background: #292524 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .wh-main.wh-off { background: #1c1917 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .wh-day { color: #e7e5e4 !important; } [data-theme="dark-mode"] .wh-day.wh-day-off, [data-theme="dark-mode"] .wh-main.wh-off .wh-day { color: #57534e !important; } [data-theme="dark-mode"] .wh-ext-panel { background: #1c1917 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .wh-select { background: #1c1917 !important; border-color: #44403c !important; color: #e7e5e4 !important; } [data-theme="dark-mode"] .wh-ext-panel .wh-select { background: #292524 !important; } [data-theme="dark-mode"] .wh-to { color: #78716c !important; } [data-theme="dark-mode"] .wh-ext-label { color: #78716c !important; } /* ── Settings jump buttons ── */ [data-theme="dark-mode"] .settings-jump-btn { background: #292524 !important; border-color: #44403c !important; color: #a8a29e !important; } [data-theme="dark-mode"] .settings-jump-btn:hover { background: #1c1917 !important; } /* ── Logo crop modal ── */ [data-theme="dark-mode"] .logo-crop-modal-inner { background: #292524 !important; } /* ── Billing stat boxes ── */ [data-theme="dark-mode"] .billing-stat-box { background: #292524 !important; border-color: #44403c !important; } [data-theme="dark-mode"] #billing-update-card-el { background: #292524 !important; border-color: #44403c !important; } /* ── Scheduling range slider ── */ [data-theme="dark-mode"] .sched-range { background: #44403c; } /* ── Job Types cards & edit form ── */ [data-theme="dark-mode"] .jt-card { background: #292524 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .jt-card-header:hover { background: #1c1917 !important; } [data-theme="dark-mode"] .jt-card-name { color: #faf8f5; } [data-theme="dark-mode"] .jt-card-summary { color: #78716c; } [data-theme="dark-mode"] .jt-edit-panel { background: #1c1917 !important; border-top-color: #44403c !important; } [data-theme="dark-mode"] .jt-edit-label { color: #e7e5e4; } [data-theme="dark-mode"] .jt-edit-toggle { color: #a8a29e; } [data-theme="dark-mode"] .jt-ai-pill.done { background: rgba(194,113,74,0.15); color: #c2714a; border-color: rgba(194,113,74,0.3); } [data-theme="dark-mode"] .jt-ai-pill.pending { background: #292524; color: #78716c; border-color: #44403c; } [data-theme="dark-mode"] .jt-card-ai-badge.ready { background: rgba(194,113,74,0.15); border-color: rgba(194,113,74,0.25); } [data-theme="dark-mode"] .jt-card-ai-badge.off { background: #292524; border-color: #44403c; } [data-theme="dark-mode"] .jt-edit-cancel { color: #78716c; } [data-theme="dark-mode"] .jt-edit-cancel:hover { color: #faf8f5; background: #292524; } [data-theme="dark-mode"] .jt-edit-delete:hover { background: #2e1a1a; } [data-theme="dark-mode"] .jt-info-btn { background: #292524 !important; border-color: #44403c !important; color: #78716c !important; } [data-theme="dark-mode"] .jt-info-btn:hover { background: #1c1917 !important; } [data-theme="dark-mode"] .jt-info-drop { background: #1c1917; color: #a8a29e; border-color: #44403c; } [data-theme="dark-mode"] .jt-edit-divider { border-top-color: #44403c; } [data-theme="dark-mode"] .jt-edit-actions { border-top-color: #44403c; } [data-theme="dark-mode"] .jt-ai-accordion-header { background: #292524; border-color: #44403c; color: #a8a29e; } [data-theme="dark-mode"] .jt-edit-input { background: #292524 !important; border-color: #44403c !important; color: #e7e5e4 !important; } [data-theme="dark-mode"] .jt-edit-select { background: #292524 !important; border-color: #44403c !important; color: #e7e5e4 !important; } [data-theme="dark-mode"] .jt-color-circle { border-color: #44403c; } /* ── Billing preview modal ── */ [data-theme="dark-mode"] .billing-preview-currency, [data-theme="dark-mode"] .billing-preview-amount { color: #faf8f5 !important; } [data-theme="dark-mode"] .billing-preview-feat { color: #a8a29e !important; } [data-theme="dark-mode"] .billing-preview-feat i { color: #e7e5e4 !important; } [data-theme="dark-mode"] #billing-update-card-error { background: #2e1a1a !important; border-color: #44403c !important; color: #f87171 !important; } /* ═══════════════════════════════════════════════ LOGIN PAGE — force light mode regardless of theme ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] #login-form .input-premium, [data-theme="dark-mode"] #login-form input[type="email"], [data-theme="dark-mode"] #login-form input[type="password"], [data-theme="dark-mode"] #login-form input[type="text"] { background: #ffffff !important; border-color: #e5e5e5 !important; color: #171717 !important; } [data-theme="dark-mode"] #login-form .input-premium:focus, [data-theme="dark-mode"] #login-form input:focus { border-color: #1c1917 !important; box-shadow: 0 0 0 2px rgba(28, 25, 23, 0.06) !important; } [data-theme="dark-mode"] #login-form .input-premium::placeholder, [data-theme="dark-mode"] #login-form input::placeholder { color: #a3a3a3 !important; } [data-theme="dark-mode"] #login-form label { color: #404040 !important; } [data-theme="dark-mode"] #login-form .btn-primary, [data-theme="dark-mode"] #login-submit-btn { background: #1c1917 !important; color: #ffffff !important; } [data-theme="dark-mode"] #login-form .btn-primary:hover, [data-theme="dark-mode"] #login-submit-btn:hover { background: #292524 !important; } [data-theme="dark-mode"] #login-form ~ div .btn-secondary, [data-theme="dark-mode"] [data-action="google-login"] { background: #ffffff !important; border-color: #e5e5e5 !important; color: #374151 !important; } [data-theme="dark-mode"] #login-form ~ div .btn-secondary:hover, [data-theme="dark-mode"] [data-action="google-login"]:hover { background: #f9fafb !important; } [data-theme="dark-mode"] .login-error { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; } /* Onboarding page — also force light */ [data-theme="dark-mode"] .onb-step-card, [data-theme="dark-mode"] .onb-wrap { background: #ffffff !important; color: #171717 !important; } [data-theme="dark-mode"] .onb-wrap input, [data-theme="dark-mode"] .onb-wrap select, [data-theme="dark-mode"] .onb-wrap textarea, [data-theme="dark-mode"] .onb-wrap .input-premium { background: #ffffff !important; border-color: #e5e5e5 !important; color: #171717 !important; } [data-theme="dark-mode"] .onb-wrap label { color: #404040 !important; } /* ═══════════════════════════════════════════════ ACCOUNT — readonly input, logo crop modal ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] .acct-input-readonly { background: #1c1917 !important; } [data-theme="dark-mode"] .acct-input { background: var(--acct-card-bg) !important; border-color: var(--acct-border) !important; color: var(--acct-text-primary) !important; } [data-theme="dark-mode"] .acct-input:focus { border-color: #78716c !important; box-shadow: 0 0 0 2px rgba(120, 113, 108, 0.15) !important; } [data-theme="dark-mode"] .acct-input::placeholder { color: #57534e !important; } [data-theme="dark-mode"] .logo-crop-modal-inner div[style*="border-bottom"], [data-theme="dark-mode"] .logo-crop-modal-inner div[style*="border-top"] { border-color: #44403c !important; } /* ═══════════════════════════════════════════════ BILLING MODALS — dark mode ═══════════════════════════════════════════════ */ /* Plan preview / subscription modal backgrounds */ [data-theme="dark-mode"] .billing-plan-preview-modal, [data-theme="dark-mode"] .billing-sub-modal-inner { background: #292524 !important; color: #e7e5e4 !important; } [data-theme="dark-mode"] .billing-preview-divider { background: #44403c !important; } [data-theme="dark-mode"] .billing-preview-feat i, [data-theme="dark-mode"] .billing-modal-feat i { color: #e7e5e4 !important; } [data-theme="dark-mode"] .billing-modal-feat { color: #a8a29e !important; } [data-theme="dark-mode"] .billing-modal-plan-name { color: #faf8f5 !important; } [data-theme="dark-mode"] .billing-modal-plan-price { color: #faf8f5 !important; } [data-theme="dark-mode"] .billing-modal-plan-period { color: #78716c !important; } [data-theme="dark-mode"] .billing-modal-note { color: #78716c !important; } [data-theme="dark-mode"] .billing-modal-done-btn { background: #faf8f5 !important; color: #1c1917 !important; } [data-theme="dark-mode"] .billing-modal-cancel-btn { background: #44403c !important; color: #a8a29e !important; } [data-theme="dark-mode"] .billing-modal-cancel-btn:hover { background: #57534e !important; } [data-theme="dark-mode"] .billing-spinner { border: 2px solid #44403c !important; border-top-color: #faf8f5 !important; } [data-theme="dark-mode"] #billing-update-card-loading { color: #78716c !important; } [data-theme="dark-mode"] .billing-preview-cta { background: #faf8f5 !important; color: #1c1917 !important; } [data-theme="dark-mode"] .billing-preview-period { color: #78716c !important; } /* ═══════════════════════════════════════════════ GENERAL MODALS ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] .modal-header { border-bottom-color: #44403c !important; } [data-theme="dark-mode"] .modal-title { color: #faf8f5 !important; } [data-theme="dark-mode"] .modal-close { color: #78716c !important; } [data-theme="dark-mode"] .modal-close:hover { color: #a8a29e !important; } /* ═══════════════════════════════════════════════ SERVICE AREA TAGS ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] .service-area-tag { background: #292524 !important; border: 1px solid #44403c !important; color: #e7e5e4 !important; } [data-theme="dark-mode"] .service-area-tag button { color: #78716c !important; } /* ═══════════════════════════════════════════════ DESIGN / BOOKING PAGE SETTINGS ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] .settings-card { background: transparent !important; border-color: #44403c !important; } [data-theme="dark-mode"] .settings-card div[style*="color:var(--gray-600)"], [data-theme="dark-mode"] .settings-card div[style*="color:var(--gray-500)"] { color: #a8a29e !important; } [data-theme="dark-mode"] .settings-card div[style*="color:var(--gray-400)"] { color: #78716c !important; } [data-theme="dark-mode"] .settings-card div[style*="color:var(--gray-900)"] { color: #faf8f5 !important; } [data-theme="dark-mode"] .settings-card div[style*="border-top:1px solid var(--gray-100)"] { border-top-color: #44403c !important; } [data-theme="dark-mode"] .settings-card i[style*="color:var(--gray-500)"], [data-theme="dark-mode"] .settings-card i[style*="color:var(--gray-400)"] { color: #78716c !important; } [data-theme="dark-mode"] .settings-card input[type="color"] { border-color: #44403c !important; } [data-theme="dark-mode"] #color-preview-bar { border-color: #44403c !important; } /* ═══════════════════════════════════════════════ CHECKOUT MODAL (SMS credits) ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] .checkout-modal-inner, [data-theme="dark-mode"] #checkout-modal > div:not(.checkout-backdrop) { background: #292524 !important; color: #e7e5e4 !important; } [data-theme="dark-mode"] #checkout-title { color: #faf8f5 !important; } [data-theme="dark-mode"] #checkout-summary { color: #a8a29e !important; } [data-theme="dark-mode"] #checkout-error { background: #2e1a1a !important; color: #f87171 !important; } /* ═══════════════════════════════════════════════ SETTINGS HELP DRAWER ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] .settings-help-drawer { background: #292524 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .settings-help-drawer div[style*="color:var(--gray-900)"] { color: #faf8f5 !important; } [data-theme="dark-mode"] .settings-help-drawer div[style*="color:var(--gray-500)"] { color: #78716c !important; } [data-theme="dark-mode"] .sh-bubble { color: #a8a29e !important; } /* ═══════════════════════════════════════════════ NEW BOOKING — Dark Mode ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] .nb-select { background: #1c1917; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .nb-textarea { background: #1c1917; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .nb-textarea::placeholder, [data-theme="dark-mode"] .nb-select::placeholder { color: #78716c; } [data-theme="dark-mode"] .nb-conf-details { background: #1c1917; } [data-theme="dark-mode"] .nb-conf-title { color: #faf8f5; } [data-theme="dark-mode"] .nb-conf-subtitle { color: #a8a29e; } [data-theme="dark-mode"] .nb-conf-row { color: #e7e5e4; } [data-theme="dark-mode"] .nb-tl-bar-hint { color: #78716c; } [data-theme="dark-mode"] .nb-tl-hours-label { color: #78716c; } [data-theme="dark-mode"] .nb-tl-legend { color: #a8a29e; } [data-theme="dark-mode"] .nb-tl-track { background: #1c1917; } [data-theme="dark-mode"] .nb-tl-slot-free { background: #292524; border-color: #44403c; } [data-theme="dark-mode"] .nb-tl-slot-booked { background: #44403c; } [data-theme="dark-mode"] .nb-phone-error { color: #f87171; } /* ═══════════════════════════════════════════════ BOOKING REQUESTS — Dark Mode ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] .br-filter-bar { border-bottom-color: #44403c; } [data-theme="dark-mode"] .br-filter-tab { color: #78716c; } [data-theme="dark-mode"] .br-filter-tab:hover { color: #e7e5e4; } [data-theme="dark-mode"] .br-filter-tab.active { color: #faf8f5; border-bottom-color: #faf8f5; } [data-theme="dark-mode"] .br-filter-tab.active .br-filter-count { background: #faf8f5; color: #1c1917; } [data-theme="dark-mode"] .br-card:hover { border-color: #57534e; } [data-theme="dark-mode"] .br-avatar { background: #44403c; color: #faf8f5; } [data-theme="dark-mode"] .br-info-item i, [data-theme="dark-mode"] .br-info-item svg { color: #a8a29e; } [data-theme="dark-mode"] .br-info-item a { color: #c2714a; } [data-theme="dark-mode"] .br-notes { background: #1c1917; border-color: #44403c; } [data-theme="dark-mode"] .br-source-row { color: #a8a29e; } [data-theme="dark-mode"] .br-source-item[style*="color:#111"] { color: #e7e5e4 !important; } [data-theme="dark-mode"] .br-source-item[style*="color:#166534"] { color: #4ade80 !important; } [data-theme="dark-mode"] .br-card-footer { background: #1c1917; } [data-theme="dark-mode"] .br-card-footer .btn-ghost { color: #d6d3d1; } [data-theme="dark-mode"] .br-card-footer .btn-ghost:hover { background: #44403c; color: #faf8f5; } [data-theme="dark-mode"] .br-badge--confirmed { background: rgba(194,113,74,0.15); color: #c2714a; } [data-theme="dark-mode"] .br-badge--pending { background: rgba(251,191,36,0.15); color: #fbbf24; } [data-theme="dark-mode"] .br-badge--cancelled, [data-theme="dark-mode"] .br-badge--declined { background: rgba(239,68,68,0.15); color: #f87171; } [data-theme="dark-mode"] .br-badge--customer_cancelled { background: rgba(239,68,68,0.10); color: #f87171; } [data-theme="dark-mode"] .br-badge--completed { background: rgba(74,222,128,0.15); color: #4ade80; } [data-theme="dark-mode"] .br-badge--callback { background: rgba(194,113,74,0.15); color: #c2714a; } [data-theme="dark-mode"] .br-badge--noshow { background: rgba(251,191,36,0.12); color: #fbbf24; } [data-theme="dark-mode"] .br-badge--expired, [data-theme="dark-mode"] .br-badge--default { background: #292524; color: #a8a29e; } /* ═══════════════════════════════════════════════ CONVERSATIONS — Dark Mode Additions ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] .conv-list { border-right-color: #44403c; } [data-theme="dark-mode"] .conv-list::-webkit-scrollbar-thumb { background: #44403c; } [data-theme="dark-mode"] .conv-chat .chat-messages { background: #1c1917; } [data-theme="dark-mode"] .conv-chat .chat-messages::-webkit-scrollbar-thumb { background: #44403c; } [data-theme="dark-mode"] .conv-chat-header-sub { color: #78716c; } [data-theme="dark-mode"] .conv-item-time { color: #78716c; } [data-theme="dark-mode"] .conv-sender-label { color: #78716c; } [data-theme="dark-mode"] .conv-bubble-time { color: #78716c; } [data-theme="dark-mode"] .conv-rich-confirm-title { color: #c2714a; } [data-theme="dark-mode"] .conv-rich-confirm-time { color: #e7e5e4; } [data-theme="dark-mode"] .conv-status-pill, [data-theme="dark-mode"] .conv-status-pill > span { color: #78716c; } [data-theme="dark-mode"] .conv-status-done { color: #c2714a; } [data-theme="dark-mode"] .conv-empty-state { background: #1a1816; } [data-theme="dark-mode"] .conv-empty-chat { color: #78716c; } [data-theme="dark-mode"] .conv-empty-chat p { color: #78716c; } [data-theme="dark-mode"] .conv-empty-icon { color: #44403c; } [data-theme="dark-mode"] .conv-load-more-btn { background: #1a1816; } [data-theme="dark-mode"] .conv-back-btn { color: #a8a29e; } [data-theme="dark-mode"] .conv-back-btn:hover { background: #292524; } [data-theme="dark-mode"] .conv-session-bar { background: #1a1816; } [data-theme="dark-mode"] .conv-session-tab { background: transparent; } [data-theme="dark-mode"] .conv-session-tab.active { background: #292524; color: #faf8f5; border-color: #57534e; } [data-theme="dark-mode"] .conv-item.unread .conv-item-preview { color: #e7e5e4; } /* ═══════════════════════════════════════════════ CALENDAR / BOOKINGS — Dark Mode Additions ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] .cal-view-tab { color: #78716c; } [data-theme="dark-mode"] .cal-view-tab:hover { color: #e7e5e4; } [data-theme="dark-mode"] .cal-view-tab.active { color: #faf8f5; border-bottom-color: #faf8f5; } [data-theme="dark-mode"] .cal-sync-link { color: #78716c; } [data-theme="dark-mode"] .cal-sync-link:hover { color: #e7e5e4; } [data-theme="dark-mode"] .cal-filter-tab { color: #78716c; } [data-theme="dark-mode"] .cal-filter-tab:hover { color: #e7e5e4; } [data-theme="dark-mode"] .cal-filter-tab.active { color: #faf8f5; } [data-theme="dark-mode"] .cal-fixed-cell { background: #1a1816 !important; border-color: #44403c !important; } [data-theme="dark-mode"] .cal-fixed-cell:not(.empty):hover { background: #292524 !important; box-shadow: none !important; } [data-theme="dark-mode"] .cal-fixed-cell.empty { background: #1c1917 !important; } [data-theme="dark-mode"] .cal-fixed-cell.today { background: #292524 !important; border-color: #faf8f5 !important; } [data-theme="dark-mode"] .cal-fixed-cell.past { opacity: 0.5; } [data-theme="dark-mode"] .cal-day-header { color: #78716c; } [data-theme="dark-mode"] .cal-day-number { color: #e7e5e4 !important; } [data-theme="dark-mode"] .cal-day-number.is-today { background: #faf8f5 !important; color: #1c1917 !important; } [data-theme="dark-mode"] .cal-booking-chip { background: transparent; } [data-theme="dark-mode"] .cal-booking-chip:hover { background: #292524 !important; } [data-theme="dark-mode"] .cal-chip-time { color: #e7e5e4 !important; } [data-theme="dark-mode"] .cal-chip-name { color: #a8a29e; } [data-theme="dark-mode"] .cal-day-popup-content { background: #292524 !important; border-color: #44403c !important; color: #e7e5e4; } [data-theme="dark-mode"] .cal-popup-job { background: #1c1917 !important; } [data-theme="dark-mode"] .cal-popup-job:hover { background: #292524 !important; box-shadow: none !important; } [data-theme="dark-mode"] .cal-legend { color: #78716c !important; } [data-theme="dark-mode"] .cal-header { border-bottom-color: #44403c !important; } [data-theme="dark-mode"] .cal-month-title { color: #faf8f5; } [data-theme="dark-mode"] .cal-nav-btn { color: #a8a29e; border-color: #44403c; background: transparent; } [data-theme="dark-mode"] .cal-nav-btn:hover { background: #292524; color: #faf8f5; } [data-theme="dark-mode"] .cal-quick-btn { border-color: #44403c; background: transparent; color: #a8a29e; } [data-theme="dark-mode"] .cal-quick-btn:hover { background: #292524; color: #faf8f5; } [data-theme="dark-mode"] .booking-list-item { background: transparent !important; border-color: #44403c !important; } [data-theme="dark-mode"] .booking-list-item:hover { border-color: #57534e !important; box-shadow: none !important; } [data-theme="dark-mode"] .bli-time { color: #e7e5e4; } [data-theme="dark-mode"] .bli-time--past { color: #78716c; } [data-theme="dark-mode"] .bli-avatar { background: #44403c; color: #faf8f5; } [data-theme="dark-mode"] .bli-name { color: #faf8f5; } [data-theme="dark-mode"] .bli-name--past { color: #a8a29e; } [data-theme="dark-mode"] .bli-job { color: #a8a29e; } [data-theme="dark-mode"] .bli-address { color: #78716c; } [data-theme="dark-mode"] .bli-tag-deposit { background: #052e16; color: #86efac; border-color: #166534; } [data-theme="dark-mode"] .bli-tag-card { background: #292524; color: #e7e5e4; border-color: #44403c; } [data-theme="dark-mode"] .booking-item { background: #292524 !important; } [data-theme="dark-mode"] .kpi-card { background: transparent !important; border-color: #44403c !important; } [data-theme="dark-mode"] .cal-fixed-grid { border-color: #44403c; } [data-theme="dark-mode"] .bdp-card { background: transparent !important; border-color: #44403c !important; } [data-theme="dark-mode"] .bdp-alert-blue { background: #292524 !important; border-color: #44403c !important; color: #e7e5e4 !important; } /* ═══════════════════════════════════════════════ PAYMENTS — Dark Mode Additions ═══════════════════════════════════════════════ */ [data-theme="dark-mode"] .pay-setup-title { color: #faf8f5; } [data-theme="dark-mode"] .pay-setup-subtitle { color: #a8a29e; } [data-theme="dark-mode"] .pay-setup-status--warn, [data-theme="dark-mode"] .pay-setup-status--error { background: #292524; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .pay-setup-steps { border-top-color: #44403c; } [data-theme="dark-mode"] .pay-setup-steps-label { color: #78716c; } [data-theme="dark-mode"] .pay-setup-step-text { color: #a8a29e; } [data-theme="dark-mode"] .pay-setup-secure { color: #78716c; } [data-theme="dark-mode"] .pay-connect-card { border-bottom-color: #292524; } [data-theme="dark-mode"] .pay-connect-name { color: #faf8f5; } [data-theme="dark-mode"] .pay-connect-badge--disconnected { border-color: #44403c; color: #78716c; } [data-theme="dark-mode"] .pay-btn-outline { border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .pay-btn-outline:hover { background: #292524; border-color: #57534e; } [data-theme="dark-mode"] .pay-tx-icon--charge { background: rgba(74,222,128,0.12); color: #4ade80; } [data-theme="dark-mode"] .pay-tx-icon--refund { background: rgba(239,68,68,0.12); color: #f87171; } [data-theme="dark-mode"] .pay-tx-badge--refunded, [data-theme="dark-mode"] .pay-tx-badge--failed { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.2); color: #f87171; } [data-theme="dark-mode"] .pay-refund-btn { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.2); color: #f87171; } [data-theme="dark-mode"] .pay-refund-btn:hover { background: rgba(239,68,68,0.18); } [data-theme="dark-mode"] .pay-alert { border-bottom-color: #292524; } [data-theme="dark-mode"] .pay-alert-icon { background: rgba(239,68,68,0.12); color: #f87171; } [data-theme="dark-mode"] .pay-alert-title { color: #f87171; } [data-theme="dark-mode"] .pay-alert-desc { color: #fca5a5; } [data-theme="dark-mode"] .pay-modal { background: #292524; border: 1px solid #44403c; } [data-theme="dark-mode"] .pay-modal-icon { background: rgba(239,68,68,0.12); } [data-theme="dark-mode"] .pay-modal-cancel { background: #1c1917; border-color: #44403c; color: #e7e5e4; } [data-theme="dark-mode"] .pay-date-btn.active { background: #faf8f5; border-color: #faf8f5; color: #1c1917; } [data-theme="dark-mode"] .pay-empty-title { color: #faf8f5; } [data-theme="dark-mode"] .pay-empty-desc { color: #78716c; } [data-theme="dark-mode"] .pay-filter-btn.active { background: #faf8f5; border-color: #faf8f5; color: #1c1917; } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE HEADER — dark mode ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark-mode"] .mobile-header { background: #1a1816 !important; border-bottom-color: #44403c !important; } /* Hamburger icon has inline color: #1c1917 — override to light */ [data-theme="dark-mode"] .mobile-menu-btn i, [data-theme="dark-mode"] .mobile-menu-btn svg { color: #faf8f5 !important; } /* Invert black logo to white in mobile header */ [data-theme="dark-mode"] .mobile-header img { filter: invert(1); } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE BOTTOM NAV — dark mode ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark-mode"] .mobile-bottom-nav { background: #1a1816 !important; border-top-color: #44403c !important; } [data-theme="dark-mode"] .mobile-nav-btn { color: #78716c !important; } [data-theme="dark-mode"] .mobile-nav-btn.active { color: #faf8f5 !important; } [data-theme="dark-mode"] .mobile-nav-btn:active { background: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark-mode"] .mobile-nav-btn-add { color: #faf8f5 !important; } [data-theme="dark-mode"] .mobile-nav-btn-add:active { background: rgba(255, 255, 255, 0.06) !important; } /* Badge stays red — no change needed */ /* ═══════════════════════════════════════════════════════════════════════════ SIDEBAR BACKDROP — dark mode (slightly darker overlay) ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark-mode"] .sidebar-backdrop { background: rgba(0, 0, 0, 0.5); }