/* ============================================================================ Grassroots360 — Admin Panel Theme ---------------------------------------------------------------------------- A fixed, cohesive colour palette for the ADMIN PANEL ONLY, built around the brand navy #1E3562. The public-facing website is still styled per-club by Components/Theme.razor (the customer-configurable theme) — none of the rules below leak onto it because every selector is scoped under `body.admin-portal`, a class only the admin layout (_AdminLayout.cshtml) adds to . Load order matters: _AdminLayout.cshtml links this file AFTER the block, so where the club theme uses broad selectors (.card, .bg-body, .btn-primary, .table …) these higher-specificity, admin-scoped rules win and give every admin page one consistent look. The palette is a tonal scale of #1E3562 (deep navy) plus a small set of semantic state colours. The whole admin panel is a dark navy theme — which keeps existing admin content (light card text, chart axis labels, translucent sub-panels) readable while standardising everything on the brand colour. ========================================================================== */ body.admin-portal { /* ---- Brand navy scale (built around #1E3562) ---------------------- */ --admin-primary: #1E3562; /* brand navy — main navigation */ --admin-primary-strong: #142647; /* darker navy — active/pressed, brand bar */ --admin-primary-soft: #33518A; /* light navy tint — subtle highlights */ --admin-bg: #15233F; /* page / app background (deepest) */ --admin-surface: #213A66; /* cards (raised above background) */ --admin-surface-2: #294679; /* card headers, striped rows, sub-panels */ --admin-surface-3: #325288; /* hover surfaces */ --admin-btn: #3360AE; /* primary action buttons (vivid navy) */ --admin-btn-hover: #284E92; --admin-btn-active: #21407A; --admin-accent: #E1C038; /* gold accent (sparingly) */ --admin-text: #E8EEF8; /* primary text on dark surfaces */ --admin-text-muted: #AFBDD8; /* muted / secondary text (≥4.5:1 on every surface incl. card headers) */ --admin-heading: #FFFFFF; /* headings */ /* Text colour for hover/active states whose background is a theme surface (outline buttons, pagination). White on the dark surfaces; flipped to dark navy by the light theme, where those hover surfaces are near-white. */ --admin-hover-text: #ffffff; /* ---- Semantic TEXT colours (AA on the theme surfaces) -------------- Bootstrap's .text-warning/.text-danger/etc. are tuned for white pages and fail on the navy surfaces (and amber fails on white), so the admin remaps them per theme. Also used for outline-danger/success buttons. */ --admin-text-warning: #E8B23E; --admin-text-danger: #F08F95; --admin-text-success: #63D3A6; --admin-text-info: #7FBCEE; /* .text-primary resolves to the brand navy via --bs-primary-rgb, which is invisible (1.07:1) on the navy card surfaces — use the palette's light navy on dark, the brand navy on light. */ --admin-text-primary: #9CBAEC; /* Accent colours for dashboard KPI numbers (theme-aware so they hold 3:1 large-text contrast on both card surfaces). */ --admin-kpi-teal: #20C997; --admin-kpi-purple: #B197E0; /* Overdue-date text in Tasks list / Kanban. */ --admin-overdue: #F4A0A5; /* Inline (Bootstrap pink #d63384 fails on navy). */ --admin-code: #F2A3C7; /* Contextual table-row tints (replace Bootstrap's fixed light .table-warning/-danger/-secondary backgrounds, which clash with the themed light cell text on the dark theme). Translucent so they sit naturally on either theme's card surface. */ --admin-row-warning: rgba(232, 178, 62, 0.16); --admin-row-danger: rgba(229, 97, 107, 0.18); --admin-row-muted: rgba(255, 255, 255, 0.10); /* Bootstrap's .btn-close is a black SVG — invert it for the navy modal surfaces; the light theme resets this to none. */ --admin-btn-close-filter: invert(1) grayscale(100%) brightness(180%); --admin-border: rgba(255, 255, 255, 0.10); --admin-border-strong: rgba(255, 255, 255, 0.18); /* ---- Surface overlays (kept as variables so they flip cleanly between the dark and light themes) -------------------------------------- */ --admin-stripe: rgba(255, 255, 255, 0.045); /* striped table rows */ --admin-hover: rgba(255, 255, 255, 0.08); /* table / row hover */ --admin-chip-bg: rgba(255, 255, 255, 0.14); /* chips, count badges */ --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.12); /* ---- Status pills (Tasks list) ----------------------------------- */ --admin-pill-bg: rgba(89, 166, 230, 0.22); --admin-pill-text: #CFE2F7; --admin-pill-done-bg: rgba(47, 180, 119, 0.22); --admin-pill-done-text: #B7EBD2; /* ---- Semantic state colours -------------------------------------- */ --admin-success: #2FB477; --admin-danger: #E5616B; --admin-warning: #E8B23E; --admin-info: #59A6E6; /* ---- Remap Bootstrap's own theme variables ----------------------- */ /* Setting these on cascades them over Bootstrap's :root values for every descendant, so utilities and components computed from --bs-primary (.text-primary, .bg-primary, focus rings, .form-check, pagination, …) follow the brand navy without per-component rules. */ --bs-primary: #1E3562; --bs-primary-rgb: 30, 53, 98; --bs-link-color: #8FB0E8; --bs-link-color-rgb: 143, 176, 232; --bs-link-hover-color: #B9CEF2; --bs-link-hover-color-rgb: 185, 206, 242; --bs-border-color: var(--admin-border); --bs-emphasis-color: var(--admin-heading); } /* ============================================================================ LIGHT THEME ---------------------------------------------------------------------------- Applied when the user picks "Light Theme" from the profile menu — the body gets the `admin-theme-light` class (set server-side from the g360_admin_theme cookie, and toggled live by JS). Only the palette VARIABLES change; every rule below this block reads those variables, so the whole content area re-skins to a light surface with dark text. The main navigation (header + sidebar) stays brand navy #1E3562 in BOTH themes. ========================================================================== */ body.admin-portal.admin-theme-light { --admin-bg: #EEF1F7; /* light blue-grey page background */ --admin-surface: #FFFFFF; /* white cards */ --admin-surface-2: #F3F6FC; /* card headers, sub-panels, stripes base */ --admin-surface-3: #E7ECF6; /* hover surfaces */ --admin-btn: #1E3562; /* primary buttons = brand navy on white */ --admin-btn-hover: #16284A; --admin-btn-active: #0F1D38; --admin-text: #1F2A44; /* dark navy text */ --admin-text-muted: #55637D; /* muted (≥4.5:1 on page bg and sub-panels) */ --admin-heading: #1E3562; /* navy headings */ --admin-hover-text: #1F2A44; /* hover surfaces are near-white here */ --admin-text-warning: #856404; --admin-text-danger: #B02A37; --admin-text-success: #146C43; --admin-text-info: #087990; --admin-text-primary: #1E3562; --admin-kpi-teal: #0F7B5F; --admin-kpi-purple: #6F42C1; --admin-overdue: #B3261E; --admin-code: #B02468; --admin-row-muted: rgba(30, 53, 98, 0.08); --admin-btn-close-filter: none; --admin-border: #DCE3EF; --admin-border-strong: #C3CEE2; --admin-stripe: rgba(30, 53, 98, 0.035); --admin-hover: rgba(30, 53, 98, 0.06); --admin-chip-bg: rgba(30, 53, 98, 0.10); --admin-card-shadow: 0 1px 3px rgba(30, 53, 98, 0.10), 0 1px 2px rgba(30, 53, 98, 0.06); --admin-pill-bg: rgba(30, 53, 98, 0.10); --admin-pill-text: #1E3562; --admin-pill-done-bg: rgba(31, 157, 87, 0.16); --admin-pill-done-text: #166534; --bs-link-color: #2C4E92; --bs-link-color-rgb: 44, 78, 146; --bs-link-hover-color: #1E3562; --bs-link-hover-color-rgb: 30, 53, 98; --bs-emphasis-color: #1F2A44; } /* ---------------------------------------------------------------------------- Base surfaces & typography -------------------------------------------------------------------------- */ body.admin-portal { background-color: var(--admin-bg) !important; color: var(--admin-text); } body.admin-portal main, body.admin-portal .app-main, body.admin-portal .app-content, body.admin-portal .app-content-header, body.admin-portal .app-wrapper { background-color: transparent !important; color: var(--admin-text); } /* Content headings + breadcrumbs sit directly on the navy app background. */ body.admin-portal .app-content-header h1, body.admin-portal .app-content-header h2, body.admin-portal .app-content-header h3, body.admin-portal .app-content-header h4 { color: var(--admin-heading); } body.admin-portal .breadcrumb { --bs-breadcrumb-divider-color: var(--admin-text-muted); margin-bottom: 0; } body.admin-portal .breadcrumb-item a { color: var(--admin-text-muted); text-decoration: none; } body.admin-portal .breadcrumb-item a:hover { color: var(--admin-text); } body.admin-portal .breadcrumb-item.active { color: var(--admin-text); } /* In-content text links (not buttons / nav / dropdowns) use a light navy. */ body.admin-portal .app-main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.breadcrumb-item *):not(.badge) { color: var(--bs-link-color); } body.admin-portal .app-main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover { color: var(--bs-link-hover-color); } /* Muted / helper text everywhere in admin (Bootstrap 5.3's .text-muted maps to a near-black grey that disappears on dark surfaces). */ body.admin-portal .text-muted, body.admin-portal .text-body-secondary, body.admin-portal .text-body-tertiary, body.admin-portal .form-text, body.admin-portal .card .text-muted, body.admin-portal .card .text-body-secondary, body.admin-portal .card .form-text { color: var(--admin-text-muted) !important; opacity: 1; } /* FontAwesome icons must follow their context's colour, not a fixed white. The public theme (Theme.razor) and site.css hard-code `.fa { color: white }`, which makes table-row action icons (e.g. the arrow on PendingActions, the ☰ hamburger on the Projects table) invisible on the light admin theme (white-on-white). Inheriting currentColor makes them follow the link / button / text colour, so they're readable on both themes and stay white when sat on a coloured badge/header (which sets `color: #fff` on the icon's parent). */ body.admin-portal .fa { color: inherit; } /* ---------------------------------------------------------------------------- Header navbar (top bar) — brand navy -------------------------------------------------------------------------- */ body.admin-portal .app-header, body.admin-portal .app-header.navbar, body.admin-portal .app-header.bg-body { background-color: var(--admin-primary) !important; border-bottom: 1px solid var(--admin-primary-strong); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } body.admin-portal .app-header .nav-link, body.admin-portal .app-header .nav-link > i, body.admin-portal .app-header .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.82); } body.admin-portal .app-header .nav-link:hover, body.admin-portal .app-header .nav-link:focus, body.admin-portal .app-header .nav-link:hover > i { color: #ffffff; } /* ---------------------------------------------------------------------------- Sidebar (main navigation) — brand navy -------------------------------------------------------------------------- */ body.admin-portal .app-sidebar, body.admin-portal .app-sidebar.bg-body-secondary { background-color: var(--admin-primary) !important; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.22); } /* Brand / logo cell sits flush with the rest of the navigation — same navy as the sidebar so the logo's background matches the menu, not a darker bar. The divider is a fixed overlay (not a theme variable) because the sidebar is always navy in both themes. */ body.admin-portal .sidebar-brand { background-color: var(--admin-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.10); } body.admin-portal .app-sidebar .sidebar-menu .nav-link { color: rgba(255, 255, 255, 0.80); } body.admin-portal .app-sidebar .sidebar-menu .nav-link .nav-icon { color: rgba(255, 255, 255, 0.62); } body.admin-portal .app-sidebar .sidebar-menu .nav-link:hover { background-color: rgba(255, 255, 255, 0.07); color: #ffffff; } body.admin-portal .app-sidebar .sidebar-menu .nav-link:hover .nav-icon { color: #ffffff; } /* Active leaf + open parent: a fixed translucent-white highlight with a gold accent edge. The sidebar is ALWAYS navy (both themes), so this uses a fixed overlay rather than a theme surface variable — otherwise the light theme's near-white surface would make the active label white-on-white. */ body.admin-portal .app-sidebar .sidebar-menu .nav-link.active { background-color: rgba(255, 255, 255, 0.14); color: #ffffff; border-left: 3px solid var(--admin-accent); } body.admin-portal .app-sidebar .sidebar-menu .nav-link.active .nav-icon { color: var(--admin-accent); } body.admin-portal .app-sidebar .nav-treeview .nav-link { color: rgba(255, 255, 255, 0.70); } body.admin-portal .app-sidebar .menu-open > .nav-link, body.admin-portal .app-sidebar .menu-is-opening > .nav-link { color: #ffffff; } /* ---------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ body.admin-portal .app-footer { background-color: var(--admin-primary) !important; color: rgba(255, 255, 255, 0.72); border-top: 1px solid var(--admin-primary-strong); } /* ---------------------------------------------------------------------------- Cards — the core surface. Both plain `.card` and the legacy `.card-admin` (previously forced white) now share one navy treatment so every admin page is consistent. -------------------------------------------------------------------------- */ body.admin-portal .card, body.admin-portal .card-admin { --bs-card-bg: var(--admin-surface); --bs-card-color: var(--admin-text); --bs-card-border-color: var(--admin-border); --bs-card-cap-bg: var(--admin-surface-2); --bs-card-cap-color: var(--admin-heading); background-color: var(--admin-surface) !important; color: var(--admin-text) !important; border: 1px solid var(--admin-border) !important; border-radius: 10px; box-shadow: var(--admin-card-shadow); } body.admin-portal .card-body, body.admin-portal .card-admin .card-body, body.admin-portal .card-text, body.admin-portal .card-title, body.admin-portal .card-subtitle { background-color: transparent !important; color: var(--admin-text) !important; } body.admin-portal .card-header, body.admin-portal .card-admin .card-header { background-color: var(--admin-surface-2) !important; color: var(--admin-heading) !important; border-bottom: 1px solid var(--admin-border) !important; font-weight: 600; } body.admin-portal .card-footer, body.admin-portal .card-admin .card-footer, body.admin-portal .card-admin-footer { background-color: var(--admin-surface-2) !important; color: var(--admin-text) !important; border-top: 1px solid var(--admin-border) !important; } /* ---------------------------------------------------------------------------- Tables inside cards — fill edge-to-edge with clean rounded corners ---------------------------------------------------------------------------- A flush table (and its themed band) has square corners that paint over the card's rounded corners, making the card look square at the top/ bottom. Clipping the card to its border-radius makes every child — header, thead, last row — follow the corner, so the table fills the card without hiding its rounded edge. Scoped with :has(.table) so ONLY table cards are clipped. Cards that hold a standalone/form dropdown menu (which must overflow the card) have no table and are left untouched. Row-action menus inside a table already live within .table-responsive (or are rendered fixed-position), so clipping the card does not change their behaviour. */ body.admin-portal .card:has(.table) { overflow: hidden; } /* Every card-body that holds a data table fills the card (no padding) so all tables look identical whether the page used `card-body p-0` or a padded body. The :has() guard keeps padding for non-table bodies and empty states (e.g. the "no rows yet" message shown when the table is absent). */ body.admin-portal .card-body:has(> .table-responsive), body.admin-portal .card-body:has(> .table) { padding: 0; } /* Drop the table's default bottom margin so it meets the card edge with no gap. */ body.admin-portal .card .table { margin-bottom: 0; } /* ---------------------------------------------------------------------------- Tables — light text on the navy card surface, navy-tinted headers & stripes -------------------------------------------------------------------------- */ body.admin-portal .table { --bs-table-color: var(--admin-text); --bs-table-bg: transparent; --bs-table-striped-bg: var(--admin-stripe); --bs-table-striped-color: var(--admin-text); --bs-table-hover-bg: var(--admin-hover); --bs-table-hover-color: var(--admin-text); --bs-table-border-color: var(--admin-border); color: var(--admin-text); } body.admin-portal .card .table, body.admin-portal .card .table > :not(caption) > * > * { --bs-table-color: var(--admin-text); --bs-table-bg: transparent; --bs-table-striped-bg: var(--admin-stripe); --bs-table-striped-color: var(--admin-text); --bs-table-hover-bg: var(--admin-hover); --bs-table-hover-color: var(--admin-text); --bs-table-border-color: var(--admin-border); color: var(--admin-text); } /* Header row: a slightly raised navy band with light heading text. Plain (no Bootstrap variant) is the common pattern across admin tables. */ body.admin-portal .table > thead > tr > th { background-color: var(--admin-surface-2); color: var(--admin-heading); border-bottom: 2px solid var(--admin-border-strong); font-weight: 600; } /* Tables that use a Bootstrap variant header (.table-light/-dark/-secondary…) — keep them on the themed navy surface instead of a fixed grey/white. */ body.admin-portal .card .table > thead.table-light > tr > th, body.admin-portal .card .table > thead.table-light > tr > td, body.admin-portal .card .table > thead.table-dark > tr > th, body.admin-portal .card .table > thead.table-secondary > tr > th { background-color: var(--admin-surface-2) !important; color: var(--admin-heading) !important; border-color: var(--admin-border) !important; } /* ---------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ body.admin-portal .btn-primary { --bs-btn-bg: var(--admin-btn); --bs-btn-border-color: var(--admin-btn); --bs-btn-hover-bg: var(--admin-btn-hover); --bs-btn-hover-border-color: var(--admin-btn-hover); --bs-btn-active-bg: var(--admin-btn-active); --bs-btn-active-border-color: var(--admin-btn-active); --bs-btn-disabled-bg: var(--admin-btn); --bs-btn-disabled-border-color: var(--admin-btn); --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff; --bs-btn-disabled-color: rgba(255, 255, 255, 0.90); /* .75 was 4.2:1 on the navy button */ background-color: var(--admin-btn) !important; border-color: var(--admin-btn) !important; color: #ffffff !important; } body.admin-portal .btn-primary:hover, body.admin-portal .btn-primary:focus { background-color: var(--admin-btn-hover) !important; border-color: var(--admin-btn-hover) !important; color: #ffffff !important; } body.admin-portal .btn-primary:active, body.admin-portal .btn-primary.active { background-color: var(--admin-btn-active) !important; border-color: var(--admin-btn-active) !important; } body.admin-portal .btn-outline-primary { --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: var(--admin-btn); --bs-btn-hover-bg: var(--admin-btn); --bs-btn-hover-border-color: var(--admin-btn); --bs-btn-hover-color: #ffffff; --bs-btn-active-bg: var(--admin-btn-active); --bs-btn-active-border-color: var(--admin-btn-active); --bs-btn-active-color: #ffffff; } /* Outline-secondary is the workhorse "neutral" admin button (toolbars, Cancel). Theme it to a readable light-navy outline that fills navy on hover. */ body.admin-portal .btn-outline-secondary { --bs-btn-color: var(--admin-text); --bs-btn-border-color: var(--admin-border-strong); --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--admin-surface-3); --bs-btn-hover-border-color: var(--admin-surface-3); /* Hover/active text follows the theme: white on the dark hover surfaces, dark navy on the light theme's near-white hover surfaces (a fixed white here was 1.2:1 — invisible — on the light theme). */ --bs-btn-hover-color: var(--admin-hover-text); --bs-btn-active-bg: var(--admin-surface-2); --bs-btn-active-border-color: var(--admin-surface-2); --bs-btn-active-color: var(--admin-hover-text); } /* ---------------------------------------------------------------------------- Contextual background / emphasis utilities used as accents in admin -------------------------------------------------------------------------- */ body.admin-portal .bg-primary, body.admin-portal .text-bg-primary { background-color: var(--admin-primary) !important; color: #ffffff !important; } body.admin-portal .bg-dark { background-color: var(--admin-primary-strong) !important; } body.admin-portal .border-primary { border-color: var(--admin-btn) !important; } /* ---------------------------------------------------------------------------- Forms — inputs stay light (white) for contrast on the navy cards, which is the most readable, lowest-risk pattern. We only re-tint focus, labels and the navy focus ring. -------------------------------------------------------------------------- */ body.admin-portal .form-control:focus, body.admin-portal .form-select:focus, body.admin-portal .form-check-input:focus { border-color: var(--admin-btn); box-shadow: 0 0 0 0.2rem rgba(51, 96, 174, 0.30); } body.admin-portal .form-check-input:checked { background-color: var(--admin-btn); border-color: var(--admin-btn); } body.admin-portal label, body.admin-portal .form-label, body.admin-portal .col-form-label { color: var(--admin-text); } /* ---------------------------------------------------------------------------- List groups -------------------------------------------------------------------------- */ body.admin-portal .list-group { --bs-list-group-bg: var(--admin-surface); --bs-list-group-color: var(--admin-text); --bs-list-group-border-color: var(--admin-border); --bs-list-group-action-hover-bg: var(--admin-surface-3); --bs-list-group-action-hover-color: var(--admin-heading); } body.admin-portal .list-group-item { background-color: var(--admin-surface) !important; color: var(--admin-text); border-color: var(--admin-border) !important; } /* ---------------------------------------------------------------------------- Pagination / nav-pills / tabs — keep on the navy palette -------------------------------------------------------------------------- */ body.admin-portal .page-link { --bs-pagination-bg: var(--admin-surface); --bs-pagination-color: var(--bs-link-color); --bs-pagination-border-color: var(--admin-border); --bs-pagination-hover-bg: var(--admin-surface-3); --bs-pagination-hover-color: var(--admin-hover-text); --bs-pagination-active-bg: var(--admin-btn); --bs-pagination-active-border-color: var(--admin-btn); --bs-pagination-disabled-bg: var(--admin-surface); } body.admin-portal .nav-pills { --bs-nav-pills-link-active-bg: var(--admin-btn); --bs-nav-pills-link-active-color: #ffffff; } /* ---------------------------------------------------------------------------- Misc — horizontal rules, code, definition lists on the dark surface -------------------------------------------------------------------------- */ body.admin-portal hr { border-color: var(--admin-border-strong); opacity: 1; } body.admin-portal .border { border-color: var(--admin-border) !important; } /* ---------------------------------------------------------------------------- Semantic text utilities — Bootstrap's fixed colours fail WCAG AA on the themed surfaces (amber #ffc107 is 1.6:1 on white; red #dc3545 is 2.5:1 on navy). Remapped per theme, scoped to the content area so fixed-context chrome (e.g. the white messages dropdown in the header) keeps Bootstrap's defaults, which are correct on white. -------------------------------------------------------------------------- */ body.admin-portal .app-main .text-warning { color: var(--admin-text-warning) !important; } body.admin-portal .app-main .text-danger { color: var(--admin-text-danger) !important; } body.admin-portal .app-main .text-success { color: var(--admin-text-success) !important; } body.admin-portal .app-main .text-info { color: var(--admin-text-info) !important; } /* :not(.badge) — badges pair text-primary with their own fixed background (e.g. "bg-white text-primary"), where the brand navy is already correct. */ body.admin-portal .app-main .text-primary:not(.badge) { color: var(--admin-text-primary) !important; } /* Dashboard KPI accent numbers/icons (previously hardcoded #20c997 / #6f42c1, which each failed in one theme). */ body.admin-portal .admin-kpi-teal { color: var(--admin-kpi-teal) !important; } body.admin-portal .admin-kpi-purple { color: var(--admin-kpi-purple) !important; } /* ---------------------------------------------------------------------------- Outline state buttons — Bootstrap's text colours sit on the card surface, where red/green fail on navy (2.5:1). Text/border use the themed semantic colours; hover fills with the solid state colour + white text. -------------------------------------------------------------------------- */ body.admin-portal .btn-outline-danger { --bs-btn-color: var(--admin-text-danger); --bs-btn-border-color: var(--admin-text-danger); --bs-btn-hover-bg: #BB2D3B; --bs-btn-hover-border-color: #BB2D3B; --bs-btn-hover-color: #ffffff; --bs-btn-active-bg: #A52834; --bs-btn-active-border-color: #A52834; --bs-btn-active-color: #ffffff; } body.admin-portal .btn-outline-success { --bs-btn-color: var(--admin-text-success); --bs-btn-border-color: var(--admin-text-success); --bs-btn-hover-bg: #157347; --bs-btn-hover-border-color: #157347; --bs-btn-hover-color: #ffffff; --bs-btn-active-bg: #126940; --bs-btn-active-border-color: #126940; --bs-btn-active-color: #ffffff; } /* ---------------------------------------------------------------------------- Solid state badges & buttons — Bootstrap's success/danger/secondary with white text sit at 4.5–4.7:1 (zero AA margin). Darkened one step (Bootstrap's own -600 shades) so white text clears 5.8:1 while staying clearly semantic. Warning/info keep dark text and already pass comfortably. -------------------------------------------------------------------------- */ body.admin-portal .badge.bg-success, body.admin-portal .badge.text-bg-success, body.admin-portal .btn-success { background-color: #157347 !important; border-color: #157347 !important; } body.admin-portal .badge.bg-danger, body.admin-portal .badge.text-bg-danger, body.admin-portal .btn-danger { background-color: #BB2D3B !important; border-color: #BB2D3B !important; } body.admin-portal .badge.bg-secondary, body.admin-portal .badge.text-bg-secondary, body.admin-portal .btn-secondary { background-color: #5C636A !important; border-color: #5C636A !important; } body.admin-portal .btn-success:hover, body.admin-portal .btn-success:focus { background-color: #126940 !important; border-color: #126940 !important; } body.admin-portal .btn-danger:hover, body.admin-portal .btn-danger:focus { background-color: #A52834 !important; border-color: #A52834 !important; } body.admin-portal .btn-secondary:hover, body.admin-portal .btn-secondary:focus { background-color: #51585E !important; border-color: #51585E !important; } /* ---------------------------------------------------------------------------- Contextual table rows — Bootstrap's .table-warning/-danger/-secondary paint a fixed LIGHT row background while the themed cell rule forces light text, which was ~1.1:1 (invisible) on the dark theme. Translucent tints sit on either theme's surface and keep the themed text readable. -------------------------------------------------------------------------- */ body.admin-portal .table tr.table-warning, body.admin-portal .table tr.table-warning > * { background-color: var(--admin-row-warning) !important; box-shadow: none; color: var(--admin-text) !important; } body.admin-portal .table tr.table-danger, body.admin-portal .table tr.table-danger > * { background-color: var(--admin-row-danger) !important; box-shadow: none; color: var(--admin-text) !important; } body.admin-portal .table tr.table-secondary, body.admin-portal .table tr.table-secondary > * { background-color: var(--admin-row-muted) !important; box-shadow: none; color: var(--admin-text) !important; } /* Subtle warning panels (e.g. refund confirmation band) — same fixed-light problem as the variant rows. */ body.admin-portal .bg-warning-subtle { background-color: var(--admin-row-warning) !important; } body.admin-portal .border-warning { border-color: var(--admin-warning) !important; } /* ---------------------------------------------------------------------------- Modals — Bootstrap keeps a white .modal-content while the page inherits the themed light text, which rendered light-on-white (1.2:1) on the dark theme. Theming the modal surface makes the inherited text correct in BOTH themes and removes the need for per-page `style="color: black"` workarounds. -------------------------------------------------------------------------- */ body.admin-portal .modal-content { background-color: var(--admin-surface); color: var(--admin-text); border: 1px solid var(--admin-border-strong); } body.admin-portal .modal-header, body.admin-portal .modal-footer { border-color: var(--admin-border); } body.admin-portal .modal-title { color: var(--admin-heading); } /* Bootstrap's .btn-close is a black SVG: invert it on the navy modal surface; the light theme resets the filter. Headers that set their own colour (e.g. .bg-danger with .btn-close-white) are unaffected. */ body.admin-portal .modal-content .btn-close:not(.btn-close-white) { filter: var(--admin-btn-close-filter); } /* ---------------------------------------------------------------------------- Inline code — Bootstrap pink #d63384 is 2.4:1 on the navy surfaces. -------------------------------------------------------------------------- */ body.admin-portal code { color: var(--admin-code); }