/* ========================================================================== FLOSSY PMS theme - glassmorphism, light & dark Theme is set on (see base.html). ========================================================================== */ /* ---------- Tokens: light ---------- */ :root, [data-bs-theme="light"] { --fl-primary: #0f5f78; --fl-primary-dark: #0a4557; --fl-primary-soft: rgba(15, 95, 120, .10); --fl-accent: #b8923a; --fl-gold: #c8a24a; --fl-gold-light: #e2c77d; --fl-text: #16252c; --fl-muted: #52646c; --fl-grid: rgba(22, 37, 44, .10); --fl-page: #e9f1f4; --fl-blob-1: rgba(200, 162, 74, .26); --fl-blob-2: rgba(15, 95, 120, .28); --fl-blob-3: rgba(124, 92, 219, .18); --glass-bg: rgba(255, 255, 255, .62); --glass-bg-strong: rgba(255, 255, 255, .82); --glass-border: rgba(255, 255, 255, .75); --glass-edge: rgba(22, 37, 44, .08); --glass-shadow: 0 8px 30px rgba(15, 60, 80, .10); --glass-blur: 16px; --fl-input-bg: rgba(255, 255, 255, .72); --fl-thead: rgba(15, 95, 120, .06); --fl-subtle: rgba(15, 95, 120, .06); --fl-hover: rgba(15, 95, 120, .06); --sidebar-bg: rgba(10, 36, 46, .86); --sidebar-text: #c9dde4; --sidebar-section: #c8a24a; --bs-primary: #0f5f78; --bs-primary-rgb: 15, 95, 120; --bs-link-color: #0f5f78; --bs-link-color-rgb: 15, 95, 120; --bs-link-hover-color: #0a4557; --bs-body-color: #16252c; --bs-body-bg: #e9f1f4; --bs-border-color: rgba(22, 37, 44, .14); --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bs-body-font-size: .95rem; --kpi-blue-bg: rgba(15, 95, 120, .12); --kpi-blue: #0f5f78; --kpi-green-bg: rgba(22, 163, 127, .14); --kpi-green: #0c7f61; --kpi-amber-bg: rgba(224, 150, 20, .16); --kpi-amber: #935e00; --kpi-red-bg: rgba(210, 50, 50, .12); --kpi-red: #b42323; --kpi-purple-bg: rgba(110, 80, 210, .13); --kpi-purple: #5b3cc4; --btn-primary-bg: #0f5f78; --btn-primary-hover: #0a4557; --btn-primary-text: #fff; --btn-primary-shadow: rgba(15, 95, 120, .25); --brand-grad: linear-gradient(135deg, #f1dfa6, #c8a24a 55%, #9c7a2c); --brand-ink: #0a3442; --brand-glow: rgba(200, 162, 74, .45); --brand-small: #e2c77d; --nav-active-text: #f3e2ae; --nav-active-a: rgba(200, 162, 74, .28); --nav-active-b: rgba(200, 162, 74, .06); --nav-active-bar: #c8a24a; --nav-active-icon: #e2c77d; --avatar-a: #0f5f78; --avatar-b: #c8a24a; --accent-edge: rgba(200, 162, 74, .30); --accent-edge-strong: rgba(200, 162, 74, .5); --accent-line: rgba(200, 162, 74, .75); --fl-heading: var(--fl-text); --card-title: var(--fl-text); --chart-1: #9cc9d6; --chart-2: #c8a24a; --chart-3: #e39b5c; --chart-4: #5bc0de; --chart-5: #d9534f; --chart-6: #0f5f78; --chart-7: #8e6bd8; --chart-8: #f0ad4e; --chart-9: #6c757d; --chart-10: #20c997; color-scheme: light; } /* ---------- Tokens: dark ---------- */ [data-bs-theme="dark"] { --fl-primary: #1b86a8; --fl-primary-dark: #146a86; --fl-primary-soft: rgba(80, 190, 225, .14); --fl-accent: #e2c77d; --fl-gold: #c8a24a; --fl-gold-light: #e2c77d; --fl-text: #e4eef2; --fl-muted: #9db2ba; --fl-grid: rgba(228, 238, 242, .10); --fl-page: #081116; --fl-blob-1: rgba(200, 162, 74, .14); --fl-blob-2: rgba(27, 134, 168, .26); --fl-blob-3: rgba(124, 92, 219, .20); --glass-bg: rgba(20, 33, 41, .55); --glass-bg-strong: rgba(20, 33, 41, .88); --glass-border: rgba(255, 255, 255, .08); --glass-edge: rgba(255, 255, 255, .06); --glass-shadow: 0 10px 34px rgba(0, 0, 0, .40); --fl-input-bg: rgba(5, 14, 19, .45); --fl-thead: rgba(255, 255, 255, .04); --fl-subtle: rgba(255, 255, 255, .05); --fl-hover: rgba(255, 255, 255, .05); --sidebar-bg: rgba(6, 18, 24, .78); --sidebar-text: #b9cfd7; --sidebar-section: #c8a24a; --bs-primary: #1b86a8; --bs-primary-rgb: 27, 134, 168; --bs-link-color: #6cc9e6; --bs-link-color-rgb: 108, 201, 230; --bs-link-hover-color: #9adcf0; --bs-body-color: #e4eef2; --bs-body-bg: #081116; --bs-border-color: rgba(255, 255, 255, .12); --bs-secondary-color: #9db2ba; --kpi-blue-bg: rgba(80, 190, 225, .16); --kpi-blue: #7fd3ec; --kpi-green-bg: rgba(44, 199, 155, .16); --kpi-green: #5fe0b8; --kpi-amber-bg: rgba(240, 173, 78, .16); --kpi-amber: #f3c26f; --kpi-red-bg: rgba(240, 90, 90, .16); --kpi-red: #ff8c8c; --kpi-purple-bg: rgba(160, 130, 255, .18); --kpi-purple: #c2adff; --btn-primary-bg: #1b86a8; --btn-primary-hover: #146a86; --btn-primary-text: #fff; --btn-primary-shadow: rgba(27, 134, 168, .25); --fl-heading: #f1dfa6; --card-title: #f1dfa6; color-scheme: dark; } [data-bs-theme="dark"] .text-danger { color: #ff8c8c !important; } [data-bs-theme="dark"] .text-success { color: #5fe0b8 !important; } [data-bs-theme="dark"] .text-muted { color: var(--fl-muted) !important; } [data-bs-theme="dark"] .text-primary { color: #7fd3ec !important; } /* ---------- Page background ---------- */ html, body { min-height: 100%; } body { background: var(--fl-page); color: var(--fl-text); transition: background-color .25s ease, color .25s ease; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38rem 38rem at 8% 12%, var(--fl-blob-1), transparent 60%), radial-gradient(42rem 42rem at 92% 8%, var(--fl-blob-2), transparent 62%), radial-gradient(36rem 36rem at 70% 95%, var(--fl-blob-3), transparent 60%), var(--fl-page); } .skip-link { position: absolute; top: 0; left: 0; z-index: 2000; background: var(--glass-bg-strong); padding: .5rem 1rem; } /* ---------- Glass surface ---------- */ .glass, .card, .topbar, .dropdown-menu, .modal-content, .offcanvas, .list-group-item, .glass-bar, .alert, .toast { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); } .card { --bs-card-bg: var(--glass-bg); --bs-card-border-color: var(--glass-border); --bs-card-cap-bg: transparent; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 1rem; box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .12); color: var(--fl-text); } .card-header { background: linear-gradient(180deg, var(--fl-subtle), transparent); border-bottom: 1px solid var(--glass-edge); font-weight: 600; border-radius: 1rem 1rem 0 0 !important; } .card-body.border-top, .border-top { border-color: var(--glass-edge) !important; } .card-body.border-bottom, .border-bottom { border-color: var(--glass-edge) !important; } a.card { transition: transform .15s ease, box-shadow .15s ease; } a.card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(15, 60, 80, .18); } .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--glass-edge); --bs-list-group-color: var(--fl-text); } .list-group-item { background: transparent; } .list-group-item-action:hover { background: var(--fl-hover); } .list-group-item.active { background: var(--fl-primary); border-color: var(--fl-primary); } .dropdown-menu { --bs-dropdown-bg: var(--glass-bg-strong); --bs-dropdown-border-color: var(--glass-border); --bs-dropdown-link-hover-bg: var(--fl-hover); --bs-dropdown-link-color: var(--fl-text); border-radius: .85rem; box-shadow: var(--glass-shadow); } .modal-content { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 1rem; } .modal-header, .modal-footer { border-color: var(--glass-edge); } .alert { border-radius: .85rem; border-width: 1px; } .glass-bar { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: .85rem; box-shadow: var(--glass-shadow); } .unread-row { background: var(--fl-primary-soft) !important; } /* ---------- Buttons ---------- */ .btn { border-radius: .6rem; } .btn-primary { --bs-btn-bg: var(--btn-primary-bg); --bs-btn-border-color: var(--btn-primary-bg); --bs-btn-color: var(--btn-primary-text); --bs-btn-hover-bg: var(--btn-primary-hover); --bs-btn-hover-border-color: var(--btn-primary-hover); --bs-btn-hover-color: var(--btn-primary-text); --bs-btn-active-bg: var(--btn-primary-hover); --bs-btn-active-color: var(--btn-primary-text); --bs-btn-disabled-bg: var(--btn-primary-bg); --bs-btn-disabled-color: var(--btn-primary-text); box-shadow: 0 4px 14px var(--btn-primary-shadow); } .btn-outline-primary { --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: var(--btn-primary-bg); --bs-btn-hover-bg: var(--btn-primary-bg); --bs-btn-hover-border-color: var(--btn-primary-bg); --bs-btn-hover-color: var(--btn-primary-text); --bs-btn-active-bg: var(--btn-primary-hover); --bs-btn-active-color: var(--btn-primary-text); background: var(--fl-input-bg); } .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning { background: var(--fl-input-bg); } [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #c4d4da; --bs-btn-border-color: rgba(255,255,255,.22); } .btn-glass { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--fl-text); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .btn-glass:hover, .btn-glass:focus, .btn-glass.show { background: var(--glass-bg-strong); color: var(--fl-text); border-color: var(--glass-border); } .text-primary { color: var(--fl-primary) !important; } .bg-primary { background-color: var(--fl-primary) !important; } /* ---------- Forms ---------- */ .form-control, .form-select { background-color: var(--fl-input-bg); border-color: var(--bs-border-color); color: var(--fl-text); border-radius: .6rem; } .form-control:focus, .form-select:focus { background-color: var(--glass-bg-strong); color: var(--fl-text); border-color: var(--fl-primary); box-shadow: 0 0 0 .2rem var(--fl-primary-soft); } .form-control::placeholder { color: var(--fl-muted); opacity: .8; } .form-check-input { background-color: var(--fl-input-bg); } .form-check-input:checked { background-color: var(--fl-primary); border-color: var(--fl-primary); } .form-label { font-weight: 500; font-size: .88rem; } .form-text { font-size: .78rem; color: var(--fl-muted); } .errorlist { color: #d93a3a; list-style: none; padding: 0; margin: .25rem 0 0; font-size: .82rem; } [data-bs-theme="dark"] .errorlist { color: #ff8c8c; } [data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); } /* ---------- Shell ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 250px; flex-shrink: 0; color: var(--sidebar-text); background: var(--sidebar-bg) !important; -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-right: 1px solid rgba(255, 255, 255, .06); } @media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; } } .sidebar.offcanvas-lg { --bs-offcanvas-width: 260px; --bs-offcanvas-bg: var(--sidebar-bg); } .sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); } .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-grad); color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 4px 14px var(--brand-glow); } .brand-text { color: #fff; font-weight: 700; letter-spacing: .5px; } .brand-text small { color: var(--brand-small); font-weight: 600; } .sidebar-scroll { overflow-y: auto; padding: .5rem .5rem 1.5rem; flex: 1; } .sidebar .nav-link { color: var(--sidebar-text); padding: .5rem .9rem; margin: 1px 0; display: flex; gap: .7rem; align-items: center; border-radius: .6rem; } .sidebar .nav-link:hover, .sidebar .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .07); } .sidebar .nav-link.active { color: var(--nav-active-text); background: linear-gradient(90deg, var(--nav-active-a), var(--nav-active-b)); box-shadow: inset 3px 0 0 var(--nav-active-bar); } .sidebar .nav-link.active i { color: var(--nav-active-icon); } .sidebar .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--sidebar-section); padding: 1rem .9rem .3rem; } .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { background: var(--glass-bg); border-bottom: 1px solid var(--glass-border); box-shadow: 0 4px 20px rgba(15, 60, 80, .06); padding: .55rem 1rem; display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 1020; } .global-search { position: relative; flex: 1; max-width: 520px; } .global-search i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--fl-muted); } .global-search input { padding-left: 2.2rem; background: var(--fl-input-bg); border-color: var(--glass-border); border-radius: 2rem; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--avatar-a), var(--avatar-b)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; } .notif-menu { width: 320px; max-height: 420px; overflow-y: auto; } .notif-menu .dropdown-item { white-space: normal; } .content { padding: 1.25rem; flex: 1; } @media (min-width: 768px) { .content { padding: 1.5rem 2rem; } } .app-footer { padding: .75rem 2rem; font-size: .78rem; color: var(--fl-muted); } .portal-nav { background: var(--sidebar-bg); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid rgba(255, 255, 255, .06); position: sticky; top: 0; z-index: 1030; } /* Theme switcher */ .theme-toggle .dropdown-item.active, .theme-toggle .dropdown-item:active { background: var(--fl-primary-soft); color: var(--fl-text); } .theme-toggle .dropdown-item i { width: 1.2rem; display: inline-block; } .auth-theme { position: fixed; top: 1rem; right: 1rem; z-index: 1040; } /* ---------- Components ---------- */ .page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; } .page-header h1 { font-size: 1.45rem; font-weight: 700; margin: 0; } .page-header .subtitle { color: var(--fl-muted); font-size: .9rem; } .kpi { padding: 1rem 1.1rem; height: 100%; } .kpi .kpi-label { font-size: .78rem; color: var(--fl-muted); text-transform: uppercase; letter-spacing: .5px; } .kpi .kpi-value { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 700; margin-top: .15rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .kpi .kpi-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; } .kpi-icon.blue { background: var(--kpi-blue-bg); color: var(--kpi-blue); } .kpi-icon.green { background: var(--kpi-green-bg); color: var(--kpi-green); } .kpi-icon.amber { background: var(--kpi-amber-bg); color: var(--kpi-amber); } .kpi-icon.red { background: var(--kpi-red-bg); color: var(--kpi-red); } .kpi-icon.purple { background: var(--kpi-purple-bg); color: var(--kpi-purple); } .table { --bs-table-bg: transparent; --bs-table-color: var(--fl-text); --bs-table-border-color: var(--glass-edge); --bs-table-hover-bg: var(--fl-hover); --bs-table-hover-color: var(--fl-text); margin-bottom: 0; } .table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; color: var(--fl-muted); font-weight: 600; background: var(--fl-thead); white-space: nowrap; } .table td { vertical-align: middle; white-space: nowrap; } .table td.small, .table td.wrap, .table td details { white-space: normal; } .table .table-subtle > * { background: var(--fl-subtle) !important; color: var(--fl-text); } .table-responsive { border-radius: 0 0 1rem 1rem; } .dl-grid { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: .4rem 1rem; margin: 0; } .dl-grid dt { color: var(--fl-muted); font-weight: 500; font-size: .87rem; } .dl-grid dd { margin: 0; } .quick-actions .btn { text-align: left; } .gallery img { width: 100%; height: 140px; object-fit: cover; border-radius: .6rem; } .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--fl-muted); } .empty-state i { font-size: 2.2rem; display: block; margin-bottom: .5rem; } .statement-table td.num, .statement-table th.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .filters .form-control, .filters .form-select { min-width: 140px; } .nav-tabs { --bs-nav-tabs-border-color: var(--glass-edge); --bs-nav-tabs-link-active-bg: var(--glass-bg-strong); --bs-nav-tabs-link-active-border-color: var(--glass-border); } .pagination { --bs-pagination-bg: var(--fl-input-bg); --bs-pagination-border-color: var(--glass-edge); --bs-pagination-active-bg: var(--fl-primary); --bs-pagination-active-border-color: var(--fl-primary); } .progress { background: var(--fl-subtle); } pre, code { color: inherit; } code { color: var(--kpi-purple); } .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; } .auth-wrap .text-white { text-shadow: 0 1px 12px rgba(0, 0, 0, .25); } [data-bs-theme="light"] .auth-wrap .text-white, :root:not([data-bs-theme]) .auth-wrap .text-white { color: var(--fl-text) !important; text-shadow: none; } .auth-card { width: 100%; max-width: 440px; } .auth-card .card { --glass-bg: var(--glass-bg-strong); } .timeline { list-style: none; padding-left: 1rem; border-left: 2px solid var(--glass-edge); } .timeline li { position: relative; padding: 0 0 1rem 1rem; } .timeline li::before { content: ""; position: absolute; left: -1.43rem; top: .3rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--fl-accent); border: 2px solid var(--fl-page); } .perm-matrix th, .perm-matrix td { text-align: center; } .perm-matrix td:first-child, .perm-matrix th:first-child { text-align: left; } /* ---------- Camera capture ---------- */ .camera-preview { width: 56px; height: 56px; object-fit: cover; border-radius: .5rem; border: 1px solid var(--glass-border); } .camera-stage { position: relative; background: #000; border-radius: .6rem; overflow: hidden; } .camera-stage video, .camera-stage canvas { width: 100%; max-height: 70vh; display: block; object-fit: contain; } .camera-stage canvas.d-none, .camera-stage video.d-none { display: none !important; } .camera-guide { position: absolute; inset: 12% 10%; border: 2px dashed rgba(255, 255, 255, .8); border-radius: .75rem; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .25); pointer-events: none; } /* ---------- Accessibility & fallbacks ---------- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root, [data-bs-theme="light"] { --glass-bg: rgba(255, 255, 255, .94); } [data-bs-theme="dark"] { --glass-bg: rgba(20, 33, 41, .96); } } @media (prefers-reduced-transparency: reduce) { :root, [data-bs-theme="light"] { --glass-bg: #ffffff; --glass-bg-strong: #ffffff; } [data-bs-theme="dark"] { --glass-bg: #142129; --glass-bg-strong: #142129; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } @media (max-width: 575.98px) { :root { --glass-blur: 10px; } } /* ---------- Print: always light, no glass ---------- */ @media print { .sidebar, .topbar, .portal-nav, .app-footer, .no-print, .btn { display: none !important; } .content { padding: 0; } body, body::before { background: #fff !important; color: #000 !important; } .card { background: #fff !important; box-shadow: none !important; border-color: #ccc !important; backdrop-filter: none !important; color: #000 !important; } .table, .table td, .table th { color: #000 !important; } } /* ---------- Accent details (driven by palette variables) ---------- */ .card { border-top: 1px solid var(--accent-edge); } .kpi { position: relative; overflow: hidden; } .kpi::after { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); } .kpi .kpi-label { font-weight: 600; } .page-header h1 { color: var(--fl-heading); } .card-header { color: var(--card-title); } .nav-tabs .nav-link.active { box-shadow: inset 0 -2px 0 var(--accent-line); } a.card:hover { border-color: var(--accent-edge-strong); } /* ========================================================================== Colour palettes (Settings > Appearance, or My profile). . teal-gold is the default above. ========================================================================== */ /* ----- Teal & Green (original glass theme) ----- */ html[data-palette="teal-green"] { --fl-accent: #16a37f; --fl-blob-1: rgba(22, 163, 127, .30); --sidebar-section: #86a9b4; --brand-grad: linear-gradient(135deg, #1fc393, #0f7a9a); --brand-ink: #fff; --brand-glow: rgba(22, 163, 127, .4); --brand-small: #16a37f; --nav-active-text: #fff; --nav-active-a: rgba(31, 195, 147, .30); --nav-active-b: rgba(31, 195, 147, .08); --nav-active-bar: #16a37f; --nav-active-icon: #fff; --avatar-a: #0f5f78; --avatar-b: #16a37f; --accent-edge: var(--glass-border); --accent-edge-strong: rgba(22, 163, 127, .45); --accent-line: transparent; --chart-2: #16a37f; } html[data-palette="teal-green"][data-bs-theme="dark"], html[data-palette="teal-green"] [data-bs-theme="dark"] { --fl-accent: #2cc79b; --fl-blob-1: rgba(22, 163, 127, .22); --sidebar-section: #6f8f99; --brand-small: #2cc79b; --fl-heading: var(--fl-text); --card-title: var(--fl-text); } /* ----- Navy & Gold ----- */ html[data-palette="navy-gold"] { --fl-primary: #0f2a5c; --fl-primary-dark: #0a1d42; --fl-primary-soft: rgba(15, 42, 92, .10); --fl-accent: #b8923a; --fl-text: #0f1c33; --fl-muted: #56627a; --fl-grid: rgba(15, 28, 51, .10); --fl-page: #eef1f7; --fl-blob-1: rgba(200, 162, 74, .30); --fl-blob-2: rgba(15, 42, 92, .22); --fl-blob-3: rgba(70, 100, 170, .16); --glass-bg: rgba(255, 255, 255, .64); --glass-bg-strong: rgba(255, 255, 255, .86); --glass-edge: rgba(15, 28, 51, .08); --glass-shadow: 0 8px 30px rgba(10, 29, 66, .12); --fl-thead: rgba(15, 42, 92, .06); --fl-subtle: rgba(15, 42, 92, .06); --fl-hover: rgba(200, 162, 74, .10); --sidebar-bg: rgba(8, 22, 52, .93); --sidebar-text: #cbd4e6; --btn-primary-bg: #0f2a5c; --btn-primary-hover: #0a1d42; --btn-primary-shadow: rgba(15, 42, 92, .28); --bs-primary: #0f2a5c; --bs-primary-rgb: 15, 42, 92; --bs-link-color: #0f2a5c; --bs-link-color-rgb: 15, 42, 92; --bs-link-hover-color: #9c7a2c; --bs-body-color: #0f1c33; --bs-body-bg: #eef1f7; --bs-border-color: rgba(15, 28, 51, .14); --brand-ink: #0a1d42; --avatar-a: #0f2a5c; --fl-heading: #0f2a5c; --kpi-blue-bg: rgba(15, 42, 92, .10); --kpi-blue: #0f2a5c; --kpi-amber-bg: rgba(200, 162, 74, .20); --kpi-amber: #8a6a22; --kpi-purple-bg: rgba(200, 162, 74, .16); --kpi-purple: #0f2a5c; --chart-1: #5b77b5; --chart-2: #c8a24a; --chart-3: #d9826b; --chart-4: #9fb0d6; --chart-6: #0f2a5c; --chart-7: #e2c77d; } html[data-palette="navy-gold"][data-bs-theme="dark"], html[data-palette="navy-gold"] [data-bs-theme="dark"] { --fl-primary: #c8a24a; --fl-primary-dark: #b08b36; --fl-primary-soft: rgba(200, 162, 74, .16); --fl-accent: #e2c77d; --fl-heading: #f1dfa6; --card-title: #f1dfa6; --fl-text: #e8ecf5; --fl-muted: #a3aec6; --fl-grid: rgba(232, 236, 245, .09); --fl-page: #060d1f; --fl-blob-1: rgba(200, 162, 74, .16); --fl-blob-2: rgba(30, 64, 140, .38); --fl-blob-3: rgba(15, 42, 92, .45); --glass-bg: rgba(14, 28, 62, .55); --glass-bg-strong: rgba(11, 23, 52, .92); --glass-border: rgba(226, 199, 125, .16); --glass-edge: rgba(226, 199, 125, .10); --glass-shadow: 0 10px 34px rgba(0, 0, 0, .45); --fl-input-bg: rgba(3, 9, 24, .45); --fl-thead: rgba(226, 199, 125, .05); --fl-subtle: rgba(226, 199, 125, .06); --fl-hover: rgba(226, 199, 125, .07); --sidebar-bg: rgba(5, 13, 32, .82); --sidebar-text: #c3cce0; --btn-primary-bg: #c8a24a; --btn-primary-hover: #e2c77d; --btn-primary-text: #0a1530; --btn-primary-shadow: rgba(200, 162, 74, .25); --bs-primary: #c8a24a; --bs-primary-rgb: 200, 162, 74; --bs-link-color: #e2c77d; --bs-link-color-rgb: 226, 199, 125; --bs-link-hover-color: #f3e2ae; --bs-body-color: #e8ecf5; --bs-body-bg: #060d1f; --bs-border-color: rgba(226, 199, 125, .16); --bs-secondary-color: #a3aec6; --kpi-blue-bg: rgba(120, 150, 220, .16); --kpi-blue: #a9bff0; --kpi-amber-bg: rgba(200, 162, 74, .18); --kpi-amber: #e2c77d; --kpi-purple-bg: rgba(226, 199, 125, .14); --kpi-purple: #f1dfa6; } html[data-palette="navy-gold"][data-bs-theme="dark"] .text-primary { color: #e2c77d !important; } /* ----- Classic (flat, solid panels - the first design) ----- */ html[data-palette="classic"] { --fl-accent: #16a37f; --glass-bg: #ffffff; --glass-bg-strong: #ffffff; --glass-border: #e3e9ec; --glass-edge: #eef2f4; --glass-shadow: 0 1px 2px rgba(16, 40, 50, .04); --glass-blur: 0px; --fl-page: #f3f6f8; --fl-input-bg: #ffffff; --fl-thead: #f8fafb; --sidebar-bg: #0d2b36; --sidebar-section: #7fa2ae; --brand-grad: #16a37f; --brand-ink: #fff; --brand-glow: transparent; --brand-small: #16a37f; --nav-active-text: #fff; --nav-active-a: rgba(22, 163, 127, .18); --nav-active-b: rgba(22, 163, 127, .18); --nav-active-bar: #16a37f; --nav-active-icon: #fff; --avatar-a: #0f5f78; --avatar-b: #0f5f78; --accent-edge: #e3e9ec; --accent-edge-strong: #c9d6dc; --accent-line: transparent; --chart-2: #16a37f; --btn-primary-shadow: transparent; } html[data-palette="classic"][data-bs-theme="dark"], html[data-palette="classic"] [data-bs-theme="dark"] { --glass-bg: #142129; --glass-bg-strong: #142129; --glass-border: #22343e; --glass-edge: #1c2c35; --fl-page: #0b151b; --fl-input-bg: #0f1a20; --fl-thead: #17262f; --sidebar-bg: #081419; --accent-edge: #22343e; --accent-edge-strong: #2d4450; --fl-heading: var(--fl-text); --card-title: var(--fl-text); --brand-small: #2cc79b; } html[data-palette="classic"] body::before { background: var(--fl-page); } html[data-palette="classic"] .card, html[data-palette="classic"] .topbar, html[data-palette="classic"] .sidebar, html[data-palette="classic"] .dropdown-menu, html[data-palette="classic"] .modal-content, html[data-palette="classic"] .list-group-item { -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-palette="classic"] .card { border-radius: .75rem; } /* Palette picker swatches */ .palette-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; } .palette-option { position: relative; display: block; cursor: pointer; margin: 0; } .palette-option input { position: absolute; opacity: 0; } .palette-option .swatch-card { border: 2px solid var(--glass-border); border-radius: .85rem; padding: .6rem; background: var(--glass-bg); transition: border-color .15s, box-shadow .15s; height: 100%; } .palette-option input:checked + .swatch-card { border-color: var(--btn-primary-bg); box-shadow: 0 0 0 .2rem var(--fl-primary-soft); } .palette-option input:focus-visible + .swatch-card { outline: 2px solid var(--btn-primary-bg); outline-offset: 2px; } .swatch-strip { display: flex; height: 38px; border-radius: .5rem; overflow: hidden; margin-bottom: .45rem; } .swatch-strip span { flex: 1; } .palette-option .swatch-name { font-weight: 600; font-size: .9rem; } .palette-option .swatch-desc { font-size: .75rem; color: var(--fl-muted); }