/* ============================================================================ custom-overrides.css — Dark mode + Left gold sidebar (fintech look) Loaded AFTER css/style.bundle.css (see config/template/general.php assets.css), so it wins by load order. High-specificity / #id selectors are used where the vendor bundle is aggressive; vendor/bundle files are never edited. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. Design tokens ------------------------------------------------------------------------- */ :root { --page-bg: #12131b; /* app background */ --surface: #1b1d28; /* cards, header, panels */ --surface-2: #2b2b40; /* hover rows, chips */ --sidebar-bg: #15161e; /* sidebar base */ --sidebar-bg-2: #1b1d28; /* sidebar gradient top */ --sidebar-width: 265px; --gold: oklch(78% 0.14 80); --gold-soft: oklch(88% 0.13 85); --gold-deep: oklch(55% 0.12 70); --on-gold: #3a2c00; /* text/icons on gold */ --text-muted: #9a9aa8; /* inactive menu/link text */ --text-dim: #5c5c6e; /* bullets, section titles */ --border-faint: rgba(255, 255, 255, 0.05); /* The accent gradient — reused everywhere the gold accent appears. */ --gold-gradient: linear-gradient(135deg, var(--gold-soft), var(--gold) 45%, var(--gold-deep)); /* ~6% darker lightness for hover / active / focus. */ --gold-gradient-hover: linear-gradient(135deg, oklch(82% 0.13 85), oklch(72% 0.14 80) 45%, oklch(49% 0.12 70)); /* Re-map Bootstrap's primary so any default .text-primary/.border-primary/etc. inherits gold. Solid fallback (#e4b53d ≈ --gold) feeds the rgba() consumers. */ --bs-primary: #e4b53d; --bs-primary-rgb: 228, 181, 61; --bs-primary-text-emphasis: #e4b53d; --bs-link-color: var(--gold-soft); --bs-link-hover-color: var(--gold-soft); } /* ---------------------------------------------------------------------------- 2. App background + base typography (dark) The may carry an inline background-image from the layout bootstrap — neutralise it with !important regardless. ------------------------------------------------------------------------- */ html body, body { background-color: var(--page-bg) !important; background-image: none !important; color: #cdcdde; } /* Headings & strong text → light */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #f4f4f6; } /* Remap Metronic/Bootstrap grey text utilities for a dark canvas */ .text-dark, .text-gray-900, .text-gray-800 { color: #e7e7ef !important; } .text-gray-700, .text-gray-600 { color: #b7b7c6 !important; } .text-muted, .text-gray-500, .text-gray-400 { color: var(--text-muted) !important; } .text-gray-300 { color: var(--text-dim) !important; } /* Default body links pick up gold on hover */ .text-hover-primary:hover, a.text-hover-primary:hover, a.text-white.text-hover-primary:hover { color: var(--gold-soft) !important; } .text-primary { color: var(--gold-soft) !important; } /* ---------------------------------------------------------------------------- 3. Surfaces — cards, panels, separators ------------------------------------------------------------------------- */ .card { background-color: var(--surface); border: 1px solid var(--border-faint); border-radius: 14px; box-shadow: 0 8px 28px -16px rgba(0, 0, 0, 0.6); } .card .card-header { border-bottom: 1px solid var(--border-faint); } .card .card-footer { border-top: 1px solid var(--border-faint); } .card .card-title { color: #f4f4f6; } .card .card-label, .card .card-title .card-label { color: #ffffff !important; } /* Generic light surfaces → dark surfaces */ .bg-white, .bg-body { background-color: var(--surface) !important; } .bg-light, .bg-gray-100, .bg-gray-200, .bg-gray-300 { background-color: var(--surface-2) !important; } /* Separators / faint borders */ .separator { border-color: var(--border-faint) !important; } .border, .border-top, .border-bottom, .border-start, .border-end, .border-gray-200, .border-gray-300 { border-color: var(--border-faint) !important; } /* ---------------------------------------------------------------------------- 4. Primary accent — buttons / .bg-primary / checks / radios ------------------------------------------------------------------------- */ .btn.btn-primary, .btn-primary, .btn-check:checked + .btn.btn-primary, .btn-check:active + .btn.btn-primary { background: var(--gold-gradient) !important; background-color: var(--gold) !important; /* fallback for no-oklch UAs */ border-color: transparent !important; color: var(--on-gold) !important; box-shadow: none; } .btn.btn-primary .svg-icon, .btn.btn-primary .svg-icon *, .btn.btn-primary i, .btn-primary .svg-icon, .btn-primary i { color: var(--on-gold) !important; fill: var(--on-gold) !important; } .btn.btn-primary:hover:not(.btn-active), .btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:active:not(.btn-active), .btn.btn-primary.active, .btn.btn-primary.show, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .show > .btn.btn-primary { background: var(--gold-gradient-hover) !important; background-color: var(--gold-deep) !important; border-color: transparent !important; color: var(--on-gold) !important; } /* Light/soft primary buttons and active states used around the theme */ .btn.btn-light-primary, .btn.btn-bg-light.btn-active-color-primary:hover, .btn.btn-active-light-primary:hover:not(.btn-active), .btn.btn-active-light-primary:focus:not(.btn-active), .btn.btn-active-color-primary:hover { background-color: rgba(228, 181, 61, 0.14) !important; color: var(--gold-soft) !important; } .btn.btn-active-light-primary:hover .svg-icon, .btn.btn-active-color-primary:hover .svg-icon { color: var(--gold-soft) !important; } /* Solid icon buttons that sit on white in the light theme */ .btn.btn-bg-white, .btn.btn-icon.btn-active-light-primary { background-color: var(--surface-2); color: #cdcdde; } /* bg-primary blocks (badges, chips, avatars, progress) */ .bg-primary, .badge.badge-primary, .symbol-label.bg-primary, .progress-bar.bg-primary { background: var(--gold-gradient) !important; color: var(--on-gold) !important; } .badge.badge-light-primary { background-color: rgba(228, 181, 61, 0.16) !important; color: var(--gold-soft) !important; } /* Checkboxes / radios: dark glyph layered over the gold gradient */ .form-check-input { background-color: #1b1b29; border: 1px solid rgba(255, 255, 255, 0.15); } .form-check-input:checked { background-color: var(--gold) !important; border-color: transparent !important; } .form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%233a2c00' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"), var(--gold-gradient) !important; } .form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%233a2c00'/%3e%3c/svg%3e"), var(--gold-gradient) !important; } .form-check-input:focus { border-color: rgba(228, 181, 61, 0.5); box-shadow: 0 0 0 0.2rem rgba(228, 181, 61, 0.18); } /* Switches */ .form-switch .form-check-input:checked { background-position: right center; } /* ---------------------------------------------------------------------------- 5. Generic form controls (dark) — keeps inputs from rendering white ------------------------------------------------------------------------- */ .form-control, .form-select { background-color: #1b1b29 !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #cdcdde !important; } .form-control:focus, .form-select:focus { border-color: rgba(228, 181, 61, 0.45) !important; background-color: #1b1b29 !important; color: #fff !important; } .form-control::placeholder { color: var(--text-dim) !important; } .form-control.form-control-solid, .form-select.form-select-solid { background-color: var(--surface-2) !important; border-color: rgba(255, 255, 255, 0.06) !important; color: #cdcdde !important; } .input-group-text { background-color: var(--surface-2); border-color: rgba(255, 255, 255, 0.10); color: var(--text-muted); } /* ---------------------------------------------------------------------------- 6. Header bar (top, right side) ------------------------------------------------------------------------- */ #ms_header.header, .header { background-color: var(--surface); border-bottom: 1px solid var(--border-faint); box-shadow: none; } /* Sticky/fixed header: clear the sidebar by offsetting left. Do NOT force position:fixed here — only restyle the state Metronic toggles. */ @media (min-width: 992px) { body.aside-enabled.header-fixed[data-kt-sticky-header="on"] .header { left: var(--sidebar-width) !important; right: 0 !important; background-color: var(--surface) !important; border-bottom: 1px solid var(--border-faint) !important; box-shadow: none !important; transition: left 0.3s ease; } } /* Toolbar transparent + page title white */ .toolbar, #ms_toolbar { background: transparent !important; box-shadow: none; } .page-title h1, .page-title .h1 { color: #fff !important; } .page-title .breadcrumb .breadcrumb-item, .page-title .breadcrumb .breadcrumb-item a { color: rgba(255, 255, 255, 0.65) !important; } .page-title .breadcrumb .breadcrumb-item a:hover { color: var(--gold-soft) !important; } /* ---------------------------------------------------------------------------- 7. Left sidebar (aside) — fixed, full height, gold accents ------------------------------------------------------------------------- */ #ms_aside.aside { background: linear-gradient(180deg, var(--sidebar-bg-2) 0%, var(--sidebar-bg) 100%); border: 0; border-right: 1px solid var(--border-faint); border-radius: 0; box-shadow: none; padding: 0; } /* Desktop: pin the sidebar and offset the page content. */ @media (min-width: 992px) { #ms_aside.aside { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-width); z-index: 101; display: flex; flex-direction: column; } /* Offset the whole wrapper (header + content + footer) past the sidebar. The fixed aside is out of flow, so there is no double spacing. Gated on .aside-enabled so non-sidebar layouts (e.g. auth) are untouched. */ body.aside-enabled .wrapper, body.aside-enabled #ms_wrapper.wrapper { padding-left: var(--sidebar-width); transition: padding-left 0.3s ease; } /* Neutralise the bundle's sticky-aside content padding so it can't double up. */ .aside-enabled[data-kt-sticky-aside-sticky="on"] .content, .aside-enabled .content { padding-left: 0; } /* Hide the now-redundant horizontal header nav + header logo on desktop; the sidebar is the single source of navigation/branding. */ #ms_header_nav { display: none !important; } #ms_header .header-logo { display: none !important; } /* With the horizontal nav hidden, the header wrapper's space-between collapses to a single item (left-anchored). Push the user/topbar menu to the right. The wrapper is the only element with both classes inside the header. */ #ms_header .justify-content-between.flex-lg-grow-1 { justify-content: flex-end !important; } } /* Brand / logo row */ #ms_aside .aside-logo { height: 65px; flex: 0 0 65px; display: flex; align-items: center; justify-content: center; padding: 0 25px; border-bottom: 1px solid var(--border-faint); } #ms_aside .aside-logo img { max-height: 44px; width: auto; } /* Scroll area fills the space below the brand row */ #ms_aside_menu_wrapper { margin-top: 0.75rem; margin-bottom: 0.5rem; } /* --- Menu links --- */ #ms_aside .menu .menu-item .menu-link { color: var(--text-muted); border-radius: 9px; padding: 10px 14px; margin: 2px 0; font-weight: 500; transition: color 0.15s ease, background-color 0.15s ease; } /* Base menu-title color (#9a9aa8). The bundle's .menu-title-gray-800 paints this #3F4254 otherwise; the #id selector outranks it. No !important so the hover / active / show / here state colors below still take over. */ #ms_aside .menu .menu-item .menu-link .menu-title { font-size: 1.025rem; color: var(--text-muted); } #ms_aside .menu .menu-item .menu-link .menu-icon, #ms_aside .menu .menu-item .menu-link .menu-icon .svg-icon, #ms_aside .menu .menu-item .menu-link .menu-icon i { color: var(--text-muted); } #ms_aside .menu .menu-item .menu-link .menu-bullet .bullet { background-color: var(--text-dim); } #ms_aside .menu .menu-item .menu-link .menu-arrow:after { color: var(--text-dim); } /* Hover (non-active) */ #ms_aside .menu .menu-item .menu-link:hover:not(.active), #ms_aside .menu .menu-item.hover > .menu-link:not(.active), #ms_aside .menu .menu-item.show > .menu-link:not(.active) { color: #fff; background-color: rgba(255, 255, 255, 0.05); } #ms_aside .menu .menu-item .menu-link:hover:not(.active) .menu-icon, #ms_aside .menu .menu-item .menu-link:hover:not(.active) .menu-icon .svg-icon, #ms_aside .menu .menu-item .menu-link:hover:not(.active) .menu-title { color: #fff; } #ms_aside .menu .menu-item .menu-link:hover:not(.active) .menu-bullet .bullet { background-color: var(--gold); } /* Expanded ("show") or ancestor-of-active ("here") parent → gold accent. Overrides Metronic's menu-state-*-primary (which defaults to blue #009EF7). */ #ms_aside .menu .menu-item.here > .menu-link:not(.active) { background-color: rgba(255, 255, 255, 0.05); } #ms_aside .menu .menu-item.show > .menu-link:not(.active) .menu-title, #ms_aside .menu .menu-item.here > .menu-link:not(.active) .menu-title, #ms_aside .menu .menu-item.show > .menu-link:not(.active) .menu-icon, #ms_aside .menu .menu-item.show > .menu-link:not(.active) .menu-icon .svg-icon, #ms_aside .menu .menu-item.here > .menu-link:not(.active) .menu-icon, #ms_aside .menu .menu-item.here > .menu-link:not(.active) .menu-icon .svg-icon, #ms_aside .menu .menu-item.show > .menu-link:not(.active) .menu-arrow:after, #ms_aside .menu .menu-item.here > .menu-link:not(.active) .menu-arrow:after { color: var(--gold-soft) !important; } #ms_aside .menu .menu-item.show > .menu-link:not(.active) .menu-bullet .bullet, #ms_aside .menu .menu-item.here > .menu-link:not(.active) .menu-bullet .bullet { background-color: var(--gold) !important; } /* Smooth arrow rotation as the accordion opens/closes */ #ms_aside .menu .menu-item .menu-link .menu-arrow { transition: transform 0.2s ease; } /* Active */ #ms_aside .menu .menu-item .menu-link.active { color: var(--on-gold); font-weight: 600; background: var(--gold-gradient); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.55); } #ms_aside .menu .menu-item .menu-link.active .menu-title, #ms_aside .menu .menu-item .menu-link.active .menu-icon, #ms_aside .menu .menu-item .menu-link.active .menu-icon .svg-icon, #ms_aside .menu .menu-item .menu-link.active .menu-icon i, #ms_aside .menu .menu-item .menu-link.active .menu-arrow:after { color: var(--on-gold) !important; } #ms_aside .menu .menu-item .menu-link.active .menu-bullet .bullet { background-color: var(--on-gold); } /* Sub-menu items */ #ms_aside .menu .menu-sub .menu-item .menu-link { padding-left: 22px; } #ms_aside .menu .menu-sub .menu-item .menu-link .menu-title { font-size: 0.95rem; } /* Aside scrollbar */ #ms_aside_menu_wrapper::-webkit-scrollbar { width: 6px; } #ms_aside_menu_wrapper::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; } /* Mobile: sidebar becomes a drawer */ @media (max-width: 991.98px) { #ms_aside.aside.drawer-on, #ms_aside.aside.drawer { box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.35); width: var(--sidebar-width); z-index: 110; } } /* ---------------------------------------------------------------------------- 8. Footer (page) ------------------------------------------------------------------------- */ #ms_footer.footer { background: transparent; } #ms_footer .text-dark, #ms_footer .text-gray-800 { color: #b7b7c6 !important; } /* ---------------------------------------------------------------------------- 9. Tables (dark) ------------------------------------------------------------------------- */ .table { --bs-table-bg: transparent; --bs-table-color: #cdcdde; color: #cdcdde; } .table > :not(caption) > * > * { border-bottom-color: var(--border-faint); } .table th, .table thead th { color: var(--text-muted) !important; } .table.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: #fff; color: #fff; } .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-striped-bg: rgba(255, 255, 255, 0.02); color: #cdcdde; } /* DataTables length/filter/info/pagination text */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--text-muted); } .page-link { background-color: var(--surface-2); border-color: var(--border-faint); color: #cdcdde; } .page-item.active .page-link { background: var(--gold-gradient); border-color: transparent; color: var(--on-gold); } /* ---------------------------------------------------------------------------- 10. Dropdown / menu popovers (dark) — incl. body-appended Metronic menus ------------------------------------------------------------------------- */ .dropdown-menu, .menu.menu-sub-dropdown, .menu-sub.menu-sub-dropdown { background-color: var(--surface); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6); color: #cdcdde; } .dropdown-item { color: #cdcdde; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--surface-2); color: #fff; } /* Topbar / generic menu popovers */ .menu-sub-dropdown .menu-item .menu-link { color: #cdcdde; } .menu-sub-dropdown .menu-item .menu-link:hover:not(.active), .menu-sub-dropdown .menu-item.show > .menu-link { background-color: var(--surface-2); color: #fff; } .menu-sub-dropdown .menu-item .menu-link.active { background-color: rgba(228, 181, 61, 0.18); color: var(--gold-soft); } .menu-sub-dropdown .separator { border-color: var(--border-faint); } /* ---------------------------------------------------------------------------- 11. Modals (dark) ------------------------------------------------------------------------- */ .modal-content { background-color: var(--surface); border: 1px solid var(--border-faint); color: #cdcdde; } .modal-header, .modal-footer { border-color: var(--border-faint); } .modal-title { color: #f4f4f6; } .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* ---------------------------------------------------------------------------- 12. Select2 (appended to , stays white otherwise) — full dark fix ------------------------------------------------------------------------- */ .select2-dropdown { background-color: var(--surface); border: 1px solid rgba(255, 255, 255, 0.10); color: #cdcdde; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6); } .select2-container--default .select2-results__option { color: #cdcdde; background-color: transparent; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted { background-color: var(--surface-2) !important; color: #fff !important; } .select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option--selected { background-color: rgba(228, 181, 61, 0.18) !important; color: #fff !important; } .select2-container--default .select2-results__option[aria-disabled="true"] { color: var(--text-dim); } /* Dropdown search field */ .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--page-bg); border: 1px solid rgba(255, 255, 255, 0.10); color: #cdcdde; } /* Closed selection box — single */ .select2-container--default .select2-selection--single { background-color: #1b1b29; border: 1px solid rgba(255, 255, 255, 0.10); } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #cdcdde; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-dim); } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-muted) transparent transparent transparent; } /* Closed selection box — multiple */ .select2-container--default .select2-selection--multiple { background-color: #1b1b29; border: 1px solid rgba(255, 255, 255, 0.10); } /* Multi-select chips */ .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--surface-2); border: 1px solid rgba(255, 255, 255, 0.08); color: #e4e4e4; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #e4e4e4; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fff; } /* Inline typed text + placeholders */ .select2-container--default .select2-search--inline .select2-search__field { color: #cdcdde; } .select2-search__field::placeholder { color: var(--text-dim); } .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single { border-color: rgba(228, 181, 61, 0.45); } /* ---------------------------------------------------------------------------- 13. Other body-appended popovers — date pickers, tooltips, tagify ------------------------------------------------------------------------- */ /* Bootstrap tooltips */ .tooltip .tooltip-inner { background-color: var(--surface-2); color: #fff; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6); } .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--surface-2); } .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--surface-2); } .tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--surface-2); } .tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--surface-2); } .popover { background-color: var(--surface); border-color: rgba(255, 255, 255, 0.10); color: #cdcdde; } .popover .popover-header { background-color: var(--surface-2); color: #f4f4f6; border-bottom-color: var(--border-faint); } /* flatpickr */ .flatpickr-calendar { background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6); color: #cdcdde; } .flatpickr-calendar .flatpickr-months .flatpickr-month, .flatpickr-calendar .flatpickr-weekdays, .flatpickr-calendar span.flatpickr-weekday { background: transparent; color: var(--text-muted); fill: var(--text-muted); } .flatpickr-calendar .flatpickr-day { color: #cdcdde; } .flatpickr-calendar .flatpickr-day:hover { background: var(--surface-2); border-color: var(--surface-2); } .flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected:hover { background: var(--gold); border-color: transparent; color: var(--on-gold); } .flatpickr-calendar .flatpickr-day.today { border-color: var(--gold-deep); } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg, .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg { fill: var(--text-muted); } /* bootstrap-daterangepicker */ .daterangepicker { background-color: var(--surface); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6); color: #cdcdde; } .daterangepicker:before { border-bottom-color: rgba(255, 255, 255, 0.10); } .daterangepicker:after { border-bottom-color: var(--surface); } .daterangepicker .calendar-table { background-color: var(--surface); border-color: var(--surface); } .daterangepicker td.available:hover, .daterangepicker th.available:hover { background-color: var(--surface-2); } .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { background-color: var(--surface); color: var(--text-dim); } .daterangepicker td.in-range { background-color: rgba(228, 181, 61, 0.14); color: #fff; } .daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--gold); color: var(--on-gold); } .daterangepicker .ranges li:hover { background-color: var(--surface-2); } .daterangepicker .ranges li.active { background-color: var(--gold); color: var(--on-gold); } .daterangepicker .drp-buttons { border-top-color: var(--border-faint); } /* tagify */ .tagify { --tag-bg: var(--surface-2); --tag-text-color: #e4e4e4; --tags-border-color: rgba(255, 255, 255, 0.10); --input-color: #cdcdde; --placeholder-color: var(--text-dim); background-color: #1b1b29; } /* toastr */ #toast-container > div { box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6); opacity: 1; } /* ---------------------------------------------------------------------------- Dashboard (home) — modern dark cards Self-contained: all rules are scoped to dashboard-only classes, so the global .bg-primary gold-fill (used elsewhere) is untouched. Gold is used as an ACCENT here (icons, hairlines, hovers); the cards themselves stay dark. ------------------------------------------------------------------------- */ /* Header ------------------------------------------------------------------ */ .dash-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 4px 0 26px; } .dash-title { font-size: 1.55rem; font-weight: 700; color: #f4f4f6; margin: 0 0 4px; } .dash-subtitle { color: var(--text-muted); font-size: 0.95rem; } .dash-date { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-faint); color: #b7b7c6; font-weight: 500; white-space: nowrap; } .dash-date .svg-icon { color: var(--gold-soft) !important; } .dash-section-title { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin: 30px 0 14px; } /* Stat grid --------------------------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .stat-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 22px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 16px; box-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.7); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } /* thin gold accent bar down the left edge */ .stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #e4b53d; /* solid fallback */ background: var(--gold-gradient); opacity: 0.85; } .stat-card:hover { transform: translateY(-3px); border-color: rgba(228, 181, 61, 0.35); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(228, 181, 61, 0.10); } .stat-ic { flex: 0 0 auto; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(228, 181, 61, 0.14); } .stat-ic .svg-icon, .stat-ic .svg-icon * { color: var(--gold-soft) !important; } .stat-body { min-width: 0; } .stat-val { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: #f4f4f6; } .stat-val-sep { color: var(--text-muted); font-weight: 600; font-size: 1.15rem; } .stat-lbl { margin-top: 4px; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; display: flex; align-items: center; gap: 7px; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.6); animation: dashPulse 1.6s ease-out infinite; } @keyframes dashPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(255, 90, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0); } } /* Quick links ------------------------------------------------------------- */ .quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .quick-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 16px; color: #cdcdde; text-decoration: none; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .quick-tile:hover { transform: translateY(-3px); border-color: rgba(228, 181, 61, 0.35); background: linear-gradient(180deg, var(--surface), rgba(228, 181, 61, 0.05)); } .quick-ic { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background: rgba(228, 181, 61, 0.14); } .quick-ic .svg-icon, .quick-ic .svg-icon * { color: var(--gold-soft) !important; } .quick-label { font-weight: 600; font-size: 0.98rem; color: #e7e7ef; } .quick-tile:hover .quick-label { color: var(--gold-soft); } /* Recent activity --------------------------------------------------------- */ .dash-activity { margin-top: 26px; } .activity-feed { display: flex; flex-direction: column; } .activity-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 8px; border-bottom: 1px solid var(--border-faint); border-radius: 8px; transition: background 0.15s ease; } .activity-row:last-child { border-bottom: 0; } .activity-row:hover { background: var(--surface-2); } .activity-dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: #e4b53d; background: var(--gold-gradient); } .activity-main { flex: 1 1 auto; min-width: 0; } .activity-desc { color: #e7e7ef; font-weight: 500; } .activity-meta { margin-top: 3px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .activity-causer { color: var(--text-muted); font-size: 0.85rem; } .activity-chip { font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: rgba(228, 181, 61, 0.14); color: var(--gold-soft); } .activity-time { color: var(--text-dim); font-size: 0.82rem; white-space: nowrap; } .activity-empty { text-align: center; padding: 40px 10px; color: var(--text-muted); } .activity-empty .svg-icon { color: var(--text-dim) !important; } /* Responsive tightening --------------------------------------------------- */ @media (max-width: 767.98px) { .stat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .stat-val { font-size: 1.55rem; } .dash-title { font-size: 1.3rem; } }