/* MCV design system (Phase 4C) — semantic CSS custom properties. Self-hosted, no CDN (§15). Dark is the product default (control-room use); light and system are supported via the html[data-theme] attribute. Customer accent colors are injected as --accent/--accent-hover/--accent-2 overrides from validated database values — components must ONLY use the semantic variables below, never raw customer hex values. */ /* --- Dark theme (default) -------------------------------------------------- */ :root { color-scheme: dark; /* Surfaces — high contrast without pure black everywhere. */ --bg-page: #0e1116; --bg-elevated: #161a21; --bg-card: #1a1f28; --bg-inset: #0b0e13; --bg-overlay: rgba(6, 8, 12, 0.72); --bg-video-tile: #05070a; /* Lines & borders */ --border: #2a313d; --border-strong: #3a4453; /* Text */ --text-primary: #e8ebef; --text-secondary: #9aa4b2; --text-faint: #6b7585; --text-on-accent: #ffffff; /* Accent (overridden per-installation from BrandingSettings) */ --accent: #4f8ff7; --accent-hover: #6ba1f8; --accent-2: #22b8a8; /* Signal colors — always paired with a text label, never the only signal. */ --success: #34c07c; --success-bg: #12291d; --warning: #e2b93b; --warning-bg: #2b2413; --danger: #e5645c; --danger-bg: #301715; --focus-ring: #7fb0ff; /* Shape & type */ --radius: 8px; --radius-sm: 5px; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* --- Light theme ------------------------------------------------------------ */ html[data-theme="light"] { color-scheme: light; --bg-page: #f3f5f8; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-inset: #e9edf2; --bg-overlay: rgba(23, 30, 40, 0.55); --bg-video-tile: #10141a; --border: #d5dbe3; --border-strong: #b9c2ce; --text-primary: #1a212c; --text-secondary: #5b6674; --text-faint: #8a94a3; --success: #187a4b; --success-bg: #e2f4ea; --warning: #8a6a10; --warning-bg: #f8efd4; --danger: #b3352e; --danger-bg: #fbe7e5; --focus-ring: #2563eb; --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.10); } /* --- System preference: follow the device --------------------------------- */ @media (prefers-color-scheme: light) { html[data-theme="system"] { color-scheme: light; --bg-page: #f3f5f8; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-inset: #e9edf2; --bg-overlay: rgba(23, 30, 40, 0.55); --bg-video-tile: #10141a; --border: #d5dbe3; --border-strong: #b9c2ce; --text-primary: #1a212c; --text-secondary: #5b6674; --text-faint: #8a94a3; --success: #187a4b; --success-bg: #e2f4ea; --warning: #8a6a10; --warning-bg: #f8efd4; --danger: #b3352e; --danger-bg: #fbe7e5; --focus-ring: #2563eb; --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.10); } } /* --- BrandLogo treatments: ambient application theme (Phase B) ------------- BrandLogo.razor emits fixed data-dark-treatment/data-light-treatment attributes; WHICH one actually applies depends on the CURRENT theme, which is owned by the ancestor outside the component — so this selection lives here, globally, rather than in BrandLogo's own scoped stylesheet (Blazor CSS isolation only scopes elements the component itself renders, not ancestor selectors). Explicit BrandingAdmin preview swatches set data-preview-background and are excluded here via :not(...) so the two mechanisms never fight over the same element. Filters are FIXED, trusted values only — never built from a database string. */ html[data-theme="dark"] .brand-logo__image[data-dark-treatment="invert"]:not([data-preview-background]) { filter: invert(1); } html[data-theme="dark"] .brand-logo__image[data-dark-treatment="force-white"]:not([data-preview-background]) { filter: brightness(0) invert(1); } html[data-theme="light"] .brand-logo__image[data-light-treatment="invert"]:not([data-preview-background]) { filter: invert(1); } html[data-theme="light"] .brand-logo__image[data-light-treatment="force-black"]:not([data-preview-background]) { filter: brightness(0); } @media (prefers-color-scheme: dark) { html[data-theme="system"] .brand-logo__image[data-dark-treatment="invert"]:not([data-preview-background]) { filter: invert(1); } html[data-theme="system"] .brand-logo__image[data-dark-treatment="force-white"]:not([data-preview-background]) { filter: brightness(0) invert(1); } } @media (prefers-color-scheme: light) { html[data-theme="system"] .brand-logo__image[data-light-treatment="invert"]:not([data-preview-background]) { filter: invert(1); } html[data-theme="system"] .brand-logo__image[data-light-treatment="force-black"]:not([data-preview-background]) { filter: brightness(0); } } /* --- Base ------------------------------------------------------------------- */ html, body { margin: 0; padding: 0; min-height: 100%; } body { font-family: var(--font-family); background: var(--bg-page); color: var(--text-primary); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } code { font-family: var(--font-mono); font-size: 0.85em; color: var(--accent); word-break: break-all; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } /* Visible focus for every interactive element (accessibility, Phase 4C §10). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Subtle, deliberate motion only — and none at all when the user asks for that. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Screen-reader-only text (accessible labels without visual noise). */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Shared primitives ------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.45rem 0.95rem; font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: background 0.12s ease, border-color 0.12s ease; } .btn:hover { background: var(--bg-card); border-color: var(--focus-ring); } .btn:disabled { opacity: 0.5; cursor: default; } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn--danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } .btn--danger:hover { background: var(--danger); color: var(--text-on-accent); } /* Application header — understated so camera tiles stay dominant (§Phase4C.7). */ .appbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.5rem 1.25rem; background: var(--bg-elevated); border-bottom: 1px solid var(--border); min-height: 2.5rem; } .appbar__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text-primary); font-weight: 650; font-size: 0.98rem; white-space: nowrap; } .appbar__brand:hover { color: var(--text-primary); } .appbar__customer { color: var(--text-secondary); font-weight: 400; font-size: 0.85rem; } .appbar__nav { display: flex; align-items: center; gap: 0.9rem; margin-left: 0.5rem; flex-wrap: wrap; } .appbar__nav a { color: var(--text-secondary); text-decoration: none; font-size: 0.88rem; padding: 0.2rem 0.1rem; } .appbar__nav a:hover, .appbar__nav a[aria-current="page"] { color: var(--text-primary); } .appbar__spacer { flex: 1; } .appbar__user { color: var(--text-secondary); font-size: 0.83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; } .appbar__theme select { background: var(--bg-inset); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 0.8rem; padding: 0.2rem 0.35rem; } .appbar__logout button { background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0.28rem 0.75rem; font: inherit; font-size: 0.82rem; cursor: pointer; color: var(--text-primary); white-space: nowrap; } .appbar__logout button:hover { background: var(--bg-card); border-color: var(--focus-ring); } /* Application footer */ .appfooter { padding: 0.6rem 1.25rem; color: var(--text-faint); font-size: 0.78rem; display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--border); background: var(--bg-elevated); } /* Access denied card (reusable branded component, §Phase4C.9) */ .denied { display: flex; justify-content: center; padding: 3rem 1.25rem; } .denied__card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.75rem 2rem; max-width: 30rem; width: 100%; text-align: center; } .denied__card--danger { border-color: var(--danger); border-width: 2px; } .denied__card h1, .denied__card h2 { margin: 0 0 0.5rem; font-size: 1.25rem; } .denied__card--danger h1, .denied__card--danger h2 { color: var(--danger); } .denied__message { color: var(--text-secondary); margin: 0 0 1rem; white-space: pre-line; } .denied__contact { margin: 0 0 1rem; padding: 0.7rem 0.9rem; background: var(--bg-inset); border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--text-secondary); text-align: left; } .denied__contact dt { font-weight: 600; color: var(--text-primary); float: left; clear: left; margin-right: 0.4rem; } .denied__contact dd { margin: 0 0 0.2rem 0; overflow-wrap: anywhere; }