/*! ══════════════════════════════════════════════════════════════ * TAFEIL LIGHT THEME — Variable Overrides * Applied when is set. * Loaded AFTER dark-theme.css so it only needs to override variables. * ══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ SECTION 1: CSS Custom Properties Override ═══════════════════════════════════════════════════════════════ */ [data-bs-theme="light"] { /* ── Backgrounds ── */ --t-bg-deep: #F0F2F5; --t-bg-body: #F5F7FA; --t-bg-surface: #FFFFFF; --t-bg-card: #FFFFFF; --t-bg-card-hover: #F8FAFC; --t-bg-elevated: #F0F2F5; --t-bg-input: #F5F7FA; --t-body-bg: #F5F7FA; --t-card-bg: #FFFFFF; /* ── Brand Teal ── */ --t-brand-darkest: #1B544A; --t-brand-dark: #2D8A79; --t-brand: #2E9682; --t-brand-light: #38A793; --t-brand-lightest: #E0F5F0; --t-brand-glow: rgba(56, 167, 147, 0.08); --t-brand-glow-md: rgba(56, 167, 147, 0.14); --t-brand-glow-lg: rgba(56, 167, 147, 0.22); /* ── Text ── */ --t-text-primary: #1A1D26; --t-text-secondary: #5A6270; --t-text-tertiary: #9CA3AF; --t-text-inverse: #FFFFFF; /* ── Semantic ── */ --t-success: #1A8D36; --t-success-soft: rgba(26, 141, 54, 0.10); --t-warning: #B8860B; --t-warning-soft: rgba(184, 134, 11, 0.10); --t-danger: #DC2626; --t-danger-soft: rgba(220, 38, 38, 0.10); --t-info: #2563EB; --t-info-soft: rgba(37, 99, 235, 0.10); /* ── Glassmorphism ── */ --t-glass-bg: rgba(255, 255, 255, 0.70); --t-glass-border: rgba(0, 0, 0, 0.06); --t-glass-blur: 16px; /* ── Adaptive overlay tokens ── */ --t-overlay-subtle: rgba(0, 0, 0, 0.03); --t-overlay-light: rgba(0, 0, 0, 0.05); --t-overlay-medium: rgba(0, 0, 0, 0.08); --t-overlay-strong: rgba(0, 0, 0, 0.12); --t-border-subtle: rgba(0, 0, 0, 0.06); --t-border-medium: rgba(0, 0, 0, 0.10); --t-border-strong: rgba(0, 0, 0, 0.16); /* ── Bootstrap overrides ── */ --bs-body-bg: #F5F7FA; --bs-body-color: #1A1D26; --bs-border-color: rgba(0, 0, 0, 0.10); --bs-border-color-translucent: rgba(0, 0, 0, 0.06); color-scheme: light; } /* Dark-mode adaptive tokens default */ :root { --t-overlay-subtle: rgba(255, 255, 255, 0.03); --t-overlay-light: rgba(255, 255, 255, 0.05); --t-overlay-medium: rgba(255, 255, 255, 0.08); --t-overlay-strong: rgba(255, 255, 255, 0.12); --t-border-subtle: rgba(255, 255, 255, 0.06); --t-border-medium: rgba(255, 255, 255, 0.10); --t-border-strong: rgba(255, 255, 255, 0.16); } /* ═══════════════════════════════════════════════════════════════ SECTION 2: Component Overrides ═══════════════════════════════════════════════════════════════ */ /* Body */ [data-bs-theme="light"] body { background: var(--t-bg-body) !important; color: var(--t-text-primary); } /* ── Sidebar ── */ [data-bs-theme="light"] .sidebar-rail { background: #FFFFFF !important; border-right: 1px solid var(--t-border-subtle) !important; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04) !important; } [data-bs-theme="light"] .sidebar-rail .nav-item .nav-icon { color: var(--t-text-secondary); } [data-bs-theme="light"] .sidebar-rail .nav-item:hover .nav-icon, [data-bs-theme="light"] .sidebar-rail .nav-item:hover .nav-label { color: var(--t-brand); } [data-bs-theme="light"] .sidebar-rail .nav-item.active .nav-icon { color: #FFFFFF; } [data-bs-theme="light"] .sidebar-rail .nav-label { color: var(--t-text-secondary); } [data-bs-theme="light"] .sidebar-rail .sidebar-brand img { filter: brightness(0.1); } /* ── Topbar ── */ [data-bs-theme="light"] .reimagined-topbar { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--t-border-subtle) !important; } [data-bs-theme="light"] .reimagined-topbar h1 { color: var(--t-text-primary) !important; } [data-bs-theme="light"] .reimagined-topbar h1 small { color: var(--t-text-secondary) !important; } /* ── Cards ── */ [data-bs-theme="light"] .stat-card, [data-bs-theme="light"] .glass-card { background: #FFFFFF !important; border: 1px solid var(--t-border-subtle) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06) !important; } [data-bs-theme="light"] .stat-card:hover, [data-bs-theme="light"] .glass-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important; border-color: var(--t-brand-glow-md) !important; } [data-bs-theme="light"] .stat-card .stat-value { color: var(--t-text-primary) !important; } [data-bs-theme="light"] .stat-card .stat-label { color: var(--t-text-secondary) !important; } /* ── Status badges ── */ [data-bs-theme="light"] .status-badge { background: rgba(0, 0, 0, 0.05) !important; color: var(--t-text-secondary) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; } /* ── Tables ── */ [data-bs-theme="light"] .history-table thead { background: var(--t-bg-elevated) !important; } [data-bs-theme="light"] .history-table thead th { color: var(--t-text-secondary) !important; border-bottom: 1px solid var(--t-border-subtle) !important; } [data-bs-theme="light"] .history-table tbody tr { border-bottom: 1px solid var(--t-border-subtle) !important; } [data-bs-theme="light"] .history-table tbody tr:hover { background: var(--t-bg-card-hover) !important; } [data-bs-theme="light"] .history-table tbody td { color: var(--t-text-primary) !important; } /* ── Tab bar ── */ [data-bs-theme="light"] .tab-bar { background: var(--t-bg-elevated) !important; } [data-bs-theme="light"] .tab-bar .tab-item { color: var(--t-text-secondary) !important; } [data-bs-theme="light"] .tab-bar .tab-item:hover { color: var(--t-text-primary) !important; } [data-bs-theme="light"] .tab-bar .tab-item.active { background: var(--t-brand) !important; color: #FFFFFF !important; } /* ── Section headers ── */ [data-bs-theme="light"] .section-header h3 { color: var(--t-text-primary) !important; } [data-bs-theme="light"] .section-header h3 i { color: var(--t-brand) !important; } /* ── Form controls ── */ [data-bs-theme="light"] .form-control, [data-bs-theme="light"] .form-select { background: #FFFFFF !important; border-color: rgba(0, 0, 0, 0.12) !important; color: var(--t-text-primary) !important; } [data-bs-theme="light"] .form-control:focus, [data-bs-theme="light"] .form-select:focus { border-color: var(--t-brand) !important; box-shadow: 0 0 0 3px var(--t-brand-glow) !important; } [data-bs-theme="light"] .form-control::placeholder { color: var(--t-text-tertiary) !important; } [data-bs-theme="light"] .input-group-text { background: var(--t-bg-elevated) !important; border-color: rgba(0, 0, 0, 0.12) !important; color: var(--t-text-secondary) !important; } /* ── Dropdowns ── */ [data-bs-theme="light"] .dropdown-menu { background: #FFFFFF !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important; } [data-bs-theme="light"] .dropdown-item { color: var(--t-text-primary) !important; } [data-bs-theme="light"] .dropdown-item:hover { background: var(--t-bg-elevated) !important; } /* ── Pagination ── */ [data-bs-theme="light"] .history-pagination { color: var(--t-text-secondary) !important; } [data-bs-theme="light"] .history-pagination button { background: #FFFFFF !important; border: 1px solid rgba(0, 0, 0, 0.10) !important; color: var(--t-text-primary) !important; } [data-bs-theme="light"] .history-pagination button:hover { background: var(--t-bg-elevated) !important; } /* ── Quota bars ── */ [data-bs-theme="light"] .quota-card { background: #FFFFFF !important; border: 1px solid var(--t-border-subtle) !important; } [data-bs-theme="light"] .quota-bar-bg { background: var(--t-bg-elevated) !important; } /* ── User avatar ── */ [data-bs-theme="light"] .user-avatar { background: var(--t-brand-glow) !important; color: var(--t-brand) !important; } /* ── Alerts ── */ [data-bs-theme="light"] .alert-danger { background: var(--t-danger-soft) !important; border-color: rgba(220, 38, 38, 0.20) !important; } /* ── Scrollbar ── */ [data-bs-theme="light"] ::-webkit-scrollbar-track { background: var(--t-bg-body); } [data-bs-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); } [data-bs-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); } /* ── Modal ── */ [data-bs-theme="light"] .modal-content { background: #FFFFFF !important; border: 1px solid var(--t-border-subtle) !important; } [data-bs-theme="light"] .modal-header { border-bottom-color: var(--t-border-subtle) !important; } [data-bs-theme="light"] .modal-footer { border-top-color: var(--t-border-subtle) !important; } /* ── Bootstrap table ── */ [data-bs-theme="light"] .table { color: var(--t-text-primary) !important; } [data-bs-theme="light"] .table thead th { background: var(--t-bg-elevated) !important; color: var(--t-text-secondary) !important; border-bottom: 1px solid var(--t-border-subtle) !important; } [data-bs-theme="light"] .table tbody td { border-bottom: 1px solid var(--t-border-subtle) !important; } [data-bs-theme="light"] .table-hover tbody tr:hover { background: var(--t-bg-card-hover) !important; } /* ═══════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ═══════════════════════════════════════════════════════════════ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--t-border-subtle); background: var(--t-overlay-subtle); color: var(--t-text-secondary); cursor: pointer; transition: all 0.25s var(--t-ease); font-size: 16px; padding: 0; } .theme-toggle:hover { background: var(--t-brand-glow); color: var(--t-brand); border-color: var(--t-brand-glow-md); transform: rotate(20deg); } .theme-toggle .icon-moon { display: inline; } .theme-toggle .icon-sun { display: none; } [data-bs-theme="light"] .theme-toggle .icon-moon { display: none; } [data-bs-theme="light"] .theme-toggle .icon-sun { display: inline; } /* ═══════════════════════════════════════════════════════════════ AUTH PAGES (Login / Register / Reset) ═══════════════════════════════════════════════════════════════ */ [data-bs-theme="light"] .authentication-wrapper { background: var(--t-bg-body) !important; } [data-bs-theme="light"] .authentication-inner>.d-flex { background: #FFFFFF !important; } [data-bs-theme="light"] .authentication-inner .form-control { background: #FFFFFF !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; color: var(--t-text-primary) !important; } [data-bs-theme="light"] .authentication-inner>div[style*="linear-gradient"] { background: linear-gradient(135deg, rgba(46, 150, 130, 0.06) 0%, rgba(46, 150, 130, 0.02) 100%) !important; } [data-bs-theme="light"] .authentication-inner>.d-flex[style*="background: var(--t-card-bg)"] { background: #FFFFFF !important; } /* ═══════════════════════════════════════════════════════════════ SECTION 3: INLINE STYLE OVERRIDES Fix hardcoded rgba(255,255,255,...) in blade inline styles ═══════════════════════════════════════════════════════════════ */ /* White-tinted borders → dark-tinted */ [data-bs-theme="light"] [style*="rgba(255,255,255,0.04)"], [data-bs-theme="light"] [style*="rgba(255,255,255,0.06)"], [data-bs-theme="light"] [style*="rgba(255,255,255,0.08)"], [data-bs-theme="light"] [style*="rgba(255,255,255,0.1)"], [data-bs-theme="light"] [style*="rgba(255,255,255,0.12)"] { border-color: rgba(0, 0, 0, 0.08) !important; } /* White-tinted backgrounds → dark-tinted */ [data-bs-theme="light"] [style*="background: rgba(255,255,255,0.03)"], [data-bs-theme="light"] [style*="background: rgba(255,255,255,0.04)"], [data-bs-theme="light"] [style*="background: rgba(255,255,255,0.06)"], [data-bs-theme="light"] [style*="background:rgba(255,255,255,0.06)"] { background: rgba(0, 0, 0, 0.03) !important; } [data-bs-theme="light"] [style*="background: rgba(255,255,255,0.08)"], [data-bs-theme="light"] [style*="background: rgba(255,255,255,0.1)"], [data-bs-theme="light"] [style*="background: rgba(255,255,255,0.12)"] { background: rgba(0, 0, 0, 0.05) !important; } /* Cards & card headers */ [data-bs-theme="light"] .card { background: #FFFFFF !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-bs-theme="light"] .card-header { border-bottom-color: rgba(0, 0, 0, 0.08) !important; } /* Table row inline borders */ [data-bs-theme="light"] tr[style*="border-bottom"] { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } /* HR / dividers */ [data-bs-theme="light"] hr, [data-bs-theme="light"] .dropdown-divider { border-color: rgba(0, 0, 0, 0.08) !important; } /* Alerts with inline teal bg */ [data-bs-theme="light"] .alert[style*="background: rgba(56,167,147"] { background: rgba(46, 150, 130, 0.08) !important; border-color: rgba(46, 150, 130, 0.20) !important; } /* Alerts with inline red bg */ [data-bs-theme="light"] .alert[style*="background: rgba(220,53,69"] { background: rgba(220, 53, 69, 0.08) !important; border-color: rgba(220, 53, 69, 0.20) !important; color: #DC2626 !important; } /* Danger text #f87171 */ [data-bs-theme="light"] [style*="color: #f87171"] { color: #DC2626 !important; } /* White text on colored bg → keep white */ [data-bs-theme="light"] [style*="color: #fff"], [data-bs-theme="light"] [style*="color:#fff"] { color: #fff !important; } /* Password requirements box */ [data-bs-theme="light"] #pwdRequirements { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* Login lang-switcher pills */ [data-bs-theme="light"] a[style*="background:rgba(255,255,255,0.06)"] { background: rgba(0, 0, 0, 0.05) !important; color: var(--t-text-secondary) !important; border-color: rgba(0, 0, 0, 0.10) !important; } /* Password reset card */ [data-bs-theme="light"] .d-flex.justify-content-center>[style*="background: var(--t-card-bg)"] { background: #FFFFFF !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important; } /* Glass border */ [data-bs-theme="light"] [style*="border: 1px solid var(--t-glass-border)"] { border-color: rgba(0, 0, 0, 0.08) !important; } /* Modal inline styles */ [data-bs-theme="light"] .modal-content[style*="background"], [data-bs-theme="light"] .modal-content[style*="border"] { background: #FFFFFF !important; border-color: rgba(0, 0, 0, 0.10) !important; } [data-bs-theme="light"] .modal-header[style*="border"], [data-bs-theme="light"] .modal-footer[style*="border"] { border-color: rgba(0, 0, 0, 0.08) !important; } /* Freepik quality buttons */ [data-bs-theme="light"] .freepik-quality-btn { background: var(--t-bg-elevated) !important; border-color: rgba(0, 0, 0, 0.10) !important; color: var(--t-text-primary) !important; } [data-bs-theme="light"] .freepik-quality-btn:hover { border-color: var(--t-brand) !important; background: var(--t-brand-glow) !important; } /* Format download buttons */ [data-bs-theme="light"] .btn[style*="background: var(--t-bg-surface)"] { background: var(--t-bg-elevated) !important; border-color: rgba(0, 0, 0, 0.10) !important; color: var(--t-text-primary) !important; } /* SweetAlert2 */ [data-bs-theme="light"] .swal2-popup { background: #FFFFFF !important; color: var(--t-text-primary) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04) !important; } [data-bs-theme="light"] .swal2-title { color: var(--t-text-primary) !important; } [data-bs-theme="light"] .swal2-html-container { color: var(--t-text-secondary) !important; } [data-bs-theme="light"] .swal2-confirm { background-color: var(--t-brand) !important; border-color: var(--t-brand) !important; color: #FFFFFF !important; } [data-bs-theme="light"] .swal2-confirm:hover { background-color: var(--t-brand-dark) !important; } [data-bs-theme="light"] .swal2-cancel { background-color: #F0F2F5 !important; border: 1px solid rgba(0, 0, 0, 0.10) !important; color: var(--t-text-secondary) !important; } [data-bs-theme="light"] .swal2-cancel:hover { background-color: #E5E7EB !important; color: var(--t-text-primary) !important; } [data-bs-theme="light"] .swal2-icon.swal2-error { border-color: var(--t-danger) !important; } [data-bs-theme="light"] .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--t-danger) !important; } [data-bs-theme="light"] .swal2-icon.swal2-warning { border-color: var(--t-warning) !important; color: var(--t-warning) !important; } [data-bs-theme="light"] .swal2-icon.swal2-info { border-color: var(--t-info) !important; color: var(--t-info) !important; } [data-bs-theme="light"] .swal2-close { color: var(--t-text-tertiary) !important; } [data-bs-theme="light"] .swal2-close:hover { color: var(--t-text-primary) !important; } [data-bs-theme="light"] .swal2-input, [data-bs-theme="light"] .swal2-textarea { background: #FFFFFF !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; color: var(--t-text-primary) !important; } [data-bs-theme="light"] .swal2-input:focus, [data-bs-theme="light"] .swal2-textarea:focus { border-color: var(--t-brand) !important; box-shadow: 0 0 0 3px var(--t-brand-glow) !important; } [data-bs-theme="light"] .swal2-container { backdrop-filter: blur(4px) !important; } /* Account/service cards */ [data-bs-theme="light"] .account-card { background: #FFFFFF !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; } /* Sidebar footer */ [data-bs-theme="light"] .sidebar-footer { border-top-color: rgba(0, 0, 0, 0.06) !important; } /* Toast notifications */ [data-bs-theme="light"] .toast { background: #FFFFFF !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* Badge/pill tags */ [data-bs-theme="light"] span[style*="background: var(--t-bg-surface)"] { background: var(--t-bg-elevated) !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* Sneat layout menu */ [data-bs-theme="light"] .bg-menu-theme, [data-bs-theme="light"] .layout-menu { background: #FFFFFF !important; } /* ── Body background fix (overrides inline style on body) ── */ [data-bs-theme="light"] [style*="background: var(--t-bg-deep"] { background: var(--t-bg-deep) !important; } /* ═══════════════════════════════════════════════════════════════ SMOOTH THEME TRANSITION ═══════════════════════════════════════════════════════════════ */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; }