/* ===================================================================== BowlingOps BackOffice theme — design tokens PostHog-style redesign — Phase 0 (foundation). Two palettes driven by a `bo-light` / `bo-dark` class on (toggled from MainLayout via boTheme.set in site.js). Light = warm off-white canvas, white surfaces, blue primary Dark = neutral charcoal canvas + surfaces, brighter blue primary Flat surfaces, hairline borders, no glass/wallpaper/watermarks. The stage graph is intentionally NOT themed here. NOTE: legacy token names (--bo-red, --bo-blue, --bo-glass-blur, --bo-glow, --bo-drawer-gradient …) are kept defined and repointed into the new palette so site.css + MainLayout.razor.css keep rendering until those files are cleaned up in Phase 5. ===================================================================== */ :root, html.bo-light { /* Brand / accent — deep modern blue */ --bo-primary: #1D4ED8; --bo-primary-hover: #1A3FAE; --bo-primary-soft: rgba(29, 78, 216, 0.08); /* Canvas + surfaces */ --bo-bg: #F2F2EF; --bo-surface-solid: #FFFFFF; --bo-surface: #FFFFFF; --bo-surface-muted: #F6F6F3; --bo-elevated: #FFFFFF; /* Borders (hairline) */ --bo-border: rgba(0, 0, 0, 0.09); --bo-border-strong: rgba(0, 0, 0, 0.15); /* Text */ --bo-text: #1D1F27; --bo-text-muted: #5F5F59; /* Shape */ --bo-radius: 6px; --bo-radius-lg: 8px; /* --- Legacy aliases (repointed; do not add new uses) ---------- */ --bo-red: var(--bo-primary); --bo-red-deep: var(--bo-primary-hover); --bo-blue: var(--bo-primary); --bo-glass-blur: 0px; --bo-glow: none; --bo-glow-strong: none; --bo-accent-gradient: var(--bo-primary); --bo-drawer-gradient: var(--bo-surface-solid); --bo-watermark-color: transparent; } html.bo-dark { --bo-primary: #6E8AFF; --bo-primary-hover: #8FA3FF; --bo-primary-soft: rgba(110, 138, 255, 0.14); --bo-bg: #151619; --bo-surface-solid: #1F2127; --bo-surface: #1F2127; --bo-surface-muted: #26282E; --bo-elevated: #26282E; --bo-border: rgba(255, 255, 255, 0.10); --bo-border-strong: rgba(255, 255, 255, 0.16); --bo-text: #E8E8E3; --bo-text-muted: #9A9A94; --bo-radius: 6px; --bo-radius-lg: 8px; --bo-red: var(--bo-primary); --bo-red-deep: var(--bo-primary-hover); --bo-blue: var(--bo-primary); --bo-glass-blur: 0px; --bo-glow: none; --bo-glow-strong: none; --bo-accent-gradient: var(--bo-primary); --bo-drawer-gradient: var(--bo-surface-solid); --bo-watermark-color: transparent; } /* --- Body canvas (flat, solid — no wallpaper) ---------------------- */ html { background-color: var(--bo-bg); } body { min-height: 100vh; background-color: var(--bo-bg); color: var(--bo-text); } /* Main content surfaces sit on the flat canvas. */ .mud-layout-custom, .mud-main-content, .mud-layout-custom .mud-container { background-color: transparent; } .mud-main-content .mud-container { padding-bottom: 2.5rem; } /* ===================================================================== Shell — app bar, brand/login header, drawer, nav (Restructured into a two-tier sidebar in Phase 1; these rules keep the current shell legible in the new palette in the meantime.) ===================================================================== */ .mud-appbar { border-bottom: 1px solid var(--bo-border); box-shadow: none; background-image: none; } .navbar-bg { background-image: none; background-color: var(--bo-surface-solid); border-bottom: 1px solid var(--bo-border); } .navbar-brand { color: var(--bo-text) !important; font-weight: 500; letter-spacing: 0.2px; transition: color 0.15s ease; } .navbar-brand:hover { color: var(--bo-primary) !important; } .navbar-brand img { filter: none; } /* --- Drawer (left navigation) — flat light surface ----------------- */ .mud-drawer { background-image: none !important; background-color: var(--bo-surface-muted) !important; border-right: 1px solid var(--bo-border); } /* --- Nav links ----------------------------------------------------- */ .mud-nav-link { margin: 2px 8px; padding: 4px 16px 4px 16px; transition: background-color 0.12s ease, color 0.12s ease; } .mud-nav-link:hover { background-color: var(--bo-primary-soft); } .mud-nav-link.active { background-color: var(--bo-primary-soft); color: var(--bo-primary) !important; font-weight: 500; box-shadow: inset 2px 0 0 var(--bo-primary); } .mud-nav-link.active .mud-nav-link-icon { color: var(--bo-primary) !important; } .mud-nav-group > .mud-nav-link { font-weight: 500; } /* ===================================================================== Surfaces — flat papers, cards, dialogs (no glass/watermarks) ===================================================================== */ .mud-paper:not(.mud-appbar):not(.mud-drawer) { background-color: var(--bo-surface); background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--bo-border); box-shadow: none; } .mud-card { position: relative; border: 1px solid var(--bo-border); border-radius: var(--bo-radius-lg); box-shadow: none; } /* ===================================================================== Dialogs — PostHog-style banded modal Tinted header (hairline divider) · scrollable body · footer action bar. Applies to every in the app via Mud's dialog classes — no per-dialog markup needed. ===================================================================== */ /* Backdrop — soft neutral dim (no glass blur, matching the flat theme). */ .mud-overlay-dialog.mud-overlay .mud-overlay-scrim, .mud-overlay-dialog .mud-overlay-scrim { background-color: rgba(15, 16, 19, 0.48); } .mud-dialog { display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; /* clip header/footer bands to the rounded corners */ background-color: var(--bo-surface-solid) !important; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--bo-border-strong); border-radius: var(--bo-radius-lg); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08); } /* Header band */ .mud-dialog > .mud-dialog-title { flex: 0 0 auto; margin: 0; padding: 16px 24px; border-bottom: 1px solid var(--bo-border); background-color: var(--bo-surface-muted); color: var(--bo-text); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; } /* Keep any title typography (MudText Typo) consistent with the band. */ .mud-dialog > .mud-dialog-title .mud-typography { font-weight: 600; letter-spacing: -0.01em; } /* Close button, when present, sits flush in the header band. */ .mud-dialog > .mud-dialog-title .mud-button-root.mud-icon-button { color: var(--bo-text-muted); } .mud-dialog > .mud-dialog-title .mud-button-root.mud-icon-button:hover { color: var(--bo-text); background-color: var(--bo-primary-soft); } /* Body — scrolls independently between the sticky header and footer. */ .mud-dialog > .mud-dialog-content { flex: 1 1 auto; overflow-y: auto; padding: 22px 24px; color: var(--bo-text); } /* Footer action bar */ .mud-dialog > .mud-dialog-actions { flex: 0 0 auto; margin: 0; padding: 14px 24px; gap: 8px; border-top: 1px solid var(--bo-border); background-color: var(--bo-surface-muted); } /* --- Tables & data grids — hairline header, subtle row hover ------- */ .mud-table thead th, .mud-data-grid thead th, .mud-table .mud-table-head th { border-bottom: 1px solid var(--bo-border-strong) !important; color: var(--bo-text-muted) !important; font-weight: 500; background-color: transparent; } .mud-table tbody tr:hover, .mud-data-grid tbody tr:hover { background-color: var(--bo-primary-soft) !important; } /* --- Tabs ---------------------------------------------------------- */ .mud-tab-slider { background-color: var(--bo-primary) !important; box-shadow: none; } .mud-tab.mud-tab-active, .mud-tab.active { color: var(--bo-primary) !important; } /* --- Buttons: flat primary, no glow ------------------------------- */ .mud-button-filled-primary { box-shadow: none; transition: background-color 0.12s ease, transform 0.05s ease; } .mud-button-filled-primary:active { transform: translateY(1px); } /* --- Chips --------------------------------------------------------- */ .mud-chip.mud-chip-color-default { border: 1px solid var(--bo-border); } /* --- Expansion panel headers -------------------------------------- */ .mud-expand-panel .mud-expand-panel-header:hover { background-color: var(--bo-primary-soft); } /* ===================================================================== Shared framework components (CH.BowlingCRM.UI.Framework) PageHeader: clean bottom hairline, primary-tinted icon, no watermark. ===================================================================== */ .bo-page-header { position: relative; border-bottom: 1px solid var(--bo-border) !important; padding-bottom: 12px !important; } .bo-page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; } .bo-page-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .bo-page-header-description { color: var(--bo-text-muted); margin-top: 4px; } /* --- Wizard (Bootstrap-based, not MudBlazor) ----------------------- */ .nav-pills .nav-link { color: var(--bo-text-muted); border: 1px solid transparent; border-radius: var(--bo-radius); transition: background-color 0.12s ease, color 0.12s ease; } .nav-pills .nav-link:hover { background-color: var(--bo-primary-soft); color: var(--bo-text); } .nav-pills .nav-link.active { background-color: var(--bo-primary) !important; color: #FFFFFF !important; box-shadow: none; } .nav-pills .nav-link.active .check-nav-icon { color: #FFFFFF; } /* Bootstrap card surfaces (Wizard body, login/account pages) → flat */ .card { background-color: var(--bo-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--bo-border); border-radius: var(--bo-radius-lg); box-shadow: none; color: var(--bo-text); } /* ===================================================================== Print — clean output on paper ===================================================================== */ @media print { html, body { background: #FFFFFF !important; background-image: none !important; color: #000000 !important; } .mud-paper:not(.mud-appbar):not(.mud-drawer), .mud-card, .mud-dialog, .card { background: #FFFFFF !important; box-shadow: none !important; border-color: #DDDDDD !important; } }