/* ============================================================================ OBaseAI brand theme — maps Bootstrap 5 CSS variables to portal brand tokens. This is the THIN layer that lets us use vanilla Bootstrap everywhere and still keep the portal's visual identity. No component CSS here — just variable overrides. Bootstrap handles the actual rendering. ============================================================================ */ :root, [data-bs-theme="light"] { --bs-primary: #3b82f6; --bs-primary-rgb: 59, 130, 246; --bs-secondary: #64748b; --bs-success: #22c55e; --bs-warning: #f59e0b; --bs-danger: #ef4444; --bs-info: #0ea5e9; --bs-border-radius: 8px; --bs-border-radius-sm: 6px; --bs-border-radius-lg: 12px; --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bs-body-font-size: 14px; --bs-body-line-height: 1.5; } /* Light mode — re-declare the brand-tinted custom variables for symmetry with the dark block. Bootstrap 5.3 already sets --bs-body-bg / --bs-body-color / --bs-secondary-bg / --bs-tertiary-bg / --bs-border-color etc. for light, so we only need to re-state values that are NESTED-THEME-sensitive. The portal uses nested theming (`` outer, `.ob-portal data-bs-theme="@(_isDark?...)"` inner): without re-declaring at the inner selector, the outer dark value would inherit through and the inner switch to light would silently no-op. */ [data-bs-theme="light"] { --bs-body-bg: #f8fafc; --bs-body-color: #0f172a; --bs-emphasis-color: #0f172a; --bs-secondary-bg: #ffffff; --bs-tertiary-bg: #f1f5f9; --bs-border-color: #e2e8f0; --bs-border-color-translucent: rgba(15, 23, 42, 0.08); --bs-link-color: #2563eb; --bs-link-hover-color: #1d4ed8; --bs-heading-color: #0f172a; --bs-card-bg: #ffffff; --bs-card-border-color: #e2e8f0; --bs-modal-bg: #ffffff; --bs-modal-border-color: #e2e8f0; --bs-modal-header-border-color: #e2e8f0; --bs-modal-footer-border-color: #e2e8f0; } /* Dark mode (the portal default — set via in App.razor) */ [data-bs-theme="dark"] { --bs-body-bg: #0f172a; --bs-body-color: #e2e8f0; --bs-body-color-rgb: 226, 232, 240; --bs-emphasis-color: #f1f5f9; --bs-secondary-bg: #1e293b; --bs-tertiary-bg: #334155; --bs-border-color: #334155; --bs-border-color-translucent: rgba(255, 255, 255, 0.08); --bs-link-color: #60a5fa; --bs-link-hover-color: #93c5fd; --bs-heading-color: #f1f5f9; --bs-card-bg: #1e293b; --bs-card-border-color: #334155; --bs-modal-bg: #1e293b; --bs-modal-border-color: #334155; --bs-modal-header-border-color: #334155; --bs-modal-footer-border-color: #334155; } /* Bootstrap 5.3 hard-codes per-component CSS variables on `.btn-*`, `.card`, etc. The root-level --bs-primary override above doesn't reach them, so we re-declare the component-level variables here with brand values. */ /* Primary button family */ .btn-primary { --bs-btn-bg: #3b82f6; --bs-btn-border-color: #3b82f6; --bs-btn-hover-bg: #2563eb; --bs-btn-hover-border-color: #2563eb; --bs-btn-active-bg: #1d4ed8; --bs-btn-active-border-color: #1d4ed8; --bs-btn-disabled-bg: #3b82f6; --bs-btn-disabled-border-color: #3b82f6; } .btn-outline-primary { --bs-btn-color: #3b82f6; --bs-btn-border-color: #3b82f6; --bs-btn-hover-bg: #3b82f6; --bs-btn-hover-border-color: #3b82f6; --bs-btn-active-bg: #3b82f6; --bs-btn-active-border-color: #3b82f6; } /* Danger / success / warning — brand palette */ .btn-danger { --bs-btn-bg: #ef4444; --bs-btn-border-color: #ef4444; --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; --bs-btn-active-bg: #b91c1c; --bs-btn-active-border-color: #b91c1c; } .btn-success { --bs-btn-bg: #22c55e; --bs-btn-border-color: #22c55e; --bs-btn-hover-bg: #16a34a; --bs-btn-hover-border-color: #16a34a; } .btn-warning { --bs-btn-bg: #f59e0b; --bs-btn-border-color: #f59e0b; --bs-btn-hover-bg: #d97706; --bs-btn-hover-border-color: #d97706; color: #0f172a; } /* Cards and modals in dark mode — override the per-component --bs-*-bg that Bootstrap re-declares on the element itself (otherwise they read from --bs-body-bg which is our dark navy, too dark next to the page bg). */ [data-bs-theme="dark"] .card { --bs-card-bg: #1e293b; --bs-card-border-color: #334155; --bs-card-color: #e2e8f0; --bs-card-cap-bg: #1e293b; } [data-bs-theme="dark"] .modal { --bs-modal-bg: #1e293b; --bs-modal-color: #e2e8f0; --bs-modal-border-color: #334155; --bs-modal-header-border-color: #334155; --bs-modal-footer-border-color: #334155; } [data-bs-theme="dark"] .offcanvas, [data-bs-theme="dark"] .offcanvas-lg { --bs-offcanvas-bg: #0f172a; --bs-offcanvas-color: #e2e8f0; --bs-offcanvas-border-color: #334155; } [data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: #1e293b; --bs-dropdown-color: #e2e8f0; --bs-dropdown-border-color: #334155; --bs-dropdown-link-color: #e2e8f0; --bs-dropdown-link-hover-bg: #334155; --bs-dropdown-link-hover-color: #f1f5f9; } [data-bs-theme="dark"] .list-group { --bs-list-group-bg: #1e293b; --bs-list-group-color: #e2e8f0; --bs-list-group-border-color: #334155; } [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #e2e8f0; --bs-table-border-color: #334155; --bs-table-hover-bg: #334155; --bs-table-hover-color: #f1f5f9; } /* Form controls inherit the dark card bg by default, which is too dark next to cards. Use the slightly lighter tertiary bg so inputs are visible inside cards. */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #0f172a; border-color: #334155; color: #e2e8f0; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #0f172a; border-color: var(--bs-primary); color: #e2e8f0; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); } [data-bs-theme="dark"] .form-control::placeholder { color: #64748b; } /* ──────────────────────────────────────────────────────────────────────────── Portal-scoped light overrides ──────────────────────────────────────────────────────────────────────────── The portal uses NESTED theming: outer (fixed in App.razor for auth pages), .ob-portal[data-bs-theme="..."] inner (toggle). When the inner is "light", the outer body-level [data-bs-theme="dark"] .card override above ALSO matches the same .card descendants — they have equal specificity (one attribute selector + descendant). Cascade order alone isn't enough because the dark block is later, so dark wins. Fix: re-declare the same component variables under a HIGHER-SPECIFICITY selector (`.ob-portal[data-bs-theme="light"]` adds a class, beating the dark block by specificity regardless of source order). This way, when the user toggles to light, cards/modals/etc inside .ob-portal flip to white surfaces while auth pages outside the portal stay dark. */ .ob-portal[data-bs-theme="light"] .card { --bs-card-bg: #ffffff; --bs-card-border-color: #e2e8f0; --bs-card-color: #0f172a; --bs-card-cap-bg: #f8fafc; } .ob-portal[data-bs-theme="light"] .modal { --bs-modal-bg: #ffffff; --bs-modal-color: #0f172a; --bs-modal-border-color: #e2e8f0; --bs-modal-header-border-color: #e2e8f0; --bs-modal-footer-border-color: #e2e8f0; } .ob-portal[data-bs-theme="light"] .offcanvas, .ob-portal[data-bs-theme="light"] .offcanvas-lg { --bs-offcanvas-bg: #ffffff; --bs-offcanvas-color: #0f172a; --bs-offcanvas-border-color: #e2e8f0; } .ob-portal[data-bs-theme="light"] .dropdown-menu { --bs-dropdown-bg: #ffffff; --bs-dropdown-color: #0f172a; --bs-dropdown-border-color: #e2e8f0; --bs-dropdown-link-color: #0f172a; --bs-dropdown-link-hover-bg: #f1f5f9; --bs-dropdown-link-hover-color: #0f172a; } .ob-portal[data-bs-theme="light"] .list-group { --bs-list-group-bg: #ffffff; --bs-list-group-color: #0f172a; --bs-list-group-border-color: #e2e8f0; } .ob-portal[data-bs-theme="light"] .table { --bs-table-bg: transparent; --bs-table-color: #0f172a; --bs-table-border-color: #e2e8f0; --bs-table-hover-bg: #f1f5f9; --bs-table-hover-color: #0f172a; } .ob-portal[data-bs-theme="light"] .form-control, .ob-portal[data-bs-theme="light"] .form-select { background-color: #ffffff; border-color: #e2e8f0; color: #0f172a; } .ob-portal[data-bs-theme="light"] .form-control:focus, .ob-portal[data-bs-theme="light"] .form-select:focus { background-color: #ffffff; border-color: var(--bs-primary); color: #0f172a; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); } .ob-portal[data-bs-theme="light"] .form-control::placeholder { color: #94a3b8; }