/* ===================================================================== Sabaq Theme System --------------------------------------------------------------------- Themes: default (School) | islamic | professional | dark Applied via a `theme-` class on (see master.blade.php). `default` intentionally has no overrides — it keeps the existing white sidebar + green "school" look. Other themes override the key surfaces (sidebar, navbar, content, cards) using body-scoped `!important` rules so they win over the inline component styles. Keep the theme list in sync with App\Http\Controllers\ThemeController. ===================================================================== */ /* ===================================================================== BRAND COLOR SCALE (--sq-p-50 ... --sq-p-900) --------------------------------------------------------------------- Every brand green/teal hex in the blade files was replaced with var(--sq-p-NN). Each theme below just redefines this 10-stop scale, so changing the theme recolours the entire UI in one place. :root holds the DEFAULT (School / emerald) scale. ===================================================================== */ :root { --sq-p-50:#ecfdf5; --sq-p-100:#d1fae5; --sq-p-200:#a7f3d0; --sq-p-300:#6ee7b7; --sq-p-400:#34d399; --sq-p-500:#10b981; --sq-p-600:#059669; --sq-p-700:#047857; --sq-p-800:#065f46; --sq-p-900:#064e3b; --sq-p-rgb:5,150,105; --sq-accent:var(--sq-p-600); /* Neutral surface/text/border tokens (light = original look, zero regression) */ --sq-surface:#ffffff; --sq-surface-2:#f8f9fa; --sq-surface-rgb:255,255,255; --sq-text:#212529; --sq-text-muted:#6c757d; --sq-border:#dee2e6; --sq-navbar-fg:#000000; } /* ISLAMIC — deep "mosque" green */ body.theme-islamic { --sq-p-50:#edf7f2; --sq-p-100:#d2ebe0; --sq-p-200:#a6d8c2; --sq-p-300:#71bd9e; --sq-p-400:#3f9e7b; --sq-p-500:#1a8560; --sq-p-600:#0a6b4e; --sq-p-700:#0a5640; --sq-p-800:#0c4332; --sq-p-900:#0a2e23; --sq-p-rgb:10,107,78; } /* PROFESSIONAL — corporate blue */ body.theme-professional { --sq-p-50:#eff6ff; --sq-p-100:#dbeafe; --sq-p-200:#bfdbfe; --sq-p-300:#93c5fd; --sq-p-400:#60a5fa; --sq-p-500:#3b82f6; --sq-p-600:#2563eb; --sq-p-700:#1d4ed8; --sq-p-800:#1e40af; --sq-p-900:#1e3a8a; --sq-p-rgb:37,99,235; } /* DARK — normal teal scale (light -> dark). Filled banners/headers/buttons use the DARK stops (600-900) as background with white text, so a normal scale keeps every such element dark + readable across the whole project. Mid stops are the teal accent; light tints (50-200) read as soft panels with dark text. */ body.theme-dark { --sq-p-50:#dce9e6; --sq-p-100:#bfdbd4; --sq-p-200:#95c6bb; --sq-p-300:#62ab9e; --sq-p-400:#2f9486; --sq-p-500:#14857a; --sq-p-600:#0f766e; --sq-p-700:#0d655e; --sq-p-800:#0d524c; --sq-p-900:#0c3f3a; --sq-p-rgb:15,118,110; /* Dark neutral tokens */ --sq-surface:#121f33; --sq-surface-2:#0c1626; --sq-surface-rgb:18,31,51; --sq-text:#e2e8f0; --sq-text-muted:#94a3b8; --sq-border:#1f2c44; --sq-navbar-fg:#e2e8f0; } /* ===================================================================== Central brand-class overrides — Bootstrap/AdminLTE "success" family and brand utilities now follow the active theme's scale. ===================================================================== */ .btn-success { background-color: var(--sq-p-600) !important; border-color: var(--sq-p-600) !important; color: #fff !important; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active { background-color: var(--sq-p-700) !important; border-color: var(--sq-p-700) !important; } .btn-outline-success { color: var(--sq-p-600) !important; border-color: var(--sq-p-600) !important; } .btn-outline-success:hover { background-color: var(--sq-p-600) !important; color: #fff !important; } .bg-success { background-color: var(--sq-p-600) !important; } .text-success { color: var(--sq-p-600) !important; } .badge-success, .badge.bg-success { background-color: var(--sq-p-600) !important; color: #fff !important; } .border-success { border-color: var(--sq-p-500) !important; } .alert-success { background-color: var(--sq-p-50) !important; border-color: var(--sq-p-200) !important; color: var(--sq-p-800) !important; } .custom-control-input:checked ~ .custom-control-label::before, .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sq-p-600) !important; border-color: var(--sq-p-600) !important; } .page-item.active .page-link { background-color: var(--sq-p-600) !important; border-color: var(--sq-p-600) !important; } .dashboard-link { background-color: var(--sq-p-600) !important; } /* Smooth transition when switching live */ .main-sidebar, .bg-navbar-custom, .content-wrapper, .card { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ========================================================= ISLAMIC — deep green + gold ========================================================= */ body.theme-islamic .main-sidebar { background: linear-gradient(180deg, #063d2a 0%, #0a5c40 100%) !important; border-right: 1px solid rgba(200, 162, 58, .25) !important; box-shadow: inset 3px 0 0 #c8a23a, 4px 0 24px rgba(0, 0, 0, .18) !important; } body.theme-islamic .brand-text { color: #f6e7b0 !important; } body.theme-islamic .nav-sidebar .nav-item > .nav-link { color: #d7e8dd !important; } body.theme-islamic .nav-sidebar .nav-item > .nav-link i { color: #c8a23a !important; } body.theme-islamic .nav-sidebar .nav-item > .nav-link:hover { background: rgba(200, 162, 58, .15) !important; color: #ffffff !important; } body.theme-islamic .nav-sidebar .nav-item > .nav-link.active { background: linear-gradient(135deg, #c8a23a, #a8842a) !important; color: #18301f !important; } body.theme-islamic .nav-sidebar .nav-item > .nav-link.active i { color: #18301f !important; } body.theme-islamic .sidebar-toggle-btn-sidebar { background: rgba(255,255,255,.15); color: #f6e7b0; } body.theme-islamic .bg-navbar-custom { background: #f7f1df !important; border-bottom: 1px solid #e6dab9 !important; } body.theme-islamic .content-wrapper { background: #f4efe1 !important; } body.theme-islamic .content-header { background: #faf6ea !important; } /* ========================================================= PROFESSIONAL — slate sidebar + corporate blue ========================================================= */ body.theme-professional .main-sidebar { background: #1e293b !important; border-right: 1px solid rgba(255, 255, 255, .06) !important; box-shadow: inset 3px 0 0 #2563eb, 4px 0 24px rgba(0, 0, 0, .18) !important; } body.theme-professional .brand-text { color: #f1f5f9 !important; } body.theme-professional .nav-sidebar .nav-item > .nav-link { color: #cbd5e1 !important; } body.theme-professional .nav-sidebar .nav-item > .nav-link i { color: #93c5fd !important; } body.theme-professional .nav-sidebar .nav-item > .nav-link:hover { background: rgba(37, 99, 235, .18) !important; color: #ffffff !important; } body.theme-professional .nav-sidebar .nav-item > .nav-link.active { background: #2563eb !important; color: #ffffff !important; } body.theme-professional .nav-sidebar .nav-item > .nav-link.active i { color: #ffffff !important; } body.theme-professional .sidebar-toggle-btn-sidebar { background: rgba(255,255,255,.12); color: #cbd5e1; } body.theme-professional .bg-navbar-custom { background: #ffffff !important; border-bottom: 1px solid #e5e7eb !important; } body.theme-professional .content-wrapper { background: #f1f5f9 !important; } /* ========================================================= DARK — full dark mode ========================================================= */ body.theme-dark { background: #0b1220 !important; } body.theme-dark .main-sidebar { background: #0f172a !important; border-right: 1px solid rgba(255, 255, 255, .06) !important; box-shadow: inset 3px 0 0 #38bdf8, 4px 0 24px rgba(0, 0, 0, .4) !important; } body.theme-dark .brand-text { color: #e2e8f0 !important; } body.theme-dark .nav-sidebar .nav-item > .nav-link { color: #94a3b8 !important; } body.theme-dark .nav-sidebar .nav-item > .nav-link i { color: #38bdf8 !important; } body.theme-dark .nav-sidebar .nav-item > .nav-link:hover { background: rgba(56, 189, 248, .12) !important; color: #ffffff !important; } body.theme-dark .nav-sidebar .nav-item > .nav-link.active { background: linear-gradient(135deg, #0ea5e9, #0369a1) !important; color: #ffffff !important; } body.theme-dark .nav-sidebar .nav-item > .nav-link.active i { color: #ffffff !important; } body.theme-dark .sidebar-toggle-btn-sidebar { background: rgba(255,255,255,.1); color: #94a3b8; } /* Navbar */ body.theme-dark .bg-navbar-custom { background: #111c30 !important; border-bottom: 1px solid #1e293b !important; } body.theme-dark .bg-navbar-custom .nav-link, body.theme-dark .navbar-title, body.theme-dark .navbar-title b, body.theme-dark .user-info span { color: #e2e8f0 !important; } /* Content surfaces */ body.theme-dark .content-wrapper { background: #0b1220 !important; } body.theme-dark .content-header { background: #0f172a !important; } body.theme-dark .content-header .page-title-icon { background: #0f172a !important; } body.theme-dark .page-title-heading, body.theme-dark .content-header .page-title-subheading { color: #e2e8f0 !important; } /* Base text */ body.theme-dark, body.theme-dark p, body.theme-dark li, body.theme-dark td, body.theme-dark th, body.theme-dark label, body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6, body.theme-dark .text-dark, body.theme-dark .text-muted { color: #cbd5e1 !important; } /* Cards */ body.theme-dark .card { background: #111c30 !important; border-color: #1e293b !important; color: #e2e8f0 !important; } body.theme-dark .card-header, body.theme-dark .card-footer { background: #0f172a !important; border-color: #1e293b !important; color: #e2e8f0 !important; } /* Tables */ body.theme-dark .table { color: #cbd5e1 !important; } body.theme-dark .table thead th { background: #0f172a !important; color: #e2e8f0 !important; border-color: #1e293b !important; } body.theme-dark .table td, body.theme-dark .table th, body.theme-dark .table-bordered td, body.theme-dark .table-bordered th { border-color: #1e293b !important; } body.theme-dark .table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, .03) !important; } body.theme-dark .table-hover tbody tr:hover { background: rgba(56, 189, 248, .08) !important; } /* Forms */ body.theme-dark .form-control, body.theme-dark .custom-select, body.theme-dark .custom-file-label, body.theme-dark textarea, body.theme-dark select { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } body.theme-dark .form-control::placeholder { color: #64748b !important; } body.theme-dark .input-group-text { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } /* Dropdowns / modals / popovers */ body.theme-dark .dropdown-menu { background: #111c30 !important; border-color: #1e293b !important; } body.theme-dark .dropdown-item { color: #cbd5e1 !important; } body.theme-dark .dropdown-item:hover, body.theme-dark .dropdown-item:focus { background: #1e293b !important; color: #ffffff !important; } body.theme-dark .dropdown-divider { border-color: #1e293b !important; } body.theme-dark .dropdown-header { background: #0f172a !important; color: #94a3b8 !important; } body.theme-dark .modal-content { background: #111c30 !important; color: #e2e8f0 !important; } body.theme-dark .modal-header, body.theme-dark .modal-footer { border-color: #1e293b !important; } body.theme-dark .close { color: #e2e8f0 !important; text-shadow: none !important; } /* Misc AdminLTE widgets */ body.theme-dark .info-box, body.theme-dark .small-box > .inner { color: #ffffff; } body.theme-dark .info-box { background: #111c30 !important; } body.theme-dark .main-footer { background: #0f172a !important; border-color: #1e293b !important; color: #94a3b8 !important; } body.theme-dark .border, body.theme-dark .border-bottom, body.theme-dark .border-top { border-color: #1e293b !important; } body.theme-dark hr { border-color: #1e293b !important; } body.theme-dark .bg-white { background: var(--sq-surface) !important; } body.theme-dark .nav-tabs .nav-link.active { background: #111c30 !important; border-color: #1e293b #1e293b #111c30 !important; color: #fff !important; } /* ---- Full-dark backup layer --------------------------------------------- Catches surfaces/text that come from framework CSS or any straggler. ---- */ body.theme-dark .bg-light, body.theme-dark .bg-gray-light, body.theme-dark .list-group-item, body.theme-dark .breadcrumb, body.theme-dark .callout, body.theme-dark .jumbotron, body.theme-dark .box, body.theme-dark .direct-chat-text, body.theme-dark .timeline > div > .timeline-item, body.theme-dark .custom-file-label, body.theme-dark .page-link, body.theme-dark .pagination .page-link { background-color: var(--sq-surface) !important; color: var(--sq-text) !important; border-color: var(--sq-border) !important; } body.theme-dark .page-item.disabled .page-link { background-color: var(--sq-surface-2) !important; color: var(--sq-text-muted) !important; } body.theme-dark .select2-container--default .select2-selection { background-color: var(--sq-surface) !important; border-color: var(--sq-border) !important; } body.theme-dark .select2-container--default .select2-selection__rendered { color: var(--sq-text) !important; } body.theme-dark .select2-dropdown { background-color: var(--sq-surface) !important; border-color: var(--sq-border) !important; } body.theme-dark .select2-results__option { color: var(--sq-text) !important; } body.theme-dark .dataTables_wrapper, body.theme-dark .dataTables_info, body.theme-dark .dataTables_length, body.theme-dark .dataTables_filter { color: var(--sq-text-muted) !important; } /* Inline-style stragglers: any element that STILL has a white/near-white inline background gets darkened (attribute selectors reach inline styles). */ body.theme-dark [style*="background:#fff"], body.theme-dark [style*="background: #fff"], body.theme-dark [style*="background:#FFF"], body.theme-dark [style*="background: #FFF"], body.theme-dark [style*="background-color:#fff"], body.theme-dark [style*="background-color: #fff"], body.theme-dark [style*="background:#ffffff"], body.theme-dark [style*="background: #ffffff"], body.theme-dark [style*="background-color:#ffffff"], body.theme-dark [style*="background-color: #ffffff"], body.theme-dark [style*="background:white"], body.theme-dark [style*="background: white"], body.theme-dark [style*="background-color:white"], body.theme-dark [style*="background-color: white"], body.theme-dark [style*="rgb(255, 255, 255"], body.theme-dark [style*="rgb(255,255,255"] { background-color: var(--sq-surface) !important; } /* Filled brand elements: force readable teal (mid stops are bright in dark) */ body.theme-dark .btn-success, body.theme-dark .bg-success, body.theme-dark .badge-success, body.theme-dark .badge.bg-success { background-color: #0f766e !important; border-color: #0f766e !important; color: #ffffff !important; } body.theme-dark .btn-success:hover, body.theme-dark .btn-success:focus, body.theme-dark .btn-success:active { background-color: #115e59 !important; border-color: #115e59 !important; } body.theme-dark .btn-outline-success { color: #2dd4bf !important; border-color: #2dd4bf !important; } body.theme-dark .btn-outline-success:hover { background-color: #0f766e !important; color: #fff !important; } /* Default links readable on dark */ body.theme-dark a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.brand-link):not(.close) { color: #7dd3fc; } /* ---- Dark menu cards — "Accent bar + glow disc" style (Option 4) --------- */ /* Modern grid cards (.rp-menu-card) */ body.theme-dark .rp-menu-card { background: #0c1626 !important; border: 1px solid #20304a !important; box-shadow: 0 6px 22px rgba(20, 184, 166, .18) !important; } body.theme-dark .rp-menu-card::before { background: linear-gradient(90deg, #0d9488, #2dd4bf) !important; } body.theme-dark .rp-menu-card:hover { border-color: #2dd4bf !important; box-shadow: 0 12px 30px rgba(20, 184, 166, .30) !important; } body.theme-dark .rp-menu-card__ico { background: linear-gradient(135deg, #0d9488, #14b8a6) !important; color: #ffffff !important; box-shadow: 0 0 18px rgba(20, 184, 166, .45) !important; } body.theme-dark .rp-menu-card__ico i { color: #ffffff !important; } body.theme-dark .rp-menu-card:hover .rp-menu-card__ico { background: linear-gradient(135deg, #14b8a6, #2dd4bf) !important; color: #ffffff !important; } body.theme-dark .rp-menu-card__title, body.theme-dark .rp-menu-card:hover .rp-menu-card__title { color: #ffffff !important; } /* Classic hub cards (.setting-card) */ body.theme-dark .setting-card { background: #0c1626 !important; border: 1px solid #20304a !important; box-shadow: 0 6px 22px rgba(20, 184, 166, .18) !important; } body.theme-dark .setting-card::before { background: linear-gradient(90deg, #0d9488, #2dd4bf) !important; } body.theme-dark .setting-card:hover { background: #0e1b2e !important; box-shadow: 0 12px 30px rgba(20, 184, 166, .30) !important; } body.theme-dark .setting-card .icon-wrapper { background: linear-gradient(135deg, #0d9488, #14b8a6) !important; color: #ffffff !important; box-shadow: 0 0 18px rgba(20, 184, 166, .45) !important; } body.theme-dark .setting-card .icon-wrapper i, body.theme-dark .setting-card:hover .icon-wrapper i { color: #ffffff !important; } body.theme-dark .setting-card:hover .icon-wrapper { background: linear-gradient(135deg, #14b8a6, #2dd4bf) !important; } body.theme-dark .setting-card h5, body.theme-dark .setting-card:hover h5 { color: #ffffff !important; } /* ---- Dark page hero banners (.rp-hero) — used across many pages ---------- */ body.theme-dark .rp-hero { background: linear-gradient(135deg, #0a2722 0%, #0f766e 55%, #0a302a 100%) !important; color: #ffffff !important; border: 1px solid #1f3a36 !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .45) !important; } body.theme-dark .rp-hero h1, body.theme-dark .rp-hero .crumb, body.theme-dark .rp-hero .crumb a, body.theme-dark .rp-hero .sub, body.theme-dark .rp-hero p, body.theme-dark .rp-hero i { color: #ffffff !important; } body.theme-dark .rp-hero .crumb a { opacity: .85; } body.theme-dark .rp-hero .btn-hero { background: rgba(255, 255, 255, .16) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, .38) !important; } body.theme-dark .rp-hero .btn-hero:hover { background: rgba(255, 255, 255, .26) !important; color: #fff !important; } /* ---- Dark Holiday Management hero (.hm-hero) ----------------------------- */ body.theme-dark .hm-hero { background: linear-gradient(135deg, #0a2722 0%, #0f766e 55%, #0a302a 100%) !important; color: #ffffff !important; border: 1px solid #1f3a36 !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .45) !important; } body.theme-dark .hm-hero h1, body.theme-dark .hm-hero .crumb, body.theme-dark .hm-hero .crumb a, body.theme-dark .hm-hero p, body.theme-dark .hm-hero i { color: #ffffff !important; } body.theme-dark .hm-hero .crumb a { opacity: .85; } body.theme-dark .hm-card { box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important; } /* ---- Dark footer text ---------------------------------------------------- */ body.theme-dark .footer-custom, body.theme-dark .footer-left, body.theme-dark .footer-left strong, body.theme-dark .footer-center, body.theme-dark .footer-center b, body.theme-dark .footer-right, body.theme-dark .footer-right span, body.theme-dark .footer-right a { color: #e2e8f0 !important; } body.theme-dark .footer-center b { background: rgba(255, 255, 255, .06) !important; border-color: rgba(212, 175, 55, .38) !important; } body.theme-dark .footer-right a:hover { color: #2dd4bf !important; } /* ---- Dark dashboard KPI / fund cards (.stat-card) ------------------------ */ body.theme-dark .stat-card { background: linear-gradient(168deg, #141f33 0%, #0c1626 100%) !important; border: 1px solid #20304a !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .35) !important; } body.theme-dark .stat-card:hover { border-color: #2dd4bf !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .45) !important; } body.theme-dark .stat-card .stat-title { color: #cbd5e1 !important; } body.theme-dark .stat-card .stat-value { color: #5eead4 !important; border-top-color: rgba(255, 255, 255, .12) !important; } body.theme-dark .stat-card .trend { color: #2dd4bf !important; background: rgba(255, 255, 255, .06) !important; border-color: rgba(45, 212, 191, .30) !important; } /* ---- Dark dashboard analytics: chart cards + insight cards --------------- */ /* Re-point the dashboard's custom surface/text vars to dark values. (Defined on :root in main.blade.php; .dashboard-islamic does not redefine them, so body.theme-dark wins by proximity.) */ body.theme-dark, body.theme-dark .dashboard-islamic { --islamic-cream: #0c1626; --card-bg: #121f33; --text-muted: #9fb3c8; --islamic-border: #20304a; --app-bg: #0b1220; } body.theme-dark .chart-container, body.theme-dark .dash-insight-card, body.theme-dark .dash-top-funds { background: linear-gradient(168deg, #141f33 0%, #0c1626 100%) !important; border-color: #20304a !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .35) !important; } body.theme-dark .chart-title, body.theme-dark .dash-insight-card .dash-insight-title, body.theme-dark .dash-top-funds__title { color: #e2e8f0 !important; } body.theme-dark .section-title { color: #cbd5e1 !important; } body.theme-dark .fund-legend-label, body.theme-dark .fund-legend-label span, body.theme-dark .dash-top-fund-name, body.theme-dark .dash-top-fund-amount, body.theme-dark .fund-chart-center-text .amount { color: #e2e8f0 !important; } body.theme-dark .fund-chart-center-text .label { color: #9fb3c8 !important; } /* ========================================================= Theme switcher swatches (header dropdown) ========================================================= */ .theme-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; margin-right: 10px; border: 1px solid rgba(0, 0, 0, .15); vertical-align: middle; } .theme-swatch.theme-sw-default { background: linear-gradient(135deg, #00b074, #20c997); } .theme-swatch.theme-sw-islamic { background: linear-gradient(135deg, #0a5c40, #c8a23a); } .theme-swatch.theme-sw-professional { background: linear-gradient(135deg, #1e293b, #2563eb); } .theme-swatch.theme-sw-dark { background: linear-gradient(135deg, #0f172a, #38bdf8); }