/* ============================================================================ * VC4 Support — base styles + design tokens * Other concerns live in sibling files (tickets.css, messages.css, forms.css, * auth.css, syncfusion.css). _Layout.cshtml loads them all in order. * ============================================================================ */ :root { /* Semantic aliases — every page reads these. Switching data-bs-theme on updates the underlying --s2c-* tokens, which propagates here. */ --bg: var(--s2c-content-bg); --surface: var(--s2c-card-bg); --surface-alt: var(--s2c-tag-bg); --border: var(--s2c-card-border); --text: var(--s2c-strong); --text-muted: var(--s2c-muted); --primary: var(--s2c-primary); --primary-hover: color-mix(in oklab, var(--s2c-primary) 88%, black); --primary-tint: color-mix(in oklab, var(--s2c-primary) 18%, var(--s2c-card-bg)); --primary-subtle: color-mix(in oklab, var(--s2c-primary) 8%, var(--s2c-card-bg)); --success: #198754; --warning: #b45309; --danger: #dc3545; --info: #0dcaf0; --shadow-card: var(--s2c-shadow-sm); --radius: var(--s2c-radius-lg); /* Standard max-width for centered page content. .page-fit, .form-card, .tickets-layout, etc. all bind to this so every page lines up at the same width on big monitors. */ --page-max-width: 1280px; /* Hero — rides on the picked brand color but a touch lighter so it feels softer than a saturated --primary block. The accent (stepper indicators, pills inside the hero) uses the full --primary so it pops against the lighter hero surface. */ --hero-bg: color-mix(in oklab, var(--primary) 78%, white); --hero-text: #ffffff; --hero-accent: var(--primary); /* Stepper node fill. In light mode the saturated --primary already pops against the lighter hero surface, so the fill = accent and the content is white. (Dark mode overrides both — see below.) */ --hero-step-fill: var(--hero-accent); --hero-step-fg: #ffffff; } [data-bs-theme="dark"] { /* Dark mode: blend toward black instead of white so the hero stays inside the dark palette but still reads as the brand color. */ --hero-bg: color-mix(in oklab, var(--primary) 70%, black); --hero-accent: color-mix(in oklab, var(--primary) 65%, black); /* The accent goes DARKER than the hero here (it's the pill colour, which relies on an inset white border to read). That makes it useless as a stepper fill — a filled node would vanish into the hero. So the stepper fill goes the other way: LIGHTER than the hero so the node pops, with dark text for contrast on the bright fill. */ --hero-step-fill: color-mix(in oklab, var(--primary) 60%, white); --hero-step-fg: color-mix(in oklab, var(--primary) 72%, black); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: var(--text); } body { background: var(--bg); } a { color: var(--primary); } a:hover { color: var(--primary-hover); } /* ============================================================================ * Main content area — overrides the styleguide's .s2c-page wrapper since our * pages either use .page-fit (claim 100% height) or scroll on their own. * The subtle diagonal stripe matches the styleguide's component preview boxes * — barely visible in light mode, slightly more pronounced in dark. * ============================================================================ */ .s2c-main { overflow: hidden; padding: 20px 24px; display: flex; flex-direction: column; background-color: var(--s2c-content-bg); background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgba(15,23,42,.025) 12px 13px); } [data-bs-theme="dark"] .s2c-main { background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,.035) 12px 13px); } .s2c-main > * { min-height: 0; } .s2c-main > .page-fit { flex: 1; } /* ============================================================================ * Chrome icons (sidebar nav, topbar buttons, user menu) — all in primary so * the brand color is the consistent accent across the app shell. The styleguide * only colors the active sidebar icon; we extend it to every chrome icon for * a stronger accent. * ============================================================================ */ .s2c-sidebar__link i, .s2c-sidebar__link .icon, .s2c-topbar__btn i, .user-menu-item i { color: var(--s2c-primary); } /* ============================================================================ * Topbar extras — user menu + brand picker popover positioning. * (The .s2c-topbar__btn / .s2c-brand-picker shell come from s2c.css.) * ============================================================================ */ .topbar-flex { flex: 1; } .brand-picker-wrap { position: relative; } .brand-picker-wrap .s2c-brand-picker { position: absolute; top: calc(100% + 8px); right: 0; margin: 0; } .brand-chip { width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); display: block; } .topbar-user { position: relative; } .topbar-user-btn { width: auto !important; padding: 0 6px !important; gap: 8px; } .user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .72rem; } .user-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--s2c-card-bg); border: 1px solid var(--s2c-card-border); border-radius: var(--s2c-radius-lg); box-shadow: var(--s2c-shadow-lg); min-width: 220px; padding: 6px 0; z-index: 300; } .user-menu-head { padding: 6px 14px 8px; border-bottom: 1px solid var(--s2c-divider); margin-bottom: 4px; } .user-menu-name { font-weight: 600; font-size: .85rem; color: var(--text); } .user-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--text); text-decoration: none; font-size: .88rem; /* Also covers the