/* ═══════════════════════════════════════════════════════════ DictaFlow SaaS — Multi-theme system Themes: light (default), dark, medical, modern Usage: ═══════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { --df-bg: #ffffff; --df-bg-alt: #f8f9fa; --df-bg-card: #ffffff; --df-bg-sidebar: #f1f5f9; --df-bg-nav: #1e293b; --df-text: #1e293b; --df-text-muted: #64748b; --df-text-nav: #ffffff; --df-border: #e2e8f0; --df-primary: #2563eb; --df-primary-hover: #1d4ed8; --df-primary-light: rgba(37, 99, 235, 0.1); --df-success: #16a34a; --df-danger: #dc2626; --df-warning: #d97706; --df-info: #0891b2; --df-shadow: 0 1px 3px rgba(0,0,0,0.08); --df-shadow-lg: 0 4px 12px rgba(0,0,0,0.1); --df-radius: 8px; --df-hero-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%); --df-hero-text: #ffffff; --df-cta-bg: #2563eb; --df-cta-text: #ffffff; --df-input-bg: #ffffff; --df-input-border: #d1d5db; --df-table-stripe: #f9fafb; --df-badge-bg: #e2e8f0; } [data-theme="dark"] { --df-bg: #0f172a; --df-bg-alt: #1e293b; --df-bg-card: #1e293b; --df-bg-sidebar: #0f172a; --df-bg-nav: #020617; --df-text: #e2e8f0; --df-text-muted: #94a3b8; --df-text-nav: #e2e8f0; --df-border: #334155; --df-primary: #3b82f6; --df-primary-hover: #60a5fa; --df-primary-light: rgba(59, 130, 246, 0.15); --df-success: #22c55e; --df-danger: #ef4444; --df-warning: #f59e0b; --df-info: #06b6d4; --df-shadow: 0 1px 3px rgba(0,0,0,0.3); --df-shadow-lg: 0 4px 12px rgba(0,0,0,0.4); --df-hero-bg: linear-gradient(135deg, #020617 0%, #0f172a 100%); --df-hero-text: #e2e8f0; --df-cta-bg: #3b82f6; --df-cta-text: #ffffff; --df-input-bg: #1e293b; --df-input-border: #475569; --df-table-stripe: #1e293b; --df-badge-bg: #334155; } [data-theme="medical"] { --df-bg: #f0f9ff; --df-bg-alt: #e0f2fe; --df-bg-card: #ffffff; --df-bg-sidebar: #e0f2fe; --df-bg-nav: #0c4a6e; --df-text: #0c4a6e; --df-text-muted: #0369a1; --df-text-nav: #ffffff; --df-border: #bae6fd; --df-primary: #0284c7; --df-primary-hover: #0369a1; --df-primary-light: rgba(2, 132, 199, 0.1); --df-success: #059669; --df-danger: #dc2626; --df-warning: #d97706; --df-info: #0891b2; --df-shadow: 0 1px 3px rgba(12,74,110,0.08); --df-shadow-lg: 0 4px 12px rgba(12,74,110,0.12); --df-hero-bg: linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0284c7 100%); --df-hero-text: #ffffff; --df-cta-bg: #0284c7; --df-cta-text: #ffffff; --df-input-bg: #ffffff; --df-input-border: #7dd3fc; --df-table-stripe: #f0f9ff; --df-badge-bg: #e0f2fe; } [data-theme="modern"] { --df-bg: #faf5ff; --df-bg-alt: #f3e8ff; --df-bg-card: #ffffff; --df-bg-sidebar: #f3e8ff; --df-bg-nav: #2e1065; --df-text: #1e1b4b; --df-text-muted: #6b21a8; --df-text-nav: #ffffff; --df-border: #e9d5ff; --df-primary: #7c3aed; --df-primary-hover: #6d28d9; --df-primary-light: rgba(124, 58, 237, 0.1); --df-success: #059669; --df-danger: #e11d48; --df-warning: #d97706; --df-info: #7c3aed; --df-shadow: 0 1px 4px rgba(124,58,237,0.08); --df-shadow-lg: 0 4px 16px rgba(124,58,237,0.12); --df-hero-bg: linear-gradient(135deg, #2e1065 0%, #7c3aed 50%, #a78bfa 100%); --df-hero-text: #ffffff; --df-cta-bg: linear-gradient(135deg, #7c3aed, #a855f7); --df-cta-text: #ffffff; --df-input-bg: #ffffff; --df-input-border: #d8b4fe; --df-table-stripe: #faf5ff; --df-badge-bg: #f3e8ff; } /* ═══════════════════════════════════════════════════════════ Apply theme variables to common elements ═══════════════════════════════════════════════════════════ */ body { background-color: var(--df-bg); color: var(--df-text); transition: background-color 0.2s, color 0.2s; } .card { background-color: var(--df-bg-card); border-color: var(--df-border); box-shadow: var(--df-shadow); } .table { color: var(--df-text); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--df-table-stripe); color: var(--df-text); } .text-muted { color: var(--df-text-muted) !important; } .form-control, .form-select { background-color: var(--df-input-bg); border-color: var(--df-input-border); color: var(--df-text); } .form-control:focus, .form-select:focus { border-color: var(--df-primary); box-shadow: 0 0 0 0.2rem var(--df-primary-light); } .btn-primary { background-color: var(--df-primary); border-color: var(--df-primary); } .btn-primary:hover { background-color: var(--df-primary-hover); border-color: var(--df-primary-hover); } .btn-outline-primary { color: var(--df-primary); border-color: var(--df-primary); } .btn-outline-primary:hover { background-color: var(--df-primary); color: #fff; } .bg-light { background-color: var(--df-bg-alt) !important; } /* Navbar themed */ .navbar-df { background: var(--df-bg-nav) !important; } .navbar-df .navbar-brand, .navbar-df .nav-link { color: var(--df-text-nav) !important; } /* Sidebar themed */ .sidebar-df { background: var(--df-bg-sidebar) !important; border-right-color: var(--df-border) !important; } .sidebar-df .nav-link { color: var(--df-text-muted); } .sidebar-df .nav-link:hover, .sidebar-df .nav-link.active { background: var(--df-primary-light); color: var(--df-primary); } /* Hero themed */ .hero-df { background: var(--df-hero-bg); color: var(--df-hero-text); } /* CTA themed */ .cta-df { background: var(--df-cta-bg); color: var(--df-cta-text); } /* Feature icons */ .feature-icon-df { background: var(--df-primary-light); color: var(--df-primary); } /* Accordion */ .accordion-item { background-color: var(--df-bg-card); border-color: var(--df-border); } .accordion-button { background-color: var(--df-bg-card); color: var(--df-text); } .accordion-button:not(.collapsed) { background-color: var(--df-primary-light); color: var(--df-primary); } /* Modal */ .modal-content { background-color: var(--df-bg-card); color: var(--df-text); } .modal-header { border-bottom-color: var(--df-border); } /* ═══════════════════════════════════════════════════════════ Theme switcher button ═══════════════════════════════════════════════════════════ */ .theme-switcher { position: relative; display: inline-block; } .theme-switcher .dropdown-menu { min-width: 150px; } .theme-switcher .theme-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 0.85rem; } .theme-switcher .theme-option:hover { background: var(--df-primary-light); } .theme-switcher .theme-option.active { font-weight: 600; color: var(--df-primary); } .theme-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--df-border); flex-shrink: 0; } .theme-dot-light { background: #f8f9fa; } .theme-dot-dark { background: #1e293b; } .theme-dot-medical { background: #0284c7; } .theme-dot-modern { background: #7c3aed; }