/* =========================== DARK-MODE.CSS Overrides CSS variables when [data-theme="dark"] is set on . Since all page CSS now uses centralized variables, this single block handles most of the theming. =========================== */ [data-theme="dark"] { /* Grays — inverted */ --color-gray-50: #111827; --color-gray-100: #1f2937; --color-gray-200: #374151; --color-gray-300: #4b5563; --color-gray-400: #9ca3af; --color-gray-500: #9ca3af; --color-gray-600: #d1d5db; --color-gray-700: #e5e7eb; --color-gray-800: #f3f4f6; --color-gray-900: #f9fafb; /* Semantic surfaces */ --surface-primary: #1a1a2e; --surface-secondary: #0f0f1a; --surface-tertiary: #1f2937; --surface-inset: #111827; --text-primary: #f9fafb; --text-secondary: #9ca3af; --text-tertiary: #e5e7eb; --text-muted: #6b7280; --border-default: #2d3348; --border-strong: #4b5563; --input-bg: #1f2937; --input-border: #374151; /* Status surfaces — translucent for dark */ --color-success-surface: rgba(16, 185, 129, 0.12); --color-danger-surface: rgba(239, 68, 68, 0.12); --color-warning-surface: rgba(245, 158, 11, 0.12); --color-info-surface: rgba(59, 130, 246, 0.12); --color-success-text: #6ee7b7; --color-success-border: rgba(16, 185, 129, 0.25); --color-danger-text: #fca5a5; --color-danger-border: rgba(239, 68, 68, 0.25); --color-warning-text: #fcd34d; --color-warning-border: rgba(245, 158, 11, 0.25); --color-info-text: #93c5fd; --color-info-border: rgba(59, 130, 246, 0.25); /* Overlay backgrounds */ --blur-overlay-bg: rgba(0, 0, 0, 0.5); /* Semantic color scales — dark variants */ --color-blue-50: rgba(59, 130, 246, 0.10); --color-blue-200: rgba(59, 130, 246, 0.25); --color-blue-700: #93c5fd; --color-green-50: rgba(16, 185, 129, 0.10); --color-green-200: rgba(16, 185, 129, 0.25); --color-green-700: #6ee7b7; --color-amber-50: rgba(245, 158, 11, 0.10); --color-amber-300: rgba(245, 158, 11, 0.30); --color-amber-700: #fcd34d; --color-red-50: rgba(239, 68, 68, 0.10); --color-red-200: rgba(239, 68, 68, 0.25); --color-red-600: #fca5a5; /* Transparent accent variants */ --color-primary-transparent: rgba(99, 102, 241, 0.15); --color-success-transparent: rgba(16, 185, 129, 0.15); --color-danger-transparent: rgba(239, 68, 68, 0.15); --color-warning-transparent: rgba(245, 158, 11, 0.15); --color-info-transparent: rgba(59, 130, 246, 0.15); /* Shadows — more opaque */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); /* Conversations aliases (now point to semantic vars via modern-styles) */ --primary-light: #312e81; --unread-indicator: #818cf8; color-scheme: dark; } /* ===== Form inputs (native elements don't inherit custom props) ===== */ /* Exclude .ai-chatbot-container — widget preview keeps its own theme */ [data-theme="dark"] input[type="text"]:not(.ai-chatbot-container *), [data-theme="dark"] input[type="email"]:not(.ai-chatbot-container *), [data-theme="dark"] input[type="password"]:not(.ai-chatbot-container *), [data-theme="dark"] input[type="number"]:not(.ai-chatbot-container *), [data-theme="dark"] input[type="url"]:not(.ai-chatbot-container *), [data-theme="dark"] input[type="tel"]:not(.ai-chatbot-container *), [data-theme="dark"] input[type="search"]:not(.ai-chatbot-container *), [data-theme="dark"] input[type="date"]:not(.ai-chatbot-container *), [data-theme="dark"] input[type="time"]:not(.ai-chatbot-container *), [data-theme="dark"] textarea:not(.ai-chatbot-container *), [data-theme="dark"] select:not(.ai-chatbot-container *) { background-color: var(--input-bg); color: var(--text-primary); border-color: var(--input-border); } [data-theme="dark"] input:not(.ai-chatbot-container *)::placeholder, [data-theme="dark"] textarea:not(.ai-chatbot-container *)::placeholder { color: var(--text-muted); } [data-theme="dark"] input:not(.ai-chatbot-container *):focus, [data-theme="dark"] textarea:not(.ai-chatbot-container *):focus, [data-theme="dark"] select:not(.ai-chatbot-container *):focus { border-color: var(--color-primary-light); } /* ===== Tables ===== */ [data-theme="dark"] table { border-color: var(--border-default); } [data-theme="dark"] th { background-color: var(--surface-tertiary); color: var(--text-tertiary); } [data-theme="dark"] td { border-color: var(--border-default); } [data-theme="dark"] tr:hover td { background-color: var(--color-primary-transparent); } /* ===== Dialogs / modals ===== */ [data-theme="dark"] .dialog-system-container { background-color: rgba(0, 0, 0, 0.7); } [data-theme="dark"] .downgrade-modal-overlay { background-color: rgba(0, 0, 0, 0.7); } /* ===== Scrollbar ===== */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-tertiary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--border-strong); } /* ===== Misc elements ===== */ [data-theme="dark"] hr { border-color: var(--border-default); } [data-theme="dark"] code { background-color: var(--surface-tertiary); color: var(--text-tertiary); } [data-theme="dark"] a:not([class]) { color: #818cf8; } /* ===== Calendar select with inline SVG bg ===== */ [data-theme="dark"] .pro-form-group select { background-color: var(--input-bg); } /* ===== Chatbot card feature chips ===== * The chip background, text, and border are translucent variants of each * channel's brand color so they read on the dark surface. */ [data-theme="dark"] .chatbot-card__chip--lead { background: rgba(245,158,11,0.12); color: #fcd34d; border-color: rgba(245,158,11,0.25); } [data-theme="dark"] .chatbot-card__chip--booking { background: rgba(16,185,129,0.12); color: #6ee7b7; border-color: rgba(16,185,129,0.25); } [data-theme="dark"] .chatbot-card__chip--sms { background: rgba(139,92,246,0.12); color: #c4b5fd; border-color: rgba(139,92,246,0.25); } [data-theme="dark"] .chatbot-card__chip--whatsapp { background: rgba(34,197,94,0.12); color: #86efac; border-color: rgba(34,197,94,0.25); } [data-theme="dark"] .chatbot-card__chip--call { background: rgba(59,130,246,0.12); color: #93c5fd; border-color: rgba(59,130,246,0.25); } [data-theme="dark"] .chatbot-card__chip--zapier { background: rgba(249,115,22,0.12); color: #fdba74; border-color: rgba(249,115,22,0.25); } [data-theme="dark"] .chatbot-card__chip--sheets { background: rgba(16,185,129,0.12); color: #6ee7b7; border-color: rgba(16,185,129,0.25); } [data-theme="dark"] .chatbot-card__chip--flow { background: rgba(99,102,241,0.12); color: #a5b4fc; border-color: rgba(99,102,241,0.25); } /* ===== Chatbot card activity / ping ===== */ [data-theme="dark"] .ping-active .chatbot-card__ping-dot { box-shadow: 0 0 0 2px rgba(34,197,94,0.2); } [data-theme="dark"] .ping-stale .chatbot-card__ping-dot { box-shadow: 0 0 0 2px rgba(245,158,11,0.2); } [data-theme="dark"] .ping-active { color: #86efac; } [data-theme="dark"] .ping-stale { color: #fcd34d; } [data-theme="dark"] .ping-none { color: #4b5563; } /* ===== Chatbot card status pills ===== * Status pills use the semantic surface vars (already inverted to translucent * tints in :root above) but two variants reference --color-primary directly, * which doesn't change between themes. Tweak text + dot to lighter shades so * they stay legible against the dark info surface. */ [data-theme="dark"] .chatbot-card__status.status-ready { color: #a5b4fc; } [data-theme="dark"] .chatbot-card__status.status-ready .chatbot-card__status-dot { background: #818cf8; } [data-theme="dark"] .chatbot-card__status.status-processing { color: #93c5fd; } [data-theme="dark"] .chatbot-card__status.status-processing .chatbot-card__status-dot { background: #93c5fd; } [data-theme="dark"] .chatbot-card__status.status-waiting { color: #fcd34d; } [data-theme="dark"] .chatbot-card__status.status-waiting .chatbot-card__status-dot { background: #fbbf24; } /* ===== Chatbot card hover (subtler in dark — borders are already light) ===== */ [data-theme="dark"] .chatbot-card:hover { border-color: var(--border-strong); } /* ===== Sidebar — match dark theme palette ===== */ [data-theme="dark"] { --sidebar-bg: #0d0d1a; --sidebar-border: #2d3348; --sidebar-text: #9ca3af; --sidebar-text-hover: #e5e7eb; --sidebar-section-label: #6b7280; } [data-theme="dark"] .sidebar-user-dropdown { background: #161625; border-color: #2d3348; } /* ===== Chatbot widget — always light, not affected by dark mode ===== */ [data-theme="dark"] .ai-chatbot-container { /* Grays — keep light-mode values */ --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; /* Semantic surfaces */ --surface-primary: #ffffff; --surface-secondary: #f9fafb; --surface-tertiary: #f3f4f6; --surface-inset: #f9fafb; --text-primary: #111827; --text-secondary: #6b7280; --text-tertiary: #374151; --text-muted: #9ca3af; --border-default: #e5e7eb; --border-strong: #d1d5db; --input-bg: #ffffff; --input-border: #d1d5db; /* Status surfaces */ --color-success-surface: #ecfdf5; --color-danger-surface: #fef2f2; --color-warning-surface: #fffbeb; --color-info-surface: #eff6ff; --color-success-text: #047857; --color-success-border: #bbf7d0; --color-danger-text: #b91c1c; --color-danger-border: #fecaca; --color-warning-text: #92400e; --color-warning-border: #fde68a; --color-info-text: #1d4ed8; --color-info-border: #bfdbfe; /* Transparent accent variants */ --color-primary-transparent: rgba(79, 70, 229, 0.1); --color-success-transparent: rgba(16, 185, 129, 0.1); --color-danger-transparent: rgba(239, 68, 68, 0.1); --color-warning-transparent: rgba(245, 158, 11, 0.1); --color-info-transparent: rgba(59, 130, 246, 0.1); /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Overlay */ --blur-overlay-bg: rgba(255, 255, 255, 0.7); color-scheme: light; }