/* MCP Admin — theme system. Three layers, one file: 1. Phase A baseline — typography, radius, shadows, neutral surface palette. 2. Phase B chrome neutralization — flatten bg-primary modal/card headers so the bright-blue bar doesn't dominate every modal. Driven by CSS so we don't have to sweep ~17 cshtml files; markup stays Bootstrap-canonical. 3. Phase D color variants — six themes, light + dark, swap the primary accent plus dark-mode surface overrides (Bootstrap 5.1 predates [data-bs-theme] support, so we drive surfaces ourselves via the same attribute name). State lives on : data-mcp-theme="slate|indigo|emerald|rose|violet|bronze" and data-bs-theme="light|dark". The inline boot script in _Layout sets both before any stylesheet applies, so there's no theme-flash on first paint. */ /* ================== BASE THEME ================== */ :root { --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 0.95rem; --bs-body-bg: #f8fafc; --bs-body-color: #1e293b; --bs-secondary-color: #475569; --bs-emphasis-color: #0f172a; --bs-border-color: #e2e8f0; --bs-border-radius: 0.5rem; --bs-border-radius-sm: 0.375rem; --bs-border-radius-lg: 0.75rem; --mcp-surface: #ffffff; --mcp-surface-muted: #f1f5f9; --mcp-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04); --mcp-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --mcp-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05); /* Primary accent — overridden by [data-mcp-theme] selectors below. Default falls back to indigo in case the boot script never ran. */ --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229; --mcp-primary-hover: #4338ca; --mcp-primary-soft: rgba(79, 70, 229, 0.1); /* Contrast text for primary-filled surfaces (selected nav items, btn-primary). White in light mode where primary is a saturated 600-family hue; flips dark in dark mode because the brightened 400-family primary needs a dark foreground for AA contrast. */ --mcp-on-primary: #ffffff; } body { background-color: var(--bs-body-bg); color: var(--bs-body-color); font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); } /* Cards: softer corners + shadow, neutral surface */ .card { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--mcp-surface); box-shadow: var(--mcp-shadow-sm); } /* Modal corners + shadow */ .modal-content { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background-color: var(--mcp-surface); box-shadow: var(--mcp-shadow-lg); } /* Links */ a { color: var(--bs-primary); } a:hover { color: var(--mcp-primary-hover); } /* Buttons */ .btn-primary { --bs-btn-color: var(--mcp-on-primary); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--mcp-on-primary); --bs-btn-hover-bg: var(--mcp-primary-hover); --bs-btn-hover-border-color: var(--mcp-primary-hover); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-bg: var(--mcp-primary-hover); --bs-btn-active-border-color: var(--mcp-primary-hover); } /* Form focus rings use the active primary */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem var(--mcp-primary-soft); } /* Tables */ .table { --bs-table-color: var(--bs-body-color); --bs-table-bg: transparent; --bs-table-border-color: var(--bs-border-color); } /* Tabs: no garish active fill */ .nav-tabs { border-bottom: 1px solid var(--bs-border-color); } .nav-tabs .nav-link { color: var(--bs-secondary-color); border-radius: var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0 0; } .nav-tabs .nav-link.active { color: var(--bs-primary); background-color: var(--mcp-surface); border-color: var(--bs-border-color) var(--bs-border-color) var(--mcp-surface); } /* Site primary-color overrides for hard-coded values in legacy site.css. Keep this list short — every entry is a smell that should eventually be converted to var(--bs-primary) at the source. */ div.list-tile.selected, .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--mcp-on-primary) !important; } /* ================== PHASE B — NEUTRALIZE CHROME ================== */ /* Modal headers: drop the bright bar. The class .bg-primary stays in the markup because removing it requires a 14-file sweep that adds no functional value. */ .modal-header.bg-primary, .modal-header.bg-secondary, .modal-header.bg-warning, .modal-header.bg-danger { background-color: var(--mcp-surface) !important; color: var(--bs-body-color) !important; border-bottom: 1px solid var(--bs-border-color); } .modal-header.bg-secondary { background-color: var(--mcp-surface-muted) !important; } /* Inactive Person/Detail modal uses bg-secondary as a "muted" signal — keep that distinction with a slightly different surface, plus an italic title cue. */ .modal-header.bg-secondary .modal-title { color: var(--bs-secondary-color) !important; } /* Warning/danger headers (error states): keep a subtle red wash so the affordance "this dialog is reporting an error" survives. Using a soft tint instead of full bg-warning yellow-saturation. */ .modal-header.bg-warning, .modal-header.bg-danger { background-color: rgba(225, 29, 72, 0.06) !important; border-bottom-color: rgba(225, 29, 72, 0.25); } /* btn-close-white inverts the close-X for dark backgrounds. With neutral backgrounds it now needs to NOT be inverted. */ .modal-header.bg-primary .btn-close-white, .modal-header.bg-secondary .btn-close-white, .modal-header.bg-warning .btn-close-white, .modal-header.bg-danger .btn-close-white { filter: none; } /* The header text-light class is now wrong; force it back to body color. */ .modal-header.bg-primary .text-light, .modal-header.bg-secondary .text-light, .modal-header.bg-warning .text-light, .modal-header.bg-danger .text-light { color: var(--bs-body-color) !important; } /* Dashboard card-header bg-primary: tonal tint instead of full primary fill. */ .card-header.bg-primary { background-color: var(--mcp-surface) !important; color: var(--bs-body-color) !important; border-bottom: 1px solid var(--bs-border-color); } .card-header.bg-primary .card-title.text-white, .card-header.bg-primary .text-white, .card-header.bg-primary a.text-white { color: var(--bs-body-color) !important; } .card-header.bg-primary a.text-white:hover { color: var(--bs-primary) !important; } /* Top navbar — themed tint of the active primary so the bar carries the theme color without going back to "bright Bootstrap blue". color-mix() blends the primary into the surface; one rule covers all six themes. */ .navbar.LayoutBanner { background-color: color-mix(in srgb, var(--bs-primary) 10%, var(--mcp-surface)) !important; border-bottom: 1px solid color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color)); color: var(--bs-body-color) !important; box-shadow: var(--mcp-shadow-sm); } /* Default nav-link text — body color so it's readable on the lightly tinted bar. :not(.selected):not(.active) leaves the highlighted item alone so the rules below can give it primary-on-white contrast. Without :not, this rule's high specificity (.navbar.LayoutBanner .nav-link = 0,3,0) plus !important overrode site.css's `.navbar-nav a.selected { color: white }` and the selected text was unreadable. */ .navbar.LayoutBanner .navbar-brand, .navbar.LayoutBanner .nav-link:not(.selected):not(.active), .navbar.LayoutBanner .nav-item:not(.active) > .nav-link { color: var(--bs-body-color) !important; } .navbar.LayoutBanner .nav-link:not(.selected):not(.active):hover { color: var(--bs-primary) !important; background-color: color-mix(in srgb, var(--bs-primary) 14%, transparent); border-radius: var(--bs-border-radius-sm); } .navbar.LayoutBanner .nav-link.selected, .navbar.LayoutBanner .nav-link.active, .navbar.LayoutBanner .nav-item.active > .nav-link, .navbar.LayoutBanner .navbar-nav a.selected { background-color: var(--bs-primary) !important; color: var(--mcp-on-primary) !important; border-radius: var(--bs-border-radius-sm); } .navbar.LayoutBanner .navbar-toggler { border-color: var(--bs-border-color); } .navbar.LayoutBanner .navbar-toggler-icon { /* Default toggler icon is white-on-dark; we need dark-on-light. */ filter: invert(1) opacity(0.7); } /* Accordions — Bootstrap 5.1 hardcodes a blue active state and white surfaces on accordion items/buttons. Re-skin via CSS so the component blends with the active theme + dark mode without touching markup. Same approach as the bg-primary chrome neutralization above. (Bootstrap 5.3 introduces accordion CSS vars; this whole block collapses to var-overrides when we upgrade.) */ .accordion, .accordion-item { background-color: var(--mcp-surface); border-color: var(--bs-border-color); color: var(--bs-body-color); } .accordion-button { background-color: var(--mcp-surface); color: var(--bs-body-color); } .accordion-button:not(.collapsed) { background-color: color-mix(in srgb, var(--bs-primary) 10%, var(--mcp-surface)); color: var(--bs-primary); box-shadow: inset 0 -1px 0 var(--bs-border-color); } .accordion-button:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem var(--mcp-primary-soft); } /* Validation & alert chrome — tone down the brick-red */ .field-validation-error, .field-validation-no-valid, .validation-summary-errors { color: #b91c1c; } /* ================== PHASE D — COLOR VARIANTS (LIGHT) ================== */ /* Per-palette --bs-secondary mirrors the matching ThemePalettes.All preset on the server side so the chrome quick-swatch picker (which bypasses the per-Application settings bag) renders the same tinted secondary as a palette-applied consumer app. */ [data-mcp-theme="slate"] { --bs-primary: #475569; --bs-primary-rgb: 71, 85, 105; --mcp-primary-hover: #334155; --mcp-primary-soft: rgba(71, 85, 105, 0.12); --bs-secondary: #64748b; --bs-secondary-rgb: 100, 116, 139; } [data-mcp-theme="indigo"] { --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229; --mcp-primary-hover: #4338ca; --mcp-primary-soft: rgba(79, 70, 229, 0.12); --bs-secondary: #6366a3; --bs-secondary-rgb: 99, 102, 163; } [data-mcp-theme="emerald"] { --bs-primary: #059669; --bs-primary-rgb: 5, 150, 105; --mcp-primary-hover: #047857; --mcp-primary-soft: rgba(5, 150, 105, 0.12); --bs-secondary: #5d8a7a; --bs-secondary-rgb: 93, 138, 122; } [data-mcp-theme="rose"] { --bs-primary: #e11d48; --bs-primary-rgb: 225, 29, 72; --mcp-primary-hover: #be123c; --mcp-primary-soft: rgba(225, 29, 72, 0.12); --bs-secondary: #9c6b78; --bs-secondary-rgb: 156, 107, 120; } [data-mcp-theme="violet"] { --bs-primary: #7c3aed; --bs-primary-rgb: 124, 58, 237; --mcp-primary-hover: #6d28d9; --mcp-primary-soft: rgba(124, 58, 237, 0.12); --bs-secondary: #7d6a96; --bs-secondary-rgb: 125, 106, 150; } [data-mcp-theme="bronze"] { --bs-primary: #b45309; --bs-primary-rgb: 180, 83, 9; --mcp-primary-hover: #92400e; --mcp-primary-soft: rgba(180, 83, 9, 0.12); --bs-secondary: #8b7355; --bs-secondary-rgb: 139, 115, 85; } /* ================== DARK MODE ================== */ [data-bs-theme="dark"] { --bs-body-bg: #0f172a; --bs-body-color: #e2e8f0; --bs-secondary-color: #94a3b8; --bs-emphasis-color: #f8fafc; --bs-border-color: #334155; --mcp-surface: #1e293b; --mcp-surface-muted: #0f172a; --mcp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --mcp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --mcp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.45); /* Dark-mode primary is brightened (Tailwind 400 family); flip the contrast text to slate-900 so .btn-primary and .nav-link.selected stay readable. */ --mcp-on-primary: #0f172a; color-scheme: dark; } [data-bs-theme="dark"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Cards, modals, tabs */ [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .modal-content { background-color: var(--mcp-surface); border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-footer { background-color: var(--mcp-surface); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--mcp-surface); border-color: var(--bs-border-color) var(--bs-border-color) var(--mcp-surface); } [data-bs-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--bs-border-color); } /* Tables */ [data-bs-theme="dark"] .table { --bs-table-color: var(--bs-body-color); --bs-table-bg: transparent; --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-striped-color: var(--bs-body-color); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); --bs-table-hover-color: var(--bs-body-color); color: var(--bs-body-color); } /* Forms */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text { background-color: var(--mcp-surface-muted); border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--bs-secondary-color); } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-control[readonly] { background-color: rgba(255, 255, 255, 0.04); } /* Dropdowns */ [data-bs-theme="dark"] .dropdown-menu { background-color: var(--mcp-surface); border-color: var(--bs-border-color); box-shadow: var(--mcp-shadow-md); } [data-bs-theme="dark"] .dropdown-item { color: var(--bs-body-color); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--mcp-surface-muted); color: var(--bs-body-color); } [data-bs-theme="dark"] .dropdown-divider { border-color: var(--bs-border-color); } /* Re-applied chrome neutralization for dark mode */ [data-bs-theme="dark"] .modal-header.bg-primary, [data-bs-theme="dark"] .modal-header.bg-secondary, [data-bs-theme="dark"] .modal-header.bg-warning, [data-bs-theme="dark"] .modal-header.bg-danger, [data-bs-theme="dark"] .card-header.bg-primary { background-color: var(--mcp-surface) !important; color: var(--bs-body-color) !important; border-bottom-color: var(--bs-border-color); } [data-bs-theme="dark"] .modal-header.bg-secondary { background-color: var(--mcp-surface-muted) !important; } [data-bs-theme="dark"] .modal-header.bg-warning, [data-bs-theme="dark"] .modal-header.bg-danger { background-color: rgba(251, 113, 133, 0.08) !important; border-bottom-color: rgba(251, 113, 133, 0.3); } [data-bs-theme="dark"] .modal-header.bg-primary .btn-close, [data-bs-theme="dark"] .modal-header.bg-secondary .btn-close, [data-bs-theme="dark"] .modal-header.bg-warning .btn-close, [data-bs-theme="dark"] .modal-header.bg-danger .btn-close, [data-bs-theme="dark"] .modal-content .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Top navbar — dark mode. Stronger primary tint because dark + 10% mix is barely visible. Selected nav-link uses the brightened dark-mode primary bg with --mcp-on-primary text (which flips dark in dark mode). */ [data-bs-theme="dark"] .navbar.LayoutBanner { background-color: color-mix(in srgb, var(--bs-primary) 18%, var(--mcp-surface)) !important; border-bottom-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color)); } [data-bs-theme="dark"] .navbar.LayoutBanner .navbar-brand, [data-bs-theme="dark"] .navbar.LayoutBanner .nav-link:not(.selected):not(.active), [data-bs-theme="dark"] .navbar.LayoutBanner .nav-item:not(.active) > .nav-link { color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .navbar.LayoutBanner .navbar-toggler-icon { filter: none; } /* Accordions in dark mode */ [data-bs-theme="dark"] .accordion, [data-bs-theme="dark"] .accordion-item, [data-bs-theme="dark"] .accordion-button { background-color: var(--mcp-surface); color: var(--bs-body-color); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: color-mix(in srgb, var(--bs-primary) 18%, var(--mcp-surface)); color: var(--bs-primary); box-shadow: inset 0 -1px 0 var(--bs-border-color); } /* Bootstrap 5.1 chevron is a dark-blue SVG that vanishes against a dark surface. Invert + brighten so it reads on both collapsed and expanded dark headers. */ [data-bs-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.5); } /* Misc dark-mode surfaces */ [data-bs-theme="dark"] hr { border-color: var(--bs-border-color); opacity: 1; } [data-bs-theme="dark"] code { background-color: var(--mcp-surface-muted); color: #fbbf24; } [data-bs-theme="dark"] pre { background-color: var(--mcp-surface-muted); color: var(--bs-body-color); } [data-bs-theme="dark"] .text-muted { color: var(--bs-secondary-color) !important; } [data-bs-theme="dark"] .badge.bg-secondary { background-color: var(--bs-border-color) !important; } /* Help-topic markdown body — dark adjustments. The light styles in site.css set fixed light grays that read as nearly black-on-black in dark mode. */ [data-bs-theme="dark"] .HelpTopicBody h2 { border-top-color: var(--bs-border-color); } [data-bs-theme="dark"] .HelpTopicBody code, [data-bs-theme="dark"] .HelpTopicBody pre { background-color: var(--mcp-surface-muted); color: var(--bs-body-color); } [data-bs-theme="dark"] .HelpTopicBody blockquote { border-left-color: var(--bs-border-color); color: var(--bs-secondary-color); } [data-bs-theme="dark"] .HelpTopicBody table th { background-color: var(--mcp-surface-muted); color: var(--bs-body-color); } [data-bs-theme="dark"] .HelpTopicBody table th, [data-bs-theme="dark"] .HelpTopicBody table td { border-color: var(--bs-border-color); } /* ================== PHASE D — COLOR VARIANTS (DARK) ================== */ /* Brighten the accent in dark mode for AA contrast against the dark surfaces. */ [data-bs-theme="dark"][data-mcp-theme="slate"] { --bs-primary: #94a3b8; --bs-primary-rgb: 148, 163, 184; --mcp-primary-hover: #cbd5e1; --mcp-primary-soft: rgba(148, 163, 184, 0.18); } [data-bs-theme="dark"][data-mcp-theme="indigo"] { --bs-primary: #818cf8; --bs-primary-rgb: 129, 140, 248; --mcp-primary-hover: #a5b4fc; --mcp-primary-soft: rgba(129, 140, 248, 0.18); } [data-bs-theme="dark"][data-mcp-theme="emerald"] { --bs-primary: #34d399; --bs-primary-rgb: 52, 211, 153; --mcp-primary-hover: #6ee7b7; --mcp-primary-soft: rgba(52, 211, 153, 0.18); } [data-bs-theme="dark"][data-mcp-theme="rose"] { --bs-primary: #fb7185; --bs-primary-rgb: 251, 113, 133; --mcp-primary-hover: #fda4af; --mcp-primary-soft: rgba(251, 113, 133, 0.18); } [data-bs-theme="dark"][data-mcp-theme="violet"] { --bs-primary: #a78bfa; --bs-primary-rgb: 167, 139, 250; --mcp-primary-hover: #c4b5fd; --mcp-primary-soft: rgba(167, 139, 250, 0.18); } [data-bs-theme="dark"][data-mcp-theme="bronze"] { --bs-primary: #fbbf24; --bs-primary-rgb: 251, 191, 36; --mcp-primary-hover: #fcd34d; --mcp-primary-soft: rgba(251, 191, 36, 0.18); } /* ================== THEME PICKER UI ================== */ .mcp-theme-picker { padding: 0.5rem 1rem 0.75rem 1rem; } .mcp-theme-picker-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); margin-bottom: 0.4rem; } .mcp-theme-swatches { display: flex; gap: 0.4rem; flex-wrap: wrap; } .mcp-theme-swatch { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); transition: transform 0.1s, border-color 0.1s; } .mcp-theme-swatch:hover { transform: scale(1.1); } .mcp-theme-swatch.active { border-color: var(--bs-emphasis-color); } .mcp-theme-swatch[data-theme-color="slate"] { background: #475569; } .mcp-theme-swatch[data-theme-color="indigo"] { background: #4f46e5; } .mcp-theme-swatch[data-theme-color="emerald"] { background: #059669; } .mcp-theme-swatch[data-theme-color="rose"] { background: #e11d48; } .mcp-theme-swatch[data-theme-color="violet"] { background: #7c3aed; } .mcp-theme-swatch[data-theme-color="bronze"] { background: #b45309; } [data-bs-theme="dark"] .mcp-theme-swatch[data-theme-color="slate"] { background: #94a3b8; } [data-bs-theme="dark"] .mcp-theme-swatch[data-theme-color="indigo"] { background: #818cf8; } [data-bs-theme="dark"] .mcp-theme-swatch[data-theme-color="emerald"] { background: #34d399; } [data-bs-theme="dark"] .mcp-theme-swatch[data-theme-color="rose"] { background: #fb7185; } [data-bs-theme="dark"] .mcp-theme-swatch[data-theme-color="violet"] { background: #a78bfa; } [data-bs-theme="dark"] .mcp-theme-swatch[data-theme-color="bronze"] { background: #fbbf24; } /* "(none)" swatch — clears the Person color preference so the per-app theme shows through. Rendered as a circle with a diagonal slash so operators can tell it apart from the named-palette swatches at a glance. */ .mcp-theme-swatch[data-theme-clear] { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--bs-danger, #dc3545) calc(50% - 1px), var(--bs-danger, #dc3545) calc(50% + 1px), transparent calc(50% + 1px)), var(--bs-body-bg); box-shadow: inset 0 0 0 1px var(--bs-border-color); } /* Light/dark toggle icon — render BOTH fa-moon and fa-sun in markup so Font Awesome's SVG auto-replace processes them on initial paint. Show only the one that matches the current mode. */ [data-bs-theme="light"] .theme-mode-icon-dark { display: none; } [data-bs-theme="dark"] .theme-mode-icon-light { display: none; }