/* ============================================================================ 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: #A6B4D0; /* muted / secondary text */ --admin-heading: #FFFFFF; /* headings */ --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: #5C6B86; /* muted */ --admin-heading: #1E3562; /* navy headings */ --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: #1A7A45; --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.75); 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); --bs-btn-hover-color: #ffffff; --bs-btn-active-bg: var(--admin-surface-2); --bs-btn-active-border-color: var(--admin-surface-2); --bs-btn-active-color: #ffffff; } /* ---------------------------------------------------------------------------- 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: #ffffff; --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; }