/* * theme.css — site-wide light / dark theme * ───────────────────────────────────────── * Linked LAST from _BackendHeaderScripts (member/admin area, AdminLTE + * Bootstrap 4) and _BasonHeaderScripts (public site, Bason + Bootstrap 5), * so it sits on top of every template stylesheet. * * is set before first paint by * _ThemeHead.cshtml and switched by /js/theme.js. * * Structure * 1. Tokens (light defaults + dark values) * 2. Toggle buttons * 3. Dark mode (screen only — printing always uses the light look) * 3.1 Base elements 3.6 Bason public-site template * 3.2 Backend chrome 3.7 Third-party plugins * 3.3 Bootstrap components 3.8 Inline-style safety net * 3.4 Forms 3.9 Scrollbars * 3.5 AdminLTE widgets + backend.css helpers * * Base element rules use :where(html[data-theme="dark"]) el so they keep * the same (low) specificity as the template rule they replace — that way * any more specific template rule (e.g. .light-color a, .text-white) still wins. * * Page-specific stylesheets (dashboard-tiles.css, special-savings.css) read * the tokens below directly, so they need no overrides here. */ /* ═══ 1. Tokens ═════════════════════════════════════════════════════════ */ :root { --bg-body: #f4f6f9; --bg-surface: #ffffff; --bg-surface-alt: #f6f8fb; --bg-elevated: #ffffff; --bg-input: #ffffff; --bg-hover: #eef2f7; --border-color: #e6ebf2; --border-soft: #f0f2f6; --border-strong: #cfd8e3; --text-primary: #1f2a3c; --text-secondary: #64748b; --text-muted: #98a2b3; --text-body: #475569; --link: #0077d3; --accent: #3c8dbc; --header-bg: #1183e1; --sidebar-bg: #191818; --sidebar-text: #b8c7ce; --card-header-grad: linear-gradient(135deg, #1f2a3c, #33455f); --btn-dark-bg: #1f2a3c; --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-hover: 0 8px 20px rgba(31, 42, 60, 0.08); } html[data-theme="dark"] { --bg-body: #0f1521; --bg-surface: #1a2332; --bg-surface-alt: #16202e; --bg-elevated: #212c3d; --bg-input: #121a27; --bg-hover: #243246; --border-color: #2b3a4f; --border-soft: #243246; --border-strong: #3a4b63; --text-primary: #e6ebf2; --text-secondary: #a3b1c2; --text-muted: #8494a7; --text-body: #c3cdd9; --link: #6cb2ff; --accent: #5aa7d6; --header-bg: #17263a; --sidebar-bg: #10192a; --sidebar-text: #a3b4c6; --card-header-grad: linear-gradient(135deg, #22324a, #2d4260); --btn-dark-bg: #3a4b63; --shadow: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* ═══ 2. Toggle buttons ═════════════════════════════════════════════════ */ /* Backend header (AdminLTE navbar) — inherits the navbar link box model */ .main-header .theme-toggle i { font-size: 15px; width: 16px; text-align: center; transition: transform .25s ease; } .main-header .theme-toggle:hover i { transform: rotate(20deg); } /* Public header (Bason header-menu-buttons) */ .header-menu-buttons .theme-toggle { cursor: pointer; } /* Floating fallback, injected by theme.js on pages with no toggle */ .theme-fab { position: fixed; left: 16px; bottom: 16px; z-index: 1040; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s ease; } .theme-fab:hover { transform: translateY(-2px); } .theme-fab:focus-visible, [data-theme-toggle]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media print { .theme-fab, [data-theme-toggle] { display: none !important; } } /* Smooth hand-off when the user flips the switch (never on first paint) */ html.theme-animating, html.theme-animating *, html.theme-animating *::before, html.theme-animating *::after { transition: background-color .2s ease, border-color .2s ease, color .2s ease !important; } /* ═══ 3. Dark mode ══════════════════════════════════════════════════════ */ @media screen { /* ── 3.1 Base elements ─────────────────────────────────────────────── */ :where(html[data-theme="dark"]), :where(html[data-theme="dark"]) body { background-color: var(--bg-body); color: var(--text-body); } /* Headings inherit, so they pick up white/yellow/etc. parent containers… */ :where(html[data-theme="dark"]) h1, :where(html[data-theme="dark"]) h2, :where(html[data-theme="dark"]) h3, :where(html[data-theme="dark"]) h4, :where(html[data-theme="dark"]) h5, :where(html[data-theme="dark"]) h6, :where(html[data-theme="dark"]) .h1:not([class*='-color']), :where(html[data-theme="dark"]) .h2:not([class*='-color']), :where(html[data-theme="dark"]) .h3:not([class*='-color']), :where(html[data-theme="dark"]) .h4:not([class*='-color']), :where(html[data-theme="dark"]) .h5:not([class*='-color']), :where(html[data-theme="dark"]) .h6:not([class*='-color']), :where(html[data-theme="dark"]) .heading-color { color: inherit; } /* …but are a touch brighter than body copy on ordinary surfaces */ :where(html[data-theme="dark"]) :where(.content, .content-area, .card-body, .box-body, .modal-body, .tab-content, .md-card__body, .ss-panel, .main-section:not([class*='-color-bg'])) h1, :where(html[data-theme="dark"]) :where(.content, .content-area, .card-body, .box-body, .modal-body, .tab-content, .md-card__body, .ss-panel, .main-section:not([class*='-color-bg'])) h2, :where(html[data-theme="dark"]) :where(.content, .content-area, .card-body, .box-body, .modal-body, .tab-content, .md-card__body, .ss-panel, .main-section:not([class*='-color-bg'])) h3, :where(html[data-theme="dark"]) :where(.content, .content-area, .card-body, .box-body, .modal-body, .tab-content, .md-card__body, .ss-panel, .main-section:not([class*='-color-bg'])) h4, :where(html[data-theme="dark"]) :where(.content, .content-area, .card-body, .box-body, .modal-body, .tab-content, .md-card__body, .ss-panel, .main-section:not([class*='-color-bg'])) h5, :where(html[data-theme="dark"]) :where(.content, .content-area, .card-body, .box-body, .modal-body, .tab-content, .md-card__body, .ss-panel, .main-section:not([class*='-color-bg'])) h6 { color: var(--text-primary); } :where(html[data-theme="dark"]) a { color: var(--link); } :where(html[data-theme="dark"]) a:hover { color: #9ccbff; } :where(html[data-theme="dark"]) hr { border-color: var(--border-color); } :where(html[data-theme="dark"]) code { color: #f0b8d0; } :where(html[data-theme="dark"]) pre { background-color: var(--bg-surface-alt); color: var(--text-primary); border-color: var(--border-color); } :where(html[data-theme="dark"]) ::selection { background: #2f5b8a; color: #fff; } html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; } html[data-theme="dark"] .text-dark:not(.badge):not(.btn):not(.bg-warning):not(.bg-light), html[data-theme="dark"] .text-black, html[data-theme="dark"] .link-black { color: var(--text-primary) !important; } html[data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; } html[data-theme="dark"] .text-primary { color: #6cb2ff !important; } html[data-theme="dark"] .text-navy { color: #7ea6e0 !important; } html[data-theme="dark"] .text-success { color: #4ade80 !important; } html[data-theme="dark"] .text-danger { color: #f87171 !important; } html[data-theme="dark"] .text-info { color: #38bdf8 !important; } html[data-theme="dark"] .text-warning { color: #fbbf24 !important; } html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-default, html[data-theme="dark"] .white-color-bg { background-color: var(--bg-surface) !important; color: var(--text-body); } html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-gray-light, html[data-theme="dark"] .grey-1-color-bg, html[data-theme="dark"] .grey-4-color-bg { background-color: var(--bg-surface-alt) !important; color: var(--text-body); } html[data-theme="dark"] .bg-gray, html[data-theme="dark"] .bg-secondary:not(.btn) { background-color: #334155 !important; color: var(--text-primary) !important; } html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-left, html[data-theme="dark"] .border-right, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: var(--border-color) !important; } html[data-theme="dark"] .border-primary { border-color: #3b82f6 !important; } html[data-theme="dark"] .shadow, html[data-theme="dark"] .box-shadow, html[data-theme="dark"] .shadow-sm { box-shadow: var(--shadow) !important; } /* ── 3.2 Backend chrome (AdminLTE / skin-blue) ─────────────────────── */ html[data-theme="dark"] .content-wrapper, html[data-theme="dark"] .right-side { background-color: var(--bg-body); color: var(--text-body); } html[data-theme="dark"] .content-header.sty-one, html[data-theme="dark"] .content-header { background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 1px 0 var(--border-color); } html[data-theme="dark"] .content-header > h1 { color: var(--text-primary); } html[data-theme="dark"] .content-header > .breadcrumb, html[data-theme="dark"] .content-header > .breadcrumb > li, html[data-theme="dark"] .content-header > .breadcrumb > li > a { color: var(--text-secondary); background: transparent; } html[data-theme="dark"] .main-header .navbar, html[data-theme="dark"] .main-header .logo, html[data-theme="dark"] .skin-blue .main-header .navbar, html[data-theme="dark"] .skin-blue .main-header .logo, html[data-theme="dark"] .skin-blue .main-header .logo:hover, html[data-theme="dark"] .skin-blue .main-header .navbar .sidebar-toggle:hover { background-color: var(--header-bg) !important; border-bottom-color: var(--border-color); } html[data-theme="dark"] .skin-blue .wrapper, html[data-theme="dark"] .main-sidebar, html[data-theme="dark"] .skin-blue .main-sidebar, html[data-theme="dark"] .skin-blue .left-side, html[data-theme="dark"] .control-sidebar, html[data-theme="dark"] .control-sidebar-bg { background-color: var(--sidebar-bg) !important; } html[data-theme="dark"] .skin-blue .sidebar a, html[data-theme="dark"] .sidebar-menu > li > a { color: var(--sidebar-text); } html[data-theme="dark"] .skin-blue .sidebar-menu > li.header { background: #0b1220; color: #6b7f95; } html[data-theme="dark"] .skin-blue .sidebar-menu > li:hover > a, html[data-theme="dark"] .skin-blue .sidebar-menu > li.active > a { background: #172338; color: #fff; } html[data-theme="dark"] .skin-blue .sidebar-menu > li > .treeview-menu, html[data-theme="dark"] .treeview-menu { background: #0c1422; } html[data-theme="dark"] .user-panel, html[data-theme="dark"] .user-panel > .info, html[data-theme="dark"] .user-panel > .info > a { color: var(--sidebar-text); } html[data-theme="dark"] .main-footer { background: var(--bg-surface); color: var(--text-secondary); border-top: 1px solid var(--border-color); } /* user menu + messages dropdown in the header */ html[data-theme="dark"] .skin-blue .main-header li.user-header { background-color: #1d3a5c; } html[data-theme="dark"] .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p { color: #fff; } html[data-theme="dark"] .navbar-nav > .user-menu > .dropdown-menu > .user-body, html[data-theme="dark"] .navbar-nav > .user-menu > .dropdown-menu > .user-footer { background: var(--bg-surface-alt); border-color: var(--border-color); } html[data-theme="dark"] .dropdown-menu > li > a, html[data-theme="dark"] .navbar-nav > .user-menu > .dropdown-menu > li > a { color: var(--text-body); } html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .logoff a:hover { background-color: var(--bg-hover); color: var(--text-primary); } html[data-theme="dark"] .dropdown-menu > .divider, html[data-theme="dark"] .dropdown-menu li.divider { background-color: var(--border-color); } html[data-theme="dark"] .logoff, html[data-theme="dark"] .logoff a { color: var(--text-secondary); } html[data-theme="dark"] .dropdown-menu.message-dropdown { background-color: var(--bg-surface-alt); border-color: var(--border-color); } html[data-theme="dark"] .message-dropdown .dropdown-item { color: var(--text-body); } html[data-theme="dark"] .message-dropdown .dropdown-item:hover { background-color: var(--bg-hover); } html[data-theme="dark"] .message-dropdown .dropdown-divider { border-top-color: var(--border-color); } /* ── 3.3 Bootstrap components (BS4 backend + BS5 public) ───────────── */ html[data-theme="dark"] { /* Bootstrap 5.x variables (public site) */ --bs-body-bg: var(--bg-body); --bs-body-color: var(--text-body); --bs-border-color: var(--border-color); --bs-light: #1e293b; --bs-light-rgb: 30, 41, 59; --bs-white-rgb: 26, 35, 50; } html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .panel-default, html[data-theme="dark"] .well, html[data-theme="dark"] .jumbotron, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .popover, html[data-theme="dark"] .toast { background-color: var(--bg-surface); color: var(--text-body); border-color: var(--border-color); } html[data-theme="dark"] .card-header:not([class*="bg-"]), html[data-theme="dark"] .card-footer:not([class*="bg-"]), html[data-theme="dark"] .panel-heading, html[data-theme="dark"] .panel-footer, html[data-theme="dark"] .panel-default > .panel-heading, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer, html[data-theme="dark"] .popover-header { background-color: var(--bg-surface-alt); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .panel-body, html[data-theme="dark"] .modal .panel-body { background-color: transparent; color: inherit; } html[data-theme="dark"] .panel-title a { color: var(--text-primary); } html[data-theme="dark"] .close { color: var(--text-primary); text-shadow: none; opacity: .75; } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } html[data-theme="dark"] .dropdown-menu { background-color: var(--bg-elevated); border-color: var(--border-color); color: var(--text-body); box-shadow: var(--shadow); } html[data-theme="dark"] .dropdown-item, html[data-theme="dark"] .dropdown-header { color: var(--text-body); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--bg-hover); color: var(--text-primary); } html[data-theme="dark"] .dropdown-divider { border-top-color: var(--border-color); } html[data-theme="dark"] .list-group-item { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-body); } html[data-theme="dark"] .list-group-item-action:hover, html[data-theme="dark"] a.list-group-item:hover { background-color: var(--bg-hover); color: var(--text-primary); } html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--border-color); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary); } html[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--border-color) var(--border-color) transparent; color: var(--text-primary); } html[data-theme="dark"] .nav-tabs .nav-link.active, html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link { background-color: var(--bg-surface); border-color: var(--border-color) var(--border-color) var(--bg-surface); color: var(--text-primary); } html[data-theme="dark"] .tab-content { background-color: var(--bg-surface); color: var(--text-body); } html[data-theme="dark"] .control-sidebar .tab-content { background-color: transparent; } html[data-theme="dark"] .nav-pills > li > a, html[data-theme="dark"] .nav-stacked > li > a { color: var(--text-body); } html[data-theme="dark"] .nav-stacked > li.active > a, html[data-theme="dark"] .nav-stacked > li > a:hover { background: var(--bg-hover); color: var(--text-primary); } html[data-theme="dark"] .content .breadcrumb, html[data-theme="dark"] .card .breadcrumb { background-color: var(--bg-surface-alt); } html[data-theme="dark"] .breadcrumb-item.active { color: var(--text-secondary); } html[data-theme="dark"] .page-link, html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--link); } html[data-theme="dark"] .page-link:hover, html[data-theme="dark"] .pagination > li > a:hover { background-color: var(--bg-hover); } html[data-theme="dark"] .page-item.disabled .page-link, html[data-theme="dark"] .pagination > .disabled > a, html[data-theme="dark"] .pagination > .disabled > span { background-color: var(--bg-surface-alt); color: var(--text-muted); } html[data-theme="dark"] .page-item.active .page-link, html[data-theme="dark"] .pagination > .active > a, html[data-theme="dark"] .pagination > .active > span { background-color: #2563eb; border-color: #2563eb; color: #fff; } html[data-theme="dark"] .table { color: var(--text-body); border-color: var(--border-color); background-color: transparent; --bs-table-bg: transparent; --bs-table-color: var(--text-body); --bs-table-striped-color: var(--text-body); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-active-color: var(--text-primary); --bs-table-active-bg: rgba(255, 255, 255, 0.06); --bs-table-hover-color: var(--text-primary); --bs-table-hover-bg: rgba(255, 255, 255, 0.05); } html[data-theme="dark"] .table th, html[data-theme="dark"] .table td, html[data-theme="dark"] .table thead th, html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered th, html[data-theme="dark"] .table-bordered td, html[data-theme="dark"] .table > :not(:last-child) > :last-child > * { border-color: var(--border-color); } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--text-primary); } html[data-theme="dark"] .table thead.thead-light, html[data-theme="dark"] .table .thead-light th, html[data-theme="dark"] .table-light, html[data-theme="dark"] .table-light > th, html[data-theme="dark"] .table-light > td, html[data-theme="dark"] .table-active, html[data-theme="dark"] .table-secondary { background-color: var(--bg-surface-alt) !important; color: var(--text-primary) !important; border-color: var(--border-color); --bs-table-bg: var(--bg-surface-alt); --bs-table-color: var(--text-primary); } html[data-theme="dark"] .table-dark, html[data-theme="dark"] .thead-dark th { background-color: #0b1220 !important; } html[data-theme="dark"] .list-table tr th { background-color: var(--bg-surface-alt); color: var(--text-primary); } /* Alerts: keep the hue, drop the pastel fill */ html[data-theme="dark"] .alert-success { background-color: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.35); color: #86efac; } html[data-theme="dark"] .alert-danger { background-color: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; } html[data-theme="dark"] .alert-info { background-color: rgba(14, 165, 233, 0.14); border-color: rgba(14, 165, 233, 0.35); color: #7dd3fc; } html[data-theme="dark"] .alert-warning { background-color: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.4); color: #fcd34d; } html[data-theme="dark"] .alert-primary { background-color: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.35); color: #93c5fd; } html[data-theme="dark"] .alert-secondary, html[data-theme="dark"] .alert-light { background-color: var(--bg-surface-alt); border-color: var(--border-color); color: var(--text-body); } html[data-theme="dark"] .alert a:not(.btn) { color: inherit; text-decoration: underline; } html[data-theme="dark"] .badge-light, html[data-theme="dark"] .label-default { background-color: #334155; color: var(--text-primary); } html[data-theme="dark"] .progress { background-color: var(--bg-surface-alt); } html[data-theme="dark"] .btn-default, html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-app { background-color: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-primary); } html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-app:hover { background-color: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); } html[data-theme="dark"] .btn-outline-dark, html[data-theme="dark"] .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-strong); } html[data-theme="dark"] .btn-outline-dark:hover, html[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--bg-hover); color: var(--text-primary); } html[data-theme="dark"] .btn-link { color: var(--link); } /* ── 3.4 Forms ─────────────────────────────────────────────────────── */ /* site.css / custom.css give inputs an aliceblue fill with black dotted or 2px black borders — both unreadable on dark. */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .custom-select, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):not(.btn) { background-color: var(--bg-input); border-color: var(--border-strong); color: var(--text-primary); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] .custom-select:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] input:focus:not([type="checkbox"]):not([type="radio"]):not(.btn) { background-color: var(--bg-input); border-color: #4a90d9; color: var(--text-primary); box-shadow: 0 0 0 0.2rem rgba(74, 144, 217, 0.25); } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-muted); opacity: 1; } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] input[readonly], html[data-theme="dark"] select:disabled { background-color: var(--bg-surface-alt); color: var(--text-secondary); } html[data-theme="dark"] select option { background-color: var(--bg-elevated); color: var(--text-primary); } html[data-theme="dark"] .input-group-text, html[data-theme="dark"] .input-group-addon, html[data-theme="dark"] .input-group .input-group-addon { background-color: var(--bg-surface-alt); border-color: var(--border-strong); color: var(--text-secondary); } html[data-theme="dark"] .col-form-label, html[data-theme="dark"] .control-label, html[data-theme="dark"] .form-label, html[data-theme="dark"] .form-group > label { color: var(--text-primary); } html[data-theme="dark"] .form-text, html[data-theme="dark"] .help-block { color: var(--text-muted); } html[data-theme="dark"] .custom-file-label, html[data-theme="dark"] .custom-file-control { background-color: var(--bg-input); border-color: var(--border-strong); color: var(--text-secondary); } html[data-theme="dark"] .form-check-input:not(:checked) { background-color: var(--bg-input); border-color: var(--border-strong); } /* Bason paints sign-in / checkout inputs white with an !important 1000px inset box-shadow (to mask browser autofill). Repaint that shadow in the input colour, and do the same for autofilled fields everywhere so Chrome/Edge's pale autofill fill doesn't show. */ html[data-theme="dark"] .form-block-sign input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] .form-block-returning-customer input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] textarea:-webkit-autofill, html[data-theme="dark"] select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important; box-shadow: 0 0 0 1000px var(--bg-input) inset !important; } html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] textarea:-webkit-autofill, html[data-theme="dark"] select:-webkit-autofill { -webkit-text-fill-color: var(--text-primary); caret-color: var(--text-primary); } html[data-theme="dark"] .form-block-sign input:not([type="checkbox"]):not([type="radio"]):focus, html[data-theme="dark"] .form-block-returning-customer input:not([type="checkbox"]):not([type="radio"]):focus, html[data-theme="dark"] input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset, 0 0 0 0.2rem rgba(74, 144, 217, 0.35) !important; box-shadow: 0 0 0 1000px var(--bg-input) inset, 0 0 0 0.2rem rgba(74, 144, 217, 0.35) !important; } /* validation helpers (backend.css) */ html[data-theme="dark"] .input-validation-error { background-color: rgba(239, 68, 68, 0.12) !important; border-color: #ef4444 !important; } html[data-theme="dark"] .validation-summary-errors { background-color: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.5); color: #fca5a5; } html[data-theme="dark"] .field-validation-error { color: #f87171; } /* ── 3.5 AdminLTE widgets + backend.css helpers ────────────────────── */ html[data-theme="dark"] .box, html[data-theme="dark"] .info-box, html[data-theme="dark"] .nav-tabs-custom, html[data-theme="dark"] .nav-tabs-custom > .tab-content, html[data-theme="dark"] .invoice, html[data-theme="dark"] .timeline > li > .timeline-item, html[data-theme="dark"] .direct-chat-text, html[data-theme="dark"] .attachment-block, html[data-theme="dark"] .todo-list > li, html[data-theme="dark"] .products-list > .item, html[data-theme="dark"] .box-comments, html[data-theme="dark"] .mailbox-attachment-info, html[data-theme="dark"] .login-box-body, html[data-theme="dark"] .register-box-body, html[data-theme="dark"] .lockscreen-item { background: var(--bg-surface); color: var(--text-body); border-color: var(--border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .box-header, html[data-theme="dark"] .box-header .box-title, html[data-theme="dark"] .info-box-number, html[data-theme="dark"] .info-box-text, html[data-theme="dark"] .users-list-name, html[data-theme="dark"] .box-comments .username, html[data-theme="dark"] .timeline > li > .timeline-item > .timeline-header, html[data-theme="dark"] .mailbox-attachment-name { color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] .box-footer, html[data-theme="dark"] .box.box-solid.box-default > .box-header, html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.header { background: var(--bg-surface-alt); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .nav-tabs-custom > .nav-tabs { border-bottom-color: var(--border-color); } html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a { color: var(--text-secondary); } html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a { background: var(--bg-surface); color: var(--text-primary); } html[data-theme="dark"] .callout code, html[data-theme="dark"] .callout .highlight { background-color: rgba(0, 0, 0, 0.25); } html[data-theme="dark"] .timeline > li > .fa, html[data-theme="dark"] .timeline > .time-label > span { background: var(--bg-elevated); color: var(--text-primary); } html[data-theme="dark"] .timeline:before { background: var(--border-color); } html[data-theme="dark"] .post, html[data-theme="dark"] .list-seperator, html[data-theme="dark"] .list-header { border-color: var(--border-color); color: var(--text-body); background: transparent; } html[data-theme="dark"] .sort-highlight { background: var(--bg-surface-alt); border-color: var(--border-color); } html[data-theme="dark"] .customtab li a.nav-link.active, html[data-theme="dark"] .tab-style1 ul.nav-tabs li a.active { background: transparent; color: var(--link); } html[data-theme="dark"] .customtab li a.nav-link:hover, html[data-theme="dark"] .tab-style1 ul li a:hover { background: transparent; color: var(--text-primary); } /* backend.css custom bits */ html[data-theme="dark"] #search_form, html[data-theme="dark"] #advance_search { background-color: var(--bg-surface); border-color: var(--border-color); } html[data-theme="dark"] .search-field { background-color: var(--bg-input); border: 1px solid var(--border-strong); } html[data-theme="dark"] .search-field input { background: transparent !important; border: none !important; } html[data-theme="dark"] .search-field button { color: var(--text-secondary); } html[data-theme="dark"] .section-title { border-bottom-color: var(--border-strong); } html[data-theme="dark"] .slider { background: #334155; } html[data-theme="dark"] .ui-autocomplete, html[data-theme="dark"] .ui-widget-content, html[data-theme="dark"] .ui-menu { background: var(--bg-elevated); border-color: var(--border-color); color: var(--text-body); } html[data-theme="dark"] .ui-menu-item > a.ui-corner-all, html[data-theme="dark"] .ui-menu .ui-menu-item-wrapper { color: var(--text-body); } html[data-theme="dark"] .ui-widget-header { background: var(--bg-surface-alt); border-color: var(--border-color); color: var(--text-primary); } /* ── 3.6 Bason public-site template ────────────────────────────────── */ html[data-theme="dark"] #main-wrapper, html[data-theme="dark"] #main-container, html[data-theme="dark"] .page-body { background-color: var(--bg-body); } html[data-theme="dark"] .header-top-section-container, html[data-theme="dark"] .header-middle-section-container, html[data-theme="dark"] .header-menu-section-container, html[data-theme="dark"] .header-top-section-container .container { background-color: var(--bg-surface) !important; border-color: var(--border-color); } html[data-theme="dark"] .desktop-device .header-section-fixed .header-menu-section-container.stuck { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } /* Menu links & icons use the heading colour (#292929) in the template */ html[data-theme="dark"] .desktop-menu > .navbar-nav > .nav-item > .nav-link:not(.btn), html[data-theme="dark"] .header-menu .header-menu-buttons .nav-item .nav-link, html[data-theme="dark"] .header-menu .header-menu-buttons .nav-item .nav-link i, html[data-theme="dark"] .desktop-menu .header-menu-buttons .nav-item .nav-link, html[data-theme="dark"] .desktop-menu .header-menu-buttons .nav-item .nav-link i, html[data-theme="dark"] .header-section .navbar-brand, html[data-theme="dark"] .header-top-section-content, html[data-theme="dark"] .header-top-section-content a:not(.btn), html[data-theme="dark"] .navbar-toggler { color: var(--text-primary); } html[data-theme="dark"] .desktop-menu > .navbar-nav > .nav-item > .nav-link:not(.btn):hover, html[data-theme="dark"] .desktop-menu > .navbar-nav > .nav-item.active > .nav-link:not(.btn), html[data-theme="dark"] .desktop-menu > .navbar-nav > .nav-item > .nav-link.active:not(.btn) { color: var(--link); } html[data-theme="dark"] .navbar-toggler-line { background-color: var(--text-primary); border-color: var(--text-primary); } html[data-theme="dark"] .header-menu-buttons-divider { background-color: var(--border-color); } html[data-theme="dark"] .form-block-header-search-desktop, html[data-theme="dark"] .form-block-header-search .form-block-container { background-color: var(--bg-surface); } /* Most tenant logos are dark artwork on transparent — give them a light chip */ html[data-theme="dark"] .header-section .navbar-brand img { background: #f5f7fa; border-radius: 8px; padding: 3px 8px; } html[data-theme="dark"] .breadcrumb-section:not([class*='-color-bg']), html[data-theme="dark"] .post-info-block, html[data-theme="dark"] .nav-menu-block-layout-2 ul li a, html[data-theme="dark"] #payment li .payment-content { background-color: var(--bg-surface-alt); } html[data-theme="dark"] .grey-2-color-border, html[data-theme="dark"] .breadcrumb-section:not([class*='-color-border']), html[data-theme="dark"] .accordion-alt, html[data-theme="dark"] .widget-title span::before, html[data-theme="dark"] .widget-title span::after, html[data-theme="dark"] .widget_calendar table, html[data-theme="dark"] .tabs-block .nav-tabs, html[data-theme="dark"] .tabs-block-vertical .nav-tabs .nav-link, html[data-theme="dark"] .timeline-block, html[data-theme="dark"] .blog-block-cols-1 .blog-block .blog-block-container, html[data-theme="dark"] .blog-block-cols-1 .pagination-block, html[data-theme="dark"] .blog-block-inner .pager-block, html[data-theme="dark"] .section-title-small span::after, html[data-theme="dark"] .section-title-small span::before, html[data-theme="dark"] .form-block-sign .form-block-sign-message, html[data-theme="dark"] .form-block-sign .form-block-sign-footer { border-color: var(--border-color); } html[data-theme="dark"] .grey-2-color-bg, html[data-theme="dark"] .pagination-block .page-item .page-link:hover { background-color: var(--bg-hover); } html[data-theme="dark"] .form-block-sign .form-block-sign-form, html[data-theme="dark"] .form-block-sign .form-block-sign-message, html[data-theme="dark"] .form-block-sign .form-block-sign-footer, html[data-theme="dark"] .portfolio-block-layout-1 .portfolio-block-body, html[data-theme="dark"] .portfolio-block-layout-3 .portfolio-block-body { background-color: var(--bg-surface); } html[data-theme="dark"] .timeline-block .timeline-block-body::before { background-color: var(--bg-body); } html[data-theme="dark"] .accordion-item, html[data-theme="dark"] .accordion-button { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--bg-hover); color: var(--link); box-shadow: none; } html[data-theme="dark"] .accordion-button::after { filter: brightness(0) invert(0.85); } html[data-theme="dark"] .tabs-block .nav-tabs .nav-link.active { background-color: var(--bg-surface); color: var(--link); } html[data-theme="dark"] .body-color, html[data-theme="dark"] .blog-block-search .meta-block, html[data-theme="dark"] .form-block-sign .form-block-sign-footer { color: var(--text-body); } html[data-theme="dark"] .social-networks ul li a i { background-color: var(--bg-surface-alt); color: var(--text-body); } html[data-theme="dark"] .grey-3-color { color: var(--text-muted); } html[data-theme="dark"] .footer-section-top, html[data-theme="dark"] .footer-section-copyright { background-color: #0b1019; } /* ── 3.7 Third-party plugins ───────────────────────────────────────── */ /* DataTables 1.10 */ html[data-theme="dark"] table.dataTable tbody tr, html[data-theme="dark"] table.dataTable.display tbody tr, html[data-theme="dark"] table.dataTable.stripe tbody tr { background-color: transparent; } html[data-theme="dark"] table.dataTable.stripe tbody tr.odd, html[data-theme="dark"] table.dataTable.display tbody tr.odd { background-color: rgba(255, 255, 255, 0.03); } html[data-theme="dark"] table.dataTable.hover tbody tr:hover, html[data-theme="dark"] table.dataTable.display tbody tr:hover { background-color: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_1, html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_2, html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_3, html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_1, html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_1, html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_1 { background-color: rgba(255, 255, 255, 0.025); } html[data-theme="dark"] table.dataTable thead th, html[data-theme="dark"] table.dataTable thead td, html[data-theme="dark"] table.dataTable tfoot th, html[data-theme="dark"] table.dataTable tfoot td, html[data-theme="dark"] table.dataTable.no-footer, html[data-theme="dark"] table.dataTable.row-border tbody th, html[data-theme="dark"] table.dataTable.row-border tbody td, html[data-theme="dark"] table.dataTable.display tbody th, html[data-theme="dark"] table.dataTable.display tbody td, html[data-theme="dark"] table.dataTable.cell-border tbody th, html[data-theme="dark"] table.dataTable.cell-border tbody td { border-color: var(--border-color); } html[data-theme="dark"] table.dataTable { color: var(--text-body); } html[data-theme="dark"] .dataTables_wrapper .dataTables_length, html[data-theme="dark"] .dataTables_wrapper .dataTables_filter, html[data-theme="dark"] .dataTables_wrapper .dataTables_info, html[data-theme="dark"] .dataTables_wrapper .dataTables_processing, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--text-secondary); } html[data-theme="dark"] .dataTables_wrapper .dataTables_processing { background: var(--bg-elevated); } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-body) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--bg-hover) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { background: transparent !important; border-color: transparent !important; color: var(--text-muted) !important; } /* fullCalendar 3 */ html[data-theme="dark"] .fc-unthemed th, html[data-theme="dark"] .fc-unthemed td, html[data-theme="dark"] .fc-unthemed thead, html[data-theme="dark"] .fc-unthemed tbody, html[data-theme="dark"] .fc-unthemed .fc-divider, html[data-theme="dark"] .fc-unthemed .fc-row, html[data-theme="dark"] .fc-unthemed .fc-content, html[data-theme="dark"] .fc-unthemed .fc-popover, html[data-theme="dark"] .fc-unthemed .fc-list-view, html[data-theme="dark"] .fc-unthemed .fc-list-heading td { border-color: var(--border-color); } html[data-theme="dark"] .fc-unthemed td.fc-today, html[data-theme="dark"] .fc-unthemed .fc-today { background: rgba(251, 191, 36, 0.12); } html[data-theme="dark"] .fc-unthemed .fc-popover { background-color: var(--bg-elevated); } html[data-theme="dark"] .fc-unthemed .fc-divider, html[data-theme="dark"] .fc-unthemed .fc-popover .fc-header, html[data-theme="dark"] .fc-unthemed .fc-list-heading td, html[data-theme="dark"] .fc-widget-header { background: var(--bg-surface-alt); color: var(--text-primary); } html[data-theme="dark"] .fc-unthemed .fc-list-item:hover td { background-color: var(--bg-hover); } html[data-theme="dark"] .fc-toolbar h2, html[data-theme="dark"] .fc-header-title h2, html[data-theme="dark"] .fc-day-header, html[data-theme="dark"] .fc-day-number { color: var(--text-primary); } html[data-theme="dark"] .fc-other-month .fc-day-number { color: var(--text-muted); } html[data-theme="dark"] .fc-state-default, html[data-theme="dark"] .fc-button { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-primary); text-shadow: none; box-shadow: none; } html[data-theme="dark"] .fc-state-hover, html[data-theme="dark"] .fc-button:hover { background: var(--bg-hover); color: var(--text-primary); } html[data-theme="dark"] .fc-state-active, html[data-theme="dark"] .fc-state-down { background: #2563eb; border-color: #2563eb; color: #fff; } html[data-theme="dark"] .fc-state-disabled { opacity: .45; } /* Summernote (0.8 bs4 + legacy) */ html[data-theme="dark"] .note-editor.note-frame, html[data-theme="dark"] .note-editor.note-airframe { border-color: var(--border-strong); } html[data-theme="dark"] .note-editor .note-toolbar, html[data-theme="dark"] .note-toolbar, html[data-theme="dark"] .note-editor.note-frame .note-statusbar, html[data-theme="dark"] .note-popover .popover-content { background-color: var(--bg-surface-alt); border-color: var(--border-color); } html[data-theme="dark"] .note-editor .note-editing-area .note-editable, html[data-theme="dark"] .note-editable { background-color: var(--bg-input) !important; color: var(--text-primary); } html[data-theme="dark"] .note-btn, html[data-theme="dark"] .note-toolbar .btn { background-color: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-primary); } html[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-codable { background-color: #0b1220; color: #e2e8f0; } /* SweetAlert 2.x (swal-*) */ html[data-theme="dark"] .swal-modal { background-color: var(--bg-elevated); border: 1px solid var(--border-color); } html[data-theme="dark"] .swal-title { color: var(--text-primary); } html[data-theme="dark"] .swal-text { color: var(--text-body); } html[data-theme="dark"] .swal-footer { background-color: transparent; border-top-color: var(--border-color); } html[data-theme="dark"] .swal-button--cancel { background-color: var(--bg-hover); color: var(--text-primary); } html[data-theme="dark"] .swal-icon--success:before, html[data-theme="dark"] .swal-icon--success:after, html[data-theme="dark"] .swal-icon--success__hide-corners { background: var(--bg-elevated); } html[data-theme="dark"] .swal-content__input, html[data-theme="dark"] .swal-content__textarea { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-strong); } /* bootstrap-datetimepicker, bootstrap-select, multiselect, select2 */ html[data-theme="dark"] .bootstrap-datetimepicker-widget { color: var(--text-body); } html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day:hover, html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.hour:hover, html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.minute:hover, html[data-theme="dark"] .bootstrap-datetimepicker-widget table td span:hover, html[data-theme="dark"] .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, html[data-theme="dark"] .bootstrap-datetimepicker-widget a[data-action]:hover { background: var(--bg-hover); } html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.old, html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.new { color: var(--text-muted); } html[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { border-bottom-color: var(--bg-elevated); } html[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu.top:after { border-top-color: var(--bg-elevated); } html[data-theme="dark"] .bootstrap-select .dropdown-toggle, html[data-theme="dark"] .multiselect.dropdown-toggle { background-color: var(--bg-input); border-color: var(--border-strong); color: var(--text-primary); } html[data-theme="dark"] .bootstrap-select .dropdown-menu li a { color: var(--text-body); } html[data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover, html[data-theme="dark"] .bootstrap-select .dropdown-menu li.active a { background: var(--bg-hover); } html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple, html[data-theme="dark"] .select2-dropdown { background-color: var(--bg-input); border-color: var(--border-strong); color: var(--text-primary); } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary); } html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--bg-hover); } /* bootstrap-fileinput / jQuery File Upload */ html[data-theme="dark"] .file-preview, html[data-theme="dark"] .file-drop-zone, html[data-theme="dark"] .krajee-default.file-preview-frame { background-color: var(--bg-surface-alt); border-color: var(--border-strong); } html[data-theme="dark"] .file-drop-zone-title { color: var(--text-muted); } html[data-theme="dark"] .file-caption, html[data-theme="dark"] .file-caption-name { background-color: var(--bg-input); color: var(--text-primary); } /* Icon pickers */ html[data-theme="dark"] .iconpicker-popover.popover, html[data-theme="dark"] .iconpicker-popover .popover-title { background: var(--bg-elevated); border-color: var(--border-color); } html[data-theme="dark"] .iconpicker .iconpicker-item { background-color: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-color); color: var(--text-primary); } /* ── 3.8 Inline-style safety net ───────────────────────────────────── */ /* Older views hard-code white/pastel fills inline. Flip the common ones. Text colour is set without !important, so an inline `color:` in the same attribute still wins. */ html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, header, footer, article, aside, label)[style*="background: #fff" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, header, footer, article, aside, label)[style*="background:#fff" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, header, footer, article, aside, label)[style*="background-color: #fff" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, header, footer, article, aside, label)[style*="background-color:#fff" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, header, footer, article, aside, label)[style*="background: white" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, header, footer, article, aside, label)[style*="background:white" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, header, footer, article, aside, label)[style*="background-color: white" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, header, footer, article, aside, label)[style*="background-color:white" i] { background-color: var(--bg-surface) !important; color: var(--text-body); } html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, label)[style*="aliceblue" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, label)[style*="whitesmoke" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, label)[style*="#f5f5f5" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, label)[style*="#f8f9fa" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, label)[style*="#f9f9f9" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, label)[style*="#eee" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, label)[style*="lightgray" i], html[data-theme="dark"] :is(div, section, span, p, td, th, tr, table, li, ul, form, fieldset, label)[style*="lightgrey" i] { background-color: var(--bg-surface-alt) !important; color: var(--text-body); } /* ── 3.9 Scrollbars ────────────────────────────────────────────────── */ html[data-theme="dark"] * { scrollbar-color: #3a4b63 transparent; } html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-body); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a4b63; border-radius: 8px; border: 2px solid var(--bg-body); } }