/* * Kirana modern theme — dark glassmorphism + teal accent * Applied parallel to legacy style.css during progressive migration. * Scoped to .modern-shell class (or html.dark) to avoid legacy clashes. */ /* ---------- Base (dark mode first) ---------- */ /* !important used to beat Tailwind Play CDN utilities + legacy style.css rules that compete on specificity for body bg/color. Without this the dashboard paints light even though is set. */ html.dark body, html.dark body.modern-shell { background-color: #0d1117 !important; color: #e6edf3 !important; background-image: radial-gradient(circle at 20% 0%, rgba(20, 184, 166, 0.05) 0%, transparent 50%); background-attachment: fixed; } html.dark { color-scheme: dark; } /* Light mode base */ html:not(.dark) body.modern-shell { background-color: #f8fafc !important; color: #111827 !important; } /* Force dark surface on the new shell chrome when html.dark is active. Partials use bg-white dark:bg-[#0d1117] utilities — lock them down so the dashboard cannot accidentally paint light. */ html.dark #wavvySidebar, html.dark header.sticky { background-color: rgba(13, 17, 23, 0.85) !important; border-color: rgba(255, 255, 255, 0.06) !important; color: #e6edf3 !important; } html.dark #wavvySidebar { background-color: #0d1117 !important; } /* Authenticated shell modal surfaces */ html.dark .modal-content { background-color: #161b22 !important; color: #e6edf3 !important; border-color: rgba(255, 255, 255, 0.06) !important; } /* ---------- Glass morphism ---------- */ .glass { background: rgba(255, 255, 255, 0.03); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); } html:not(.dark) .glass { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(17, 24, 39, 0.06); } /* ---------- Neon borders (status colors) ---------- */ .neon-border-blue { border-color: rgba(59,130,246,0.3); box-shadow: inset 0 0 30px rgba(59,130,246,0.1), 0 0 25px rgba(59,130,246,0.2); } .neon-border-green { border-color: rgba(34,197,94,0.3); box-shadow: inset 0 0 30px rgba(34,197,94,0.1), 0 0 25px rgba(34,197,94,0.2); } .neon-border-yellow { border-color: rgba(234,179,8,0.3); box-shadow: inset 0 0 30px rgba(234,179,8,0.1), 0 0 25px rgba(234,179,8,0.2); } .neon-border-red { border-color: rgba(239,68,68,0.3); box-shadow: inset 0 0 30px rgba(239,68,68,0.1), 0 0 25px rgba(239,68,68,0.2); } .neon-border-teal { border-color: rgba(20,184,166,0.3); box-shadow: inset 0 0 30px rgba(20,184,166,0.1), 0 0 25px rgba(20,184,166,0.2); } .neon-border-purple { border-color: rgba(168,85,247,0.3); box-shadow: inset 0 0 30px rgba(168,85,247,0.1), 0 0 25px rgba(168,85,247,0.2); } /* ---------- Sidebar active state ---------- */ .wv-sidebar-active { background: linear-gradient(90deg, rgba(20,184,166,0.2) 0%, rgba(20,184,166,0.05) 100%); border: 1px solid rgba(20,184,166,0.3); box-shadow: 0 0 25px rgba(20,184,166,0.2); color: #2dd4bf; } html:not(.dark) .wv-sidebar-active { background: linear-gradient(90deg, rgba(20,184,166,0.15) 0%, rgba(20,184,166,0.03) 100%); color: #0d9488; } /* ---------- Primary (Create) button ---------- */ .wv-create-btn { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); box-shadow: 0 4px 25px rgba(20,184,166,0.6); transition: transform .15s ease, box-shadow .15s ease; } .wv-create-btn:hover { box-shadow: 0 6px 30px rgba(20,184,166,0.75); } .wv-create-btn:active { transform: scale(.97); } /* ---------- Mobile sidebar transitions ---------- */ #wavvySidebar { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 767.98px) { #wavvySidebar { transform: translateX(-100%); } #wavvySidebar.is-open { transform: translateX(0); } } /* ---------- Minimum touch targets (Apple HIG 44x44) ---------- */ .wv-touch-target { min-width: 44px; min-height: 44px; } /* ---------- Theme toggle pill ---------- */ .wv-theme-toggle { position: relative; width: 3rem; height: 1.5rem; border-radius: 9999px; background: #334155; transition: background .2s ease; flex-shrink: 0; } html.dark .wv-theme-toggle { background: #164e63; } .wv-theme-toggle-knob { position: absolute; top: 0.25rem; left: 0.25rem; width: 1rem; height: 1rem; border-radius: 9999px; background: #f1f5f9; transition: transform .2s ease, background .2s ease; } html.dark .wv-theme-toggle-knob { transform: translateX(1.5rem); background: #2dd4bf; } /* ---------- Scrollbar styling (dark) ---------- */ html.dark ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark ::-webkit-scrollbar-track { background: #0d1117; } html.dark ::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #374151; } /* ---------- Accordion open rotation (reuse chevron in Lucide) ---------- */ .wv-nav-group.is-open > .wv-nav-group-header .wv-chevron { transform: rotate(180deg); } .wv-chevron { transition: transform 0.2s ease; } .wv-nav-group-items { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .wv-nav-group.is-open > .wv-nav-group-items { max-height: 400px; } /* ============================================================= * DARK-MODE OVERRIDES for non-migrated pages * ============================================================= * Bridges pages that still use Bootstrap cards/alerts/tables and legacy * style.css classes so they don't render as white islands when dark mode * is active. Proper per-page migration to Tailwind lands in later phases * (plan Section 2.4 priority list); until then these overrides ensure * visual consistency across the whole app. * * Everything in this block is gated on html.dark so light mode is * untouched. * ============================================================= */ html.dark { --wv-surface: #161b22; /* card / panel background */ --wv-surface-elev: #1c2128; /* hover / nested surfaces */ --wv-surface-muted: #0d1117; /* page bg */ --wv-border: rgba(255, 255, 255, 0.08); --wv-text: #e6edf3; --wv-text-muted: #8b949e; --wv-text-subtle: #6e7681; } /* --- Bootstrap cards --- */ html.dark .card, html.dark .modal-content { background-color: var(--wv-surface) !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } html.dark .card-header, html.dark .card-footer, html.dark .modal-header, html.dark .modal-footer { background-color: transparent !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } html.dark .card-body { color: var(--wv-text) !important; } html.dark .card-title { color: var(--wv-text) !important; } html.dark .card-subtitle, html.dark .text-muted { color: var(--wv-text-muted) !important; } html.dark .text-dark { color: var(--wv-text) !important; } html.dark .text-secondary { color: var(--wv-text-muted) !important; } /* --- Generic bg-white / bg-light surfaces leaking through --- */ html.dark .bg-white, html.dark .bg-light { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; } /* --- Bootstrap alerts (keep the accent color, darken the surface) --- */ html.dark .alert { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; } html.dark .alert-warning { background-color: rgba(234, 179, 8, 0.1) !important; border-color: rgba(234, 179, 8, 0.3) !important; color: #fde68a !important; } html.dark .alert-danger { background-color: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: #fecaca !important; } html.dark .alert-success { background-color: rgba(34, 197, 94, 0.1) !important; border-color: rgba(34, 197, 94, 0.3) !important; color: #bbf7d0 !important; } html.dark .alert-info, html.dark .alert-primary { background-color: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.3) !important; color: #bfdbfe !important; } /* --- Tables --- */ html.dark .table, html.dark .table > :not(caption) > * > * { background-color: transparent !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .table thead, html.dark .table thead th, html.dark .table th { background-color: transparent !important; color: var(--wv-text-muted) !important; border-color: var(--wv-border) !important; } html.dark .table tbody tr:hover, html.dark .table-hover > tbody > tr:hover > * { background-color: var(--wv-surface-elev) !important; color: var(--wv-text) !important; } html.dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.02) !important; color: var(--wv-text) !important; } /* --- Form controls --- */ html.dark .form-control, html.dark .form-select, html.dark .input-group-text, html.dark textarea.form-control, html.dark input.form-control { background-color: rgba(255, 255, 255, 0.03) !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } html.dark .form-control::placeholder { color: var(--wv-text-subtle) !important; } html.dark .form-control:focus, html.dark .form-select:focus { background-color: rgba(255, 255, 255, 0.05) !important; border-color: #14b8a6 !important; box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.2) !important; color: var(--wv-text) !important; } html.dark .form-label, html.dark .form-text, html.dark label { color: var(--wv-text) !important; } html.dark .form-text, html.dark small.text-muted { color: var(--wv-text-muted) !important; } /* --- Radio/checkbox "cards" (.form-check). The base style hardcodes a light #f8f9fa surface with no dark variant; combined with `html.dark label` going light above, the option text rendered invisible on a white card in dark mode (e.g. session notifications channel picker). Flip the surface to dark. --- */ html.dark .form-check { background: var(--wv-surface-elev) !important; border-color: var(--wv-border) !important; } html.dark .form-check-input { background-color: rgba(255, 255, 255, 0.04); border-color: var(--wv-border); } /* --- Breadcrumb --- */ html.dark .breadcrumb { background-color: transparent !important; } html.dark .breadcrumb-item, html.dark .breadcrumb-item a { color: var(--wv-text-muted) !important; } html.dark .breadcrumb-item.active { color: var(--wv-text) !important; } /* --- Dropdowns --- */ html.dark .dropdown-menu { background-color: var(--wv-surface) !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } html.dark .dropdown-item { color: var(--wv-text) !important; } html.dark .dropdown-item:hover, html.dark .dropdown-item:focus { background-color: var(--wv-surface-elev) !important; color: var(--wv-text) !important; } html.dark .dropdown-divider { border-color: var(--wv-border) !important; } html.dark .dropdown-header { color: var(--wv-text-muted) !important; } /* --- Pagination --- */ html.dark .page-link { background-color: var(--wv-surface) !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } html.dark .page-item.active .page-link { background-color: #14b8a6 !important; border-color: #14b8a6 !important; color: #0d1117 !important; } /* --- Buttons: neutralise the light button variants --- */ html.dark .btn-light, html.dark .btn-outline-secondary { background-color: rgba(255, 255, 255, 0.05) !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } html.dark .btn-light:hover, html.dark .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.1) !important; color: var(--wv-text) !important; } /* --- Close button contrast fix (Bootstrap btn-close has black SVG) --- */ html.dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* --- Horizontal rule --- */ html.dark hr { border-color: var(--wv-border) !important; } /* --- Legacy style.css surfaces that paint white under dark mode --- */ /* Dashboard stat cards (auto-reply etc.) — match new glass look */ html.dark .stats-card, html.dark .stats-icon-bg, html.dark .dashboard-header, html.dark .session-card, html.dark .session-card-header-mobile, html.dark .empty-state { background-color: var(--wv-surface) !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } /* Auto-reply / API-docs / settings sub-cards */ html.dark .api-docs-sidebar, html.dark .api-docs-content, html.dark .api-key-container, html.dark .base-url-container, html.dark .code-block, html.dark pre, html.dark code { background-color: var(--wv-surface-muted) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark pre code { background-color: transparent !important; } /* Any verification / info banner using default colours */ html.dark .verify-banner { background-color: var(--wv-surface) !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } html.dark .verify-banner-title { color: var(--wv-text) !important; } html.dark .verify-banner-desc { color: var(--wv-text-muted) !important; } /* Assign-plans gradient hero cards — let their gradients stand, but ensure text + nested .card surfaces remain readable. */ html.dark .user-plans-card, html.dark .plan-stats-card .card, html.dark .table-responsive { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* Form placeholders in search inputs across legacy pages */ html.dark .template-search-box input, html.dark .search-box input { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* Toastr / custom toast surfaces */ html.dark .toast { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .toast-header { background-color: transparent !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* Leaflet maps keep their own theming — don't override */ html.dark .leaflet-container { filter: none; } /* ============================================================= * Additional dark overrides for legacy custom components * (modal-session/message/qr, ios-modal, floating-label inputs, * compact forms, option cards, editor toolbars, chat preview, etc.) * Screenshot-driven: every class here was seen painting white on a * dark page. * ============================================================= */ /* Legacy redesigned modals (session, message, QR, templates) */ html.dark .modal-session-content, html.dark .modal-message-content, html.dark .modal-qr-content, html.dark .template-selector-modal, html.dark .ios-modal-content { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .modal-session-header, html.dark .modal-message-header, html.dark .modal-qr-header, html.dark .ios-modal-header { background-color: var(--wv-surface-elev) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .modal-session-header .session-header-bg, html.dark .modal-message-header::before, html.dark .modal-qr-header::before { opacity: 0.3; } html.dark .session-title-modern, html.dark .message-title, html.dark .qr-title, html.dark .info-card-title, html.dark .message-optional-label, html.dark .ios-modal-header .modal-title, html.dark .ios-modal-header h5 { color: var(--wv-text) !important; } html.dark .session-desc-modern, html.dark .message-subtitle, html.dark .qr-subtitle, html.dark .info-card-text { color: var(--wv-text-muted) !important; } html.dark .modal-session-body, html.dark .modal-message-body, html.dark .modal-qr-body, html.dark .modal-session-footer, html.dark .modal-message-footer, html.dark .ios-modal-body, html.dark .ios-modal-buttons { background-color: transparent !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* Floating-label inputs used in legacy modals */ html.dark .input-float-group { background: transparent !important; } html.dark .input-float { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .input-float-label { color: var(--wv-text-muted) !important; } html.dark .input-float-border { background-color: #14b8a6 !important; } /* Compact form controls (auto-reply, send-message, campaign wizard) */ html.dark .form-control-compact, html.dark .form-control-modern, html.dark .form-label-compact, html.dark .form-text-compact { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .form-label-compact, html.dark .form-text-compact { background-color: transparent !important; color: var(--wv-text-muted) !important; } html.dark .form-control-compact::placeholder, html.dark .form-control-modern::placeholder { color: var(--wv-text-subtle) !important; } html.dark .form-control-compact:focus, html.dark .form-control-modern:focus { background-color: rgba(255, 255, 255, 0.05) !important; border-color: #14b8a6 !important; box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.2) !important; color: var(--wv-text) !important; } /* Info / reply message cards inside modals */ html.dark .session-info-card, html.dark .info-card-icon, html.dark .message-header-icon, html.dark .qr-header-icon, html.dark .qr-help-compact { background-color: var(--wv-surface-elev) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* Legacy "modern" buttons (keep teal accent, dark secondary) */ html.dark .btn-secondary-modern { background-color: rgba(255, 255, 255, 0.05) !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } html.dark .btn-secondary-modern:hover { background-color: rgba(255, 255, 255, 0.1) !important; } /* Toolbar (template editor formatting buttons) */ html.dark .toolbar-btn, html.dark .message-toolbar, html.dark .ql-toolbar { background-color: var(--wv-surface-elev) !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } html.dark .toolbar-btn:hover { background-color: rgba(255, 255, 255, 0.05) !important; } html.dark .ql-container, html.dark .ql-editor { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--wv-text) !important; } /* Campaign wizard: stepper + method cards */ html.dark .wizard-steps, html.dark .step-indicator, html.dark .campaign-wizard-header, html.dark .campaign-steps { background-color: var(--wv-surface) !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } html.dark .option-card, html.dark .method-card, html.dark .sending-method-card { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .option-card.selected, html.dark .option-card.active, html.dark .method-card.selected { background-color: rgba(20, 184, 166, 0.1) !important; border-color: #14b8a6 !important; } /* Empty states across pages */ html.dark .empty-state, html.dark .empty-state-box, html.dark .empty-state-card, html.dark .template-empty-state, html.dark .no-sessions, html.dark .contacts-empty-state { background-color: transparent !important; color: var(--wv-text-muted) !important; } html.dark .empty-state-icon, html.dark .empty-state-bubble { background-color: rgba(20, 184, 166, 0.15) !important; color: #14b8a6 !important; } /* WhatsApp chat preview bubble — keep the light-bg look but tint down */ html.dark .message-bubble, html.dark .preview-sticky, html.dark .chat-preview-bubble, html.dark .whatsapp-preview { background-color: #1e2a22 !important; color: #d4e6dd !important; border-color: var(--wv-border) !important; } html.dark .message-time { color: var(--wv-text-muted) !important; } /* Contacts page: group list, sidebar, list items */ html.dark .group-list, html.dark .group-list-item, html.dark .contact-list-item, html.dark .group-search-box { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .group-list-item:hover, html.dark .contact-list-item:hover { background-color: var(--wv-surface-elev) !important; } /* Toggles (switches) inside legacy cards */ html.dark .form-check-input { background-color: rgba(255, 255, 255, 0.06) !important; border-color: var(--wv-border) !important; } html.dark .form-check-input:checked { background-color: #14b8a6 !important; border-color: #14b8a6 !important; } html.dark .form-check-label { color: var(--wv-text) !important; } /* Import modal (auto-reply import, contact import) */ html.dark .import-modal, html.dark .import-modal-header, html.dark .import-modal-body, html.dark .import-modal-footer { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* Keep Import button teal/blue gradient visible, but force modal shell dark */ html.dark .import-modal .modal-header { background-color: var(--wv-surface-elev) !important; color: var(--wv-text) !important; } /* File upload / dropzone */ html.dark .upload-area, html.dark .dropzone, html.dark .file-upload-box { background-color: rgba(255, 255, 255, 0.03) !important; border-color: var(--wv-border) !important; color: var(--wv-text) !important; } html.dark .upload-area:hover, html.dark .dropzone:hover { background-color: rgba(255, 255, 255, 0.05) !important; } /* Stats cards with custom auto-reply / campaigns layout */ html.dark .auto-reply-stats-card, html.dark .campaign-stats-card, html.dark .template-stats-card, html.dark .contacts-stats-card { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* Settings / admin panels */ html.dark .settings-panel, html.dark .admin-panel, html.dark .settings-section, html.dark .user-plans-card, html.dark .plan-card { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* QR display area */ html.dark .qr-container, html.dark .qr-loading, html.dark .qr-help-text { background-color: transparent !important; color: var(--wv-text) !important; } /* Keep gradient hero stat cards on assign-plans visible — force white text */ html.dark .total-users-card, html.dark .paid-users-card, html.dark .free-users-card, html.dark .enterprise-users-card { color: #fff !important; } html.dark .total-users-card *, html.dark .paid-users-card *, html.dark .free-users-card *, html.dark .enterprise-users-card * { color: #fff !important; } /* Buttons with inline background-color style overrides are impossible to catch via CSS; those need to be fixed in HTML. Common legacy ones (custom teal bg-primary on modal headers) are handled above via the .modal-*-header selectors. */ /* ============================================================= * Third-pass dark overrides — API Docs page, Contacts compact * modals, Campaigns stepper, settings form-switch wrappers. * Screenshot-driven follow-up after b2ac873 + 3ea7108. * ============================================================= */ /* ---------- /api-docs ---------- */ html.dark .api-docs-container, html.dark .api-section, html.dark .api-content, html.dark .api-base, html.dark .api-page-header { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .api-docs-main-heading { color: var(--wv-text) !important; } html.dark .api-docs-subtitle { color: var(--wv-text-muted) !important; } /* API Key card ("Your API Key" white card in screenshot) */ html.dark .api-key-section, html.dark .api-key-header-clean, html.dark .api-key-body-clean, html.dark .api-key-footer-clean, html.dark .api-key-warning-clean, html.dark .api-key-input-container { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .api-key-header-text, html.dark .api-key-header-text h5 { color: var(--wv-text) !important; } html.dark .api-key-header-text p, html.dark .api-key-header-text small { color: var(--wv-text-muted) !important; } html.dark .api-key-icon-clean, html.dark .api-header-icon { background-color: rgba(20, 184, 166, 0.15) !important; color: #14b8a6 !important; } html.dark .api-key-badge-secure { background-color: rgba(34, 197, 94, 0.15) !important; color: #86efac !important; border-color: rgba(34, 197, 94, 0.3) !important; } html.dark .api-key-btn, html.dark .api-key-btn-copy, html.dark .api-key-btn-toggle, html.dark .api-key-regenerate-btn { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .api-key-btn:hover, html.dark .api-key-regenerate-btn:hover { background-color: rgba(255, 255, 255, 0.1) !important; } /* API Docs sidebar nav */ html.dark .api-sidebar, html.dark .api-sidebar-header, html.dark .api-sidebar-nav, html.dark .api-sidebar-section { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .api-sidebar-nav a, html.dark .api-sidebar-nav .nav-link { color: var(--wv-text-muted) !important; } html.dark .api-sidebar-nav a:hover, html.dark .api-sidebar-nav a.active, html.dark .api-sidebar-nav .nav-link.active { background-color: rgba(20, 184, 166, 0.1) !important; color: #2dd4bf !important; } html.dark .api-sidebar-section { color: var(--wv-text-muted) !important; } html.dark .api-sidebar-close, html.dark .api-mobile-nav-toggle { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* Code blocks inside API Docs */ html.dark .code-block, html.dark .code-block-header { background-color: var(--wv-surface-muted) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .code-block { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important; } html.dark .code-block code { background: var(--wv-surface-muted) !important; color: var(--wv-text) !important; } html.dark .code-block-title { color: var(--wv-text-muted) !important; } html.dark .copy-code-btn { background: rgba(255, 255, 255, 0.06) !important; color: var(--wv-text-muted) !important; } html.dark .copy-code-btn:hover { background: rgba(255, 255, 255, 0.12) !important; color: var(--wv-text) !important; } /* Section headings — h2 (with method badge) and h4 became invisible because they keep `color: var(--text-primary)` (#111827) in dark mode. */ html.dark .api-section h2, html.dark .api-section h4, html.dark .endpoint-card h4 { color: var(--wv-text) !important; border-bottom-color: var(--wv-border) !important; } html.dark .api-section p { color: var(--wv-text-muted) !important; } /* Endpoint card — was painting white over the dark page */ html.dark .endpoint-card { background-color: var(--wv-surface) !important; border-color: var(--wv-border) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important; } html.dark .endpoint-card:hover { border-color: rgba(20, 184, 166, 0.5) !important; box-shadow: 0 4px 20px rgba(20, 184, 166, 0.15) !important; } html.dark .endpoint-header { background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)) !important; border-bottom-color: var(--wv-border) !important; } html.dark .endpoint-path { color: var(--wv-text) !important; } html.dark .endpoint-card > p.endpoint-description { background: rgba(20, 184, 166, 0.05) !important; color: var(--wv-text-muted) !important; border-bottom-color: var(--wv-border) !important; } /* Parameter table — rows and the inner separator rendered as light cards */ html.dark .param-table { background: transparent !important; } html.dark .param-table tr { background-color: var(--wv-surface-elev) !important; border-left-color: var(--wv-border) !important; } html.dark .param-table tr:hover { background-color: rgba(20, 184, 166, 0.08) !important; border-left-color: #14b8a6 !important; } html.dark .param-table td { color: var(--wv-text) !important; } html.dark .param-table td:first-child { border-bottom-color: var(--wv-border) !important; } html.dark .param-table td::before { color: var(--wv-text-muted) !important; } html.dark .param-table thead th { color: var(--wv-text) !important; } /* Info boxes — keep accent tint but lift text into the readable range */ html.dark .info-box-info { background: rgba(56, 189, 248, 0.08) !important; color: #bae6fd !important; } html.dark .info-box-warning { background: rgba(234, 179, 8, 0.08) !important; color: #fde68a !important; } html.dark .info-box-success { background: rgba(34, 197, 94, 0.08) !important; color: #bbf7d0 !important; } html.dark .info-box-danger { background: rgba(239, 68, 68, 0.08) !important; color: #fecaca !important; } html.dark .info-box code { background: rgba(0, 0, 0, 0.3) !important; color: var(--wv-text) !important; } /* Language switcher tabs */ html.dark .language-tabs { border-bottom-color: var(--wv-border) !important; } html.dark .language-tab { color: var(--wv-text-muted) !important; } html.dark .language-tab:hover { color: var(--wv-text) !important; } html.dark .language-tab.active { color: #2dd4bf !important; border-bottom-color: #2dd4bf !important; } /* ---------- Contacts compact modals (Add / Import) ---------- */ html.dark .modal-contact-compact .modal-content, html.dark .modal-import-compact .modal-content, html.dark .modal-import-content, html.dark .modal-header-compact, html.dark .modal-body-compact, html.dark .modal-footer-compact, html.dark .modal-import-header-compact, html.dark .modal-import-body-compact, html.dark .modal-import-footer-compact { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* Icon pill inside those modals — keep the accent colour */ html.dark .modal-icon-compact { background-color: rgba(20, 184, 166, 0.15) !important; color: #14b8a6 !important; } html.dark .modal-icon-compact.bg-primary { background-color: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; } html.dark .modal-icon-compact.bg-success { background-color: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; } /* "Mark as favorite" checkbox row and similar compact rows */ html.dark .btn-remove-compact, html.dark .form-check-compact, html.dark .contact-badge-modern { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* ---------- Contacts page cards ---------- */ html.dark .contact-card-modern, html.dark .contact-card-header, html.dark .contact-card-body, html.dark .contact-avatar-modern, html.dark .contact-actions-modern { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .contact-name-modern { color: var(--wv-text) !important; } html.dark .contact-phone-modern { color: var(--wv-text-muted) !important; } html.dark .btn-icon-modern { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .btn-icon-modern:hover { background-color: rgba(255, 255, 255, 0.1) !important; } /* ---------- Campaign wizard stepper (.card-header.bg-white / .wizard bars) ---------- */ html.dark .card-header.bg-white, html.dark .card-header.bg-light { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* Catch-all for legacy .card.shadow-sm wrappers used across campaign/contacts pages */ html.dark .card.shadow-sm, html.dark .card.border-0 { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; } html.dark .empty-state-compact { background-color: transparent !important; color: var(--wv-text-muted) !important; } /* ---------- Settings form-switch rows (Enable Google/OTP toggles) ---------- */ /* Bootstrap's form-switch renders the input as a wide pill with white bg. Force dark surface so the label text (light-coloured via dark overrides) remains readable. */ html.dark .form-check.form-switch .form-check-input { background-color: rgba(255, 255, 255, 0.06) !important; border-color: var(--wv-border) !important; } html.dark .form-check.form-switch .form-check-input:checked { background-color: #14b8a6 !important; border-color: #14b8a6 !important; } /* Ensure the label block doesn't receive any stray bg-white from parents */ html.dark .form-check.form-switch { background-color: transparent !important; } html.dark .form-check.form-switch .form-check-label, html.dark .form-check.form-switch .form-check-label strong { color: var(--wv-text) !important; } /* Settings panel wrapper (Google OAuth + WABA OTP + Telegram containers) */ html.dark .settings-panel-compact, html.dark .settings-panel-card, html.dark .auth-settings-card, html.dark .otp-settings-card, html.dark .telegram-settings-card, html.dark .oauth-card, html.dark .waba-card { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* Message Preview / chat-sticky side panel on campaign-create */ html.dark .preview-sticky .card, html.dark .message-preview-card, html.dark .campaign-preview { background-color: var(--wv-surface) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } /* ============================================================= * /campaigns/create + /templates filters + /number-checker modal * Fourth-pass dark overrides (screenshot-driven follow-up). * ============================================================= */ /* ---------- /templates: search + filter bar ---------- */ html.dark .search-box-compact i { color: var(--wv-text-muted) !important; } html.dark .search-box-compact input { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .search-box-compact input::placeholder { color: var(--wv-text-subtle) !important; } html.dark .search-box-compact input:focus { background-color: rgba(255, 255, 255, 0.05) !important; border-color: #14b8a6 !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important; } /* Custom select with SVG chevron baked in — repaint chevron + bg for dark */ html.dark .filter-select-compact { background-color: rgba(255, 255, 255, 0.03) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .filter-select-compact:focus { border-color: #14b8a6 !important; } html.dark .btn-filter-compact { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .btn-filter-compact:hover { background-color: rgba(255, 255, 255, 0.06) !important; } html.dark .btn-filter-compact.active { background-color: rgba(245, 158, 11, 0.15) !important; border-color: rgba(245, 158, 11, 0.5) !important; } html.dark .filter-collapse-toggle { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--wv-text) !important; border-color: var(--wv-border) !important; } html.dark .filter-collapse-toggle .toggle-left, html.dark .filter-collapse-toggle .filter-count { color: var(--wv-text) !important; } html.dark .filter-content-collapsible { background-color: transparent !important; } /* Native