:root { /* PVURA Design System 2.0 (DESIGN_SYSTEM_2.md) - the dark, coral-accented palette shared conceptually with PVURA Operative's native theme tokens. Fixed brand palette, not a per-customer theme - nothing here is overridden by org config; every organization sees the same shell. Canonical --pvura-* names first (matching the doc + Operative's theme.ts 1:1), then the existing --brand/--panel/... names the rest of this file already uses are kept as aliases so no selector below had to be renamed - only re-pointed at dark values. */ --pvura-bg: #0b0e11; --pvura-surface: #12171b; --pvura-surface-raised: #171d22; --pvura-surface-soft: #1d242a; --pvura-text: #f4f1ea; --pvura-text-secondary: #b8bec4; --pvura-text-muted: #8e969d; --pvura-coral: #ff6b55; --pvura-orange: #ff934f; --pvura-purple: #3b2e3f; --pvura-sand: #e9c5a4; --pvura-charcoal: #101214; --pvura-success: #39d98a; --pvura-warning: #f5b942; --pvura-danger: #ff6257; --pvura-info: #5fa8ff; --pvura-border: rgba(244, 241, 234, 0.10); --pvura-border-strong: rgba(244, 241, 234, 0.20); --pvura-focus: #ff6b55; --pvura-overlay: rgba(11, 14, 17, 0.72); --bg-primary: var(--pvura-bg); --panel: var(--pvura-surface); --panel-raised: var(--pvura-surface-raised); --panel-alt: var(--pvura-surface-soft); --border: var(--pvura-border); --border-strong: var(--pvura-border-strong); --ring: rgba(255, 107, 85, 0.18); --text-primary: var(--pvura-text); --text-secondary: var(--pvura-text-secondary); --text-tertiary: var(--pvura-text-muted); --brand: var(--pvura-coral); /* --brand-hover already served exactly this purpose before this sprint (with an almost-identical hand-picked value) - reconciled as an alias of the design-lock's canonical --pvura-hover rather than kept as a second, near-duplicate hover color (same pattern as --radius -> --radius-md above). --pvura-pressed is new: no :active state existed on .btn-primary before this sprint. */ /* Text/border/UI-indicator use of the brand color, split from --brand itself (fills, always paired with --on-fill's charcoal text) the same way --danger-solid/--danger-text already split status colors above. On dark, identical to --brand - --pvura-coral already reads fine as text there. On light, overridden to a darkened coral (see [data-theme="light"] below) - the bright brand coral fails contrast as text/outline on a light ground (2.80:1, below even the 3:1 non-text minimum). */ --brand-text: var(--pvura-coral); /* Dark surfaces read hover as a brighten-and-lift, not a darken (which would read as "receding"), hence lighter/warmer than --brand rather than the light theme's darker hover tone. */ --brand-hover: var(--pvura-hover); --brand-soft: rgba(255, 107, 85, 0.14); --accent: var(--pvura-orange); /* Text placed ON TOP of a solid coral/status fill (primary buttons, badges, toast-error) - charcoal reads better than white against every one of these mid-bright saturated fills, and matches Operative's PrimaryButton (coral bg + charcoal text) exactly. */ --on-fill: var(--pvura-charcoal); /* Status colors on dark: no separate darker "-text" tone is needed (unlike the light theme, where saturated fills needed darkened text for contrast) - the DS2 status color itself already reads clearly against these dark surfaces. -bg/-border stay low-opacity tints of the same color rather than filled chips, so status pills read as "colored outline + colored text" - the same visual language as Operative's StatusPill - just with a faint tint for extra weight in dense desktop tables. */ --danger-solid: var(--pvura-danger); --danger-text: var(--pvura-danger); --danger-on-fill: var(--on-fill); --danger-bg: rgba(255, 98, 87, 0.12); --danger-border: rgba(255, 98, 87, 0.4); --danger: var(--danger-text); --warning-solid: var(--pvura-warning); --warning-text: var(--pvura-warning); --warning-on-fill: var(--on-fill); --warning-bg: rgba(245, 185, 66, 0.12); --warning-border: rgba(245, 185, 66, 0.4); --warning: var(--warning-text); --success-solid: var(--pvura-success); --success-text: var(--pvura-success); --success-on-fill: var(--on-fill); --success-bg: rgba(57, 217, 138, 0.12); --success-border: rgba(57, 217, 138, 0.4); --success: var(--success-text); --info: var(--pvura-info); --neutral-bg: var(--pvura-surface-soft); --neutral-border: var(--pvura-border-strong); --neutral-text: var(--pvura-text-muted); /* Multi-Sector Control Experience mission (Section 15/42): one narrowly-scoped accent token, touching ONLY the sidebar active- indicator below - never --brand/--brand-text itself (PVURA® stays one masterbrand, Section 40), never --danger/--warning/--success (safety state never depends on sector accent, Section 42). Default equals --pvura-coral exactly, so a Fire & Rescue organization (or any request with no data-sector attribute) renders byte-identical to before this token existed - overridden per [data-sector="..."] below for the other four sectors. */ --sector-accent: var(--pvura-coral); --sidebar-width: 248px; --sidebar-bg: var(--pvura-charcoal); --sidebar-bg-alt: var(--pvura-surface); --sidebar-text: var(--pvura-text-secondary); --sidebar-text-active: var(--sector-accent); --sidebar-hover-bg: rgba(255, 107, 85, 0.10); --sidebar-active-bg: rgba(255, 107, 85, 0.16); --sidebar-border: rgba(244, 241, 234, 0.08); /* --radius-md is the canonical name (Category-Leading UX Design Lock, "radius system" / "reconcile carefully, do not create two permanent canonical names") - --radius is kept only as an alias pointing at it, not a second independent value, so the ~40 existing var(--radius) call sites across templates/CSS keep working unchanged without a repo-wide rename in this sprint. */ --radius-md: 10px; --radius: var(--radius-md); --radius-sm: 7px; --radius-lg: 16px; --radius-full: 999px; /* Spacing scale (Category-Leading UX Design Lock, "grid/spacing/ radius/motion") - documented in DESIGN_SYSTEM_2.md since Fase 1 but never implemented as real custom properties until now. Existing hardcoded spacing values elsewhere in this file are NOT mechanically rewritten in this sprint (out of scope, see the design lock's own "avoid repository-wide mechanical churn" instruction) - these are the canonical target for new/refactored Passport work. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Breakpoint values, documented as custom properties for reference/ JS use - CSS custom properties cannot be read inside an @media feature (a hard CSS language limitation, not an implementation gap), so every @media rule in this file still spells out the same pixel value literally. These three numbers are the single source of truth those literals must match. */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1200px; /* New surface/interaction tokens (Category-Leading UX Design Lock, "surface hierarchy" / "color tokens"). --pvura-disabled-text locks the value already used on PVURA Operative's tokens.ts, closing the one token DESIGN_SYSTEM_2.md documented but pvura.css never defined. --pvura-hover/--pvura-pressed apply only to the coral primary button (see .btn-primary below) - ghost/text buttons keep their existing background-tint hover, unchanged. */ --pvura-surface-critical: #211714; --pvura-disabled-text: rgba(244, 241, 234, 0.35); --pvura-hover: #ff8269; --pvura-pressed: #e8543f; /* Typography (Category-Leading UX Design Lock, "typography system") - Archivo (display/headings) + Inter (UI/body), the same self- hosted variable fonts already shipping on the marketing site (marketing-site-src/templates/base.html), extended here rather than depending on a third-party font CDN. Fallback stacks are DESIGN_SYSTEM_2.md's existing system-sans/mono stacks, used until the webfont loads (font-display: swap below) and unchanged if it never does. */ --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* Elevation on dark comes primarily from surface steps (bg -> surface -> surface-raised -> surface-soft), not heavy shadows - traditional black shadows are nearly invisible on a dark ground. Shadows are reserved for floating elements (dialogs, toasts) as a thin, low-opacity dark shadow plus a visible border for actual legible separation (DESIGN_SYSTEM_2.md, "Skygge / elevasjon"). */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-easing: cubic-bezier(0.22, 1, 0.36, 1); } /* Personal light-theme opt-in (2026-09) - dark stays PVURA's actual target design (CLAUDE.md), this is a per-account preference layered on top (users.theme, same shape as users.locale), applied server- side as data-theme on so there is no flash of the wrong theme on load. Every text/status color below was computed against the actual WCAG 2.1 relative-luminance formula, not eyeballed - all pass AA (>=4.5:1 for text, >=3:1 for the focus ring as a non-text UI indicator), most comfortably clear AAA (>=7:1): text-primary #14181b on #ffffff = 17.85:1 (AAA) text-secondary #484e54 on #ffffff = 8.42:1 (AAA) text-muted #5a6167 on #ffffff = 6.28:1 (AA, well past 4.5) danger-text #c4291d on #ffffff = 5.70:1 (AA) warning-text #8a5a00 on #ffffff = 5.93:1 (AA) success-text #1f7a4c on #ffffff = 5.32:1 (AA) info #1d5fbf on #ffffff = 6.10:1 (AA) focus ring #c93a22 on #ffffff = 5.11:1 (AA, exceeds the 3:1 non-text minimum) The base saturated brand/status hues (--pvura-coral/orange/success/ warning/danger/info) are left untouched - they stay fills/icons (paired with --on-fill's charcoal text, itself unaffected since --pvura-charcoal doesn't change here), never text color directly; only the *-text semantic tokens below get a darkened variant, the same distinction this file's own dark-theme comments already anticipated ("unlike the light theme, where saturated fills needed darkened text for contrast" - see --danger-text above). --pvura- coral itself fails badly as text/outline on white (2.80:1) - that's exactly why it's never reassigned to a *-text token here. */ [data-theme="light"] { --pvura-bg: #ffffff; --pvura-surface: #f7f5f2; --pvura-surface-raised: #ffffff; --pvura-surface-soft: #efede8; --pvura-text: #14181b; --pvura-text-secondary: #484e54; --pvura-text-muted: #5a6167; --pvura-border: rgba(20, 24, 27, 0.10); --pvura-border-strong: rgba(20, 24, 27, 0.20); --pvura-focus: #c93a22; --pvura-overlay: rgba(20, 24, 27, 0.5); /* Light surfaces read hover as a press-down/darken, not a lift - the opposite of dark mode's brighten (see --brand-hover's own comment above). */ --brand-hover: var(--pvura-hover); --brand-text: #c93a22; --ring: rgba(201, 58, 34, 0.35); --danger-text: #c4291d; --danger: var(--danger-text); --warning-text: #8a5a00; --warning: var(--warning-text); --success-text: #1f7a4c; --success: var(--success-text); --info: #1d5fbf; --neutral-text: var(--pvura-text-muted); /* Light-theme equivalents for the new tokens added in this sprint (Category-Leading UX Design Lock §2.3: "no new light-theme design debt" - every new token gets an explicit light value here, not left undefined). --pvura-surface-critical becomes a light, warm-tinted ground (not the dark theme's near-black tint) so a Level-4 card still reads as "distinct from the page", not as a stray dark box on a white page. Light already reads hover as press-down/darken (see --brand-hover above), so --pvura-hover/--pvura-pressed follow the same direction here, not dark mode's brighten. */ --pvura-surface-critical: #fdf1ef; --pvura-disabled-text: rgba(20, 24, 27, 0.35); --pvura-hover: #e85a44; --pvura-pressed: #c94a35; /* The left nav rail switches to light too (2026-09-05: a fully light theme, not a dark-chrome/light-canvas split - an earlier version of this pass kept it dark, but that read as broken/ half-applied rather than deliberate). A shade off pure white (matching --pvura-surface) for gentle separation from the main content, not identical to it. --sidebar-text-active now derives from --brand-text above instead of a literal value, so it stays correct in both themes automatically. */ --sidebar-bg: #f7f5f2; --sidebar-bg-alt: #efede8; --sidebar-text: #484e54; /* --sector-accent itself is NOT redefined here - it stays the dark- mode hex from :root/[data-sector] above (same cross-theme literal the pre-existing --sidebar-hover-bg/--sidebar-active-bg rgba tints already used - unchanged by this mission). Only the ACTIVE TEXT needs a darkened, light-background-safe variant, mirroring --brand-text's own light-mode darkening immediately above for the identical contrast reason; --sector-accent-text-light provides that per sector, defaulting to --brand-text's own light value. */ --sector-accent-text-light: var(--brand-text); --sidebar-text-active: var(--sector-accent-text-light); --sidebar-hover-bg: rgba(255, 107, 85, 0.10); --sidebar-active-bg: rgba(255, 107, 85, 0.16); --sidebar-border: rgba(20, 24, 27, 0.08); } /* SUPERSEDED 2026-10-05 (Sector Experience V2): the Multi-Sector mission's invented --sector-accent values (maritime #3fb8d4, offshore #c97d3a, energy #7c6cff, industry #5a93a0, fire = coral) are replaced by the product-owner-approved V2 sector palettes, defined once in static/css/pvura-control.css under [data-sector=...] and documented in sector_experience.py / DESIGN_SYSTEM_2.md. --sector-accent is kept as an alias of the V2 --sector-bright token so older selectors keep resolving. */ /* Self-hosted, not a third-party font CDN dependency - same two files already shipping on the marketing site (marketing-site-src/templates/ base.html), copied into static/fonts/ for this app rather than linked externally. Variable fonts (weight 100-900 in one file), font-display: swap so text is never invisible while they load. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/Archivo-var.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/Inter-var.woff2') format('woff2'); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Brand-accent scrollbar (coral -> orange, matching the app's own accent pair) instead of the browser default - applies everywhere, not just one surface. Firefox has no gradient support for scrollbar-color, so it falls back to a flat coral thumb. */ html { scrollbar-width: thin; scrollbar-color: var(--pvura-coral) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--pvura-orange), var(--pvura-coral)); border-radius: 999px; border: 2px solid var(--bg-primary); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--pvura-coral), var(--pvura-orange)); background-clip: padding-box; } body { margin: 0; font-family: var(--font-ui); background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* Base heading rhythm - most headings inherit this untouched; .hero h1 and .card-header h2/h3 layer stronger, context-specific treatment on top. Without this, any

/

outside those two patterns fell back to browser defaults, which is a big part of why the interface read as flat at desktop size - every heading looked like plain text. */ h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.25; } h1 { font-size: 1.9rem; letter-spacing: -0.02em; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; } h4, h5, h6 { font-size: 1rem; font-weight: 600; } /* Visible, on-brand keyboard focus everywhere - DS2 requires a real ring, never just a color change (see --pvura-focus). Native :focus-visible support means mouse/touch interaction never shows it. */ a:focus-visible, button:focus-visible, .btn:focus-visible, .sidebar-link:focus-visible, .nav-links a:focus-visible, .link:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--pvura-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* Skip-link (UX Phase 3C, P3) - the very first focusable element in body, positioned off-screen via `top` (not display:none/visibility: hidden, which would also remove it from the tab order) so it never shifts surrounding layout, then slides into view on :focus. Works with zero JavaScript - pure CSS + the browser's own fragment-focus behavior on #main-content (tabindex="-1" there makes a non- interactive landmark programmatically focusable without joining the normal tab sequence). */ .skip-link { position: absolute; top: -60px; left: 12px; z-index: 1000; background: var(--brand); color: var(--on-fill); font-weight: 700; padding: 0.85rem 1.4rem; border-radius: var(--radius-sm); text-decoration: none; transition: top var(--motion-fast) ease; } .skip-link:focus { top: 12px; outline: 2px solid var(--pvura-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* Breadcrumbs (UX Phase 3C, P3) - quiet, tertiary orientation for genuinely nested/detail pages only (not every screen - most routes never pass `breadcrumbs` at all, so this renders nothing for them). Deliberately not a card/bar with a background - a single small, muted text line reads as "you are here", not a second nav. */ .breadcrumb-bar { margin-bottom: 16px; } .breadcrumb-bar ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; } .breadcrumb-bar li { display: flex; align-items: center; gap: 6px; min-width: 0; } .breadcrumb-bar a { color: var(--text-secondary); text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumb-bar a:hover { color: var(--text-primary); text-decoration: underline; } .breadcrumb-bar span[aria-current] { color: var(--text-primary); font-weight: 600; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumb-bar .breadcrumb-sep { color: var(--text-tertiary); } @media (max-width: 480px) { .breadcrumb-bar a { max-width: 120px; } .breadcrumb-bar span[aria-current] { max-width: 160px; } } .container { width: min(1320px, calc(100% - 32px)); margin: 0 auto; } /* ---------- App shell: sidebar (desktop) + main area ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { display: none; flex-direction: column; width: var(--sidebar-width); flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px; color: var(--pvura-text); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; border-bottom: 1px solid var(--sidebar-border); } .sidebar-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; } .sidebar-nav-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sidebar-text); opacity: 0.6; padding: 18px 12px 8px; } .sidebar-nav-label:first-child { padding-top: 4px; } /* Sized up (2026-09) - removing the account-action links that used to sit in a separate sidebar-footer (now consolidated into the user-chip dropdown, top right) freed real vertical room here. */ .sidebar-link { display: flex; align-items: center; gap: 14px; padding: 0.8rem 0.85rem; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; color: var(--sidebar-text); /* A left accent bar (inset box-shadow, not a real border) marks the current page - precise and legible, not a glow. box-shadow rather than border-left so it never shifts layout/padding when it appears. */ box-shadow: inset 2px 0 0 transparent; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; } .sidebar-link svg { flex-shrink: 0; width: 23px; height: 23px; opacity: 0.75; transition: opacity var(--motion-fast) ease; } .sidebar-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-active); } .sidebar-link:hover svg { opacity: 1; } .sidebar-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-text-active); box-shadow: inset 2px 0 0 var(--brand-text); } .sidebar-link.active svg { opacity: 1; } @media (prefers-reduced-motion: reduce) { .sidebar-link, .sidebar-link svg { transition: none; } } /* Collapsed-by-default sub-group inside a sidebar category (e.g. "Eksport" tucked under Verneutstyr) - a native
disclosure, no JS, auto-opens itself via the `open` attribute when one of its own links is the active page (see the endpoint check in the template). */ .sidebar-group summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0.8rem 0.85rem; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; color: var(--sidebar-text); cursor: pointer; list-style: none; transition: background-color 0.15s ease, color 0.15s ease; } .sidebar-group summary::-webkit-details-marker { display: none; } .sidebar-group summary:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-active); } .sidebar-group[open] > summary { color: var(--sidebar-text-active); } .sidebar-group summary .chevron { flex-shrink: 0; opacity: 0.6; transition: transform 0.15s ease; } .sidebar-group[open] > summary .chevron { transform: rotate(90deg); } .sidebar-group .sidebar-link { padding-left: 2.35rem; } @media (prefers-reduced-motion: reduce) { .sidebar-group summary, .sidebar-group summary .chevron { transition: none; } } .sidebar-link .nav-badge { margin-left: auto; } .main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .topbar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; min-height: 72px; gap: 12px 24px; padding: 12px 20px; } .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -0.01em; font-size: 1.05rem; color: var(--text-primary); } .brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: var(--brand); font-size: 1.1rem; overflow: hidden; flex-shrink: 0; } .brand-mark img { width: 100%; height: 100%; object-fit: cover; } /* pvura__ wordmark - lowercase, double underscore rendered as two separate ticks (never a literal "__" glyph run, which some fonts collapse into one continuous underscore). Mirrors marketing-site's .brand-word / Operative's Brand.tsx Wordmark 1:1. */ .brand-word { display: inline-flex; align-items: baseline; font-weight: 800; letter-spacing: -0.01em; color: var(--pvura-text); } .brand-word .us1 { color: var(--brand-text); } .brand-word .us2 { /* --pvura-orange itself fails as text on light (2.20:1) the same way --pvura-coral does - darkened inline rather than via a new --accent-text token, since this is the only place --pvura-orange is ever used as text/an outline color in this file. #b85a00 on white = 4.67:1 (AA). Dark mode is untouched (still the bright accent, which already read fine there). */ color: var(--pvura-orange); margin-left: 0.14em; } [data-theme="light"] .brand-word .us2 { color: #b85a00; } /* Horizontal line-motif signature - used sparingly (login screen only), never as generic decoration under every heading. */ .topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; } .nav-links { display: flex; align-items: center; gap: 2px; overflow-x: auto; padding: 10px 0; border-top: 1px solid var(--border); -webkit-overflow-scrolling: touch; } .nav-links a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 0.45rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.86rem; font-weight: 600; color: var(--text-secondary); transition: background-color 0.12s ease, color 0.12s ease; } .nav-links a:hover { background: var(--panel-alt); color: var(--text-primary); } .nav-links a.active { /* Multi-Sector Control Experience mission: reuses the sidebar's own already-sector-/theme-aware tokens (--sidebar-active-bg/ --sidebar-text-active) instead of the universal --brand-soft/ --brand-text, so the mobile top-nav's active tab matches the desktop sidebar's accent for the same organization - previously this was the one place the two navs visibly disagreed. Fire & Rescue's resolved values are unchanged from the pre-mission --brand-soft/--brand-text ones (same coral, same opacity). */ background: var(--sidebar-active-bg); color: var(--sidebar-text-active); /* Fire & Rescue's resolved values are visually the same coral as before (0.16 vs the prior --brand-soft's 0.14 alpha - a difference too small to read as a regression) and the same --pvura-coral text. */ } .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger-solid); color: white; font-size: 0.68rem; font-weight: 700; } .desktop-header { display: none; } /* Desktop: swap the mobile topbar/nav-links for the sidebar + a slim header */ @media (min-width: 960px) { .sidebar { display: flex; } .mobile-chrome { display: none; } .desktop-header { display: flex; align-items: center; gap: 20px; min-height: 72px; padding: 0 32px; background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 15; } .desktop-header .search-input { max-width: 360px; } /* Groups the bell with the user chip (not with search/scan) - the group as a whole is pushed to the far right, but the bell sits tight against the name/avatar instead of at the default 20px header gap (2026-09 placement fix). */ .header-user-group { display: flex; align-items: center; gap: 12px; margin-left: auto; } .user-chip { position: relative; } .user-chip summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; padding: 4px; border-radius: 12px; } .user-chip summary::-webkit-details-marker { display: none; } .user-chip summary:hover { background: var(--panel-alt); } .user-chip[open] summary { background: var(--panel-alt); } .user-chip-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .user-chip-text { line-height: 1.25; } .user-chip-name { font-weight: 700; font-size: 0.88rem; color: var(--text-primary); } .user-chip-role { font-size: 0.76rem; color: var(--text-tertiary); } .user-chip-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--panel-raised); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px; z-index: 20; display: flex; flex-direction: column; gap: 2px; } .user-chip-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; } .user-chip-menu a:hover { background: var(--panel-alt); } .user-chip-menu a .nav-badge { margin-left: auto; } /* Tilbakemelding is a JS-triggered dialog (feedback-dialog), not a link - same look as the rows above, reset from a bare