/* ============================================================================ DESIGN TOKEN SYSTEM (layout-50 Pack 1) ---------------------------------------------------------------------------- The single source of truth for color, spacing, radius, typography, elevation, and motion. Tokens are layered so a theme can override the SEMANTIC roles without touching component CSS: 1. :root — the DEFAULT (light) theme + scales. Every value here matches the pre-token look exactly, so the default render is unchanged (back-compat). 2. html[data-theme="dark"] — dark theme: re-points the semantic color roles. 3. html[data-contrast="high"] — high-contrast OVERRIDE (layout-50 T1B; this is the a11y slot previously reserved as a high-contrast *theme* — shipped as an override so it layers on top of light/dark/operator). 4. html[data-density="compact"] — re-points the density (spacing) tokens. 5. html[data-fontscale="sm|lg|xl"] — re-points the root --font-scale multiplier (per-user text size, T1B). The theme/density attributes are set SERVER-SIDE on in App.razor from a cookie + the per-user UserPreference store (see ThemeResolver), so the right theme is in the first paint with no interactive circuit (the LanguageSwitcher precedent). See docs/roadmap/design-tokens.md for the full catalogue. Token groups: --color-* semantic color ROLES (surface / text / border / brand / state) --space-* spacing scale (driven by --density-* so compact tightens it) --radius-* corner radii --font-* typography scale (family, sizes, weights, line-height) --shadow-* elevation --transition-* / --ease-* motion ============================================================================ */ :root { /* ── Brand (tenant accent overrides --color-primary at the layout level) ── */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-dark: #1e40af; /* ── Text roles ── */ --color-text: #1e293b; --color-text-dark: #0f172a; --color-text-muted: #64748b; /* Foreground for anything FILLED with --color-primary (primary buttons, active tabs, accent chips). Every theme below re-points it to a value validated at >= 4.5:1 against that theme's own --color-primary; when a tenant accent overrides --color-primary at the layout level, the layout emits a COMPUTED --color-on-primary next to it (PortalTheme.OnColorFor), so a brand colour can never be left with an illegible label. --color-text-on-primary is the older name, kept as an alias. */ --color-on-primary: #ffffff; --color-text-on-primary: var(--color-on-primary); /* ── Surface roles ── */ --color-bg: #f0f2f5; /* app canvas */ --color-bg-card: #ffffff; /* raised surface (cards, menus, modals) */ --color-bg-subtle: #f8fafc; /* zebra rows, hover wash, inset panels */ --color-table-header: #f8fafc; /* ── Border roles ── */ --color-border: #e2e8f0; --color-border-input: #d1d5db; --color-border-strong: #cbd5e1; /* ── State roles (status / priority / severity / feedback) ── */ --color-success: #16a34a; --color-success-bg: #dcfce7; --color-warning: #d97706; --color-warning-bg: #fef3c7; --color-danger: #dc2626; --color-danger-bg: #fee2e2; --color-info: #2563eb; --color-info-bg: #dbeafe; /* ── Spacing scale (semantic steps map onto the density tokens below) ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; /* Density-driven steps — compact theme tightens these. Components that want to react to density use --density-gap / --density-pad-y / --density-cell. */ --density-gap: var(--space-3); --density-pad-y: 0.5rem; --density-cell: 0.75rem 1rem; /* table cell padding */ /* ── Radius scale ── */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-pill: 999px; /* ── Typography scale ── */ --font-family-base: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Per-user text-size multiplier (T1B). Applied ONCE, on the root font-size below — every rem-based size (the whole --font-size-* scale) follows. Re-pointed by html[data-fontscale="…"]; default 1 keeps today's look. */ --font-scale: 1; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.5rem; --font-size-2xl: 1.75rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-base: 1.5; /* ── Elevation ── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); /* ── Motion ── */ --transition-fast: 0.15s ease; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); } /* ── Dark theme — re-points the semantic color roles only. Brand (--color-primary) stays tenant-driven; we lighten link/hover affordances at the component level. Spacing/radius/type are theme-agnostic, so they're inherited from :root. ── */ html[data-theme="dark"] { --color-text: #e2e8f0; --color-text-dark: #f1f5f9; --color-text-muted: #94a3b8; /* Dark keeps the tenant/default accent, so white stays the right label colour (#2563eb + white = 5.15:1). A tenant accent that flips the answer is handled by the layout-emitted computed value. */ --color-on-primary: #ffffff; --color-bg: #0f172a; --color-bg-card: #1e293b; --color-bg-subtle: #273449; --color-table-header: #273449; --color-border: #334155; --color-border-input: #475569; --color-border-strong: #64748b; --color-success: #22c55e; --color-success-bg: #14532d; --color-warning: #f59e0b; --color-warning-bg: #78350f; --color-danger: #f87171; --color-danger-bg: #7f1d1d; --color-info: #60a5fa; --color-info-bg: #1e3a8a; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.45); /* Keep Bootstrap's own component theming in step (form controls, dropdowns). */ color-scheme: dark; } /* ── Compact density — tightens the density-driven spacing tokens. Comfortable (default) is the :root values, so omitting the attribute keeps today's look. ── */ html[data-density="compact"] { --density-gap: var(--space-2); --density-pad-y: 0.3rem; --density-cell: 0.4rem 0.6rem; } /* ── Font scale (T1B) — per-user text size. Re-points ONLY the root multiplier; the html rule below applies it to the root font-size, so every rem-based size in the app scales together. Medium (default) emits no attribute. ── */ html[data-fontscale="sm"] { --font-scale: 0.9; } html[data-fontscale="lg"] { --font-scale: 1.125; } html[data-fontscale="xl"] { --font-scale: 1.25; } html, body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); background-color: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The multiplier is applied ONCE, on the ROOT font-size only. On , rem still means the browser's initial size (16px), so this is 16px × scale; the body rule above stays 1rem and simply follows the scaled root — no double scaling for anything that uses the rem-based --font-size-* tokens. */ html { font-size: calc(var(--font-size-base) * var(--font-scale)); } a, .btn-link { color: var(--color-primary); } a:hover, .btn-link:hover { color: var(--color-primary-hover); } .btn-primary { /* Bootstrap 5.3 resolves .btn's colour from --bs-btn-*-color, and its `.btn:hover` rule (0,2,0) outranks a plain `.btn-primary { color }` (0,1,0) — so re-point the variables, or the label snaps back to white on hover/active/disabled and loses the contrast fix. */ --bs-btn-color: var(--color-on-primary, #fff); --bs-btn-hover-color: var(--color-on-primary, #fff); --bs-btn-active-color: var(--color-on-primary, #fff); --bs-btn-disabled-color: var(--color-on-primary, #fff); color: var(--color-on-primary, #fff); background-color: var(--color-primary); border-color: var(--color-primary-hover); border-radius: var(--radius-md); font-weight: 500; transition: all var(--transition-fast); } .btn-primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.25); } .btn-secondary:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(108, 117, 125, 0.2); } .btn-outline-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2); } .btn-outline-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(220, 53, 69, 0.2); } .btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(220, 53, 69, 0.25); } .btn { border-radius: var(--radius-md); font-weight: 500; padding: 0.5rem 1rem; transition: all var(--transition-fast); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.25); } .form-control, .form-select { border-radius: var(--radius-md); border-color: var(--color-border-input); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-control:hover, .form-select:hover { border-color: #b0b8c4; } .form-control:focus, .form-select:focus { border-color: var(--color-primary); } .card { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-fast), transform var(--transition-fast); } .card:hover { box-shadow: var(--shadow-md); } .table { border-radius: var(--radius-md); overflow: hidden; } .table thead th { background-color: var(--color-table-header); border-bottom: 2px solid var(--color-border); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .table tbody tr { transition: background-color 0.1s ease; } .table tbody tr:hover { background-color: var(--color-table-header); } /* Density exemplar — table cell padding follows the --density-cell token, so switching to compact tightens every .table on the page with no per-table CSS. Default value equals Bootstrap's 0.75rem 1rem (look unchanged). */ .table > :not(caption) > * > * { padding: var(--density-cell); } /* ── Admin table row actions ── Admin tables end in an ACTIONS column. Its buttons used to be loose inline siblings, so widths were content-driven and a row with one more button than its neighbour wrapped onto a second, ragged line. Put the buttons in a single .btn-group and mark the cell with this class: the block never wraps and every row's actions occupy the same footprint. Conditional actions are rendered DISABLED rather than omitted, which keeps the group's width — and each button's column — identical on every row. Give the an explicit style="width:…" so the column is reserved before the table lays out. */ .admin-row-actions { white-space: nowrap; } .admin-row-actions .btn-group { display: inline-flex; flex-wrap: nowrap; } .content { padding-top: 1.5rem; } h1 { font-weight: 700; color: var(--color-text-dark); font-size: 1.75rem; } h1:focus { outline: none; } h2 { font-weight: 600; color: var(--color-text); } .valid.modified:not([type=checkbox]) { outline: 1px solid #22c55e; } .invalid { outline: 1px solid #ef4444; } .validation-message { color: var(--color-danger, #ef4444); font-size: 0.875rem; margin-top: 0.25rem; } /* ============================================================================ #blazor-error-ui — the framework's circuit-failure banner. ---------------------------------------------------------------------------- MUST be global. Every layout (MainLayout / PortalLayout / VendorLayout) renders this div, but the rules used to live only in MainLayout.razor.css: scoped CSS compiles to `#blazor-error-ui[b-t081nq90dh]`, an attribute only MainLayout's own markup carries — so on /portal and /vendor the banner never got `display: none` and rendered as an ordinary "Something went wrong." line in the page footer of a perfectly healthy session. Hidden until blazor.web.js sets display:block on it; then a fixed, high-contrast recovery bar pinned to the bottom of the viewport. Its own colours are hard-coded rather than tokenized on purpose: when this shows, the circuit is down, and the banner must stay legible under every theme (color-scheme: light only keeps the UA from re-tinting it in dark mode). ============================================================================ */ #blazor-error-ui { color-scheme: light only; display: none; position: fixed; bottom: 0; left: 0; width: 100%; box-sizing: border-box; z-index: 1100; padding: 0.75rem 1.25rem; background: #fff4c2; color: #1f2430; /* 13.4:1 on #fff4c2 */ border-top: 2px solid #8a6d00; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25); border-radius: 0; font-size: 0.9375rem; line-height: 1.4; } #blazor-error-ui .reload { color: #7a3d00; /* 6.3:1 on #fff4c2 */ font-weight: 600; text-decoration: underline; margin-inline-start: 0.35rem; } #blazor-error-ui .reload:focus-visible, #blazor-error-ui .dismiss:focus-visible { outline: 3px solid #1f2430; outline-offset: 2px; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; inset-inline-end: 0.75rem; top: 0.5rem; color: #1f2430; font-size: 1rem; line-height: 1; padding: 0.25rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: 0.5rem; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Badge styles */ .badge { font-weight: 500; border-radius: var(--radius-sm); padding: 0.35em 0.65em; transition: all var(--transition-fast); } /* Page header pattern */ .page-header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .page-header h1 { margin-bottom: 0.25rem; } .page-header p { color: var(--color-text-muted); margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .btn:hover, .card:hover, .dashboard-card:hover { transform: none !important; } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Rich-text body — sanitized HTML coming out of Quill on tickets and ticket comments. white-space: pre-wrap means legacy plain-text rows keep their newlines without needing migration. img tags from the attachment endpoint get a sensible max-width so a 4K screenshot doesn't blow out the ticket card. */ .ticket-rich-body { white-space: pre-wrap; } .ticket-rich-body p, .ticket-rich-body ul, .ticket-rich-body ol, .ticket-rich-body blockquote, .ticket-rich-body pre { margin: 0 0 0.6em 0; } .ticket-rich-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0; } /* Quill toolbar tweaks — slimmer borders, less padding, so it fits inside our card layouts without dominating. */ .rich-text-editor-host { background: white; border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 4px 4px; padding: 6px 10px; } .ql-toolbar.ql-snow { border-color: var(--color-border); border-radius: 4px 4px 0 0; background: #f8fafc; } /* ============================================================================ DARK-THEME BRIDGE for Bootstrap surfaces (layout-50 Pack 1) ---------------------------------------------------------------------------- Bootstrap components hard-code light backgrounds/borders, so the semantic token re-point in html[data-theme="dark"] doesn't reach them on its own. This block re-skins the surfaces the SHELL relies on (card, table, form controls, dropdown, modal, list-group) using the SAME tokens, proving the cascade end-to-end. NOT a full page sweep — that's a later breadth pack; deeper bespoke page CSS may still show light spots under dark mode until then. ============================================================================ */ html[data-theme="dark"] .card { background-color: var(--color-bg-card); color: var(--color-text); } html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--color-text); /* Bootstrap's .table-striped bakes its OWN --bs-table-striped-color (defaults to a near-black light-theme value) instead of deriving it from --bs-table-color, so striped (odd) rows were unreadable — nearly invisible dark text on the dark canvas — while non-striped rows were fine. Found on the live Users page. */ --bs-table-striped-color: var(--color-text); --bs-table-striped-bg: var(--color-bg-subtle); color: var(--color-text); } html[data-theme="dark"] .table thead th { background-color: var(--color-table-header); border-bottom-color: var(--color-border); } html[data-theme="dark"] .table tbody tr:hover { background-color: var(--color-bg-subtle); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: var(--color-bg-card); border-color: var(--color-border-input); color: var(--color-text); } html[data-theme="dark"] .form-control::placeholder { color: var(--color-text-muted); } html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .offcanvas { background-color: var(--color-bg-card); border-color: var(--color-border); color: var(--color-text); } html[data-theme="dark"] .text-muted { color: var(--color-text-muted) !important; } html[data-theme="dark"] .rich-text-editor-host, html[data-theme="dark"] .ql-toolbar.ql-snow { background: var(--color-bg-card); border-color: var(--color-border); } /* ============================================================================ SHARED FOUNDATION COMPONENTS (layout-50 Pack 1) — token-based, theme-aware PageHeader / EmptyState / Skeleton / Toast. Kept here (global, not scoped) so they read the cascading theme tokens directly. ============================================================================ */ /* ── PageHeader ── */ .tyit-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); } .tyit-page-header__titles { min-width: 0; } .tyit-page-header__title { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-dark); } .tyit-page-header__icon { margin-inline-end: var(--space-2); color: var(--color-text-muted); } .tyit-page-header__subtitle { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); } .tyit-page-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; flex-wrap: wrap; } /* Narrow screens: the title block and the action buttons cannot share a row without clipping — stack them, keep the actions on their own wrappable row. Without this the header was the page-wide horizontal-overflow source at phone widths (390px): titles have min-width:0 but actions are flex-shrink:0. */ @media (max-width: 640.98px) { .tyit-page-header { flex-direction: column; align-items: stretch; gap: var(--space-3); } .tyit-page-header__actions { justify-content: flex-start; } .tyit-page-header__actions > * { max-width: 100%; } } /* ── EmptyState ── */ .tyit-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-6) var(--space-4); color: var(--color-text-muted); } .tyit-empty__icon { font-size: 2.5rem; color: var(--color-border-strong); margin-bottom: var(--space-3); line-height: 1; } .tyit-empty__message { font-size: var(--font-size-base); color: var(--color-text); margin-bottom: var(--space-4); max-width: 32rem; } .tyit-empty__actions { display: flex; gap: var(--space-2); } /* ── Skeleton ── */ .tyit-skeleton { display: block; background: linear-gradient( 90deg, var(--color-bg-subtle) 25%, var(--color-border) 37%, var(--color-bg-subtle) 63%); background-size: 400% 100%; border-radius: var(--radius-sm); animation: tyit-skeleton-shimmer 1.4s ease infinite; } @keyframes tyit-skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .tyit-skeleton { animation: none; } } /* ── Shared motion vocabulary (Claude Design handoff — Operator Console) ── A small set of reusable entrance/feedback animations, ported from the original design mock's own keyframes (deckFadeUp/deckSpin/deckPop/ liveBlink) and renamed to the app's own `.app-*` utility convention (matches .app-table/.app-num). Theme-agnostic — motion is a general polish layer, not something exclusive to the operator accent. */ @keyframes app-fade-up { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } } .app-fade-up { animation: app-fade-up 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes app-spin { to { transform: rotate(360deg); } } .app-spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: app-spin 0.6s linear infinite; } @keyframes app-pop { 0% { transform: scale(0.3); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } .app-pop { display: inline-flex; align-items: center; gap: 7px; animation: app-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes app-live-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } .app-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 9px var(--color-success); animation: app-live-blink 2s infinite; } @media (prefers-reduced-motion: reduce) { .app-fade-up, .app-spin, .app-pop, .app-live-dot { animation: none !important; } } /* ── Toast host + toasts ── */ .tyit-toast-host { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 1080; display: flex; flex-direction: column; gap: var(--space-2); max-width: min(360px, calc(100vw - 2 * var(--space-4))); pointer-events: none; } /* Plain `html[dir="rtl"]` — app.css is a GLOBAL stylesheet, so the Blazor scoped-CSS `:global()` wrapper is not valid here and the parser dropped the whole rule (RTL toasts stayed pinned to the right). */ html[dir="rtl"] .tyit-toast-host { right: auto; left: var(--space-4); } .tyit-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-3); background: var(--color-bg-card); color: var(--color-text); border: 1px solid var(--color-border); border-left: 4px solid var(--color-info); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--font-size-sm); animation: app-toast-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes app-toast-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tyit-toast { animation: none; } } .tyit-toast--success { border-left-color: var(--color-success); } .tyit-toast--warning { border-left-color: var(--color-warning); } .tyit-toast--danger { border-left-color: var(--color-danger); } .tyit-toast--info { border-left-color: var(--color-info); } .tyit-toast__icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.3; } .tyit-toast--success .tyit-toast__icon { color: var(--color-success); } .tyit-toast--warning .tyit-toast__icon { color: var(--color-warning); } .tyit-toast--danger .tyit-toast__icon { color: var(--color-danger); } .tyit-toast--info .tyit-toast__icon { color: var(--color-info); } .tyit-toast__body { flex: 1; min-width: 0; word-wrap: break-word; } .tyit-toast__close { flex-shrink: 0; background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0 var(--space-1); font-size: 1rem; line-height: 1.3; } .tyit-toast__close:hover { color: var(--color-text); } /* ============================================================================ Shared presentation utilities — used directly by pages AND by the shared components (Pill / Avatar / MetricCard in Components/Shared). Theme-agnostic (token-driven), so they adapt to light / dark / operator. ============================================================================ */ .app-num { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-feature-settings: "tnum"; } .app-table thead th { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); padding: 0.5rem 0.65rem; white-space: nowrap; } .app-table tbody td { padding: 0.55rem 0.65rem; vertical-align: middle; border-color: var(--color-border); } /* ============================================================================ html[data-theme="operator"] — "Operator Console" theme. ---------------------------------------------------------------------------- Deep-navy dark surface + signature magenta accent, from the Operator Console design mock. Mirrors the dark theme above: re-points the semantic colour ROLES + elevation only — spacing / radius / type are inherited from :root, so the whole shell (rail stripe + icons, primary buttons, links, active tabs) follows --color-primary automatically. To keep per-tenant brand colour instead of the magenta, delete the three --color-primary* lines below; the theme then inherits the tenant accent like the dark theme does. ============================================================================ */ html[data-theme="operator"] { /* Brand / accent — signature magenta (mock --accent #ff00aa, nudged up for legibility on the deep navy). Delete to keep tenant branding. */ --color-primary: #ff2d9b; --color-primary-hover: #ff57b0; --color-primary-dark: #d11a7e; --color-text: #e9eef9; --color-text-dark: #f4f7fd; --color-text-muted: #97a3ba; /* The signature magenta is a LIGHT fill: white on it is only 3.44:1, which failed WCAG AA for the normal-size labels on primary buttons and active tabs. The accent itself is the theme's identity, so the FOREGROUND moves instead — the theme's own deep navy reads 5.50:1 on #ff2d9b (and 6.8:1 on the #ff57b0 hover fill). */ --color-on-primary: #0b1020; --color-bg: #070b14; --color-bg-card: #0e1626; --color-bg-subtle: #152037; --color-table-header: #111a2e; /* Aliases some chrome reads directly (NavMenu section bar). */ --color-card: #0e1626; --color-subtle: #152037; /* Translucent hairlines (mock --border / --border-2) so the ambient glow reads through panel edges — the glassy Operator look, not solid boxes. */ --color-border: rgba(255, 255, 255, 0.08); --color-border-input: rgba(255, 255, 255, 0.16); --color-border-strong: rgba(255, 255, 255, 0.22); --color-success: #2bd4a8; --color-success-bg: #0d3b30; --color-warning: #f6b73c; --color-warning-bg: #4a3610; --color-danger: #ff5a74; --color-danger-bg: #4d1626; --color-info: #3fc6f5; --color-info-bg: #0c3346; /* Elevation — deeper than the dark theme to match the mock's float. */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 20px -8px rgba(0, 0, 0, 0.70), 0 2px 6px -2px rgba(0, 0, 0, 0.50); --shadow-lg: 0 22px 48px -26px rgba(0, 0, 0, 0.80), 0 8px 20px -12px rgba(0, 0, 0, 0.60); color-scheme: dark; } /* Bootstrap surface bridge — mirrors the dark bridge above; Bootstrap hard-codes light surfaces, so the token re-point doesn't reach them on its own. */ html[data-theme="operator"] .card { background-color: var(--color-bg-card); border-color: var(--color-border); color: var(--color-text); } html[data-theme="operator"] .table { --bs-table-bg: transparent; --bs-table-color: var(--color-text); /* Same fix as the dark theme: Bootstrap's .table-striped bakes its own --bs-table-striped-color (a near-black default) instead of deriving it from --bs-table-color, so striped rows were unreadable. */ --bs-table-striped-color: var(--color-text); --bs-table-striped-bg: var(--color-bg-subtle); color: var(--color-text); } html[data-theme="operator"] .table thead th { background-color: var(--color-table-header); border-bottom-color: var(--color-border); } html[data-theme="operator"] .table tbody tr:hover { background-color: var(--color-bg-subtle); } html[data-theme="operator"] .form-control, html[data-theme="operator"] .form-select { background-color: var(--color-bg-card); border-color: var(--color-border-input); color: var(--color-text); } html[data-theme="operator"] .form-control::placeholder { color: var(--color-text-muted); } html[data-theme="operator"] .dropdown-menu, html[data-theme="operator"] .list-group-item, html[data-theme="operator"] .modal-content, html[data-theme="operator"] .offcanvas { background-color: var(--color-bg-card); border-color: var(--color-border); color: var(--color-text); } html[data-theme="operator"] .text-muted { color: var(--color-text-muted) !important; } html[data-theme="operator"] .rich-text-editor-host, html[data-theme="operator"] .ql-toolbar.ql-snow { background: var(--color-bg-card); border-color: var(--color-border); } /* Bootstrap utility bridge — these classes hard-code LIGHT colours that the token re-point can't reach, so they read as "light spots" under the theme (filter-count badges, card headers, soft "-subtle" fills, "-emphasis" text, alerts, the close "×"). Re-skin them so the whole app — not just the shell — goes properly dark. Shared by BOTH dark themes: user feedback ("dark theme isn't fully dark") confirmed the dark theme had the exact same gap, so the bridge is scoped to :is(dark, operator) — same specificity as before. */ html:is([data-theme="dark"], [data-theme="operator"]) .bg-light { background-color: var(--color-bg-subtle) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .text-dark { color: var(--color-text) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .card-header { background-color: var(--color-table-header); border-bottom-color: var(--color-border); color: var(--color-text); } html:is([data-theme="dark"], [data-theme="operator"]) .btn-close { filter: invert(1) grayscale(1) brightness(1.7); } html:is([data-theme="dark"], [data-theme="operator"]) .bg-primary-subtle { background-color: color-mix(in oklab, var(--color-primary) 22%, transparent) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .text-primary-emphasis { color: var(--color-primary) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .bg-success-subtle { background-color: var(--color-success-bg) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .text-success-emphasis { color: var(--color-success) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .bg-warning-subtle { background-color: var(--color-warning-bg) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .text-warning-emphasis { color: var(--color-warning) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .bg-danger-subtle { background-color: var(--color-danger-bg) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .text-danger-emphasis { color: var(--color-danger) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .bg-info-subtle { background-color: var(--color-info-bg) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .text-info-emphasis { color: var(--color-info) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .bg-secondary-subtle { background-color: var(--color-bg-subtle) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .text-secondary-emphasis { color: var(--color-text-muted) !important; } html:is([data-theme="dark"], [data-theme="operator"]) .alert-info { background-color: var(--color-info-bg); border-color: color-mix(in oklab, var(--color-info) 40%, transparent); color: var(--color-text); } html:is([data-theme="dark"], [data-theme="operator"]) .alert-warning { background-color: var(--color-warning-bg); border-color: color-mix(in oklab, var(--color-warning) 40%, transparent); color: var(--color-text); } html:is([data-theme="dark"], [data-theme="operator"]) .alert-danger { background-color: var(--color-danger-bg); border-color: color-mix(in oklab, var(--color-danger) 40%, transparent); color: var(--color-text); } html:is([data-theme="dark"], [data-theme="operator"]) .alert-success { background-color: var(--color-success-bg); border-color: color-mix(in oklab, var(--color-success) 40%, transparent); color: var(--color-text); } /* Neutral alert flavours (the parent-ticket and merged-away banners) — the same light-spot class as the semantic alerts above. */ html:is([data-theme="dark"], [data-theme="operator"]) .alert-light, html:is([data-theme="dark"], [data-theme="operator"]) .alert-secondary { background-color: var(--color-bg-subtle); border-color: var(--color-border); color: var(--color-text); } /* Helper/secondary-text bridge — the admin shell never sets data-bs-theme, so Bootstrap's :root LIGHT literals leak through every class that resolves from these variables: .form-text (1.1:1 on an operator card, 1.04:1 on dark — the "unreadable helper text" bug), .text-body-secondary, .dropdown-item (dark-on-dark in bridged menus), the .form-floating placeholder rule and SVG labels. Re-point the VARIABLES per theme rather than fighting the classes — .text-body-secondary carries !important, and this is the exact mechanism of the --bs-table-striped-color fix (#306). */ html:is([data-theme="dark"], [data-theme="operator"]) { --bs-body-color: var(--color-text); --bs-secondary-color: var(--color-text-muted); --bs-tertiary-color: var(--color-text-muted); } /* .text-secondary resolves from --bs-secondary-rgb, which also feeds .bg-secondary fills — re-pointing the triplet would wash those out, so bridge the text class directly instead (the .text-muted pattern above). */ html:is([data-theme="dark"], [data-theme="operator"]) .text-secondary { color: var(--color-text-muted) !important; } /* Disabled/readonly inputs: the surface bridge above (0,2,1) shadows Bootstrap's .form-control:disabled background (0,2,0), leaving disabled fields visually identical to editable ones — restore the affordance at higher specificity, on tokens so high-contrast strengthens it too. */ html:is([data-theme="dark"], [data-theme="operator"]) .form-control:disabled, html:is([data-theme="dark"], [data-theme="operator"]) .form-control[readonly], html:is([data-theme="dark"], [data-theme="operator"]) .form-select:disabled { background-color: var(--color-bg-subtle); color: var(--color-text-muted); } /* The same shadowing killed hover/focus feedback on list-group options (Typeahead dropdowns, pickers) — Bootstrap's :hover (0,2,0) loses to the surface bridge (0,2,1). Restore it. */ html:is([data-theme="dark"], [data-theme="operator"]) .list-group-item-action:hover, html:is([data-theme="dark"], [data-theme="operator"]) .list-group-item-action:focus { background-color: var(--color-bg-subtle); color: var(--color-text); } /* ── Signature atmosphere — what gives the Operator Console its FEEL (the part a plain token re-point can't): a deep layered backdrop (navy wash + masked blueprint grid + two drifting glow orbs), magenta glow on the accent, and the deepened rail. All theme-scoped + global — no per-page edits. ── */ /* The canvas colour + base wash live on so the fixed atmospheric layers (body's pseudo-elements, z-index:-1) sit BEHIND content while still painting. The content area
is normally an opaque --color-bg; making it (and body) transparent under this theme lets the backdrop show through the gaps between panels, exactly as the mock does. */ html[data-theme="operator"] { background-color: #070b14; background-image: radial-gradient(125% 90% at 12% -12%, #0d1730, transparent 58%); background-attachment: fixed; } html[data-theme="operator"] body, html[data-theme="operator"] main { background-color: transparent; } /* Two independently-drifting, blurred glow blobs — real elements (see MainLayout.razor's .app-aurora wrapper), not a single combined pseudo-element, so each can drift on its own path/timing like the design mock's own multi-blob backdrop (and PortalLayout's .portal-aurora-blob-*). Invisible in light/dark — only operator gives them a background. */ .app-aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } html[data-theme="operator"] .app-aurora-blob { position: absolute; border-radius: 50%; filter: blur(48px); will-change: transform; } html[data-theme="operator"] .app-aurora-blob-a { width: 46vw; height: 46vw; left: -10vw; top: -16vh; background: radial-gradient(closest-side, rgba(255, 45, 155, 0.28), transparent 72%); animation: operator-drift 19s ease-in-out infinite; } html[data-theme="operator"] .app-aurora-blob-b { width: 40vw; height: 40vw; right: -12vw; bottom: -18vh; background: radial-gradient(closest-side, rgba(63, 198, 245, 0.2), transparent 72%); animation: operator-drift-b 24s ease-in-out infinite; } @keyframes operator-drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3%, -2.5%); } } @media (prefers-reduced-motion: reduce) { html[data-theme="operator"] .app-aurora-blob { animation: none; } } /* Faint blueprint grid, faded out toward the bottom with a radial mask. */ html[data-theme="operator"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%); } @keyframes operator-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3%, 2.5%); } } /* Magenta glow on the accent — primary buttons + the rail active-stripe. */ html[data-theme="operator"] .btn-primary { box-shadow: 0 0 0 1px rgba(255, 45, 155, 0.45), 0 14px 40px -14px rgba(255, 45, 155, 0.6); } html[data-theme="operator"] .btn-primary:hover { box-shadow: 0 0 0 1px rgba(255, 87, 176, 0.55), 0 16px 44px -12px rgba(255, 45, 155, 0.7); } html[data-theme="operator"] .section-tab.active::before { box-shadow: 0 0 13px var(--color-primary); } /* Deepen the TopSectionNav rail to the mock's near-black navy. */ html[data-theme="operator"] .section-nav { background: linear-gradient(180deg, #0a1322 0%, #0b1120 100%); } /* JetBrains-style tabular numerals for KPI / metric figures (system mono + tnum; self-host JetBrains Mono + add .mono to numbers for the exact match). */ html[data-theme="operator"] .mono, html[data-theme="operator"] .metric-value { font-family: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-feature-settings: "tnum" 1; } /* ============================================================================ html[data-contrast="high"] — HIGH-CONTRAST OVERRIDE (layout-50 T1B). ---------------------------------------------------------------------------- The a11y slot the token header originally reserved as a high-contrast THEME, shipped as an override instead: it layers on top of whichever theme is active, so users don't have to trade dark mode / Operator for readability. Strengthens the text + border roles and makes focus unmissable; placed AFTER the theme blocks and keyed per theme family so each variant stays on the right side of its own surfaces. ============================================================================ */ /* Over the default LIGHT theme (no data-theme attribute). */ html[data-contrast="high"]:not([data-theme="dark"]):not([data-theme="operator"]) { --color-text: #0f172a; --color-text-dark: #020617; --color-text-muted: #334155; --color-border: #94a3b8; --color-border-input: #64748b; --color-border-strong: #475569; /* Helper text follows the strengthened muted role (the dark/operator bridge already routes these through --color-text-muted; light needs its own re-point because that bridge doesn't apply here). */ --bs-body-color: var(--color-text); --bs-secondary-color: var(--color-text-muted); --bs-tertiary-color: var(--color-text-muted); } /* Over the DARK and OPERATOR themes. */ html:is([data-theme="dark"], [data-theme="operator"])[data-contrast="high"] { --color-text: #f8fafc; --color-text-dark: #ffffff; --color-text-muted: #cbd5e1; --color-border: #64748b; --color-border-input: #94a3b8; --color-border-strong: #cbd5e1; } /* Unmissable keyboard focus, all themes. */ html[data-contrast="high"] :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* ============================================================================ SHARED FOUNDATION COMPONENTS (layout-50 T1B) — token-based, theme-aware Breadcrumb / StandardListToolbar / StandardFormLayout. Same contract as the Pack 1 block above (PageHeader/EmptyState/Skeleton/Toast): global so they read the cascading theme tokens directly. ============================================================================ */ /* ── Breadcrumb ── */ .tyit-breadcrumb { margin-bottom: var(--space-2); } .tyit-breadcrumb__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); } .tyit-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); } .tyit-breadcrumb__item a { color: var(--color-text-muted); text-decoration: none; } .tyit-breadcrumb__item a:hover { color: var(--color-primary); text-decoration: underline; } .tyit-breadcrumb__sep { color: var(--color-border-strong); font-size: var(--font-size-xs); line-height: 1; } .tyit-breadcrumb__current { color: var(--color-text); font-weight: var(--font-weight-medium); } /* ============================================================================ RESPONSIVE LIST-PAGE TOOLBAR (.app-toolbar) ---------------------------------------------------------------------------- The shared replacement for the hand-rolled `
` list-page header. That pattern does not wrap, and Bootstrap's .form-control / .form-select are `width: 100%` flex items with no min-width floor, so on a phone the row simply overflowed: on /assets the search box shrank to 26px, the type