/** * CareTrack — light / dark theme (data-bs-theme on ) */ :root, [data-bs-theme="light"] { color-scheme: light; --ct-primary: #6366f1; --ct-primary-dark: #4f46e5; --ct-primary-soft: #eef2ff; --ct-navy: #0f172a; --ct-text: #0f172a; --ct-text-secondary: #334155; --ct-muted: #64748b; --ct-border: #e2e8f0; --ct-body-bg: #ffffff; --ct-company-bg: #f1f5f9; --ct-surface: #ffffff; --ct-surface-elevated: #ffffff; --ct-surface-muted: #f8fafc; --ct-input-bg: #f8fafc; --ct-hero-bg: linear-gradient(180deg, #fafbff 0%, #ffffff 55%, #f8fafc 100%); --ct-footer-bg: #f8fafc; --ct-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --ct-shadow-lg: 0 10px 40px rgba(15, 23, 42, 0.1); --ct-chart-text: #64748b; --ct-chart-grid: #f1f5f9; --ct-close-filter: none; --ct-avatar-bg: linear-gradient(135deg, #eef2ff, #e0e7ff); --ct-avatar-color: var(--ct-primary); --ct-avatar-border: transparent; --ct-avatar-worker-bg: linear-gradient(135deg, #ecfdf5, #d1fae5); --ct-avatar-worker-color: #047857; --ct-success: #16a34a; --ct-success-soft: #dcfce7; --ct-warning: #ea580c; --ct-warning-soft: #ffedd5; --ct-danger: #dc2626; --ct-danger-soft: #fee2e2; --ct-info: #6366f1; --ct-info-soft: #eef2ff; --ct-modal-hero-bg: linear-gradient( 180deg, color-mix(in srgb, var(--ct-primary) 10%, var(--ct-surface)) 0%, var(--ct-surface) 100% ); --ct-modal-hero-accent: var(--ct-primary); --ct-modal-hero-chip-bg: var(--ct-primary-soft); --ct-modal-hero-chip-fg: var(--ct-primary); --ct-modal-hero-chip-active-bg: var(--ct-primary); --ct-modal-hero-chip-active-fg: #ffffff; --ct-modal-hero-track: var(--ct-surface-muted); --ct-modal-hero-track-fill: var(--ct-primary); } [data-bs-theme="dark"] { color-scheme: dark; --ct-primary: #818cf8; --ct-primary-dark: #6366f1; --ct-primary-soft: rgba(99, 102, 241, 0.18); --ct-navy: #f1f5f9; --ct-text: #f1f5f9; --ct-text-secondary: #cbd5e1; --ct-muted: #94a3b8; --ct-border: #334155; --ct-body-bg: #0b1120; --ct-company-bg: #0b1120; --ct-surface: #1e293b; --ct-surface-elevated: #1e293b; --ct-surface-muted: #0f172a; --ct-input-bg: #0f172a; --ct-hero-bg: linear-gradient(180deg, #0f172a 0%, #0b1120 50%, #0b1120 100%); --ct-footer-bg: #0f172a; --ct-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); --ct-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.45); --ct-chart-text: #94a3b8; --ct-chart-grid: #334155; --ct-close-filter: invert(1) grayscale(100%) brightness(200%); --ct-avatar-bg: var(--ct-primary-soft); --ct-avatar-color: var(--ct-primary); --ct-avatar-border: var(--ct-border); --ct-avatar-worker-bg: rgba(16, 185, 129, 0.22); --ct-avatar-worker-color: #6ee7b7; --ct-success: #4ade80; --ct-success-soft: rgba(34, 197, 94, 0.2); --ct-warning: #fb923c; --ct-warning-soft: rgba(251, 146, 60, 0.2); --ct-danger: #f87171; --ct-danger-soft: rgba(248, 113, 113, 0.2); --ct-info: #818cf8; --ct-info-soft: rgba(99, 102, 241, 0.2); --ct-modal-hero-bg: linear-gradient( 180deg, color-mix(in srgb, var(--ct-primary) 14%, var(--ct-surface)) 0%, var(--ct-surface) 100% ); --ct-modal-hero-accent: var(--ct-primary); --ct-modal-hero-chip-bg: var(--ct-primary-soft); --ct-modal-hero-chip-fg: var(--ct-primary); --ct-modal-hero-chip-active-bg: var(--ct-primary); --ct-modal-hero-chip-active-fg: #ffffff; --ct-modal-hero-track: var(--ct-surface-muted); --ct-modal-hero-track-fill: var(--ct-primary); } /* Initial / placeholder avatars (company portal) */ .clients-avatar, .clients-staff-board-avatar, .client-contact-avatar, .client-member-avatar, .staff-profile-card .staff-avatar, .staff-profile-hero-avatar .staff-avatar, .staff-profile-hero-avatar .staff-avatar-sm-lg, .staff-table .staff-avatar-sm, .cases-worker-avatar, .client-worker-avatar, .ct-avatar { background: var(--ct-avatar-bg); color: var(--ct-avatar-color); border: 1px solid var(--ct-avatar-border); } .clients-avatar--worker { background: var(--ct-avatar-worker-bg); color: var(--ct-avatar-worker-color); border: 1px solid var(--ct-avatar-border); } /* Theme toggle */ .ct-theme-toggle { width: 40px; height: 40px; border-radius: 0.5rem; border: 1px solid var(--ct-border); background: var(--ct-surface); color: var(--ct-text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.15s, color 0.15s, border-color 0.15s; } .ct-theme-toggle:hover { background: var(--ct-primary-soft); color: var(--ct-primary); border-color: var(--ct-primary); } .ct-theme-toggle .theme-icon-light, .ct-theme-toggle .theme-icon-dark { font-size: 1rem; line-height: 1; } [data-bs-theme="light"] .ct-theme-toggle .theme-icon-light { display: none !important; } [data-bs-theme="dark"] .ct-theme-toggle .theme-icon-dark { display: none !important; } /* Bootstrap tweaks */ [data-bs-theme="dark"] .btn-close { filter: var(--ct-close-filter); } [data-bs-theme="dark"] .text-dark { color: var(--ct-text) !important; } [data-bs-theme="dark"] .bg-white { background-color: var(--ct-surface) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--ct-surface-muted) !important; } [data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom { border-color: var(--ct-border) !important; } [data-bs-theme="dark"] .dropdown-menu { background-color: var(--ct-surface); border-color: var(--ct-border); } [data-bs-theme="dark"] .dropdown-item { color: var(--ct-text-secondary); } [data-bs-theme="dark"] .dropdown-item:hover { background-color: var(--ct-primary-soft); color: var(--ct-primary); } [data-bs-theme="dark"] .dropdown-item-text { color: var(--ct-muted); } [data-bs-theme="dark"] .offcanvas { background-color: var(--ct-surface); color: var(--ct-text); } [data-bs-theme="dark"] .accordion-button { background-color: transparent; color: var(--ct-text); } [data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--ct-primary-soft); color: var(--ct-primary); } [data-bs-theme="dark"] .list-group-item { background-color: var(--ct-surface); border-color: var(--ct-border); color: var(--ct-text-secondary); } [data-bs-theme="dark"] .alert-warning { background-color: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.35); color: #fcd34d; } [data-bs-theme="dark"] .badge.bg-primary-subtle { background-color: var(--ct-primary-soft) !important; color: var(--ct-primary) !important; } [data-bs-theme="dark"] .badge.bg-danger-subtle { color: #fca5a5 !important; } [data-bs-theme="dark"] .badge.bg-warning-subtle { color: #fcd34d !important; } [data-bs-theme="dark"] .badge.bg-success-subtle { color: #86efac !important; } /* Frontend offcanvas & links */ .ct-offcanvas-link, .ct-offcanvas-sublink { color: var(--ct-text-secondary); } .ct-offcanvas-sublink:hover { background: var(--ct-surface-muted); color: var(--ct-primary); } [data-bs-theme="dark"] .btn-microsoft, [data-bs-theme="dark"] .btn-auth-secondary, [data-bs-theme="dark"] .btn-hero-outline { background: var(--ct-surface); color: var(--ct-text-secondary); border-color: var(--ct-border); } [data-bs-theme="dark"] .btn-microsoft:hover, [data-bs-theme="dark"] .btn-auth-secondary:hover, [data-bs-theme="dark"] .btn-hero-outline:hover { background: var(--ct-primary-soft); color: var(--ct-primary); } /* Dark-mode logo includes its own dark tile */ [data-bs-theme="dark"] .ct-navbar .brand-icon, [data-bs-theme="dark"] .ct-offcanvas .brand-icon, [data-bs-theme="dark"] .ct-footer .footer-brand-icon, [data-bs-theme="dark"] .login-topbar-brand .brand-icon { background: transparent; box-shadow: none; } /* Auth / login page */ [data-bs-theme="dark"] body.auth-layout { --ct-auth-bg: #0f172a; --ct-auth-panel-bg: #1e1b4b; --ct-auth-heading: #e0e7ff; --ct-auth-features-bg: #1e293b; } [data-bs-theme="dark"] .login-panel-visual { background: linear-gradient(180deg, var(--ct-auth-panel-bg) 0%, var(--ct-surface) 100%); } [data-bs-theme="dark"] .login-illustration-wrap { background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.1)); } /* Company shell */ body.company-layout { background: var(--ct-company-bg); color: var(--ct-text); } .company-layout .brand-tagline, .company-layout .quick-actions-title { color: var(--ct-muted); } .company-layout .sidebar-nav .nav-link:hover { background: var(--ct-surface-muted); color: var(--ct-text); } .company-layout .quick-actions { border-top-color: var(--ct-border); } .company-layout .welcome-block h1, .company-layout .welcome-block p { color: var(--ct-text); } .company-layout .welcome-block p { color: var(--ct-muted); } .company-layout .company-header .ct-header-icon-btn { color: var(--ct-text-secondary); } .company-layout .company-header .icon-btn, .company-layout .company-header .org-pill { background: var(--ct-surface-muted); border-color: var(--ct-border); } .company-layout .company-header .icon-btn:hover, .company-layout .company-header .org-pill:hover, .company-layout .company-header .org-pill.show { background: var(--ct-primary-soft); border-color: var(--ct-primary); } .company-layout .org-name { color: var(--ct-text); } .company-layout .sidebar-user .text-dark { color: var(--ct-text) !important; } .company-layout .search-kbd { background: var(--ct-surface); border-color: var(--ct-border); color: var(--ct-muted); } /* Family portal shell */ body.family-layout { background: var(--ct-company-bg); color: var(--ct-text); } .family-layout .brand-tagline { color: var(--ct-muted); } .family-layout .sidebar-nav .nav-link:hover { background: var(--ct-surface-muted); color: var(--ct-text); } .family-layout .sidebar-theme, .family-layout .family-sidebar { border-color: var(--ct-border); } .family-layout .welcome-block h1 { color: var(--ct-text); } .family-layout .welcome-block p { color: var(--ct-muted); } .family-header .icon-btn, .family-header .family-pill { background: var(--ct-surface); border-color: var(--ct-border); } .family-header .icon-btn:hover { background: var(--ct-surface-muted); } /* Dashboard widgets */ .ct-list-item, .priority-case-card, .quick-note-card, .dashboard-message-card, .dashboard-meeting-card, .dashboard-schedule-card { border-color: var(--ct-border) !important; } .workload-mini .mini-box { background: var(--ct-surface-muted); } .workload-mini .mini-box span { color: var(--ct-muted); } .ct-stat-card .stat-meta.text-muted { color: var(--ct-muted) !important; } /* Company dashboard — dark mode refinements */ [data-bs-theme="dark"] .ct-stat-card .stat-icon.purple { background: rgba(99, 102, 241, 0.22); color: #a5b4fc; } [data-bs-theme="dark"] .ct-stat-card .stat-icon.green { background: rgba(34, 197, 94, 0.18); color: #86efac; } [data-bs-theme="dark"] .ct-stat-card .stat-icon.blue { background: rgba(59, 130, 246, 0.2); color: #93c5fd; } [data-bs-theme="dark"] .ct-stat-card .stat-icon.orange { background: rgba(249, 115, 22, 0.2); color: #fdba74; } [data-bs-theme="dark"] .ct-stat-card .stat-icon.pink { background: rgba(219, 39, 119, 0.2); color: #f9a8d4; } [data-bs-theme="dark"] .ct-stat-card .stat-label, [data-bs-theme="dark"] .caseload-legend li, [data-bs-theme="dark"] .workload-mini .mini-box span, [data-bs-theme="dark"] .schedule-block .time-label, [data-bs-theme="dark"] .date-switcher button { color: var(--ct-muted); } [data-bs-theme="dark"] .schedule-timeline::before { background: var(--ct-border); } [data-bs-theme="dark"] .btn-ct-outline { background: var(--ct-surface); border-color: var(--ct-border); color: var(--ct-text-secondary); } [data-bs-theme="dark"] .btn-ct-outline:hover { background: var(--ct-primary-soft); color: var(--ct-primary); border-color: var(--ct-primary); } [data-bs-theme="dark"] .company-content .text-dark, [data-bs-theme="dark"] .ct-emphasis { color: var(--ct-text) !important; } [data-bs-theme="dark"] .company-sidebar .sidebar-theme { border-color: var(--ct-border); } [data-bs-theme="dark"] .card.border-0.shadow-sm { background: var(--ct-surface); border: 1px solid var(--ct-border) !important; box-shadow: var(--ct-shadow) !important; } [data-bs-theme="dark"] .card-header.bg-white { background: var(--ct-surface) !important; border-color: var(--ct-border) !important; color: var(--ct-text); } /* Auth page */ .auth-card { background: var(--ct-surface); border-color: var(--ct-border); } .auth-card-body { background: var(--ct-surface); } [data-bs-theme="dark"] .btn-google-auth { background: var(--ct-surface); color: var(--ct-text-secondary); border-color: var(--ct-border); }