/** * MopPilot Theme System * * Four theme variants:* 1. Default Light (default) - Bootstrap 5 default colors * 2. Default Dark - Dark mode with Bootstrap color scheme * 3. Eco Light - Professional emerald/teal theme * 4. Eco Dark - Premium dark mode with emerald accents * * Usage:Apply data-theme attribute to element * Values:'light', 'dark', 'eco-light', 'eco-dark' */ /* ============================================ CSS CUSTOM PROPERTIES - ROOT DEFINITIONS ============================================ */ :root{--theme-transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;/* ======================== DEFAULT LIGHT THEME ======================== */ --bg-body:#ffffff;--bg-primary:#ffffff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--bg-surface:#ffffff;--bg-surface-hover:#f8f9fa;--bg-surface-elevated:#ffffff;--text-primary:#212529;--text-secondary:#6c757d;--text-muted:#adb5bd;--text-inverse:#ffffff;--text-link:#0d6efd;--text-link-hover:#0a58ca;--border-default:#dee2e6;--border-light:#e9ecef;--border-dark:#ced4da;--border-focus:rgba(13, 110, 253, 0.5);--accent-primary:#0d6efd;--accent-primary-hover:#0b5ed7;--accent-primary-active:#0a58ca;--accent-primary-subtle:rgba(13, 110, 253, 0.1);--accent-primary-rgb:13, 110, 253;--accent-success:#198754;--accent-success-hover:#157347;--accent-success-subtle:rgba(25, 135, 84, 0.1);--accent-danger:#dc3545;--accent-danger-hover:#bb2d3b;--accent-danger-subtle:rgba(220, 53, 69, 0.1);--accent-warning:#ffc107;--accent-warning-hover:#ffca2c;--accent-warning-subtle:rgba(255, 193, 7, 0.1);--accent-info:#0dcaf0;--accent-info-hover:#31d2f2;--accent-info-subtle:rgba(13, 202, 240, 0.1);--navbar-bg:var(--accent-primary);--navbar-text:#ffffff;--navbar-hover:rgba(255, 255, 255, 0.1);--navbar-brand:#ffffff;--card-bg:#ffffff;--card-border:var(--border-default);--card-header-bg:#f8f9fa;--card-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--card-shadow-hover:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--input-bg:#ffffff;--input-border:#ced4da;--input-text:var(--text-primary);--input-placeholder:var(--text-muted);--input-focus-border:var(--accent-primary);--input-focus-shadow:0 0 0 0.25rem rgba(var(--accent-primary-rgb), 0.25);--input-disabled-bg:#e9ecef;--table-bg:transparent;--table-border:var(--border-default);--table-striped-bg:rgba(0, 0, 0, 0.02);--table-hover-bg:rgba(0, 0, 0, 0.04);--table-header-bg:var(--bg-secondary);--dropdown-bg:#ffffff;--dropdown-border:var(--border-default);--dropdown-text:var(--text-primary);--dropdown-hover-bg:#f8f9fa;--dropdown-divider:var(--border-light);--dropdown-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--modal-bg:#ffffff;--modal-border:var(--border-default);--modal-header-bg:var(--bg-secondary);--modal-backdrop:rgba(0, 0, 0, 0.5);--btn-secondary-bg:#6c757d;--btn-secondary-border:#6c757d;--btn-light-bg:#f8f9fa;--btn-light-border:#f8f9fa;--btn-light-text:var(--text-primary);--badge-light-bg:#f8f9fa;--badge-light-text:var(--text-primary);--list-group-bg:#ffffff;--list-group-border:var(--border-default);--list-group-hover:var(--bg-secondary);--list-group-active-bg:var(--accent-primary);--list-group-active-text:#ffffff;--footer-bg:var(--bg-secondary);--footer-text:var(--text-muted);--scrollbar-track:var(--bg-secondary);--scrollbar-thumb:var(--text-muted);--scrollbar-thumb-hover:var(--text-secondary);--code-bg:#f8f9fa;--code-text:#d63384;--shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--shadow-md:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);} /* ======================== DEFAULT DARK THEME ======================== */ [data-theme="dark"]{--bg-body:#1a1a2e;--bg-primary:#16213e;--bg-secondary:#0f0f0f;--bg-tertiary:#1e1e3f;--bg-surface:#16213e;--bg-surface-hover:#1e1e3f;--bg-surface-elevated:#1e2a4a;--text-primary:#e8e8e8;--text-secondary:#b0b0b0;--text-muted:#9ca3af;--text-inverse:#1a1a2e;--text-link:#6ea8fe;--text-link-hover:#9ec5fe;--border-default:#2d2d5a;--border-light:#232346;--border-dark:#3d3d7a;--border-focus:rgba(110, 168, 254, 0.5);--accent-primary:#6ea8fe;--accent-primary-hover:#9ec5fe;--accent-primary-active:#3d8bfd;--accent-primary-subtle:rgba(110, 168, 254, 0.15);--accent-primary-rgb:110, 168, 254;--accent-success:#75b798;--accent-success-hover:#8ac4a8;--accent-success-subtle:rgba(117, 183, 152, 0.15);--accent-danger:#ea868f;--accent-danger-hover:#f0a3aa;--accent-danger-subtle:rgba(234, 134, 143, 0.15);--accent-warning:#ffda6a;--accent-warning-hover:#ffe484;--accent-warning-subtle:rgba(255, 218, 106, 0.15);--accent-info:#6edff6;--accent-info-hover:#8ee5f8;--accent-info-subtle:rgba(110, 223, 246, 0.15);--navbar-bg:#0f0f0f;--navbar-text:#e8e8e8;--navbar-hover:rgba(255, 255, 255, 0.1);--navbar-brand:#e8e8e8;--card-bg:var(--bg-surface);--card-border:var(--border-default);--card-header-bg:var(--bg-tertiary);--card-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);--card-shadow-hover:0 0.5rem 1rem rgba(0, 0, 0, 0.35);--input-bg:var(--bg-primary);--input-border:var(--border-default);--input-text:var(--text-primary);--input-placeholder:var(--text-muted);--input-focus-border:var(--accent-primary);--input-focus-shadow:0 0 0 0.25rem rgba(var(--accent-primary-rgb), 0.25);--input-disabled-bg:var(--bg-secondary);--table-bg:transparent;--table-border:var(--border-default);--table-striped-bg:rgba(255, 255, 255, 0.02);--table-hover-bg:rgba(255, 255, 255, 0.04);--table-header-bg:var(--bg-tertiary);--dropdown-bg:var(--bg-surface-elevated);--dropdown-border:var(--border-default);--dropdown-text:var(--text-primary);--dropdown-hover-bg:var(--bg-tertiary);--dropdown-divider:var(--border-default);--dropdown-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.35);--modal-bg:var(--bg-surface);--modal-border:var(--border-default);--modal-header-bg:var(--bg-tertiary);--modal-backdrop:rgba(0, 0, 0, 0.7);--btn-secondary-bg:#4a4a6a;--btn-secondary-border:#5a5a7a;--btn-light-bg:var(--bg-tertiary);--btn-light-border:var(--border-default);--btn-light-text:var(--text-primary);--badge-light-bg:var(--bg-tertiary);--badge-light-text:var(--text-primary);--list-group-bg:var(--bg-surface);--list-group-border:var(--border-default);--list-group-hover:var(--bg-tertiary);--list-group-active-bg:var(--accent-primary);--list-group-active-text:var(--text-inverse);--footer-bg:var(--bg-secondary);--footer-text:var(--text-muted);--scrollbar-track:var(--bg-primary);--scrollbar-thumb:var(--border-dark);--scrollbar-thumb-hover:var(--text-muted);--code-bg:var(--bg-tertiary);--code-text:#e685b5;--shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);--shadow-md:0 0.5rem 1rem rgba(0, 0, 0, 0.35);--shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.5);} /* ======================== ECO LIGHT THEME ======================== */ [data-theme="eco-light"]{--bg-body:#fafdfb;--bg-primary:#ffffff;--bg-secondary:#f0fdf4;--bg-tertiary:#dcfce7;--bg-surface:#ffffff;--bg-surface-hover:#f0fdf4;--bg-surface-elevated:#ffffff;--text-primary:#1f2937;--text-secondary:#4b5563;--text-muted:#9ca3af;--text-inverse:#ffffff;--text-link:#059669;--text-link-hover:#047857;--border-default:#d1fae5;--border-light:#ecfdf5;--border-dark:#a7f3d0;--border-focus:rgba(5, 150, 105, 0.5);--accent-primary:#059669;--accent-primary-hover:#047857;--accent-primary-active:#065f46;--accent-primary-subtle:rgba(5, 150, 105, 0.1);--accent-primary-rgb:5, 150, 105;--accent-success:#059669;--accent-success-hover:#047857;--accent-success-subtle:rgba(5, 150, 105, 0.1);--accent-danger:#ef4444;--accent-danger-hover:#dc2626;--accent-danger-subtle:rgba(239, 68, 68, 0.1);--accent-warning:#f59e0b;--accent-warning-hover:#d97706;--accent-warning-subtle:rgba(245, 158, 11, 0.1);--accent-info:#06b6d4;--accent-info-hover:#0891b2;--accent-info-subtle:rgba(6, 182, 212, 0.1);--navbar-bg:#059669;--navbar-text:#ffffff;--navbar-hover:rgba(255, 255, 255, 0.15);--navbar-brand:#ffffff;--card-bg:#ffffff;--card-border:#d1fae5;--card-header-bg:#f0fdf4;--card-shadow:0 0.125rem 0.25rem rgba(5, 150, 105, 0.08);--card-shadow-hover:0 0.5rem 1rem rgba(5, 150, 105, 0.15);--input-bg:#ffffff;--input-border:#a7f3d0;--input-text:var(--text-primary);--input-placeholder:var(--text-muted);--input-focus-border:var(--accent-primary);--input-focus-shadow:0 0 0 0.25rem rgba(var(--accent-primary-rgb), 0.2);--input-disabled-bg:#f0fdf4;--table-bg:transparent;--table-border:#d1fae5;--table-striped-bg:rgba(5, 150, 105, 0.03);--table-hover-bg:rgba(5, 150, 105, 0.06);--table-header-bg:#f0fdf4;--dropdown-bg:#ffffff;--dropdown-border:#d1fae5;--dropdown-text:var(--text-primary);--dropdown-hover-bg:#f0fdf4;--dropdown-divider:#d1fae5;--dropdown-shadow:0 0.5rem 1rem rgba(5, 150, 105, 0.15);--modal-bg:#ffffff;--modal-border:#d1fae5;--modal-header-bg:#f0fdf4;--modal-backdrop:rgba(0, 0, 0, 0.5);--btn-secondary-bg:#6b7280;--btn-secondary-border:#6b7280;--btn-light-bg:#f0fdf4;--btn-light-border:#d1fae5;--btn-light-text:var(--text-primary);--badge-light-bg:#f0fdf4;--badge-light-text:var(--text-primary);--list-group-bg:#ffffff;--list-group-border:#d1fae5;--list-group-hover:#f0fdf4;--list-group-active-bg:var(--accent-primary);--list-group-active-text:#ffffff;--footer-bg:#f0fdf4;--footer-text:var(--text-muted);--scrollbar-track:#f0fdf4;--scrollbar-thumb:#a7f3d0;--scrollbar-thumb-hover:#6ee7b7;--code-bg:#f0fdf4;--code-text:#059669;--shadow-sm:0 0.125rem 0.25rem rgba(5, 150, 105, 0.08);--shadow-md:0 0.5rem 1rem rgba(5, 150, 105, 0.12);--shadow-lg:0 1rem 3rem rgba(5, 150, 105, 0.15);} /* ======================== ECO DARK THEME ======================== */ [data-theme="eco-dark"]{--bg-body:#0d1117;--bg-primary:#161b22;--bg-secondary:#010409;--bg-tertiary:#21262d;--bg-surface:#161b22;--bg-surface-hover:#21262d;--bg-surface-elevated:#1c2128;--text-primary:#c9d1d9;--text-secondary:#9ca3af;--text-muted:#8b949e;--text-inverse:#0d1117;--text-link:#10b981;--text-link-hover:#34d399;--border-default:#30363d;--border-light:#21262d;--border-dark:#484f58;--border-focus:rgba(16, 185, 129, 0.5);--accent-primary:#10b981;--accent-primary-hover:#34d399;--accent-primary-active:#059669;--accent-primary-subtle:rgba(16, 185, 129, 0.15);--accent-primary-rgb:16, 185, 129;--accent-success:#10b981;--accent-success-hover:#34d399;--accent-success-subtle:rgba(16, 185, 129, 0.15);--accent-danger:#f87171;--accent-danger-hover:#fca5a5;--accent-danger-subtle:rgba(248, 113, 113, 0.15);--accent-warning:#fbbf24;--accent-warning-hover:#fcd34d;--accent-warning-subtle:rgba(251, 191, 36, 0.15);--accent-info:#22d3ee;--accent-info-hover:#67e8f9;--accent-info-subtle:rgba(34, 211, 238, 0.15);--navbar-bg:#010409;--navbar-text:#c9d1d9;--navbar-hover:rgba(16, 185, 129, 0.15);--navbar-brand:#10b981;--card-bg:var(--bg-surface);--card-border:var(--border-default);--card-header-bg:var(--bg-tertiary);--card-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);--card-shadow-hover:0 0.5rem 1rem rgba(16, 185, 129, 0.1);--input-bg:var(--bg-primary);--input-border:var(--border-default);--input-text:var(--text-primary);--input-placeholder:var(--text-muted);--input-focus-border:var(--accent-primary);--input-focus-shadow:0 0 0 0.25rem rgba(var(--accent-primary-rgb), 0.2);--input-disabled-bg:var(--bg-tertiary);--table-bg:transparent;--table-border:var(--border-default);--table-striped-bg:rgba(16, 185, 129, 0.03);--table-hover-bg:rgba(16, 185, 129, 0.06);--table-header-bg:var(--bg-tertiary);--dropdown-bg:var(--bg-surface-elevated);--dropdown-border:var(--border-default);--dropdown-text:var(--text-primary);--dropdown-hover-bg:var(--bg-tertiary);--dropdown-divider:var(--border-default);--dropdown-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.4);--modal-bg:var(--bg-surface);--modal-border:var(--border-default);--modal-header-bg:var(--bg-tertiary);--modal-backdrop:rgba(0, 0, 0, 0.75);--btn-secondary-bg:#3d444d;--btn-secondary-border:#484f58;--btn-light-bg:var(--bg-tertiary);--btn-light-border:var(--border-default);--btn-light-text:var(--text-primary);--badge-light-bg:var(--bg-tertiary);--badge-light-text:var(--text-primary);--list-group-bg:var(--bg-surface);--list-group-border:var(--border-default);--list-group-hover:var(--bg-tertiary);--list-group-active-bg:var(--accent-primary);--list-group-active-text:var(--text-inverse);--footer-bg:var(--bg-secondary);--footer-text:var(--text-muted);--scrollbar-track:var(--bg-primary);--scrollbar-thumb:var(--border-dark);--scrollbar-thumb-hover:var(--text-muted);--code-bg:var(--bg-tertiary);--code-text:#10b981;--shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);--shadow-md:0 0.5rem 1rem rgba(0, 0, 0, 0.4);--shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.5);} /* ============================================ GLOBAL ELEMENT STYLING ============================================ */ html, body, .navbar, .card, .modal-content, .dropdown-menu, .list-group-item, .form-control, .form-select, .btn, .table, footer, .bg-light, .bg-white, .bg-primary, .bg-secondary{transition:var(--theme-transition);} body{background-color:var(--bg-body);color:var(--text-primary);} a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item){color:var(--text-link);} a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover{color:var(--text-link-hover);} /* ============================================ BOOTSTRAP COMPONENT OVERRIDES ============================================ */ .navbar{background-color:var(--navbar-bg) !important;} .navbar .navbar-brand, .navbar .nav-link, .navbar .navbar-text{color:var(--navbar-text) !important;} .navbar .nav-link:hover, .navbar .nav-link:focus{background-color:var(--navbar-hover);} [data-theme="eco-dark"] .navbar-brand{color:var(--navbar-brand) !important;} .card{background-color:var(--card-bg);border-color:var(--card-border);box-shadow:var(--card-shadow);} .card:hover{box-shadow:var(--card-shadow-hover);} .card-header{background-color:var(--card-header-bg);border-bottom-color:var(--card-border);color:var(--text-primary);} .card-footer{background-color:var(--card-header-bg);border-top-color:var(--card-border);} .card-body, .card-text{color:var(--text-primary);} .form-control, .form-select{background-color:var(--input-bg);border-color:var(--input-border);color:var(--input-text);} .form-control::placeholder{color:var(--input-placeholder);} .form-control:focus, .form-select:focus{background-color:var(--input-bg);border-color:var(--input-focus-border);box-shadow:var(--input-focus-shadow);color:var(--input-text);} .form-control:disabled, .form-control[readonly], .form-select:disabled{background-color:var(--input-disabled-bg);color:var(--text-secondary);} .form-label{color:var(--text-primary);} .form-text{color:var(--text-muted);} .form-check-input{background-color:var(--input-bg);border-color:var(--input-border);} .form-check-input:checked{background-color:var(--accent-primary);border-color:var(--accent-primary);} .input-group-text{background-color:var(--bg-tertiary);border-color:var(--input-border);color:var(--text-primary);} .table{--bs-table-bg:var(--table-bg);--bs-table-border-color:var(--table-border);--bs-table-striped-bg:var(--table-striped-bg);--bs-table-hover-bg:var(--table-hover-bg);color:var(--text-primary);} .table > thead{background-color:var(--table-header-bg);} .table > thead th{color:var(--text-primary);border-bottom-color:var(--table-border);} .table > tbody > tr > td{border-color:var(--table-border);color:var(--text-primary);} .table > tbody > tr{color:var(--text-primary);} .dropdown-menu{background-color:var(--dropdown-bg);border-color:var(--dropdown-border);box-shadow:var(--dropdown-shadow);} .dropdown-item{color:var(--dropdown-text);} .dropdown-item:hover, .dropdown-item:focus{background-color:var(--dropdown-hover-bg);color:var(--text-primary);} .dropdown-item.active, .dropdown-item:active{background-color:var(--accent-primary);color:var(--text-inverse);} .dropdown-divider{border-color:var(--dropdown-divider);} .dropdown-header{color:var(--text-secondary);} .modal-content{background-color:var(--modal-bg);border-color:var(--modal-border);} .modal-header{background-color:var(--modal-header-bg);border-bottom-color:var(--modal-border);color:var(--text-primary);} .modal-body{color:var(--text-primary);} .modal-footer{background-color:var(--modal-header-bg);border-top-color:var(--modal-border);} .modal-backdrop{background-color:var(--modal-backdrop);} .btn-close{filter:var(--btn-close-filter, none);} [data-theme="dark"] .btn-close, [data-theme="eco-dark"] .btn-close{filter:invert(1) grayscale(100%) brightness(200%);} .btn-primary{--bs-btn-bg:var(--accent-primary);--bs-btn-border-color:var(--accent-primary);--bs-btn-hover-bg:var(--accent-primary-hover);--bs-btn-hover-border-color:var(--accent-primary-hover);--bs-btn-active-bg:var(--accent-primary-active);--bs-btn-active-border-color:var(--accent-primary-active);} .btn-success{--bs-btn-bg:var(--accent-success);--bs-btn-border-color:var(--accent-success);--bs-btn-hover-bg:var(--accent-success-hover);--bs-btn-hover-border-color:var(--accent-success-hover);} .btn-danger{--bs-btn-bg:var(--accent-danger);--bs-btn-border-color:var(--accent-danger);--bs-btn-hover-bg:var(--accent-danger-hover);--bs-btn-hover-border-color:var(--accent-danger-hover);} .btn-warning{--bs-btn-bg:var(--accent-warning);--bs-btn-border-color:var(--accent-warning);--bs-btn-hover-bg:var(--accent-warning-hover);--bs-btn-hover-border-color:var(--accent-warning-hover);} .btn-info{--bs-btn-bg:var(--accent-info);--bs-btn-border-color:var(--accent-info);--bs-btn-hover-bg:var(--accent-info-hover);--bs-btn-hover-border-color:var(--accent-info-hover);} .btn-secondary{--bs-btn-bg:var(--btn-secondary-bg);--bs-btn-border-color:var(--btn-secondary-border);} .btn-light{--bs-btn-bg:var(--btn-light-bg);--bs-btn-border-color:var(--btn-light-border);--bs-btn-color:var(--btn-light-text);} .btn-outline-primary{--bs-btn-color:var(--accent-primary);--bs-btn-border-color:var(--accent-primary);--bs-btn-hover-bg:var(--accent-primary);--bs-btn-hover-border-color:var(--accent-primary);} .btn-outline-success{--bs-btn-color:var(--accent-success);--bs-btn-border-color:var(--accent-success);--bs-btn-hover-bg:var(--accent-success);--bs-btn-hover-border-color:var(--accent-success);} .btn-outline-danger{--bs-btn-color:var(--accent-danger);--bs-btn-border-color:var(--accent-danger);--bs-btn-hover-bg:var(--accent-danger);--bs-btn-hover-border-color:var(--accent-danger);} .btn-outline-secondary{--bs-btn-color:var(--text-secondary);--bs-btn-border-color:var(--border-default);} .list-group-item{background-color:var(--list-group-bg);border-color:var(--list-group-border);color:var(--text-primary);} .list-group-item:hover{background-color:var(--list-group-hover);} .list-group-item.active{background-color:var(--list-group-active-bg);border-color:var(--list-group-active-bg);color:var(--list-group-active-text);} .list-group-item-action:hover, .list-group-item-action:focus{background-color:var(--list-group-hover);color:var(--text-primary);} .badge{font-weight:500;} .badge.bg-primary{background-color:var(--accent-primary) !important;} .badge.bg-success{background-color:var(--accent-success) !important;} .badge.bg-danger{background-color:var(--accent-danger) !important;} .badge.bg-warning{background-color:var(--accent-warning) !important;} .badge.bg-info{background-color:var(--accent-info) !important;} .badge.bg-light{background-color:var(--badge-light-bg) !important;color:var(--badge-light-text) !important;} .badge.bg-secondary{background-color:var(--btn-secondary-bg) !important;} .alert-primary{background-color:var(--accent-primary-subtle);border-color:var(--accent-primary);color:var(--accent-primary);} .alert-success{background-color:var(--accent-success-subtle);border-color:var(--accent-success);color:var(--accent-success);} .alert-danger{background-color:var(--accent-danger-subtle);border-color:var(--accent-danger);color:var(--accent-danger);} .alert-warning{background-color:var(--accent-warning-subtle);border-color:var(--accent-warning);color:var(--text-primary);} .alert-info{background-color:var(--accent-info-subtle);border-color:var(--accent-info);color:var(--accent-info);} .progress{background-color:var(--bg-tertiary);} .progress-bar{background-color:var(--accent-primary);} .page-link{background-color:var(--bg-surface);border-color:var(--border-default);color:var(--text-link);} .page-link:hover{background-color:var(--bg-surface-hover);border-color:var(--border-default);color:var(--text-link-hover);} .page-item.active .page-link{background-color:var(--accent-primary);border-color:var(--accent-primary);} .page-item.disabled .page-link{background-color:var(--bg-surface);border-color:var(--border-default);color:var(--text-muted);} .breadcrumb{background-color:var(--bg-secondary);} .breadcrumb-item + .breadcrumb-item::before{color:var(--text-muted);} .breadcrumb-item.active{color:var(--text-secondary);} .tooltip-inner{background-color:var(--bg-tertiary);color:var(--text-primary);} .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before{border-top-color:var(--bg-tertiary);} .popover{background-color:var(--bg-surface-elevated);border-color:var(--border-default);} .popover-header{background-color:var(--bg-tertiary);border-color:var(--border-default);color:var(--text-primary);} .popover-body{color:var(--text-primary);} .accordion-item{background-color:var(--bg-surface);border-color:var(--border-default);} .accordion-button{background-color:var(--bg-surface);color:var(--text-primary);} .accordion-button:not(.collapsed){background-color:var(--accent-primary-subtle);color:var(--accent-primary);} .accordion-button:focus{border-color:var(--accent-primary);box-shadow:var(--input-focus-shadow);} .nav-tabs .nav-link{color:var(--text-secondary);border-color:transparent;} .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus{border-color:var(--border-default);color:var(--text-primary);} .nav-tabs .nav-link.active{background-color:var(--bg-surface);border-color:var(--border-default) var(--border-default) var(--bg-surface);color:var(--text-primary);} .nav-pills .nav-link{color:var(--text-secondary);} .nav-pills .nav-link:hover{background-color:var(--bg-surface-hover);color:var(--text-primary);} .nav-pills .nav-link.active{background-color:var(--accent-primary);color:var(--text-inverse);} .btn-close{opacity:0.75;} footer, .footer{background-color:var(--footer-bg) !important;color:var(--footer-text);} footer .text-muted, .footer .text-muted{color:var(--footer-text) !important;} .bg-light{background-color:var(--bg-secondary) !important;} .bg-white{background-color:var(--bg-surface) !important;} .bg-body{background-color:var(--bg-body) !important;} .text-muted{color:var(--text-muted) !important;} .text-secondary{color:var(--text-secondary) !important;} .text-primary{color:var(--accent-primary) !important;} .text-success{color:var(--accent-success) !important;} .text-danger{color:var(--accent-danger) !important;} .text-warning{color:var(--accent-warning) !important;} .text-info{color:var(--accent-info) !important;} .text-dark{color:var(--text-primary) !important;} .text-body{color:var(--text-primary) !important;} .text-body-secondary{color:var(--text-secondary) !important;} p, span, label, strong, em, small, h1, h2, h3, h4, h5, h6{color:inherit;} .card-text, .card-title{color:var(--text-primary);} .list-group-item{background-color:var(--bg-surface);border-color:var(--border-default);color:var(--text-primary);} .list-group-item.active{background-color:var(--accent-primary);border-color:var(--accent-primary);color:var(--text-inverse);} .border{border-color:var(--border-default) !important;} .border-top, .border-bottom, .border-start, .border-end{border-color:var(--border-default) !important;} hr{border-color:var(--border-default);opacity:1;} code{background-color:var(--code-bg);color:var(--code-text);padding:0.125rem 0.375rem;border-radius:0.25rem;} pre{background-color:var(--code-bg);color:var(--text-primary);padding:1rem;border-radius:0.375rem;} pre code{background-color:transparent;padding:0;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:var(--scrollbar-track);} ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:5px;} ::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);} /* ============================================ THEME TOGGLE BUTTON STYLES ============================================ */ .theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;background:transparent;color:var(--navbar-text);cursor:pointer;border-radius:50%;transition:background-color 0.2s ease, transform 0.2s ease;} .theme-toggle:hover{background-color:var(--navbar-hover);transform:scale(1.1);} .theme-toggle:active{transform:scale(0.95);} .theme-toggle .bi{font-size:1.25rem;transition:transform 0.3s ease;} .theme-toggle:hover .bi{transform:rotate(15deg);} .theme-toggle .bi-sun{transform:rotate(0deg);} .theme-toggle .bi-moon-fill{transform:rotate(-15deg);} [data-theme="dark"] .theme-toggle:hover .bi-sun, [data-theme="eco-dark"] .theme-toggle:hover .bi-sun{transform:rotate(45deg);} /* ============================================ THEME PREVIEW CARDS (Settings Page) ============================================ */ .theme-preview-card{cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;border:2px solid transparent;border-radius:0.5rem;overflow:hidden;} .theme-preview-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);} .theme-preview-card.selected{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-subtle);} .theme-preview-card .preview-header{padding:0.75rem 1rem;font-weight:600;font-size:0.875rem;} .theme-preview-card .preview-body{padding:0.75rem 1rem;font-size:0.75rem;} .theme-preview-card .preview-accent{height:4px;width:100%;} .theme-preview-card.preview-light{background-color:#ffffff;color:#212529;} .theme-preview-card.preview-light .preview-header{background-color:#0d6efd;color:#ffffff;} .theme-preview-card.preview-light .preview-body{background-color:#f8f9fa;} .theme-preview-card.preview-light .preview-accent{background-color:#0d6efd;} .theme-preview-card.preview-dark{background-color:#16213e;color:#e8e8e8;} .theme-preview-card.preview-dark .preview-header{background-color:#0f0f0f;color:#e8e8e8;} .theme-preview-card.preview-dark .preview-body{background-color:#1e1e3f;} .theme-preview-card.preview-dark .preview-accent{background-color:#6ea8fe;} .theme-preview-card.preview-eco-light{background-color:#ffffff;color:#1f2937;} .theme-preview-card.preview-eco-light .preview-header{background-color:#059669;color:#ffffff;} .theme-preview-card.preview-eco-light .preview-body{background-color:#f0fdf4;} .theme-preview-card.preview-eco-light .preview-accent{background-color:#059669;} .theme-preview-card.preview-eco-dark{background-color:#161b22;color:#c9d1d9;} .theme-preview-card.preview-eco-dark .preview-header{background-color:#010409;color:#10b981;} .theme-preview-card.preview-eco-dark .preview-body{background-color:#21262d;} .theme-preview-card.preview-eco-dark .preview-accent{background-color:#10b981;} .theme-preview-card .check-icon{position:absolute;top:0.5rem;right:0.5rem;width:24px;height:24px;border-radius:50%;background-color:var(--accent-primary);color:white;display:none;align-items:center;justify-content:center;font-size:0.875rem;} .theme-preview-card.selected .check-icon{display:flex;} /* ============================================ FULLCALENDAR THEME INTEGRATION ============================================ */ .fc{--fc-page-bg-color:var(--bg-surface);--fc-neutral-bg-color:var(--bg-secondary);--fc-border-color:var(--border-default);--fc-button-bg-color:var(--accent-primary);--fc-button-border-color:var(--accent-primary);--fc-button-hover-bg-color:var(--accent-primary-hover);--fc-button-hover-border-color:var(--accent-primary-hover);--fc-button-active-bg-color:var(--accent-primary-active);--fc-button-active-border-color:var(--accent-primary-active);--fc-event-bg-color:var(--accent-primary);--fc-event-border-color:var(--accent-primary);--fc-today-bg-color:var(--accent-primary-subtle);} .fc .fc-toolbar-title{color:var(--text-primary);} .fc th{color:var(--text-primary);} .fc .fc-daygrid-day-number, .fc .fc-col-header-cell-cushion{color:var(--text-primary);} .fc .fc-daygrid-day.fc-day-today{background-color:var(--accent-primary-subtle);} /* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width:768px){.theme-toggle{width:36px;height:36px;} .theme-toggle .bi{font-size:1.125rem;} .theme-preview-card .preview-header{padding:0.5rem 0.75rem;} .theme-preview-card .preview-body{padding:0.5rem 0.75rem;}}