@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;600;700;900&family=Red+Hat+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   RAPID DISPATCH — Design Tokens
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --rrn-navy: #0c2448;
    --rrn-navy-mid: #0e2d56;
    --rrn-navy-light: #142f5e;
    --rrn-green: #1cc478;
    --rrn-green-dim: #0d6e42;
    --rrn-mustard: #e8b81c;
    --rrn-orange: #f0854a;
    --rrn-teal: #8fd6d9;
    --bg: #070f1d;
    --surface: #0c1628;
    --surface2: #0f1e35;
    /* Third step, for hover on something already sitting on --surface2. Several
       components reached for a --surface-3/--surface3 that was never defined, so
       their hover states silently did nothing. --text-dim clears 5.46:1 here. */
    --surface3: #14274a;
    --border: #132040;
    --border2: #1a2d55;
    --text: #a8bcd4;
    /* Was #a8bcd4, i.e. identical to --text, so "dim" produced no hierarchy at
       all. Dropped to the darkest value that still clears WCAG AA (4.5:1) on the
       deepest surface it lands on, --surface2: 6.16:1. */
    --text-dim: #8b9fb8;
    --text-bright: #e8f0f8;
    --accent: var(--rrn-green);
    --accent-dim: #0b3d2a;
    --green: var(--rrn-green);
    --green-dim: var(--rrn-green-dim);
    --amber: var(--rrn-mustard);
    --red: var(--rrn-orange);
    --red-dim: #3d1a08;
    --teal: var(--rrn-teal);
    --sans: 'Red Hat Display', sans-serif;
    --mono: 'Red Hat Mono', monospace;
    --hour-height: 52px;
    --gutter-width: 42px;

    /* ── Type scale ──────────────────────────────────────────────────────────
       These tools are dense by nature and had accumulated font sizes down to
       6px, which is unreadable on a phone and barely legible on a desktop.
       --fs-2xs is a hard floor: nothing renders text below 11px. Sizes step
       roughly 1.15x so a label and its value stay visually distinct.
       ──────────────────────────────────────────────────────────────────────── */
    --fs-2xs: 11px;   /* floor - dense mono labels, badge text, table meta */
    --fs-xs: 12px;    /* secondary/meta text                              */
    --fs-sm: 13px;    /* default UI text in dense views                   */
    --fs-base: 14px;  /* body                                             */
    --fs-md: 16px;    /* emphasis, mobile inputs (avoids iOS zoom)        */
    --fs-lg: 19px;    /* section headings                                 */
    --fs-xl: 23px;    /* page headings                                    */
    --fs-2xl: 28px;   /* display                                          */

    /* ── Target sizes ────────────────────────────────────────────────────────
       WCAG 2.2 SC 2.5.8 (AA) requires 24x24 CSS px; 44px is the touch figure
       from the platform HIGs. Applying 44px unconditionally would wreck the
       density of the desktop board and admin tables, so --tap-min is raised to
       44px only under a coarse pointer (see the accessibility layer below).
       ──────────────────────────────────────────────────────────────────────── */
    --tap-min: 24px;

    /* Focus ring. Mustard reads against both the navy chrome and light panels,
       which a green or navy ring does not. */
    --focus-ring: var(--rrn-mustard);
    --focus-halo: rgba(232, 184, 28, .28);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY BASELINE
   Applies to every app that loads this stylesheet. Kept here, immediately after
   the tokens, so it is the first thing anyone reads.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Focus indicator ──────────────────────────────────────────────────────────
   There was no global focus style, and eleven component rules set
   `outline: none` inside a plain `:focus` block, so keyboard users lost the
   indicator entirely on inputs, the HTML editor, the topbar search and the RRN
   login fields.

   The !important is deliberate, and is the reason this rule is a single line
   rather than eleven patches. A component rule like `.f-input:focus` scores
   higher than any selector that can generically match "the focused element", so
   without it the existing suppressions would keep winning — and, more to the
   point, the next `outline: none` someone adds would silently reintroduce the
   bug across all six apps. Style :focus-visible per component if you need a
   different look; do not remove the ring.

   :focus-visible rather than :focus so a click on a button does not leave a ring
   behind, which is what the suppressions were originally trying to avoid.
   ────────────────────────────────────────────────────────────────────────────*/
:focus-visible {
    outline: 3px solid var(--focus-ring) !important;
    outline-offset: 2px !important;
}

/* Inputs sit flush in dense forms, where an offset ring collides with the
   neighbouring field; tuck it inside the border instead. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: -1px !important;
}

/* ── Reduced motion ──────────────────────────────────────────────────────────
   53 transitions and 15 animations shipped with no reduced-motion path; only the
   Iris launcher honoured the preference. Motion is decoration in this UI, so it
   is removed wholesale rather than shortened. The 0.01ms (not 0) keeps
   transitionend/animationend listeners firing, so anything sequencing off them
   still completes.
   ────────────────────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Target size ─────────────────────────────────────────────────────────────
   WCAG 2.2 SC 2.5.8 wants 24x24 CSS px, which the small buttons and icon
   controls did not meet. The minimum is applied to the interactive elements
   themselves; inline links in prose are exempt under the same SC.
   ────────────────────────────────────────────────────────────────────────────*/
button,
[role="button"],
input[type="button"],
input[type="submit"],
select {
    min-height: var(--tap-min);
    min-width: var(--tap-min);
}

/* Checkboxes and radios are deliberately excluded above: min-height on them
   inflates the control itself rather than its hit area, so a 44px tick box ends
   up dominating the row it sits in. Nudged up to a comfortably hittable size
   instead, and their labels should wrap them so the text is part of the target. */
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
}

/* On touch, raise the floor to the platform 44px figure and stop iOS zooming
   the page when a sub-16px field is focused. Desktop keeps its density: this
   whole block is inert under a fine pointer. */
@media (pointer: coarse) {
    :root {
        --tap-min: 44px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: max(var(--fs-md), 1em);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   Applied via [data-theme="light"] on <html>
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --bg:         #eef2f8;
    --surface:    #ffffff;
    --surface2:   #f3f7fc;
    --surface3:   #e9f0f9;
    --border:     #d8e2ee;
    --border2:    #c2d0e2;
    --text:       #4a6080;
    /* Was #7a90aa, which is only 2.92:1 on --bg and 3.28:1 on white: a WCAG AA
       failure repeated across roughly 150 declarations. #586e85 is the lightest
       value clearing 4.5:1 on all three light surfaces (worst case 4.69:1). */
    --text-dim:   #586e85;
    --text-bright: #0c2448;
    --accent-dim: #d0f5e6;
    --red-dim:    #fde8df;
    --red:        #c94518;
    --amber:      #b8920e;
    --green-dim:  #d0f5e6;
    --rrn-green-dim: #12a063;  /* darken dim green so it reads on white */
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — Component overrides for hardcoded dark colours
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
[data-theme="light"] .btn-ok {
    border-color: rgba(21,128,61,.45);
}
[data-theme="light"] .btn-ok:hover:not(:disabled) {
    background: #15803d;
    color: #fff;
}
[data-theme="light"] .btn-danger {
    border-color: rgba(185,28,28,.45);
}
[data-theme="light"] .btn-danger:hover:not(:disabled) {
    background: #b91c1c;
    color: #fff;
}

/* ── err-box ── */
[data-theme="light"] .err-box {
    border-color: rgba(185,28,28,.35);
}

[data-theme="light"] .ok-box {
    border-color: rgba(11,128,76,.35);
}

/* ── Modal backdrop: lighter fog ── */
[data-theme="light"] .modal-backdrop {
    background: rgba(10,20,50,.45);
}

/* ── Global search dropdown shadow ── */
[data-theme="light"] .global-search-results {
    box-shadow: 0 8px 28px rgba(0,0,40,.12);
}

/* ── User menu shadow ── */
[data-theme="light"] .user-menu {
    box-shadow: 0 8px 24px rgba(0,0,40,.14);
}

/* ── Admin: active tab count badge ── */
[data-theme="light"] .admin-tab.active .admin-tab-count {
    background: rgba(28,196,120,.12);
    border-color: rgba(28,196,120,.25);
}

[data-theme="light"] .admin-section .admin-tab.active {
    background: rgba(28,196,120,.1);
    border-color: rgba(28,196,120,.25);
}

[data-theme="light"] .admin-section .admin-tab.active .admin-tab-count {
    background: rgba(28,196,120,.15);
    border-color: rgba(28,196,120,.25);
}

/* ── Role capability picker ── */
[data-theme="light"] .role-capability-intro {
    background: linear-gradient(180deg, #ffffff, #f6f9fd);
    border-color: var(--border);
    box-shadow: 0 6px 18px rgba(12,36,72,.05);
}

[data-theme="light"] .role-capability-summary-pill {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="light"] .role-capability-summary-pill strong {
    color: var(--text-bright);
}

[data-theme="light"] .role-capability-summary-pill--active {
    background: rgba(28,196,120,.12);
    border-color: rgba(28,196,120,.25);
}

[data-theme="light"] .role-capability-app {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 4px 14px rgba(12,36,72,.04);
}

[data-theme="light"] .role-capability-app--platform {
    border-color: rgba(12,36,72,.14);
    box-shadow: inset 0 0 0 1px rgba(12,36,72,.04), 0 4px 14px rgba(12,36,72,.04);
}

[data-theme="light"] .role-capability-app-head {
    background: var(--surface2);
    border-bottom-color: var(--border);
}

[data-theme="light"] .role-capability-app-kicker {
    color: var(--rrn-green-dim);
}

[data-theme="light"] .role-capability-item {
    background: #fbfdff;
    border-color: var(--border);
}

[data-theme="light"] .role-capability-item:hover {
    background: var(--surface2);
    border-color: var(--border2);
}

[data-theme="light"] .role-capability-item--selected {
    background: rgba(28,196,120,.10);
    border-color: rgba(28,196,120,.28);
}

[data-theme="light"] .role-capability-state {
    color: #0c2448;
}

[data-theme="light"] .role-capability-state--muted {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text-dim);
}

[data-theme="light"] .role-capability-internal-badge,
[data-theme="light"] .role-tenant-warning {
    border-color: rgba(180,120,10,.4);
    background: rgba(217,164,64,.14);
    color: #92600a;
}

/* ── Conflict banner ── */
[data-theme="light"] .conflict-banner {
    background: rgba(234,88,12,.08);
    border-bottom-color: rgba(234,88,12,.2);
    color: #c2410c;
}
[data-theme="light"] .conflict-row {
    border-bottom-color: var(--border);
}

/* ── Availability calendar ── */
[data-theme="light"] .avail-cal-day:hover {
    background: var(--surface2);
}
[data-theme="light"] .avail-cal-day.weekend {
    background: #e9eef6;
}
[data-theme="light"] .avail-cal-day.bank-hol {
    background: #ede9fe;
}
[data-theme="light"] .avail-cal-bk {
    color: #5b21b6;
    background: rgba(91,33,182,.09);
    border-left-color: #7c3aed;
}

/* ── Leaflet tile tinting ── */
/* Applied only when the dark layer is active (.rrn-tiles-dark set in JS) */
.rrn-tiles-dark .leaflet-tile-pane,
#login-map .leaflet-tile-pane {
    filter: sepia(0.6) hue-rotate(190deg) saturate(2.2) brightness(0.78);
}

[data-theme="light"] .leaflet-control-attribution {
    background: rgba(240,244,248,.92) !important;
    color: var(--text-dim) !important;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

.app-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Content region below the nav. This MUST live in the shared (global) sheet:
   .app-content is rendered by <RrnAppShell>, so a per-app scoped
   MainLayout.razor.css rule never matches it (the scope id belongs to the
   layout, not the shell component) and silently does nothing.

   A flex column that fills the remaining viewport lets full-height workspace
   pages (the Dispatch board, the jobs queue) use `flex: 1; min-height: 0` to
   fill and own their internal scroll, while `overflow-y: auto` lets ordinary
   flow pages (admin, reports, lists) — which keep their default
   `min-height: auto` and never shrink below their content — scroll here. */
.app-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Reserve the scrollbar gutter at all times so the centred page column does
       not shift sideways when a page goes from "no scrollbar" (still loading) to
       "has scrollbar" (content rendered). Stops the horizontal jump on load. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
}

/* Non-production pages render EnvironmentBanner above the app shell. Keep the
   app shell inside the visible viewport rather than letting its bottom be
   clipped by body { overflow:hidden; }. */
.env-banner + .app-shell {
    height: calc(100vh - 28px);
    height: calc(100dvh - 28px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL TOPBAR
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar {
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.topbar-brand {
    padding: 0 20px;
    border-right: 1px solid var(--border);
    height: 100%;
    display: flex;
    align-items: center;
}

.brand-wordmark {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-bright);
    white-space: nowrap;
}

    .brand-wordmark span {
        color: var(--rrn-green);
    }

/* App switcher (brand trigger + popover) */
.app-switcher {
    position: relative;
}

.app-switcher-trigger {
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0 18px 0 0;
}

.app-switcher-trigger:hover .brand-wordmark {
    color: var(--accent);
}

.app-switcher-caret {
    font-size: var(--fs-2xs);
    color: var(--text-dim);
    transition: transform .2s ease, color .2s ease;
}

.app-switcher-caret.open {
    transform: rotate(180deg);
    color: var(--accent);
}

.app-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 10px;
    min-width: 300px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 12px;
    overflow: hidden;
    z-index: 1200;
    box-shadow: 0 18px 42px rgba(0,0,0,.46);
}

.app-switcher-menu--pop {
    animation: app-switcher-pop .22s cubic-bezier(.22,.84,.29,1.15) both;
}

@keyframes app-switcher-pop {
    from { opacity: 0; transform: translateY(-6px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.app-switcher-title {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
}

.app-switcher-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.02);
    transition: background .15s ease, transform .15s ease;
}

.app-switcher-item:hover {
    background: var(--surface2);
    transform: translateX(2px);
}

.app-switcher-item--active {
    background: rgba(0, 255, 140, 0.06);
}

.app-switcher-item--current {
    background: rgba(255,255,255,0.02);
    color: var(--text-dim);
    cursor: default;
    opacity: .72;
}

.app-switcher-item--current:hover {
    background: rgba(255,255,255,0.02);
    transform: none;
}

.app-switcher-item--accent {
    border-left: 2px solid var(--accent);
}

.app-switcher-item--button {
    width: 100%;
    border: none;
    text-align: left;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.app-switcher-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface2);
    font-size: 14px;
    flex-shrink: 0;
}

.app-switcher-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.app-switcher-text strong {
    font-size: 13px;
    color: var(--text-bright);
}

.app-switcher-text small {
    font-size: 11px;
    color: var(--text-dim);
}

/* Environment banner (non-prod UI) */
.env-banner {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

.env-banner-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.env-banner-right {
    color: var(--text-dim);
    opacity: .9;
}

.env-pill {
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid transparent;
}

.env-app-name {
    opacity: .9;
}

.env-meta {
    font-size: var(--fs-2xs);
}

.env-banner--staging {
    background: rgba(59,130,246,.12);
    color: #bfdbfe;
}

.env-banner--staging .env-pill {
    background: rgba(59,130,246,.32);
    border-color: rgba(59,130,246,.6);
    color: #eff6ff;
}

.env-banner--local {
    background: rgba(28,196,120,.16);
    color: #bbf7d0;
}

.env-banner--local .env-pill {
    background: rgba(28,196,120,.38);
    border-color: rgba(28,196,120,.7);
    color: #ecfdf5;
}

[data-theme="light"] .env-banner--staging {
    background: rgba(59,130,246,.08);
    color: #1d4ed8;
}

[data-theme="light"] .env-banner--staging .env-pill {
    background: rgba(59,130,246,.14);
    border-color: rgba(59,130,246,.4);
    color: #1d4ed8;
}

[data-theme="light"] .env-banner--local {
    background: rgba(22,163,74,.06);
    color: #166534;
}

[data-theme="light"] .env-banner--local .env-pill {
    background: rgba(34,197,94,.14);
    border-color: rgba(34,197,94,.4);
    color: #166534;
}

.app-switcher-current-tag {
    margin-top: 2px;
    font-family: var(--mono);
    font-size: var(--fs-2xs) !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim) !important;
}

.topbar-nav {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.topbar-nav-extra {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.nav-item {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
    padding: 0 18px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    border-right: 1px solid var(--border);
    transition: color .15s, background .15s;
    white-space: nowrap;
}

    .nav-item:hover {
        color: var(--text-bright);
        background: var(--surface2);
    }

    .nav-item.active {
        color: var(--accent);
        background: var(--accent-dim);
        border-bottom: 2px solid var(--accent);
    }

.nav-badge {
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 8px;
}

.topbar-spacer {
    flex: 1;
}

/* Theme toggle button */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border2);
    border-radius: 6px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
    margin-right: 10px;
    flex-shrink: 0;
}

    .theme-toggle-btn:hover {
        color: var(--text-bright);
        background: var(--surface2);
        border-color: var(--accent);
    }

/* User chip */
.topbar-user {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-left: 1px solid var(--border);
    height: 100%;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 5px 8px;
    border-radius: 6px;
    transition: background .15s;
}

    .user-chip:hover, .user-chip.open {
        background: var(--surface2);
    }

.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--mono);
}

.user-chip-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
}

.user-chip-caret {
    color: var(--text-dim);
    font-size: var(--fs-2xs);
}

.user-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px;
    min-width: 210px;
    z-index: 1000;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.user-menu-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .user-menu-header strong {
        color: var(--text-bright);
        font-size: 13px;
    }

    .user-menu-header span {
        color: var(--text-dim);
        font-size: 12px;
    }

.user-menu-role {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent) !important;
}

.user-menu-item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
    font-family: var(--sans);
}

    .user-menu-item:hover {
        background: var(--surface2);
        color: var(--text-bright);
    }

.user-menu-logout {
    color: var(--red);
}

    .user-menu-logout:hover {
        background: var(--red-dim) !important;
        color: var(--red) !important;
    }

.user-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTEXTUAL SUB-BAR  (each page renders its own controls here)
   ═══════════════════════════════════════════════════════════════════════════ */
.sub-bar {
    display: flex;
    align-items: center;
    height: 40px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    padding: 0 4px;
    gap: 2px;
}

.sub-bar-spacer {
    flex: 1;
}

/* Date navigator */
.sub-bar-date {
    display: flex;
    align-items: center;
    height: 100%;
}

.sub-bar-nav {
    width: 32px;
    height: 100%;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 16px;
    font-family: var(--mono);
    transition: color .15s, background .15s;
}

    .sub-bar-nav:hover {
        color: var(--text-bright);
        background: var(--surface);
    }

.sub-bar-date-label {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-bright);
    padding: 0 8px;
    min-width: 160px;
    text-align: center;
    white-space: nowrap;
}

.sub-bar-dow {
    color: var(--text-dim);
    margin-right: 4px;
}

.sub-bar-date-clickable {
    cursor: pointer;
    border-bottom: 1px dashed var(--text-dim);
}
.sub-bar-date-clickable:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.sub-bar-date-input {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-bright);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 2px 6px;
    outline: none;
    width: 140px;
}

/* View toggle */
.sub-bar-views {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 4px;
}

.sub-view-btn {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    padding: 0 14px;
    height: 100%;
    cursor: pointer;
    transition: color .15s;
}

    .sub-view-btn:hover {
        color: var(--text-bright);
    }

    .sub-view-btn.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

/* Status */
.sub-bar-status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    border-left: 1px solid var(--border);
    height: 100%;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 5px var(--green);
    flex-shrink: 0;
}

    .status-dot.busy {
        background: var(--amber);
        box-shadow: 0 0 5px var(--amber);
        animation: blink 1s infinite;
    }

/* Admin back link */
.sub-bar-back {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--border);
    transition: color .15s, background .15s;
}

    .sub-bar-back:hover {
        color: var(--text-bright);
        background: var(--surface);
    }

@keyframes blink {
    50% {
        opacity: .3;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 7px 14px;
    border: none;
    cursor: pointer;
    transition: background .15s, opacity .15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .btn:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

.btn-sm {
    padding: 4px 10px;
    font-size: var(--fs-2xs);
}

.btn-full {
    width: 100%;
    padding: 10px;
    margin-top: 4px;
    justify-content: center;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

    .btn-primary:hover:not(:disabled) {
        filter: brightness(1.12);
    }

.btn-ghost {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border2);
}

    .btn-ghost:hover:not(:disabled) {
        background: var(--border2);
    }

    .btn-ghost.active {
        background: var(--accent-dim);
        color: var(--accent);
        border-color: var(--accent);
    }

.btn-ok {
    background: var(--green-dim);
    color: var(--green);
    border: 1px solid #166534;
}

    .btn-ok:hover:not(:disabled) {
        background: #166534;
        color: #fff;
    }

.btn-danger {
    background: var(--red-dim);
    color: var(--red);
    border: 1px solid #7f1d1d;
}

    .btn-danger:hover:not(:disabled) {
        background: #7f1d1d;
        color: #fff;
    }

.btn-pill {
    border-radius: 20px;
    padding: 8px 20px;
}

.btn-secondary {
    background: var(--surface);
    color: var(--text-bright);
    border: 1px solid var(--border2);
}

    .btn-secondary:hover:not(:disabled) {
        background: var(--surface2);
    }

.app-btn-icon {
    display: inline-flex;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */
.f-group {
    margin-bottom: 12px;
}

.f-hint {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    line-height: 1.4;
}

.f-error {
    font-size: 11px;
    color: var(--red);
    margin-top: 4px;
    line-height: 1.4;
}

.f-label {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}

.f-required {
    color: var(--accent);
    margin-left: 4px;
}

.f-input, .f-select, .f-textarea {
    font-family: var(--sans);
    font-size: 13px;
    background: var(--bg);
    border: 1px solid var(--border2);
    color: var(--text-bright);
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    -webkit-appearance: none;
    color-scheme: dark;
}

[data-theme="light"] .f-input,
[data-theme="light"] .f-select,
[data-theme="light"] .f-textarea {
    color-scheme: light;
}

.f-textarea {
    resize: vertical;
    min-height: 60px;
}

.f-input::placeholder {
    color: var(--text-dim);
}

.f-input:focus, .f-select:focus, .f-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

.f-input:disabled, .f-select:disabled, .f-textarea:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.f-row {
    display: flex;
    gap: 10px;
}

    .f-row .f-group {
        flex: 1;
    }

/* ── Shared UK vehicle registration field ───────────────────────────────────── */
.uk-plate {
    flex-shrink: 0;
    display: inline-flex;
    align-items: stretch;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid #1a1a1a;
    cursor: default;
    height: 36px;
    min-width: 90px;
    background: #f7d117;
}

.uk-plate--typing {
    border-style: dashed;
    cursor: text;
}

.uk-plate--disabled {
    opacity: .65;
    cursor: inherit;
}

.uk-plate--compact {
    height: 24px;
    min-width: 70px;
    border-width: 1px;
    border-radius: 4px;
    vertical-align: middle;
}

.uk-plate--compact .uk-plate-strip {
    width: 17px;
    font-size: var(--fs-2xs);
}

.uk-plate--compact .uk-plate-text {
    padding: 0 7px;
    font-size: 12px;
    letter-spacing: 1px;
}

.uk-plate-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    background: #003399;
    color: #fff;
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .5px;
}

.uk-plate-text {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-family: 'UKNumberPlate', 'Segoe UI', monospace;
    font-size: 16px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.uk-plate-text--placeholder {
    font-size: 12px;
    font-weight: 600;
    color: #5f5a35;
    letter-spacing: 0;
}

.uk-plate-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'UKNumberPlate', 'Segoe UI', monospace;
    font-size: 16px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: 1.5px;
    padding: 0 8px;
    width: 140px;
    min-width: 0;
}

.uk-plate-input::placeholder {
    color: #999;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-center-wrap {
    width: 480px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    animation: popIn .18s cubic-bezier(.4,0,.2,1);
    max-height: 90vh;
    overflow: hidden;
}

.modal-wide {
    width: 640px;
}

.modal-large {
    width: 880px;
    max-width: 95vw;
}

.modal {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-center {
    width: 560px;
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 10px;
    border: 1px solid var(--border2);
    animation: popIn .18s cubic-bezier(.4,0,.2,1);
}

.modal-narrow {
    width: 400px !important;
}

/* Defined after .modal-center / .modal-wide so its width wins the cascade. */
.modal-xl {
    width: 98vw !important;
    max-width: 98vw !important;
    max-height: 94vh;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-head {
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-head-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.modal-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.modal-ref {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
}

.modal-body {
    padding: 18px 20px;
    overflow-y: auto;
}

.modal-body-pad {
    padding: 20px 22px;
    overflow-y: auto;
}

.modal-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
}

.modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* ── Mobile: modals become bottom sheets ─────────────────────────────────────
   Every size variant above is a fixed pixel width centred in the viewport, which
   on a phone left the wider ones (modal-large is 880px, modal-split 920px)
   overflowing sideways, and even the ones that fitted put their controls in the
   middle of the screen where a thumb cannot reach.

   Anchoring to the bottom edge is not just cosmetic: the footer holds the primary
   action, and at the bottom it lands under the thumb rather than behind the
   keyboard. The sizing rules use !important because three of the width variants
   set !important themselves.
   ────────────────────────────────────────────────────────────────────────────*/
@media (max-width: 640px) {
    .modal-backdrop {
        align-items: flex-end;
    }

    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh;
        border-radius: 14px 14px 0 0;
        border-bottom: none;
        animation: sheetUp .22s cubic-bezier(.32, .72, 0, 1);
        /* Clears the home-area gesture bar on iOS/Android so the last action in
           the footer is not sitting underneath it. */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Roomier tap targets and a visual grab edge at the top of the sheet. */
    .modal-head {
        padding: 16px 18px 14px;
        position: relative;
    }

    .modal-head::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border2);
    }

    .modal-body-pad,
    .modal-body {
        padding: 18px;
        /* Momentum scrolling inside the sheet rather than the page behind it. */
        -webkit-overflow-scrolling: touch;
    }

    /* Stack footer actions full width: side-by-side buttons at phone widths end up
       too narrow to label properly. */
    .modal-foot {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
        padding: 14px 18px;
    }

    /* The two-up body grid has no room to be two-up. */
    .modal-2col {
        grid-template-columns: 1fr;
    }

    /* modal-split relies on a side-by-side grid that cannot survive this width. */
    .modal-split .edit-layout {
        grid-template-columns: 1fr;
    }
}

@keyframes sheetUp {
    from {
        transform: translateY(6%);
        opacity: .6;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 4px 0 14px;
}

.modal-section-divider {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 16px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* ── Split modal (two-column edit layout) ── */
.modal-split {
    width: 920px;
}

.modal-split .modal-body-pad {
    padding: 0;
    overflow: hidden;
    flex: 1;
    display: flex;
    min-height: 0;
}

.edit-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    height: min(calc(90vh - 120px), 600px);
}

.edit-form-col,
.edit-history-col {
    overflow-y: auto;
    padding: 20px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
    display: flex;
    flex-direction: column;
}

.edit-form-col {
    border-right: 1px solid var(--border);
}

/* Notes field stretches to fill remaining form column space */
.edit-notes-grow {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 60px;
}

.edit-notes-grow .f-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.edit-notes-fill {
    flex: 1;
    resize: none;
}

/* ── Edit Right Panel (CRM Notes + History tabs) ──────────────────────── */

.erp-no-scroll { overflow: hidden !important; }

.erp-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
}

.erp-tab {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.erp-tab:hover { color: var(--text); }
.erp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.erp-tab-count {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    background: var(--surface2);
    padding: 1px 5px;
    border-radius: 6px;
}

.erp-tab.active .erp-tab-count { background: rgba(56, 189, 248, .15); }

.erp-notes-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.erp-notes-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    min-height: 0;
    scrollbar-width: thin;
}

.erp-empty {
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
    padding: 24px 0;
    text-align: center;
}

.erp-entry {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.erp-entry:last-child { border-bottom: none; }

.erp-entry-hdr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3px;
}

.erp-author {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-bright);
}

.erp-time {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    color: var(--text-dim);
}

.erp-body {
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.erp-add-note {
    flex-shrink: 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--border);
}

.erp-note-input {
    width: 100%;
    resize: none;
    min-height: 48px;
    font-size: 12px;
}

.erp-add-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.erp-followup {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 8px;
    background: var(--surface2);
    border-radius: 6px;
    border: 1px dashed var(--border);
}
.erp-followup-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-dim);
    white-space: nowrap;
}
.erp-followup-input {
    flex: 1;
    min-width: 0;
    padding: 4px 8px !important;
    font-size: 12px !important;
}
.erp-followup-changed {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.erp-error {
    font-size: 11px;
    color: var(--red, #e04b4b);
    flex: 1;
}

/* ── CRM Details panel (loading state) ──────────────────────────────── */

.crm-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 0;
    font-size: 12px;
    color: var(--text-dim);
}

/* ── Order Lines Panel ──────────────────────────────────────────────── */

.order-lines-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
}

.ol-section { margin-bottom: 16px; }
.ol-section:last-child { margin-bottom: 0; }

.ol-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.ol-section-header-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ol-section-totals {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--accent);
    text-align: right;
    line-height: 1.35;
    max-width: 55%;
}

.ol-section-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-2xs);
    flex-shrink: 0;
}

.ol-icon-parts  { background: rgba(56, 189, 248, .12); color: #38bdf8; }
.ol-icon-parts::before  { content: "P"; font-weight: 700; }
.ol-icon-labour { background: rgba(168, 85, 247, .12); color: #a855f7; }
.ol-icon-labour::before { content: "L"; font-weight: 700; }

.ol-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-bright);
}

.ol-section-count {
    font-size: var(--fs-2xs);
    font-weight: 600;
    background: rgba(255,255,255,.06);
    color: var(--text-dim);
    padding: 1px 6px;
    border-radius: 8px;
}

.ol-cards { display: flex; flex-direction: column; gap: 6px; }

.ol-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color .15s;
}
.ol-card:hover { border-color: var(--border2); }

.ol-card-labour { border-left: 2px solid rgba(168, 85, 247, .35); }

.ol-card-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ol-desc {
    font-size: 12px;
    color: var(--text-bright);
    font-weight: 500;
    flex: 1;
    line-height: 1.4;
}

.ol-part-no {
    font-size: var(--fs-2xs);
    font-family: var(--mono);
    color: var(--text-dim);
    background: rgba(255,255,255,.04);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.ol-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.ol-chip {
    font-size: var(--fs-2xs);
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255,255,255,.05);
    color: var(--text-dim);
}

.ol-chip-dmg {
    background: rgba(239, 68, 68, .1);
    color: #f87171;
}

.ol-card-money {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.ol-money {
    font-size: 11px;
    color: var(--text-dim);
}
.ol-money strong {
    color: var(--text-bright);
    font-weight: 600;
}

.ol-card-details {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 6px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Before Photos Panel ────────────────────────────────────────────── */

.bp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    padding: 10px 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.bp-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .15s, transform .15s;
}
.bp-thumb:hover { border-color: var(--accent); transform: scale(1.03); }
.bp-thumb--active { border-color: var(--accent); }

.bp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bp-thumb-num {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    background: rgba(0,0,0,.65);
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
}

.bp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.bp-lightbox-inner {
    position: relative;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bp-caption {
    width: 100%;
    max-width: 88vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 8px 14px;
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    color: #fff;
    backdrop-filter: blur(8px);
}

.bp-caption-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}

.bp-caption-counter {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 12px;
    color: rgba(255,255,255,.65);
    flex-shrink: 0;
}

.bp-img-viewport {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 88vw;
    max-height: 75vh;
    border-radius: 8px;
    background: rgba(0,0,0,.4);
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.bp-grab { cursor: grab; }
.bp-grabbing { cursor: grabbing; }

.bp-img-viewport img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    transition: transform .15s ease;
    transform-origin: center center;
    pointer-events: none;
}

.bp-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 5px 10px;
    backdrop-filter: blur(8px);
}

.bp-nav {
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    font-size: 22px;
    padding: 4px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    line-height: 1;
}
.bp-nav:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.bp-nav:disabled { opacity: .3; cursor: default; }

.bp-tool {
    background: rgba(255,255,255,.08);
    border: none;
    color: rgba(255,255,255,.85);
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
    font-weight: 600;
    min-width: 32px;
    text-align: center;
}
.bp-tool:hover { background: rgba(255,255,255,.18); color: #fff; }

.bp-separator {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,.15);
    margin: 0 2px;
}

.bp-counter {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    font-weight: 500;
    padding: 0 6px;
    white-space: nowrap;
}

.bp-close {
    position: absolute;
    top: -8px;
    right: -8px;
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    font-size: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}
.bp-close:hover { background: rgba(255,255,255,.25); }

/* ── Lightbox: fullscreen variant (mobile-first customer flow) ──────────── */
.bp-lightbox--fullscreen {
    background: rgba(0, 0, 0, .94);
    align-items: stretch;
    justify-content: stretch;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.bp-lightbox-inner--fullscreen {
    max-width: none;
    max-height: none;
    flex: 1;
    width: 100%;
    height: 100%;
    align-items: stretch;
}

.bp-img-viewport--fullscreen {
    flex: 1;
    max-width: none;
    max-height: none;
    width: 100%;
    padding: 12px;
    background: transparent;
    border-radius: 0;
    position: relative;
    /* The viewer owns every gesture here: the browser must not take the pinch
       for its own page zoom, or panning a zoomed photo for a page scroll. */
    touch-action: none;
}

/* A live pinch or drag has to track the finger, so the easing that smooths
   button-driven zoom is dropped while a gesture is running. */
.bp-gesturing img {
    transition: none !important;
}

.bp-img-viewport--fullscreen img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
}

.bp-edge-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.bp-edge-nav:hover { background: rgba(255, 255, 255, .22); }
.bp-edge-nav:active { transform: translateY(-50%) scale(.94); }
.bp-edge-nav--prev { left: 12px; }
.bp-edge-nav--next { right: 12px; }

.bp-footer {
    flex-shrink: 0;
    padding: 12px 16px 16px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
}

.bp-footer-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bp-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.bp-zoomgroup {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: auto;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
}

.bp-zoombtn {
    min-width: 40px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}

.bp-zoombtn--level {
    min-width: 54px;
    font-size: 12px;
    font-weight: 600;
}

.bp-zoombtn:hover:not(:disabled) {
    background: rgba(255, 255, 255, .18);
}

.bp-zoombtn:disabled {
    opacity: .38;
    cursor: default;
}

.bp-close--inline {
    position: static;
    width: auto;
    height: 44px;
    padding: 0 16px 0 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, transform .1s;
}

.bp-close--inline:hover { background: rgba(255, 255, 255, .18); }
.bp-close--inline:active { transform: scale(.96); }

/* ── Lightbox responsive (mobile + landscape) ───────────────────────────── */
@media (max-width: 600px) {
    .bp-lightbox-inner:not(.bp-lightbox-inner--fullscreen) { max-width: 100vw; max-height: 100vh; padding: 0 8px; }
    /* A phone has no room to spare: the photo takes what the caption and
       toolbar do not, rather than sitting in a small box on a black screen. */
    .bp-img-viewport:not(.bp-img-viewport--fullscreen)     { max-width: calc(100vw - 16px); max-height: 72vh; }
    .bp-img-viewport:not(.bp-img-viewport--fullscreen) img { max-height: 72vh; }
    .bp-caption        { max-width: calc(100vw - 16px); padding: 7px 12px; margin-bottom: 8px; }
    .bp-caption-title  { font-size: 13px; }
    .bp-caption-counter { font-size: 11px; }
    .bp-toolbar        { gap: 4px; padding: 4px 6px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
    .bp-tool           { font-size: 13px; padding: 5px 8px; min-width: 30px; }
    .bp-nav            { font-size: 20px; padding: 4px 10px; }
    .bp-counter        { font-size: 11px; padding: 0 4px; }
    .bp-close:not(.bp-close--inline) { top: 4px; right: 4px; width: 36px; height: 36px; }

    .bp-edge-nav         { width: 40px; height: 40px; }
    .bp-edge-nav--prev   { left: 8px; }
    .bp-edge-nav--next   { right: 8px; }
    .bp-img-viewport--fullscreen { padding: 8px; }
    .bp-close--inline    { height: 40px; font-size: 12px; padding: 0 14px 0 10px; }
}

@media (orientation: landscape) and (max-height: 500px) {
    .bp-lightbox-inner:not(.bp-lightbox-inner--fullscreen) { max-height: 100vh; padding: 0 8px; }
    .bp-img-viewport:not(.bp-img-viewport--fullscreen)     { max-height: 62vh; }
    .bp-img-viewport:not(.bp-img-viewport--fullscreen) img { max-height: 62vh; }
    .bp-caption        { padding: 4px 10px; margin-bottom: 4px; }
    .bp-caption-title  { font-size: 12px; }
    .bp-toolbar        { margin-top: 4px; padding: 3px 6px; }
    .bp-close:not(.bp-close--inline) { top: 4px; right: 4px; width: 30px; height: 30px; font-size: 18px; }

    .bp-img-viewport--fullscreen { padding: 8px 64px 8px; }
    .bp-footer         { padding: 8px 12px 10px; gap: 6px; }
    .bp-close--inline  { height: 36px; font-size: 11px; padding: 0 12px 0 9px; }
}

@media (max-width: 768px) {
    .modal-split {
        width: 95vw;
    }

    .modal-split .modal-body-pad {
        overflow-y: auto;
        display: block;
    }

    .edit-layout {
        display: block;
        height: auto;
    }

    .edit-form-col {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .edit-history-col {
        max-height: 300px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.mono {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
}

.dim {
    color: var(--text-dim);
}

.mt-sm {
    margin-top: 12px;
}

.err-box {
    background: var(--red-dim);
    border: 1px solid #7f1d1d;
    border-radius: 6px;
    padding: 10px 13px;
    font-size: 12px;
    color: var(--red);
    margin-bottom: 12px;
}

.ok-box {
    background: var(--green-dim);
    border: 1px solid rgba(28,196,120,.4);
    border-radius: 6px;
    padding: 10px 13px;
    font-size: 12px;
    color: var(--green);
    margin-bottom: 12px;
}

.spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid var(--border2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .6s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.empty-state {
    text-align: center;
    padding: 28px 14px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
}

    .empty-state span {
        display: block;
        font-size: 26px;
        margin-bottom: 8px;
    }

/* ── Status pills (shared across apps) ──────────────────────────────────── */

.job-status {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid;
    white-space: nowrap;
}

.status-amber  { background: rgba(232,184,28,.12); color: var(--rrn-mustard); border-color: rgba(232,184,28,.3); }
.status-blue   { background: rgba(59,130,246,.12);  color: #60a5fa;           border-color: rgba(59,130,246,.3); }
.status-orange { background: rgba(240,133,74,.12);  color: var(--rrn-orange); border-color: rgba(240,133,74,.3); }
.status-green  { background: rgba(28,196,120,.12);  color: var(--rrn-green);  border-color: rgba(28,196,120,.3); }
.status-red    { background: rgba(248,81,73,.12);   color: #f85149;           border-color: rgba(248,81,73,.3); }
.status-dim    { background: rgba(107,114,128,.1);   color: #6b7280;           border-color: rgba(107,114,128,.3); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN PAGE — split layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer split */
.login-split {
    display: flex;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--bg);
}

/* ── Left panel: animated map ── */
.login-panel-left {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #070f1d;           /* dark bg while map tiles load */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.login-panel-topbar {
    position: absolute;
    top: 1.5rem;
    left: 1.75rem;
    z-index: 560;
}

.login-app-switcher__trigger {
    height: auto;
    padding: 0.55rem 0.8rem 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(7, 15, 29, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
}

.login-app-switcher--static {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    height: auto;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(7, 15, 29, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
}

.login-app-switcher__label {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(168, 188, 212, 0.62);
}

.login-app-switcher__menu {
    left: 0;
    top: calc(100% + 10px);
}

.login-app-switcher__item {
    width: 100%;
    border: none;
    text-align: left;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.login-app-switcher__backdrop {
    position: fixed;
    inset: 0;
    z-index: 540;
    background: transparent;
}

    /* Map fills the panel */
    .login-panel-left #login-map {
        position: absolute;
        inset: 0;
    }

    /* Leaflet container resets for decorative use */
    .login-panel-left .leaflet-container {
        background: #070f1d;   /* dark bg while tiles load */
        cursor: default !important;
    }

    /* Canvas overlay handles the bottom fade — no ::after needed */

.login-panel-content {
    position: relative;
    z-index: 500;   /* above canvas overlay (z-index 450) */
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.login-panel-brand .brand-wordmark {
    font-size: 15px;
    letter-spacing: 4px;
    color: #ffffff;
    text-shadow: 0 0 24px rgba(255,255,255,0.25);
}

.login-panel-brand .brand-wordmark span {
    color: var(--rrn-green);
    text-shadow: 0 0 20px rgba(16,185,129,0.4);
}

.login-panel-tagline {
    margin-top: .6rem;
    color: rgba(168, 188, 212, 0.65);
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: .03em;
}

/* Stats row */
.login-panel-stats {
    display: flex;
    align-items: center;
    gap: 0;
}

.lps-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 1.5rem;
}

.lps-val {
    font-family: var(--mono);
    font-size: .8rem;
    font-weight: 600;
    color: var(--rrn-green);
    letter-spacing: .08em;
}

.lps-label {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    color: rgba(168, 188, 212, 0.45);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lps-divider {
    width: 1px;
    height: 28px;
    background: rgba(19, 32, 64, 0.8);
    margin-right: 1.5rem;
    flex-shrink: 0;
}

/* ── Right panel: form ── */
.login-panel-right {
    width: 420px;
    flex-shrink: 0;
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
}

/* ── Form wrapper ── */
.login-form-wrap {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Transient screen shown while a mobile Microsoft redirect sign-in is finishing
   on /authentication/login-callback. */
.sso-callback {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sso-callback__status {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--text-dim);
    font-size: .9rem;
}

.sso-callback__status .spinner {
    width: 16px;
    height: 16px;
}

.sso-callback__error {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    color: var(--text-bright);
    font-size: .9rem;
}

.sso-callback__link {
    color: var(--accent);
    font-size: .9rem;
    text-decoration: none;
}

.sso-callback__link:hover {
    text-decoration: underline;
}

.login-form-header {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .5rem;
}

.login-form-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .25rem;
}

.login-form-title {
    color: var(--text-bright);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.login-form-sub {
    color: var(--text-dim);
    font-size: .85rem;
}

.login-footer {
    text-align: center;
    color: var(--text-dim);
    font-size: .75rem;
    font-family: var(--mono);
    opacity: .55;
    margin-top: .5rem;
}

/* ── Shared form elements ── */
.login-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

    .login-field label {
        color: var(--text-dim);
        font-family: var(--mono);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .login-field input {
        background: var(--bg);
        border: 1px solid var(--border2);
        border-radius: 7px;
        color: var(--text-bright);
        padding: .65rem .85rem;
        font-size: .9rem;
        outline: none;
        transition: border-color .15s, box-shadow .15s;
        font-family: var(--sans);
        width: 100%;
    }

        .login-field input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(28, 196, 120, 0.12);
        }

/* ── Password reveal ─────────────────────────────────────────────────────────
   The field keeps its own border and focus ring; the button is layered inside the
   right-hand padding, and the input gets extra padding so long values never run
   underneath it.
   ────────────────────────────────────────────────────────────────────────────*/
.login-password {
    position: relative;
    display: flex;
}

    .login-password input {
        padding-right: 3rem;
    }

.login-password__reveal {
    position: absolute;
    top: 50%;
    right: .4rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
}

    .login-password__reveal:hover:not(:disabled) {
        color: var(--text-bright);
        background: var(--surface2);
    }

    .login-password__reveal:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

/* The fields used to be direct children of .login-form-wrap and inherited its flex
   gap. Now that they are wrapped in a real <form>, the form is a single flex item,
   so it has to reproduce that spacing for its own children. */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* A tertiary action styled as a link, for switching between the authenticator and
   recovery-code paths without competing with Continue. */
.login-btn--link {
    background: none;
    border: none;
    color: var(--accent);
    padding: .5rem;
    font-size: .82rem;
    text-decoration: underline;
}

    .login-btn--link:hover:not(:disabled) {
        filter: brightness(1.15);
    }

/* Sits inside the password field group so it reads as part of it. */
.login-forgot {
    align-self: flex-end;
    color: var(--accent);
    font-size: .8rem;
    text-decoration: none;
}

    .login-forgot:hover {
        text-decoration: underline;
    }

/* Standalone action links, not links inside a sentence: at their natural line
   height these are a 14px-tall target, which is a miss as often as a hit with a
   thumb. The negative inline margin keeps the text visually flush with the field
   edge above it, so the larger hit area costs nothing in layout. */
.login-forgot,
.login-links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding-inline: .35rem;
    margin-inline: -.35rem;
}

.login-btn {
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 7px;
    padding: .75rem;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s;
    margin-top: .35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    letter-spacing: .02em;
}

    .login-btn:hover:not(:disabled) {
        filter: brightness(1.08);
    }

    .login-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.login-btn-sso {
    background: var(--surface2);
    color: var(--text-bright);
    border: 1px solid var(--border);
}

    .login-btn-sso:hover:not(:disabled) {
        filter: none;
        background: var(--surface3);
    }

.login-google-host {
    display: flex;
    justify-content: center;
    margin-top: .5rem;
    min-height: 40px;
}

.rrn-theme .login-google-host {
    margin-top: 12px;
}

.login-google-host > div {
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-btn-sso + .login-google-host {
    margin-top: 10px;
}

.login-btn--ghost {
    margin-top: 0.5rem;
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}

    .login-btn--ghost:hover:not(:disabled) {
        background: var(--surface2);
        color: var(--text-bright);
    }

.login-links {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .25rem;
    font-size: .82rem;
}

    .login-links a {
        color: var(--accent);
        text-decoration: none;
    }

    .login-links a:hover {
        text-decoration: underline;
    }

.platform-email-key-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.platform-email-key-current {
    font-size: 11px;
    min-width: 90px;
}

.platform-email-key-input {
    flex: 1;
    min-width: 260px;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--text-dim);
    font-size: .8rem;
    margin-top: .5rem;
}

    .login-divider::before,
    .login-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
    }

.login-error {
    background: var(--red-dim);
    border: 1px solid rgba(127, 29, 29, 0.4);
    color: var(--red);
    border-radius: 7px;
    padding: .6rem .85rem;
    font-size: .85rem;
}

/* Identifier-first: the chosen email shown on the credential step, with a "Change" link. */
.login-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--bg);
    border: 1px solid var(--border2);
    border-radius: 7px;
    padding: .55rem .6rem .55rem .85rem;
}

.login-identity-email {
    color: var(--text-bright);
    font-size: .88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.login-identity-change {
    background: none;
    border: none;
    color: var(--accent);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: .15rem .4rem;
    flex-shrink: 0;
}

    .login-identity-change:hover:not(:disabled) {
        text-decoration: underline;
    }

    .login-identity-change:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

/* ── Responsive: stack on narrow screens ── */
@media (max-width: 720px) {
    .login-panel-left {
        display: none;
    }

    .login-panel-right {
        width: 100%;
        border-left: none;
        min-height: 100vh;
    }
}

.auth-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: var(--text-dim);
    font-size: .9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN SECTIONS (shared between Admin page and any admin components)
   ═══════════════════════════════════════════════════════════════════════════ */
.admin-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: visible;
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}

/* Body wrapper for everything below the header. Gives ALL content the standard
   horizontal inset by default so nothing sits flush against the card border.
   Full-bleed components (tables, filter bars, pagers, empty states) bring their
   own 22px padding and span edge-to-edge, so they cancel this inset with a
   matching negative margin — leaving them pixel-for-pixel unchanged while ad-hoc
   content (forms, sliders, text) is correctly padded with no per-panel CSS. */
.admin-section-body {
    padding-left: 22px;
    padding-right: 22px;
}

    .admin-section-body > .admin-table,
    .admin-section-body > .data-table,
    .admin-section-body > .admin-filter-row,
    .admin-section-body > .admin-pager,
    .admin-section-body > .admin-empty,
    .admin-section-body > .report-table-card {
        margin-left: -22px;
        margin-right: -22px;
    }

.section-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.section-sub {
    font-size: 12px;
    color: var(--text);
}

.save-confirm {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    color: var(--green);
    align-self: center;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table th {
    text-align: left;
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: rgba(255,255,255,0.02);
}

.status-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.table-head {
    padding: 7px 22px;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: grid;
    gap: 12px;
}

.table-row {
    padding: 11px 22px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    transition: background .12s;
    display: grid;
    gap: 12px;
    min-width: 0;
}

    .table-row:last-child {
        border-bottom: none;
    }

    .table-row:hover {
        background: var(--surface2);
    }

/* Grid cells default to min-width:auto, so wide no-wrap content (chips, emails,
   long names) can't shrink and spills into the next column. Forcing min-width:0
   on every cell lets the column contain its content — the general fix so tables
   don't overlap regardless of what's inside them. */
.table-head > *,
.table-row > * {
    min-width: 0;
}

.jt-cols {
    grid-template-columns: 2fr 1fr 1fr 1fr 120px;
}

.eng-cols {
    grid-template-columns: 1.5fr 1fr 1.5fr 1.5fr 2fr 120px;
}

.usr-cols {
    /* Actions column is a FIXED width (not auto) so the header and every row share
       identical tracks — otherwise rows with 3 buttons (Edit/Reset MFA/Delete) grow
       that column and shift all the other columns out of alignment with single-button rows. */
    grid-template-columns: minmax(120px, 1.05fr) minmax(190px, 1.35fr) minmax(120px, .9fr) minmax(130px, 1.05fr) minmax(70px, .55fr) minmax(70px, .55fr) minmax(90px, .65fr) 240px;
    min-width: 1030px;
}

/* Customer-link messaging log columns: ▸ | Time | Template | To | Subject | Status | Provider Id */
.msg-log-cols {
    grid-template-columns: 18px 130px 130px minmax(180px, 1.2fr) minmax(200px, 2fr) 90px minmax(140px, 1fr);
    gap: 12px;
}

.msg-log-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Click-to-expand affordance on the row — mouse picks up the pointer, keyboard
 * users get focus ring via the standard table-row focus state. */
.msg-log-row {
    cursor: pointer;
}

.msg-log-row:hover {
    background: var(--surface2);
}

.msg-log-caret {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1;
    user-select: none;
    text-align: center;
}

/* Expandable detail block sits flush under its owning row. Matches the
 * .rt-log-detail-row pattern used by the RT call log further up the page —
 * no custom background, just a horizontal rule between entries so the pre
 * blocks can stand on their own. */
.msg-log-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 14px 14px;
    border-bottom: 1px solid var(--border);
}

.msg-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 12px;
    color: var(--text-dim);
}

.msg-log-kill {
    color: var(--danger, #e06c75);
    font-weight: 600;
}

.msg-log-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msg-log-block-label {
    font-size: var(--fs-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
}

/* Mirrors .rt-log-json in RapidDispatch.Web/Pages/Admin.razor.css so the two
 * log panels on the same page look consistent. Background is deliberately
 * left to inherit from the surrounding surface — a separate darker well just
 * washes out on dark mode. */
.msg-log-pre {
    margin: 0;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 360px;
    overflow: auto;
}

.msg-log-err .msg-log-pre {
    color: var(--danger, #e06c75);
    border-color: var(--danger, #e06c75);
}

/* Template editor: textarea with click-to-insert tag chips */
.tpl-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tpl-hint {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
}

.tpl-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.tpl-tag-label {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: 4px;
}

.tpl-html-label {
    margin-left: 10px;
}

.tpl-tag-chip {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    background: rgba(88, 166, 255, 0.08);
    border: 1px solid rgba(88, 166, 255, 0.3);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.tpl-tag-chip:hover {
    background: rgba(88, 166, 255, 0.18);
    border-color: var(--accent);
}

.tpl-tag-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tpl-html-chip {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border);
}

.tpl-html-chip:hover {
    background: rgba(255, 255, 255, 0.08);
}

.tpl-tag-reset {
    color: var(--text-dim);
    background: transparent;
    border-color: var(--border);
    margin-left: auto;
}

.tpl-tag-reset:hover {
    color: var(--text-bright);
    background: var(--bg);
}

.tpl-input {
    font-family: var(--mono);
    font-size: 12px;
}

.tpl-html-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
    background: var(--surface2);
}

.tpl-html-tool {
    min-width: 32px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-bright);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.tpl-html-tool:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.tpl-html-tool:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tpl-html-editor {
    min-height: 220px;
    padding: 16px;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: var(--surface);
    color: var(--text-bright);
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
}

.tpl-html-editor:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-dim);
}

.tpl-html-editor[contenteditable="False"],
.tpl-html-editor[contenteditable="false"] {
    opacity: 0.65;
    cursor: not-allowed;
}

.tpl-html-editor p,
.tpl-html-editor h2,
.tpl-html-editor ul,
.tpl-html-editor ol {
    margin-top: 0;
}

.tpl-html-editor a {
    color: var(--accent);
}

.tpl-source-wrap {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
}

.tpl-source-wrap summary {
    padding: 8px 10px;
    color: var(--text-dim);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tpl-source-input {
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0 0 6px 6px;
}

.tpl-preview {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    background: var(--bg);
}

.tpl-preview-label {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent);
    flex-shrink: 0;
}

.usr-mfa-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.usr-mfa-pill {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.usr-mfa-pill--on {
    background: rgba(28, 196, 120, 0.15);
    border-color: rgba(28, 196, 120, 0.35);
    color: var(--accent);
}

.usr-mfa-pill--req {
    background: rgba(232, 184, 28, 0.12);
    border-color: rgba(232, 184, 28, 0.35);
    color: var(--amber);
}

[data-theme="light"] .usr-mfa-pill--on {
    color: var(--rrn-green-dim);
}

.eng-name-cell {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 13px;
}

.contact-cell {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.days-cell {
    font-size: var(--fs-2xs);
    color: var(--text);
}

.skills-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.skill-badge {
    font-size: var(--fs-2xs);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid;
    font-family: var(--mono);
    font-weight: 600;
    white-space: nowrap;
    /* Truncate long values (e.g. "Activate Collision Solutions") instead of
       overflowing into the next column. Full text is available via the title attr. */
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.jt-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-bright);
    font-size: 13px;
}

.jt-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    min-width: 0;
}

.admin-filter-row {
    display: flex;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
}

.admin-filter-row .f-group {
    max-width: 280px;
    width: 100%;
}

.role-summary-cell {
    min-width: 0;
}

.admin-empty {
    padding: 22px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
}

    .admin-empty.warn {
        color: var(--amber);
    }

/* ── Pagination controls ─────────────────────────────────────────────────────── */
.admin-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 0 4px;
    font-family: var(--mono);
}

.pager-ellipsis {
    min-width: 20px;
    text-align: center;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    user-select: none;
}

.pager-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.pager-btn:hover:not(:disabled) {
    background: var(--surface3);
    color: var(--text);
}

.pager-btn.pager-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pager-btn:disabled {
    opacity: .35;
    cursor: default;
}

.pager-info {
    font-size: var(--fs-2xs);
    color: var(--text-dim);
    margin-left: 6px;
}

/* ── Infinite scroll sentinel ─────────────────────────────────────────────────── */
.scroll-sentinel {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-badge {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.role-admin {
    background: rgba(239,68,68,.12);
    color: #f87171;
    border-color: rgba(239,68,68,.3);
}

.role-scheduler {
    background: rgba(59,130,246,.12);
    color: #60a5fa;
    border-color: rgba(59,130,246,.3);
}

.role-engineer {
    background: rgba(16,185,129,.12);
    color: #34d399;
    border-color: rgba(16,185,129,.3);
}

.status-pill {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid;
}

    .status-pill.active {
        background: rgba(16,185,129,.12);
        color: #34d399;
        border-color: rgba(16,185,129,.3);
    }

    .status-pill.inactive {
        background: rgba(107,114,128,.12);
        color: #6b7280;
        border-color: rgba(107,114,128,.3);
    }

/* ── Role badge (custom role) ─────────────────────────────────────────────────── */
.role-badge.role-custom {
    background: #6366f122;
    color: #6366f1;
    border: 1px solid #6366f144;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--mono);
}

/* ── Admin tab (inline, e.g. UsersRolesSection sub-tabs) ───────────────────────── */
.admin-section .admin-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}

.admin-section .admin-tab:hover {
    color: var(--text-bright);
    background: var(--surface3);
}

.admin-section .admin-tab.active {
    color: var(--accent);
    background: rgba(59,130,246,.12);
    border-color: rgba(59,130,246,.3);
}

.admin-section .admin-tab-count {
    font-size: var(--fs-2xs);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.admin-section .admin-tab.active .admin-tab-count {
    background: rgba(59,130,246,.2);
    color: var(--accent);
    border-color: rgba(59,130,246,.4);
}

.admin-subtabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-tabbed-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 900px) {
    .admin-subtabs {
        width: 100%;
    }
}

/* ── Tabbed admin shell (Capture / Referral) ───────────────────────────────────── */
.ri-admin-shell {
    display: flex;
    flex-direction: column;
}

.ri-tab-bar {
    display: flex;
    align-items: stretch;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    gap: 2px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.ri-tab-bar .admin-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    height: 44px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    position: relative;
    bottom: -1px;
}

.ri-tab-bar .admin-tab:hover {
    color: var(--text-bright);
}

.ri-tab-bar .admin-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.ri-tab-bar .admin-tab-icon {
    font-size: 13px;
    opacity: 0.7;
}

.ri-tab-bar .admin-tab-count {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border2);
    color: var(--text-dim);
    margin-left: 2px;
}

.ri-tab-bar .admin-tab.active .admin-tab-count {
    background: rgba(28,196,120,0.08);
    border-color: rgba(28,196,120,0.2);
    color: var(--accent);
}

.ri-admin-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Name cell with inline badge (LOCKED etc.) ────────────────────────────────── */
.name-with-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.name-with-badge .eng-name-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.locked-badge {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .5px;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid #7c3aed44;
    background: #7c3aed22;
    color: #7c3aed;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Table column layouts (Users & Roles) ─────────────────────────────────────── */
.rol-cols {
    grid-template-columns: 180px 1fr 90px 90px 56px 100px 150px;
}

.role-app-assignment-grid {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.role-app-assignment-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

/* ── Permission grid (role editor) ─────────────────────────────────────────────── */
.perm-grid {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.perm-app-header {
    display: block;
    padding: 10px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent);
    border-top: 1px solid var(--border);
}

.perm-app-header:first-of-type {
    border-top: none;
    padding-top: 0;
}

.perm-header,
.perm-row {
    display: grid;
    grid-template-columns: 1fr repeat(4, 64px);
    align-items: center;
    gap: 0;
}

.perm-header {
    background: var(--surface2);
    padding: 6px 12px;
    font-size: var(--fs-2xs);
    font-family: var(--mono);
    letter-spacing: .06em;
    color: var(--text-dim);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

.perm-header span:not(:first-child),
.perm-check {
    text-align: center;
    justify-self: center;
}

.perm-row {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}

.perm-row:last-child {
    border-bottom: none;
}

.perm-row:hover {
    background: var(--surface2);
}

.perm-resource {
    font-size: 12px;
    color: var(--text);
}

.perm-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}

.perm-check input[type="checkbox"]:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.perm-count {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
}

.role-capability-shell {
    margin-top: 18px;
}

.role-capability-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(14,45,86,.22), rgba(12,22,40,.88));
}

.role-capability-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 6px;
}

.role-capability-sub {
    max-width: 720px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}

.role-capability-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: 220px;
}

.role-capability-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border2);
    border-radius: 999px;
    background: rgba(7,15,29,.45);
    font-size: 11px;
    color: var(--text-dim);
}

.role-capability-summary-pill strong {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    color: var(--text-bright);
}

.role-capability-summary-pill--active {
    border-color: rgba(28,196,120,.32);
    background: rgba(28,196,120,.12);
    color: var(--text-bright);
}

.role-capability-grid {
    display: grid;
    gap: 14px;
}

.role-capability-app {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
}

.role-capability-app--platform {
    border-color: rgba(143,214,217,.35);
    box-shadow: inset 0 0 0 1px rgba(143,214,217,.08);
}

.role-capability-app-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: rgba(15,30,53,.55);
}

.role-capability-app-kicker {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.role-capability-app-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 4px;
}

.role-capability-app-sub {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    max-width: 700px;
}

.role-capability-app-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.role-capability-app-count,
.role-capability-app-total {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.role-capability-app-count {
    color: var(--text-bright);
}

.role-capability-app-total {
    color: var(--text-dim);
}

.role-capability-group {
    padding: 16px 18px 18px;
    border-top: 1px solid var(--border);
}

.role-capability-group:first-of-type {
    border-top: none;
}

.role-capability-group-title {
    margin-bottom: 12px;
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.role-capability-list {
    display: grid;
    gap: 10px;
}

.role-capability-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(7,15,29,.22);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

.role-capability-item:hover {
    border-color: var(--border2);
    background: rgba(15,30,53,.48);
    transform: translateY(-1px);
}

.role-capability-item--selected {
    border-color: rgba(28,196,120,.35);
    background: rgba(28,196,120,.09);
}

.role-capability-item--disabled {
    opacity: .7;
}

.role-capability-check {
    display: flex;
    justify-content: center;
    padding-top: 2px;
}

.role-capability-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.role-capability-check input[type="checkbox"]:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.role-capability-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.role-capability-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.role-capability-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-bright);
}

.role-capability-description {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
}

.role-capability-state {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(28,196,120,.28);
    background: rgba(28,196,120,.12);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    color: var(--text-bright);
}

.role-capability-state--muted {
    border-color: var(--border2);
    background: rgba(15,30,53,.5);
    color: var(--text-dim);
}

/* Amber marker for Assess capabilities that block a role from being assigned
   to external tenant users (see AppCapabilityCatalog.IsTenantAssignable). */
.role-capability-internal-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(217,164,64,.45);
    background: rgba(217,164,64,.12);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    color: #d9a440;
    white-space: nowrap;
    cursor: help;
}

.role-tenant-warning {
    margin: 0 0 14px;
    padding: 10px 13px;
    border-radius: 6px;
    border: 1px solid rgba(217,164,64,.45);
    background: rgba(217,164,64,.10);
    font-size: 12px;
    color: #d9a440;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .role-capability-intro,
    .role-capability-app-head {
        flex-direction: column;
    }

    .role-capability-summary,
    .role-capability-app-meta {
        justify-content: flex-start;
        align-items: flex-start;
    }
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.rule-group {
    padding: 16px 20px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

    .rule-group:nth-child(3n) {
        border-right: none;
    }

    .rule-group:nth-last-child(-n+3):not(.rule-toggle-wide) {
        border-bottom: none;
    }

.rule-toggle-wide {
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: none;
    padding: 18px 22px;
}

.rule-label {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.rule-sub {
    font-size: 11px;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.4;
}

.rule-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rule-input {
    width: 80px !important;
    text-align: center;
    font-family: var(--mono);
    font-weight: 600;
}

.rule-unit {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
}

.rule-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rule-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border2);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s;
    user-select: none;
}

    .rule-toggle:hover {
        background: var(--surface2);
    }

    .rule-toggle.on {
        border-color: var(--accent);
        background: var(--accent-dim);
    }

    .rule-toggle.rule-toggle-disabled {
        opacity: .6;
        cursor: not-allowed;
    }

        .rule-toggle.rule-toggle-disabled:hover {
            background: var(--bg);
        }

.rule-toggle-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border2);
    flex-shrink: 0;
    transition: background .15s;
}

.rule-toggle.on .rule-toggle-dot {
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
}

/* Busy state — dot grows a thin spinning ring so the user knows their
   click was received while the server round-trip completes. The toggle is
   also disabled so it can't be re-clicked. */
.rule-toggle-busy {
    cursor: progress !important;
}

.rule-toggle-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    margin-left: -9px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-top-color: var(--accent);
    animation: rule-toggle-spin .7s linear infinite;
}

@keyframes rule-toggle-spin {
    to { transform: rotate(360deg); }
}

.rule-toggle-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-bright);
}

.rule-toggle-desc {
    font-size: 11px;
    color: var(--text);
    margin-top: 2px;
}

.app-toggle-meta {
    margin-top: 4px;
}

.colour-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.colour-picker {
    width: 40px;
    height: 38px;
    padding: 2px;
    background: var(--bg);
    border: 1px solid var(--border2);
    border-radius: 6px;
    cursor: pointer;
}

.colour-preview {
    padding: 6px 12px;
    border-radius: 5px;
    border: 1px solid;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 16px;
}

.day-toggles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.day-toggle {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--border2);
    background: var(--bg);
    color: var(--text-dim);
    cursor: pointer;
    transition: all .12s;
}

    .day-toggle.active {
        background: var(--accent-dim);
        color: var(--accent);
        border-color: var(--accent);
    }

.skill-toggles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.skill-toggle {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--border2);
    background: var(--bg);
    color: var(--text-dim);
    cursor: pointer;
    transition: all .12s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEAFLET DARK OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */
.leaflet-container {
    background: #070f1d !important;
}

.leaflet-control-zoom a {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border2) !important;
}

    .leaflet-control-zoom a:hover {
        background: var(--surface2) !important;
    }

.leaflet-control-attribution {
    background: rgba(7,15,29,.9) !important;
    color: var(--text-dim) !important;
    font-size: var(--fs-2xs) !important;
}

.leaflet-popup-content-wrapper {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border2) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
}

.leaflet-popup-tip {
    background: var(--surface) !important;
}

.leaflet-popup-close-button {
    color: var(--text-dim) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL SEARCH (in topbar)
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 8px;
}

.topbar-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.super-search-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    margin-left: 6px;
    padding: 4px 8px;
    border: 1px solid var(--border2);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}

.super-search-toggle:hover {
    border-color: var(--accent);
    color: var(--text-bright);
}

.super-search-toggle.active {
    border-color: var(--accent);
    background: rgba(28,196,120,.12);
    color: var(--accent);
}

.super-search-toggle__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-dim);
    box-shadow: 0 0 0 2px var(--surface);
}

.super-search-toggle.active .super-search-toggle__dot {
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(28,196,120,.18);
}

.search-icon {
    position: absolute;
    left: 10px;
    color: var(--text-dim);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.topbar-search-input {
    font-family: var(--sans);
    font-size: 13px;
    background: var(--bg);
    border: 1px solid var(--border2);
    color: var(--text-bright);
    border-radius: 6px;
    padding: 5px 28px 5px 30px;
    width: 220px;
    outline: none;
    transition: border-color .15s, width .2s, box-shadow .15s;
}

    .topbar-search-input::placeholder {
        color: var(--text-dim);
    }

    .topbar-search-input:focus {
        border-color: var(--accent);
        width: 300px;
        box-shadow: 0 0 0 3px rgba(28,196,120,.1);
    }

.search-clear-btn {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
}

    .search-clear-btn:hover {
        color: var(--text-bright);
    }

.global-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 540px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px;
    z-index: 500;
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.gsr-header {
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.gsr-group-header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-bright);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.gsr-group-count {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.gsr-view-more {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    color: var(--accent);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.gsr-view-more:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.gsr-expanded-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
}

.gsr-show-fewer {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.gsr-show-fewer:hover {
    color: var(--text-bright);
}

.gsr-app {
    color: var(--accent);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.gsr-row--platform {
    grid-template-columns: 120px minmax(180px, 1fr) 150px;
}

.gsr-loading {
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
}

.gsr-empty {
    padding: 16px 14px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
}

.gsr-row {
    display: grid;
    grid-template-columns: 130px 1fr 160px;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s;
}

    .gsr-row:last-child {
        border-bottom: none;
    }

    .gsr-row:hover {
        background: var(--surface2);
    }

.gsr-row.active {
    background: var(--surface2);
}

.gsr-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gsr-ref {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--accent);
}

.gsr-reg {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    color: var(--text-dim);
    background: var(--bg);
    border: 1px solid var(--border2);
    border-radius: 3px;
    padding: 1px 4px;
    display: inline-block;
    text-transform: uppercase;
}

.gsr-mid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.gsr-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gsr-type {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
}

.gsr-right {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.gsr-status {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
}

    .gsr-status.scheduled {
        color: var(--green);
    }

    .gsr-status.unscheduled {
        color: var(--text-dim);
    }

.gsr-date {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT / CHANGE PASSWORD PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.account-page {
    min-height: calc(100vh - 88px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 24px;
}

.account-card {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
}

    .account-card h2 {
        font-family: var(--mono);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--text-bright);
        margin: 0 0 6px;
    }

.account-user {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0 0 24px;
}

    .account-user strong {
        color: var(--accent);
    }

.account-actions {
    margin-top: 20px;
    display: flex;
    gap: 8px;
}

.alert-success {
    background: rgba(28,196,120,.12);
    border: 1px solid rgba(28,196,120,.3);
    color: var(--green);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

.alert-error {
    background: var(--red-dim);
    border: 1px solid rgba(239,68,68,.3);
    color: var(--red);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

.alert-warn {
    background: rgba(232,184,28,.10);
    border: 1px solid rgba(232,184,28,.35);
    color: var(--amber, #f59e0b);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
}

.alert-warn strong {
    color: var(--text-bright);
}

/* ── Engineer proximity selector ─────────────────────────────────────────────── */
.eng-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-dim);
    padding: 8px 0 4px;
}

.eng-selector {
    margin-bottom: 10px;
}

.eng-selector-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.eng-selector-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.eng-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
}

    .eng-chip:hover {
        border-color: var(--accent);
        color: var(--text-bright);
    }

.eng-chip-on {
    background: rgba(28,196,120,.15);
    border-color: var(--green);
    color: var(--green) !important;
}

.eng-chip-name {
    font-weight: 500;
}

.eng-chip-dist {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    opacity: 0.7;
}

.eng-chip-dim {
    opacity: 0.35;
    cursor: not-allowed;
}

.eng-chip-lock {
    font-size: var(--fs-2xs);
    opacity: 0.8;
}

.eng-chip-more {
    border-style: dashed;
    color: var(--text-dim);
    font-style: italic;
}

    .eng-chip-more:hover {
        border-color: var(--accent);
        color: var(--text-bright);
    }

.eng-warn {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOLIDAYS / AVAILABILITY TAB
   ═══════════════════════════════════════════════════════════════════════════ */

/* Conflict banner */
.conflict-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: #7c2d1222;
    border-bottom: 1px solid #7c2d1244;
    cursor: pointer;
    font-size: 12px;
    color: #f97316;
    font-family: var(--mono);
}
.conflict-icon { font-size: 14px; }
.conflict-expand { margin-left: auto; font-size: var(--fs-2xs); opacity: .7; }

.conflict-list {
    border-bottom: 1px solid var(--border);
    padding: 8px 22px 12px;
}
.conflict-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}
.conflict-row:last-child { border-bottom: none; }
.conflict-row-info { display: flex; gap: 16px; align-items: center; font-size: 12px; flex-wrap: wrap; }
.conflict-date { font-family: var(--mono); color: var(--text-dim); min-width: 90px; }
.conflict-eng  { color: var(--text-bright); font-weight: 500; }
.conflict-job  { color: var(--text); }
.conflict-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Tab count badge in warning state */
.warn-count {
    background: #f97316 !important;
    color: #fff !important;
}

/* Controls row */
.avail-controls {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.avail-eng-picker { width: 280px; }
.avail-eng-search-wrap { position: relative; }
.avail-eng-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.avail-eng-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: background .1s;
}
.avail-eng-option:hover { background: var(--surface2); }
.avail-eng-option.selected { background: var(--accent); color: #fff; }
.avail-eng-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
}
.avail-month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.avail-month-label {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
    min-width: 120px;
    text-align: center;
}

/* Calendar */
.avail-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    margin: 16px 22px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.avail-cal-header {
    display: contents;
}
.avail-cal-header span,
.avail-calendar > .avail-cal-header span {
    display: block;
    background: var(--bg);
    padding: 6px 8px;
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.avail-cal-day {
    background: var(--surface);
    padding: 6px 8px;
    min-height: 64px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background .1s;
}
.avail-cal-day:hover { background: var(--surface2); }
.avail-cal-day.other-month { background: var(--bg); cursor: default; }
.avail-cal-day.other-month * { opacity: .3; pointer-events: none; }
.avail-cal-day.weekend { background: #10100e; }
.avail-cal-day.bank-hol { background: #1a0d2e; cursor: default; }

.avail-cal-num {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
}
.avail-cal-num.today {
    background: var(--accent, #3b82f6);
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-2xs);
}
.avail-cal-bk {
    font-size: var(--fs-2xs);
    font-family: var(--mono);
    color: #a78bfa;
    background: #4c1d9511;
    border-left: 2px solid #7c3aed;
    padding: 1px 4px;
    border-radius: 2px;
    line-height: 1.4;
    word-break: break-word;
}
.avail-cal-block {
    font-size: var(--fs-2xs);
    font-family: var(--mono);
    padding: 1px 4px;
    border-radius: 2px;
    line-height: 1.4;
}

/* Legend */
.avail-legend {
    display: flex;
    gap: 16px;
    padding: 0 22px 16px;
    flex-wrap: wrap;
}
.avail-leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-family: var(--mono);
    color: var(--text-dim);
}
.avail-leg-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Availability list */
.avail-list-head {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 8px 22px 4px;
}
.avail-cols {
    grid-template-columns: 110px 90px 160px 1fr 100px 80px;
}
.avail-type-badge {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Blazor error UI */
#blazor-error-ui {
    background: var(--red-dim);
    border-top: 1px solid #7f1d1d;
    color: var(--red);
    bottom: 0;
    left: 0;
    padding: 12px 16px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 13px;
    font-family: var(--mono);
    display: none;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 16px;
        top: 12px;
    }

/* ── Drag-to-reschedule global cursor ── */
body.gantt-dragging,
body.gantt-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Prompt diff viewer (used by Rapid Referral PromptDiffModal).

   Defined globally because the row markup is rendered via MarkupString and
   therefore would not pick up Blazor CSS-isolation scope attributes.

   Theme-aware: every color is sourced from CSS variables that are redefined
   under [data-theme="light"] further down. Do NOT hardcode hex values for
   text or backgrounds inside this block.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* Defaults are tuned for the dark theme. Light theme overrides below. */
    --diff-add-bg:         rgba(76, 175, 80, 0.22);
    --diff-add-stripe:     #6fcf97;
    --diff-add-text:       #e6f7e6;
    --diff-add-gutter-bg:  rgba(76, 175, 80, 0.34);
    --diff-add-tok-bg:     rgba(76, 175, 80, 0.55);
    --diff-add-tok-text:   #ffffff;

    --diff-del-bg:         rgba(248, 81, 73, 0.22);
    --diff-del-stripe:     #f85149;
    --diff-del-text:       #ffe1e1;
    --diff-del-gutter-bg:  rgba(248, 81, 73, 0.34);
    --diff-del-tok-bg:     rgba(248, 81, 73, 0.55);
    --diff-del-tok-text:   #ffffff;

    --diff-gutter-bg:      rgba(255, 255, 255, 0.04);
    --diff-empty-stripe-a: rgba(255, 255, 255, 0.05);
    --diff-empty-stripe-b: rgba(255, 255, 255, 0.10);
    --diff-row-divider:    rgba(255, 255, 255, 0.04);
    --diff-head-bg:        rgba(255, 255, 255, 0.04);
}

[data-theme="light"] {
    --diff-add-bg:         rgba(46, 160, 67, 0.18);
    --diff-add-stripe:     #2ea043;
    --diff-add-text:       #0a3d12;
    --diff-add-gutter-bg:  rgba(46, 160, 67, 0.30);
    --diff-add-tok-bg:     rgba(46, 160, 67, 0.45);
    --diff-add-tok-text:   #052e0d;

    --diff-del-bg:         rgba(207, 34, 46, 0.18);
    --diff-del-stripe:     #cf222e;
    --diff-del-text:       #4a0309;
    --diff-del-gutter-bg:  rgba(207, 34, 46, 0.30);
    --diff-del-tok-bg:     rgba(207, 34, 46, 0.45);
    --diff-del-tok-text:   #350307;

    --diff-gutter-bg:      rgba(0, 0, 0, 0.06);
    --diff-empty-stripe-a: rgba(0, 0, 0, 0.06);
    --diff-empty-stripe-b: rgba(0, 0, 0, 0.12);
    --diff-row-divider:    rgba(0, 0, 0, 0.06);
    --diff-head-bg:        rgba(0, 0, 0, 0.04);
}

.diff-grid {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 56px minmax(0, 1fr);
    background: var(--surface);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-bright);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: auto;
    max-height: 76vh;
}

.diff-grid-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 12px;
    background: var(--diff-head-bg);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.diff-grid-head-old { grid-column: 1 / span 2; border-right: 1px solid var(--border); }
.diff-grid-head-new { grid-column: 3 / span 2; }

/* Cells */
.diff-cell {
    padding: 0 12px;
    white-space: pre-wrap;
    word-break: break-word;
    border-top: 1px solid var(--diff-row-divider);
    min-height: 1.55em;
}

.diff-cell.diff-gutter {
    text-align: right;
    padding: 0 8px 0 0;
    color: var(--text-dim);
    user-select: none;
    font-size: var(--fs-2xs);
    background: var(--diff-gutter-bg);
    border-right: 1px solid var(--border);
}
.diff-cell.diff-gutter-new { border-left: 1px solid var(--border); }

/* Row state colours */
.diff-cell-eq { background: transparent; }

/* "No corresponding line on this side" — visible on both themes via CSS-var stripes */
.diff-cell-empty {
    background: repeating-linear-gradient(
        45deg,
        var(--diff-empty-stripe-a),
        var(--diff-empty-stripe-a) 6px,
        var(--diff-empty-stripe-b) 6px,
        var(--diff-empty-stripe-b) 12px
    );
    color: transparent;
}
.diff-cell-empty * { visibility: hidden; }

/* Inserted / new-side green */
.diff-cell-add {
    background: var(--diff-add-bg);
    color: var(--diff-add-text);
    box-shadow: inset 3px 0 0 var(--diff-add-stripe);
}
.diff-cell-add.diff-gutter {
    background: var(--diff-add-gutter-bg);
    color: var(--diff-add-text);
    box-shadow: none;
}

/* Deleted / old-side red */
.diff-cell-del {
    background: var(--diff-del-bg);
    color: var(--diff-del-text);
    box-shadow: inset 3px 0 0 var(--diff-del-stripe);
}
.diff-cell-del.diff-gutter {
    background: var(--diff-del-gutter-bg);
    color: var(--diff-del-text);
    box-shadow: none;
}

/* Word-level highlights inside changed lines */
.diff-tok {
    border-radius: 2px;
    padding: 0 1px;
}
.diff-tok-add {
    background: var(--diff-add-tok-bg);
    color: var(--diff-add-tok-text);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--diff-add-stripe);
}
.diff-tok-del {
    background: var(--diff-del-tok-bg);
    color: var(--diff-del-tok-text);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--diff-del-stripe);
    text-decoration: line-through;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1.5px;
}
.diff-tok-empty { display: none; }

/* Diff modal meta header (target / model / change counts) */
.diff-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.diff-modal-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.diff-modal-target {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.diff-meta-label {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.diff-meta-value { font-size: 12px; color: var(--text); }
.diff-meta-mono  { font-family: var(--mono); }

.diff-stat { margin-right: 8px; font-weight: 700; font-size: 12px; }
.diff-stat-add { color: #6fcf97; }
.diff-stat-del { color: #f85149; }

.diff-modal-summary {
    background: rgba(100, 181, 246, 0.06);
    border-left: 3px solid var(--accent);
    padding: 10px 14px;
    border-radius: 0 4px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.diff-summary-h {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--accent);
}
.diff-summary-body { font-size: 13px; color: var(--text); line-height: 1.45; }

/* Search box inside the diff viewer */
.diff-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 10px;
}
.diff-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
}
.diff-search-label {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RRN LIGHT BRAND THEME  —  reusable, opt-in via the `.rrn-theme` wrapper class
   ---------------------------------------------------------------------------
   A light, modern-SaaS skin matching rrn.co.uk (navy / green / mustard,
   Raleway). Re-points the design tokens for everything inside the wrapper, so
   every shared component (AppNavBar, AppButton, AppModal, FormField, admin
   tabs, …) re-skins for free. Add the class to the app shell and the login
   split; the rest cascades. Other apps stay on the global dark default.
   ═══════════════════════════════════════════════════════════════════════════ */
.rrn-theme {
    --rrn-navy: #0c2448;
    --rrn-navy-mid: #16315c;
    --rrn-navy-light: #16315c;
    --navy: #0c2448;
    --navy-2: #16315c;
    --rrn-green: #1cc478;
    --green-dark: #12a063;
    --green-tint: #edf9ef;
    --green-tint-2: #f6fcf7;
    --rrn-mustard: #e8b81c;
    --bg: #f1f4f3;
    --surface: #ffffff;
    --surface2: #f7faf9;
    --surface3: #eef3f2;
    --panel-2: #f7faf9;
    --border: #e4e9e8;
    --border2: #d3dbda;
    --text: #0c2448;
    --text-mid: #566476;
    /* Both were #8a97a4: 2.69:1 on --bg, well short of WCAG AA. #616e7a is the
       lightest value clearing 4.5:1 on all three RRN light surfaces (4.72:1). */
    --text-dim: #616e7a;
    --muted: #616e7a;
    --text-bright: #0c2448;
    --accent: var(--rrn-green);
    --accent-dim: var(--green-tint);
    --green: var(--rrn-green);
    --green-dim: var(--green-tint);
    --rrn-green-dim: #12a063;
    --amber: var(--rrn-mustard);
    --warning: var(--rrn-mustard);
    --red: #d8534e;
    --rrn-red: #d8534e;
    --red-dim: #fbeceb;
    --danger: #d8534e;
    --success: #1cc478;
    --sans: 'Raleway', sans-serif;
    --mono: 'Red Hat Mono', monospace;
    --shadow-sm: 0 1px 2px rgba(12,36,72,.05);
    --shadow: 0 4px 18px rgba(12,36,72,.06);
    --shadow-lg: 0 30px 70px rgba(12,36,72,.22);
    color-scheme: light;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* The RRN palette above is light-only, and because .rrn-theme sits closer to the
   element than :root[data-theme] it wins on custom-property inheritance — so
   without this counterpart a .rrn-theme surface stayed light even with the dark
   theme active. Only colour is re-pointed; type, radii and shadows are shared.
   Text values here clear 4.5:1 and control borders 3:1 against these surfaces. */
[data-theme="dark"] .rrn-theme {
    --rrn-navy-mid: #16233d;
    --rrn-navy-light: #24405f;
    --navy-2: #16233d;
    --green-dark: #3ddc93;
    --green-tint: #0f2b20;
    --green-tint-2: #0b2118;
    --bg: #070f1d;
    --surface: #0c1628;
    --surface2: #050b16;
    /* RRN's --surface2 is a sunken well, below --surface, so the hover step has
       to go up from --surface rather than on from --surface2. */
    --surface3: #142137;
    --panel-2: #050b16;
    --border: #1a2d55;
    --border2: #54709e;
    --text: #e8eef6;
    --text-mid: #9fb3cc;
    --text-dim: #8098b4;
    --muted: #8098b4;
    --text-bright: #f4f8fc;
    --accent-dim: #0f2b20;
    --green-dim: #0f2b20;
    --rrn-green-dim: #3ddc93;
    --red: #ff8a95;
    --rrn-red: #ff8a95;
    --red-dim: #2c1218;
    --danger: #ff8a95;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 4px 18px rgba(0,0,0,.45);
    --shadow-lg: 0 30px 70px rgba(0,0,0,.6);
    color-scheme: dark;
}

.rrn-theme.app-shell {
    background: var(--bg);
}

.rrn-theme .app-content {
    background: var(--bg);
}

/* ────────────────────────────────────────────────────────────────────────────
   SHARED CONTENT WIDTH — one configurable token for every app.
   Change --rrn-page-max in one place to reflow every standard page.
   The centred column applies to ALL apps (list, reports, admin) so they line up
   regardless of their own shell markup. Genuinely full-width workspaces opt out
   by adding `is-full-bleed` (or using PageShell FullBleed → .rrn-page-full).
   ──────────────────────────────────────────────────────────────────────────── */
.rrn-theme {
    --rrn-page-max: 1280px;
}

/* width:100% + box-sizing keeps the centred column at its full capped width from
   the first paint. Without it the shell shrink-wraps to whatever has loaded (e.g. a
   short "Loading…" line) and then jumps out to --rrn-page-max once the tables render,
   which reads as the page width "changing" as it loads. */
.rrn-wrap {
    width: 100%;
    max-width: var(--rrn-page-max);
    margin: 0 auto;
    padding: 34px 28px 90px;
    box-sizing: border-box;
}

.reports-shell,
.ri-admin-shell {
    width: 100%;
    max-width: var(--rrn-page-max);
    margin-inline: auto;
    padding: 24px 24px 36px;
    box-sizing: border-box;
}

/* Per-page opt-out for genuinely full-bleed workspaces (e.g. the Dispatch board
   and live map). Add `is-full-bleed` to the shell, or FullBleed on PageShell. */
.is-full-bleed,
.rrn-wrap.is-full-bleed,
.reports-shell.is-full-bleed,
.ri-admin-shell.is-full-bleed {
    max-width: none;
    margin-inline: 0;
}

/* ── Top bar (navy) ───────────────────────────────────────────────────────── */
.rrn-theme .topbar {
    height: 66px;
    background: var(--navy);
    border-bottom: none;
    padding-right: 16px;
    gap: 10px;
}

.rrn-theme .topbar-brand {
    border-right: none;
    padding: 0 8px 0 24px;
    gap: 11px;
}

.rrn-theme .app-switcher-trigger {
    gap: 11px;
    padding-right: 6px;
}

.rrn-theme .brand-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--rrn-green);
    color: #fff;
    flex: none;
    box-shadow: 0 2px 8px rgba(28,196,120,.35);
}

.rrn-theme .brand-mark svg {
    width: 18px;
    height: 18px;
}

.rrn-theme .brand-wordmark {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.01em;
    text-transform: none;
    color: #fff;
}

.rrn-theme .brand-wordmark span {
    font-weight: 800;
    color: var(--rrn-green);
}

.rrn-theme .app-switcher-caret {
    color: rgba(255,255,255,.55);
}

.rrn-theme .topbar-nav {
    gap: 2px;
    margin-left: 22px;
}

.rrn-theme .nav-item {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255,255,255,.70);
    border-right: none;
    border-bottom: 3px solid transparent;
    padding: 0 16px;
}

.rrn-theme .nav-item:hover {
    color: #fff;
    background: transparent;
}

.rrn-theme .nav-item.active {
    color: #fff;
    background: transparent;
    border-bottom-color: var(--rrn-green);
}

/* Static tenant badge in the top bar. */
.rrn-tenant-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px;
    padding: 6px 13px 6px 11px;
    color: #fff;
}

.rrn-tenant-chip .rtc-ic {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(28,196,120,.18);
    color: var(--rrn-green);
    display: grid;
    place-items: center;
    flex: none;
}

.rrn-tenant-chip .rtc-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.rrn-tenant-chip .rtc-text small {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}

.rrn-tenant-chip .rtc-text strong {
    font-size: 13px;
    font-weight: 700;
}

/* User chip on the navy bar. */
.rrn-theme .topbar-user {
    border-left: none;
}

.rrn-theme .user-chip-name {
    color: #fff;
}

.rrn-theme .user-chip-caret {
    color: rgba(255,255,255,.55);
}

.rrn-theme .user-avatar {
    background: var(--rrn-green);
    border-color: var(--rrn-green);
    color: var(--navy);
    font-family: var(--sans);
}

.rrn-theme .user-chip:hover,
.rrn-theme .user-chip.open {
    background: rgba(255,255,255,.08);
}

/* ── Product release history ─────────────────────────────────────────────── */
.release-version-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    min-height: 28px;
    margin-right: 10px;
    padding: 4px 9px;
    border: 1px solid var(--border2);
    border-radius: 999px;
    background: var(--surface2);
    color: var(--text-dim);
    font: 600 var(--fs-2xs)/1 var(--mono);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.release-version-badge:hover,
.release-version-badge:focus-visible {
    color: var(--text-bright);
    border-color: var(--accent);
    outline: none;
}

.release-version-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.rrn-theme .release-version-badge {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.76);
}

.rrn-theme .release-version-badge:hover,
.rrn-theme .release-version-badge:focus-visible {
    border-color: var(--rrn-green);
    background: rgba(255,255,255,.12);
    color: #fff;
}

.release-history-cache-notice {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--amber);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    font-size: 12px;
}

.release-history-list {
    display: grid;
    gap: 12px;
    opacity: 1;
    transition: opacity .15s ease;
}

.release-history-list[aria-busy="true"] {
    opacity: .55;
    pointer-events: none;
}

.release-history-item {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
}

.release-history-item--current {
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.release-history-item__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.release-history-item__header h3 {
    margin: 4px 0 0;
    color: var(--text-bright);
    font-size: 15px;
}

.release-history-item__header time {
    flex: none;
    color: var(--text-dim);
    font: 500 11px/1.4 var(--mono);
}

.release-history-item__version {
    color: var(--accent);
    font: 700 12px/1 var(--mono);
}

.release-history-current {
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--accent);
    font: 700 var(--fs-2xs)/1 var(--sans);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.release-history-components {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.release-history-component {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 11px;
    text-transform: capitalize;
}

.release-history-component small {
    color: var(--text-dim);
    font-family: var(--mono);
}

.release-history-notes {
    margin-top: 12px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.release-history-state {
    padding: 40px 16px;
    color: var(--text-dim);
    text-align: center;
}

.release-history-pager {
    margin-top: 18px;
}

.release-version-badge--repairer {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: auto;
    margin: 0;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: var(--fs-2xs);
    font-weight: 700;
}

.release-version-badge--repairer:hover,
.release-version-badge--repairer:focus-visible {
    border-color: transparent;
    background: transparent;
    color: var(--green-dim);
}

.release-version-badge--repairer .release-version-badge__dot {
    width: 20px;
    height: 20px;
    border: 5px solid var(--green-dim);
    background: var(--green-dim);
}

@media (max-width: 760px) {
    .rrn-theme .topbar .release-version-badge {
        margin-right: 2px;
        padding-inline: 6px;
    }

    .release-history-item__header {
        display: block;
    }

    .release-history-item__header time {
        display: block;
        margin-top: 6px;
    }
}

.rrn-theme .user-menu {
    box-shadow: 0 8px 24px rgba(12,36,72,.14);
    border-color: var(--border2);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.rrn-theme .btn {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 9px;
    padding: 11px 17px;
    border: 1px solid transparent;
    gap: 8px;
}

.rrn-theme .btn-sm {
    padding: 8px 13px;
    font-size: 12.5px;
}

.rrn-theme .btn-primary {
    background: var(--rrn-green);
    color: #fff;
}

.rrn-theme .btn-primary:hover:not(:disabled) {
    background: var(--green-dark);
    filter: none;
}

.rrn-theme .btn-ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border2);
}

.rrn-theme .btn-ghost:hover:not(:disabled) {
    background: var(--surface2);
    border-color: var(--text-dim);
}

.rrn-theme .btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border2);
}

.rrn-theme .btn-secondary:hover:not(:disabled) {
    background: var(--surface2);
}

.rrn-theme .btn-danger {
    background: transparent;
    color: var(--red);
    border-color: rgba(216,83,78,.35);
}

.rrn-theme .btn-danger:hover:not(:disabled) {
    background: rgba(216,83,78,.06);
    color: var(--red);
}

/* ── Page head (mockup) ───────────────────────────────────────────────────── */
.rrn-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 26px;
}

.rrn-page-head h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
    position: relative;
    padding-bottom: 10px;
    color: var(--text);
}

.rrn-page-head h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 3px;
    background: var(--rrn-green);
    border-radius: 3px;
}

.rrn-page-head .rrn-page-sub {
    margin: 8px 0 0;
    color: var(--text-mid);
    font-size: 14px;
}

/* ── In-app footer sign-off ───────────────────────────────────────────────── */
.app-foot {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 600;
}

.app-foot .app-foot-lead strong {
    color: var(--text-mid);
}

.app-foot .app-foot-mono {
    height: 18px;
    width: auto;
    display: block;
}

.app-foot .app-foot-copy {
    margin-left: auto;
}

/* ── Admin tabs + section cards ───────────────────────────────────────────── */
/* Opaque page-coloured background (not transparent) so the sticky tab bar fully
   covers content scrolling underneath it, with a soft lift shadow for separation. */
.rrn-theme .ri-tab-bar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0;
    gap: 2px;
    box-shadow: 0 6px 14px -10px rgba(13, 32, 72, .28);
}

.rrn-theme .ri-tab-bar .admin-tab {
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-mid);
    padding: 11px 13px;
    height: auto;
}

.rrn-theme .ri-tab-bar .admin-tab:hover {
    color: var(--text);
}

.rrn-theme .ri-tab-bar .admin-tab.active {
    color: var(--navy);
    border-bottom-color: var(--rrn-green);
}

.rrn-theme .ri-tab-bar .admin-tab-count {
    background: var(--surface2);
    border-color: var(--border2);
    color: var(--text-dim);
}

.rrn-theme .ri-tab-bar .admin-tab-icon {
    display: none;
}

.rrn-theme .ri-admin-body {
    padding: 22px 0 0;
}

/* Admin section cards (mockup .asec) */
.rrn-theme .admin-section {
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.rrn-theme .section-head {
    padding: 18px 20px;
}

.rrn-theme .section-title {
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .07em;
    color: var(--text);
}

.rrn-theme .section-sub {
    color: var(--text-mid);
    font-size: 12.5px;
}

/* ── Modal (light) ────────────────────────────────────────────────────────── */
.rrn-theme .modal-backdrop {
    background: rgba(12,36,72,.5);
    backdrop-filter: blur(3px);
}

.rrn-theme .modal,
.rrn-theme .modal-center,
.rrn-theme .modal-center-wrap {
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

/* The completed-result view popup matches the New/Edit (split) modal width. */
.rrn-theme .modal-large {
    width: 920px;
    max-width: 95vw;
}

.rrn-theme .modal-head {
    padding: 19px 26px;
}

.rrn-theme .modal-title {
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--text);
}

.rrn-theme .modal-foot {
    background: var(--surface2);
    padding: 16px 26px;
}

/* ── Editor stepper (numbered circles) ────────────────────────────────────── */
.rrn-theme .rrn-step-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.rrn-theme .rrn-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    flex: none;
    background: var(--surface2);
    color: var(--text-dim);
    border: 1px solid var(--border2);
}

.rrn-theme .rrn-step-num.open {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.rrn-theme .rrn-step-num.done {
    background: var(--rrn-green);
    color: #fff;
    border-color: var(--rrn-green);
}

/* ── New-assessment wizard (guided linear create flow) ────────────────────── */
.rrn-theme .rrn-wz {
    flex: 1;
    min-width: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 232px 1fr;
    height: min(620px, calc(94vh - 150px));
    min-height: 0;
}

.rrn-theme .rrn-wz-rail {
    background: var(--surface2);
    border-right: 1px solid var(--border);
    padding: 26px 22px;
    overflow-y: auto;
}

.rrn-theme .rrn-wz-rail-h {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-dim);
    margin: 0 0 22px;
}

.rrn-theme .rrn-wz-stage {
    position: relative;
    display: flex;
    gap: 13px;
    padding-bottom: 24px;
    cursor: pointer;
}

.rrn-theme .rrn-wz-stage:last-child {
    padding-bottom: 0;
}

.rrn-theme .rrn-wz-stage::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 2px;
    width: 2px;
    background: var(--border2);
}

.rrn-theme .rrn-wz-stage:last-child::before {
    display: none;
}

.rrn-theme .rrn-wz-stage.done::before {
    background: var(--rrn-green);
}

.rrn-theme .rrn-wz-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    background: var(--surface);
    border: 2px solid var(--border2);
    color: var(--text-dim);
    z-index: 1;
}

.rrn-theme .rrn-wz-stage.done .rrn-wz-dot {
    background: var(--rrn-green);
    border-color: var(--rrn-green);
    color: #fff;
}

.rrn-theme .rrn-wz-stage.active .rrn-wz-dot {
    border-color: var(--rrn-green);
    color: var(--green-dark);
    box-shadow: 0 0 0 4px rgba(28, 196, 120, .12);
}

.rrn-theme .rrn-wz-dot svg {
    width: 13px;
    height: 13px;
}

.rrn-theme .rrn-wz-st {
    padding-top: 3px;
    min-width: 0;
}

.rrn-theme .rrn-wz-st .t {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-mid);
}

.rrn-theme .rrn-wz-stage.active .rrn-wz-st .t,
.rrn-theme .rrn-wz-stage.done .rrn-wz-st .t {
    color: var(--text);
}

.rrn-theme .rrn-wz-st .s {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 3px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrn-theme .rrn-wz-st .s strong {
    color: var(--text-mid);
    font-weight: 700;
}

.rrn-theme .rrn-wz-panel {
    padding: 26px 30px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.rrn-theme .rrn-wz-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--green-dark);
}

.rrn-theme .rrn-wz-panel h3 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 3px 0 4px;
}

.rrn-theme .rrn-wz-lead {
    font-size: 13.5px;
    color: var(--text-mid);
    margin: 0 0 20px;
    max-width: 520px;
    line-height: 1.5;
}

.rrn-theme .rrn-wz-vehchip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    padding: 8px 15px 8px 8px;
    border-radius: 11px;
    background: var(--green-tint-2);
    border: 1px solid rgba(28, 196, 120, .28);
    margin-bottom: 22px;
}

.rrn-theme .rrn-wz-vehchip-main .veh {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
}

.rrn-theme .rrn-wz-vehchip-main .meta {
    font-size: 11.5px;
    color: var(--text-mid);
    margin-top: 1px;
}

.rrn-theme .rrn-wz-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-mid);
    margin: 0 auto;
}

.rrn-theme .rrn-wz-count b {
    color: var(--text);
}

.rrn-theme .rrn-wz-review {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 11px 18px;
    margin: 0;
    font-size: 13.5px;
}

.rrn-theme .rrn-wz-review dt {
    color: var(--text-dim);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding-top: 2px;
}

.rrn-theme .rrn-wz-review dd {
    margin: 0;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .rrn-theme .rrn-wz {
        grid-template-columns: 1fr;
        height: auto;
        min-height: min(520px, calc(94vh - 150px));
    }

    .rrn-theme .rrn-wz-rail {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 18px 20px;
    }

    .rrn-theme .rrn-wz-stage {
        padding-bottom: 18px;
    }
}

/* Registration lookup row stays tidy and narrow at the top of step 1. */
.rrn-theme .rrn-wz-reg {
    max-width: 360px;
}

/* ── Step 1 vehicle result card (DVLA-style) ──────────────────────────────── */
.rrn-theme .rrn-vcard {
    border: 1px solid var(--border);
    border-radius: 13px;
    overflow: hidden;
    margin-top: 18px;
}

.rrn-theme .rrn-vcard.warn {
    border-color: rgba(232, 184, 28, .45);
}

.rrn-theme .rrn-vcard-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    background: var(--green-tint-2);
    border-bottom: 1px solid var(--border);
}

.rrn-theme .rrn-vcard.warn .rrn-vcard-top {
    background: #fdf8e8;
    border-bottom-color: rgba(232, 184, 28, .3);
}

.rrn-theme .rrn-vcard-ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(28, 196, 120, .32);
    display: grid;
    place-items: center;
    color: var(--green-dark);
    flex: none;
}

.rrn-theme .rrn-vcard.warn .rrn-vcard-ic {
    border-color: rgba(232, 184, 28, .45);
    color: #b8860b;
}

.rrn-theme .rrn-vcard-ic svg {
    width: 24px;
    height: 24px;
}

.rrn-theme .rrn-vcard-top .vt {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -.01em;
    color: var(--text);
}

.rrn-theme .rrn-vcard-top .vs {
    font-size: 12.5px;
    color: var(--text-mid);
    margin-top: 2px;
}

.rrn-theme .rrn-vfound {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 5px 11px;
    white-space: nowrap;
}

.rrn-theme .rrn-vfound.ok {
    color: var(--green-dark);
    background: #fff;
    border: 1px solid rgba(28, 196, 120, .4);
}

.rrn-theme .rrn-vfound.part {
    color: #b8860b;
    background: #fff;
    border: 1px solid rgba(232, 184, 28, .5);
}

.rrn-theme .rrn-vspecs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
}

.rrn-theme .rrn-vspec {
    background: var(--surface);
    padding: 12px 16px;
    min-width: 0;
}

.rrn-theme .rrn-vspec .k {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-dim);
}

.rrn-theme .rrn-vspec .k .req {
    color: var(--red);
}

.rrn-theme .rrn-vspec .v {
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

/* Editable cells are neutral by default (e.g. correcting a confirmed vehicle);
   the amber wash only applies inside the limited-data (.warn) card. */
.rrn-theme .rrn-vcard.warn .rrn-vspec.edit {
    background: #fdfaf0;
}

.rrn-theme .rrn-vspec.edit .f-input {
    width: 100%;
    margin-top: 4px;
    padding: 6px 9px;
    font-size: 13px;
    font-weight: 600;
}

.rrn-theme .rrn-vnote {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 12px 16px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-mid);
    background: var(--surface2);
    border-top: 1px solid var(--border);
}

.rrn-theme .rrn-vnote svg {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 1px;
    color: #b8860b;
}

.rrn-theme .rrn-vnote b {
    color: var(--text);
}

/* ── Step 2 incident-location map tile ────────────────────────────────────── */
.rrn-theme .rrn-wz-minimap {
    height: 168px;
    border-radius: 11px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, #eef3f1, #dde7e3);
}

.rrn-theme .rrn-wz-minimap-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rrn-theme .rrn-wz-pin {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -100%);
    z-index: 2;
}

.rrn-theme .rrn-wz-pin svg {
    width: 30px;
    height: 30px;
    color: var(--red);
    filter: drop-shadow(0 4px 6px rgba(12, 36, 72, .3));
}

.rrn-theme .rrn-wz-mtag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.rrn-theme .rrn-wz-mtag small {
    display: block;
    font-weight: 500;
    color: var(--text-mid);
    font-size: 11px;
    margin-top: 1px;
}

/* ── Step 3 photos: drop zone, shot tips, thumbs ──────────────────────────── */
.rrn-theme .rrn-wz-drop {
    margin-top: 4px;
}

.rrn-theme .rrn-shot-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.rrn-theme .rrn-shot-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-mid);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 11px;
}

.rrn-theme .rrn-shot-tip svg {
    width: 12px;
    height: 12px;
    color: var(--green-dark);
}

.rrn-theme .rrn-shot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 11px;
}

.rrn-theme .rrn-shot-row h4 {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-mid);
    margin: 0;
}

.rrn-theme .rrn-shot-count {
    font-size: 12px;
    color: var(--text-dim);
}

.rrn-theme .rrn-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.rrn-theme .rrn-thumb {
    aspect-ratio: 4 / 3;
    border-radius: 9px;
    position: relative;
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-dim);
    padding: 6px;
}

.rrn-theme .rrn-thumb .fn {
    font-size: var(--fs-2xs);
    font-family: var(--mono);
    color: var(--text-mid);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrn-theme .rrn-thumb-img {
    overflow: hidden;
}

.rrn-theme .rrn-thumb-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rrn-theme .rrn-thumb .del {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: rgba(12, 36, 72, .65);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
}

/* ── Step 4 review cards ──────────────────────────────────────────────────── */
.rrn-theme .rrn-rev {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.rrn-theme .rrn-rev-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.rrn-theme .rrn-rev-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-mid);
}

.rrn-theme .rrn-rev-head .ed {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--green-dark);
    background: var(--green-tint);
    border: none;
    border-radius: 7px;
    padding: 5px 11px;
    cursor: pointer;
}

.rrn-theme .rrn-rev-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
}

.rrn-theme .rrn-rev-cell {
    background: var(--surface);
    padding: 11px 16px;
    min-width: 0;
}

.rrn-theme .rrn-rev-cell.full {
    grid-column: 1 / -1;
}

.rrn-theme .rrn-rev-cell .k {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-dim);
}

.rrn-theme .rrn-rev-cell .v {
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 3px;
    line-height: 1.4;
    color: var(--text);
    overflow-wrap: anywhere;
}

.rrn-theme .rrn-rev-photos {
    display: flex;
    gap: 8px;
    padding: 13px 16px;
    flex-wrap: wrap;
}

.rrn-theme .rrn-rev-photos .rp {
    width: 56px;
    height: 44px;
    border-radius: 7px;
    background: var(--surface2);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    color: var(--text-dim);
}

.rrn-theme .rrn-rev-photos .rp svg {
    width: 18px;
    height: 18px;
}

.rrn-theme .rrn-rev-photos .rp {
    overflow: hidden;
}

.rrn-theme .rrn-rev-photos .rp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rrn-theme .rrn-rev-photos-empty {
    font-size: 12.5px;
    color: var(--text-dim);
}

.rrn-theme .rrn-submit-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 11px;
    background: var(--green-tint);
    border: 1px solid rgba(28, 196, 120, .28);
    font-size: 12.5px;
    color: var(--text-mid);
    line-height: 1.45;
}

.rrn-theme .rrn-submit-note svg {
    width: 17px;
    height: 17px;
    flex: none;
    color: var(--green-dark);
    margin-top: 1px;
}

/* ── AI processing pipeline (Assessing) ───────────────────────────────────── */
.rrn-theme .rrn-pipeline {
    position: relative;
    display: flex;
    flex-direction: column;
}

.rrn-theme .rrn-pstep {
    position: relative;
    display: flex;
    gap: 16px;
    padding-bottom: 26px;
}

.rrn-theme .rrn-pstep:last-child {
    padding-bottom: 0;
}

.rrn-theme .rrn-pstep::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 0;
    width: 2px;
    background: var(--border2);
}

.rrn-theme .rrn-pstep:last-child::before {
    display: none;
}

.rrn-theme .rrn-pstep.complete::before {
    background: var(--rrn-green);
}

.rrn-theme .rrn-pnode {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    z-index: 1;
    background: var(--surface);
    border: 2px solid var(--border2);
    color: var(--text-dim);
}

.rrn-theme .rrn-pnode svg {
    width: 15px;
    height: 15px;
}

.rrn-theme .rrn-pstep.complete .rrn-pnode {
    background: var(--rrn-green);
    border-color: var(--rrn-green);
    color: #fff;
}

.rrn-theme .rrn-pstep.active .rrn-pnode {
    border-color: transparent;
    background: transparent;
}

.rrn-theme .rrn-pspin {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--green-tint);
    border-top-color: var(--rrn-green);
    animation: rrnSpin .7s linear infinite;
}

@keyframes rrnSpin {
    to { transform: rotate(360deg); }
}

.rrn-theme .rrn-pcontent {
    padding-top: 4px;
    flex: 1;
    min-width: 0;
}

.rrn-theme .rrn-pl {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 9px;
}

.rrn-theme .rrn-pstep.pending .rrn-pl {
    color: var(--text-dim);
}

.rrn-theme .rrn-plive {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--green-dark);
    background: var(--green-tint);
    padding: 3px 8px;
    border-radius: 20px;
}

.rrn-theme .rrn-pm {
    font-size: 12.5px;
    color: var(--text-mid);
    margin-top: 3px;
}

/* ── View popup: header chrome + assessing context card ───────────────────── */
.rrn-theme .modal-head-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rrn-theme .rrn-eyebrow {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--green-dark);
}

.rrn-theme .proc-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--green-tint);
    color: var(--green-dark);
    display: grid;
    place-items: center;
    flex: none;
}

.rrn-theme .proc-mark svg {
    width: 20px;
    height: 20px;
}

.rrn-theme .proc-note {
    font-size: 12.5px;
    color: var(--text-mid);
}

.rrn-theme .modal-foot-spacer {
    flex: 1 1 auto;
}

.rrn-theme .rrn-proc {
    padding: 2px 0;
}

.rrn-theme .rrn-proc-ctx {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    margin-bottom: 24px;
}

.rrn-theme .rrn-proc-ctx-main .veh {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text);
}

.rrn-theme .rrn-proc-ctx-main .meta {
    font-size: 12.5px;
    color: var(--text-mid);
    margin-top: 2px;
}

/* ── Status badges (light, legible) ───────────────────────────────────────── */
.rrn-theme .job-status {
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: 4px 10px;
    border-radius: 6px;
    border-color: transparent;
}

.rrn-theme .status-green { background: var(--green-tint); color: var(--green-dark); border-color: transparent; }
.rrn-theme .status-amber { background: #fbf1d6; color: #8a6d0a; border-color: transparent; }
.rrn-theme .status-blue  { background: #e9f1fb; color: #2e6dd1; border-color: transparent; }
.rrn-theme .status-red   { background: var(--red-dim); color: var(--red); border-color: transparent; }
.rrn-theme .status-dim   { background: #eef0f2; color: var(--text-mid); border-color: transparent; }

/* Completed result view inside the popup */
.rrn-theme .assess-detail-body {
    padding: 0;
    gap: 16px;
}

.rrn-theme .assess-result-hero.assess-yes .assess-result-hero-outcome strong { color: var(--green-dark); }
.rrn-theme .assess-result-hero.assess-refer .assess-result-hero-outcome strong { color: #b8860b; }
.rrn-theme .assess-result-hero-outcome small { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--text-mid); }

/* ── Reports (light, mockup-aligned) ──────────────────────────────────────── */
.rrn-theme .reports-filter-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    border-radius: 12px;
    padding: 18px;
}

.rrn-theme .reports-filter-actions {
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.rrn-theme .period-input {
    font-family: var(--sans);
    font-size: 13px;
    border-radius: 9px;
    border-color: var(--border2);
    background: var(--surface);
    color: var(--text);
}

.rrn-theme .period-select--required {
    border-color: var(--rrn-green);
}

.rrn-theme .period-presets {
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 9px;
    padding: 3px;
    gap: 3px;
}

.rrn-theme .period-preset {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    border: none;
    border-radius: 7px;
    color: var(--text-mid);
}

.rrn-theme .period-preset.active,
.rrn-theme .period-preset:hover {
    background: var(--surface);
    color: var(--green-dark);
    box-shadow: var(--shadow-sm);
}

/* KPI cards: no glyph, value + label + helper like the mockup */
.rrn-theme .kpi-icon { display: none; }
.rrn-theme .kpi-card { padding: 15px 16px; gap: 4px; }
.rrn-theme .kpi-value { font-size: 24px; }
.rrn-theme .kpi-label {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-mid);
}
.rrn-theme .kpi-help { font-size: var(--fs-2xs); color: var(--text-dim); }

/* Chart card headers */
.rrn-theme .card-header h2,
.rrn-theme .conversion-breakdown h3 {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text);
}

.rrn-theme .card-header p { font-size: 12.5px; color: var(--text-mid); }

/* Mockup green heatmap levels */
.rrn-theme .heatmap-cell.level-1 { background: #d5f0e0; }
.rrn-theme .heatmap-cell.level-2 { background: #9fe0bd; }
.rrn-theme .heatmap-cell.level-3 { background: #54cf94; }
.rrn-theme .heatmap-cell.level-4 { background: #1fb877; }
.rrn-theme .heatmap-cell.level-5 { background: var(--green-dark); }

/* Brand-green progress bars */
.rrn-theme .enum-bar-track span,
.rrn-theme .conversion-bar-track span { background: var(--rrn-green); }

/* Data tables → mockup .dtable look (Assess-only via .reports-body) */
.rrn-theme .reports-body .report-table-card {
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.rrn-theme .reports-body .report-table-card h2 {
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
}

.rrn-theme .reports-body .report-table-scroll table {
    font-family: var(--sans);
    font-size: 13px;
}

.rrn-theme .reports-body .report-table-scroll th {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--text-dim);
    background: var(--surface2);
    padding: 12px 16px;
}

.rrn-theme .reports-body .report-table-scroll td {
    padding: 12px 16px;
    font-size: 13px;
}

.rrn-theme .reports-body .report-table-card tr:hover td {
    background: var(--surface2);
}

/* Pager */
.rrn-theme .pager {
    color: var(--text-mid);
    font-size: 13px;
}

/* Status dots + outcome pills in report tables */
.rrn-theme .status-dot {
    box-shadow: none;
    width: 8px;
    height: 8px;
    margin-right: 6px;
}
.rrn-theme .status-dot.ok { background: var(--rrn-green); }
.rrn-theme .status-dot.bad { background: var(--red); }
.rrn-theme .status-dot.warn { background: var(--rrn-mustard); }
.rrn-theme .status-dot.neutral { background: var(--text-dim); }

.rrn-theme .oc-pill { font-weight: 700; font-size: 13px; }
.rrn-theme .oc-pill.assess-yes { color: var(--green-dark); }
.rrn-theme .oc-pill.assess-no { color: var(--red); }

/* ── Form inputs (light) ──────────────────────────────────────────────────── */
.rrn-theme .f-input,
.rrn-theme .f-textarea,
.rrn-theme input[type="text"],
.rrn-theme input[type="email"],
.rrn-theme input[type="password"],
.rrn-theme input[type="date"],
.rrn-theme select.f-input,
.rrn-theme textarea {
    font-family: var(--sans);
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 9px;
    color: var(--text);
}

.rrn-theme .f-input:focus,
.rrn-theme .f-textarea:focus,
.rrn-theme textarea:focus {
    outline: none;
    border-color: var(--rrn-green);
    box-shadow: 0 0 0 3px rgba(28,196,120,.12);
}

/* ── Auth (login + request access) hero ───────────────────────────────────── */
.rrn-auth {
    min-height: 100vh;
    min-height: 100dvh;
}

.rrn-theme .login-panel-topbar {
    display: none;
}

.rrn-theme #assess-login-canvas {
    display: none;
}

.rrn-theme .login-panel-left {
    background: linear-gradient(155deg, #0c2448 0%, #0e2c54 55%, #10325f 100%);
    justify-content: stretch;
    padding: 46px 54px;
    color: #fff;
}

.rrn-theme .login-panel-left::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28,196,120,.30), transparent 65%);
}

.rrn-theme .login-panel-left::before {
    content: "";
    position: absolute;
    left: -90px;
    top: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28,196,120,.12), transparent 70%);
}

.rrn-theme .login-panel-content {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 0;
    gap: 0;
}

.rrn-theme .auth-hero-mid {
    margin: auto 0;
}

.ra-lock-lg {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}

.ra-lock-lg .ra-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--rrn-green);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(28,196,120,.35);
}

.ra-lock-lg .ra-mark svg {
    width: 24px;
    height: 24px;
}

.ra-lock-lg .nm {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.ra-lock-lg .nm b {
    font-weight: 800;
    color: var(--rrn-green);
}

.rrn-theme .auth-hero-mid h2 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.12;
    margin: 0 0 14px;
    max-width: 460px;
    color: #fff;
}

.rrn-theme .auth-hero-mid p {
    font-size: 15.5px;
    color: rgba(255,255,255,.72);
    max-width: 420px;
    line-height: 1.6;
    margin: 0;
}

.hero-points {
    margin: 28px 0 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.hero-point {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255,255,255,.82);
}

.hero-point .hp-ic {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(28,196,120,.2);
    color: var(--rrn-green);
    display: grid;
    place-items: center;
    flex: none;
}

.auth-hero-foot {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: 13px;
    color: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    gap: 9px;
}

.auth-hero-foot .auth-hero-mono {
    height: 20px;
    width: auto;
    display: block;
    flex: none;
}

.auth-hero-foot strong {
    color: rgba(255,255,255,.9);
    font-weight: 700;
}

/* ── Auth form panel (light) ──────────────────────────────────────────────── */
.rrn-theme .login-panel-right {
    width: 460px;
    border-left: none;
    padding: 40px;
}

.rrn-theme .login-form-icon {
    display: none;
}

.rrn-theme .login-form-wrap {
    max-width: 392px;
    gap: 0;
}

.rrn-theme .login-form-header {
    margin-bottom: 26px;
    gap: 6px;
}

.rrn-theme .login-form-title {
    font-family: var(--sans);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
}

.rrn-theme .login-form-sub {
    color: var(--text-mid);
    font-size: 14px;
}

.rrn-theme .login-field {
    margin-bottom: 15px;
}

.rrn-theme .login-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-mid);
    margin-bottom: 7px;
}

.rrn-theme .login-field input {
    width: 100%;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 9px;
    padding: 12px 13px;
}

.rrn-theme .login-field input:focus {
    outline: none;
    border-color: var(--rrn-green);
    box-shadow: 0 0 0 3px rgba(28,196,120,.12);
}

.rrn-theme .login-btn {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    border-radius: 9px;
    padding: 13px;
    background: var(--rrn-green);
    color: #fff;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
    transition: background .15s;
}

.rrn-theme .login-btn:hover:not(:disabled) {
    background: var(--green-dark);
}

.rrn-theme .login-btn--ghost,
.rrn-theme .login-btn-sso {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border2);
    margin-top: 12px;
}

.rrn-theme .login-btn--ghost:hover:not(:disabled),
.rrn-theme .login-btn-sso:hover:not(:disabled) {
    background: var(--surface2);
    border-color: var(--text-dim);
}

.rrn-theme .login-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.rrn-theme .login-divider::before,
.rrn-theme .login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.rrn-theme .login-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.rrn-theme .login-links a {
    font-size: 13px;
    font-weight: 700;
    color: var(--green-dark);
    text-decoration: none;
}

.rrn-theme .login-links a:hover {
    text-decoration: underline;
}

.rrn-theme .login-forgot {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--green-dark);
}

.rrn-theme .login-error {
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--red-dim);
    border: 1px solid rgba(216,83,78,.3);
    color: var(--red);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
}

.rrn-theme .login-identity {
    margin-bottom: 15px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 9px;
    padding: 11px 11px 11px 13px;
}

.rrn-theme .login-identity-email {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.rrn-theme .login-identity-change {
    font-size: 13px;
    font-weight: 700;
    color: var(--green-dark);
}

.rrn-theme .ok-box {
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--green-tint);
    border: 1px solid rgba(28,196,120,.3);
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 600;
}

.rrn-theme .login-footer {
    margin-top: 26px;
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
}

@media (max-width: 960px) {
    .rrn-theme .login-panel-left {
        display: none;
    }

    .rrn-theme .login-panel-right {
        width: 100%;
    }
}

/* ── List page: filter tabs + toolbar + rows (reusable) ───────────────────── */
.rrn-theme .filter-bar {
    padding: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.rrn-theme .filter-bar-inner {
    gap: 22px;
}

.rrn-theme .filter-tabs {
    gap: 22px;
}

.rrn-theme .filter-tab {
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-mid);
    height: 40px;
    padding: 0 1px;
}

.rrn-theme .filter-tab:hover {
    color: var(--text);
}

.rrn-theme .filter-tab.active {
    color: var(--navy);
    border-bottom-color: var(--rrn-green);
}

.rrn-theme .filter-tab-count {
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-dim);
    opacity: 1;
}

.rrn-theme .filter-tab.active .filter-tab-count {
    color: var(--green-dark);
}

.rrn-theme .sort-select,
.rrn-theme .assess-tenant-select,
.rrn-theme .assess-user-select,
.rrn-theme .assess-model-select,
.rrn-theme .assess-outcome-select,
.rrn-theme .assess-decision-select,
.rrn-theme .assess-date-filter {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid);
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 9px;
}

.rrn-theme .assess-tools-bar {
    border-bottom: none;
    padding: 0 0 14px;
    gap: 10px;
}

.rrn-theme .assess-search {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 9px;
}

.rrn-theme .assess-date-field {
    border-radius: 9px;
    background: var(--surface);
    border-color: var(--border2);
}

/* The list itself */
.rrn-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.rrn-lhead {
    display: grid;
    grid-template-columns: var(--rrn-cols, 118px 1fr 150px 130px 168px);
    gap: 18px;
    padding: 13px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
}

.rrn-lhead span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-dim);
}

.rrn-row {
    display: grid;
    grid-template-columns: var(--rrn-cols, 118px 1fr 150px 130px 168px);
    gap: 18px;
    align-items: center;
    padding: 15px 22px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .13s;
}

/* Grid items default to min-width:auto, so a cell never shrinks below its
   content and long text / button groups bleed into the next column. Letting
   every cell shrink to its track (and breaking long words) keeps content
   inside its column. */
.rrn-row > *,
.rrn-lhead > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Generic selected-row state (e.g. the row whose detail panel is open). */
.rrn-row.is-active {
    background: var(--surface2);
    border-left-color: var(--rrn-green);
}

/* Overdue / just-dispatched row accents (used by the Dispatch queue). */
.rrn-row.is-overdue {
    border-left-color: var(--red) !important;
}

.rrn-row.is-dispatching {
    animation: rrnRowDispatch .6s ease;
}

@keyframes rrnRowDispatch {
    0% { background: rgba(28, 196, 120, .18); }
    100% { background: transparent; }
}

.rrn-row + .rrn-row,
.rrn-row-skeleton + .rrn-row {
    border-top: 1px solid var(--border);
}

.rrn-row:hover {
    background: var(--surface2);
}

.rrn-row.assess-yes {
    border-left-color: var(--rrn-green);
}

.rrn-row.assess-no {
    border-left-color: var(--red);
}

.rrn-row.assess-refer {
    border-left-color: var(--rrn-mustard);
}

.rrn-veh {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}

.rrn-veh-muted {
    color: var(--text-dim);
    font-weight: 500;
    font-style: italic;
}

.rrn-vsub {
    font-size: 12.5px;
    color: var(--text-mid);
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.rrn-vsub .rrn-ph {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rrn-vsub .rrn-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--border2);
}

.rrn-row-progress {
    width: 56px;
    margin: 0;
}

.rrn-ref {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
}

.rrn-ref small {
    display: block;
    font-weight: 500;
    color: var(--text-mid);
    font-size: 12px;
    margin-top: 2px;
}

.rrn-when {
    font-size: 13px;
    color: var(--text-mid);
}

.rrn-when small {
    display: block;
    color: var(--text-dim);
    font-size: 11.5px;
    margin-top: 2px;
}

.rrn-outcome {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

.rrn-outcome .rrn-ov {
    font-size: 13.5px;
    font-weight: 700;
}

.rrn-outcome.assess-yes .rrn-ov {
    color: var(--green-dark);
}

.rrn-outcome.assess-no .rrn-ov {
    color: var(--red);
}

.rrn-outcome.assess-refer .rrn-ov {
    color: #b8860b;
}

.rrn-outcome .rrn-oc {
    font-size: 11.5px;
    color: var(--text-dim);
    font-family: var(--mono);
    margin-left: 4px;
}

.rrn-outcome .rrn-muted {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 500;
}

.rrn-row-skeleton {
    pointer-events: none;
}

/* Shimmer placeholder bars used inside .rrn-row-skeleton (shared so every app's
   list skeleton looks the same). */
.skel-bar {
    height: 9px;
    border-radius: 4px;
    background: var(--border2);
    position: relative;
    overflow: hidden;
}

.skel-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .05) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: skelShimmer 1.6s ease-in-out infinite;
}

@keyframes skelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skel-bar-sm { width: 80px; }
.skel-bar-lg { width: 65%; height: 12px; }
.skel-bar-md { width: 45%; }

.rrn-pager {
    margin: 16px 0 0;
}

@media (max-width: 960px) {
    .rrn-lhead {
        display: none;
    }

    .rrn-row {
        grid-template-columns: 90px 1fr;
        row-gap: 8px;
    }

    .rrn-row > .rrn-when,
    .rrn-row > .rrn-ref {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   SHARED PAGE FRAMEWORK — base layout for the cross-app building-block components
   (PageShell, PageHeader, ReportsFilterPanel, ReportsTabBar, KpiGrid/KpiCard,
   ReportCard/ChartCard, ReportsDrillModal). Every app inherits these; no app
   should re-declare them in scoped CSS. See .cursor/rules/shared-ui.mdc.
   ════════════════════════════════════════════════════════════════════════════ */

/* Page scaffold ----------------------------------------------------------- */
.rrn-page-full {
    padding: 24px 28px 48px;
}

.rrn-page-head-titles {
    min-width: 0;
}

.rrn-page-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Reports filter panel ---------------------------------------------------- */
.reports-filter-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface2, var(--bg)) 74%, var(--surface) 26%);
    margin-bottom: 18px;
}

.reports-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 12px;
    align-items: start;
}

.reports-filter-grid .filter-field,
.reports-filter-grid .filter-field :is(select, input) {
    min-width: 0;
    width: 100%;
}

.reports-filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.reports-filter-presets,
.reports-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.reports-action-buttons {
    justify-content: flex-end;
}

.period-input {
    min-height: 36px;
    min-width: 150px;
    padding: 7px 10px;
    border: 1px solid var(--border2);
    border-radius: 7px;
    background: var(--surface2, var(--bg));
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
}

.period-select--required {
    border-color: var(--accent);
}

.period-presets {
    display: flex;
    gap: 6px;
}

.period-preset {
    border: 1px solid var(--border2);
    border-radius: 7px;
    background: transparent;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    padding: 6px 12px;
    cursor: pointer;
}

.period-preset.active,
.period-preset:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Reports tab bar --------------------------------------------------------- */
.reports-tab-bar {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

.reports-tab {
    border: 0;
    background: transparent;
    color: var(--text-dim);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.reports-tab:hover {
    color: var(--text);
}

.reports-tab.active {
    color: var(--green-dark, var(--accent));
    border-bottom-color: var(--rrn-green, var(--accent));
}

/* Reports body + status --------------------------------------------------- */
.reports-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.report-loading,
.report-error,
.drill-banner {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-dim);
}

.report-error {
    color: var(--red, #f04c62);
}

.report-banner {
    padding: 10px 14px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
}

.report-banner.report-error {
    border-color: color-mix(in srgb, var(--red) 50%, var(--border));
    background: color-mix(in srgb, var(--red) 12%, var(--surface));
    color: var(--red);
}

.report-banner--ok {
    border-color: color-mix(in srgb, var(--green) 50%, var(--border));
    background: color-mix(in srgb, var(--green) 12%, var(--surface));
    color: var(--green);
}

.report-explainer {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
}

.report-explainer em {
    color: var(--text-bright);
}

.reports-loading-skeleton {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.reports-skeleton-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.reports-skeleton-kpi,
.reports-skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.reports-skeleton-kpi {
    min-height: 92px;
}

.reports-skeleton-chart {
    height: 220px;
    border-radius: 8px;
    background: var(--border2);
    position: relative;
    overflow: hidden;
}

.reports-skeleton-chart::after,
.reports-skeleton-row::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--text) 5%, transparent) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: skelShimmer 1.6s ease-in-out infinite;
}

.reports-skeleton-row {
    width: 100%;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.drill-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--accent);
}

/* KPI cards --------------------------------------------------------------- */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.kpi-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
}

button.kpi-card {
    cursor: pointer;
}

button.kpi-card:hover {
    border-color: color-mix(in srgb, var(--accent) 65%, var(--border) 35%);
}

.kpi-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
}

.kpi-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}

.kpi-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-bright);
}

.kpi-label {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.kpi-help {
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.35;
}

.accent-green .kpi-icon { color: #2fc58d; background: rgba(47, 197, 141, .1); border-color: rgba(47, 197, 141, .28); }
.accent-blue .kpi-icon { color: #2fb6d8; background: rgba(47, 182, 216, .1); border-color: rgba(47, 182, 216, .28); }
.accent-amber .kpi-icon { color: #d6a84f; background: rgba(214, 168, 79, .1); border-color: rgba(214, 168, 79, .28); }
.accent-red .kpi-icon { color: #d95d6a; background: rgba(217, 93, 106, .1); border-color: rgba(217, 93, 106, .28); }
.accent-purple .kpi-icon { color: #7d87d9; background: rgba(125, 135, 217, .1); border-color: rgba(125, 135, 217, .28); }
.accent-cyan .kpi-icon { color: #38b8b8; background: rgba(56, 184, 184, .1); border-color: rgba(56, 184, 184, .28); }

.accent-green::before { background: #2fc58d; }
.accent-blue::before { background: #2e6dd1; }
.accent-amber::before { background: var(--rrn-mustard, #e8b81c); }
.accent-red::before { background: var(--red, #d8534e); }
.accent-purple::before { background: #7a5cf0; }
.accent-cyan::before { background: #00cfb9; }

/* Report cards + charts --------------------------------------------------- */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.report-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(12, 36, 72, .05));
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.card-header h2 {
    margin: 0;
    color: var(--text-bright);
    font-size: 14px;
}

.card-header p {
    margin: 4px 0 0;
    color: var(--text-dim);
    font-size: 12px;
}

.card-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.report-card-body {
    padding: 18px;
}

.report-card-body--flush {
    padding: 0;
}

.report-card-body > :first-child {
    margin-top: 0;
}

.report-card-body > :last-child {
    margin-bottom: 0;
}

.chart-area {
    height: 280px;
    padding: 16px;
}

/* Report pager + table row helpers --------------------------------------- */
.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    color: var(--text-dim);
    font-family: var(--mono);
}

.clickable-row {
    cursor: pointer;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
}

.status-dot.ok { background: #25d695; }
.status-dot.bad { background: #f04c62; }
.status-dot.warn { background: #f0b429; }

/* ReportTable (base, theme-agnostic so the shared component styles itself anywhere) */
.report-table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.report-table-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.report-table-card > header h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-bright);
}

.report-table-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-table-scroll {
    overflow-x: auto;
}

.report-table-scroll table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text);
}

.report-table-scroll th {
    text-align: left;
    padding: 10px 14px;
    background: var(--surface2, var(--surface));
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.report-table-scroll td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.report-table-scroll tr:last-child td {
    border-bottom: 0;
}

/* Shared admin filter row (audit log, integration logs, etc.) */
.admin-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 14px;
}

.admin-filter-row .filter-field {
    min-width: 160px;
}

/* Shared API docs chrome (ApiDocsSection) */
.api-docs-baseurl {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface2, var(--surface));
}

.api-docs-baseurl-label {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Body that stacks an app's API endpoint cards consistently across apps. */
.api-docs-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

@media (max-width: 1100px) {
    .reports-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .reports-action-buttons {
        justify-content: flex-start;
    }

    .summary-grid,
    .report-grid {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   Iris — Rapid Intelligence (agent) surfaces
   The --iris-accent gradient is reserved for agent UI only, so the intelligent
   layer is instantly recognisable in every app. All other colours come from
   the shared theme tokens above.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --iris-accent: #7c6ff0;
    --iris-accent-2: #4aa3f0;
    --iris-grad: linear-gradient(135deg, var(--iris-accent), var(--iris-accent-2));
    --iris-glow: rgba(124, 111, 240, .35);
    --iris-tint: rgba(124, 111, 240, .08);
}

/* ── Orb + launcher ── */
.iris-orb {
    position: relative; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
    background: var(--iris-grad); display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 3px var(--iris-tint), 0 2px 10px var(--iris-glow);
}
.iris-orb-core {
    width: 12px; height: 12px; border-radius: 50%; background: #fff;
    box-shadow: inset 0 0 0 3px rgba(12, 36, 72, .35);
    animation: iris-iris 4.5s ease-in-out infinite;
}
.iris-orb.small { width: 26px; height: 26px; }
.iris-orb.small .iris-orb-core { width: 9px; height: 9px; }
@keyframes iris-iris {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(.72); }
}
.iris-launcher {
    position: fixed; right: 22px; bottom: 22px; z-index: 1050;
    display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px;
    border: 1px solid var(--border2); border-radius: 999px; cursor: pointer;
    background: var(--surface); color: var(--text-bright);
    font: 600 .85rem var(--sans); letter-spacing: .02em;
    box-shadow: 0 6px 24px rgba(7, 15, 29, .25);
    transition: transform .15s ease, box-shadow .15s ease;
}
.iris-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--iris-glow); }
.iris-launcher--split { gap:0; padding:0; overflow:hidden; cursor:default; }
.iris-launcher-main {
    display:flex; min-width:0; align-items:center; gap:10px; align-self:stretch;
    padding:8px 13px 8px 8px; border:0; background:transparent; color:inherit; cursor:pointer;
    font:inherit; letter-spacing:inherit;
}
.iris-launcher-main:focus-visible,.iris-launcher-chat:focus-visible { outline:2px solid var(--iris-accent); outline-offset:-3px; }
.iris-launcher-chat {
    position:relative; display:grid; width:46px; align-self:stretch; place-items:center;
    border:0; border-left:1px solid color-mix(in srgb,var(--iris-accent) 24%,var(--border));
    background:color-mix(in srgb,var(--iris-accent) 5%,transparent); color:var(--iris-accent);
    cursor:pointer; transition:background .14s ease,color .14s ease;
}
.iris-launcher-chat:hover { background:var(--iris-tint); color:var(--iris-accent-2); }
.iris-launcher-chat svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.iris-launcher-chat-dot { position:absolute; top:8px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--iris-accent-2); box-shadow:0 0 0 2px var(--surface); }
.iris-launcher-chat.has-update { background:var(--iris-tint); }
.iris-launcher-copy { display:flex; min-width:0; max-width:180px; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; }
.iris-launcher-label { max-width:100%; overflow:hidden; color:var(--text-bright); font-size:.82rem; font-weight:750; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.iris-launcher-meta { max-width:100%; overflow:hidden; color:var(--text-dim); font-size:var(--fs-2xs); font-weight:600; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.iris-launcher.has-update .iris-orb { animation: iris-pulse 1.6s ease-in-out infinite; }
.iris-launcher.has-context-arrival { animation:iris-context-arrival .72s cubic-bezier(.2,.9,.3,1); }
.iris-launcher.context-busy .iris-orb { animation:iris-pulse 1.25s ease-in-out infinite; }
.iris-launcher.context-busy .iris-orb-core { animation-duration:.8s; }
@keyframes iris-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--iris-tint), 0 2px 10px var(--iris-glow); }
    50% { box-shadow: 0 0 0 7px var(--iris-tint), 0 2px 16px var(--iris-glow); }
}
@keyframes iris-context-arrival {
    0% { opacity:.35; transform:translateX(12px) scale(.98); }
    42% { opacity:1; transform:translateX(0) rotate(-1.2deg) scale(1.01); }
    63% { transform:rotate(.9deg); }
    81% { transform:rotate(-.35deg); }
    100% { transform:none; }
}
@media (prefers-reduced-motion: reduce) {
    .iris-launcher.has-update .iris-orb,
    .iris-launcher.context-busy .iris-orb,
    .iris-launcher.has-context-arrival,
    .iris-orb-core { animation:none; }
}
.iris-update-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--iris-accent); }

/* ── Slide-over panel ── */
.iris-scrim { position: fixed; inset: 0; z-index: 1079; background: rgba(7, 15, 29, .35); backdrop-filter: blur(1.5px); }
.iris-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1080;
    width: min(480px, 96vw); min-width: 380px; max-width: 96vw; resize: horizontal; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--surface); border-left: 1px solid var(--border2);
    box-shadow: -18px 0 48px rgba(7, 15, 29, .35);
    animation: iris-slide-in .22s cubic-bezier(.2, .9, .3, 1);
    direction: rtl; /* puts the resize handle on the left edge */
}
.iris-panel > * { direction: ltr; }
@keyframes iris-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.iris-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--iris-tint), transparent);
}
.iris-head-brand { display: flex; align-items: center; gap: 10px; }
.iris-title { font: 700 1rem var(--sans); color: var(--text-bright); line-height: 1.1; }
.iris-sub { font: 500 var(--fs-2xs) var(--sans); color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; }
.iris-head-actions { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* The contextual output and conversational agent share one explicit Iris
   surface. Users only see tabs for capabilities they actually have. */
.iris-surface-tabs {
    display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:8px 12px;
    border-bottom:1px solid var(--border); background:var(--surface2);
}
.iris-surface-tab {
    position:relative; display:flex; min-width:0; align-items:center; justify-content:center; gap:7px;
    min-height:34px; padding:6px 10px; border:1px solid transparent; border-radius:9px;
    background:transparent; color:var(--text-dim); cursor:pointer;
    font:700 .74rem var(--sans); transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.iris-surface-tab:hover { color:var(--text-bright); background:var(--surface); }
.iris-surface-tab.active { border-color:color-mix(in srgb,var(--iris-accent) 28%,var(--border)); background:var(--surface); color:var(--iris-accent); box-shadow:var(--shadow-sm); }
.iris-surface-unread { width:7px; height:7px; border-radius:50%; background:var(--iris-accent); box-shadow:0 0 0 3px var(--iris-tint); }
@media (max-width:520px) {
    .iris-panel { width:100vw; min-width:0; max-width:none; resize:none; }
    .iris-launcher { right:14px; bottom:14px; }
    .iris-convo-trigger { max-width:130px; }
}

/* ── Conversation picker (custom dropdown; native select clipped long titles) ── */
.iris-convo-menu { position: relative; min-width: 0; }
.iris-convo-trigger {
    display: flex; align-items: center; gap: 6px; max-width: 170px; height: 28px; cursor: pointer;
    font: 500 .72rem var(--sans); color: var(--text);
    background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 0 8px;
}
.iris-convo-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.iris-convo-trigger-caret { color: var(--text-dim); font-size: var(--fs-2xs); flex-shrink: 0; }
.iris-convo-menu-scrim { position: fixed; inset: 0; z-index: 1081; }
.iris-convo-menu-list {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 1082;
    width: 300px; max-height: 340px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border2); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(7, 15, 29, .25); padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
}
.iris-convo-menu-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
    border: none; background: transparent; border-radius: 8px; padding: 7px 9px;
    cursor: pointer; text-align: left;
}
.iris-convo-menu-item:hover { background: var(--surface2); }
.iris-convo-menu-item.active { background: var(--iris-tint); }
.iris-convo-menu-title {
    font: 600 .74rem var(--sans); color: var(--text-bright); max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iris-convo-menu-when { font: 500 var(--fs-2xs) var(--mono); color: var(--text-dim); }
.iris-convo-menu-new { flex-direction: row; font: 600 .72rem var(--sans); color: var(--iris-accent); }
.iris-convo-menu-empty { font: 400 .72rem var(--sans); color: var(--text-dim); padding: 8px 9px; }
.iris-icon-btn {
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text); cursor: pointer; font-size: .85rem;
}
.iris-icon-btn:hover { color: var(--text-bright); border-color: var(--border2); }
.iris-pad { margin: 12px 14px; }

/* ── Messages ── */
.iris-messages { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.iris-empty { margin: auto; text-align: center; padding: 32px 22px; max-width: 320px; }
.iris-empty-orb { display: flex; justify-content: center; margin-bottom: 14px; }
.iris-empty-orb span {
    width: 44px; height: 44px; border-radius: 50%; background: var(--iris-grad);
    box-shadow: 0 0 0 6px var(--iris-tint), 0 4px 20px var(--iris-glow);
    animation: iris-pulse 3s ease-in-out infinite;
}
.iris-empty-title { font: 700 1.05rem var(--sans); color: var(--text-bright); margin-bottom: 6px; }
.iris-empty-sub { font: 400 .8rem/1.5 var(--sans); color: var(--text-dim); }
.iris-msg-user {
    align-self: flex-end; max-width: 88%;
    background: var(--iris-grad); color: #fff; font: 500 .84rem/1.45 var(--sans);
    padding: 9px 13px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; word-break: break-word;
}
.iris-msg-assistant { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }

/* ── Live activity ── */
.iris-activity, .iris-activity-solo {
    border: 1px solid var(--border); border-left: 3px solid var(--iris-accent);
    border-radius: 10px; background: var(--surface2); font: 500 .76rem var(--sans); color: var(--text);
}
.iris-activity summary {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none;
}
.iris-activity summary::-webkit-details-marker { display: none; }
.iris-activity-solo { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.iris-activity-done { color: var(--text-dim); }
.iris-activity-body { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 5px; }
.iris-working { display: inline-flex; gap: 3px; }
.iris-working span {
    width: 5px; height: 5px; border-radius: 50%; background: var(--iris-accent);
    animation: iris-think 1.2s ease-in-out infinite;
}
.iris-working span:nth-child(2) { animation-delay: .15s; }
.iris-working span:nth-child(3) { animation-delay: .3s; }
@keyframes iris-think { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.iris-plan { border-bottom: 1px dashed var(--border); padding-bottom: 8px; margin-bottom: 4px; }
.iris-plan-title { font: 700 var(--fs-2xs) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--iris-accent); margin-bottom: 4px; }
.iris-plan-step { font: 500 .74rem/1.45 var(--sans); color: var(--text); padding-left: 14px; position: relative; }
.iris-plan-step::before { content: '›'; position: absolute; left: 2px; color: var(--iris-accent); }
.iris-step { display: flex; align-items: baseline; gap: 8px; }
.iris-step-marker {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; align-self: center;
    border: 2px solid var(--iris-accent); background: transparent;
}
.iris-step.running .iris-step-marker { animation: iris-pulse 1.2s ease-in-out infinite; }
.iris-step.done .iris-step-marker { background: var(--accent); border-color: var(--accent); }
.iris-step-text { flex: 1; font: 500 .75rem/1.4 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.iris-step.done .iris-step-text { color: var(--text-dim); }
.iris-step-ms { font: 500 var(--fs-2xs) var(--mono); color: var(--text-dim); }

/* ── Answer blocks ── */
.iris-block { display: flex; flex-direction: column; gap: 6px; }
.iris-block .iris-md-p { font: 400 .84rem/1.55 var(--sans); color: var(--text); margin: 0 0 6px; }
.iris-block .iris-md-p strong, .iris-block li strong { color: var(--text-bright); }
.iris-md-heading { font: 700 .9rem var(--sans); color: var(--text-bright); margin: 6px 0 2px; }
.iris-md-list { margin: 0 0 6px; padding-left: 20px; font: 400 .82rem/1.55 var(--sans); color: var(--text); }
.iris-md-code, .iris-code {
    font: 500 .76rem var(--mono); background: var(--surface2);
    border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; color: var(--text-bright);
}
.iris-code { display: block; padding: 10px 12px; overflow-x: auto; white-space: pre; }
.iris-md-link { color: var(--iris-accent); text-decoration: none; }
.iris-md-link:hover { text-decoration: underline; }
.iris-md-table-wrap, .iris-table-wrap { overflow-x: auto; }
.iris-md-table, .iris-table { width: 100%; border-collapse: collapse; font: 400 .78rem var(--sans); }
.iris-md-table th, .iris-table th {
    text-align: left; font: 700 var(--fs-2xs) var(--sans); letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-dim); padding: 7px 10px; border-bottom: 1px solid var(--border2); white-space: nowrap;
}
.iris-md-table td, .iris-table td {
    padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text);
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.iris-table-card, .iris-chart-card, .iris-entity, .iris-timeline {
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); padding: 12px 14px;
}
.iris-table-title, .iris-timeline-title { font: 700 .8rem var(--sans); color: var(--text-bright); margin-bottom: 8px; }
.iris-table-caption { font: 400 .7rem var(--sans); color: var(--text-dim); margin-top: 8px; }
.iris-table-more {
    margin-top: 8px; border: 1px solid var(--border); background: transparent; color: var(--iris-accent);
    font: 600 .72rem var(--sans); border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.iris-notice { border-radius: 10px; padding: 9px 12px; font: 500 .78rem/1.5 var(--sans); border: 1px solid var(--border); }
.iris-notice .iris-md-p { margin: 0; font-size: .78rem; }
.iris-notice-info { background: var(--iris-tint); border-color: var(--iris-accent); color: var(--text); }
.iris-notice-warn { background: color-mix(in srgb, var(--amber) 10%, transparent); border-color: var(--amber); color: var(--text); }
.iris-notice-success { background: var(--accent-dim); border-color: var(--accent); color: var(--text); }
.iris-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.iris-kpi {
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface2);
    padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.iris-kpi-value { font: 800 1.25rem var(--sans); color: var(--text-bright); font-variant-numeric: tabular-nums; }
.iris-kpi-label { font: 600 var(--fs-2xs) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.iris-kpi-delta { font: 600 var(--fs-2xs) var(--sans); color: var(--iris-accent); }
.iris-kpi-green .iris-kpi-value { color: var(--accent); }
.iris-kpi-amber .iris-kpi-value { color: var(--amber); }
.iris-kpi-red .iris-kpi-value { color: var(--red); }
.iris-entity-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.iris-entity-title { font: 700 .9rem var(--sans); color: var(--text-bright); }
.iris-entity-subtitle { font: 500 .72rem var(--sans); color: var(--text-dim); }
.iris-entity-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; }
.iris-entity-field { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.iris-entity-label { font: 600 var(--fs-2xs) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.iris-entity-value { font: 500 .8rem/1.4 var(--sans); color: var(--text-bright); overflow-wrap: anywhere; }
.iris-timeline { display: flex; flex-direction: column; gap: 10px; }
.iris-timeline-event { display: flex; gap: 10px; position: relative; }
.iris-timeline-event:not(:last-child)::before {
    content: ''; position: absolute; left: 4px; top: 14px; bottom: -12px; width: 1px; background: var(--border2);
}
.iris-timeline-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--iris-accent); flex: 0 0 auto; margin-top: 4px; }
.iris-tone-warn .iris-timeline-dot { background: var(--amber); }
.iris-tone-danger .iris-timeline-dot, .iris-tone-red .iris-timeline-dot { background: var(--red); }
.iris-tone-success .iris-timeline-dot, .iris-tone-green .iris-timeline-dot { background: var(--accent); }
.iris-timeline-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.iris-timeline-when { font: 600 var(--fs-2xs) var(--mono); color: var(--text-dim); }
.iris-timeline-what { font: 600 .8rem var(--sans); color: var(--text-bright); }
.iris-timeline-detail { font: 400 .76rem/1.5 var(--sans); color: var(--text); }
.iris-chart svg { width: 100%; height: auto; display: block; }
.iris-chart-grid { stroke: var(--border); stroke-width: 1; }
.iris-chart-axis { display: flex; justify-content: space-between; font: 500 var(--fs-2xs) var(--sans); color: var(--text-dim); margin-top: 4px; }
.iris-chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.iris-chart-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.iris-chart-bar-stack { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.iris-chart-bar { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; min-height: 2px; }
.iris-chart-bar-label {
    font: 500 var(--fs-2xs) var(--sans); color: var(--text-dim); max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iris-chart-donut { display: flex; align-items: center; gap: 14px; }
.iris-chart-donut svg { width: 110px; flex: 0 0 auto; transform: rotate(-90deg); }
.iris-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font: 500 .7rem var(--sans); color: var(--text); }
.iris-chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.iris-navigate {
    display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
    border: 1px solid var(--iris-accent); border-radius: 12px; padding: 10px 14px;
    background: var(--iris-tint); color: var(--text-bright); font: 600 .8rem var(--sans);
    transition: transform .12s ease;
}
.iris-navigate:hover { transform: translateX(3px); }
.iris-navigate-kicker { font: 700 var(--fs-2xs) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--iris-accent); }
.iris-navigate-label { flex: 1; }
.iris-navigate-arrow { color: var(--iris-accent); font-size: 1rem; }

/* ── Artifact download card (Iris-generated PDF/CSV) ── */
.iris-artifact {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
    border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
    background: var(--surface2); color: var(--text-bright); font: 600 .8rem var(--sans);
    transition: border-color .12s ease, transform .12s ease;
}
.iris-artifact:hover:not(:disabled) { border-color: var(--iris-accent); transform: translateY(-1px); }
.iris-artifact:disabled { opacity: .6; cursor: progress; }
.iris-artifact-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 44px; height: 44px; border-radius: 10px; color: #fff;
    font: 800 var(--fs-2xs) var(--sans); letter-spacing: .04em;
}
.iris-artifact-pdf { background: linear-gradient(135deg, #d64a4a, #b83232); }
.iris-artifact-csv { background: linear-gradient(135deg, #1cc478, #16a463); }
.iris-artifact-file { background: linear-gradient(135deg, #7c6ff0, #4aa3f0); }
.iris-artifact-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.iris-artifact-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iris-artifact-meta { font: 500 .7rem var(--sans); color: var(--text-dim); }
.iris-artifact-action {
    flex: 0 0 auto; font: 700 .72rem var(--sans); color: var(--iris-accent);
    border: 1px solid var(--iris-accent); border-radius: 8px; padding: 6px 12px;
}

/* ── Evidence chips ── */
.iris-evidence { align-self: flex-start; }
.iris-evidence summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
    font: 600 var(--fs-2xs) var(--sans); letter-spacing: .05em; color: var(--text-dim);
    border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; background: var(--surface2);
}
.iris-evidence summary::-webkit-details-marker { display: none; }
.iris-evidence-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.iris-evidence-list {
    margin-top: 6px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface2); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px;
}
.iris-evidence-item { display: flex; align-items: baseline; gap: 8px; font: 500 .7rem var(--sans); color: var(--text); }
.iris-evidence-item code { font: 500 var(--fs-2xs) var(--mono); color: var(--iris-accent); }
.iris-evidence-ms { margin-left: auto; font: 500 var(--fs-2xs) var(--mono); color: var(--text-dim); }

/* ── Ask options, coverage, feedback ── */
.iris-options { display: flex; flex-wrap: wrap; gap: 6px; }
.iris-options button {
    border: 1px solid var(--iris-accent); background: transparent; color: var(--iris-accent);
    font: 600 .74rem var(--sans); border-radius: 999px; padding: 6px 13px; cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.iris-options button:hover:not(:disabled) { background: var(--iris-grad); color: #fff; border-color: transparent; }
.iris-turn-foot { display: flex; align-items: center; gap: 10px; }
.iris-coverage {
    font: 600 var(--fs-2xs) var(--sans); letter-spacing: .06em; text-transform: uppercase;
    color: var(--amber); border: 1px solid var(--amber); border-radius: 999px; padding: 2px 8px;
}
.iris-feedback { margin-left: auto; display: inline-flex; gap: 2px; }
.iris-feedback button {
    border: none; background: transparent; cursor: pointer; font-size: .8rem;
    opacity: .35; padding: 2px 4px; border-radius: 6px; transition: opacity .12s ease;
}
.iris-feedback button:hover, .iris-feedback button.sel { opacity: 1; }

/* ── Compose ── */
.iris-error { margin: 6px 14px; font: 500 .74rem var(--sans); color: var(--red); }
.iris-compose { border-top: 1px solid var(--border); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.iris-context-chip {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
    font: 600 var(--fs-2xs) var(--sans); color: var(--iris-accent);
    border: 1px solid var(--iris-accent); border-radius: 999px; padding: 3px 6px 3px 10px; background: var(--iris-tint);
}
.iris-context-chip button { border: none; background: transparent; color: inherit; cursor: pointer; font-size: .85rem; line-height: 1; }
.iris-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.iris-compose textarea {
    flex: 1; resize: none; border: 1px solid var(--border2); border-radius: 12px;
    background: var(--surface2); color: var(--text-bright); font: 500 .84rem/1.4 var(--sans);
    padding: 10px 12px; outline: none;
}
.iris-compose textarea:focus { border-color: var(--iris-accent); box-shadow: 0 0 0 3px var(--iris-tint); }
.iris-send {
    width: 38px; height: 38px; border-radius: 12px; border: none; cursor: pointer;
    background: var(--iris-grad); color: #fff; font-size: 1rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    transition: transform .12s ease, opacity .12s ease;
}
.iris-send:hover:not(:disabled) { transform: translateY(-1px); }
.iris-send:disabled { opacity: .4; cursor: default; }
.iris-send.iris-stop { background: var(--red); font-size: .7rem; }

/* Compact deep-investigation toggle in the narrow panel's composer — icon-only
   counterpart of the workspace's labelled pill, same state colours. */
.iris-deep-icon {
    width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; cursor: pointer;
    border: 1px solid var(--border2); background: var(--surface2); color: var(--text-dim);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
    transition: color .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.iris-deep-icon:hover { color: var(--text-bright); border-color: var(--iris-accent); }
.iris-deep-icon.on {
    color: var(--iris-accent); border-color: var(--iris-accent); background: var(--iris-tint);
    box-shadow: 0 0 8px var(--iris-tint);
}

/* ── Composer meta row: deep-investigation toggle + context ring ── */
.iris-compose-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 6px; min-height: 20px;
}
.iris-deep-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border2); border-radius: 999px; cursor: pointer;
    background: var(--surface2); color: var(--text-dim); font: 600 var(--fs-2xs)/1 var(--sans);
    padding: 4px 10px; transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.iris-deep-toggle:hover { color: var(--text-bright); border-color: var(--iris-accent); }
.iris-deep-toggle.on {
    color: var(--iris-accent); border-color: var(--iris-accent); background: var(--iris-tint);
}
.iris-deep-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--border2);
    transition: background .12s ease, box-shadow .12s ease;
}
.iris-deep-toggle.on .iris-deep-dot { background: var(--iris-accent); box-shadow: 0 0 6px var(--iris-accent); }
.iris-context-ring {
    display: inline-flex; align-items: center; gap: 5px; cursor: help;
    color: var(--text-dim); font: 600 var(--fs-2xs)/1 var(--mono, monospace);
}
.iris-ring-track { fill: none; stroke: var(--border2); stroke-width: 2.5; }
.iris-ring-fill {
    fill: none; stroke: var(--iris-accent); stroke-width: 2.5; stroke-linecap: round;
    transition: stroke-dasharray .4s ease;
}
.iris-ring-fill.hot { stroke: var(--red); }
.iris-context-pct { letter-spacing: .02em; }

/* ── Workspace (/agent) ── */
.iris-ws {
    display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px;
    gap: 0; height: calc(100vh - 120px); min-height: 480px;
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface);
    /* width:100% keeps the workspace at its full capped width from first paint,
       so it never shrink-wraps to the conversation and jumps as answers render. */
    margin: 18px auto; width: 100%; max-width: 1600px; box-sizing: border-box;
}
.iris-ws-denied { margin: 40px auto; text-align: center; font: 500 .9rem var(--sans); color: var(--text-dim); }
.iris-ws-sidebar {
    border-right: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 12px;
    background: var(--surface2); overflow-y: auto; min-height: 0;
}
.iris-ws-brand { display: flex; align-items: center; gap: 10px; }
/* min-height:0 lets the list shrink so the memory panel stays pinned and visible
   at the bottom of the sidebar however long the conversation list gets. */
.iris-ws-convos { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; }
.iris-ws-convo {
    position: relative; display: flex; flex-direction: column; gap: 1px; cursor: pointer;
    border-radius: 10px; padding: 8px 26px 8px 10px; border: 1px solid transparent;
}
.iris-ws-convo:hover { background: var(--surface); }
.iris-ws-convo.active { background: var(--surface); border-color: var(--iris-accent); }
.iris-ws-convo-title {
    font: 600 .76rem var(--sans); color: var(--text-bright);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iris-ws-convo-when { font: 500 var(--fs-2xs) var(--mono); color: var(--text-dim); }
.iris-ws-convo-archive {
    position: absolute; right: 6px; top: 8px; border: none; background: transparent;
    color: var(--text-dim); cursor: pointer; font-size: .85rem; opacity: 0;
}
.iris-ws-convo:hover .iris-ws-convo-archive { opacity: 1; }
.iris-ws-none { font: 400 .76rem/1.5 var(--sans); color: var(--text-dim); padding: 6px 2px; }
.iris-ws-memory summary { font: 600 .72rem var(--sans); color: var(--text); cursor: pointer; margin-bottom: 6px; }
.iris-ws-memory textarea {
    width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text); font: 400 .74rem/1.45 var(--sans); padding: 8px 10px;
}
.iris-ws-memory-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.iris-ws-memory { flex-shrink: 0; margin-top: auto; }
.iris-ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* min-height:0 makes long conversations scroll inside this pane instead of
   pushing the composer (and the whole grid) past the bottom of the screen. */
.iris-ws-messages { flex: 1; overflow-y: auto; padding: 20px 22px 8px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.iris-ws-compose { padding: 12px 22px 16px; }
.iris-ws-detail {
    border-left: 1px solid var(--border); background: var(--surface2);
    padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
}
.iris-ws-detail-title { font: 700 var(--fs-2xs) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--iris-accent); }
.iris-ws-usage {
    display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--border); font: 500 var(--fs-2xs) var(--mono); color: var(--text-dim);
}
@media (max-width: 1080px) { .iris-ws { grid-template-columns: 220px minmax(0, 1fr); } .iris-ws-detail { display: none; } }
@media (max-width: 760px) { .iris-ws { grid-template-columns: minmax(0, 1fr); height: auto; } .iris-ws-sidebar { display: none; } }

/* ── Iris full-screen in-page overlay (expand from the docked panel) ── */
.iris-ws-overlay {
    position: fixed; inset: 0; z-index: 1090;
    display: flex; padding: 16px; box-sizing: border-box;
    background: rgba(7, 15, 29, .55); backdrop-filter: blur(3px);
    animation: iris-ws-overlay-in .16s ease-out;
}
@keyframes iris-ws-overlay-in { from { opacity: 0; } to { opacity: 1; } }
/* Fill the overlay: drop the page margins and let the grid take the full height. */
.iris-ws-overlay .iris-ws {
    height: auto; margin: 0 auto; min-height: 0; width: 100%;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.iris-ws-overlaid { position: relative; }
/* Window controls float over the detail pane's top-right corner. */
.iris-ws-winctl {
    position: absolute; top: 10px; right: 12px; z-index: 2;
    display: flex; align-items: center; gap: 4px;
    padding: 3px; border-radius: 10px;
    background: color-mix(in srgb, var(--surface2) 82%, transparent);
    border: 1px solid var(--border);
}
/* Keep the "Investigation" heading clear of the floating controls. */
.iris-ws-overlaid .iris-ws-detail { padding-top: 42px; }
@media (max-width: 1080px) { .iris-ws-overlaid .iris-ws-detail { padding-top: 14px; } }

/* ── Admin ── */
.iris-admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; margin-bottom: 16px; }
.iris-admin-kpi {
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface2);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.iris-admin-kpi b { font: 800 1.2rem var(--sans); color: var(--text-bright); font-variant-numeric: tabular-nums; }
.iris-admin-kpi span { font: 600 var(--fs-2xs) var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
.iris-admin-filter { display: flex; gap: 8px; margin-top: 16px; margin-bottom: 12px; max-width: 420px; }
.iris-admin-convo-cols { display: grid; grid-template-columns: 110px 140px 90px minmax(0, 1fr) 60px; gap: 10px; }
.iris-admin-convo-row { cursor: pointer; }
.iris-admin-coverage-cols { display: grid; grid-template-columns: 110px 140px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.iris-admin-eval-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 150px 70px; gap: 10px; }
.iris-admin-eval-new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-top: 16px; margin-bottom: 14px; }
.iris-admin-back {
    border: none; background: transparent; color: var(--iris-accent); cursor: pointer;
    font: 600 .76rem var(--sans); margin-top: 4px; margin-bottom: 10px; padding: 0;
}
.iris-admin-transcript { display: flex; flex-direction: column; gap: 14px; max-width: 860px; margin-bottom: 18px; }
/* The settings form grid sits flush under the section header without this. */
.iris-admin-rules { margin-top: 14px; margin-bottom: 18px; }
.iris-admin-turn-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 500 .7rem var(--sans); color: var(--text-dim); }
.iris-admin-trace-btn {
    border: 1px solid var(--border); background: transparent; color: var(--iris-accent);
    font: 600 var(--fs-2xs) var(--sans); border-radius: 999px; padding: 2px 10px; cursor: pointer;
}
.iris-admin-trace { display: flex; flex-direction: column; gap: 8px; border-left: 3px solid var(--iris-accent); padding-left: 12px; }
.iris-admin-trace-step { border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); padding: 8px 10px; }
.iris-admin-trace-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font: 600 .7rem var(--sans); color: var(--text); }
.iris-admin-trace-kind {
    font: 700 var(--fs-2xs) var(--sans); letter-spacing: .08em; text-transform: uppercase;
    color: var(--iris-accent);
}
.iris-admin-trace-head code { font: 500 var(--fs-2xs) var(--mono); color: var(--text-bright); overflow-wrap: anywhere; }
.iris-admin-trace-reason { font: 400 .72rem/1.45 var(--sans); color: var(--text); margin-top: 3px; }
.iris-admin-trace-preview {
    font: 400 var(--fs-2xs)/1.5 var(--mono); color: var(--text-dim); margin-top: 5px;
    max-height: 120px; overflow: auto; white-space: pre-wrap; word-break: break-word;
    border-top: 1px dashed var(--border); padding-top: 5px;
}


/* Canonical operational list alignment for admin tables migrated to RrnList. */
.admin-engineer-list .rrn-row {
    align-items: center;
}

.admin-engineer-list .row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
}

.admin-engineer-list .contact-cell,
.admin-engineer-list .eng-name-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.admin-engineer-list .skills-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.admin-engineer-filters {
    margin-bottom: 12px;
}