/* ============================================================
   MetroASAP - Application Shell (core staff styles)
   Portal, technician, and FOIA styles load per-layout via HeadContent.
   Breakpoints: see mobile.css :root and MetroBreakpoints.cs (768/900/991/640/480).
   ============================================================ */

:root {
    /* OS / WebView text sizing (iOS Dynamic Type via metroAsap.setSysFontScale; Android uses WebView TextZoom). */
    --metro-sys-font-scale: 1;
    --sidebar-width: 240px;
    --sidebar-customize-width: 360px;
    --sidebar-collapsed-width: 56px;
    --topbar-height: 56px;
    /* Fixed Assist / request FAB stack (bottom-right) - keep page controls clear of it */
    --metro-fab-size: 3.25rem;
    --metro-fab-gap: 0.5rem;
    --metro-fab-inset: 1rem;
    --metro-fab-stack-slots: 1;
    --metro-fab-clearance-bottom: calc(
        var(--metro-fab-inset)
        + (var(--metro-fab-stack-slots) * var(--metro-fab-size))
        + ((var(--metro-fab-stack-slots) - 1) * var(--metro-fab-gap))
        + 0.75rem
    );
    --metro-fab-clearance-end: calc(var(--metro-fab-inset) + var(--metro-fab-size) + 0.75rem);
    --metro-primary: #1a56db;
    --metro-primary-dark: #1340a8;
    --metro-secondary: #6b7280;
    --metro-success: #057a55;
    --metro-warning: #c27803;
    --metro-danger: #c81e1e;
    --metro-info: #0e9f6e;
    --metro-surface: #ffffff;
    --metro-surface-raised: #fafbfc;
    --metro-surface-muted: #f1f5f9;
    --metro-surface-float: #ffffff;
    --metro-bg: #f3f4f6;
    --metro-border: #e5e7eb;
    --metro-border-strong: #cbd5e1;
    --metro-text: #111827;
    --metro-text-muted: #6b7280;
    --metro-sidebar-bg: #1e2538;
    --metro-sidebar-text: #d1d5db;
    --metro-sidebar-active: #1a56db;
    --metro-sidebar-hover: rgba(255, 255, 255, 0.07);
    --metro-hover: rgba(15, 23, 42, 0.04);
    --metro-active: rgba(26, 86, 219, 0.12);
    --metro-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.05);
    --metro-shadow-lg: 0 20px 44px rgba(15, 23, 42, 0.16);
    --metro-overlay: rgba(15, 23, 42, 0.52);
    --metro-card-sheen: rgba(255, 255, 255, 0.7);
    --metro-card-glow: rgba(26, 86, 219, 0.08);
    /* Emil motion tokens */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --duration-press: 140ms;
    --duration-ui: 200ms;
    --duration-popover: 180ms;
    --duration-drawer: 280ms;
    --transition: var(--duration-ui) var(--ease-out);
    /* Spacing scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    /* Typography scale */
    --text-sm: 0.8125rem;
    --text-base: 0.9rem;
    --text-lg: 1.0625rem;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --tracking-tight: -0.015em;
    /* Outdoor / high-contrast-light — extends existing tokens. Picasso can fill values.
       Do not reuse .senior-high-contrast (dark). Host chrome reads --metro-outdoor-*. */
    --metro-outdoor-bg: #ffffff;
    --metro-outdoor-surface: #ffffff;
    --metro-outdoor-text: #111827;
    --metro-outdoor-border: #111827;
    --metro-outdoor-chrome: #ffffff;
    --metro-outdoor-accent: #0f172a;
    --metro-outdoor-muted: #334155;
    --metro-outdoor-cta: #111827;
    --metro-outdoor-cta-text: #ffffff;
}

/* Host hook only. Picasso owns `.tech-shell[data-contrast="outdoor"]` visual tokens. */

/* Darkness levels via data-theme-level (5 = white, 1 = pure black).
   data-theme / data-bs-theme stay binary light|dark for Bootstrap + feature CSS:
   levels 1–3 → dark axis, 4–5 → light axis.

   Every level defines the full surface ramp so feature CSS can stay on tokens:
     bg < surface < raised < float (windows, menus); muted = wells and chips;
     field-* = inputs, inset against whatever surface they sit on.
   The accent (--metro-primary, --bs-primary-rgb, --metro-on-primary) is shaded
   per level here for Metro Blue. A user-chosen color is shaded the same way by
   shadeAccentForLevel (metroThemeInit.js + metroAsap.js) and set inline on
   <html>, along with data-metro-on-primary="light|dark" for check marks. */

:root {
    --metro-text-secondary: #374151;
    --metro-field-bg: #ffffff;
    --metro-field-border: #d1d5db;
    --metro-field-disabled-bg: #f1f5f9;
    --metro-on-primary: #ffffff;
    --metro-primary-soft: rgba(var(--bs-primary-rgb), 0.12);
    --metro-primary-softer: rgba(var(--bs-primary-rgb), 0.06);
    --metro-primary-line: rgba(var(--bs-primary-rgb), 0.35);
    --metro-active: rgba(var(--bs-primary-rgb), 0.12);
    --metro-card-glow: rgba(var(--bs-primary-rgb), 0.08);
}

:root[data-theme-level="4"] {
    color-scheme: light;
    --metro-primary: #174dc5;
    --metro-primary-dark: #113b9b;
    --metro-sidebar-active: #174dc5;
    --bs-primary-rgb: 23, 77, 197;
    --bs-link-color-rgb: 23, 77, 197;
    --metro-surface: #eceff2;
    --metro-surface-raised: #f4f5f7;
    --metro-surface-muted: #dde2e8;
    --metro-surface-float: #f7f8fa;
    --metro-bg: #dfe3e8;
    --metro-border: #c5cad3;
    --metro-border-strong: #a8b0bc;
    --metro-field-bg: #fafbfc;
    --metro-field-border: #b4bcc8;
    --metro-field-disabled-bg: #e4e8ed;
    --metro-text: #111827;
    --metro-text-secondary: #2f3744;
    --metro-text-muted: #545d6b;
    --metro-hover: rgba(15, 23, 42, 0.06);
    --metro-active: rgba(var(--bs-primary-rgb), 0.14);
    --metro-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.07);
    --metro-shadow-lg: 0 20px 44px rgba(15, 23, 42, 0.18);
    --metro-overlay: rgba(15, 23, 42, 0.56);
    --metro-card-sheen: rgba(255, 255, 255, 0.4);
    /* Bootstrap surfaces follow the Soft ramp instead of Bootstrap's white. */
    --bs-body-bg: var(--metro-bg);
    --bs-body-bg-rgb: 223, 227, 232;
    --bs-secondary-bg: #d6dce3;
    --bs-secondary-bg-rgb: 214, 220, 227;
    --bs-tertiary-bg: #e6e9ed;
    --bs-tertiary-bg-rgb: 230, 233, 237;
    --bs-light-rgb: 228, 232, 237;
    --bs-light-bg-subtle: var(--metro-surface-muted);
    --bs-border-color: var(--metro-border);
    --bs-border-color-translucent: rgba(15, 23, 42, 0.14);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--metro-primary) 14%, var(--metro-surface-raised));
    --bs-primary-border-subtle: color-mix(in srgb, var(--metro-primary) 35%, var(--metro-surface-raised));
}

:root[data-theme="dark"],
:root[data-theme-level="1"],
:root[data-theme-level="2"],
:root[data-theme-level="3"] {
    color-scheme: dark;
    --metro-surface: #0b0b0d;
    --metro-surface-raised: #141418;
    --metro-surface-muted: #1a1a1f;
    --metro-surface-float: #17171b;
    --metro-bg: #000000;
    --metro-border: #26262e;
    --metro-border-strong: #3a3a44;
    --metro-field-bg: #0f0f12;
    --metro-field-border: #34343d;
    --metro-field-disabled-bg: #18181c;
    --metro-text: #f5f5f7;
    --metro-text-secondary: #d6d6de;
    --metro-text-muted: #a8a8b3;
    --metro-sidebar-bg: #000000;
    --metro-sidebar-text: #f5f5f7;
    --metro-sidebar-hover: rgba(255, 255, 255, 0.09);
    --metro-hover: rgba(255, 255, 255, 0.07);
    --metro-active: rgba(var(--bs-primary-rgb), 0.22);
    --metro-shadow-sm: 0 16px 40px rgba(0, 0, 0, 0.48), 0 4px 12px rgba(0, 0, 0, 0.3);
    --metro-shadow-lg: 0 28px 60px rgba(0, 0, 0, 0.65);
    --metro-overlay: rgba(0, 0, 0, 0.78);
    --metro-card-sheen: rgba(255, 255, 255, 0.08);
    --metro-card-glow: rgba(var(--bs-primary-rgb), 0.06);
    --metro-primary-soft: rgba(var(--bs-primary-rgb), 0.2);
    --metro-primary-softer: rgba(var(--bs-primary-rgb), 0.1);
    --metro-primary-line: rgba(var(--bs-primary-rgb), 0.45);
    /* Metro Blue shaded for dark surfaces (level 1 values; 2 and 3 below). */
    --metro-primary: #81a2eb;
    --metro-primary-dark: #9fb8f0;
    --metro-sidebar-active: #81a2eb;
    --metro-on-primary: #0b1020;
    --bs-primary-rgb: 129, 162, 235;
    /* Bootstrap 5.3+ vars used heavily throughout shared pages */
    --bs-body-bg: var(--metro-bg);
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-body-color: var(--metro-text);
    --bs-body-color-rgb: 245, 245, 245;
    --bs-emphasis-color: var(--metro-text);
    --bs-secondary-color: var(--metro-text-muted);
    --bs-secondary-color-rgb: 163, 163, 163;
    --bs-tertiary-color: #737373;
    --bs-border-color: var(--metro-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
    --bs-secondary-bg: var(--metro-surface-muted);
    --bs-secondary-bg-rgb: 26, 26, 31;
    --bs-tertiary-bg: var(--metro-surface-raised);
    --bs-tertiary-bg-rgb: 20, 20, 24;
    --bs-light-bg-subtle: var(--metro-surface-muted);
    --bs-dark-bg-subtle: var(--metro-surface-raised);
    --bs-card-bg: var(--metro-surface);
    --bs-card-cap-bg: var(--metro-surface-float);
    --bs-modal-bg: var(--metro-surface-float);
    --bs-dropdown-bg: var(--metro-surface-float);
    --bs-dropdown-color: var(--metro-text);
    --bs-dropdown-link-hover-bg: var(--metro-hover);
    --bs-list-group-bg: var(--metro-surface);
    --bs-list-group-color: var(--metro-text);
    --bs-list-group-border-color: var(--metro-border);
    --bs-list-group-action-hover-bg: var(--metro-hover);
    --bs-list-group-action-active-bg: var(--metro-active);
    --bs-nav-tabs-border-color: var(--metro-border);
    --bs-nav-tabs-link-active-bg: var(--metro-surface-raised);
    --bs-nav-tabs-link-active-color: var(--metro-text);
    --bs-nav-tabs-link-active-border-color: var(--metro-border) var(--metro-border) var(--metro-surface-raised);
    --bs-nav-pills-link-active-bg: var(--metro-surface-float);
    --bs-nav-pills-link-active-color: var(--metro-text);
}

/* Level 2 — near-black (elevated from pure black) */
:root[data-theme-level="2"] {
    --metro-bg: #111113;
    --metro-surface: #1a1a1e;
    --metro-surface-raised: #222227;
    --metro-surface-muted: #1f1f24;
    --metro-surface-float: #25252b;
    --metro-border: #33333c;
    --metro-border-strong: #474751;
    --metro-field-bg: #151519;
    --metro-field-border: #3f3f49;
    --metro-field-disabled-bg: #202025;
    --metro-sidebar-bg: #0a0a0c;
    --metro-primary: #638ce7;
    --metro-primary-dark: #81a2eb;
    --metro-sidebar-active: #638ce7;
    --metro-on-primary: #0b1020;
    --bs-primary-rgb: 99, 140, 231;
    --bs-body-bg-rgb: 17, 17, 19;
    --bs-secondary-bg-rgb: 31, 31, 36;
    --bs-tertiary-bg-rgb: 34, 34, 39;
}

/* Level 3 — dim / charcoal mid. Fields sit darker than the surface (inset)
   so inputs never read as holes punched through a lighter window. */
:root[data-theme-level="3"] {
    --metro-bg: #2c2d33;
    --metro-surface: #35363d;
    --metro-surface-raised: #3d3e46;
    --metro-surface-muted: #303138;
    --metro-surface-float: #3f4048;
    --metro-border: #4b4c56;
    --metro-border-strong: #5e5f6a;
    --metro-field-bg: #2f3036;
    --metro-field-border: #585965;
    --metro-field-disabled-bg: #393a41;
    --metro-text: #f2f2f5;
    --metro-text-secondary: #dcdce3;
    --metro-text-muted: #babbc6;
    --metro-sidebar-bg: #232429;
    --metro-hover: rgba(255, 255, 255, 0.08);
    --metro-shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.32), 0 3px 10px rgba(0, 0, 0, 0.2);
    --metro-shadow-lg: 0 24px 52px rgba(0, 0, 0, 0.44);
    --metro-overlay: rgba(0, 0, 0, 0.58);
    --metro-card-sheen: rgba(255, 255, 255, 0.06);
    --metro-primary: #4374e1;
    --metro-primary-dark: #5f89e6;
    --metro-sidebar-active: #4374e1;
    --metro-on-primary: #ffffff;
    --metro-primary-soft: rgba(var(--bs-primary-rgb), 0.24);
    --bs-primary-rgb: 67, 116, 225;
    --bs-body-bg-rgb: 44, 45, 51;
    --bs-secondary-bg-rgb: 48, 49, 56;
    --bs-secondary-color-rgb: 186, 187, 198;
    --bs-tertiary-color: #9a9ba6;
    --bs-tertiary-bg-rgb: 61, 62, 70;
}

/* Level 1 — pure black (explicit; matches the dark-axis defaults above) */
:root[data-theme-level="1"] {
    --metro-bg: #000000;
    --metro-surface: #0b0b0d;
    --metro-surface-raised: #141418;
    --metro-surface-muted: #1a1a1f;
    --metro-surface-float: #17171b;
    --metro-sidebar-bg: #000000;
}

/* Bootstrap re-declares its surface variables on each component (.modal sets
   --bs-modal-bg: var(--bs-body-bg), .card sets --bs-card-bg, …), which shadows
   the :root mapping above. Re-point them at the Metro ramp on every level
   except White, where Bootstrap's own values already match the tokens. */
:root:not([data-theme-level="5"]) .modal {
    --bs-modal-bg: var(--metro-surface-float);
    --bs-modal-color: var(--metro-text);
    --bs-modal-border-color: var(--metro-border-strong);
    --bs-modal-header-border-color: var(--metro-border);
    --bs-modal-footer-border-color: var(--metro-border);
}

:root:not([data-theme-level="5"]) :is(.offcanvas, .offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl) {
    --bs-offcanvas-bg: var(--metro-surface-float);
    --bs-offcanvas-color: var(--metro-text);
    --bs-offcanvas-border-color: var(--metro-border);
}

:root:not([data-theme-level="5"]) .card {
    --bs-card-bg: var(--metro-surface);
    --bs-card-cap-bg: var(--metro-surface-raised);
    --bs-card-border-color: var(--metro-border);
    --bs-card-color: var(--metro-text);
}

:root:not([data-theme-level="5"]) .dropdown-menu {
    --bs-dropdown-bg: var(--metro-surface-float);
    --bs-dropdown-color: var(--metro-text);
    --bs-dropdown-border-color: var(--metro-border);
    --bs-dropdown-link-color: var(--metro-text);
    --bs-dropdown-link-hover-color: var(--metro-text);
    --bs-dropdown-link-hover-bg: var(--metro-hover);
    --bs-dropdown-link-active-color: var(--metro-on-primary);
    --bs-dropdown-link-active-bg: var(--metro-primary);
    --bs-dropdown-divider-bg: var(--metro-border);
    --bs-dropdown-header-color: var(--metro-text-muted);
}

:root:not([data-theme-level="5"]) .list-group {
    --bs-list-group-bg: var(--metro-surface);
    --bs-list-group-color: var(--metro-text);
    --bs-list-group-border-color: var(--metro-border);
    --bs-list-group-action-color: var(--metro-text-secondary);
    --bs-list-group-action-hover-color: var(--metro-text);
    --bs-list-group-action-hover-bg: var(--metro-hover);
    --bs-list-group-action-active-color: var(--metro-text);
    --bs-list-group-action-active-bg: var(--metro-active);
    --bs-list-group-active-color: var(--metro-on-primary);
    --bs-list-group-active-bg: var(--metro-primary);
    --bs-list-group-active-border-color: var(--metro-primary);
    --bs-list-group-disabled-bg: var(--metro-surface-muted);
}

:root:not([data-theme-level="5"]) :is(.modal, .dropdown-menu, .offcanvas) .list-group {
    --bs-list-group-bg: var(--metro-surface-raised);
}

:root:not([data-theme-level="5"]) .popover {
    --bs-popover-bg: var(--metro-surface-float);
    --bs-popover-border-color: var(--metro-border-strong);
    --bs-popover-header-bg: var(--metro-surface-raised);
    --bs-popover-body-color: var(--metro-text);
}

:root:not([data-theme-level="5"]) .toast {
    --bs-toast-bg: color-mix(in srgb, var(--metro-surface-float) 94%, transparent);
    --bs-toast-header-bg: var(--metro-surface-raised);
    --bs-toast-border-color: var(--metro-border);
    --bs-toast-color: var(--metro-text);
    --bs-toast-header-color: var(--metro-text-muted);
}

:root:not([data-theme-level="5"]) .table {
    --bs-table-color: var(--metro-text);
    --bs-table-border-color: var(--metro-border);
}

:root:not([data-theme-level="5"]) .accordion {
    --bs-accordion-bg: var(--metro-surface);
    --bs-accordion-color: var(--metro-text);
    --bs-accordion-border-color: var(--metro-border);
    --bs-accordion-btn-bg: var(--metro-surface);
    --bs-accordion-btn-color: var(--metro-text);
    --bs-accordion-active-bg: var(--metro-primary-soft);
    --bs-accordion-active-color: var(--metro-text);
}

:root:not([data-theme-level="5"]) .pagination {
    --bs-pagination-bg: var(--metro-surface);
    --bs-pagination-color: var(--metro-primary);
    --bs-pagination-border-color: var(--metro-border);
    --bs-pagination-hover-bg: var(--metro-hover);
    --bs-pagination-hover-border-color: var(--metro-border-strong);
    --bs-pagination-active-bg: var(--metro-primary);
    --bs-pagination-active-border-color: var(--metro-primary);
    --bs-pagination-active-color: var(--metro-on-primary);
    --bs-pagination-disabled-bg: var(--metro-surface-muted);
    --bs-pagination-disabled-border-color: var(--metro-border);
}

:root[data-theme-level="4"] .nav-pills {
    --bs-nav-pills-link-active-bg: var(--metro-primary);
    --bs-nav-pills-link-active-color: var(--metro-on-primary);
}

/* Anything filled with the accent uses the ink computed for the current shade. */
:root[data-theme-level] .dropdown-item.active,
:root[data-theme-level] .dropdown-item:active {
    background-color: var(--metro-primary);
    color: var(--metro-on-primary);
}

.text-bg-primary {
    color: var(--metro-on-primary) !important;
}

.badge.bg-primary {
    --bs-badge-color: var(--metro-on-primary);
}

/* Accent as text on dark steps: the fill shade is tuned for white/ink labels,
   so text on dark surfaces uses a lighter mix of the same color. */
:root {
    --metro-primary-text: var(--metro-primary-dark);
}

:root[data-theme="dark"] {
    --metro-primary-text: color-mix(in srgb, var(--metro-primary) 55%, #fff);
    --bs-link-color: var(--metro-primary-text);
    --bs-link-hover-color: color-mix(in srgb, var(--metro-primary) 35%, #fff);
}

:root[data-theme="dark"] .btn-link {
    --bs-btn-color: var(--metro-primary-text);
    --bs-btn-hover-color: var(--bs-link-hover-color);
}

/* Inputs: one field treatment per level (White keeps the Bootstrap + metro defaults). */
:root:not([data-theme-level="5"]) .form-control,
:root:not([data-theme-level="5"]) .form-select {
    background-color: var(--metro-field-bg);
    border-color: var(--metro-field-border);
    color: var(--metro-text);
}

:root:not([data-theme-level="5"]) .form-control:focus,
:root:not([data-theme-level="5"]) .form-select:focus {
    background-color: var(--metro-field-bg);
    border-color: var(--metro-primary);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
    color: var(--metro-text);
}

:root:not([data-theme-level="5"]) .form-control:disabled,
:root:not([data-theme-level="5"]) .form-select:disabled,
:root:not([data-theme-level="5"]) .form-control[readonly] {
    background-color: var(--metro-field-disabled-bg);
    color: var(--metro-text-muted);
}

:root:not([data-theme-level="5"]) .form-control::placeholder {
    color: var(--metro-text-muted);
    opacity: 0.85;
}

:root:not([data-theme-level="5"]) .input-group-text {
    background-color: var(--metro-surface-muted);
    border-color: var(--metro-field-border);
    color: var(--metro-text-muted);
}

:root:not([data-theme-level="5"]) .form-check-input {
    background-color: var(--metro-field-bg);
    border-color: var(--metro-field-border);
}

:root .form-check-input:checked,
:root .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--metro-primary);
    border-color: var(--metro-primary);
}

/* Bootstrap's check mark, radio dot and switch knob are white SVGs. When the
   shaded accent is light (dark levels, or a pale chosen color) the theme
   scripts set data-metro-on-primary="dark" and the marks switch to dark ink. */
:root[data-metro-on-primary="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b1020' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

:root[data-metro-on-primary="dark"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230b1020'/%3e%3c/svg%3e");
}

:root[data-metro-on-primary="dark"] .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230b1020'/%3e%3c/svg%3e");
}

/* Darkness slider: the track previews all five steps (black → white), each
   step has a tick, and the thumb carries the shaded accent. */
.theme-darkness-slider {
    width: 100%;
    height: 1.75rem;
    padding: 0 0.15rem;
    background: transparent;
    --metro-darkness-track: linear-gradient(90deg,
        #000000 0%, #000000 12.5%,
        #1a1a1e 12.5%, #1a1a1e 37.5%,
        #35363d 37.5%, #35363d 62.5%,
        #dfe3e8 62.5%, #dfe3e8 87.5%,
        #ffffff 87.5%, #ffffff 100%);
}

.theme-darkness-slider::-webkit-slider-runnable-track {
    height: 0.6rem;
    border-radius: 999px;
    background: var(--metro-darkness-track);
    border: 1px solid var(--metro-border-strong);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.theme-darkness-slider::-moz-range-track {
    height: 0.6rem;
    border-radius: 999px;
    background: var(--metro-darkness-track);
    border: 1px solid var(--metro-border-strong);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.theme-darkness-slider::-webkit-slider-thumb {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: calc((0.6rem - 1.35rem) / 2 - 1px);
    border-radius: 50%;
    background: var(--metro-primary);
    border: 3px solid var(--metro-surface-float);
    box-shadow: 0 0 0 1px var(--metro-primary-line), 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform var(--duration-press) var(--ease-out);
}

.theme-darkness-slider::-moz-range-thumb {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--metro-primary);
    border: 3px solid var(--metro-surface-float);
    box-shadow: 0 0 0 1px var(--metro-primary-line), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.theme-darkness-slider:active::-webkit-slider-thumb {
    transform: scale(1.08);
}

.theme-darkness-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--metro-primary), 0 0 0 0.3rem var(--bs-focus-ring-color);
}

.theme-darkness-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--metro-primary), 0 0 0 0.3rem var(--bs-focus-ring-color);
}

/* Host hook — Picasso fills outdoor / high-contrast-light visuals. Do not use .senior-high-contrast. */
.tech-shell[data-contrast="outdoor"] {
    color-scheme: light;
}

:root[data-theme="dark"] .tech-shell[data-contrast="outdoor"] {
    color-scheme: dark;
}

/* ── Bootstrap — align with Metro design tokens (light theme) ──────
   Bootstrap ships three different blues into the app (#0d6efd default,
   plus legacy template colors). Everything below funnels Bootstrap's
   compiled component variables through the --metro-* tokens so every
   button, link, badge, tab, and focus ring uses one palette and one
   radius scale without editing individual Razor files. */

:root {
    --bs-primary: var(--metro-primary);
    --bs-primary-rgb: 26, 86, 219;
    --bs-success: var(--metro-success);
    --bs-success-rgb: 5, 122, 85;
    --bs-danger: var(--metro-danger);
    --bs-danger-rgb: 200, 30, 30;
    --bs-link-color: var(--metro-primary);
    --bs-link-color-rgb: 26, 86, 219;
    --bs-link-hover-color: var(--metro-primary-dark);
    --bs-link-hover-color-rgb: 19, 64, 168;
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.22);
    --bs-primary-text-emphasis: var(--metro-primary-dark);
    --bs-primary-bg-subtle: #e8effc;
    --bs-primary-border-subtle: #bcccf1;
    /* One radius scale app-wide (buttons, inputs, cards, alerts, modals) */
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
}

:root[data-theme="dark"] {
    /* Accent follows the chosen/shaded --metro-primary (not a fixed blue).
       Links use the lighter text mix (--metro-primary-text); the -rgb triplet is
       per level below for Metro Blue and set inline by the theme scripts otherwise. */
    --bs-link-color: var(--metro-primary-text);
    --bs-link-color-rgb: 198, 213, 246;
    --bs-link-hover-color: color-mix(in srgb, var(--metro-primary) 35%, #fff);
    --bs-primary-text-emphasis: var(--metro-primary-text);
    --bs-focus-ring-color: color-mix(in srgb, var(--metro-primary) 28%, transparent);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--metro-primary) 28%, transparent);
    --bs-primary-border-subtle: color-mix(in srgb, var(--metro-primary) 35%, transparent);
}

:root[data-theme-level="2"] {
    --bs-link-color-rgb: 185, 203, 244;
}

:root[data-theme-level="3"] {
    --bs-link-color-rgb: 170, 192, 242;
}

/* ============================================================
   Buttons - one design system for every .btn in the app.
   Bootstrap's compiled --bs-btn-* variables are driven from the
   Metro tokens, so primary/secondary/success/danger/warning/info/
   dark/light, their outline forms, links, sizes, groups and the
   dark theme all share the same radius, weight, height, depth,
   hover, press, focus and disabled behaviour.
   Shell-specific rules (mobile.css, tech.css, portal.css) still own
   touch-target sizing; per-page overrides that set --bs-btn-* win.
   ============================================================ */

:root {
    --metro-btn-radius: var(--bs-border-radius);
    --metro-btn-shadow: 0 1px 2px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --metro-btn-warning: #f59e0b;
    --metro-btn-warning-hover: #d97706;
    --metro-btn-info: #0e7490;
    --metro-btn-info-hover: #0b5d73;
}

.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: var(--text-base, 0.9rem);
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.4;
    --bs-btn-border-radius: var(--metro-btn-radius);
    --bs-btn-box-shadow: none;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-opacity: 0.5;
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bs-btn-border-color, var(--metro-primary)) 38%, transparent);
    letter-spacing: 0.005em;
    box-shadow: var(--bs-btn-box-shadow);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    --bs-btn-box-shadow: none;
    cursor: not-allowed;
}

/* Sizes (declared after .btn so they win over the base variables) */
.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-font-size: var(--text-sm, 0.8125rem);
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-xs {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.75rem;
    --bs-btn-line-height: 1.3;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-padding-y: 0.65rem;
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-font-size: 1.0625rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

/* Solid variants: set only the fill + text; everything else is derived */
.btn-primary   { --bs-btn-color: var(--metro-on-primary); --bs-btn-bg: var(--metro-primary);   --bs-btn-hover-bg: var(--metro-primary-dark); }
.btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: #475569;                --bs-btn-hover-bg: #334155; }
.btn-success   { --bs-btn-color: #fff; --bs-btn-bg: var(--metro-success);   --bs-btn-hover-bg: #046c4b; }
.btn-danger    { --bs-btn-color: #fff; --bs-btn-bg: var(--metro-danger);    --bs-btn-hover-bg: #a91c1c; }
.btn-warning   { --bs-btn-color: #1c1100; --bs-btn-bg: var(--metro-btn-warning); --bs-btn-hover-bg: var(--metro-btn-warning-hover); }
.btn-info      { --bs-btn-color: #fff; --bs-btn-bg: var(--metro-btn-info);  --bs-btn-hover-bg: var(--metro-btn-info-hover); }
.btn-dark      { --bs-btn-color: #fff; --bs-btn-bg: #1f2937;                --bs-btn-hover-bg: #0f172a; }
.btn-light     { --bs-btn-color: #0f172a; --bs-btn-bg: #f1f5f9;             --bs-btn-hover-bg: #e2e8f0; --bs-btn-border-color: #e2e8f0; }

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark,
.btn-light {
    --bs-btn-border-color: var(--bs-btn-bg);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-hover-bg) 88%, #000);
    --bs-btn-active-border-color: var(--bs-btn-active-bg);
    --bs-btn-disabled-color: var(--bs-btn-color);
    --bs-btn-disabled-bg: var(--bs-btn-bg);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    --bs-btn-box-shadow: var(--metro-btn-shadow);
}

.btn-light {
    --bs-btn-border-color: #e2e8f0;
    --bs-btn-hover-border-color: #cbd5e1;
}

/* Outline variants: tinted hover, solid fill when pressed / .active / checked */
.btn-outline-primary   { --bs-btn-color: var(--metro-primary); --metro-btn-solid: var(--metro-primary); }
.btn-outline-success   { --bs-btn-color: var(--metro-success); --metro-btn-solid: var(--metro-success); }
.btn-outline-danger    { --bs-btn-color: var(--metro-danger);  --metro-btn-solid: var(--metro-danger); }
.btn-outline-warning   { --bs-btn-color: #b45309; --metro-btn-solid: var(--metro-btn-warning); --metro-btn-on: #1c1100; }
.btn-outline-info      { --bs-btn-color: var(--metro-btn-info); --metro-btn-solid: var(--metro-btn-info); }
.btn-outline-dark      { --bs-btn-color: #1f2937; --metro-btn-solid: #1f2937; }
.btn-outline-light     { --bs-btn-color: #f8fafc; --bs-btn-border-color: rgba(248, 250, 252, 0.55); --metro-btn-solid: #fff; --metro-btn-on: #0f172a; }

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-btn-color);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-color) 9%, transparent);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    --bs-btn-active-color: var(--metro-btn-on, #fff);
    --bs-btn-active-bg: var(--metro-btn-solid, var(--bs-btn-color));
    --bs-btn-active-border-color: var(--bs-btn-active-bg);
    --bs-btn-disabled-color: var(--bs-btn-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
}

.btn-outline-light {
    --bs-btn-border-color: rgba(248, 250, 252, 0.55);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.16);
}

/* Neutral "secondary action" button: the workhorse (cancel, edit, filters, toolbars) */
.btn-outline-secondary {
    --bs-btn-color: var(--metro-text);
    --bs-btn-bg: var(--metro-surface);
    --bs-btn-border-color: var(--metro-border-strong);
    --bs-btn-hover-color: var(--metro-text);
    --bs-btn-hover-bg: var(--metro-surface-muted);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--metro-border-strong) 55%, var(--metro-text-muted));
    --bs-btn-disabled-bg: var(--metro-surface);
    --bs-btn-disabled-border-color: var(--metro-border-strong);
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
    --bs-btn-box-shadow: 0 1px 1px rgba(15, 23, 42, 0.05);
    --metro-btn-solid: #334155;
}

/* Link-style button */
.btn-link {
    --bs-btn-font-weight: 500;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
    text-decoration: none;
    text-underline-offset: 0.2em;
}

.btn-link:hover,
.btn-link:focus-visible {
    text-decoration: underline;
}

/* Icon-only buttons stay square-ish and centred */
.btn:has(> .bi:only-child),
.btn:has(> i.bi:only-child) {
    --bs-btn-padding-x: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Solid buttons lift a hair on hover (pointer devices only; not inside groups) */
@media (hover: hover) {
    :is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark):hover:not(:disabled):not(.disabled) {
        --bs-btn-box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--bs-btn-hover-bg) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14);
        transform: translateY(-1px);
    }

    :is(.btn-group, .btn-group-vertical, .input-group) > .btn:hover:not(:disabled):not(.disabled) {
        transform: none;
    }
}

/* Pressed: flatten the depth so the button reads as pushed in */
.btn:active:not(:disabled):not(.disabled):not(.btn-link) {
    --bs-btn-box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }

    .btn:hover:not(:disabled):not(.disabled),
    .btn:active:not(:disabled):not(.disabled) {
        transform: none;
    }
}

/* Dark theme: readable accents on the black-based surfaces */
:root[data-theme="dark"] {
    --metro-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .btn-dark {
    --bs-btn-bg: #2a2a33;
    --bs-btn-hover-bg: #373743;
    --bs-btn-border-color: var(--metro-border-strong);
}

.btn-outline-primary {
    --metro-btn-on: var(--metro-on-primary);
}

:root[data-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--metro-primary-text);
    --bs-btn-hover-color: var(--metro-primary-text);
    --bs-btn-border-color: color-mix(in srgb, var(--metro-primary) 60%, transparent);
    --metro-btn-solid: var(--metro-primary);
}
:root[data-theme="dark"] .btn-outline-success { --bs-btn-color: #34d399; }
:root[data-theme="dark"] .btn-outline-danger  { --bs-btn-color: #f87171; }
:root[data-theme="dark"] .btn-outline-warning { --bs-btn-color: #fbbf24; }
:root[data-theme="dark"] .btn-outline-info    { --bs-btn-color: #22d3ee; }
:root[data-theme="dark"] .btn-outline-dark    { --bs-btn-color: var(--metro-text); --metro-btn-solid: #3f3f4a; }

:root[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-bg: var(--metro-surface-raised);
    --bs-btn-hover-bg: var(--metro-surface-float);
    --bs-btn-hover-border-color: var(--metro-text-muted);
    --bs-btn-disabled-bg: var(--metro-surface-raised);
    --metro-btn-solid: #4b5563;
}

/* ── Emil motion — press feedback & interactive polish ───────── */
.btn,
.btn-metro,
.metro-pressable,
.voice-record-btn {
    transition:
        transform var(--duration-press) var(--ease-out),
        background-color var(--duration-ui) var(--ease-out),
        border-color var(--duration-ui) var(--ease-out),
        color var(--duration-ui) var(--ease-out),
        box-shadow var(--duration-ui) var(--ease-out),
        opacity var(--duration-ui) var(--ease-out);
}

.btn:active:not(:disabled):not(.disabled):not(.btn-link),
.btn-metro:active:not(:disabled),
.metro-pressable:active:not(:disabled),
.voice-record-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.dropdown-menu {
    transform-origin: var(--bs-position, top);
}

.dropdown-menu.show {
    animation: metro-dropdown-in var(--duration-popover) var(--ease-out);
}

/* JS-anchored menus (searchable selects, Blazor dropdowns): measurement briefly sets
   animation:none; without this override the pop-in can remain stuck at opacity:0. */
.dropdown-menu.show.metro-dropdown-menu-anchored {
    animation: none;
    opacity: 1;
    transform: none;
}

@keyframes metro-dropdown-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.offcanvas {
    transition: transform var(--duration-drawer) var(--ease-drawer) !important;
}

.modal.fade .modal-dialog {
    transition:
        transform var(--duration-drawer) var(--ease-out),
        opacity var(--duration-drawer) var(--ease-out);
}

.popover,
.test-mode-confirm-popover {
    transform-origin: var(--bs-popover-arrow-x, center) var(--bs-popover-arrow-y, top);
    transition:
        opacity var(--duration-popover) var(--ease-out),
        transform var(--duration-popover) var(--ease-out);
}

.popover[data-instant],
.test-mode-confirm-popover[data-instant] {
    transition-duration: 0ms;
}

:root[data-theme="dark"] .text-primary {
    color: var(--metro-primary) !important;
}

/* Form focus + selection states use the brand primary */
.form-control:focus,
.form-select:focus {
    border-color: var(--metro-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:focus {
    border-color: var(--metro-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--metro-primary);
    border-color: var(--metro-primary);
}

/* Selection-heavy components inherit the same primary */
.pagination {
    --bs-pagination-active-bg: var(--metro-primary);
    --bs-pagination-active-border-color: var(--metro-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--metro-primary);
}

:root[data-theme="dark"] .nav-pills {
    /* Dark theme intentionally uses a neutral raised pill, not brand blue */
    --bs-nav-pills-link-active-bg: var(--metro-surface-float);
    --bs-nav-pills-link-active-color: var(--metro-text);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--metro-primary);
}

.list-group {
    --bs-list-group-active-bg: var(--metro-primary);
    --bs-list-group-active-border-color: var(--metro-primary);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--metro-primary);
}

/* ── Bootstrap — align with Metro dark theme ([data-theme="dark"]) ──
   Cards, tables, and forms use Bootstrap defaults (light surfaces).
   These rules keep pages consistent without editing every Razor file. */

:root[data-theme="dark"] .card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%),
        var(--bs-card-bg);
    border-color: var(--metro-border);
    color: var(--metro-text);
    border-radius: 18px;
    overflow: hidden;
}

:root[data-theme="dark"] .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--metro-card-sheen) 18%, rgba(255, 255, 255, 0.04) 82%, transparent 100%);
    pointer-events: none;
}

:root[data-theme="dark"] .card.border-0.shadow-sm,
:root[data-theme="dark"] .card.border-0.shadow,
:root[data-theme="dark"] .card.border-0.shadow-lg {
    border: 1px solid var(--metro-border) !important;
}

:root[data-theme="dark"] .card.shadow-sm,
:root[data-theme="dark"] .shadow-sm {
    box-shadow: var(--metro-shadow-sm) !important;
}

:root[data-theme="dark"] .card.shadow,
:root[data-theme="dark"] .shadow {
    box-shadow: var(--metro-shadow-sm) !important;
}

:root[data-theme="dark"] .card.shadow-lg,
:root[data-theme="dark"] .shadow-lg {
    box-shadow: var(--metro-shadow-lg) !important;
}

:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%),
        var(--metro-surface-float);
    border-color: var(--metro-border);
    color: var(--metro-text);
}

:root[data-theme="dark"] .card-header.bg-white,
:root[data-theme="dark"] .card-footer.bg-white,
:root[data-theme="dark"] .card-header.bg-light,
:root[data-theme="dark"] .card-footer.bg-light,
:root[data-theme="dark"] .card-header.bg-body-tertiary,
:root[data-theme="dark"] .card-footer.bg-body-tertiary {
    background-color: var(--metro-surface-float) !important;
}

.collapsible-card-header {
    cursor: pointer;
    user-select: none;
}

.collapsible-card-header--linked {
    cursor: default;
}

.collapsible-card-header--linked > .d-flex > a[href] {
    cursor: pointer;
}

.collapsible-card-toggle {
    line-height: 1;
    text-decoration: none !important;
}

.collapsible-card-toggle:hover,
.collapsible-card-toggle:focus-visible {
    color: inherit;
}

.collapsible-card-header:hover {
    filter: brightness(0.97);
}

:root[data-theme="dark"] .collapsible-card-header:hover {
    background-color: var(--metro-hover) !important;
}

:root[data-theme="dark"] .bg-white {
    background-color: var(--metro-surface-raised) !important;
}

:root[data-theme="dark"] .bg-light {
    background-color: var(--metro-surface-muted) !important;
    color: var(--metro-text);
}

:root[data-theme="dark"] .bg-body {
    background-color: var(--metro-bg) !important;
    color: var(--metro-text);
}

:root[data-theme="dark"] .bg-body-secondary,
:root[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--metro-text);
}

:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end {
    border-color: var(--metro-border) !important;
}

:root[data-theme="dark"] .table {
    color: var(--metro-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--metro-text);
    --bs-table-border-color: var(--metro-border);
}

:root[data-theme="dark"] .table > :not(caption) > * > * {
    border-bottom-color: var(--metro-border);
    box-shadow: none;
}

:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] .table tbody td {
    border-color: var(--metro-border);
}

:root[data-theme="dark"] thead.table-light th,
:root[data-theme="dark"] .table thead.table-light th,
:root[data-theme="dark"] .table-light {
    --bs-table-bg: var(--metro-surface-raised);
    --bs-table-color: var(--metro-text);
    background-color: var(--metro-surface-raised) !important;
    color: var(--metro-text) !important;
}

:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(148, 163, 184, 0.045);
    color: var(--metro-text);
}

:root[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--metro-hover);
    color: var(--metro-text);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--metro-surface-muted);
    border-color: var(--metro-border);
    color: var(--metro-text);
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background-color: var(--metro-surface);
    border-color: var(--metro-primary);
    color: var(--metro-text);
}

:root[data-theme="dark"] .form-control::placeholder {
    color: var(--metro-text-muted);
}

:root[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root[data-theme="dark"] .form-check-input {
    background-color: var(--metro-surface-muted);
    border-color: var(--metro-border);
}

:root[data-theme="dark"] .form-check-input:checked {
    background-color: var(--metro-primary);
    border-color: var(--metro-primary);
}

:root[data-theme="dark"] .input-group-text {
    background-color: var(--metro-surface-muted);
    border-color: var(--metro-border);
    color: var(--metro-text-muted);
}

:root[data-theme="dark"] .modal-content {
    background-color: var(--bs-modal-bg);
    border-color: var(--metro-border-strong) !important;
    color: var(--metro-text);
    box-shadow: var(--metro-shadow-lg);
    background-image: none;
}

:root[data-theme="dark"] .modal-content > .modal-header,
:root[data-theme="dark"] .modal-content > form > .modal-header,
:root[data-theme="dark"] .modal-content > .modal-footer,
:root[data-theme="dark"] .modal-content > form > .modal-footer {
    background: transparent;
}

:root[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--bs-dropdown-bg);
    border-color: var(--metro-border);
    box-shadow: var(--metro-shadow-sm);
}

:root[data-theme="dark"] .dropdown-item {
    color: var(--metro-text);
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--metro-hover);
    color: var(--metro-text);
}

:root[data-theme="dark"] .dropdown-divider,
:root[data-theme="dark"] .dropdown-header {
    border-color: var(--metro-border);
    color: var(--metro-text-muted);
}

:root[data-theme="dark"] hr {
    border-color: var(--metro-border);
    opacity: 1;
}

:root[data-theme="dark"] .list-group-item {
    background-color: var(--metro-surface);
    border-color: var(--metro-border);
    color: var(--metro-text);
}

:root[data-theme="dark"] .accordion-item {
    background-color: var(--metro-surface);
    border-color: var(--metro-border);
    color: var(--metro-text);
}

:root[data-theme="dark"] .accordion-button {
    background-color: var(--metro-surface-raised);
    color: var(--metro-text);
}

:root[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--metro-text);
}

:root[data-theme="dark"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(160%);
}

:root[data-theme="dark"] .pagination .page-link {
    background-color: var(--metro-surface);
    border-color: var(--metro-border);
    color: var(--metro-text);
}

:root[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--metro-hover);
    color: var(--metro-text);
}

:root[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--metro-primary);
    border-color: var(--metro-primary);
    color: #fff;
}

:root[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--metro-border);
    gap: 0.35rem;
}

:root[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--metro-text-muted);
    border: 1px solid transparent;
    border-bottom-color: transparent;
    border-radius: 0.8rem 0.8rem 0 0;
    margin-bottom: -1px;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

:root[data-theme="dark"] .nav-tabs .nav-link:hover,
:root[data-theme="dark"] .nav-tabs .nav-link:focus-visible {
    color: var(--metro-text);
    background-color: var(--metro-hover);
    border-color: transparent transparent var(--metro-border-strong);
}

:root[data-theme="dark"] .nav-tabs .nav-link.active,
:root[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    color: var(--metro-text);
    background: var(--metro-surface-raised);
    border-color: var(--metro-border) var(--metro-border) var(--metro-surface-raised);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .card-header-tabs .nav-link.active,
:root[data-theme="dark"] .card-header-tabs .nav-item.show .nav-link {
    background: var(--metro-surface);
    border-color: var(--metro-border) var(--metro-border) var(--metro-surface);
}

:root[data-theme="dark"] .nav-pills .nav-link {
    color: var(--metro-text-muted);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

:root[data-theme="dark"] .nav-pills .nav-link:hover,
:root[data-theme="dark"] .nav-pills .nav-link:focus-visible {
    color: var(--metro-text);
    background-color: var(--metro-hover);
    border-color: rgba(148, 163, 184, 0.18);
}

:root[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--bs-nav-pills-link-active-bg);
    color: var(--bs-nav-pills-link-active-color);
    border-color: var(--metro-border-strong);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .alert {
    border-color: var(--metro-border);
}

:root[data-theme="dark"] .alert-light {
    background-color: var(--metro-surface-muted);
    color: var(--metro-text);
}

:root[data-theme="dark"] .text-muted {
    color: var(--metro-text-muted) !important;
}

:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-black,
:root[data-theme="dark"] .text-body {
    color: var(--metro-text) !important;
}

:root[data-theme="dark"] .text-body-emphasis {
    color: var(--metro-text) !important;
}

:root[data-theme="dark"] .text-body-secondary {
    color: var(--metro-text-muted) !important;
}

:root[data-theme="dark"] .text-secondary {
    color: var(--metro-text-muted) !important;
}

:root[data-theme="dark"] .badge.bg-light,
:root[data-theme="dark"] .badge.bg-light.text-dark {
    background-color: var(--metro-surface-muted) !important;
    border-color: var(--metro-border) !important;
    color: var(--metro-text) !important;
}

:root[data-theme="dark"] .badge.bg-warning.text-dark {
    color: #000000 !important;
}

:root[data-theme="dark"] .form-signature-pad .form-signature-canvas {
    background: #000000;
    border: 1px solid var(--metro-border);
}

:root[data-theme="dark"] .login-page {
    background: linear-gradient(180deg, var(--metro-bg) 0%, var(--metro-surface) 100%);
}

/* Metro utility tables used on many pages */
:root[data-theme="dark"] .metro-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Schedule / calendar grid helpers (inspection & facilities) */
.metro-schedule-hour-label {
    font-size: 0.65rem;
    color: var(--metro-text-muted);
    white-space: nowrap;
}

.metro-cal-block {
    border-radius: 3px;
    padding: 2px 4px;
    overflow: hidden;
}

.metro-cal-block--highlighted {
    background: rgba(var(--bs-primary-rgb), 0.18);
    border-left: 3px solid var(--metro-primary);
    color: var(--metro-primary-dark);
}

.metro-cal-block--other {
    background: rgba(108, 117, 125, 0.15);
    border-left: 3px solid #6c757d;
    color: var(--metro-text);
}

:root[data-theme="dark"] .metro-cal-block--highlighted {
    background: rgba(var(--bs-primary-rgb), 0.4);
    color: #ffffff;
}

:root[data-theme="dark"] .metro-cal-block--other {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: #666666;
    color: #ffffff;
}

.metro-cal-res--confirmed { background: rgba(25, 135, 84, 0.14); border-left: 3px solid #198754; color: #0a3622; }
.metro-cal-res--pending   { background: rgba(255, 193, 7, 0.22); border-left: 3px solid #e6ac00; color: #664d03; }
.metro-cal-res--denied    { background: rgba(220, 53, 69, 0.14); border-left: 3px solid #dc3545; color: #58151c; }
.metro-cal-res--default   { background: rgba(108, 117, 125, 0.12); border-left: 3px solid #6c757d; color: var(--metro-text-secondary); }

:root[data-theme="dark"] .metro-cal-res--confirmed { background: rgba(25, 135, 84, 0.35); color: #86efac; }
:root[data-theme="dark"] .metro-cal-res--pending   { background: rgba(255, 193, 7, 0.3); color: #fde047; }
:root[data-theme="dark"] .metro-cal-res--denied    { background: rgba(220, 53, 69, 0.35); color: #fca5a5; }
:root[data-theme="dark"] .metro-cal-res--default   { background: rgba(255, 255, 255, 0.1); border-left-color: #666666; color: #ffffff; }

.metro-map-loading-panel {
    background: var(--metro-surface, var(--metro-bg, #fff));
}

/* ── Reset / Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: calc(100% * var(--metro-sys-font-scale, 1));
}

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    background: var(--metro-bg);
    color: var(--metro-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), 0.35);
    outline-offset: 2px;
}

a { color: var(--bs-link-color, var(--metro-primary)); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout Shell ───────────────────────────────────────────── */
/*
 * Desktop staff shell: lock the viewport so .page-body is the only vertical scroller.
 * If .metro-layout only has min-height, the document grows and scrolls; .main-content's
 * overflow then traps position:sticky, so the topbar (and detail sticky bars) scroll away
 * and back-to-top has to chase the wrong scrollport.
 * Mobile/tech shells own their own scroll (.mobile-shell__body--pull / .tech-shell) — leave
 * those layouts free to grow inside that scroller.
 */
html:has(.metro-layout):not(:has(.mobile-shell)):not(:has(.tech-shell)),
html:has(.metro-layout):not(:has(.mobile-shell)):not(:has(.tech-shell)) body {
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.metro-layout {
    display: flex;
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.045) 0, transparent 20rem),
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.025) 0, transparent 24rem),
        var(--metro-bg);
}

html:not(:has(.mobile-shell)):not(:has(.tech-shell)) .metro-layout {
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    background: var(--metro-sidebar-bg);
    color: var(--metro-sidebar-text);
    /* Keep native controls (e.g. group <button>) on dark system colors even when the app shell is light-themed. */
    color-scheme: dark;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 0;
    z-index: 250;
    transition: width var(--duration-drawer) var(--ease-out), transform var(--duration-drawer) var(--ease-drawer), box-shadow var(--duration-drawer) var(--ease-out);
    overflow: hidden;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 9rem),
        var(--metro-sidebar-bg);
}

.sidebar.collapsed { width: var(--sidebar-collapsed-width); }

.sidebar.sidebar--customize:not(.collapsed) {
    width: var(--sidebar-customize-width);
    min-width: var(--sidebar-customize-width);
}

/* Brand */
.sidebar-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Reserve right edge for the Edit menu control so logos/names cannot clip it. */
    padding: 0 44px 0 14px;
    height: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    overflow: hidden;
}

/* Tall / portrait city seals need a slightly taller brand row. */
.sidebar-brand:has(.sidebar-city-logo) {
    height: auto;
    min-height: 56px;
    max-height: 72px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.sidebar-brand .brand-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-brand .brand-icon .sidebar-logo-img { width: 22px; height: 22px; }
.sidebar-brand .brand-icon .sidebar-metro-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    background: #fff;
}
/* When a city logo is present the icon area needs more room (including tall seals).
   Cap width so logo + city name leave room for the customize (pencil) button. */
.sidebar-brand .brand-icon:has(.sidebar-city-logo) {
    width: auto;
    max-width: 88px;
    height: auto;
    min-height: 32px;
    max-height: 56px;
}
.sidebar-brand .brand-icon .sidebar-city-logo {
    width: auto;
    height: auto;
    max-width: 84px;
    max-height: 52px;
    object-fit: contain;
}

.page-header-city-logo {
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 3rem;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-brand .brand-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--transition), width var(--transition);
}

.sidebar.collapsed .brand-text { display: none; }

.sidebar.collapsed .sidebar-brand {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 4px;
    gap: 6px;
}

.sidebar-nav-edit-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    flex-shrink: 0;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.sidebar-nav-edit-btn .bi {
    font-size: 0.9rem;
    line-height: 1;
}

.sidebar-nav-edit-label {
    /* Label lives in the title/aria-label; keep the control icon-only so logos cannot clip it. */
    display: none;
    line-height: 1;
}

.sidebar-nav-edit-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

.sidebar-nav-edit-btn--active {
    background: rgba(var(--bs-primary-rgb), 0.35);
    color: #fff;
}

.sidebar-nav-edit-btn--active:hover {
    background: rgba(var(--bs-primary-rgb), 0.5);
}

.sidebar-nav-edit-btn--icon-only {
    width: 30px;
    padding: 0;
}

/* Keep Edit menu reachable when the sidebar is icon-only. */
.sidebar.collapsed .sidebar-nav-edit-btn {
    display: inline-flex;
    position: static;
    transform: none;
    margin-left: 0;
}

.sidebar.collapsed .sidebar-brand {
    padding-right: 4px;
}

.sidebar-nav-search-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 0 12px 8px;
    padding: 7px 10px 7px 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.sidebar-nav-search-trigger:hover,
.sidebar-nav-search-trigger:focus-visible {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    outline: none;
}

.sidebar-nav-search-trigger--collapsed {
    width: calc(var(--sidebar-collapsed-width) - 12px);
    margin-left: auto;
    margin-right: auto;
    padding: 9px;
    justify-content: center;
}

.sidebar-nav-search-icon {
    position: absolute;
    left: 10px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.sidebar-nav-search-trigger--collapsed .sidebar-nav-search-icon {
    position: static;
}

.sidebar-nav-search-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-nav-search-kbd {
    margin-left: auto;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.6875rem;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
}

/* Command palette (Cloudflare-style quick search) */
.metro-command-palette {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: min(12vh, 96px) 16px 16px;
    background: color-mix(in srgb, var(--bs-body-bg) 35%, transparent);
    backdrop-filter: blur(2px);
}

.metro-command-palette-panel {
    width: min(560px, 100%);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-body-bg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.metro-command-palette-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.metro-command-palette-search-icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--bs-secondary-color);
}

.metro-command-palette-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 1rem;
    line-height: 1.4;
    outline: none;
}

.metro-command-palette-input::placeholder {
    color: var(--bs-secondary-color);
}

.metro-command-palette-esc-hint {
    flex-shrink: 0;
    padding: 2px 7px;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.6875rem;
    font-family: inherit;
    line-height: 1.3;
}

.metro-command-palette-results {
    max-height: min(50vh, 420px);
    overflow-y: auto;
    padding: 8px;
}

.metro-command-palette-section-label {
    padding: 4px 10px 6px;
    color: var(--bs-secondary-color);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.metro-command-palette-empty {
    padding: 16px 12px;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.metro-command-palette-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
}

.metro-command-palette-row:hover,
.metro-command-palette-row.is-selected {
    background: var(--bs-tertiary-bg);
}

.metro-command-palette-row-icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--bs-secondary-color);
}

.metro-command-palette-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.metro-command-palette-row-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
}

.metro-command-palette-row-category {
    display: block;
    margin-top: 1px;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    line-height: 1.2;
}

.metro-command-palette-row-arrow {
    flex-shrink: 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    opacity: 0;
    transition: opacity var(--transition);
}

.metro-command-palette-row:hover .metro-command-palette-row-arrow,
.metro-command-palette-row.is-selected .metro-command-palette-row-arrow {
    opacity: 1;
}

.nav-search-mark {
    padding: 0 1px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--bs-warning) 55%, transparent);
    color: inherit;
}

.metro-command-palette-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--bs-border-color-translucent);
    color: var(--bs-secondary-color);
    font-size: 0.6875rem;
}

.metro-command-palette-footer kbd {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 5px;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.625rem;
    font-family: inherit;
    line-height: 1.3;
}

.sidebar-nav--filtering .sidebar-nav-divider,
.sidebar-nav--filtering .sidebar-customize-banner {
    display: none;
}

/* Nav scroll area */
.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.sidebar-nav > * {
    flex-shrink: 0;
}

/* Top-level rows: horizontal inset only — vertical rhythm from .sidebar-nav gap */
.sidebar-nav > .sidebar-link {
    margin-block: 0;
}

/* Collapsible groups sit slightly apart from flat links and from each other */
.sidebar-nav > .sidebar-link + .sidebar-group,
.sidebar-nav > .sidebar-group + .sidebar-group {
    margin-top: 5px;
}

.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}
.sidebar-nav:hover::-webkit-scrollbar { width: 5px; }
.sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
}

/* Section headers */
.sidebar-section {
    padding: 14px 18px 3px;
    overflow: hidden;
    transition: padding var(--transition);
}

.sidebar-section-label {
    display: block;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    white-space: nowrap;
    transition: opacity var(--transition);
}

.sidebar.collapsed .sidebar-section { display: none; }

.sidebar-nav-divider {
    height: 1px;
    margin: 10px 16px 8px;
    background: rgba(255, 255, 255, 0.14);
}

.sidebar.collapsed .sidebar-nav-divider {
    margin: 8px 12px 6px;
}

/* Links */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 2px 8px;
    border-radius: 12px;
    border-left: 3px solid transparent;
    color: rgba(255,255,255,0.58);
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--duration-press) var(--ease-out);
}

.sidebar-link:active {
    transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
    .sidebar-link:hover {
        background: rgba(255,255,255,0.09);
        color: rgba(255,255,255,0.92);
        text-decoration: none;
    }
}

.sidebar-link.active {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: #fff;
    font-weight: 600;
    border-left-color: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sidebar-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    line-height: 1;
}

.sidebar-label {
    font-size: 0.875rem;
    line-height: 1.2;
    transition: opacity var(--transition), width var(--transition);
}

.sidebar.collapsed .sidebar-label { display: none; }

.sidebar.collapsed .sidebar-link {
    margin: 1px auto;
    width: calc(var(--sidebar-collapsed-width) - 12px);
    padding: 9px;
    justify-content: center;
    border-left-color: transparent;
    gap: 0;
}

.sidebar.collapsed .sidebar-group-header-row {
    margin: 0;
    justify-content: center;
}

.sidebar.collapsed .sidebar-group-toggle {
    margin: 1px auto;
    width: calc(var(--sidebar-collapsed-width) - 12px);
    padding: 9px;
    justify-content: center;
    border-left-color: transparent;
    gap: 0;
}

.sidebar.collapsed .sidebar-nav {
    scrollbar-gutter: auto;
}

.sidebar.collapsed .sidebar-link.active {
    background: rgba(var(--bs-primary-rgb), 0.25);
    border-left-color: transparent;
}

.sidebar-badge {
    margin-left: auto;
    min-width: 1.25rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    border-radius: 999px;
    background: var(--bs-danger);
    color: #fff;
}

.sidebar-link .sidebar-badge {
    flex-shrink: 0;
}

.sidebar-nav-alert {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--bs-danger);
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.sidebar-nav-alerts {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.sidebar-nav-alerts .sidebar-nav-alert {
    margin-left: 0;
}

.sidebar-nav-alert--warning {
    color: var(--bs-warning);
}

/* Keep staffing/unassigned triangles visible when the sidebar is collapsed. */
.sidebar.collapsed .sidebar-badge {
    display: none;
}

.sidebar.collapsed .sidebar-nav-alert,
.sidebar.collapsed .sidebar-nav-alerts {
    display: inline-flex;
    position: absolute;
    right: 0.15rem;
    top: 0.2rem;
    margin-left: 0;
}

/* Nav customize / SortableJS reorder */
.nav-sort-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 2px;
}

.nav-sort-list > .nav-sort-item--group:not(:first-child) {
    margin-top: 4px;
}

.nav-sort-list--empty {
    min-height: 28px;
}

.nav-sort-item {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 4px;
    border-radius: 7px;
    list-style: none;
}

.nav-sort-item--group {
    align-items: flex-start;
}

.nav-sort-item--group > .sidebar-sortable-handle {
    margin-top: 10px;
}

.nav-sort-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
}

.nav-sort-item > .sidebar-link,
.nav-sort-item-content .sidebar-link {
    flex: 1;
    min-width: 0;
}

.nav-sort-item .sidebar-group {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.sidebar-sortable-ghost {
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.55);
}

.sidebar-sortable-chosen {
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-sortable-drag {
    opacity: 0.95;
}

.sidebar-sortable-fallback {
    opacity: 0.95;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sidebar-sortable-handle {
    display: flex;
    align-items: center;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    padding: 0 2px 0 6px;
    flex-shrink: 0;
    opacity: 0.45;
    cursor: grab;
    font-size: 0.85rem;
    line-height: 1;
}

.sidebar-sortable-handle:active {
    cursor: grabbing;
}

.sidebar.sidebar--customize .nav-sort-item:hover .sidebar-sortable-handle {
    opacity: 0.85;
}

.sidebar-sortable-arrows {
    display: none;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
}

.sidebar-sortable-actions {
    display: none;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
}

.sidebar.sidebar--customize .sidebar-sortable-actions {
    display: flex;
    opacity: 1;
}

.sidebar.sidebar--customize .sidebar-sortable-arrows {
    display: flex;
}

.sidebar.sidebar--customize .sidebar-sortable-arrows .btn,
.sidebar.sidebar--customize .sidebar-sortable-pin,
.sidebar.sidebar--customize .sidebar-sortable-hide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0 !important;
    font-size: 0.72rem;
    border-radius: 4px;
}

.sidebar.sidebar--customize .sidebar-sortable-arrows .btn:hover:not(:disabled),
.sidebar.sidebar--customize .sidebar-sortable-pin:hover,
.sidebar.sidebar--customize .sidebar-sortable-hide:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-sortable-arrows .btn {
    color: rgba(255, 255, 255, 0.5) !important;
    line-height: 1;
    padding: 0 !important;
}

.sidebar-sortable-arrows .btn:hover:not(:disabled) {
    color: #fff !important;
}

.sidebar-sortable-hide {
    color: rgba(255, 255, 255, 0.45) !important;
    line-height: 1;
    padding: 0 0.15rem !important;
}

.sidebar-sortable-pin {
    color: rgba(255, 255, 255, 0.45) !important;
    line-height: 1;
    padding: 0 0.15rem !important;
}

.sidebar.sidebar--customize .nav-sort-item:hover .sidebar-sortable-hide,
.sidebar.sidebar--customize .nav-sort-item:hover .sidebar-sortable-pin,
.sidebar-hidden-restore {
    color: rgba(255, 255, 255, 0.55) !important;
}

.sidebar-sortable-hide:hover,
.sidebar-sortable-pin:hover,
.sidebar-hidden-restore:hover {
    color: #fff !important;
}

.sidebar-hidden-items {
    margin: 0 8px 8px;
    padding: 4px 0;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}

.sidebar-hidden-item {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0.65;
}

.sidebar-hidden-item .sidebar-link {
    flex: 1;
    pointer-events: none;
}

.sidebar-hidden-restore {
    flex-shrink: 0;
    padding: 0 0.35rem !important;
    line-height: 1;
}

.sidebar-group--reorder .sidebar-group-flyout .nav-sort-item {
    margin: 0 0 1px;
}

.sidebar-customize-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 4px 10px 6px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
}

.sidebar-customize-done {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
}

.sidebar-deep-nav-item {
    padding-right: 0.35rem;
}

.sidebar-deep-nav-add {
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1;
}

.sidebar-deep-nav-add:hover {
    color: #fff !important;
}

.nav-menu-add-item-modal {
    background: rgba(0, 0, 0, 0.45);
}

.nav-menu-editor-wizard {
    background: rgba(0, 0, 0, 0.45);
}

.nav-menu-editor-stepper .badge {
    font-size: 0.7rem;
}

.nav-menu-editor-stepper .nav-menu-editor-step {
    cursor: pointer;
}

.nav-menu-editor-stepper .nav-menu-editor-step:hover .badge {
    filter: brightness(0.92);
}

.nav-menu-editor-stepper .nav-menu-editor-step:hover .small {
    text-decoration: underline;
}

.nav-editor-arrange-row:last-child {
    border-bottom: 0 !important;
}

.nav-editor-remove-list {
    max-height: min(52vh, 520px);
    overflow-y: auto;
}

.nav-editor-remove-row:last-child {
    border-bottom: 0 !important;
}

.nav-editor-remove-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-editor-preview-item {
    padding: 0.2rem 0;
}

.nav-editor-welcome-icon {
    flex-shrink: 0;
    line-height: 1;
}

.nav-editor-add-toolbar {
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    background: var(--metro-surface-raised);
}

.nav-editor-add-dept-filter .form-select {
    background-color: var(--metro-surface);
}

.nav-editor-add-catalog {
    max-height: min(52vh, 520px);
    overflow-y: auto;
    padding-right: 0.15rem;
}

.nav-editor-add-family {
    border-color: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.nav-editor-add-family-header {
    background: linear-gradient(180deg, var(--metro-surface-raised) 0%, var(--metro-surface-muted) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-editor-add-family-header--grouping {
    background: linear-gradient(180deg, color-mix(in srgb, var(--metro-primary) 6%, var(--metro-surface)) 0%, color-mix(in srgb, var(--metro-primary) 14%, var(--metro-surface)) 100%);
    border-bottom-color: rgba(var(--bs-primary-rgb), 0.2);
}

.nav-editor-add-family-icon {
    color: var(--bs-primary);
    font-size: 1rem;
}

.nav-editor-add-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
    background: var(--metro-surface-raised);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.75rem;
}

.nav-editor-add-crumb {
    color: var(--metro-text-muted);
}

.nav-editor-add-crumb--active {
    color: var(--metro-text-secondary);
    font-weight: 600;
}

.nav-editor-add-crumb-sep {
    font-size: 0.6rem;
    color: #94a3b8;
}

.nav-editor-add-item {
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, border-left-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.nav-editor-add-item--adding {
    opacity: 0.88;
    pointer-events: none;
    background: var(--metro-surface-raised);
    border-left-color: rgba(var(--bs-primary-rgb), 0.45);
}

.nav-editor-add-item--added {
    pointer-events: none;
    background: #ecfdf5;
    border-left-color: #10b981;
    animation: nav-editor-add-item-success 0.42s ease forwards;
}

.nav-menu-add-item-row.nav-editor-add-item--adding,
.nav-menu-add-item-row.nav-editor-add-item--added {
    border-left: 3px solid transparent;
    padding-left: calc(0.5rem - 3px);
}

.nav-menu-add-item-row.nav-editor-add-item--adding {
    opacity: 0.88;
    pointer-events: none;
    background: var(--metro-surface-raised);
    border-left-color: rgba(var(--bs-primary-rgb), 0.45);
}

.nav-menu-add-item-row.nav-editor-add-item--added {
    pointer-events: none;
    background: #ecfdf5;
    border-left-color: #10b981;
    animation: nav-editor-add-item-success 0.42s ease forwards;
}

@keyframes nav-editor-add-item-success {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    70% {
        opacity: 1;
        transform: translateX(6px);
    }

    100% {
        opacity: 0;
        transform: translateX(14px);
    }
}

.nav-editor-add-item:hover {
    border-left-color: var(--bs-primary);
    background: var(--metro-surface-raised);
}

.nav-editor-add-item-icon {
    width: 1.25rem;
    text-align: center;
    margin-top: 0.1rem;
}

.nav-editor-add-item-context {
    line-height: 1.35;
}

.nav-editor-add-item-path {
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
    font-size: 0.7rem;
    opacity: 0.85;
}

.nav-editor-add-empty {
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 0.5rem;
    background: var(--metro-surface-raised);
}

.nav-menu-add-item-row:last-child {
    border-bottom: 0 !important;
}

.sidebar-customize-help {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 6px 10px 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.75rem;
    line-height: 1.4;
}

.sidebar-customize-help-body {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.sidebar-customize-help-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.sidebar-customize-help-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.15rem;
}

.sidebar-customize-help-text {
    color: rgba(255, 255, 255, 0.72);
}

.sidebar-customize-help-text strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.sidebar-customize-help-dismiss {
    align-self: flex-end;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.72rem;
}

.sidebar-customize-help-dismiss:hover {
    color: #fff !important;
}

.sidebar-customize-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    margin: 0 8px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.sidebar-customize-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.35);
}

.sidebar.collapsed .sidebar-customize-btn {
    justify-content: center;
    width: calc(var(--sidebar-collapsed-width) - 12px);
    margin: 1px auto;
    padding: 9px;
    gap: 0;
}

.sidebar.collapsed .sidebar-customize-btn .sidebar-label {
    display: none;
}

.sidebar-sortable-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin: 0 4px;
    border-radius: 7px;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}

.sidebar-sortable-row--dragging {
    opacity: 0.55;
}

.sidebar-sortable-row--drop-target {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-drop-band {
    min-height: 10px;
    margin: 2px 8px;
    border-radius: 4px;
    background: transparent;
    transition: min-height 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    flex-shrink: 0;
}

.sidebar-drop-band--active {
    min-height: 18px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.sidebar-drop-band--active::after {
    content: "";
    display: block;
    height: 3px;
    margin: 6px 4px 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.18);
}

.sidebar-sortable-row-main {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.sidebar-sortable-row--stack-target {
    outline: 2px dashed rgba(255, 255, 255, 0.32);
    outline-offset: 1px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.sidebar.sidebar--customize .sidebar-group-header-row {
    flex-wrap: nowrap;
}

.sidebar.sidebar--customize .sidebar-section-rename-input {
    min-width: 120px;
}

.sidebar.sidebar--customize .nav-sort-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 4px 4px;
    padding: 2px 0;
}

.sidebar.sidebar--customize .nav-sort-item--leaf {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.sidebar.sidebar--customize .nav-sort-item--group {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
}

.sidebar.sidebar--customize .nav-sort-item--group > .nav-sort-item-content,
.sidebar.sidebar--customize .nav-sort-item--group .sidebar-group {
    display: contents;
}

.sidebar.sidebar--customize .nav-sort-item--group > .sidebar-sortable-handle {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
}

.sidebar.sidebar--customize .nav-sort-item--group > .sidebar-sortable-actions {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
}

.sidebar.sidebar--customize .nav-sort-item--group .sidebar-group-header-row {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.sidebar.sidebar--customize .nav-sort-item--group .sidebar-group-flyout {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    padding: 6px 0 8px 8px;
    gap: 6px;
}

.sidebar.sidebar--customize .nav-sort-item > .sidebar-sortable-handle {
    grid-column: 1;
}

.sidebar.sidebar--customize .nav-sort-item--leaf > .sidebar-icon {
    grid-column: 2;
    flex-shrink: 0;
}

.sidebar.sidebar--customize .nav-sort-item--leaf > .nav-sort-item-label-cell {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 0;
}

.sidebar.sidebar--customize .nav-sort-item--leaf > .nav-sort-item-label-cell .nav-sort-item-label {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.sidebar.sidebar--customize .nav-sort-item--leaf > .sidebar-sortable-actions {
    grid-column: 4;
}

.sidebar.sidebar--customize .nav-sort-item > .sidebar-link,
.sidebar.sidebar--customize .nav-sort-item-content .sidebar-link {
    margin: 1px 0;
    padding: 6px 8px;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.sidebar.sidebar--customize .sidebar-sublink {
    margin-left: 0 !important;
    padding-left: 8px !important;
}

.sidebar.sidebar--customize .sidebar-sublink::before {
    left: 0;
}

.sidebar.sidebar--customize .sidebar-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
    width: auto;
}

.sidebar.sidebar--customize .nav-sort-item-content {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    overflow: visible;
}

.nav-sort-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    padding: 6px 8px;
    color: rgba(255, 255, 255, 0.78);
}

.nav-sort-item-main--sub {
    padding-left: 10px;
}

.nav-sort-item-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.35;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
}

.sidebar.sidebar--customize .sidebar-group--reorder .sidebar-group-flyout {
    overflow: visible;
    max-height: none;
}

.sidebar.sidebar--customize .sidebar-group--reorder .sidebar-group-flyout .nav-sort-item--leaf {
    margin: 0 0 1px;
    padding-left: 6px;
}

.sidebar.sidebar--customize .sidebar-sortable-handle {
    width: 16px;
    padding: 0 0 0 4px;
    font-size: 0.8rem;
}

.sidebar.sidebar--customize .sidebar-customize-banner {
    flex-wrap: wrap;
    margin: 4px 6px 6px;
    padding: 6px 8px;
    font-size: 0.7rem;
    line-height: 1.35;
}

.sidebar-group--reorder .sidebar-group-flyout {
    max-height: 800px;
}

.sidebar-group--reorder.expanded .sidebar-group-flyout,
.sidebar-group--reorder .sidebar-group-flyout {
    max-height: 800px;
}

.sidebar-sortable-row-body {
    min-width: 0;
}

.sidebar-group-header-row {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 4px;
}

.sidebar-group--custom .sidebar-group-toggle {
    margin: 1px 0;
}

.sidebar-section-action {
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 0 0.25rem !important;
    line-height: 1;
}

.sidebar-section-action:hover {
    color: #fff !important;
}

.sidebar-section-rename-input {
    flex: 1;
    margin: 1px 8px;
    min-width: 0;
    font-size: 0.8rem;
}

.sidebar-group-empty-hint {
    font-style: italic;
}

.sidebar-drop-zone {
    margin: 6px 10px 8px;
    padding: 10px 10px;
    min-height: 36px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    text-align: center;
}

.sidebar-drop-zone--active {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

/* ── Sidebar groups (flyouts) ───────────────────────────────── */
.sidebar-group {
    position: relative;
}

.sidebar-group-toggle {
    width: calc(100% - 16px);
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    border-top: none;
    border-right: none;
    border-bottom: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

/*
  Group headers are <button class="sidebar-link …">. In a light color-scheme document, the UA
  can still paint a light button surface; our light-on-dark link colors then wash out. Use
  explicit backgrounds on button.* (higher specificity than .sidebar-link alone).
*/
.sidebar button.sidebar-link.sidebar-group-toggle {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.58);
}

.sidebar button.sidebar-link.sidebar-group-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}

.sidebar button.sidebar-link.sidebar-group-toggle.active {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: #fff;
    font-weight: 600;
    border-left-color: rgba(255, 255, 255, 0.92);
}

/* Open group header: readable on dark chrome whether or not a child route is active */
.sidebar .sidebar-group.expanded > button.sidebar-link.sidebar-group-toggle:not(.active) {
    background-color: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.92);
}

.sidebar .sidebar-group.expanded > button.sidebar-link.sidebar-group-toggle.active {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.07) 100%);
    color: #fff;
    border-left-color: rgba(255, 255, 255, 0.92);
}

.sidebar-group-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    transition: transform var(--transition), opacity var(--transition), color var(--transition);
}

.sidebar-group.expanded .sidebar-group-chevron {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 0.55);
}

.sidebar-group.expanded > button.sidebar-link.sidebar-group-toggle .sidebar-group-chevron,
button.sidebar-link.sidebar-group-toggle.active .sidebar-group-chevron {
    color: rgba(255, 255, 255, 0.82);
}

.sidebar.collapsed .sidebar-group-chevron { display: none; }

/* Inline expansion when sidebar is open */
.sidebar-group-flyout {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    padding-bottom: 4px;
    padding-top: 2px;
}

.sidebar-group-flyout-label {
    display: none;
}

/* Section title row only for collapsed-rail flyout; never duplicate the label in the open drawer */
.sidebar:not(.collapsed) .sidebar-group-flyout-label {
    display: none !important;
}

.sidebar-group.expanded .sidebar-group-flyout {
    max-height: 800px;
    padding-top: 4px;
    padding-bottom: 6px;
    gap: 4px;
}

/* Department sub-department flyouts can list many units — allow full scroll instead of clipping */
.sidebar-group--department .sidebar-group-flyout {
    max-height: min(72vh, 960px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.sidebar-group--department.expanded .sidebar-group-flyout {
    max-height: min(72vh, 960px);
}

.sidebar-group--department .sidebar-sublink .sidebar-label {
    white-space: normal;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Child links: slight indent + accent line so they read as nested */
.sidebar-sublink {
    margin-block: 3px;
    margin-left: 22px !important;
    padding: 8px 10px 8px 12px !important;
    min-height: 2.25rem;
    position: relative;
}

.sidebar-sublink::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255,255,255,0.08);
    border-radius: 1px;
}

.sidebar-sublink.active::before {
    background: var(--metro-primary);
}

/* ── Collapsed sidebar: pop the children out as a floating panel ── */
.sidebar.collapsed .sidebar-group-flyout {
    position: absolute;
    left: calc(var(--sidebar-collapsed-width) - 6px);
    top: 0;
    width: 220px;
    max-height: none;
    background: var(--metro-sidebar-bg);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 6px 4px;
    box-shadow: 0 18px 38px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 1100;
    overflow: visible;
    pointer-events: none;
}

.sidebar.collapsed .sidebar-group:hover .sidebar-group-flyout,
.sidebar.collapsed .sidebar-group:focus-within .sidebar-group-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.sidebar.collapsed .sidebar-group-flyout-label {
    display: block;
    padding: 4px 10px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 6px;
    white-space: nowrap;
}

/* Sublinks inside the collapsed-mode flyout panel should look like full-width nav rows, not icon-only */
.sidebar.collapsed .sidebar-group-flyout .sidebar-sublink {
    margin: 1px 4px !important;
    padding: 7px 10px !important;
    width: auto;
    justify-content: flex-start;
    border-left: 3px solid transparent;
}

.sidebar.collapsed .sidebar-group-flyout .sidebar-sublink .sidebar-label {
    display: block;
    width: auto;
}

.sidebar.collapsed .sidebar-group-flyout .sidebar-sublink::before {
    display: none;
}

.sidebar.collapsed .sidebar-group-flyout .sidebar-sublink.active {
    border-left-color: var(--metro-primary);
}

.sidebar.collapsed .sidebar-group--department .sidebar-group-flyout {
    width: min(300px, calc(100vw - var(--sidebar-collapsed-width) - 12px));
    min-width: 240px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.sidebar.collapsed .sidebar-group--department .sidebar-group-flyout-label {
    white-space: normal;
    line-height: 1.25;
}

.sidebar.collapsed .sidebar-group--department .sidebar-group-flyout .sidebar-sublink .sidebar-label {
    white-space: normal;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Footer */
.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 8px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 7px;
    overflow: hidden;
    cursor: default;
    transition: background var(--transition);
}

.sidebar-user:hover { background: rgba(255,255,255,0.08); }

.sidebar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--metro-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sidebar-user-info {
    min-width: 0;
    overflow: hidden;
    transition: opacity var(--transition), width var(--transition);
}

.sidebar-user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logout-btn {
    margin-left: auto;
    padding: 0 4px;
    color: rgba(255,255,255,0.45);
    flex-shrink: 0;
    transition: color var(--transition);
}
.sidebar-logout-btn:hover { color: #ff6b6b; }

.sidebar.collapsed .sidebar-user { justify-content: center; }
.sidebar.collapsed .sidebar-user-info { display: none; }
.sidebar.collapsed .sidebar-logout-btn { display: none; }

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 7px;
    border: none;
    background: none;
    color: rgba(255,255,255,0.3);
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: background var(--transition), color var(--transition);
}

.sidebar-collapse-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* ── Main Content Area ───────────────────────────────────────── */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.03) 0%, transparent 26rem),
        transparent;
}

/* Admin View As modal — must not render inside .topbar (backdrop-filter / sticky
   make .topbar a containing block for position:fixed descendants). Dropdown
   menus in the topbar are compensated in metroAsap.anchorDropdownMenu. */
.admin-view-as-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-bottom: var(--metro-keyboard-inset, 0px);
}

.admin-view-as-modal .modal-dialog {
    max-height: calc(100dvh - var(--metro-keyboard-inset, 0px) - 1.25rem);
}

.admin-view-as-modal .modal-content {
    max-height: inherit;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.admin-view-as-modal .modal-body {
    min-height: 0;
    overflow-y: auto;
}

.admin-view-as-modal__search {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-modal-bg, var(--metro-surface, #fff));
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
}

/* ── Top Bar ─────────────────────────────────────────────────── */

.test-environment-banner {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1040;
    background: #b45309;
    color: #fff;
    border-bottom: 1px solid color-mix(in srgb, #fff 15%, #b45309);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.test-environment-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
}

.test-environment-banner-text {
    font-size: 0.875rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.test-environment-banner-detail {
    font-weight: 400;
    opacity: 0.95;
}

.test-environment-banner-actions {
    margin-left: auto;
}

.test-mode-confirm-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 1100;
    width: min(18rem, 90vw);
}

.topbar-test-mode-btn {
    position: relative;
}

.topbar {
    height: var(--topbar-height);
    background: var(--metro-surface);
    border-bottom: 1px solid var(--metro-border);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 20px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    /* Let absolute global-search results paint below the bar (fixed height + align-items:center
       otherwise vertically centers the tall results and clips the top under browser chrome). */
    overflow: visible;
}

.topbar-search {
    position: relative;
    min-width: 0;
    z-index: 1;
}

:root[data-theme="dark"] .topbar {
    background: color-mix(in srgb, var(--metro-surface-raised) 88%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.topbar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    color: var(--metro-secondary);
    font-size: 1.1rem;
    transition: background-color var(--transition), transform var(--duration-press) var(--ease-out);
}

.topbar-toggle:active {
    transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
    .topbar-toggle:hover { background: var(--metro-hover); }
}

.topbar-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--metro-text);
    flex: 1;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mobile-only avatar trigger; shown under .mobile-shell in mobile.css */
.topbar-mobile-chrome {
    display: none;
}

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--metro-text-muted);
    text-decoration: none;
}

.topbar-icon-btn:hover,
.topbar-icon-btn:focus-visible {
    color: var(--metro-text);
}

.topbar-theme-dropdown {
    display: inline-flex;
    position: relative;
}

.topbar-theme-dropdown .dropdown-toggle::after {
    display: none;
}

.topbar-theme-panel {
    z-index: 1100;
    min-width: 13rem;
    background: var(--metro-surface-float);
    border: 1px solid var(--metro-border);
    border-radius: 0.5rem;
    box-shadow: var(--metro-shadow-sm);
    /* Keep above the dismiss overlay; anchoring JS sets position:fixed. */
    opacity: 1;
}

.theme-darkness-slider {
    width: 100%;
}

.topbar-pin-btn {
    flex-shrink: 0;
}

.pin-to-nav-menu-btn .bi-pin-angle-fill {
    color: var(--bs-primary);
}

.topbar-user-cluster {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.45rem 0.2rem 0.55rem;
    border: 1px solid var(--metro-border);
    border-radius: 14px;
    background: var(--metro-surface-raised);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.topbar-whats-new-btn {
    position: relative;
    white-space: nowrap;
}

.topbar-whats-new-badge {
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--bs-danger);
    border: 2px solid var(--metro-bg);
}

.topbar-notification-badge {
    position: absolute;
    top: 0.05rem;
    right: 0;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.22rem;
    border-radius: 999px;
    background: var(--bs-danger);
    color: #fff;
    border: 2px solid var(--metro-bg);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: calc(1rem - 4px);
    text-align: center;
}

.notification-center-card {
    transition: border-color var(--transition), box-shadow var(--transition);
}

.notification-center-card-unread {
    border-left: 4px solid var(--bs-primary);
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.08);
}

.notification-center-card-actionable {
    cursor: pointer;
}

.notification-center-body {
    white-space: pre-wrap;
    color: var(--metro-text);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.notification-center-card__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.notification-center-card__main {
    flex: 1 1 auto;
    min-width: 0;
}

.notification-center-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .notification-center-card__row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .notification-center-card__meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

.topbar-user-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    padding: 0.15rem 0.35rem;
    border-radius: 8px;
    min-width: 0;
}

.topbar-user-identity:hover {
    background: var(--metro-hover);
    color: inherit;
}

.topbar-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--metro-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topbar-user-text {
    min-width: 0;
    max-width: 11rem;
}

.topbar-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user-role {
    font-size: 0.7rem;
    color: var(--metro-secondary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-account-btn {
    color: var(--metro-secondary);
    padding: 0.25rem 0.4rem;
}

.topbar-logout-btn {
    white-space: nowrap;
}

/* Hamburger: small viewports only (desktop uses sidebar footer chevron) */
.topbar-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    color: var(--metro-text);
}

.topbar-menu-btn:hover {
    background: var(--metro-hover);
    color: var(--metro-text);
}

/* Drawer backdrop (mobile / narrow): toggled from MainLayout */
.sidebar-backdrop {
    display: none;
}

/* MetroDrawer width variants (offcanvas-end) */
.offcanvas.metro-drawer-sm { --bs-offcanvas-width: min(320px, 95vw); }
.offcanvas.metro-drawer-md { --bs-offcanvas-width: min(480px, 95vw); }
.offcanvas.metro-drawer-lg { --bs-offcanvas-width: min(640px, 95vw); }
.offcanvas.metro-drawer-xl { --bs-offcanvas-width: min(820px, 95vw); }
/* Stack drawer above Bootstrap modals (e.g. FOIA case editor + linked record preview). */
.offcanvas.metro-drawer-stacked {
    z-index: 1070;
}
.offcanvas.metro-drawer-stacked + .offcanvas-backdrop {
    z-index: 1065;
}
.offcanvas-footer {
    flex-shrink: 0;
}

/* ── Page Body ───────────────────────────────────────────────── */
.page-body {
    position: relative;
    flex: 1;
    min-height: 0; /* flex child must shrink so overflow-y:auto owns vertical scroll */
    --page-body-pad-y: 24px;
    padding: var(--page-body-pad-y);
    overflow-y: auto;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.028) 0%, transparent 18rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, transparent 12rem);
}

/* Work order detail header: allow More dropdown to escape scroll container */
.wo-detail-sticky-header {
    overflow: visible;
}

.work-order-detail-page {
    --wo-detail-radius: 0.625rem;
    --wo-visit-action-min: 44px;
}

.wo-detail-hero {
    border: 1px solid var(--metro-border);
    border-radius: var(--wo-detail-radius);
    background: var(--metro-surface);
    overflow: hidden;
}

.wo-detail-hero__body {
    padding: 0.75rem 1rem 0.65rem;
}

.wo-detail-hero__title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.2rem 0 0;
    color: var(--metro-text);
}

.wo-detail-hero__subtitle {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--metro-text-muted, #6b7280);
    margin: 0.2rem 0 0;
}

.wo-detail-hero__address {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    margin: 0.45rem 0 0;
    padding: 0.35rem 0.7rem;
    min-height: 40px;
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    background: var(--metro-surface-muted, #f8fafc);
    color: var(--bs-primary, #0d6efd);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.wo-detail-hero__address:hover,
.wo-detail-hero__address:focus-visible {
    background: var(--metro-surface-hover, #eef2f7);
    text-decoration: none;
}

.wo-detail-hero__address-text {
    color: var(--metro-text, #1f2937);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wo-detail-hero__address-cta {
    flex-shrink: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (max-width: 768px) {
    .wo-detail-hero__address { width: 100%; min-height: 44px; }
    .wo-detail-hero__address-text { white-space: normal; }
}

:root[data-theme="dark"] .wo-detail-hero__address {
    background: var(--metro-surface-muted, #1a1a1f);
    border-color: var(--metro-border, #2e2e38);
}

.wo-detail-hero__chips {
    margin-top: 0.4rem;
    width: 100%;
}

.wo-detail-hero__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--metro-border);
    background: var(--metro-surface-muted);
}

.wo-detail-meta-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

button.wo-detail-meta-item {
    appearance: none;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: inherit;
    cursor: pointer;
    border-radius: 0.35rem;
    transition: background-color .15s ease, box-shadow .15s ease;
}

button.wo-detail-meta-item:hover,
button.wo-detail-meta-item:focus-visible {
    background: color-mix(in srgb, var(--metro-primary, #0d6efd) 8%, transparent);
    outline: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metro-primary, #0d6efd) 28%, transparent);
}

.wo-detail-meta-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--metro-text-muted, #6b7280);
}

.wo-detail-meta-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--metro-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wo-detail-meta-sub {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--metro-text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wo-detail-workflow-strip {
    border: 1px solid var(--metro-border);
    border-radius: var(--wo-detail-radius, 0.625rem);
    background: var(--metro-surface);
    padding: 0.875rem 1.125rem;
}

/* Job Progress — horizontal status flow under the work-order hero meta row */
.wo-job-progress {
    --wo-jp-bg: var(--metro-surface);
    --wo-jp-fg: var(--metro-text);
    --wo-jp-muted: var(--metro-text-muted);
    --wo-jp-line: var(--metro-border-strong);
    --wo-jp-pill-bg: var(--metro-surface-muted);
    --wo-jp-pill-fg: var(--metro-text);
    --wo-jp-done-label: var(--metro-text);
    --wo-jp-btn-hover-border: var(--metro-border-strong);
    --wo-jp-active: var(--metro-primary);
    --wo-jp-active-glow: rgba(var(--bs-primary-rgb), 0.18);
    border-radius: 0.875rem;
    background: var(--wo-jp-bg);
    color: var(--wo-jp-fg);
    padding: 1rem 1.15rem 1.1rem;
    border: 1px solid var(--metro-border);
    box-shadow: var(--metro-shadow-sm);
}

:root[data-theme="dark"] .wo-job-progress {
    --wo-jp-bg: var(--metro-surface-raised);
    --wo-jp-fg: var(--metro-text);
    --wo-jp-muted: var(--metro-text-muted);
    --wo-jp-line: var(--metro-border-strong);
    --wo-jp-pill-bg: var(--metro-surface-float);
    --wo-jp-pill-fg: var(--metro-text);
    --wo-jp-done-label: var(--metro-text-secondary);
    --wo-jp-btn-hover-border: var(--metro-border-strong);
    --wo-jp-active: var(--metro-primary);
    --wo-jp-active-glow: rgba(var(--bs-primary-rgb), 0.28);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.wo-job-progress__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.05rem;
}

.wo-job-progress__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--wo-jp-fg);
}

.wo-job-progress__hint {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--wo-jp-muted);
}

.wo-job-progress__pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--wo-jp-pill-bg);
    color: var(--wo-jp-pill-fg);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wo-job-progress__steps {
    list-style: none;
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0.15rem 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 0.75rem;
    scrollbar-width: thin;
}

.wo-job-progress__step {
    position: relative;
    flex: 1 1 0;
    min-width: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wo-job-progress__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: center;
    cursor: default;
}

button.wo-job-progress__node {
    cursor: pointer;
}

button.wo-job-progress__node:focus-visible {
    outline: 2px solid var(--wo-jp-active);
    outline-offset: 3px;
    border-radius: 0.5rem;
}

.wo-job-progress__circle {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid var(--wo-jp-line);
    color: var(--wo-jp-muted);
    background: transparent;
    position: relative;
    z-index: 1;
}

.wo-job-progress__label {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--wo-jp-muted);
    max-width: 7.5rem;
    word-break: break-word;
}

.wo-job-progress__resend {
    margin-top: 0.35rem;
    padding: 0;
    font-size: 0.6875rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: normal;
    max-width: 7.5rem;
}

.wo-job-progress__resend:hover,
.wo-job-progress__resend:focus-visible {
    text-decoration: underline;
}

.wo-job-progress__connector {
    position: absolute;
    top: 1.15rem;
    left: calc(50% + 1.25rem);
    right: calc(-50% + 1.25rem);
    height: 2px;
    background: var(--wo-jp-line);
    pointer-events: none;
}

.wo-job-progress__connector.is-complete {
    background: var(--wo-jp-active);
}

.wo-job-progress__connector.is-partial {
    background: linear-gradient(90deg, var(--wo-jp-active) 0%, var(--wo-jp-active) 45%, var(--wo-jp-line) 55%, var(--wo-jp-line) 100%);
}

.wo-job-progress__step.is-done .wo-job-progress__circle {
    border-color: var(--wo-jp-active);
    background: var(--wo-jp-active);
    color: #fff;
}

.wo-job-progress__step.is-done .wo-job-progress__label {
    color: var(--wo-jp-done-label);
    font-weight: 600;
}

.wo-job-progress__step.is-current .wo-job-progress__circle {
    border-color: var(--wo-jp-active);
    color: #fff;
    background: var(--wo-jp-active);
    box-shadow: 0 0 0 4px var(--wo-jp-active-glow);
}

.wo-job-progress__step.is-current .wo-job-progress__label {
    color: var(--wo-jp-fg);
    font-weight: 700;
}

.wo-job-progress__approval {
    color: var(--wo-jp-muted);
    padding: 0.25rem 0 0.15rem;
}

.wo-job-progress__standalone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
}

.wo-job-progress__standalone-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--wo-jp-muted);
}

.wo-job-progress__standalone-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wo-job-progress__standalone-chip {
    min-width: 5.5rem;
}

.wo-job-progress__footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.wo-job-progress__expand,
.wo-job-progress__manage {
    color: var(--wo-jp-muted) !important;
    border-color: var(--wo-jp-line) !important;
    background: transparent !important;
}

.wo-job-progress__expand:hover,
.wo-job-progress__manage:hover:not(:disabled) {
    color: var(--wo-jp-fg) !important;
    border-color: var(--wo-jp-btn-hover-border) !important;
}

.wo-job-progress__manage:disabled {
    opacity: 0.65;
}

.wo-job-progress__details {
    margin-top: 0.85rem;
    border-top: 1px solid var(--wo-jp-line);
    color: var(--metro-text);
    background: var(--metro-surface-muted);
    border-radius: 0.65rem;
    padding: 0.85rem;
}

:root[data-theme="dark"] .wo-job-progress__details {
    background: var(--metro-surface);
}

@media (max-width: 575.98px) {
    .wo-job-progress {
        padding: 0.9rem 0.9rem 1rem;
    }

    .wo-job-progress__step {
        min-width: 4.75rem;
    }

    .wo-job-progress__circle {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0.875rem;
    }

    .wo-job-progress__connector {
        top: 1.05rem;
        left: calc(50% + 1.1rem);
        right: calc(-50% + 1.1rem);
    }

    .wo-job-progress__label {
        font-size: 0.75rem;
        max-width: 5.5rem;
    }
}

/* Process workflow Simple path designer — Job Progress bubbles plus droppable attachments */
.pw-simple-path .wo-job-progress__step {
    min-width: 6.5rem;
}

.pw-simple-path__step.is-dragging {
    opacity: 0.55;
}

.pw-simple-path__step.is-drop-target .wo-job-progress__circle {
    border-color: var(--wo-jp-active);
    box-shadow: 0 0 0 4px var(--wo-jp-active-glow);
}

.pw-simple-path__handle {
    cursor: grab;
}

.pw-simple-path__handle:active {
    cursor: grabbing;
}

.pw-simple-path__attachments {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.2rem;
    width: 100%;
    position: relative;
    z-index: 2;
}

.pw-simple-path__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--wo-jp-line);
    background: var(--wo-jp-pill-bg);
    color: var(--wo-jp-fg);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.pw-simple-path__chip i {
    font-size: 0.75rem;
}

.pw-simple-path__chip--danger {
    border-color: color-mix(in srgb, var(--bs-danger) 45%, var(--wo-jp-line));
    color: var(--bs-danger);
    background: color-mix(in srgb, var(--bs-danger) 8%, var(--wo-jp-pill-bg));
}

@media (max-width: 991.98px) {
    .wo-detail-hero__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .wo-detail-hero__body {
        padding: 0.875rem 1rem 0.75rem;
    }

    .wo-detail-hero__title {
        font-size: 1.15rem;
    }

    .wo-detail-hero__meta {
        grid-template-columns: 1fr;
        gap: 0.625rem;
        padding: 0.75rem 1rem;
    }

    .wo-detail-meta-value {
        white-space: normal;
    }
}

.wo-detail-section-card {
    border: 1px solid var(--metro-border);
    border-radius: 0.625rem;
    box-shadow: none;
    background: var(--metro-surface);
    overflow: hidden;
}

/* Dashboard grid containment lives in css/dashboard-grid.css (loaded globally).
   Work-order detail only tweaks rhythm/height on top of those rules. */
.wo-detail-dashboard {
    margin-top: 0.5rem;
}

.wo-detail-dashboard .dashboard-grid-shell {
    --dashboard-grid-gap: 0.875rem;
}

.wo-detail-dashboard .dashboard-grid-toolbar {
    margin-bottom: 0.875rem;
}

.wo-detail-dashboard .dashboard-grid-item-inner > .card,
.wo-detail-dashboard .dashboard-grid-item-inner > .wo-detail-section-card,
.wo-detail-dashboard .dashboard-grid-item-inner > [class*="card"] {
    height: 100%;
    max-width: 100%;
    min-width: 0;
}

.wo-detail-dashboard .dashboard-grid-item-inner > .card.mb-3,
.wo-detail-dashboard .dashboard-grid-item-inner > .card.mb-2 {
    margin-bottom: 0 !important;
}

/* Tabbed staff work-order detail — sticky quick-action bar (Overview → …).
   Sticky MUST NOT share an element with overflow-x:auto (that computes overflow-y
   and makes the node its own scrollport, so it never sticks to page scroll).
   Markup: sits under chrome (hero), above __scroll — starts in place, pins on scroll. */
.wo-detail-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-top: 0.75rem;
    padding: 0.35rem 0 0.5rem;
    background: var(--metro-bg, var(--bs-body-bg, #fff));
}

.wo-detail-tabs .metro-tabs {
    position: relative;
    top: auto;
    z-index: 1;
    background: var(--metro-surface, #fff);
    padding: 0.35rem 0 0.65rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    overflow: visible;
    flex-wrap: wrap;
}

.wo-detail-tabs .metro-tab {
    white-space: nowrap;
    flex: 0 0 auto;
}

.wo-detail-tab-panels {
    padding-top: 0.5rem;
}

.wo-detail-tab-panel {
    min-height: 12rem;
}

.wo-detail-layout-switch {
    flex-shrink: 0;
}

.wo-detail-tabs--card .wo-detail-tab-panels,
.wo-detail-card-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.25rem;
}

.wo-detail-card-stack__panel {
    background: var(--metro-surface, #fff);
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.1));
    border-radius: 0.625rem;
    padding: 1rem 1.15rem 1.15rem;
    min-height: 0;
    box-shadow: none;
}

.wo-detail-card-stack__heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--metro-text, inherit);
}

.wo-detail-card-stack__heading .bi {
    opacity: 0.72;
    font-size: 1rem;
}

.wo-detail-card-stack__panel .wo-detail-embedded-section:last-child,
.wo-detail-card-stack__panel .wo-detail-section-dash-v2-card:last-child,
.wo-detail-card-stack__panel .card.wo-detail-section-dash-v2-card:last-child {
    margin-bottom: 0;
}

.wo-detail-card-stack__panel {
    /* Desktop wrap can be 2+ chip rows; mobile/app collapses to one-line dropdown. */
    scroll-margin-top: var(--detail-sticky-chrome, 8.5rem);
}

.wo-detail-section-nav {
    margin-bottom: 0.65rem;
}

/* Card layout nests section-nav inside .wo-detail-tabs; outer sticky owns the pin. */
.wo-detail-tabs .property-section-nav {
    position: static;
    top: auto;
    z-index: auto;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
}

/* Keep a light chrome/scroll split for card stacking, but do NOT use overflow:hidden
   ancestors here — that breaks position:sticky when page-body / mobile-shell scrolls.
   Quick-access sits under chrome (hero) and above __scroll so it starts in place,
   then sticky-pins while content scrolls. */
.wo-detail-card-layout__chrome {
    flex-shrink: 0;
    z-index: 6;
    padding-bottom: 0.35rem;
    background: var(--metro-bg, var(--bs-body-bg, #fff));
}

.wo-detail-card-layout__scroll {
    min-width: 0;
    padding-top: 0.5rem;
    padding-bottom: 1.25rem;
    overflow-x: clip;
}

@media print {
    .wo-detail-section-nav {
        display: none !important;
    }
}

/* Glance Overview + type-tab shell (Blackberry reuses these classes). */
.wo-detail-overview {
    --wo-visit-action-min: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "main"
        "rail"
        "cta";
    gap: 1.25rem;
    align-items: start;
}

.wo-detail-overview__main {
    grid-area: main;
    min-width: 0;
    /* Glance tiles respond to main-column width (tablet portrait + rail), not only viewport. */
    container-type: inline-size;
    container-name: wo-overview-main;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wo-detail-overview__main > .card {
    height: auto;
}

.wo-detail-overview > .card {
    grid-column: 1 / -1;
}

.wo-detail-overview__rail {
    grid-area: rail;
    min-width: 0;
}

.wo-detail-overview__cta {
    grid-area: cta;
    /* Stay in normal document flow (grid shell + classic overview). Sticky bottom
       floated the Schedule CTA over glance/fields while scrolling. */
    position: relative;
    z-index: auto;
    margin: 0 -0.25rem;
    padding: 0.65rem 0.25rem 0.15rem;
    background: linear-gradient(180deg, transparent, var(--metro-surface, #fff) 28%);
}

/* Classic tab overview: same in-flow placement as the base rule (no sticky dock). */
.wo-detail-overview > .wo-detail-overview__cta {
    position: relative;
    bottom: auto;
    z-index: auto;
}

.wo-detail-overview__cta-inner {
    display: flex;
}

.wo-detail-overview__cta-btn {
    width: 100%;
    min-height: var(--wo-visit-action-min, 44px);
}

.wo-detail-glance {
    display: grid;
    gap: .55rem;
    /* 2×2 by default — 4-up only when the main column is wide enough (see @container / ≥1100px). */
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1rem;
}

.wo-detail-glance > div,
.wo-detail-glance > button {
    background: var(--metro-surface-muted, #f8fafc);
    border: 1px solid var(--metro-border, #e4e7ec);
    border-radius: .75rem;
    display: flex;
    flex-direction: column;
    gap: .28rem;
    min-width: 0;
    padding: .7rem .75rem;
}

.wo-detail-glance strong {
    font-size: .92rem;
    font-weight: 750;
    letter-spacing: -.012em;
    line-height: 1.25;
    /* Prefer whole-word wrap; "anywhere" crushed Unassigned / addresses on narrow tiles. */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.wo-detail-glance .badge {
    white-space: normal;
    text-align: left;
    max-width: 100%;
    line-height: 1.25;
}

.wo-detail-overview__details {
    margin-top: 0.25rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--wo-detail-radius, 0.625rem);
    background: var(--metro-surface, #fff);
}

.wo-detail-overview__details-summary,
.wo-detail-assign-disclosure__summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--metro-text, #111827);
    list-style: none;
    min-height: var(--wo-visit-action-min, 44px);
    display: flex;
    align-items: center;
}

.wo-detail-overview__details-summary::-webkit-details-marker,
.wo-detail-assign-disclosure__summary::-webkit-details-marker {
    display: none;
}

.wo-detail-overview__details-summary::before,
.wo-detail-assign-disclosure__summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.4rem;
    color: var(--metro-text-muted, #6b7280);
}

.wo-detail-overview__details[open] > .wo-detail-overview__details-summary::before,
.wo-detail-assign-disclosure[open] > .wo-detail-assign-disclosure__summary::before {
    content: "▾";
}

.wo-detail-assign-disclosure {
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--wo-detail-radius, 0.625rem);
    background: var(--metro-surface, #fff);
    padding: 0.5rem 0.85rem 0.75rem;
}

.wo-detail-assign-disclosure__body {
    padding-top: 0.5rem;
}

.wo-detail-type-tab {
    max-width: none;
}

/* Inspection result (visits panel): one focused card — verdict, comments, photos. */
.wo-visit-result {
    width: 100%;
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    border-left-width: 5px;
    border-radius: var(--wo-detail-radius, 0.625rem);
    background: var(--metro-surface, #fff);
    padding: 1rem 1.1rem;
    margin-bottom: 0.85rem;
}

/* Double-class so the older .wo-visit-card `border:` shorthand (same card) cannot reset the edge. */
.wo-visit-result.wo-visit-result--pending,
.wo-visit-result.wo-visit-result--pass,
.wo-visit-result.wo-visit-result--fail { border-left-width: 5px; border-left-style: solid; }
.wo-visit-result.wo-visit-result--pending { border-left-color: #f59e0b; }
.wo-visit-result.wo-visit-result--pass { border-left-color: #16a34a; }
.wo-visit-result.wo-visit-result--fail { border-left-color: #dc2626; }

.wo-visit-result__verdict {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.wo-visit-result__verdict-icon {
    font-size: 2rem;
    line-height: 1;
}

.wo-visit-result--pass .wo-visit-result__verdict-icon { color: #16a34a; }
.wo-visit-result--fail .wo-visit-result__verdict-icon { color: #dc2626; }

.wo-visit-result__verdict-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.wo-visit-result__meta { color: var(--metro-text-muted, #6b7280); }

.wo-visit-result__section {
    border-top: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.wo-visit-result__label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--metro-text-muted, #6b7280);
    margin-bottom: 0.4rem;
}

.wo-visit-result__files {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wo-visit-result__file {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    border-radius: 0.5rem;
    background: var(--metro-surface-muted, #f8fafc);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.wo-visit-result__file:hover { background: var(--metro-surface-hover, #eef2f7); }

button.wo-visit-result__file {
    width: 100%;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.wo-visit-verdict {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin: 0.25rem 0 0.5rem;
}

.wo-visit-verdict__btn {
    min-height: 56px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 0.75rem;
}

.wo-visit-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wo-visit-photo-actions .wo-visit-action { flex: 1 1 10rem; }

@media (max-width: 768px) {
    .wo-visit-result { padding: 0.85rem 0.9rem; }
    .wo-visit-verdict__btn { min-height: 64px; font-size: 1.15rem; }
}

:root[data-theme="dark"] .wo-visit-result__file {
    background: var(--metro-surface-muted, #1a1a1f);
    border-color: var(--metro-border, #2e2e38);
}

/* Shared inspector field card actions (queue / my-day / calendar) */
.inspector-field-card-actions {
    margin-top: 0.65rem;
}
.inspector-field-card-actions__btn {
    min-height: 2.5rem;
    font-weight: 600;
}

.inspector-field-card-actions__primary {
    font-weight: 700;
}

.inspector-field-card-actions__more {
    flex: 1 1 100%;
}

.inspector-field-card-actions__more-toggle {
    display: flex;
    align-items: center;
    min-height: 48px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

.inspector-field-card-actions__more-toggle::-webkit-details-marker {
    display: none;
}

.inspector-field-card-actions__more-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.field-checklist-segments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field-checklist-segments .btn {
    min-height: 48px;
    font-weight: 700;
}

.building-inspection-address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.building-inspection-address__text {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--metro-text, #14213d);
}

.building-inspection-directions {
    min-height: 48px;
}

/* Inspector "My day" landing — field-home composition */
.inspector-my-day-page {
    --inspector-my-day-radius: 14px;
    --inspector-my-day-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07);
}

.inspector-my-day-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0 0 0.85rem;
}
.inspector-my-day-shortcuts__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 4.5rem;
    padding: 0.55rem 0.35rem;
    border-radius: 14px;
    border: 1.5px solid var(--metro-border, rgba(0, 0, 0, 0.1));
    background: var(--metro-surface, #fff);
    color: var(--metro-text, #0f172a);
    font-weight: 600;
    font-size: 0.78rem;
    text-decoration: none;
    box-shadow: var(--inspector-my-day-shadow);
    transition: background-color 180ms ease, border-color 180ms ease, transform 160ms ease;
}
.inspector-my-day-shortcuts__btn i {
    font-size: 1.35rem;
    line-height: 1;
}
.inspector-my-day-shortcuts__btn--primary {
    background: var(--metro-primary, #0d6efd);
    border-color: var(--metro-primary, #0d6efd);
    color: #fff;
}
.inspector-my-day-shortcuts__btn--active {
    border-color: var(--metro-primary, #0d6efd);
    color: var(--metro-primary, #0d6efd);
    background: color-mix(in srgb, var(--metro-primary, #0d6efd) 10%, var(--metro-surface, #fff));
}
.inspector-my-day-shortcuts__btn:active {
    transform: scale(0.97);
}
@media (max-width: 380px) {
    .inspector-my-day-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.inspector-my-day-pending {
    margin-top: 0.25rem;
}

/* Unscheduled-queue "Load more" on My Day and both calendar pending trays — full-width ≥48px inspector phone tap. */
.inspector-my-day-pending__more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--metro-touch-target-min, 48px);
    border-radius: 12px;
    font-weight: 600;
    padding: 0.55rem 1rem;
}

.inspection-cal-timed {
    display: grid;
    grid-template-columns: 56px repeat(var(--inspection-cal-days, 7), minmax(0, 1fr));
    min-width: 0;
}
@media (max-width: 991.98px) {
    .inspection-cal-timed {
        grid-template-columns: 48px repeat(var(--inspection-cal-days, 7), minmax(5.5rem, 1fr));
        min-width: calc(48px + (var(--inspection-cal-days, 7) * 5.5rem));
    }
}
.inspection-cal-month-day.is-selected-agenda {
    outline: 2px solid var(--metro-primary, #0d6efd);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--metro-primary, #0d6efd) 8%, var(--metro-surface, #fff));
}
.inspection-cal-agenda .inspector-field-card-actions {
    margin-top: 0.5rem;
}

.wo-detail-hero--field .breadcrumb { display: none; }
.wo-detail-hero--field .wo-detail-hero__title { font-size: 1.25rem; }
.work-order-mobile-actions--field {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.work-order-mobile-actions--field .work-order-mobile-actions__btn {
    flex: 1 1 auto;
    min-height: 2.75rem;
    justify-content: center;
}

.cv-quick-violation-dialog {
    display: flex;
    flex-direction: column;
    max-height: min(88dvh, calc(100dvh - 2rem));
    margin-top: auto;
    margin-bottom: auto;
}

.cv-quick-violation-dialog .modal-content {
    min-height: 0;
    max-height: inherit;
}

.cv-quick-library-wrap {
    max-height: 14rem;
    overflow-y: auto;
}

.cv-quick-violation-body {
    padding-bottom: 0.75rem;
}

/* Field inspector: property / citizen detail — single-column, large taps on phone */
@media (max-width: 767.98px) {
    .property-detail-hero,
    .dash-v2-hero--compact {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }
    .property-detail-hero__title {
        font-size: 1.2rem;
        line-height: 1.3;
    }
    .property-detail-chips {
        gap: 0.35rem;
    }
    .property-detail-page .btn,
    .dash-v2--staff .btn {
        min-height: 2.5rem;
    }
}

.inspector-my-day-page__chrome {
    margin-bottom: 0.85rem;
}

.inspector-my-day-page .inspection-page-header-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}

.inspector-my-day-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 12px;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

.inspector-my-day-action:active:not(:disabled) {
    transform: scale(0.97);
}

.inspector-my-day-action:disabled,
.inspector-my-day-action.disabled {
    opacity: 0.55;
    pointer-events: none;
}

.inspector-my-day-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 0;
}

.inspector-my-day-stat {
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--inspector-my-day-radius, 0.875rem);
    background: var(--metro-surface, #fff);
    box-shadow: var(--inspector-my-day-shadow);
    padding: 0.75rem 0.65rem;
    text-align: center;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.inspector-my-day-stat__value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.inspector-my-day-stat__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--metro-text-muted, #6b7280);
}

.inspector-my-day-stat--remaining .inspector-my-day-stat__value { color: #b45309; }
.inspector-my-day-stat--done .inspector-my-day-stat__value { color: #15803d; }

.inspector-my-day-next {
    padding: 1rem 1.1rem;
    border-left: 5px solid var(--bs-primary, #0d6efd);
    border-radius: var(--inspector-my-day-radius, 0.875rem);
    box-shadow: var(--inspector-my-day-shadow);
}

.inspector-my-day-next__eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--metro-text-muted, #6b7280);
}

.inspector-my-day-next__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 0.2rem;
}

.inspector-my-day-next__address { color: var(--metro-text-muted, #6b7280); }

.inspector-my-day-next__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.inspector-my-day-next__cta,
.inspector-my-day-next__view {
    min-height: 48px;
    border-radius: 12px;
    font-weight: 600;
    padding: 0.55rem 1rem;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease, opacity 200ms ease;
}

.inspector-my-day-next__cta {
    flex: 1 1 12rem;
}

.inspector-my-day-next__view {
    flex: 0 1 auto;
}

.inspector-my-day-next__cta:active,
.inspector-my-day-next__view:active {
    transform: scale(0.97);
}

.inspector-my-day {
    border-radius: var(--inspector-my-day-radius, 0.875rem);
    box-shadow: var(--inspector-my-day-shadow);
    overflow: hidden;
}

.inspector-my-day__day-chrome {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--metro-surface, #fff) !important;
    transition: box-shadow 200ms ease;
}

.inspector-my-day__day-nav .btn {
    min-height: 48px;
    min-width: 48px;
    border-radius: 12px;
    font-weight: 600;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease, opacity 200ms ease;
}

.inspector-my-day__day-nav .btn:active:not(:disabled) {
    transform: scale(0.97);
}

.inspector-my-day__day-nav .btn:disabled {
    opacity: 0.5;
}

.inspector-my-day__date-input {
    width: auto;
    min-height: 48px;
    border-radius: 12px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.inspector-my-day__calendar-link {
    min-height: 48px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.inspector-my-day__calendar-link:active {
    transform: scale(0.97);
}

.inspector-my-day__row {
    transition: background-color 200ms ease, transform 200ms ease;
    -webkit-tap-highlight-color: transparent;
}

.inspector-my-day__row:active {
    background-color: color-mix(in srgb, var(--metro-surface-muted, #f1f5f9) 80%, transparent);
}

.inspector-my-day .list-group-item .btn {
    min-height: 44px;
    border-radius: 12px;
    font-weight: 600;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.inspector-my-day .list-group-item .btn:active {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    .inspector-my-day-action,
    .inspector-my-day-next__cta,
    .inspector-my-day-next__view,
    .inspector-my-day__day-nav .btn,
    .inspector-my-day__calendar-link,
    .inspector-my-day__row,
    .inspector-my-day .list-group-item .btn {
        transition: none;
    }

    .inspector-my-day-action:active:not(:disabled),
    .inspector-my-day-next__cta:active,
    .inspector-my-day-next__view:active,
    .inspector-my-day__day-nav .btn:active:not(:disabled),
    .inspector-my-day__calendar-link:active,
    .inspector-my-day .list-group-item .btn:active {
        transform: none;
    }
}

.wo-visit-card {
    width: 100%;
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--wo-detail-radius, 0.625rem);
    background: var(--metro-surface, #fff);
    padding: 1rem 1.1rem;
    margin-bottom: 0.85rem;
}

.wo-visit-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    flex-shrink: 0;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--metro-border);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--metro-text-secondary);
    background: var(--metro-surface-muted);
}

.wo-visit-status--pass {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.wo-visit-status--fail {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.wo-visit-status--pending {
    background: #fefce8;
    color: #854d0e;
    border-color: #fde68a;
}

:root[data-theme="dark"] .wo-visit-status--pass {
    background: rgba(21, 128, 61, 0.3);
    color: #86efac;
    border-color: transparent;
}

:root[data-theme="dark"] .wo-visit-status--fail {
    background: rgba(153, 27, 27, 0.35);
    color: #fca5a5;
    border-color: transparent;
}

:root[data-theme="dark"] .wo-detail-glance > div,
:root[data-theme="dark"] .wo-detail-glance > button {
    background: var(--metro-surface-muted, #1a1a1f);
    border-color: var(--metro-border, #2e2e38);
}

:root[data-theme="dark"] .wo-visit-status--pending {
    background: rgba(133, 77, 14, 0.3);
    color: #fde047;
    border-color: transparent;
}

.wo-visit-card__actions,
.wo-visit-card__composer,
.wo-visit-card__footer {
    gap: 0.5rem;
}

.wo-visit-action {
    min-height: var(--wo-visit-action-min, 44px);
    min-width: var(--wo-visit-action-min, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

.wo-visit-comment {
    min-height: var(--wo-visit-action-min, 44px);
}

@media (max-width: 768px) {
    .wo-detail-overview { --wo-visit-action-min: 48px; }
    .wo-detail-overview > .wo-detail-overview__cta {
        padding-bottom: .65rem;
    }
}

/* Side-by-side rail only when there is room for readable glance tiles + Quick assign.
   MAUI / tablet portrait (~768–1024) stays stacked so Status/Due/Assigned/Place are not crushed. */
@media (min-width: 1100px) {
    .wo-detail-overview {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 20.5rem);
        grid-template-areas:
            "main rail"
            "cta cta";
    }

    .wo-detail-overview__rail {
        position: sticky;
        top: 4.25rem;
    }

    .wo-detail-glance {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* When main is beside the rail (or otherwise narrow), keep 2×2 tiles readable. */
@container wo-overview-main (max-width: 36rem) {
    .wo-detail-glance {
        grid-template-columns: 1fr 1fr;
    }
}

@container wo-overview-main (max-width: 18rem) {
    .wo-detail-glance {
        grid-template-columns: 1fr;
    }
}

.wo-detail-embedded-section {
    border: 0;
    background: transparent;
}

.wo-detail-embedded-section__header {
    padding: 0;
    margin-bottom: 0.15rem;
}

.wo-detail-embedded-section__header .wo-detail-section-title {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.wo-detail-embedded-section__body {
    padding: 0;
}

.wo-detail-overview__lede {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.4;
    color: var(--metro-text, #111827);
}

.wo-detail-overview__fields {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.wo-detail-overview__fields > dt {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.wo-detail-overview__fields > dd {
    margin-bottom: 0;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--metro-text, #111827);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.wo-detail-overview__fields > dd .btn-link {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

@media (max-width: 575.98px) {
    .wo-detail-overview__fields > dt {
        padding-bottom: 0.1rem;
    }

    .wo-detail-overview__fields > dd {
        padding-top: 0.1rem;
        padding-bottom: 0.7rem;
    }
}

.wo-photo-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.wo-photo-thumb {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.wo-photo-thumb__btn {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.1));
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--metro-surface-muted, #f5f5f5);
    cursor: pointer;
}

.wo-photo-thumb__btn:disabled {
    cursor: default;
    opacity: 0.85;
}

.wo-photo-thumb__btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wo-photo-thumb__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--metro-muted, #6c757d);
    text-align: center;
}

.wo-photo-thumb__meta {
    min-width: 0;
}

.wo-photo-thumb__name {
    font-size: 0.8rem;
    font-weight: 600;
}

.wo-detail-hero__chips {
    gap: 0.35rem !important;
}

.wo-detail-section-header {
    background: var(--metro-surface);
    border-bottom: 1px solid transparent;
    padding: 0.625rem 0.875rem;
}

.wo-detail-section-card > .collapsible-card-header.wo-detail-section-header {
    border-bottom: 1px solid transparent;
}

.wo-detail-section-card:has(.collapsible-card-header[aria-expanded="true"]) > .collapsible-card-header.wo-detail-section-header,
.wo-detail-section-card:not(:has(.collapsible-card-header)) > .wo-detail-section-header {
    border-bottom-color: var(--metro-border);
}

.work-order-edit-actions.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.wo-detail-section-body {
    padding: 0.75rem 0.875rem;
}

.wo-detail-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--metro-text);
}

.wo-detail-section-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

.wo-detail-section-file-input {
    width: auto;
    max-width: 13rem;
    font-size: 0.8125rem;
}

.wo-detail-section-pending {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--metro-border);
    border-radius: 0.5rem;
    background: var(--metro-surface-float, rgba(0, 0, 0, 0.02));
}

.wo-detail-section-pending-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--metro-text-muted);
    margin-bottom: 0.375rem;
}

.wo-detail-section-upload {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--metro-border);
}

.wo-detail-section-upload-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--metro-text);
    margin-bottom: 0.625rem;
}

.wo-detail-section-upload .file-drop-zone {
    width: 100%;
}

.wo-detail-section-upload .wo-detail-section-file-input {
    max-width: none;
    width: 100%;
}

.wo-detail-section-upload-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--metro-text);
}

/* Dark gradient heroes reuse .page-header; keep title ink white there. */
.page-header.dash-v2-hero h1,
.page-header.dash-v2-hero h2,
.page-header.dash-v2-hero h3 {
    color: #fff;
}

.metro-page-shell-header__text h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--metro-text);
}

.metro-page-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 768px) {
    .page-header,
    .metro-page-shell-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .page-header-actions,
    .metro-page-shell-header .page-header-actions {
        width: 100%;
    }

    .page-header-actions .btn,
    .metro-page-shell-header .page-header-actions .btn {
        min-height: var(--metro-touch-target-min, 48px);
        flex: 1 1 auto;
    }

    .page-header-actions .btn-group,
    .metro-page-shell-header .page-header-actions .btn-group {
        width: 100%;
        flex-wrap: wrap;
    }

    .metro-assist-dock {
        position: fixed;
        right: 1rem;
        bottom: calc(var(--mobile-bottom-h, 64px) + var(--mobile-safe-bottom, 0px) + 0.75rem);
        z-index: 1030;
    }
}

.metro-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    margin-top: 1rem;
    padding: 0.75rem 0;
    background: linear-gradient(to top, var(--metro-bg, var(--bs-body-bg)) 70%, transparent);
}

.metro-sticky-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    background: var(--metro-surface, var(--bs-body-bg));
    border: 1px solid var(--metro-border, var(--bs-border-color));
    border-radius: 12px;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}

.mobile-shell .metro-sticky-footer {
    bottom: calc(var(--mobile-bottom-h, 64px) + var(--mobile-safe-bottom, 0px));
}

/* In normal flow (not absolutely positioned) so it can never sit on top of the
   branded card's own top-right controls (e.g. the guest city switcher). */
.login-a11y-bar {
    position: relative;
    z-index: 20;
    align-self: flex-end;
    flex: 0 0 auto;
    margin-bottom: 0.5rem;
}

.login-bg {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: linear-gradient(135deg, #1e2538 0%, var(--metro-primary) 100%);
    padding: max(10px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

.login-bg .login-page {
    min-height: auto;
    background: transparent;
    padding: 0;
    flex: 1;
    width: 100%;
}

.login-bg > #main-content {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.login-bg input.form-control,
.login-bg input.form-select,
.login-bg select.form-select {
    font-size: max(16px, 1rem);
}

.public-branded-shell {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Public form fill / wizard / CD library: use more horizontal space on desktop. */
.public-branded-shell.public-branded-shell--form {
    max-width: min(1200px, 100%);
}

.public-branded-shell.public-branded-shell--form > .login-card.card {
    max-width: none;
}

/* Phone / narrow viewport: edge-to-edge (works outside .mobile-shell too). */
@media (max-width: 768px) {
    .login-bg:has(.public-branded-shell--form) {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        padding-top: env(safe-area-inset-top, 0px);
    }

    .public-branded-shell.public-branded-shell--form,
    .public-branded-shell.public-branded-shell--form > .login-card.card {
        max-width: 100% !important; /* beat inline CardStyle max-width */
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .public-branded-shell.public-branded-shell--form > .login-card.card {
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }
}

.public-branded-shell > .login-card {
    position: relative;
    overflow: visible;
}

.public-city-switch {
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 5;
    margin-bottom: 0.25rem;
}

.public-city-switch__label {
    display: inline-block;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

/* City Pulse kiosk mode — full-viewport display for lobby TVs */
.pulse-kiosk-shell {
    width: 100vw;
    min-height: 100vh;
    padding: 1.5rem 2rem;
    background: var(--metro-surface, var(--bs-body-bg));
    overflow-y: auto;
}

/* Pulsing red dot on live activity header */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

.metro-error-panel {
    background: var(--metro-surface, var(--bs-body-bg));
}

@media (min-width: 769px) {
    /* Layout-driven minimized chrome (user prefs / narrow drawer) — mirrors .sidebar.collapsed */
    .metro-layout.sidebar-collapsed .sidebar {
        width: var(--sidebar-collapsed-width);
    }

    .metro-layout.sidebar-collapsed .sidebar .brand-text,
    .metro-layout.sidebar-collapsed .sidebar .sidebar-label,
    .metro-layout.sidebar-collapsed .sidebar .sidebar-section,
    .metro-layout.sidebar-collapsed .sidebar .sidebar-nav-search-label,
    .metro-layout.sidebar-collapsed .sidebar .sidebar-nav-search-kbd,
    .metro-layout.sidebar-collapsed .sidebar .sidebar-user-info,
    .metro-layout.sidebar-collapsed .sidebar .sidebar-nav-edit-label,
    .metro-layout.sidebar-collapsed .sidebar .sidebar-badge,
    .metro-layout.sidebar-collapsed .sidebar .sidebar-group-chevron,
    .metro-layout.sidebar-collapsed .sidebar .sidebar-logout-btn {
        display: none;
    }

    .metro-layout.sidebar-collapsed .sidebar .sidebar-nav-edit-btn {
        display: inline-flex;
        position: static;
        transform: none;
        width: 30px;
        padding: 0;
        margin-left: 0;
    }

    .metro-layout.sidebar-collapsed .sidebar .sidebar-brand {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 8px 4px;
        gap: 6px;
    }

    .metro-layout.sidebar-collapsed .sidebar .sidebar-link,
    .metro-layout.sidebar-collapsed .sidebar .sidebar-group-toggle {
        margin: 1px auto;
        width: calc(var(--sidebar-collapsed-width) - 12px);
        padding: 9px;
        justify-content: center;
        border-left-color: transparent;
        gap: 0;
    }

    .metro-layout.sidebar-collapsed .sidebar .sidebar-group-header-row {
        margin: 0;
        justify-content: center;
    }

    .metro-layout.sidebar-collapsed .sidebar .sidebar-user {
        justify-content: center;
    }
}

.topbar-notification-menu {
    z-index: 1060;
    min-width: min(20rem, calc(100vw - 1.5rem));
    max-width: min(24rem, calc(100vw - 1.5rem));
}

.topbar-notification-menu .topbar-notification-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    white-space: normal;
    width: 100%;
}

.topbar-notification-menu .topbar-notification-item__body {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-notification-menu .topbar-notification-item__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/* Blazor dropdown dismiss overlay (above topbar/sticky chrome; below anchored menu). */
.metro-dropdown-dismiss-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: transparent;
}

/* Merge-field drag from Insert field: let drop targets under the dismiss overlay receive dragover/drop. */
html.metro-merge-field-dragging .metro-dropdown-dismiss-backdrop,
/* OS file drag onto FileDropZone: same passthrough so dragover/drop reach the zone. */
html.metro-file-dropping .metro-dropdown-dismiss-backdrop {
    pointer-events: none;
}

.metro-dropdown-menu-anchored {
    z-index: 1100 !important;
}

/* Open searchable selects must stack above sticky work-order tab chrome (z-index 6–20). */
.metro-search-select:has(.metro-search-select__menu.show) {
    position: relative;
    z-index: 1100;
}

.wo-detail-overview__rail:has(.metro-search-select__menu.show),
.wo-detail-assign-disclosure:has(.metro-search-select__menu.show) {
    z-index: 30;
}

/* Dialogs mount inside .page-body. Sticky View As / test banners (z-index 1040)
   sit in a sibling stacking context and otherwise paint over the dialog header.
   Raise the scroll host while any modal is open — same idea as work-order-detail-page. */
.page-body:has(.modal.show) {
    z-index: 2100;
}

/* Modals on detail pages: elevate the page so dialogs clear the topbar (z-index:100).
   Sticky quick-access (.wo-detail-tabs / .property-section-nav, z-index:20) is a SIBLING
   of __scroll where MetroModal mounts — elevating the page alone still leaves the bar
   painting over the dialog header. Raise the scroll host (and any legacy nested hosts)
   while a modal is open. */
.wo-detail-tabs:has(.modal.show),
.wo-detail-card-layout__chrome:has(.modal.show),
.work-order-detail-page:has(.modal.show),
.property-detail-page:has(.modal.show),
.citizen-detail-page:has(.modal.show) {
    z-index: 1100;
}

.wo-detail-card-layout__scroll:has(.modal.show),
.property-detail-page__scroll:has(.modal.show),
.citizen-detail-page__scroll:has(.modal.show) {
    position: relative;
    z-index: 1100;
}

/* Belt-and-suspenders: tuck sticky quick-access under the open dialog. */
.work-order-detail-page:has(.modal.show) .wo-detail-tabs,
.property-detail-page:has(.modal.show) .property-section-nav,
.property-detail-page:has(.modal.show) .property-detail-tabs,
.citizen-detail-page:has(.modal.show) .property-section-nav,
.citizen-detail-page:has(.modal.show) .citizen-detail-tabs,
.business-entity-detail-page:has(.modal.show) .business-entity-detail-tabs,
.business-entity-detail-page:has(.modal.show) .property-section-nav,
.fleet-detail-page:has(.modal.show) .fleet-detail-tabs,
.fleet-detail-page:has(.modal.show) .property-section-nav,
.dash-v2--legislative:has(.modal.show) .legislative-item-detail-tabs,
.dash-v2--legislative:has(.modal.show) .property-section-nav,
.dash-v2--public-works:has(.modal.show) .bid-project-detail-tabs,
.dash-v2--public-works:has(.modal.show) .property-section-nav {
    z-index: 1;
}

/* Match toggle width for custom Blazor dropdowns; avoid w-100 (!important) on menus — it becomes viewport-wide when position:fixed. */
.dropdown.w-100 > .dropdown-menu:not(.metro-dropdown-menu-anchored) {
    width: 100%;
    min-width: 100%;
}

/* Native <select> → searchable dropdown (metroAsap.initSearchableSelects). */
.metro-search-select {
    position: relative;
    display: block;
    max-width: 100%;
}

.metro-search-select.w-auto {
    display: inline-block;
    width: auto;
}

.metro-search-select__button {
    width: 100%;
    display: block;
}

.metro-search-select.w-auto .metro-search-select__button {
    width: auto;
    min-width: 6rem;
}

.input-group > .metro-search-select--in-input-group {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group > .metro-search-select--in-input-group .metro-search-select__button {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.metro-search-select__menu {
    /* Search stays fixed; only the option list scrolls (avoids sticky peek / gap leaks). */
    display: none;
    flex-direction: column;
    max-height: 16rem;
    overflow: hidden;
    min-width: 100%;
    padding: 0;
    margin: 0;
    --bs-dropdown-spacer: 0;
}

.metro-search-select__menu.show {
    display: flex;
}

.metro-search-select__menu.metro-dropdown-menu-anchored {
    /* Sit flush under the trigger — no Bootstrap spacer / anchor gap bleed. */
    margin-top: 0 !important;
}

.metro-search-select__search {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    background: var(--bs-dropdown-bg, var(--bs-body-bg, #fff));
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
    padding: 0.35rem 0.5rem;
}

.metro-search-select__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.25rem 0;
}

select.metro-search-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── KPI Cards ───────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-kpi-grid {
    align-items: stretch;
}

.kpi-card {
    background: var(--metro-surface);
    border: 1px solid var(--metro-border);
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: box-shadow var(--transition), transform var(--transition);
}

.kpi-card:hover {
    box-shadow: var(--metro-shadow-sm);
    transform: translateY(-2px);
}

.kpi-icon {
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon.blue   { background: #eff6ff; color: #1d4ed8; }
.kpi-icon.green  { background: #f0fdf4; color: #15803d; }
.kpi-icon.yellow { background: #fefce8; color: #ca8a04; }
.kpi-icon.red    { background: #fef2f2; color: #dc2626; }
.kpi-icon.purple { background: #faf5ff; color: #7e22ce; }
.kpi-icon.orange { background: #fff7ed; color: #c2410c; }

:root[data-theme="dark"] .kpi-icon.blue   { background: rgba(29, 78, 216, 0.25); color: #93c5fd; }
:root[data-theme="dark"] .kpi-icon.green  { background: rgba(21, 128, 61, 0.25); color: #86efac; }
:root[data-theme="dark"] .kpi-icon.yellow { background: rgba(202, 138, 4, 0.25); color: #fde047; }
:root[data-theme="dark"] .kpi-icon.red    { background: rgba(220, 38, 38, 0.25); color: #fca5a5; }
:root[data-theme="dark"] .kpi-icon.purple { background: rgba(126, 34, 206, 0.25); color: #d8b4fe; }
:root[data-theme="dark"] .kpi-icon.orange { background: rgba(194, 65, 12, 0.25); color: #fdba74; }

.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2px;
}

.kpi-label {
    font-size: 0.78rem;
    color: var(--metro-text-muted);
}

/* ── Staff home pages (Today / Dashboard) — compact cards ───── */
.metro-staff-home .dashboard-kpi-grid {
    gap: 10px;
    margin-bottom: 12px;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.metro-staff-home .kpi-card {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
}

.metro-staff-home .kpi-card:hover {
    transform: translateY(-1px);
}

.metro-staff-home .kpi-icon {
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
    border-radius: 8px;
}

.metro-staff-home .kpi-value {
    font-size: 1.3rem;
}

.metro-staff-home .kpi-label {
    font-size: 0.72rem;
}

.metro-staff-home .action-center-summary-row {
    --bs-gutter-y: 0.5rem;
    margin-bottom: 0.75rem !important;
}

.metro-staff-home .action-center-summary-card .card-body {
    padding: 0.45rem 0.65rem;
}

.metro-staff-home .action-center-summary-card .summary-count {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
}

.metro-staff-home .action-center-section-card {
    margin-bottom: 0.75rem !important;
}

.metro-staff-home .action-center-section-card .card-header {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.metro-staff-home .action-center-section-card .section-title {
    font-size: 0.95rem;
}

.metro-staff-home .action-center-loading-card .card-body {
    min-height: 0;
}

.metro-staff-home .action-center-loading-row {
    display: block;
    height: 1.65rem;
}

.metro-staff-home .action-center-item-list .list-group-item {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.metro-staff-home .action-center-item-list .list-group-item .fw-semibold {
    font-size: 0.92rem;
    line-height: 1.25;
}

.metro-staff-home .action-center-item-list .list-group-item .small {
    font-size: 0.78rem;
}

.metro-staff-home .card.border-0.shadow-sm.mb-4 {
    margin-bottom: 0.75rem !important;
}

.metro-staff-home .card-header.py-3 {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
}

/* ── Post-login / workspace loading toast (non-blocking) ─────── */
.metro-workspace-loading {
    position: fixed;
    top: 0.75rem;
    left: 50%;
    z-index: 1030;
    display: flex;
    align-items: center;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--metro-border, #dee2e6);
    border-radius: 0.5rem;
    background: var(--metro-surface, var(--bs-body-bg, #fff));
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16);
    color: var(--metro-text, inherit);
    font-size: 0.875rem;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) translateY(-0.35rem);
    animation: metro-workspace-loading-in 0.35s ease forwards;
}

@keyframes metro-workspace-loading-in {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.metro-workspace-splash {
    max-width: 22rem;
}

.metro-workspace-splash--compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: none;
    white-space: nowrap;
}

.metro-workspace-splash--compact .metro-workspace-splash__spinner {
    flex-shrink: 0;
}

.metro-workspace-splash--compact .metro-workspace-splash__title {
    font-size: 0.875rem;
}

.metro-workspace-splash__mark {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
}

.metro-workspace-splash__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--bs-primary) 28%, transparent);
}

.metro-workspace-splash__ring--outer {
    animation: metro-workspace-ring-pulse 1.8s ease-out infinite;
}

.metro-workspace-splash__ring--inner {
    inset: 0.55rem;
    animation: metro-workspace-ring-pulse 1.8s ease-out infinite 0.45s;
}

.metro-workspace-splash__core {
    position: absolute;
    inset: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg, #fff));
    color: var(--bs-primary);
    font-size: 1.35rem;
    animation: metro-workspace-core-breathe 1.8s ease-in-out infinite;
}

.metro-workspace-splash__title {
    font-size: 1rem;
}

.metro-workspace-splash__detail {
    margin-top: 0.25rem;
}

.metro-workspace-splash__progress {
    height: 0.28rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-border-color, #dee2e6));
}

.metro-workspace-splash__progress-bar {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 70%, var(--metro-surface)));
    animation: metro-workspace-progress 1.35s ease-in-out infinite;
}

@keyframes metro-workspace-ring-pulse {
    0% { transform: scale(0.92); opacity: 0.35; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.08); opacity: 0.2; }
}

@keyframes metro-workspace-core-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes metro-workspace-progress {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

/* ── Dashboard work order list items ─────────────────────────── */
.wo-list-item {
    min-width: 0;
    flex: 1 1 auto;
}

.wo-list-item-title {
    color: var(--metro-text);
    font-weight: 500;
    line-height: 1.25;
    margin-top: 2px;
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.wo-list-item-title > i {
    color: var(--metro-text-muted);
    margin-top: 2px;
}

.wo-list-item-address {
    line-height: 1.25;
    margin-top: 2px;
    display: flex;
    align-items: flex-start;
}

.wo-list-item-address > i {
    color: #6366f1;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Cards / Panels ──────────────────────────────────────────── */
.metro-card {
    background: var(--metro-surface);
    border: 1px solid var(--metro-border);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--metro-shadow-sm);
    transition: box-shadow var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .metro-card:hover {
        box-shadow: var(--metro-shadow-lg);
        border-color: var(--metro-border-strong);
    }
}

/* Decorative first-paint stagger for dashboard cards (non-blocking) */
.page-body > .metro-card:nth-child(1),
.page-body > .row > [class*="col-"]:nth-child(1) .metro-card,
.dashboard-grid .dashboard-grid-item:nth-child(1) {
    animation: metro-card-enter var(--duration-drawer) var(--ease-out) backwards;
}

.page-body > .metro-card:nth-child(2),
.page-body > .row > [class*="col-"]:nth-child(2) .metro-card,
.dashboard-grid .dashboard-grid-item:nth-child(2) {
    animation: metro-card-enter var(--duration-drawer) var(--ease-out) 40ms backwards;
}

.page-body > .metro-card:nth-child(3),
.page-body > .row > [class*="col-"]:nth-child(3) .metro-card,
.dashboard-grid .dashboard-grid-item:nth-child(3) {
    animation: metro-card-enter var(--duration-drawer) var(--ease-out) 80ms backwards;
}

.page-body > .metro-card:nth-child(4),
.page-body > .row > [class*="col-"]:nth-child(4) .metro-card,
.dashboard-grid .dashboard-grid-item:nth-child(4) {
    animation: metro-card-enter var(--duration-drawer) var(--ease-out) 120ms backwards;
}

@keyframes metro-card-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        /* No resting transform — fill-mode backwards drops transform after the
           animation so cards do not become position:fixed containing blocks. */
        transform: none;
    }
}

.metro-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--metro-border);
}

.metro-card-header h5, .metro-card-header h6 {
    margin: 0;
    font-weight: 600;
}

/* Stacked section cards inside dynamic forms (library / citizen fill) */
.form-schema-fill-outer {
    width: 100%;
    max-width: min(1280px, 100%);
}

.form-schema-fill-outer .form-schema-section-card.metro-card {
    margin-bottom: 14px;
}

.form-schema-fill-outer .form-schema-section-card.metro-card:last-of-type {
    margin-bottom: 0;
}

/* Form section titles stack above descriptions (metro-card-header is row elsewhere). */
.form-schema-section-card > .metro-card-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.2rem;
}

.form-schema-section-card > .metro-card-header h6 {
    margin-bottom: 0;
}

/* Keep labels and controls aligned across columns; help sits under the control. */
.form-schema-fields > .row > .form-schema-field,
.form-schema-section-card > .row > .form-schema-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

.form-schema-field > .form-label {
    margin-bottom: 0.35rem;
}

.form-schema-field-control {
    min-width: 0;
    width: 100%;
    flex: 0 0 auto;
}

.form-schema-field-control > .form-control,
.form-schema-field-control > .form-select,
.form-schema-field-control > .metro-search-select,
.form-schema-field-control > .form-contractor-picker,
.form-schema-field-control > .form-signature-pad,
.form-schema-field-control > .form-signature-block,
.form-schema-field-control > .form-schema-address,
.form-schema-field-control > .form-schema-repeater {
    width: 100%;
}

.form-schema-field > .form-schema-field-help {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

/* md+: bottom-align labels so inputs share one baseline when labels wrap unevenly */
@media (min-width: 768px) {
    .form-schema-fields > .row > .form-schema-field > .form-label,
    .form-schema-section-card > .row > .form-schema-field > .form-label {
        flex: 1 1 auto;
        display: flex;
        align-items: flex-end;
        min-height: 2.5em;
    }
}

/* Work-order / form submission detail: one card per schema area */
.form-schema-submission-detail {
    max-width: none;
}

.form-schema-submission-area-card.metro-card {
    margin-bottom: 0;
}

.form-schema-submission-dl > dt {
    margin-bottom: 0.35rem;
}

.form-schema-submission-dl > dd {
    margin-bottom: 0.75rem;
}

.form-schema-submission-dl > dd:last-child {
    margin-bottom: 0;
}

.form-schema-field-changed {
    background: rgba(255, 193, 7, 0.12);
    border-radius: 0.375rem;
    padding: 0.35rem 0.5rem;
    outline: 1px solid rgba(255, 193, 7, 0.55);
}

.form-schema-field-changed-label {
    color: var(--bs-warning-text-emphasis, #664d03) !important;
}

.form-schema-field-changed-prior {
    font-style: italic;
}

.form-schema-field-is-invalid > .form-label {
    color: var(--bs-danger, #dc3545);
}

.form-schema-field-is-invalid .form-control:not(.is-invalid),
.form-schema-field-is-invalid .form-select:not(.is-invalid),
.form-schema-field-is-invalid .form-check-input:not(.is-invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.form-schema-field-is-invalid .form-contractor-picker,
.form-schema-field-is-invalid .form-signature-pad,
.form-schema-field-is-invalid .form-signature-block,
.form-schema-field-is-invalid .form-schema-address,
.form-schema-field-is-invalid .form-schema-repeater {
    outline: 2px solid var(--bs-danger, #dc3545);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

.form-schema-submit-row {
    border-color: var(--metro-border) !important;
}

.form-signature-pad .form-signature-canvas {
    background: #fff;
}

.form-signature-preview-stub {
    border: 2px dashed var(--metro-border);
    border-radius: 8px;
    background: var(--metro-surface, #fafafa);
}

/* ── Tables ──────────────────────────────────────────────────── */
.metro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.metro-table th {
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--metro-text-muted);
    border-bottom: 2px solid var(--metro-border);
    white-space: nowrap;
}

.metro-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--metro-border);
    vertical-align: middle;
}

.metro-table tbody tr:hover { background: var(--metro-bg); }
.metro-table tbody tr:last-child td { border-bottom: none; }

/* ── Status / Priority Badges ────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Status */
.badge-open        { background: #eff6ff; color: #1d4ed8; }
.badge-inprogress  { background: #fff7ed; color: #c2410c; }
.badge-pending     { background: #fefce8; color: #854d0e; }
.badge-resolved    { background: #f0fdf4; color: #15803d; }
.badge-closed      { background: var(--metro-surface-muted); color: var(--metro-text-secondary); }
.badge-cancelled   { background: #fef2f2; color: #991b1b; }
.badge-active      { background: #f0fdf4; color: #15803d; }
.badge-inactive    { background: var(--metro-surface-muted); color: var(--metro-text-muted); }
.badge-scheduled   { background: #eff6ff; color: #1d4ed8; }
.badge-confirmed   { background: #f0fdf4; color: #15803d; }
.badge-waitlisted  { background: #fefce8; color: #854d0e; }
.badge-cancelled   { background: #fef2f2; color: #991b1b; }
.badge-overdue     { background: #fef2f2; color: #991b1b; }
.badge-cutoff      { background: #7c3aed; color: #fff; }

/* Semantic soft chips (StatusChip component + general use).
   Soft background + strong text = readable in light and dark. */
.badge-soft-primary { background: var(--metro-primary-soft); color: var(--metro-primary-text); }
.badge-soft-success { background: #f0fdf4; color: #15803d; }
.badge-soft-warning { background: #fefce8; color: #854d0e; }
.badge-soft-danger  { background: #fef2f2; color: #991b1b; }
.badge-soft-info    { background: #ecfeff; color: #0e7490; }
.badge-soft-neutral { background: var(--metro-surface-muted); color: var(--metro-text-secondary); border: 1px solid var(--metro-border); }

:root[data-theme="dark"] .badge-soft-primary { background: rgba(var(--bs-primary-rgb), 0.3); color: var(--metro-primary-text); }
:root[data-theme="dark"] .badge-soft-success { background: rgba(21, 128, 61, 0.3); color: #86efac; }
:root[data-theme="dark"] .badge-soft-warning { background: rgba(133, 77, 14, 0.3); color: #fde047; }
:root[data-theme="dark"] .badge-soft-danger  { background: rgba(153, 27, 27, 0.35); color: #fca5a5; }
:root[data-theme="dark"] .badge-soft-info    { background: rgba(14, 116, 144, 0.35); color: #67e8f9; }
:root[data-theme="dark"] .badge-soft-neutral { background: rgba(255, 255, 255, 0.1); color: var(--metro-text-secondary); border-color: var(--metro-border); }

/* Priority */
.badge-emergency { background: #7f1d1d; color: #fff; }
.badge-high      { background: #dc3545; color: #fff; }
.badge-normal    { background: #eff6ff; color: #1d4ed8; }
.badge-low       { background: var(--metro-surface-muted); color: var(--metro-text-muted); }
.priority-emergency { background: #7f1d1d; color: #fff; }
.priority-high      { background: #dc3545; color: #fff; }
.priority-normal    { background: #eff6ff; color: #1d4ed8; }
.priority-low       { background: var(--metro-surface-muted); color: var(--metro-text-muted); }

:root[data-theme="dark"] .badge-open        { background: rgba(29, 78, 216, 0.3); color: #93c5fd; }
:root[data-theme="dark"] .badge-inprogress  { background: rgba(194, 65, 12, 0.3); color: #fdba74; }
:root[data-theme="dark"] .badge-pending     { background: rgba(133, 77, 14, 0.3); color: #fde047; }
:root[data-theme="dark"] .badge-resolved    { background: rgba(21, 128, 61, 0.3); color: #86efac; }
:root[data-theme="dark"] .badge-closed      { background: rgba(255, 255, 255, 0.12); color: var(--metro-text-secondary); }
:root[data-theme="dark"] .badge-cancelled   { background: rgba(153, 27, 27, 0.35); color: #fca5a5; }
:root[data-theme="dark"] .badge-active      { background: rgba(21, 128, 61, 0.3); color: #86efac; }
:root[data-theme="dark"] .badge-inactive    { background: rgba(255, 255, 255, 0.1); color: var(--metro-text-muted); }
:root[data-theme="dark"] .badge-scheduled   { background: rgba(29, 78, 216, 0.3); color: #93c5fd; }
:root[data-theme="dark"] .badge-confirmed   { background: rgba(21, 128, 61, 0.3); color: #86efac; }
:root[data-theme="dark"] .badge-waitlisted  { background: rgba(133, 77, 14, 0.3); color: #fde047; }
:root[data-theme="dark"] .badge-overdue     { background: rgba(153, 27, 27, 0.35); color: #fca5a5; }
:root[data-theme="dark"] .badge-cutoff      { background: #7c3aed; color: #fff; }
:root[data-theme="dark"] .badge-emergency,
:root[data-theme="dark"] .priority-emergency { background: #991b1b; color: #fff; }
:root[data-theme="dark"] .badge-high,
:root[data-theme="dark"] .priority-high      { background: #dc3545; color: #fff; }
:root[data-theme="dark"] .badge-normal,
:root[data-theme="dark"] .priority-normal    { background: rgba(29, 78, 216, 0.3); color: #93c5fd; }
:root[data-theme="dark"] .badge-low,
:root[data-theme="dark"] .priority-low       { background: rgba(255, 255, 255, 0.1); color: var(--metro-text-muted); }

.wo-planning-priority-picker {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
}
.wo-planning-priority-picker__label {
    margin-right: 0.15rem;
    white-space: nowrap;
}
.wo-planning-priority-picker__btn {
    min-width: 1.85rem;
    padding-inline: 0.35rem;
    font-weight: 600;
    line-height: 1.2;
}
.wo-planning-priority-picker--compact {
    flex-wrap: nowrap;
}
.wo-planning-priority-picker--compact .wo-planning-priority-picker__btn {
    min-width: 1.55rem;
    padding-inline: 0.25rem;
    font-size: 0.72rem;
}
.wo-planning-priority-picker__select {
    width: auto;
    min-width: 4.25rem;
    max-width: 5.5rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}
.wo-planning-priority-picker__clear {
    line-height: 1;
}
.wo-planning-priority-picker__readonly {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

.wo-list-priority-cell {
    min-width: 7.5rem;
    white-space: nowrap;
}

/* Parent + child work orders on the same list page share a light gray band. */
tr.wo-list-linked-family > * {
    background-color: var(--metro-surface-muted);
}
tr.wo-list-linked-family.table-danger > * {
    background-color: color-mix(in srgb, var(--metro-surface-muted) 55%, var(--bs-danger-bg-subtle, #f8d7da));
}
.work-order-list-card--linked-family {
    background-color: var(--metro-surface-muted);
    border-color: var(--metro-border);
}

/* Work order list/detail priority indicator (dot left of WO number) */
.wo-priority-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}
.wo-priority-dot--normal,
.wo-priority-dot--low {
    background-color: #22c55e;
}
.wo-priority-dot--high {
    background-color: #dc3545;
}
.wo-priority-dot--emergency {
    background-color: #7f1d1d;
}

.hot-work-order-badge {
    background: #dc3545;
    color: #fff;
}

.work-order-test-ticket-badge {
    background: #b45309;
    color: #fff;
}

/* ── Filters / Search Bar ────────────────────────────────────── */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filter-bar .form-control,
.filter-bar .form-select {
    font-size: 0.875rem;
}

.search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 360px;
}

.search-input-wrap .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--metro-text-muted);
    pointer-events: none;
}

.search-input-wrap .form-control {
    padding-left: 32px;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.metro-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 2px solid var(--metro-border);
    margin-bottom: 20px;
}

.metro-tab {
    padding: 9px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--metro-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.metro-tab:hover { color: var(--metro-primary); }
.metro-tab.active { color: var(--metro-primary); border-bottom-color: var(--metro-primary); font-weight: 600; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--metro-border);
}

.form-section:last-child { border-bottom: none; margin-bottom: 0; }

.form-section-title {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--metro-text-muted);
    margin-bottom: 14px;
}

/* ── Detail Panels ───────────────────────────────────────────── */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.detail-item label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--metro-text-muted);
    margin-bottom: 2px;
    display: block;
}

.detail-item .value {
    font-size: 0.9rem;
    font-weight: 500;
}

/* ── Alert / Info Banners ────────────────────────────────────── */
.metro-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.metro-alert-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.metro-alert-success { background: #f0fdf4; color: #14532d; border: 1px solid #bbf7d0; }
.metro-alert-warning { background: #fffbeb; color: #78350f; border: 1px solid #fde68a; }
.metro-alert-danger  { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; }

:root[data-theme="dark"] .metro-alert-info    { background: rgba(30, 64, 175, 0.35); color: #93c5fd; border-color: rgba(147, 197, 253, 0.35); }
:root[data-theme="dark"] .metro-alert-success { background: rgba(20, 83, 45, 0.35); color: #86efac; border-color: rgba(134, 239, 172, 0.35); }
:root[data-theme="dark"] .metro-alert-warning { background: rgba(120, 53, 15, 0.35); color: #fde047; border-color: rgba(253, 224, 71, 0.35); }
:root[data-theme="dark"] .metro-alert-danger  { background: rgba(127, 29, 29, 0.4); color: #fca5a5; border-color: rgba(252, 165, 165, 0.35); }

.metro-offline-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1100;
}
.metro-offline-banner--offline {
    background: #fffbeb;
    color: #78350f;
    border-bottom: 1px solid #fde68a;
}
.metro-offline-banner--sending {
    background: #eff6ff;
    color: #1e40af;
    border-bottom: 1px solid #bfdbfe;
}
.metro-offline-banner--sent {
    background: #f0fdf4;
    color: #14532d;
    border-bottom: 1px solid #bbf7d0;
}
.metro-offline-banner__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 0.75rem;
    flex-shrink: 0;
}
:root[data-theme="dark"] .metro-offline-banner--offline { background: rgba(120, 53, 15, 0.35); color: #fde047; }
:root[data-theme="dark"] .metro-offline-banner--sending { background: rgba(30, 64, 175, 0.35); color: #93c5fd; }
:root[data-theme="dark"] .metro-offline-banner--sent { background: rgba(20, 83, 45, 0.35); color: #86efac; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-metro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    border-radius: var(--metro-btn-radius);
    font-size: var(--text-base, 0.9rem);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
}

.btn-metro:hover { text-decoration: none; }

.btn-primary-metro  { background: var(--metro-primary); color: var(--metro-on-primary); border-color: var(--metro-primary); }
.btn-primary-metro:hover { background: var(--metro-primary-dark); border-color: var(--metro-primary-dark); color: var(--metro-on-primary); }

.btn-secondary-metro { background: var(--metro-surface); color: var(--metro-text); border-color: var(--metro-border-strong); }
.btn-secondary-metro:hover { background: var(--metro-surface-muted); }

.btn-danger-metro { background: var(--metro-danger); color: #fff; border-color: var(--metro-danger); }
.btn-danger-metro:hover { background: #a91c1c; border-color: #a91c1c; color: #fff; }

.btn-sm-metro { padding: 0.3rem 0.7rem; font-size: var(--text-sm, 0.8125rem); }

/* ── Loading ─────────────────────────────────────────────────── */
.metro-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--metro-text-muted);
    gap: 12px;
}

.metro-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--metro-border);
    border-top-color: var(--metro-primary);
    border-radius: 50%;
    animation: metro-spin 0.65s linear infinite;
}

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

.report-ai-generating {
    animation: report-ai-generating-in 0.25s ease-out;
}

.report-ai-generating .metro-loading {
    padding: 0;
}

@keyframes report-ai-generating-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Empty State ─────────────────────────────────────────────── */
.metro-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--metro-text-muted);
}

.metro-load-error {
    border-radius: 8px;
}

.metro-empty .empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.4; }
.metro-empty p { font-size: 0.9rem; }
.metro-empty__illustration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 0.75rem;
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--metro-primary) 10%, var(--metro-surface));
    opacity: 1;
}
.metro-empty__art {
    width: 2.75rem;
    height: 2.75rem;
    fill: none;
    stroke: var(--metro-primary);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.metro-empty--calendar .metro-empty__illustration { background: color-mix(in srgb, #0e7490 12%, var(--metro-surface)); }
.metro-empty--calendar .metro-empty__art { stroke: #0e7490; }
.metro-empty--documents .metro-empty__illustration { background: color-mix(in srgb, #4338ca 12%, var(--metro-surface)); }
.metro-empty--documents .metro-empty__art { stroke: #4338ca; }
.metro-empty--map .metro-empty__illustration { background: color-mix(in srgb, #057a55 12%, var(--metro-surface)); }
.metro-empty--map .metro-empty__art { stroke: #057a55; }
.metro-empty--team .metro-empty__illustration { background: color-mix(in srgb, #c27803 12%, var(--metro-surface)); }
.metro-empty--team .metro-empty__art { stroke: #c27803; }
.metro-empty--search .metro-empty__illustration { background: color-mix(in srgb, #6b7280 12%, var(--metro-surface)); }
.metro-empty--requests .metro-empty__illustration { background: color-mix(in srgb, #0e7490 12%, var(--metro-surface)); }
.metro-empty--bids .metro-empty__illustration { background: color-mix(in srgb, #9a3412 12%, var(--metro-surface)); }
.metro-empty--bids .metro-empty__art { stroke: #9a3412; }
.metro-empty--agenda .metro-empty__illustration { background: color-mix(in srgb, #4338ca 12%, var(--metro-surface)); }
.metro-empty--golf .metro-empty__illustration { background: color-mix(in srgb, #057a55 12%, var(--metro-surface)); }
.metro-empty--golf .metro-empty__art { stroke: #057a55; }
.metro-empty--check .metro-empty__illustration { background: color-mix(in srgb, #057a55 12%, var(--metro-surface)); }
.metro-empty--check .metro-empty__art { stroke: #057a55; }

/* ── Timeline (work order status history) ────────────────────── */
.metro-timeline { list-style: none; padding: 0; margin: 0; }

.timeline-item {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    position: relative;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: var(--metro-border);
}

.timeline-item:last-child::before { display: none; }

.timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--metro-primary);
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: #fff;
    z-index: 1;
}

.timeline-content { flex: 1; }
.timeline-label { font-weight: 600; font-size: 0.875rem; }
.timeline-meta  { font-size: 0.78rem; color: var(--metro-text-muted); margin-top: 2px; }

/* ── Process step tracker ────────────────────────────────────────
   Shared by Legislative approvals, Work order approvals/status, and the
   Citizen request tracker. Previously an inline <style> block duplicated in
   ProcessStepTracker.razor and WorkOrderWorkflowViewPanel.razor. */
.process-step-tracker .process-step-tracker__step {
    padding: 0.55rem 0.65rem;
    margin: 0 -0.35rem;
    border-radius: 0.5rem;
}

.process-step-tracker .tracker-node {
    position: relative;
    width: 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.process-step-tracker .tracker-dot {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    background: var(--bs-light);
    color: var(--bs-secondary);
    flex-shrink: 0;
}

.process-step-tracker .tracker-line {
    flex: 1;
    width: 2px;
    min-height: 0.85rem;
    background: var(--bs-border-color);
    margin-top: 2px;
}

.process-step-tracker .tracker-step-body {
    padding-bottom: 0.65rem;
}

.process-step-tracker .process-step-tracker__step:last-child .tracker-step-body {
    padding-bottom: 0.15rem;
}

.process-step-tracker .tracker-step-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
}

.process-step-tracker .tracker-step-label {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--bs-body-color);
}

.process-step-tracker .tracker-step-subtitle {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--bs-secondary-color);
}

.process-step-tracker .tracker-step-detail {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--bs-secondary-color);
}

.process-step-tracker .tracker-status-swatch {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.process-step-tracker .tracker-phase {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--bs-primary);
    background: transparent;
    border: 0;
    padding: 0;
}

.process-step-tracker .tracker-step-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.05rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color);
    line-height: 1;
    font-size: 0.875rem;
}

.process-step-tracker .tracker-step-help:hover,
.process-step-tracker .tracker-step-help:focus-visible {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
    outline: none;
}

.process-step-tracker .tracker-step-active .tracker-step-help {
    color: var(--bs-primary);
}

.process-step-tracker .tracker-step-future .tracker-step-help {
    color: var(--bs-secondary);
}

.process-step-tracker .tracker-step-done .tracker-dot { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
.process-step-tracker .tracker-step-done .tracker-line { background: var(--bs-success-border-subtle, var(--bs-success)); opacity: 0.55; }
.process-step-tracker .tracker-step-done .tracker-dot {
    animation: metro-step-celebrate var(--duration-ui, 200ms) var(--ease-out, ease) both;
}
@keyframes metro-step-celebrate {
    0% { transform: scale(0.86); box-shadow: 0 0 0 0 color-mix(in srgb, var(--bs-success) 35%, transparent); }
    70% { transform: scale(1.08); box-shadow: 0 0 0 8px color-mix(in srgb, var(--bs-success) 0%, transparent); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .process-step-tracker .tracker-step-done .tracker-dot { animation: none; }
}
.process-step-tracker .tracker-step-active .tracker-dot { background: var(--bs-primary); color: #fff; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.22); }
.process-step-tracker .tracker-step-waiting .tracker-dot { background: var(--bs-light); color: var(--bs-secondary); border: 1px dashed var(--bs-border-color); }
.process-step-tracker .tracker-step-returned .tracker-dot { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }
.process-step-tracker .tracker-step-future .tracker-dot { background: transparent; color: var(--bs-secondary); border: 1.5px solid var(--bs-border-color); }
.process-step-tracker .tracker-step-future .tracker-step-label { color: var(--bs-secondary-color); font-weight: 500; }
.process-step-tracker .tracker-step-future .tracker-status-swatch { opacity: 0.72; }

.process-step-tracker .tracker-step-active {
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.process-step-tracker .tracker-step-active .tracker-step-label {
    color: var(--bs-emphasis-color, var(--bs-body-color));
}

/* Workflow view modal / section chrome */
.wo-workflow-view-modal .modal-content {
    border-radius: 0.75rem;
}

.wo-workflow-view-modal .modal-header .letter-spacing-tight,
.wo-workflow-view-section__eyebrow {
    letter-spacing: 0.04em;
}

.wo-workflow-view-section__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.wo-workflow-view-section__eyebrow {
    margin-bottom: 0.15rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

/* Compact: smaller nodes, tighter rows (detail lines are suppressed in markup). */
.process-step-tracker--compact .tracker-node { width: 1.35rem; }

.process-step-tracker--compact .tracker-dot {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.62rem;
}

.process-step-tracker--compact .tracker-line { min-height: 0.6rem; }

.process-step-tracker--compact .process-step-tracker__step {
    padding: 0.35rem 0.4rem;
}

.process-step-tracker--compact .tracker-step-body {
    padding-bottom: 0.35rem;
}

/* Horizontal: steps flow left-to-right with connectors between the nodes.
   Scrolls rather than wrapping so the sequence stays readable. */
.process-step-tracker--horizontal .process-step-tracker__steps {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 0 !important;
    overflow-x: auto;
    padding-bottom: 4px;
}

.process-step-tracker--horizontal .process-step-tracker__step {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    gap: 6px !important;
    flex: 1 1 0;
    min-width: 7.5rem;
    margin: 0;
}

.process-step-tracker--horizontal .tracker-node {
    flex-direction: row;
    width: 100%;
    justify-content: center;
}

.process-step-tracker--horizontal .tracker-line {
    width: auto;
    flex: 1;
    height: 2px;
    min-height: 0;
    margin-top: 0;
    margin-left: 4px;
    position: absolute;
    left: 50%;
    right: -50%;
    top: 50%;
}

.process-step-tracker--horizontal .tracker-step-body {
    padding-bottom: 0;
    width: 100%;
}

.process-step-tracker--horizontal .tracker-step-heading {
    justify-content: center;
}

.process-step-tracker--horizontal .tracker-step-active {
    background: rgba(var(--bs-primary-rgb), 0.08);
}

/* ── Voice Note ──────────────────────────────────────────────── */
.voice-note-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.voice-record-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--metro-primary);
    background: var(--metro-surface);
    color: var(--metro-primary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-record-btn.recording {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    animation: pulse-red 1.2s ease-in-out infinite;
}

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* ── Login Page ──────────────────────────────────────────────── */
.login-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e2538 0%, var(--metro-primary) 100%);
    padding: 20px;
}

.maui-city-choice-overlay {
    /* Above login-signing-overlay (11600) so city choice wins on MAUI app open / after login. */
    z-index: 11700;
    /* Blur + Fire-module boot together freeze Android/iOS WebView. Keep the dim solid. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, #1e2538 88%, transparent);
    pointer-events: auto;
}

.maui-city-choice-overlay .login-signing-overlay__panel {
    max-width: 22.5rem;
}

.maui-city-choice-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.maui-city-choice-btn {
    align-items: center;
    border-radius: 0.85rem;
    display: flex;
    font-weight: 650;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.55rem 0.85rem;
    text-align: left;
    width: 100%;
}

.maui-city-choice-btn[disabled] {
    opacity: 0.72;
}

.maui-city-choice-status {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    margin: 0.15rem 0 0;
}

.login-signing-overlay {
    position: fixed;
    inset: 0;
    /* Above metro-lazy-module-overlay (11450) so Cancel automatic sign-in stays clickable. */
    z-index: 11600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, #1e2538 78%, transparent);
    backdrop-filter: blur(6px);
    animation: login-signing-overlay-in 0.28s ease-out forwards;
}

.login-signing-overlay.login-signing-overlay--hidden {
    display: none;
}

.login-signing-overlay__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 22rem;
    padding: 2rem 2rem 1.75rem;
    border-radius: 14px;
    background: var(--metro-surface, var(--bs-body-bg, #fff));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    animation: login-signing-panel-in 0.35s ease-out forwards;
    pointer-events: auto;
}

.login-signing-overlay .metro-workspace-splash__actions,
.login-signing-overlay .mt-3 {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.metro-cancel-auto-login-btn {
    position: relative;
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
    min-height: 2.25rem;
}

@keyframes login-signing-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes login-signing-panel-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes metroAutofillStart {
    from { opacity: 1; }
    to { opacity: 1; }
}

.login-page .form-control:-webkit-autofill {
    animation-name: metroAutofillStart;
    animation-duration: 1ms;
}

.login-card {
    background: var(--metro-surface);
    border-radius: 14px;
    padding: 40px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    opacity: 1;
    /* Do not leave `transform` on the resting card — it creates a containing block
       that traps position:fixed dialogs (e.g. building-permit e-sign on request-status). */
    transition: opacity var(--duration-drawer) var(--ease-out);

    @starting-style {
        opacity: 0;
    }
}

.login-brand-mark {
    max-height: 140px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: inline-block;
}

/* ── Public city landing page ("/city") ─────────────────────── */
.city-landing-page {
    min-height: 100vh;
    background: var(--metro-bg);
}

.city-landing-picker-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #1e2538 0%, #1a56db 100%);
}

.city-landing-hero {
    position: relative;
    min-height: 56vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.city-landing-hero__overlay {
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
    padding: 64px 20px;
}

.city-landing-hero__content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.city-landing-hero__logo {
    max-height: 72px;
    max-width: 220px;
    object-fit: contain;
    margin-bottom: 16px;
}

.city-landing-hero__title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 12px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.city-landing-hero__tagline {
    font-size: 1.05rem;
    opacity: 0.95;
    margin-bottom: 24px;
}

.city-landing-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.city-landing-content-strip .card-header {
    border-bottom: 1px solid var(--metro-border);
}

.city-landing-service-cards a.card {
    transition: transform var(--transition), box-shadow var(--transition);
}

.city-landing-service-cards a.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

:root[data-theme="dark"] .city-landing-hero__overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.72) 100%);
}

.login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--metro-primary);
    margin: 0;
}

.login-logo p {
    font-size: 0.85rem;
    color: var(--metro-text-muted);
    margin-top: 4px;
}

.login-header {
    padding-bottom: 0.25rem;
}

.login-section-label {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--metro-text-muted);
    margin: 1.25rem 0 0.625rem;
}

.login-alt-auth {
    margin-top: 0.25rem;
}

.login-alt-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.login-alt-auth-actions .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 8.5rem;
    max-width: 100%;
}

.login-alt-auth-hint {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--metro-text-muted);
    text-align: center;
}

.login-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--metro-border);
}

.login-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.125rem 0.375rem;
    font-size: 0.8125rem;
}

.login-footer-links a {
    text-decoration: none;
    white-space: nowrap;
}

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

.login-footer-links--secondary {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    opacity: 0.85;
}

.login-footer-sep {
    color: var(--metro-text-muted);
    user-select: none;
}

.login-public-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem 0.875rem;
    margin-top: 0.875rem;
    font-size: 0.75rem;
}

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

.login-public-links a:hover {
    color: var(--metro-primary);
    text-decoration: underline;
}

/* ── Responsive (breakpoint-narrow: 768px) ─────────────────── */
@media (max-width: 768px) {
    .topbar-menu-btn {
        display: inline-flex;
    }

    /* Off-canvas drawer: collapsed = fully hidden (not the desktop icon rail) */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 200;
        width: min(280px, 88vw);
        max-width: var(--sidebar-width);
        height: 100vh;
        height: 100dvh;
        transform: translateX(0);
    }

    .sidebar.collapsed {
        width: min(280px, 88vw);
        max-width: var(--sidebar-width);
        transform: translateX(-100%);
        pointer-events: none;
        box-shadow: none;
    }

    .sidebar:not(.collapsed) {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.22);
        pointer-events: auto;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 150;
        border: none;
        padding: 0;
        margin: 0;
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

    .page-body {
        --page-body-pad-y: 16px;
        padding: var(--page-body-pad-y);
    }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    /* breakpoint-xs */
    .kpi-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .filter-bar { flex-direction: column; align-items: stretch; }
}

/* ── Facilities month calendar (single grid = aligned columns) ─ */
.calendar-month-shell {
    overflow: auto;
    max-height: 640px;
}

.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    border-left: 1px solid var(--metro-border);
    border-top: 1px solid var(--metro-border);
}

.calendar-month-grid > * {
    min-width: 0;
}

.calendar-month-head-cell,
.calendar-month-day {
    border-right: 1px solid var(--metro-border);
    border-bottom: 1px solid var(--metro-border);
}

.calendar-month-day {
    min-height: 104px;
    display: flex;
    flex-direction: column;
}

.calendar-month-day-events {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.calendar-month-event-btn {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow: hidden;
}

/* ── Modal sizing / scrolling ─────────────────────────────────
   Ensure every modal stays within the viewport and the body
   scrolls when content overflows, so the footer (Save / Cancel
   buttons) is always reachable. Also fixes the common Blazor
   pattern where <EditForm> renders a <form> between
   .modal-content and .modal-body / .modal-footer, which would
   otherwise break Bootstrap's flex-column layout used by
   .modal-dialog-scrollable. */
.modal-content {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
    font-size: inherit;
    min-width: 0;
    max-width: 100%;
}

.modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.modal-body {
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
}

/* Confirm / prose copy must wrap inside the dialog — never force a horizontal scrollbar. */
.modal-body > p,
.modal-body .text-muted {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/*
 * Bootstrap's .modal-dialog-centered.modal-dialog-scrollable sets
 * .modal-content { max-height: none } and relies on dialog height:100%.
 * Our shells use height:auto, so tall forms grow past the viewport and
 * the footer (Create / Save) is clipped with no way to reach it.
 * Cap content to the viewport so the body scrolls and the footer stays.
 */
.modal-dialog.modal-dialog-scrollable {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    margin-top: auto;
    margin-bottom: auto;
}

.modal-dialog.modal-dialog-scrollable .modal-content {
    max-height: min(100%, calc(100vh - 1rem)) !important;
    max-height: min(100%, calc(100dvh - 1rem)) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-dialog.modal-dialog-scrollable .modal-body,
.modal-dialog.modal-dialog-scrollable .modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-dialog.modal-dialog-scrollable .modal-header,
.modal-dialog.modal-dialog-scrollable .modal-footer,
.modal-dialog.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex: 0 0 auto;
}

/*
 * Floating address / search typeaheads:
 * --metro-hover and --metro-active are translucent. Bootstrap's
 * .list-group-item-action:hover replaces the opaque item background with that
 * translucent color, so labels and helper text under the menu show through
 * (especially on mouseover). Keep an opaque base and tint with a gradient.
 */
.address-input.is-open,
.location-input.is-open {
    z-index: 1060;
}

.address-input-suggestions,
.metro-search-suggestions {
    background-color: var(--bs-list-group-bg, var(--metro-surface));
}

.address-input-suggestions .list-group-item-action:hover,
.address-input-suggestions .list-group-item-action:focus,
.address-input-suggestions .list-group-item-action:active,
.metro-search-suggestions .list-group-item-action:hover,
.metro-search-suggestions .list-group-item-action:focus,
.metro-search-suggestions .list-group-item-action:active {
    background-color: var(--bs-list-group-bg, var(--metro-surface));
    background-image: linear-gradient(var(--metro-hover), var(--metro-hover));
}

.address-input-suggestions .list-group-item-action:active,
.metro-search-suggestions .list-group-item-action:active {
    background-image: linear-gradient(var(--metro-active), var(--metro-active));
}

/* Search suggestion lists inside modals: keep in document flow so overflow:hidden
   on .modal-content / .modal-body does not clip the results. */
.modal-body .property-search-field .metro-search-suggestions,
.modal-body .citizen-search-field .metro-search-suggestions,
.modal-body .municipal-holder-picker .metro-search-suggestions {
    position: static !important;
    z-index: auto !important;
    max-height: 12rem;
    overflow-y: auto;
    box-shadow: none;
    border: 1px solid var(--metro-border, #e2e8f0);
    border-radius: 0.5rem;
}

/* Form labels in modals must stay visible (never inherit a washed-out / transparent color). */
.modal-body .form-label {
    color: var(--metro-text, #0f172a);
    opacity: 1;
}

/* Consistent edge padding on every modal surface (in-page, floating, and OS pop-out). */
:root {
    --metro-modal-edge-pad: 1rem;
}

.modal-content > .modal-header,
.modal-content > .modal-body,
.modal-content > .modal-footer,
.modal-content > form > .modal-header,
.modal-content > form > .modal-body,
.modal-content > form > .modal-footer {
    padding-left: var(--metro-modal-edge-pad);
    padding-right: var(--metro-modal-edge-pad);
}

.modal-content > .modal-header,
.modal-content > form > .modal-header {
    padding-top: 1rem;
    padding-bottom: 0.85rem;
}

.modal-content > .modal-body,
.modal-content > form > .modal-body {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.modal-content > .modal-footer,
.modal-content > form > .modal-footer {
    padding-top: 0.85rem;
    padding-bottom: 1rem;
}

/* Modal typography — body copy stays readable; .small is secondary, not tiny */
.modal-body .small,
.modal-body small,
.modal-header .small,
.modal-footer .small {
    font-size: 0.9375em;
}

.modal-body h6.text-uppercase {
    font-size: 0.8125em;
    letter-spacing: 0.05em;
}

.modal-body .input-group-sm .form-control,
.modal-body .input-group-sm .btn {
    font-size: 1em;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
}

.modal-fullscreen .modal-content,
.modal-fullscreen-sm-down .modal-content,
.modal-fullscreen-md-down .modal-content,
.modal-fullscreen-lg-down .modal-content,
.modal-fullscreen-xl-down .modal-content,
.modal-fullscreen-xxl-down .modal-content {
    max-height: 100%;
}

/* Inline Blazor modals (Bootstrap JS not used).
   Bootstrap sets pointer-events:none on .modal-dialog, so hover/click bleed through
   the dimmed overlay to the page behind and the UI flickers as the mouse moves.
   Also disable .fade transitions so re-renders do not replay the open animation. */
.modal.show.d-block {
    pointer-events: auto;
    background: transparent !important;
    /* ModalStack publishes --metro-win-z so a newly opened dialog paints above
       any already-open (including maximized / fullscreen) window. */
    z-index: var(--metro-win-z, 1055);
}

.modal.show.d-block::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: auto;
    background: var(--metro-overlay, rgba(15, 23, 42, 0.52));
}

/* One modal chrome everywhere (hand-rolled overlays included).
   Accela-style popout: white card, clear radius, deep shadow over dimmed page.
   Border is !important so Bootstrap .border-0 (common on modal-content) cannot
   erase the edge that defines the modal area against the dimmed page. */
.modal-content {
    border: 1px solid var(--metro-border-strong, #cbd5e1) !important;
    border-radius: 0.75rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.12),
        0 28px 64px rgba(15, 23, 42, 0.22);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--metro-surface-float) 92%, #fff) 0%, var(--metro-surface-float) 48%),
        var(--metro-surface-float);
    overflow: hidden;
}

.modal-content > .modal-header,
.modal-content > form > .modal-header {
    background: linear-gradient(180deg, color-mix(in srgb, var(--metro-surface-raised) 95%, transparent) 0%, color-mix(in srgb, var(--metro-surface-float) 60%, transparent) 100%);
    border-bottom: 1px solid var(--metro-border, #e2e8f0);
}

.modal-content > .modal-footer,
.modal-content > form > .modal-footer {
    background: linear-gradient(0deg, color-mix(in srgb, var(--metro-surface-raised) 90%, transparent) 0%, color-mix(in srgb, var(--metro-surface-float) 45%, transparent) 100%);
    border-top: 1px solid var(--metro-border, #e2e8f0);
}

.modal-header .modal-title {
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

/* Record preview popout (work order / inspection overlay) */
.metro-record-popout-dialog {
    max-width: min(920px, calc(100vw - 1.5rem));
    width: min(920px, calc(100vw - 1.5rem));
}

.metro-record-popout__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--metro-border, #e5e7eb);
    min-height: 3.25rem;
}

.metro-record-popout__id {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    min-width: 0;
    padding-inline-end: 8rem; /* room for centered Open full page */
}

.metro-record-popout__fullpage {
    white-space: nowrap;
}

.metro-record-popout__header > .metro-record-popout__fullpage {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.metro-record-popout__close {
    margin: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.metro-record-popout__fields > dt {
    font-weight: 500;
}

.metro-record-popout__comments > li:last-child {
    border-bottom: 0 !important;
}

/* Pages that already render Bootstrap's .modal-backdrop element */
.modal.show.d-block:has(~ .modal-backdrop)::before,
.modal-backdrop.show + .modal.show.d-block::before {
    content: none;
}

.modal-backdrop.show + .modal.show.d-block {
    background: transparent !important;
}

.modal.show.d-block .modal-dialog {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    transform: none !important;
    transition: none !important;
}

.modal.fade.show.d-block {
    opacity: 1 !important;
    transition: none !important;
}

/* Nested/stacked modals opened from inside another modal (e.g. assign city official).
   z-index comes from ModalStack via --metro-win-z so a confirm / child always paints
   above an already-open (even maximized / fullscreen) parent window. */
.modal.show.d-block.metro-modal-stacked {
    position: fixed;
    inset: 0;
    z-index: var(--metro-win-z, 1200);
}

.modal.show.d-block.metro-modal-stacked::before {
    z-index: 0;
}

.modal.show.d-block.metro-modal-stacked .modal-dialog {
    z-index: 1;
}

/* ── Metro windows: in-page draggable / resizable dialog windows (desktop ≥769px) ──
   Covers Bootstrap modals, photo lightbox, city calendar, MetroDrawer offcanvas,
   slide/detail panels, and [data-metro-dialog-shell]. The shell becomes a transparent,
   click-through layer; the dialog becomes a floating window positioned by CSS custom
   properties (--metro-win-x/y/w/h) that metroAsap.js writes exactly once on open and
   afterwards only when the user drags, resizes, snaps, maximizes, or minimizes it.
   Blazor re-renders on field edits never touch those properties, so the window never
   jumps while editing. Do not reparent Blazor-owned modal shells to document.body —
   that desyncs the renderer and leaves undismissable windows. Opt out with
   data-metro-no-move="1" (classic centered modal). */
:root {
    --metro-win-radius: 14px;
    --metro-win-accent: var(--metro-primary, #1a56db);
    --metro-win-accent-2: color-mix(in srgb, var(--metro-primary) 60%, #fff);
    --metro-win-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --metro-win-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.05),
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 10px 24px rgba(15, 23, 42, 0.12),
        0 28px 64px rgba(15, 23, 42, 0.2);
    --metro-win-shadow-active:
        0 0 0 1px rgba(26, 86, 219, 0.28),
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 14px 32px rgba(15, 23, 42, 0.16),
        0 36px 80px rgba(15, 23, 42, 0.26);
    --metro-win-shadow-lift:
        0 0 0 1px rgba(26, 86, 219, 0.32),
        0 2px 4px rgba(15, 23, 42, 0.08),
        0 22px 44px rgba(15, 23, 42, 0.22),
        0 48px 100px rgba(15, 23, 42, 0.3);
}

:root[data-theme="dark"] {
    --metro-win-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 12px 28px rgba(0, 0, 0, 0.5),
        0 32px 72px rgba(0, 0, 0, 0.6);
    --metro-win-shadow-active:
        0 0 0 1px rgba(96, 165, 250, 0.4),
        0 16px 36px rgba(0, 0, 0, 0.55),
        0 40px 90px rgba(0, 0, 0, 0.7);
    --metro-win-shadow-lift:
        0 0 0 1px rgba(96, 165, 250, 0.5),
        0 24px 48px rgba(0, 0, 0, 0.6),
        0 56px 110px rgba(0, 0, 0, 0.75);
}

@media (min-width: 769px) {
    /* ── Shell: transparent click-through layer, page stays usable ─────── */
    .modal.show[data-metro-floating],
    .metro-lightbox-backdrop[data-metro-floating],
    .city-cal-modal-backdrop[data-metro-floating],
    [data-metro-dialog-shell][data-metro-floating] {
        pointer-events: none;
        background: transparent !important;
        overflow: visible !important;
        z-index: var(--metro-win-z, 1060) !important;
        /* Full-viewport host even when the Blazor shell stays under a page
           ancestor (no body lift) so geometry is not measured from a card/FAB corner. */
        position: fixed !important;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Generic dialog shells (messaging dock) are not Bootstrap .modal — give them a
       viewport-sized host so floating geometry is not measured from a FAB corner. */
    [data-metro-dialog-shell][data-metro-floating] {
        position: fixed !important;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
    }

    .modal.show[data-metro-floating]::before,
    .metro-lightbox-backdrop[data-metro-floating]::before,
    .city-cal-modal-backdrop[data-metro-floating]::before {
        content: none !important;
        display: none !important;
    }

    .modal-backdrop.show.metro-modal-backdrop-passthrough,
    .offcanvas-backdrop.show.metro-modal-backdrop-passthrough,
    .metro-slide-panel-backdrop.metro-modal-backdrop-passthrough,
    .scheduler-detail-backdrop.metro-modal-backdrop-passthrough {
        pointer-events: none !important;
        opacity: 0 !important;
    }

    /* ── Window geometry (dialog inside a shell, or self-dialog drawers/panels) ── */
    [data-metro-floating] [data-metro-movable-dialog],
    [data-metro-floating][data-metro-self-dialog] {
        pointer-events: auto;
        position: fixed !important;
        left: var(--metro-win-x, 50%) !important;
        top: var(--metro-win-y, 50%) !important;
        right: auto !important;
        bottom: auto !important;
        inset-inline-end: auto !important;
        width: var(--metro-win-w, auto) !important;
        max-width: calc(100vw - 24px) !important;
        max-width: calc(100dvw - 24px) !important;
        height: var(--metro-win-h, auto) !important;
        min-height: 0 !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        margin: 0 !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        justify-content: flex-start !important;
        z-index: var(--metro-win-z, 1060);
        visibility: visible !important;
        will-change: left, top, width, height;
    }

    /* Maximized: geometry comes from --metro-win-* (setMaximized); do not hardcode
       left/top here — that bypasses containing-block origin correction. */

    /* Geometry transitions only during an explicit operation (maximize / snap / restore). */
    [data-metro-floating][data-metro-win-anim]:not([data-metro-dragging]):not([data-metro-resizing]) [data-metro-movable-dialog],
    [data-metro-floating][data-metro-self-dialog][data-metro-win-anim]:not([data-metro-dragging]):not([data-metro-resizing]) {
        transition:
            left 240ms var(--metro-win-ease),
            top 240ms var(--metro-win-ease),
            width 240ms var(--metro-win-ease),
            height 240ms var(--metro-win-ease);
    }

    /* Minimized: sink toward the dock and hide (DOM stays mounted for Blazor). */
    [data-metro-floating][data-metro-minimized] [data-metro-movable-dialog],
    [data-metro-floating][data-metro-self-dialog][data-metro-minimized] {
        transform: translateY(45vh) scale(0.45) !important;
        opacity: 0;
        visibility: hidden !important;
        pointer-events: none !important;
        transition:
            transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
            opacity 220ms ease-in,
            visibility 0s linear 280ms;
    }

    [data-metro-floating]:not([data-metro-minimized]) [data-metro-movable-dialog],
    [data-metro-floating][data-metro-self-dialog]:not([data-metro-minimized]) {
        transition:
            transform 260ms var(--metro-win-ease),
            opacity 200ms ease-out;
    }

    /* ── Window surface ─────────────────────────────────────────────────── */
    [data-metro-floating] [data-metro-movable-dialog] > .modal-content,
    [data-metro-floating][data-metro-self-dialog] {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100% !important;
        overflow: hidden;
        border: 1px solid var(--metro-border-strong, #cbd5e1) !important;
        border-radius: var(--metro-win-radius) !important;
        background: var(--metro-surface-float, #fff);
        box-shadow: var(--metro-win-shadow);
        transition: box-shadow 180ms ease-out;
    }

    [data-metro-floating][data-metro-win-active] [data-metro-movable-dialog] > .modal-content,
    [data-metro-floating][data-metro-self-dialog][data-metro-win-active] {
        box-shadow: var(--metro-win-shadow-active);
    }

    [data-metro-floating][data-metro-dragging] [data-metro-movable-dialog] > .modal-content,
    [data-metro-floating][data-metro-self-dialog][data-metro-dragging] {
        box-shadow: var(--metro-win-shadow-lift);
    }

    /* Accent hairline along the top edge. */
    [data-metro-floating] [data-metro-movable-dialog] > .modal-content::before,
    [data-metro-floating][data-metro-self-dialog]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 3;
        background: linear-gradient(90deg, var(--metro-win-accent) 0%, var(--metro-win-accent-2) 60%, var(--metro-primary-dark) 100%);
        opacity: 0.55;
        pointer-events: none;
        transition: opacity 180ms ease-out;
    }

    [data-metro-floating][data-metro-win-active] [data-metro-movable-dialog] > .modal-content::before,
    [data-metro-floating][data-metro-self-dialog][data-metro-win-active]::before {
        opacity: 1;
    }

    [data-metro-floating] [data-metro-movable-dialog] > .modal-content > form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    [data-metro-floating] [data-metro-movable-dialog] .modal-body,
    [data-metro-floating][data-metro-self-dialog] .offcanvas-body {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    [data-metro-floating] [data-metro-movable-dialog] .modal-header,
    [data-metro-floating] [data-metro-movable-dialog] .modal-footer,
    [data-metro-floating][data-metro-self-dialog] .offcanvas-header,
    [data-metro-floating][data-metro-self-dialog] .offcanvas-footer {
        flex: 0 0 auto;
    }

    /* Title bar = drag handle. Leave room on the right for the window buttons. */
    .modal.show[data-metro-movable] .modal-header,
    .offcanvas.show[data-metro-movable] .offcanvas-header,
    .metro-slide-panel[data-metro-movable] .card-header,
    .scheduler-detail-panel[data-metro-movable] .card-header,
    .city-cal-modal-backdrop[data-metro-movable] .city-cal-modal-header,
    .metro-lightbox-backdrop[data-metro-movable] .metro-lightbox-toolbar,
    .metro-window-titlebar {
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        touch-action: none;
    }

    .modal.show[data-metro-movable] .modal-header,
    .offcanvas.show[data-metro-movable] .offcanvas-header,
    [data-metro-floating][data-metro-movable-kind="generic"] .card-header,
    [data-metro-floating][data-metro-movable-kind="slide"] .card-header {
        padding-right: 9rem;
        position: relative;
    }

    .modal.show[data-metro-movable] .modal-header .btn-close,
    .offcanvas.show[data-metro-movable] .offcanvas-header .btn-close {
        position: absolute;
        right: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        width: 0.8rem;
        height: 0.8rem;
        padding: 0.55rem;
        border-radius: 8px;
        opacity: 0.6;
        transition: opacity 120ms ease-out, background-color 120ms ease-out, transform 100ms ease-out;
    }

    .modal.show[data-metro-movable] .modal-header .btn-close:hover,
    .offcanvas.show[data-metro-movable] .offcanvas-header .btn-close:hover {
        opacity: 1;
        background-color: rgba(200, 30, 30, 0.1);
    }

    [data-metro-movable][data-metro-dragging] .modal-header,
    [data-metro-movable][data-metro-dragging] .offcanvas-header,
    [data-metro-movable][data-metro-dragging] .card-header,
    [data-metro-movable][data-metro-dragging] .city-cal-modal-header,
    [data-metro-movable][data-metro-dragging] .metro-lightbox-toolbar,
    [data-metro-movable][data-metro-dragging] .metro-window-titlebar {
        cursor: grabbing;
    }

    /* Headerless dialogs get a slim grab strip at the top. */
    .metro-window-titlebar {
        position: absolute;
        top: 3px;
        left: 0;
        right: 0;
        height: 22px;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--metro-win-radius) var(--metro-win-radius) 0 0;
    }

    .metro-window-titlebar__grip {
        width: 2.5rem;
        height: 0.3rem;
        border-radius: 999px;
        background: var(--metro-border-strong, #cbd5e1);
        transition: background-color 120ms ease-out;
    }

    .metro-window-titlebar:hover .metro-window-titlebar__grip {
        background: var(--metro-win-accent);
    }

    [data-metro-win-headless] > .modal-content {
        padding-top: 22px;
    }

    /* ── Window buttons (minimize / maximize) ───────────────────────────── */
    .metro-window-controls {
        position: absolute;
        top: 0.75rem;
        right: 2.85rem;
        z-index: 7;
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 2px;
        border-radius: 10px;
        background: var(--metro-surface-muted, rgba(15, 23, 42, 0.04));
        border: 1px solid transparent;
        transition: background-color 140ms ease-out, border-color 140ms ease-out;
    }

    [data-metro-win-headless] > .metro-window-controls,
    .metro-lightbox-backdrop .metro-window-controls {
        top: 0.5rem;
    }

    .metro-window-controls:hover {
        border-color: var(--metro-border, #e5e7eb);
    }

    .metro-window-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--metro-text-muted, #6b7280);
        font-size: 0.8rem;
        line-height: 1;
        cursor: pointer;
        transition: background-color 120ms ease-out, color 120ms ease-out, transform 100ms ease-out;
    }

    .metro-window-btn:hover {
        background: var(--metro-surface-float, #fff);
        color: var(--metro-text, #111827);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    }

    .metro-window-btn:active {
        transform: scale(0.92);
    }

    .metro-window-btn:focus-visible {
        outline: 2px solid var(--metro-win-accent);
        outline-offset: 1px;
    }

    .metro-lightbox-backdrop .metro-window-controls {
        background: rgba(15, 23, 42, 0.55);
    }

    .metro-lightbox-backdrop .metro-window-btn {
        color: rgba(255, 255, 255, 0.85);
    }

    .metro-lightbox-backdrop .metro-window-btn:hover {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

    /* ── Resize handles (edges + corners) ───────────────────────────────── */
    .metro-window-resizers {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 8;
        border-radius: var(--metro-win-radius);
    }

    .metro-window-resizer {
        position: absolute;
        pointer-events: auto;
        touch-action: none;
    }

    .metro-window-resizer--n { top: -4px; left: 14px; right: 14px; height: 8px; cursor: n-resize; }
    .metro-window-resizer--s { bottom: -4px; left: 14px; right: 14px; height: 8px; cursor: s-resize; }
    .metro-window-resizer--e { right: -4px; top: 14px; bottom: 14px; width: 8px; cursor: e-resize; }
    .metro-window-resizer--w { left: -4px; top: 14px; bottom: 14px; width: 8px; cursor: w-resize; }
    .metro-window-resizer--ne { top: -5px; right: -5px; width: 18px; height: 18px; cursor: ne-resize; }
    .metro-window-resizer--nw { top: -5px; left: -5px; width: 18px; height: 18px; cursor: nw-resize; }
    .metro-window-resizer--se { bottom: -5px; right: -5px; width: 18px; height: 18px; cursor: se-resize; }
    .metro-window-resizer--sw { bottom: -5px; left: -5px; width: 18px; height: 18px; cursor: sw-resize; }

    /* Subtle corner grip so resizability is discoverable. */
    .metro-window-resizer--se::after {
        content: "";
        position: absolute;
        right: 7px;
        bottom: 7px;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--metro-border-strong, #cbd5e1);
        border-bottom: 2px solid var(--metro-border-strong, #cbd5e1);
        border-bottom-right-radius: 3px;
        opacity: 0.8;
        transition: border-color 120ms ease-out;
    }

    .metro-window-resizer--se:hover::after {
        border-color: var(--metro-win-accent);
    }

    [data-metro-maximized] .metro-window-resizers,
    [data-metro-minimized] .metro-window-resizers,
    [data-metro-maximized] .metro-window-titlebar {
        display: none;
    }

    [data-metro-resizing] [data-metro-movable-dialog] > .modal-content,
    [data-metro-resizing][data-metro-self-dialog] {
        box-shadow: var(--metro-win-shadow-lift);
    }

    /* ── Open presence (one-shot) ───────────────────────────────────────── */
    @keyframes metro-float-enter {
        from {
            opacity: 0;
            transform: translateY(14px) scale(0.965);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    [data-metro-floating] [data-metro-movable-dialog][data-metro-float-enter] > .modal-content,
    [data-metro-floating] [data-metro-movable-dialog][data-metro-float-enter] > .metro-lightbox-dialog,
    [data-metro-floating][data-metro-self-dialog][data-metro-float-enter] {
        animation: metro-float-enter 260ms var(--metro-win-ease) both;
    }

    /* ── Snap preview ghost ─────────────────────────────────────────────── */
    .metro-window-snap-ghost {
        position: fixed;
        z-index: 1059;
        pointer-events: none;
        border: 2px solid var(--metro-win-accent);
        border-radius: var(--metro-win-radius);
        background: rgba(var(--bs-primary-rgb), 0.1);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 9999px rgba(15, 23, 42, 0.06);
        opacity: 0;
        transform: scale(0.98);
        transition: opacity 160ms ease-out, transform 200ms var(--metro-win-ease), left 160ms ease-out, top 160ms ease-out, width 160ms ease-out, height 160ms ease-out;
    }

    .metro-window-snap-ghost[data-show] {
        opacity: 1;
        transform: none;
    }

    /* ── Dock for minimized windows ─────────────────────────────────────── */
    .metro-window-dock {
        position: fixed;
        left: 50%;
        bottom: 14px;
        transform: translateX(-50%);
        z-index: 2150;
        display: flex;
        align-items: center;
        gap: 6px;
        max-width: calc(100vw - 24px);
        padding: 6px;
        border-radius: 999px;
        border: 1px solid var(--metro-border, #e5e7eb);
        background: color-mix(in srgb, var(--metro-surface-float, #fff) 82%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        backdrop-filter: blur(14px) saturate(1.4);
        box-shadow: var(--metro-win-shadow);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .metro-window-dock::-webkit-scrollbar {
        display: none;
    }

    @keyframes metro-dock-pill-in {
        from {
            opacity: 0;
            transform: translateY(10px) scale(0.9);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    .metro-window-dock__pill {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        background: var(--metro-surface-float, #fff);
        border: 1px solid var(--metro-border, #e5e7eb);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
        overflow: hidden;
        transition: box-shadow 140ms ease-out, transform 140ms ease-out, border-color 140ms ease-out;
    }

    .metro-window-dock__pill[data-enter] {
        animation: metro-dock-pill-in 240ms var(--metro-win-ease) both;
    }

    .metro-window-dock__pill:hover {
        border-color: var(--metro-win-accent);
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.18);
        transform: translateY(-1px);
    }

    .metro-window-dock__restore,
    .metro-window-dock__close {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        height: 2.1rem;
        padding: 0 0.85rem;
        border: 0;
        background: transparent;
        color: var(--metro-text, #111827);
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;
        cursor: pointer;
    }

    .metro-window-dock__restore i {
        color: var(--metro-win-accent);
        font-size: 0.95rem;
    }

    .metro-window-dock__label {
        max-width: 14rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .metro-window-dock__close {
        padding: 0 0.7rem 0 0.5rem;
        color: var(--metro-text-muted, #6b7280);
        border-left: 1px solid var(--metro-border, #e5e7eb);
        font-size: 0.75rem;
    }

    .metro-window-dock__close:hover {
        color: var(--metro-danger, #c81e1e);
        background: rgba(200, 30, 30, 0.08);
    }

    .metro-window-dock__restore:focus-visible,
    .metro-window-dock__close:focus-visible {
        outline: 2px solid var(--metro-win-accent);
        outline-offset: -2px;
    }

    /* ── Drawers / slide panels as windows ──────────────────────────────── */
    .offcanvas.show[data-metro-floating] {
        --bs-offcanvas-width: var(--metro-win-w, 640px);
        border-radius: var(--metro-win-radius) !important;
    }

    .offcanvas.show[data-metro-floating] .offcanvas-body {
        overflow-x: hidden;
    }

    [data-metro-floating][data-metro-self-dialog].metro-slide-panel,
    [data-metro-floating][data-metro-self-dialog].scheduler-detail-panel {
        overflow: hidden;
    }

    /* ── Photo lightbox / calendar / generic panels ─────────────────────── */
    .metro-lightbox-backdrop[data-metro-floating] .metro-lightbox-dialog {
        background: rgba(15, 23, 42, 0.94);
        border-radius: var(--metro-win-radius);
        padding: 0.75rem;
        box-shadow: var(--metro-win-shadow-active);
    }

    .city-cal-modal-backdrop[data-metro-floating] .city-cal-modal {
        border-radius: var(--metro-win-radius);
        box-shadow: var(--metro-win-shadow-active);
        overflow: hidden;
    }

    [data-metro-dialog-shell][data-metro-floating] [data-metro-movable-dialog] {
        border-radius: var(--metro-win-radius);
        overflow: hidden;
    }

    @media (prefers-reduced-motion: reduce) {
        [data-metro-floating] [data-metro-movable-dialog],
        [data-metro-floating][data-metro-self-dialog],
        [data-metro-floating] [data-metro-movable-dialog] > .modal-content,
        .metro-window-dock__pill,
        .metro-window-snap-ghost {
            animation: none !important;
            transition: none !important;
        }
    }
}

/* ── Popped-out windows: a real OS window (drag it to any screen) ───────────
   The dialog element is moved into a popup window; metroAsap.js mirrors Blazor's
   document listeners there. Not inside the desktop media query — the popup can be
   any size. The opener shell stays a silent, invisible Blazor host. */
[data-metro-popped] {
    visibility: hidden !important;
    pointer-events: none !important;
}

[data-metro-popped]::before {
    content: none !important;
    display: none !important;
}

.metro-window-placeholder {
    display: none !important;
}

.metro-window-toast {
    position: fixed;
    left: 50%;
    bottom: 76px;
    transform: translateX(-50%);
    z-index: 2300;
    max-width: min(32rem, calc(100vw - 32px));
    padding: 0.7rem 1.1rem;
    border-radius: 12px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35);
    animation: metro-window-toast-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes metro-window-toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

html[data-theme="dark"] .metro-window-toast {
    background: #f5f5f7;
    color: #0b0b0d;
}

body.metro-popout-body {
    --metro-win-radius: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 14px;
    overflow: hidden;
    color: var(--metro-text, #111827);
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(var(--bs-primary-rgb), 0.14), transparent 55%),
        radial-gradient(90% 70% at 100% 100%, rgba(14, 165, 233, 0.09), transparent 50%),
        linear-gradient(165deg, #e2e8f0 0%, var(--metro-surface-muted) 42%, #e8eef7 100%);
}

html[data-theme="dark"] body.metro-popout-body {
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(var(--bs-primary-rgb), 0.16), transparent 55%),
        linear-gradient(165deg, var(--metro-surface) 0%, var(--metro-surface-raised) 100%);
}

/* The dialog fills the frame — the OS window title bar is the drag handle. */
body.metro-popout-body > [data-metro-movable-dialog] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Window surface (same look as the in-page window). */
body.metro-popout-body > .modal-dialog > .modal-content,
body.metro-popout-body > .offcanvas[data-metro-movable-dialog],
body.metro-popout-body > .metro-slide-panel[data-metro-movable-dialog],
body.metro-popout-body > .scheduler-detail-panel[data-metro-movable-dialog],
body.metro-popout-body > .city-cal-modal[data-metro-movable-dialog] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100% !important;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--metro-border-strong, #cbd5e1) !important;
    border-radius: var(--metro-win-radius) !important;
    background: var(--metro-surface-float, #fff);
    box-shadow:
        0 0 0 1px rgba(var(--bs-primary-rgb), 0.2),
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 10px 24px rgba(15, 23, 42, 0.12),
        0 24px 48px rgba(15, 23, 42, 0.14);
}

html[data-theme="dark"] body.metro-popout-body > .modal-dialog > .modal-content,
html[data-theme="dark"] body.metro-popout-body > .offcanvas[data-metro-movable-dialog] {
    box-shadow:
        0 0 0 1px rgba(var(--bs-primary-rgb), 0.35),
        0 16px 36px rgba(0, 0, 0, 0.55),
        0 32px 72px rgba(0, 0, 0, 0.6);
}

body.metro-popout-body > .modal-dialog > .modal-content::before,
body.metro-popout-body > .offcanvas[data-metro-movable-dialog]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 3;
    background: linear-gradient(90deg, var(--metro-primary, #1a56db) 0%, #38bdf8 60%, #818cf8 100%);
    pointer-events: none;
}

body.metro-popout-body > .modal-dialog > .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

body.metro-popout-body .modal-body,
body.metro-popout-body .offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

body.metro-popout-body .modal-header,
body.metro-popout-body .modal-footer,
body.metro-popout-body .offcanvas-header,
body.metro-popout-body .offcanvas-footer {
    flex: 0 0 auto;
}

/* In-page window chrome does not apply to a real OS window. */
body.metro-popout-body .metro-window-controls,
body.metro-popout-body .metro-window-resizers,
body.metro-popout-body .metro-window-titlebar {
    display: none !important;
}

body.metro-popout-body [data-metro-win-headless] > .modal-content {
    padding-top: 0;
}

body.metro-popout-body .modal-header .btn-close,
body.metro-popout-body .offcanvas-header .btn-close {
    margin-left: auto;
    flex-shrink: 0;
    border-radius: 8px;
    opacity: 0.6;
    transition: opacity 120ms ease-out, background-color 120ms ease-out;
}

body.metro-popout-body .modal-header .btn-close:hover,
body.metro-popout-body .offcanvas-header .btn-close:hover {
    opacity: 1;
    background-color: rgba(200, 30, 30, 0.1);
}

/* ── In-modal navigation (MetroModal + ModalRouteRegistry) ───────────────────
   A record link inside a modal body opens that record as a PAGE inside the same modal.
   The original content stays mounted but hidden (state + unsaved edits survive); only the
   newest page is visible. Pages carry .metro-modal-nav-page on their root .modal-content. */
.modal-dialog[data-modal-nav] > :not(.metro-modal-nav-page):not(.metro-window-controls):not(.metro-window-resizers):not(.metro-window-placeholder) {
    display: none !important;
}

.modal-dialog[data-modal-nav] > .metro-modal-nav-page:has(~ .metro-modal-nav-page) {
    display: none !important;
}

@keyframes metro-nav-page-in {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.modal-dialog[data-modal-nav] > .metro-modal-nav-page {
    animation: metro-nav-page-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .modal-dialog[data-modal-nav] > .metro-modal-nav-page {
        animation: none;
    }
}

.metro-modal-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-right: 0.85rem;
    padding: 0.28rem 0.8rem 0.28rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, transform 100ms ease-out;
}

.metro-modal-back i {
    transition: transform 140ms ease-out;
}

.metro-modal-back:hover i {
    transform: translateX(-3px);
}

.metro-modal-back:active {
    transform: scale(0.96);
}

.metro-modal-back:focus-visible {
    outline: 2px solid var(--metro-primary, #1a56db);
    outline-offset: 2px;
}

/* ── Work order custom checklist modal (browser) ───────────── */
.work-order-checklist-modal .work-order-checklist-modal__dialog {
    max-width: min(1140px, calc(100vw - 1.5rem));
    margin: 0.75rem auto;
}

.work-order-checklist-modal .work-order-checklist-modal__content {
    border-radius: 1rem;
    overflow: hidden;
}

.work-order-checklist-modal .work-order-checklist-modal__header {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #0ea5e9 100%);
}

.work-order-checklist-modal .work-order-checklist-modal__icon {
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.35rem;
}

.work-order-checklist-modal .work-order-checklist-modal__body {
    max-height: min(72vh, calc(100vh - 11rem));
    overflow-y: auto;
    background: var(--bs-body-bg);
}

.work-order-checklist-modal .modal-fullscreen-lg-down .work-order-checklist-modal__body {
    max-height: none;
    flex: 1 1 auto;
}

.work-order-checklist-modal .modal-fullscreen-lg-down .work-order-checklist-modal__content {
    border-radius: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.work-order-checklist-modal .modal-fullscreen-lg-down .work-order-checklist-modal__footer {
    margin-top: auto;
}

.work-order-checklist-picker-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.work-order-checklist-picker-card:hover,
.work-order-checklist-picker-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12) !important;
}

.work-order-checklist-picker-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--metro-primary);
    font-size: 1.15rem;
}

.checklist-section-card .card-header {
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.06), transparent);
}

.checklist-question-card {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

.work-order-checklist-modal__unsaved::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: -1;
}

@media (max-width: 991.98px) {
    .work-order-checklist-modal.show.d-block {
        padding: 0 !important;
    }

    .work-order-checklist-modal .work-order-checklist-modal__dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
        min-height: 100%;
    }
}

/* ── Zoomable image lightbox (shared) ───────────────────────── */
.metro-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    touch-action: none;
    overscroll-behavior: none;
    outline: none;
}

.metro-lightbox-dialog {
    width: min(100%, 960px);
    touch-action: none;
    position: relative;
}

.metro-lightbox-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 5;
}

.metro-lightbox-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-right: 3rem;
}

.metro-lightbox-toolbar .form-range {
    min-width: 120px;
    flex: 1 1 140px;
}

.metro-lightbox-stage {
    width: 100%;
    min-height: 45vh;
    max-height: 78vh;
    overflow: hidden;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.2);
    touch-action: none;
}

.metro-lightbox-img {
    max-width: 100%;
    max-height: 78vh;
    user-select: none;
    -webkit-user-drag: none;
    cursor: grab;
}

.metro-lightbox-img:active {
    cursor: grabbing;
}

.metro-lightbox-footer-hint {
    font-size: 0.85rem;
}

/* Overlay while blob malware scan status is being reconciled from storage tags */
.metro-pending-scan-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

:root[data-theme="dark"] .metro-pending-scan-overlay {
    background: rgba(17, 24, 39, 0.9);
}

.metro-pending-scan-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    animation: metro-pending-scan-breathe 1.35s ease-in-out infinite;
}

@keyframes metro-pending-scan-breathe {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.82;
        transform: scale(1.04);
    }
}

.metro-pending-scan-overlay__text {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--metro-text-muted);
    text-transform: uppercase;
}

/* Floating actions: messages, AI, staff notifications (bottom-right stack) */
@media (min-width: 768px) {
    /* Application request FAB + Assist + Messages from md up. */
    :root {
        --metro-fab-stack-slots: 3;
    }
}

.metro-fab-stack {
    position: fixed;
    right: var(--metro-fab-inset);
    bottom: var(--metro-fab-inset);
    /* Keep floating assist/chat actions above page chrome, but below Bootstrap modals. */
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--metro-fab-gap);
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

/*
 * Report-a-problem mounts its MetroModal inside this stack (a sibling of page dialogs
 * under .page-body). Page windows publish unbounded --metro-win-z on click-to-front,
 * so a modest stack z-index (2300) lost and the screenshot form painted behind.
 * Stay above maps (9999) / drag ghosts (10000) and below toasts (11000).
 */
.metro-fab-stack:has(.modal.show),
.metro-fab-stack:has(.metro-problem-report-modal) {
    z-index: 10890;
}

/* Fixed / data-metro-no-move prompts (unsaved-changes) must still clear the report overlay. */
.page-body .modal.show[data-metro-no-move="1"]:not(.metro-problem-report-modal),
.portal-main .modal.show[data-metro-no-move="1"]:not(.metro-problem-report-modal) {
    z-index: 10940 !important;
}

.metro-fab-stack > * {
    pointer-events: auto;
}

.metro-quick-add-fab {
    align-items: center;
    display: inline-flex;
    height: var(--metro-fab-size);
    justify-content: center;
    min-height: var(--metro-fab-size);
    min-width: var(--metro-fab-size);
    width: var(--metro-fab-size);
    font-size: 1.25rem;
}

.metro-fab-stack--quick-add {
    z-index: 1080;
}

.mobile-shell .metro-fab-stack--quick-add {
    bottom: calc(var(--mobile-bottom-h, 3.5rem) + var(--mobile-safe-bottom, 0px) + 0.85rem);
}

/*
 * Reserve space so scrolled content and bottom-right actions (e.g. wizard Next)
 * never sit under the fixed Assist / application-request FABs.
 */
body:has(.metro-fab-stack) .page-body,
body:has(.metro-fab-stack) .portal-main {
    padding-bottom: calc(24px + var(--metro-fab-clearance-bottom));
    scroll-padding-bottom: var(--metro-fab-clearance-bottom);
}

@media (max-width: 768px) {
    body:has(.metro-fab-stack) .page-body,
    body:has(.metro-fab-stack) .portal-main {
        padding-bottom: calc(16px + var(--metro-fab-clearance-bottom));
    }
}

/* Opt-in: bottom action rows that hug the corner (wizard Next, create, etc.) */
.metro-fab-avoid {
    padding-inline-end: var(--metro-fab-clearance-end);
    box-sizing: border-box;
}

/* Default: last Back/Next (or similar) row inside a card clears the FAB horizontally */
body:has(.metro-fab-stack) .page-body .card-body > .d-flex.justify-content-between:last-child,
body:has(.metro-fab-stack) .page-body .card-body > .d-flex.justify-content-end:last-child,
body:has(.metro-fab-stack) .portal-main .card-body > .d-flex.justify-content-between:last-child,
body:has(.metro-fab-stack) .portal-main .card-body > .d-flex.justify-content-end:last-child {
    padding-inline-end: var(--metro-fab-clearance-end);
}

.metro-sys-notify-fab {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18) !important;
}

.metro-msg-dock-actions {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.5rem;
}

/* ── Instant messaging dock ─────────────────────────────────────────────── */
.metro-msg-dock {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 100%;
}

.metro-msg-toast {
    width: min(340px, 92vw);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.65rem !important;
    background: var(--metro-surface) !important;
    color: var(--bs-body-color, #212529) !important;
    padding: 0.75rem 0.85rem !important;
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.18) !important;
    animation: metro-msg-toast-in 0.22s ease-out;
    text-align: left;
}

.metro-msg-toast__head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.metro-msg-toast__avatar {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.metro-msg-toast__meta {
    min-width: 0;
    flex: 1 1 auto;
}

.metro-msg-toast__title {
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.25;
}

.metro-msg-toast__preview {
    font-size: 0.78rem;
    color: var(--metro-text-muted, #6c757d);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metro-msg-toast__actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.55rem;
    padding-left: 2.65rem;
}

@keyframes metro-msg-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.metro-msg-fab {
    width: 3.25rem;
    height: 3.25rem;
    position: relative;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
}

.metro-msg-fab-badge {
    font-size: 0.65rem;
}

.metro-msg-dock-shell {
    position: relative;
    z-index: 1;
}

.metro-msg-dock-dialog {
    width: min(960px, 96vw);
    max-width: calc(100vw - 1.5rem);
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(16, 24, 40, 0.22);
}

/* Desktop: open the messages panel centered in the viewport (not above the FAB).
   Floating-window mode overrides this once data-metro-floating is applied. */
@media (min-width: 769px) {
    .metro-msg-dock-shell:not([data-metro-floating]) {
        position: fixed;
        inset: 0;
        z-index: 1060;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        background: transparent;
    }

    .metro-msg-dock-shell:not([data-metro-floating]) .metro-msg-dock-dialog {
        pointer-events: auto;
    }

    /* Maximize / resize: panel must fill the floating dialog, not stay at 560px.
       The generic floating-window rule falls back to width/height:auto, which collapses
       this dialog to its content (tiny on open). Give it a definite default size; the
       --metro-win-w/h custom properties still win once the user drags/resizes/maximizes. */
    .metro-msg-dock-shell[data-metro-floating] .metro-msg-dock-dialog {
        display: flex !important;
        flex-direction: column;
        width: var(--metro-win-w, min(960px, calc(100vw - 24px))) !important;
        height: var(--metro-win-h, min(720px, calc(100vh - 48px))) !important;
    }

    [data-metro-floating] .metro-msg-dock-dialog > .metro-msg-panel {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0;
        flex: 1 1 auto;
    }

    /* Header layout in a floating window (left → right):
         Messages … [New] [Full page] [pop · min · max] [Close]
       The window controls are JS-owned and absolutely positioned, so the panel's own Close
       button reserves their slot (margin-left) and the controls sit exactly in that gap,
       immediately left of Close. Nothing overlaps at any window width. */
    .metro-msg-dock-shell[data-metro-floating] {
        --metro-msg-close-slot: 3.1rem;     /* Close button + header edge padding */
        --metro-msg-controls-w: 6.1rem;     /* pop / min / max group */
    }

    .metro-msg-dock-shell[data-metro-floating] .metro-msg-dock-dialog .metro-msg-panel > .card-header {
        min-height: 3rem;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 0.75rem !important;
    }

    .metro-msg-dock-shell[data-metro-floating] .metro-msg-dock-dialog .metro-msg-header-actions > button[aria-label="Close messages"] {
        margin-left: calc(var(--metro-msg-controls-w) + 0.6rem);
    }

    .metro-msg-dock-shell[data-metro-floating] .metro-msg-dock-dialog > .metro-window-controls {
        top: 0.5rem;
        right: var(--metro-msg-close-slot);
        z-index: 9;
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.22);
    }

    [data-metro-floating] .metro-msg-dock-dialog > .metro-window-controls .metro-window-btn {
        color: rgba(255, 255, 255, 0.92);
    }

    [data-metro-floating] .metro-msg-dock-dialog > .metro-window-controls .metro-window-btn:hover {
        background: rgba(255, 255, 255, 0.22);
        color: #fff;
        box-shadow: none;
    }
}

/* ── City AI assistant dock (stacked with messaging FAB, bottom-right) ── */
.metro-ai-dock {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 100%;
}

.metro-ai-fab {
    width: 3.25rem;
    height: 3.25rem;
    position: relative;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22) !important;
}

.metro-ai-panel {
    position: relative;
    width: min(400px, 94vw);
    height: min(480px, 68vh);
    min-width: 280px;
    max-width: min(720px, 94vw);
    min-height: 240px;
    max-height: min(90vh, 920px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.metro-ai-dock--fullpage {
    position: static;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
}

.metro-ai-panel--fullpage {
    width: 100%;
    max-width: 100%;
    height: min(720px, calc(100vh - 11rem));
    min-height: min(620px, calc(100vh - 11rem));
    max-height: none;
}

.metro-ai-height-grip {
    flex: 0 0 auto;
    height: 7px;
    cursor: ns-resize;
    touch-action: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.06),
        rgba(0, 0, 0, 0.02)
    );
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
}

.metro-ai-height-grip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: repeating-linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.22) 0 3px,
        transparent 3px 6px
    );
}

.metro-ai-height-grip--active {
    background: linear-gradient(
        to bottom,
        rgba(var(--bs-primary-rgb), 0.12),
        rgba(var(--bs-primary-rgb), 0.04)
    );
}

/* Corner resize (width + height); small hit targets at panel bottom corners */
.metro-ai-corner-grip {
    position: absolute;
    width: 14px;
    height: 14px;
    bottom: 0;
    z-index: 8;
    touch-action: none;
    box-sizing: border-box;
}

.metro-ai-corner-grip--bl {
    left: 0;
    cursor: nesw-resize;
}

.metro-ai-corner-grip--br {
    right: 0;
    cursor: nwse-resize;
}

.metro-ai-corner-grip.metro-ai-corner-grip--active {
    background: rgba(var(--bs-primary-rgb), 0.14);
}

.metro-ai-corner-grip--bl.metro-ai-corner-grip--active {
    border-radius: 0 0 0 4px;
}

.metro-ai-corner-grip--br.metro-ai-corner-grip--active {
    border-radius: 0 0 4px 0;
}

.metro-ai-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.metro-ai-compose {
    min-height: 2.5rem;
    max-height: none;
    overflow-y: hidden;
    resize: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
}

/* @mention pills on primary (user) AI bubbles */
.metro-ai-msg--user .metro-msg-mention-pill,
.metro-ai-msg--user a.metro-msg-mention-pill--link {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
}

.metro-ai-msg--user a.metro-msg-mention-pill--link:hover {
    background: rgba(255, 255, 255, 0.32);
    color: #fff !important;
}

.metro-msg-panel {
    width: min(960px, 96vw);
    height: min(720px, 82vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Messenger shell is full-bleed; dash-v2-card padding would push the header off-edge. */
.metro-msg-panel.dash-v2-card {
    padding: 0 !important;
}

.metro-msg-panel > .card-header {
    padding: 0.7rem 1rem !important;
    gap: 0.5rem;
}

.metro-msg-panel > .card-header .metro-msg-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.metro-msg-panel--fullpage {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: min(620px, calc(100vh - 11rem));
}

.metro-msg-new {
    padding: 0.75rem 0.85rem;
    background: rgba(var(--bs-primary-rgb), 0.04);
}

:root[data-theme="dark"] .metro-msg-new {
    background: rgba(255, 255, 255, 0.04);
}

.metro-msg-new-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

.metro-msg-new-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.metro-msg-people-results {
    max-height: min(22rem, 42vh);
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.45rem;
    background: var(--metro-surface);
}

:root[data-theme="dark"] .metro-msg-people-results {
    border-color: rgba(255, 255, 255, 0.12);
}

.metro-msg-people-hint,
.metro-msg-people-empty {
    padding: 0.65rem 0.75rem;
    font-size: 0.78rem;
}

.metro-msg-people-hint {
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.metro-msg-people-hit {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: transparent;
    text-align: left;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
}

.metro-msg-people-hit:last-child {
    border-bottom: 0;
}

.metro-msg-people-hit:hover,
.metro-msg-people-hit:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.08);
    outline: none;
}

.metro-msg-people-avatar {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--metro-primary);
    background: rgba(var(--bs-primary-rgb), 0.12);
}

.metro-msg-people-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.metro-msg-people-name {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.25;
}

.metro-msg-people-sub {
    font-size: 0.72rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metro-msg-my-qr {
    background: #fff;
}

.metro-msg-split {
    display: grid;
    grid-template-columns: minmax(140px, 34%) 1fr;
    flex: 1;
    min-height: 0;
}

.metro-msg-threads {
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.02);
}

:root[data-theme="dark"] .metro-msg-threads {
    background: rgba(255, 255, 255, 0.03);
}

.metro-msg-thread-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: transparent;
    text-align: left;
    padding: 0.65rem 1rem;
    padding-right: 2.25rem;
    position: relative;
    cursor: pointer;
}

.metro-msg-thread-row:hover {
    background: rgba(var(--bs-primary-rgb), 0.06);
}

.metro-msg-thread-row.active {
    background: rgba(var(--bs-primary-rgb), 0.12);
}

.metro-msg-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.62rem;
}

.metro-msg-system-badge {
    flex-shrink: 0;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.3rem;
    opacity: 0.85;
}

.metro-msg-thread {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.metro-msg-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0.65rem;
    background: var(--bs-body-bg);
}

.metro-msg-bubble {
    padding: 0.45rem 0.55rem;
    border-radius: 0.45rem;
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="dark"] .metro-msg-bubble {
    background: rgba(255, 255, 255, 0.06);
}

.metro-msg-bubble.mine {
    background: rgba(var(--bs-primary-rgb), 0.12);
}

.metro-msg-body .metro-msg-mention-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    vertical-align: baseline;
    margin: 0 0.12em 0.12em 0;
    padding: 0.06em 0.5em 0.08em;
    font-size: 0.92em;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.22);
    text-decoration: none;
    white-space: nowrap;
    cursor: default;
}

.metro-msg-body a.metro-msg-mention-pill--link {
    cursor: pointer;
}

.metro-msg-body a.metro-msg-mention-pill--link:hover {
    background: rgba(var(--bs-primary-rgb), 0.2);
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    text-decoration: none;
    color: var(--bs-primary);
}

.metro-msg-bubble.mine .metro-msg-body .metro-msg-mention-pill {
    background: rgba(255, 255, 255, 0.38);
    border-color: rgba(255, 255, 255, 0.45);
    color: rgba(33, 37, 41, 0.92);
}

.metro-msg-bubble.mine .metro-msg-body a.metro-msg-mention-pill--link {
    color: var(--bs-primary);
}

:root[data-theme="dark"] .metro-msg-body .metro-msg-mention-pill {
    background: rgba(var(--bs-primary-rgb), 0.22);
    border-color: rgba(13, 202, 240, 0.25);
    color: rgba(158, 197, 255, 0.98);
}

:root[data-theme="dark"] .metro-msg-body a.metro-msg-mention-pill--link:hover {
    background: rgba(var(--bs-primary-rgb), 0.32);
    border-color: rgba(13, 202, 240, 0.38);
    color: #cfe2ff;
}

:root[data-theme="dark"] .metro-msg-bubble.mine .metro-msg-body .metro-msg-mention-pill {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
}

:root[data-theme="dark"] .metro-msg-bubble.mine .metro-msg-body a.metro-msg-mention-pill--link {
    color: #9ec5ff;
}

.metro-msg-compose {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.metro-msg-compose-preview {
    pointer-events: none;
    background: rgba(0, 0, 0, 0.03);
}

:root[data-theme="dark"] .metro-msg-compose-preview {
    background: rgba(255, 255, 255, 0.06);
}

.metro-msg-compose-preview-label {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
}

.metro-msg-mentions {
    max-height: 200px;
    overflow-y: auto;
    border-radius: 0.35rem;
}

.metro-msg-bubble .dropdown {
    position: relative;
    flex-shrink: 0;
}

.metro-msg-actions-btn {
    width: 1.85rem;
    height: 1.85rem;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    background: rgba(0, 0, 0, 0.06);
    border: none;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.metro-msg-actions-btn:hover {
    background: rgba(0, 0, 0, 0.11);
    color: var(--bs-body-color);
    transform: scale(1.04);
}

.metro-msg-actions-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.35);
}

.metro-msg-bubble.mine .metro-msg-actions-btn {
    background: rgba(255, 255, 255, 0.42);
    color: rgba(33, 37, 41, 0.88);
}

.metro-msg-bubble.mine .metro-msg-actions-btn:hover {
    background: rgba(255, 255, 255, 0.58);
    color: rgba(33, 37, 41, 0.95);
}

:root[data-theme="dark"] .metro-msg-actions-btn {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
}

:root[data-theme="dark"] .metro-msg-actions-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
}

:root[data-theme="dark"] .metro-msg-bubble.mine .metro-msg-actions-btn {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
}

.metro-msg-actions-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    min-width: 13.75rem;
    max-width: min(18rem, 92vw);
    padding: 0;
    background: var(--bs-body-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    animation: metro-msg-menu-in 0.16s ease-out;
}

@keyframes metro-msg-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

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

:root[data-theme="dark"] .metro-msg-actions-menu {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.25),
        0 16px 40px rgba(0, 0, 0, 0.45);
}

.metro-msg-actions-menu-reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.65rem 0.6rem;
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.06) 0%, rgba(var(--bs-primary-rgb), 0.02) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

:root[data-theme="dark"] .metro-msg-actions-menu-reactions {
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.12) 0%, rgba(var(--bs-primary-rgb), 0.04) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.metro-msg-menu-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 2rem;
    min-width: 2rem;
    padding: 0.2rem 0.45rem;
    font-size: 1.05rem;
    line-height: 1;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.75);
    color: inherit;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.metro-msg-menu-emoji:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.2);
}

.metro-msg-menu-emoji--mine {
    background: rgba(var(--bs-primary-rgb), 0.18);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.28);
}

.metro-msg-menu-emoji-char {
    font-size: 1.15rem;
    line-height: 1;
}

.metro-msg-menu-emoji-count {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    min-width: 0.85rem;
    text-align: center;
}

:root[data-theme="dark"] .metro-msg-menu-emoji {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

:root[data-theme="dark"] .metro-msg-menu-emoji:hover {
    background: rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] .metro-msg-menu-emoji--mine {
    background: rgba(var(--bs-primary-rgb), 0.28);
    box-shadow: inset 0 0 0 1px rgba(13, 202, 240, 0.25);
}

.metro-msg-actions-menu-body {
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.metro-msg-action-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.metro-msg-action-row:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.metro-msg-action-row--danger {
    color: var(--bs-danger);
}

.metro-msg-action-row--danger:hover {
    background: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
}

.metro-msg-action-icon {
    font-size: 1rem;
    opacity: 0.75;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.metro-msg-action-row:hover .metro-msg-action-icon {
    opacity: 1;
}

:root[data-theme="dark"] .metro-msg-action-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.metro-msg-reply-quote,
.metro-msg-forward-card {
    border-left: 3px solid rgba(var(--bs-primary-rgb), 0.45);
    padding-left: 0.45rem;
}

.metro-msg-forward-label {
    font-size: 0.55rem;
    letter-spacing: 0.05em;
}

.metro-msg-forward-body {
    max-height: 6rem;
    overflow: auto;
}

.metro-msg-replying-banner {
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.metro-msg-reactions-inline {
    opacity: 0.92;
}

.metro-msg-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.12rem 0.45rem 0.14rem;
    font-size: 0.78rem;
    line-height: 1.2;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    color: var(--bs-body-color);
}

.metro-msg-reaction-pill-count {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
}

.metro-msg-reaction-pill--mine {
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    background: rgba(var(--bs-primary-rgb), 0.12);
}

.metro-msg-bubble.mine .metro-msg-reaction-pill {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.35);
}

.metro-msg-bubble.mine .metro-msg-reaction-pill--mine {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    background: rgba(var(--bs-primary-rgb), 0.22);
}

:root[data-theme="dark"] .metro-msg-reaction-pill {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .metro-msg-reaction-pill--mine {
    border-color: rgba(13, 202, 240, 0.35);
    background: rgba(var(--bs-primary-rgb), 0.22);
}

.metro-msg-read-receipt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.metro-msg-read-receipt .bi-check2-all {
    color: var(--bs-primary);
}

.metro-msg-read-receipt-count,
.metro-msg-read-receipt-label {
    opacity: 0.9;
}

.metro-msg-bubble.mine .metro-msg-read-receipt {
    color: rgba(255, 255, 255, 0.82);
}

.metro-msg-bubble.mine .metro-msg-read-receipt .bi-check2-all {
    color: rgba(255, 255, 255, 0.95);
}

.metro-msg-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.metro-msg-modal {
    width: 100%;
    max-width: 360px;
    z-index: 1081;
}

@media (max-width: 576px) {
    .metro-msg-split {
        grid-template-columns: 1fr;
    }

    .metro-msg-threads {
        max-height: 140px;
    }
}

.leaflet-tooltip.metro-region-name-tooltip {
    background: rgba(33, 37, 41, 0.92);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.leaflet-tooltip.metro-region-name-tooltip::before {
    display: none;
}

/* Sortable list (drag-and-drop reorder) */
.sortable-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sortable-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--metro-border, #dee2e6);
    border-radius: 6px;
    background: var(--metro-surface, #fff);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sortable-list-item--dragging {
    opacity: 0.55;
}

.sortable-list-item--drop-target {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.2);
}

.sortable-list-handle {
    cursor: grab;
    padding: 0.15rem 0.25rem;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    /* Lets iPad/tablet drag from the grip without the page scrolling instead. */
    touch-action: none;
}

.sortable-list-item--ghost {
    position: fixed;
    z-index: 10000;
    margin: 0;
    pointer-events: none;
    opacity: 0.92;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.sortable-list--pointer-dragging,
.sortable-list--pointer-dragging * {
    user-select: none;
    -webkit-user-select: none;
}

.dashboard-widget-sort .sortable-list-item {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
}

.sortable-list-move-buttons {
    flex-shrink: 0;
    align-self: center;
}

tr.sortable-table-row--dragging,
.sortable-table-row--dragging {
    opacity: 0.55;
}

tr.sortable-table-row--drop-target td {
    border-top: 2px solid var(--bs-primary, #0d6efd);
}

.sortable-table-row--drop-target:not(tr) {
    border-top: 2px solid var(--bs-primary, #0d6efd) !important;
}

.sortable-table-handle {
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.sortable-table--pointer-dragging,
.sortable-list--pointer-dragging,
.metro-pointer-transfer--dragging {
    -webkit-user-select: none;
    user-select: none;
}

.metro-pointer-drag-ghost,
.sortable-table-row--ghost,
.sortable-list-item--ghost {
    position: fixed !important;
    z-index: 10000;
    pointer-events: none !important;
    opacity: 0.92;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.metro-pointer-drop-target--active {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.metro-pointer-item--dragging {
    opacity: 0.45;
}

[data-metro-drag],
.scheduler-personnel-draggable,
.fire-cal-person--draggable {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.file-drop-zone {
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.5rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.file-drop-zone:focus {
    outline: none;
}

.file-drop-zone:focus-visible {
    border-color: var(--metro-primary);
    box-shadow: 0 0 0 1px var(--metro-primary);
}

.file-drop-zone--active {
    border-color: var(--metro-primary);
    background: color-mix(in srgb, var(--metro-primary) 8%, transparent);
    box-shadow: 0 0 0 1px var(--metro-primary);
}

.portal-v2 .file-drop-zone:focus-visible {
    border-color: var(--metro-city-primary, var(--metro-primary));
    box-shadow: 0 0 0 1px var(--metro-city-primary, var(--metro-primary));
}

.portal-v2 .file-drop-zone--active {
    border-color: var(--metro-city-primary, var(--metro-primary));
    background: color-mix(in srgb, var(--metro-city-primary, var(--metro-primary)) 8%, transparent);
    box-shadow: 0 0 0 1px var(--metro-city-primary, var(--metro-primary));
}

.file-drop-zone--disabled {
    opacity: 0.65;
}

.file-drop-zone-hint {
    pointer-events: none;
}

.file-drop-zone-camera {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 48px;
    margin-top: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--metro-border, #cbd5e1);
    border-radius: 0.6rem;
    background: var(--metro-surface-raised, #fff);
    font-size: 1.05rem;
    cursor: pointer;
}

.file-drop-zone-error {
    margin: 0.5rem 0 0;
    color: var(--metro-danger, #b42318);
    font-size: 1.05rem;
}

@media (pointer: coarse) {
    .file-drop-zone-camera {
        display: inline-flex;
    }
}

.fees-record-actions .btn,
.fees-pay-bar .btn,
.fees-pay-suggestion,
.fees-pay-fee,
.municipal-record-files .btn,
[data-municipal-record-fees] .btn,
.wo-detail-section-upload .btn,
.metro-form-actions .btn:not(.btn-link) {
    min-height: 48px;
    min-width: 48px;
}

@media (max-width: 768px) {
    .file-drop-zone {
        min-height: 3.25rem;
        padding: 0.85rem 0.75rem;
    }

    .file-drop-zone-hint {
        font-size: 0.95rem;
        color: var(--metro-text);
    }

    .file-drop-zone .form-control {
        min-height: 48px;
    }
}

.gis-upload-bulk-zone {
    padding: 1rem;
}

.gis-upload-slot {
    border: 1px solid var(--bs-border-color);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gis-upload-slot--filled {
    border-color: rgba(var(--bs-primary-rgb), 0.35);
}

.gis-upload-slot--active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15);
}

.gis-upload-slot-zone {
    padding: 0.35rem;
    min-height: 3.25rem;
}

.gis-upload-slot-zone .file-drop-zone-hint {
    font-size: 0.72rem;
}

.gis-upload-slot-files li {
    max-width: 100%;
}

.gis-viewer-drop {
    min-height: 6rem;
}

.gis-viewer-file-list {
    max-height: 240px;
    overflow: auto;
}

.gis-viewer-dataset {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gis-viewer-dataset:hover {
    border-color: var(--bs-primary);
}

.gis-viewer-dataset--active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
}

.gis-viewer-table thead th {
    white-space: nowrap;
}

.gis-viewer-building-units .list-group {
    max-height: 180px;
    overflow: auto;
}

.gis-viewer-unit-row {
    cursor: pointer;
}

.gis-viewer-unit-row:hover {
    background: var(--bs-tertiary-bg);
}

.gis-viewer-unit-row--selected {
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-left: 3px solid var(--bs-primary);
}

/* Icon-only buttons should stay readable when the icon font fails */
.btn:has(> .bi:only-child),
.btn:has(> i.bi:only-child) {
    min-width: 2.25rem;
    min-height: 2rem;
}

/* ── Interactive maps (Leaflet / metroMap) ───────────────────────────────── */

.metro-map-wrapper {
    position: relative;
}

/* Fullscreen expand keeps the map node in the Blazor tree (no reparent). */
.metro-map--expanded {
    position: fixed !important;
    inset: 0;
    z-index: 9999;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: var(--metro-surface);
    box-sizing: border-box;
}

.metro-map-address-search {
    position: relative;
    z-index: 1;
    max-width: 28rem;
    margin-bottom: 0.5rem;
}

.metro-map-wrapper .metro-map-address-search {
    margin-bottom: 0;
    padding: 10px 10px 0 50px;
    max-width: none;
}

.metro-map-address-search--overlay {
    position: absolute;
    top: 10px;
    left: 50px;
    right: 10px;
    z-index: 800;
    max-width: 420px;
    margin-bottom: 0;
    padding: 0;
    pointer-events: none;
}

.metro-map-address-search--overlay .input-group,
.metro-map-address-search--overlay .metro-map-address-search-results,
.metro-map-address-search--overlay .metro-map-address-search-status {
    pointer-events: auto;
}

.metro-map-address-search-results {
    margin-top: 4px;
    max-height: 14rem;
    overflow-y: auto;
    border-radius: 0.375rem;
}

.metro-map-address-search-status {
    margin-top: 4px;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 0.25rem;
}

.metro-map-canvas {
    height: 580px;
    width: 100%;
}

.metro-map-canvas--page {
    height: min(70dvh, 640px);
    min-height: 320px;
}

.metro-map-canvas--panel {
    height: var(--metro-map-height, 380px);
    min-height: 260px;
}

.metro-map-draw-hint {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 800;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--metro-surface);
    color: var(--bs-body-color);
    border: 1px solid var(--metro-border);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    pointer-events: none;
    max-width: calc(100% - 24px);
}

.metro-alert-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--bs-body-bg);
}

.metro-alert-summary-list {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.metro-alert-summary-item {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    max-width: 15rem;
    padding: 0.35rem 0.65rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--metro-alert-color, var(--bs-primary));
    border-radius: 0.4rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: left;
}

.metro-alert-summary-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metro-alert-summary-item.is-selected,
.metro-alert-summary-item:hover {
    border-color: var(--metro-alert-color, var(--bs-primary));
    background: var(--bs-tertiary-bg);
}

@media (max-width: 768px) {
    .metro-map-canvas {
        height: min(55dvh, 520px);
        min-height: 280px;
    }

    .metro-alert-summary {
        align-items: stretch;
        flex-direction: column;
        gap: 0.5rem;
    }

    .metro-map-sidebar-panel {
        max-height: none !important;
    }
}

/* Registered as a Leaflet control (topright) so it stacks under the layer switcher. */
.metro-map-toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    clear: both;
}

.metro-map-toolbar-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--metro-border, #dee2e6);
    border-radius: 8px;
    background: var(--metro-surface, #fff);
    color: var(--metro-city-primary, var(--metro-primary, #1a56db));
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.metro-map-toolbar-btn.is-busy {
    opacity: 0.65;
    cursor: wait;
}

.metro-map-toolbar-btn.is-located {
    color: #198754;
    border-color: #198754;
}

.metro-map-user-location-dot {
    animation: metro-map-locate-pulse 1.6s ease-out 2;
}

@keyframes metro-map-locate-pulse {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(1.85); opacity: 0.35; }
    100% { transform: scale(1); opacity: 1; }
}

.metro-map-cluster {
    transition: transform 0.15s ease;
}

.metro-map-cluster:hover {
    transform: scale(1.08);
}

.metro-map-toolbar-btn .bi {
    font-size: 1.15rem;
    line-height: 1;
}

.metro-map-toolbar-btn:active {
    transform: scale(0.97);
}

.metro-map-cluster-wrap {
    background: transparent !important;
    border: none !important;
}

.metro-map-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--metro-city-primary, var(--metro-primary, #1a56db));
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid var(--metro-surface, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.metro-map-pin-seq {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 14px;
    background: #212529;
    color: #fff;
    font: 700 12px/1 system-ui, sans-serif;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.metro-map-fleet-vehicle-marker-wrap {
    background: transparent !important;
    border: none !important;
}

.metro-map-fleet-car-icon {
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.metro-map-fleet-vehicle-marker-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
}

.metro-map-fleet-direction-arrow {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: 1px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 9px solid #198754;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.metro-map-popup {
    min-width: 160px;
    max-width: min(320px, calc(100vw - 32px));
}

.metro-map-alert-popup {
    min-width: 200px;
}

.metro-map-alert-addr-label {
    display: block;
    font-size: 0.75rem;
    margin-top: 6px;
    margin-bottom: 2px;
    color: #555;
}

.metro-map-alert-addr-list {
    display: block;
    width: 100%;
    max-height: 9.5rem;
    margin: 0;
    padding: 2px;
    font-size: 0.78rem;
    line-height: 1.35;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    overflow-y: auto;
}

.metro-map-alert-addr-list option {
    padding: 3px 6px;
    white-space: normal;
}

.metro-map-popup-desc {
    margin: 4px 0 0;
    font-size: 0.82rem;
}

.metro-map-popup-actions {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metro-map-popup-btn {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    text-align: center;
    text-decoration: none;
}

/* Leaflet sets .leaflet-container a { color: … } which beats .btn-primary on <a> until :hover. */
.leaflet-popup-content a.metro-map-popup-btn.btn-primary,
.leaflet-popup-content a.metro-map-popup-btn.btn-primary:hover,
.leaflet-popup-content a.metro-map-popup-btn.btn-primary:focus {
    color: #fff;
    text-decoration: none;
}

.leaflet-popup-content {
    margin: 10px 12px;
}

.metro-map-detail-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    max-height: 50vh;
    max-height: 50dvh;
    overflow: auto;
    background: var(--metro-surface);
    border-top: 1px solid var(--metro-border, #dee2e6);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.24);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
}

.metro-map-detail-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(0, 0, 0, 0.35);
}

@media (min-width: 992px) {
    .metro-map-detail-sheet,
    .metro-map-detail-sheet-backdrop {
        display: none !important;
    }
}

.metro-map-plan-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
}

.metro-map-plan-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Role editor (Admin → Roles) ── */

.role-editor-preset-card {
    display: block;
    border: 1px solid var(--metro-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: var(--metro-surface);
    transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
    height: 100%;
}

.role-editor-preset-card:hover {
    border-color: var(--metro-primary);
}

.role-editor-preset-card.selected {
    border-color: var(--metro-primary);
    background: rgba(var(--bs-primary-rgb), 0.06);
    box-shadow: 0 0 0 1px var(--metro-primary);
}

.role-editor-summary-chip {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    font-size: 0.8rem;
    border-radius: 999px;
    background: var(--metro-bg);
    border: 1px solid var(--metro-border);
    color: var(--metro-text);
}

.role-editor-dept-summary {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--metro-text-muted);
}

.role-editor-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 0.75rem 1rem !important;
}

.role-editor-panel {
    min-height: 0;
}

.role-editor-empty .display-4 {
    opacity: 0.35;
}

.role-editor-list-badge {
    font-weight: 500;
    font-size: 0.7rem;
}

:root[data-theme="dark"] .role-editor-preset-card {
    background: var(--metro-surface);
}

:root[data-theme="dark"] .role-editor-preset-card.selected {
    background: rgba(var(--bs-primary-rgb), 0.15);
}

:root[data-theme="dark"] .role-editor-summary-chip {
    background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .role-editor-sticky-footer {
    background: var(--metro-surface) !important;
}

/* Senior portal & event kiosk */
.senior-portal { font-size: 1.05rem; }
.senior-portal .btn-lg { min-height: 3rem; font-size: 1.15rem; }
.kiosk-root { max-width: 52rem; }
.kiosk-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; }
.kiosk-sub { font-size: clamp(1rem, 2.5vw, 1.25rem); }
.kiosk-event-btn, .kiosk-method-btn { min-height: 4.5rem; touch-action: manipulation; }
.kiosk-input { font-size: 1.35rem; min-height: 3.25rem; }
.kiosk-spinner { width: 3rem; height: 3rem; }
.kiosk-success-screen { min-height: 40vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kiosk-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 5.5rem;
    touch-action: manipulation;
    padding: 1.1rem 1.25rem;
}
.kiosk-tile-icon {
    flex: 0 0 auto;
    font-size: 1.75rem;
    line-height: 1;
    width: 2.5rem;
    text-align: center;
}
.kiosk-tile-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.kiosk-tile-title { font-weight: 700; font-size: 1.2rem; line-height: 1.25; }
.kiosk-tile-sub { font-size: 0.95rem; font-weight: 400; opacity: 0.85; line-height: 1.3; }
.kiosk-return-bar { position: sticky; top: 0; z-index: 20; }
.checkin-shell { background: var(--metro-surface-raised); }
.kiosk-staff-unlock-input {
    -webkit-text-security: disc;
    text-security: disc;
}
@media (max-width: 576px) {
    .kiosk-method-grid { grid-template-columns: 1fr; }
}

/* UX overhaul utilities */
.metro-assist-dock {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.metro-skeleton-bar {
    border-radius: 0.25rem;
    background: linear-gradient(90deg, var(--metro-border) 25%, rgba(255, 255, 255, 0.5) 50%, var(--metro-border) 75%);
    background-size: 200% 100%;
    animation: metro-skeleton-shimmer 1.2s ease-in-out infinite;
}

.metro-card-skeleton {
    display: grid;
    gap: 0.85rem;
}

.metro-card-skeleton-card {
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px solid var(--metro-border, var(--bs-border-color));
    background: var(--metro-surface);
}

.metro-card-skeleton-title {
    width: 42%;
    height: 0.95rem;
}

.metro-card-skeleton-line {
    width: 88%;
    height: 0.7rem;
    margin-top: 0.55rem;
}

.metro-card-skeleton-line--short {
    width: 58%;
}

.metro-skeleton-table .metro-skeleton-row:last-child {
    margin-bottom: 0 !important;
}

@keyframes metro-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.metro-density-compact.table-sm > :not(caption) > * > * {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.page-header h1,
.page-header h2 {
    font-size: var(--metro-page-header-size, 1.75rem);
    font-weight: var(--metro-page-header-weight, 600);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.page-header .text-muted,
.page-header small {
    font-size: var(--metro-page-header-subtitle-size, 0.9rem);
}

.global-search-field {
    position: relative;
    min-width: 0;
}

.global-search-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 1100;
    max-height: min(32rem, calc(100dvh - var(--topbar-height, 3.5rem) - 1.5rem));
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.18);
}

.master-search-field .input-group {
    position: relative;
    z-index: 1101;
}

.master-search-input .form-control,
.master-search-input .input-group-text,
.master-search-input .master-search-clear {
    min-height: 3rem;
    font-size: 1.125rem;
}

.master-search-input .form-control {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.master-search-input .master-search-clear {
    min-width: 3rem;
    font-size: 1.5rem;
    line-height: 1;
}

.master-search-label {
    font-size: 1rem;
}

.master-search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    border: 0;
    padding: 0;
    background: transparent;
}

.master-search-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--metro-text, #1a1d23);
}

.master-search-hit,
.master-search-retry,
.master-search-see-all {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    font-size: 1.0625rem;
    line-height: 1.35;
}

.master-search-see-all {
    width: auto;
    min-height: 2.75rem;
    padding: 0.35rem 0.7rem;
    border: 0;
    border-radius: 0.6rem;
    font-weight: 650;
    color: var(--metro-primary, #0d6efd);
}

.master-search-hit__title {
    font-weight: 700;
    font-size: 1.0625rem;
}

.master-search-hit__subtitle,
.master-search-hit__summary {
    font-size: 1rem;
    color: var(--metro-text-muted, #5c6570);
}

.master-search-status {
    padding: 0.9rem 1rem;
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--metro-text, #1a1d23);
}

.master-search-retry {
    color: var(--metro-text, #1a1d23);
}

.master-search-hit.is-active,
.master-search-retry.is-active,
.master-search-see-all.is-active,
.master-search-hit:hover,
.master-search-retry:hover,
.master-search-see-all:hover,
.master-search-hit:focus-visible,
.master-search-retry:focus-visible,
.master-search-see-all:focus-visible {
    background: color-mix(in srgb, var(--metro-primary, #0d6efd) 12%, var(--metro-surface, #fff));
    outline: 2px solid var(--metro-primary, #0d6efd);
    outline-offset: -2px;
}

.master-search-mark {
    font-weight: 800;
    background: color-mix(in srgb, var(--metro-primary, #0d6efd) 22%, transparent);
    border-radius: 0.2rem;
    padding: 0 0.08em;
}

.master-search-skeleton {
    height: 2.75rem;
    margin: 0.45rem 1rem 0.7rem;
    border-radius: 0.6rem;
    background: linear-gradient(90deg, var(--metro-border, #e6e8ec) 25%, color-mix(in srgb, var(--metro-border, #e6e8ec) 45%, white) 50%, var(--metro-border, #e6e8ec) 75%);
    background-size: 200% 100%;
    animation: master-search-shimmer 1.2s ease-in-out infinite;
}

@keyframes master-search-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .master-search-skeleton { animation: none; }
}

.topbar-search-launch {
    display: none;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.12));
    border-radius: 0.9rem;
    background: var(--metro-surface, #fff);
    color: var(--metro-text-muted, #5c6570);
    font-size: 1.05rem;
    text-align: left;
}

.topbar-search-launch span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-search-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: var(--metro-surface, #fff);
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
}

.master-search-fullscreen__bar {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    min-height: 0;
    flex: 1 1 auto;
}

.master-search-fullscreen__panel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.master-search-fullscreen__close {
    min-height: 3rem;
    min-width: 4.5rem;
    font-size: 1.125rem;
    flex: 0 0 auto;
}

.master-search-fullscreen .global-search-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.master-search-fullscreen .global-search-dropdown {
    position: static;
    max-height: none;
    flex: 1 1 auto;
    box-shadow: none;
    border: 0;
    border-radius: 0;
}

@media (max-width: 768px) {
    .topbar-search { display: none !important; }
    .topbar-search-launch { display: flex; }
}

.citizen-wo-timeline {
    position: relative;
}

.citizen-wo-timeline > li {
    position: relative;
}

.citizen-wo-timeline > li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.22rem;
    top: 1rem;
    bottom: -0.35rem;
    width: 2px;
    background: var(--metro-border);
}

.citizen-wo-timeline-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--metro-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--metro-primary) 18%, transparent);
    z-index: 1;
}

.wo-public-status-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.75rem;
    margin: 0.85rem 0 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--metro-border);
    border-radius: 0.75rem;
    background: var(--metro-surface-muted, #f8fafc);
}

.wo-public-status-facts__label {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--metro-text-muted);
    margin-bottom: 0.15rem;
}

.wo-public-status-facts__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--metro-text);
}

.wo-public-detail__hero {
    margin-bottom: 0.25rem;
}

.wo-public-detail__hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.wo-public-detail__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--metro-text-muted);
    margin-bottom: 0.15rem;
}

.wo-public-detail__number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--metro-text);
    word-break: break-word;
}

.wo-public-detail__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.35rem 0 0;
    color: var(--metro-text);
    line-height: 1.35;
}

.wo-public-detail__type {
    font-size: 0.9rem;
    color: var(--metro-text-muted);
    margin-top: 0.25rem;
}

.wo-public-detail__status-desc {
    font-size: 0.9rem;
    color: var(--metro-text-muted);
    margin: 0.65rem 0 0;
}

.wo-public-detail__address {
    font-size: 0.95rem;
    margin-top: 0.65rem;
    color: var(--metro-text);
}

.wo-public-detail__section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--metro-border);
}

.wo-public-detail__section-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--metro-text-muted);
    margin: 0 0 0.55rem;
}

.wo-public-detail__description {
    margin: 0;
    white-space: pre-wrap;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--metro-text);
}

.wo-public-detail__photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem;
}

.wo-public-detail__photo {
    display: block;
    position: relative;
    border: 1px solid var(--metro-border);
    border-radius: 0.65rem;
    overflow: hidden;
    background: var(--metro-surface-muted, #f8fafc);
    aspect-ratio: 1;
    text-decoration: none;
    color: inherit;
}

.wo-public-detail__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wo-public-detail__photo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: #fff;
}

.wo-public-detail__lookup summary {
    cursor: pointer;
}

.notification-builder-preview__frame {
    width: 100%;
    height: 280px;
    border: 1px solid var(--metro-border, #dee2e6);
    border-radius: 6px;
    background: #fff;
}

.notification-builder-preview__sms {
    white-space: pre-wrap;
}

.wo-next-step {
    display: inline-flex;
    align-items: center;
    transition:
        transform var(--duration-ui, 200ms) var(--ease-out, ease),
        box-shadow var(--duration-ui, 200ms) var(--ease-out, ease),
        background-color var(--duration-ui, 200ms) var(--ease-out, ease),
        border-color var(--duration-ui, 200ms) var(--ease-out, ease);
}
.wo-next-step--done {
    font-weight: 600;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--metro-primary) 22%, transparent);
}
.wo-next-step--assign {
    border-style: dashed;
}
.wo-next-step--tell {
    font-style: italic;
}
.wo-next-step--field {
    letter-spacing: 0.01em;
}
@media (hover: hover) {
    .wo-next-step:hover { transform: translateY(-1px); }
}
.wo-next-step:active { transform: translateY(1px) scale(0.98); }
@media (prefers-reduced-motion: reduce) {
    .wo-next-step,
    .wo-next-step:hover,
    .wo-next-step:active { transition: none; transform: none; }
}

.notification-sample-preview {
    margin-top: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--metro-border, #e5e7eb);
    border-radius: 0.75rem;
    background: var(--metro-surface-muted, #f8fafc);
}
.notification-sample-preview__header {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.65rem;
}
.notification-sample-preview__kicker { font-weight: 650; font-size: 0.9rem; }
.notification-sample-preview__hint { color: var(--metro-text-muted); font-size: 0.8rem; }
.notification-sample-preview__tabs { display: flex; gap: 0.35rem; margin-bottom: 0.65rem; }
.notification-sample-preview__tab {
    min-height: var(--metro-touch-target-min, 48px);
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--metro-border);
    border-radius: 999px;
    background: #fff;
}
.notification-sample-preview__tab.is-active {
    background: var(--metro-primary);
    color: #fff;
    border-color: var(--metro-primary);
}
.notification-sample-preview__sms-bubble {
    max-width: 22rem;
    margin-left: auto;
    padding: 0.7rem 0.85rem;
    border-radius: 1rem 1rem 0.25rem 1rem;
    background: #dcf8c6;
    color: #111827;
    white-space: pre-wrap;
}
.notice-recipient-peek__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.notice-recipient-peek__btn { min-height: var(--metro-touch-target-min, 48px); }
.notice-recipient-peek__device {
    margin-top: 0.65rem;
    border: 1px solid var(--metro-border);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
}
.notice-recipient-peek__chrome {
    padding: 0.45rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 650;
    background: var(--metro-surface-muted);
    border-bottom: 1px solid var(--metro-border);
}
/* ============================================================
   Review before send (work order email / text / letter)
   .wo-send-review — WorkOrderEmailReviewModal
   .comm-preview   — CommunicationDevicePreview ("What they’ll see")
   ============================================================ */

.wo-send-review__dialog {
    max-width: min(1180px, calc(100vw - 2rem));
    width: min(1180px, calc(100vw - 2rem));
}

/* Collapsed nav frees horizontal space — use nearly the full viewport for compose + preview. */
.metro-layout.sidebar-collapsed .wo-send-review__dialog {
    max-width: calc(100vw - var(--sidebar-collapsed-width) - 1rem);
    width: calc(100vw - var(--sidebar-collapsed-width) - 1rem);
}

.wo-send-review .modal-content {
    position: relative;
}

.wo-send-review .modal-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    z-index: 3;
    background: linear-gradient(90deg, var(--metro-primary) 0%, #22a1ff 55%, var(--metro-info) 100%);
}

.wo-send-review__header {
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem 0.9rem;
}

.wo-send-review__title-block {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
    flex: 1 1 auto;
}

.wo-send-review__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(145deg, var(--metro-primary), var(--metro-primary-dark));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--metro-primary) 30%, transparent);
}

.wo-send-review__icon--letter {
    background: linear-gradient(145deg, #7c3aed, #5b21b6);
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.3);
}

.wo-send-review__icon--file {
    background: linear-gradient(145deg, #0e9f6e, #046c4e);
    box-shadow: 0 8px 18px rgba(14, 159, 110, 0.3);
}

.wo-send-review__lede {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--metro-text-muted);
    line-height: 1.45;
}

.wo-send-review__header-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.wo-send-review__header-end .btn-close {
    margin: 0;
}

.wo-send-review__kind {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--metro-primary-dark);
    background: color-mix(in srgb, var(--metro-primary) 12%, transparent);
    white-space: nowrap;
}

.wo-send-review__body {
    padding: 1rem 1.25rem 1.25rem;
    background: var(--metro-surface-muted);
}

.wo-send-review__alert {
    margin-bottom: 0.85rem;
}

.wo-send-review__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 14rem;
    color: var(--metro-text-muted);
}

.wo-send-review__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

@media (min-width: 992px) {
    .wo-send-review__grid {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 46%);
    }

    .wo-send-review__preview {
        position: sticky;
        top: 0;
    }
}

.wo-send-review__compose {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.wo-send-review__step {
    background: var(--metro-surface);
    border: 1px solid var(--metro-border);
    border-radius: 0.9rem;
    padding: 1rem 1.05rem 1.05rem;
    box-shadow: var(--metro-shadow-sm);
}

.wo-send-review__step-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.wo-send-review__step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 750;
    color: #fff;
    background: var(--metro-text);
}

.wo-send-review__step-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.wo-send-review__step-meta {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--metro-text-muted);
}

.wo-send-review__step-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wo-send-review__edited {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--metro-warning);
    background: color-mix(in srgb, var(--metro-warning) 12%, transparent);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

.wo-send-review__reset {
    font-size: 0.8rem;
    padding: 0.15rem 0.35rem;
    text-decoration: none;
}

/* Contacts */
.wo-send-review__empty-contacts {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1px dashed var(--metro-border-strong);
    border-radius: 0.75rem;
    background: var(--metro-surface-raised);
    margin-bottom: 0.85rem;
}

.wo-send-review__empty-contacts > i {
    font-size: 1.5rem;
    color: var(--metro-text-muted);
}

.wo-send-review__contacts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.wo-send-review__contact {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "avatar main"
        "avatar channels";
    column-gap: 0.7rem;
    row-gap: 0.45rem;
    padding: 0.75rem 0.8rem 0.7rem;
    border: 1.5px solid var(--metro-border);
    border-radius: 0.8rem;
    background: var(--metro-surface);
    cursor: pointer;
    transition:
        border-color var(--duration-ui) var(--ease-out),
        box-shadow var(--duration-ui) var(--ease-out),
        background-color var(--duration-ui) var(--ease-out),
        transform var(--duration-press) var(--ease-out);
    margin: 0;
}

@media (hover: hover) {
    .wo-send-review__contact:hover {
        border-color: var(--metro-border-strong);
        box-shadow: var(--metro-shadow-sm);
        transform: translateY(-1px);
    }
}

.wo-send-review__contact.is-selected {
    border-color: var(--metro-primary);
    background: color-mix(in srgb, var(--metro-primary) 6%, var(--metro-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--metro-primary) 14%, transparent);
}

.wo-send-review__contact.is-disabled {
    opacity: 0.65;
    cursor: default;
}

.wo-send-review__contact-check {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    margin: 0;
    width: 1.15rem;
    height: 1.15rem;
    cursor: inherit;
}

.wo-send-review__contact-avatar {
    grid-area: avatar;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 750;
    color: var(--metro-primary-dark);
    background: color-mix(in srgb, var(--metro-primary) 14%, transparent);
    align-self: start;
}

.wo-send-review__contact.is-selected .wo-send-review__contact-avatar {
    color: #fff;
    background: var(--metro-primary);
}

.wo-send-review__contact-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    padding-right: 1.5rem;
}

.wo-send-review__contact-name {
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wo-send-review__contact-role {
    font-size: 0.72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--metro-text-muted);
}

.wo-send-review__contact-line {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--metro-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.15rem;
}

.wo-send-review__contact-line > i {
    color: var(--metro-text-muted);
    flex: 0 0 auto;
}

.wo-send-review__contact-line.is-muted {
    color: var(--metro-text-muted);
    font-style: italic;
}

.wo-send-review__contact-channels {
    grid-area: channels;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.wo-send-review__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.wo-send-review__chip.is-email {
    color: var(--metro-primary-dark);
    background: color-mix(in srgb, var(--metro-primary) 12%, transparent);
}

.wo-send-review__chip.is-sms {
    color: #046c4e;
    background: color-mix(in srgb, var(--metro-info) 16%, transparent);
}

.wo-send-review__chip.is-off {
    color: var(--metro-text-muted);
    background: var(--metro-surface-muted);
    border: 1px dashed var(--metro-border-strong);
}

.wo-send-review__add {
    margin-bottom: 0.75rem;
}

.wo-send-review__manual-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.wo-send-review__manual {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--metro-text);
    background: var(--metro-surface-muted);
    border: 1px solid var(--metro-border);
}

.wo-send-review__manual > i {
    color: var(--metro-primary);
}

.wo-send-review__manual-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--metro-text-muted);
    font-size: 0.65rem;
}

.wo-send-review__manual-remove:hover {
    background: color-mix(in srgb, var(--metro-danger) 12%, transparent);
    color: var(--metro-danger);
}

.wo-send-review__switch {
    padding: 0.75rem 0.85rem 0.75rem 3.1rem;
    border: 1px solid var(--metro-border);
    border-radius: 0.75rem;
    background: var(--metro-surface-raised);
    margin: 0;
}

.wo-send-review__switch .form-check-input {
    margin-left: -2.5rem;
    margin-top: 0.3rem;
    width: 2.1rem;
    height: 1.15rem;
}

.wo-send-review__switch-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--metro-text-muted);
    margin-top: 0.1rem;
}

/* Portal setup code prompt (recipients without a portal) */
.wo-send-review__portal-choices {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.wo-send-review__portal-choice {
    padding: 0.85rem 1rem;
    border: 1px solid var(--metro-border);
    border-radius: 0.75rem;
    background: var(--metro-surface-raised);
}

.wo-send-review__portal-choice.is-unset {
    border-color: var(--metro-warning, #c9a227);
}

.wo-send-review__portal-choice-who {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.65rem;
}

.wo-send-review__portal-choice-options {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.wo-send-review__portal-opt {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    cursor: pointer;
}

.wo-send-review__portal-opt input {
    margin-top: 0.2rem;
}

.wo-send-review__portal-opt.is-suggested {
    padding: 0.4rem 0.55rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--metro-primary, #0d6efd) 8%, transparent);
}

.wo-send-review__portal-other {
    margin-top: 0.25rem;
    padding-left: 1.4rem;
}

/* Message */
.wo-send-review__subject {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.wo-send-review__editor .rt-editor {
    background: var(--metro-surface);
}

.wo-send-review__sms {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--metro-border-strong);
}

.wo-send-review__sms-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.wo-send-review__sms-title {
    font-weight: 700;
    font-size: 0.92rem;
}

.wo-send-review__sms-kicker {
    font-size: 0.75rem;
    color: var(--metro-text-muted);
}

.wo-send-review__sms-input {
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Preview column */
.wo-send-review__preview {
    min-width: 0;
}

.wo-send-review__preview .wo-send-review__step-head {
    margin-bottom: 0.6rem;
}

.wo-send-review__reader {
    padding: 1rem 1.1rem;
    font-size: 0.92rem;
    line-height: 1.55;
}

.wo-send-review__reader img {
    max-width: 100%;
    height: auto;
}

/* Footer */
.wo-send-review__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
}

.wo-send-review__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
}

.wo-send-review__sum {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--metro-text);
    background: var(--metro-surface-muted);
    border: 1px solid var(--metro-border);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wo-send-review__sum > i {
    color: var(--metro-primary);
}

.wo-send-review__sum.is-warn {
    color: var(--metro-warning);
    border-color: color-mix(in srgb, var(--metro-warning) 40%, transparent);
    background: color-mix(in srgb, var(--metro-warning) 10%, transparent);
}

.wo-send-review__sum.is-warn > i {
    color: var(--metro-warning);
}

.wo-send-review__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.wo-send-review__send {
    padding-inline: 1.15rem;
    font-weight: 650;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--metro-primary) 28%, transparent);
}

/* Receipt */
.wo-send-review__receipt {
    max-width: 34rem;
    margin: 1.5rem auto 1rem;
    text-align: center;
}

.wo-send-review__receipt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 999px;
    font-size: 2.1rem;
    color: #fff;
    background: linear-gradient(145deg, var(--metro-success), #0e9f6e);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--metro-success) 32%, transparent);
    animation: wo-send-review-pop 420ms var(--ease-out);
}

.wo-send-review__receipt-icon.is-partial {
    background: linear-gradient(145deg, var(--metro-warning), #e3a008);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--metro-warning) 32%, transparent);
}

@keyframes wo-send-review-pop {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

.wo-send-review__receipt-title {
    margin: 0.9rem 0 0.25rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.wo-send-review__receipt-lede {
    color: var(--metro-text-muted);
    margin-bottom: 1rem;
}

.wo-send-review__receipt-list {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

.wo-send-review__receipt-list > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--metro-border);
    border-radius: 0.7rem;
    background: var(--metro-surface);
}

.wo-send-review__receipt-list > li > i {
    color: var(--metro-success);
}

.wo-send-review__receipt-name {
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wo-send-review__receipt-addr {
    font-size: 0.8rem;
    color: var(--metro-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem;
}

.wo-send-review__receipt-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.85rem;
    color: var(--metro-text-muted);
}

.wo-send-review__receipt-note {
    margin: 0.9rem 0 0;
    font-size: 0.8rem;
    color: var(--metro-text-muted);
}

/* ── "What they’ll see" device preview ───────────────────────────── */
.comm-preview {
    border: 1px solid var(--metro-border);
    border-radius: 0.9rem;
    background: var(--metro-surface);
    box-shadow: var(--metro-shadow-sm);
    overflow: hidden;
}

.comm-preview__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--metro-border);
    background: var(--metro-surface-raised);
}

.comm-preview__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--metro-text);
    margin-right: auto;
}

.comm-preview__kicker > i {
    color: var(--metro-primary);
}

.comm-preview__spinner {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 0.15em;
    color: var(--metro-text-muted);
}

.comm-preview__tabs,
.comm-preview__modes {
    display: inline-flex;
    padding: 0.15rem;
    border-radius: 999px;
    background: var(--metro-surface-muted);
    border: 1px solid var(--metro-border);
}

.comm-preview__tab,
.comm-preview__mode {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.9rem;
    padding: 0.2rem 0.7rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--metro-text-muted);
    font-size: 0.78rem;
    font-weight: 650;
    transition:
        background-color var(--duration-ui) var(--ease-out),
        color var(--duration-ui) var(--ease-out),
        box-shadow var(--duration-ui) var(--ease-out);
}

.comm-preview__tab.is-active,
.comm-preview__mode.is-active {
    color: var(--metro-text);
    background: var(--metro-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.comm-preview__tab.is-active {
    color: #fff;
    background: var(--metro-primary);
}

.comm-preview__hint {
    padding: 0.5rem 0.85rem 0;
    font-size: 0.78rem;
    color: var(--metro-text-muted);
}

.comm-preview__stage {
    padding: 0.9rem;
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--metro-primary) 8%, transparent), transparent 55%),
        var(--metro-surface-muted);
}

.comm-preview__client {
    border: 1px solid var(--metro-border);
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    transition: width var(--duration-drawer) var(--ease-drawer);
}

.comm-preview__stage.is-phone {
    display: flex;
    justify-content: center;
}

.comm-preview__stage.is-phone .comm-preview__client {
    width: 390px;
    max-width: 100%;
    border-radius: 2rem;
    border: 10px solid #111827;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.28);
}

.comm-preview__envelope {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.9rem 0.5rem;
    color: #111827;
}

.comm-preview__avatar,
.comm-preview__phone-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 750;
    color: #fff;
    background: linear-gradient(145deg, var(--metro-primary), #7c3aed);
}

.comm-preview__envelope-lines {
    min-width: 0;
    font-size: 0.85rem;
    line-height: 1.35;
}

.comm-preview__from {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-preview__addr {
    color: #667085;
    font-size: 0.78rem;
    margin-left: 0.25rem;
}

.comm-preview__to {
    color: #667085;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-preview__to-label {
    color: #98a2b3;
}

.comm-preview__stamp {
    font-size: 0.75rem;
    color: #98a2b3;
    align-self: start;
}

.comm-preview__subject {
    padding: 0 0.9rem 0.6rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111827;
    line-height: 1.3;
}

.comm-preview__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 0.9rem 0.65rem;
}

.comm-preview__attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.76rem;
    font-weight: 650;
    color: #1f2937;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-preview__attachment > i {
    color: var(--metro-primary);
}

.comm-preview__frame {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
    border-top: 1px solid #e5e7eb;
    background: #eef1f4;
}

.comm-preview__stage.is-phone .comm-preview__frame {
    height: 560px;
}

.comm-preview__reader {
    border-top: 1px solid #e5e7eb;
    color: #111827;
    max-height: 460px;
    overflow: auto;
}

.comm-preview__empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #667085;
    font-size: 0.9rem;
    border-top: 1px solid #e5e7eb;
}

/* Phone (SMS) */
.comm-preview__phone {
    width: 340px;
    max-width: 100%;
    border-radius: 2rem;
    border: 10px solid #111827;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.28);
    color: #111827;
}

.comm-preview__phone-status {
    display: flex;
    justify-content: space-between;
    padding: 0.45rem 1rem 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.comm-preview__phone-sender {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem 0.65rem;
    border-bottom: 1px solid #e5e7eb;
}

.comm-preview__phone-sender-name {
    font-size: 0.8rem;
    font-weight: 650;
}

.comm-preview__thread {
    padding: 0.85rem 0.85rem 1.1rem;
    min-height: 13rem;
    background: #fff;
}

.comm-preview__thread-day {
    text-align: center;
    font-size: 0.7rem;
    color: #98a2b3;
    margin-bottom: 0.6rem;
}

.comm-preview__bubble {
    max-width: 88%;
    padding: 0.6rem 0.8rem;
    border-radius: 1.1rem 1.1rem 1.1rem 0.3rem;
    background: #e9e9eb;
    color: #111827;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.comm-preview__bubble.is-empty {
    color: #98a2b3;
    font-style: italic;
}

.comm-preview__bubble-meta {
    margin-top: 0.3rem;
    font-size: 0.68rem;
    color: #98a2b3;
}

.comm-preview__stage.is-phone .comm-preview__phone {
    margin: 0 auto;
}

.comm-preview__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1rem;
    width: 100%;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--metro-text-muted);
}

.comm-preview__stage.is-phone {
    flex-wrap: wrap;
}

.comm-preview__fact {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-preview__fact > i {
    color: var(--metro-primary);
}

@media (max-width: 575.98px) {
    .wo-send-review__header { padding: 0.9rem 1rem 0.75rem; }
    .wo-send-review__title-block { gap: 0.65rem; }
    .wo-send-review__icon { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; border-radius: 0.7rem; }
    .wo-send-review__kind { display: none; }
    .wo-send-review__lede { font-size: 0.8rem; }
    .wo-send-review__body { padding: 0.75rem 0.75rem 1rem; }
    .wo-send-review__step { padding: 0.85rem 0.85rem 0.9rem; }
    .comm-preview__frame { height: 380px; }
    .comm-preview__stage.is-phone .comm-preview__frame { height: 480px; }
    .comm-preview__stage.is-phone .comm-preview__client,
    .comm-preview__phone { border-width: 6px; border-radius: 1.4rem; }
    .wo-send-review__footer { flex-direction: column; align-items: stretch; }
    .wo-send-review__actions { margin-left: 0; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    .wo-send-review__receipt-icon { animation: none; }
    .wo-send-review__contact,
    .wo-send-review__contact:hover { transition: none; transform: none; }
    .comm-preview__client { transition: none; }
}

/* Dark theme: chrome follows tokens; the email itself stays light because that is what the recipient gets. */
:root[data-theme="dark"] .wo-send-review__step-num { color: #0b0b0d; background: var(--metro-text); }
:root[data-theme="dark"] .wo-send-review__kind { color: var(--metro-primary-text); background: rgba(var(--bs-primary-rgb), 0.28); }
:root[data-theme="dark"] .wo-send-review__contact-avatar { color: var(--metro-primary-text); background: rgba(var(--bs-primary-rgb), 0.28); }
:root[data-theme="dark"] .wo-send-review__contact.is-selected { background: color-mix(in srgb, var(--metro-primary) 16%, var(--metro-surface)); }
:root[data-theme="dark"] .wo-send-review__chip.is-email { color: var(--metro-primary-text); background: rgba(var(--bs-primary-rgb), 0.28); }
:root[data-theme="dark"] .wo-send-review__chip.is-sms { color: #7ee2b8; background: rgba(14, 159, 110, 0.26); }
:root[data-theme="dark"] .comm-preview__tab.is-active,
:root[data-theme="dark"] .comm-preview__mode.is-active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .comm-preview__stage.is-phone .comm-preview__client,
:root[data-theme="dark"] .comm-preview__phone { border-color: #3f3f4a; }

/* ============================================================
   Document studio pages (letter builder, letterhead designer)
   Shares the review-before-send look: hero header with accent bar,
   numbered step cards, kicker bars, chips, collapsible groups.
   ============================================================ */

.doc-studio__hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    padding: 1.1rem 1.25rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--metro-border-strong);
    border-radius: 0.9rem;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, var(--metro-surface) 100%);
    box-shadow: var(--metro-shadow-sm);
    overflow: hidden;
}

.doc-studio__hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--metro-primary) 0%, #22a1ff 55%, var(--metro-info) 100%);
}

.doc-studio__hero--sticky {
    position: sticky;
    top: 0.5rem;
    z-index: 20;
}

.doc-studio__hero-main {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
    flex: 1 1 22rem;
}

.doc-studio__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(145deg, var(--metro-primary), var(--metro-primary-dark));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--metro-primary) 30%, transparent);
}

.doc-studio__icon--letter {
    background: linear-gradient(145deg, #7c3aed, #5b21b6);
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.3);
}

.doc-studio__icon--letterhead {
    background: linear-gradient(145deg, #0e9f6e, #046c4e);
    box-shadow: 0 8px 18px rgba(14, 159, 110, 0.3);
}

.doc-studio__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.doc-studio__lede {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--metro-text-muted);
    line-height: 1.45;
    max-width: 62ch;
}

.doc-studio__hero-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    flex: 0 1 auto;
    max-width: 100%;
}

.doc-studio__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* Draft letters: status pill, action bar and Delete share one wrapping row instead of three stacked rows. */
.doc-studio__hero-end--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    flex: 1 1 100%;
}

.doc-studio__hero-end--row .doc-studio__pills { margin-right: auto; }

.doc-studio__hero-end--row .doc-studio__actions:empty { display: none; }

.doc-studio__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--metro-primary-dark);
    background: color-mix(in srgb, var(--metro-primary) 12%, transparent);
    white-space: nowrap;
}

.doc-studio__pill--done {
    color: #046c4e;
    background: color-mix(in srgb, var(--metro-info) 16%, transparent);
}

.doc-studio__pill--dark {
    color: #fff;
    background: var(--metro-text);
}

.doc-studio__pill--warn {
    color: var(--metro-warning);
    background: color-mix(in srgb, var(--metro-warning) 12%, transparent);
}

.doc-studio__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.doc-studio__actions .btn-primary {
    font-weight: 650;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--metro-primary) 28%, transparent);
}

.doc-studio__actions .btn-link {
    text-decoration: none;
}

/* Layout */
.doc-studio__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

@media (min-width: 992px) {
    .doc-studio__grid {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 46%);
    }

    .doc-studio__aside {
        position: sticky;
        top: 1rem;
    }
}

.doc-studio__main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.doc-studio__aside {
    min-width: 0;
}

/* Step cards */
.doc-studio__step {
    background: var(--metro-surface);
    border: 1px solid var(--metro-border);
    border-radius: 0.9rem;
    padding: 1rem 1.05rem 1.05rem;
    box-shadow: var(--metro-shadow-sm);
}

.doc-studio__step--flush {
    padding: 0;
    overflow: hidden;
}

.doc-studio__step-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.doc-studio__step--flush > .doc-studio__step-head {
    padding: 0.85rem 1.05rem 0;
}

.doc-studio__step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 750;
    color: #fff;
    background: var(--metro-text);
}

.doc-studio__step-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.doc-studio__step-meta {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--metro-text-muted);
}

.doc-studio__step-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.doc-studio__edited {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--metro-warning);
    background: color-mix(in srgb, var(--metro-warning) 12%, transparent);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

.doc-studio__hint {
    font-size: 0.8rem;
    color: var(--metro-text-muted);
}

/* Kicker bar used above previews and canvases */
.doc-studio__kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--metro-border);
    border-bottom: 0;
    border-radius: 0.9rem 0.9rem 0 0;
    background: var(--metro-surface-raised);
    font-weight: 700;
    font-size: 0.85rem;
}

.doc-studio__kicker > i {
    color: var(--metro-primary);
}

.doc-studio__kicker-meta {
    margin-left: auto;
    font-weight: 500;
    font-size: 0.78rem;
    color: var(--metro-text-muted);
}

.doc-studio__kicker + .letter-pdf-preview-pane,
.doc-studio__kicker + .letter-pdf-preview-panel {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Collapsible groups (native details) */
.doc-studio__group {
    border: 1px solid var(--metro-border);
    border-radius: 0.75rem;
    background: var(--metro-surface);
    margin-bottom: 0.6rem;
}

.doc-studio__group > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    font-weight: 650;
    font-size: 0.9rem;
    border-radius: 0.75rem;
    user-select: none;
}

.doc-studio__group > summary::-webkit-details-marker {
    display: none;
}

.doc-studio__group > summary > i:first-child {
    color: var(--metro-primary);
    width: 1.1rem;
    text-align: center;
}

.doc-studio__group-meta {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--metro-text-muted);
}

.doc-studio__group > summary::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.25rem;
    border-right: 2px solid var(--metro-text-muted);
    border-bottom: 2px solid var(--metro-text-muted);
    transform: rotate(-45deg);
    transition: transform var(--duration-ui) var(--ease-out);
    flex: 0 0 auto;
}

.doc-studio__group[open] > summary::after {
    transform: rotate(45deg);
}

.doc-studio__group[open] > summary {
    border-bottom: 1px solid var(--metro-border);
    border-radius: 0.75rem 0.75rem 0 0;
    background: var(--metro-surface-raised);
}

@media (hover: hover) {
    .doc-studio__group > summary:hover {
        background: var(--metro-hover);
    }
}

.doc-studio__group-body {
    padding: 0.85rem 0.85rem 0.95rem;
}

/* Choice cards (photos, presets) */
.doc-studio__choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}

.doc-studio__choice {
    position: relative;
    display: block;
    margin: 0;
    padding: 0.55rem;
    border: 1.5px solid var(--metro-border);
    border-radius: 0.8rem;
    background: var(--metro-surface);
    cursor: pointer;
    transition:
        border-color var(--duration-ui) var(--ease-out),
        box-shadow var(--duration-ui) var(--ease-out),
        transform var(--duration-press) var(--ease-out);
}

@media (hover: hover) {
    .doc-studio__choice:hover {
        border-color: var(--metro-border-strong);
        box-shadow: var(--metro-shadow-sm);
        transform: translateY(-1px);
    }
}

.doc-studio__choice.is-selected {
    border-color: var(--metro-primary);
    background: color-mix(in srgb, var(--metro-primary) 6%, var(--metro-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--metro-primary) 14%, transparent);
}

.doc-studio__choice.is-disabled {
    opacity: 0.55;
    cursor: default;
}

.doc-studio__choice-check {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    z-index: 1;
    margin: 0;
    width: 1.15rem;
    height: 1.15rem;
}

.doc-studio__choice-thumb {
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--metro-surface-muted);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.doc-studio__choice-label {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-studio__choice-sub {
    display: block;
    font-size: 0.72rem;
    color: var(--metro-text-muted);
}

/* Preset chips */
.doc-studio__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.doc-studio__preset {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--metro-border);
    border-radius: 999px;
    background: var(--metro-surface);
    color: var(--metro-text);
    font-size: 0.78rem;
    font-weight: 650;
    transition:
        border-color var(--duration-ui) var(--ease-out),
        background-color var(--duration-ui) var(--ease-out);
}

@media (hover: hover) {
    .doc-studio__preset:hover {
        border-color: var(--metro-primary);
        background: color-mix(in srgb, var(--metro-primary) 8%, var(--metro-surface));
    }
}

.doc-studio__preset--primary {
    border-color: var(--metro-primary);
    color: var(--metro-primary-dark);
    background: color-mix(in srgb, var(--metro-primary) 10%, transparent);
}

/* Tool buttons (add element) */
.doc-studio__tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.doc-studio__tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.55rem 0.35rem;
    border: 1px solid var(--metro-border);
    border-radius: 0.7rem;
    background: var(--metro-surface);
    color: var(--metro-text);
    font-size: 0.74rem;
    font-weight: 650;
    transition:
        border-color var(--duration-ui) var(--ease-out),
        background-color var(--duration-ui) var(--ease-out),
        transform var(--duration-press) var(--ease-out);
}

.doc-studio__tool > i {
    font-size: 1.15rem;
    color: var(--metro-primary);
}

@media (hover: hover) {
    .doc-studio__tool:hover {
        border-color: var(--metro-primary);
        background: color-mix(in srgb, var(--metro-primary) 6%, var(--metro-surface));
        transform: translateY(-1px);
    }
}

/* Layer list */
.doc-studio__layers {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.doc-studio__layer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--metro-border);
    border-radius: 0.6rem;
    background: var(--metro-surface);
    color: var(--metro-text);
    font-size: 0.82rem;
    text-align: left;
    transition:
        border-color var(--duration-ui) var(--ease-out),
        background-color var(--duration-ui) var(--ease-out);
}

.doc-studio__layer > i {
    color: var(--metro-text-muted);
    width: 1rem;
    text-align: center;
}

.doc-studio__layer-pos {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--metro-text-muted);
    font-variant-numeric: tabular-nums;
}

.doc-studio__layer.is-active {
    border-color: var(--metro-primary);
    background: color-mix(in srgb, var(--metro-primary) 8%, var(--metro-surface));
    font-weight: 650;
}

.doc-studio__layer.is-active > i {
    color: var(--metro-primary);
}

.doc-studio__section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--metro-text-muted);
    margin: 0 0 0.5rem;
}

/* Empty preview state */
.doc-studio__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--metro-text-muted);
    border: 1px dashed var(--metro-border-strong);
    border-radius: 0 0 0.9rem 0.9rem;
    background: var(--metro-surface-raised);
}

.doc-studio__empty > i {
    font-size: 2rem;
    color: var(--metro-primary);
}

/* Narrow screens: the draft action row wraps left-aligned under the status pill instead of ragged-right. */
@media (max-width: 991.98px) {
    .doc-studio__hero-end--row { justify-content: flex-start; }
    .doc-studio__hero-end--row .doc-studio__pills { flex-basis: 100%; margin-right: 0; justify-content: flex-start; }
    .doc-studio__hero-end--row .doc-studio__actions { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
    .doc-studio__hero { padding: 0.9rem 1rem 0.85rem; }
    .doc-studio__icon { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; border-radius: 0.7rem; }
    .doc-studio__title { font-size: 1.1rem; }
    .doc-studio__hero-end { align-items: stretch; width: 100%; }
    .doc-studio__pills { justify-content: flex-start; }
    .doc-studio__actions { justify-content: flex-start; }
    .doc-studio__step { padding: 0.85rem 0.85rem 0.9rem; }
    .doc-studio__hero--sticky { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    .doc-studio__choice,
    .doc-studio__choice:hover,
    .doc-studio__tool,
    .doc-studio__tool:hover { transition: none; transform: none; }
}

:root[data-theme="dark"] .doc-studio__hero { background: var(--metro-surface); }
:root[data-theme="dark"] .doc-studio__step-num { color: #0b0b0d; background: var(--metro-text); }
:root[data-theme="dark"] .doc-studio__pill { color: var(--metro-primary-text); background: rgba(var(--bs-primary-rgb), 0.28); }
:root[data-theme="dark"] .doc-studio__pill--done { color: #7ee2b8; background: rgba(14, 159, 110, 0.26); }
:root[data-theme="dark"] .doc-studio__pill--dark { color: #0b0b0d; background: var(--metro-text); }
:root[data-theme="dark"] .doc-studio__preset--primary { color: var(--metro-primary-text); }
:root[data-theme="dark"] .doc-studio__choice.is-selected { background: color-mix(in srgb, var(--metro-primary) 16%, var(--metro-surface)); }

.metro-urgency-pulse {
    animation: metro-urgency-pulse 1.6s var(--ease-out, ease) infinite;
}
@keyframes metro-urgency-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--metro-danger, #c81e1e) 35%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--metro-danger, #c81e1e) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .metro-urgency-pulse { animation: none; }
}

.citizen-wo-chat__bubble {
    max-width: 85%;
}

.citizen-wo-chat__bubble--citizen {
    background: var(--metro-primary);
    color: #fff;
}

.citizen-wo-chat__bubble--staff {
    background: #f0f0f0;
    color: var(--metro-text);
}

.citizen-wo-chat__author {
    font-size: 0.9375em;
}

.citizen-wo-chat__timestamp {
    font-size: 0.875em;
    opacity: 0.75;
}

.metro-layout.metro-layout-density-compact .table {
    font-size: 0.875rem;
}

.metro-layout.metro-layout-density-compact .table > :not(caption) > * > * {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.create-wo-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 1015;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] .topbar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%),
        color-mix(in srgb, var(--metro-surface) 90%, transparent);
    border-bottom-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

:root[data-theme="dark"] .topbar-toggle,
:root[data-theme="dark"] .topbar-account-btn,
:root[data-theme="dark"] .topbar-user-role {
    color: var(--metro-text-muted);
}

:root[data-theme="dark"] .kpi-card,
:root[data-theme="dark"] .metro-card,
:root[data-theme="dark"] .role-editor-preset-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%),
        var(--metro-surface);
    border-color: var(--metro-border);
    box-shadow: var(--metro-shadow-sm);
}

@media (hover: hover) and (pointer: fine) {
    :root[data-theme="dark"] .kpi-card:hover,
    :root[data-theme="dark"] .metro-card:hover,
    :root[data-theme="dark"] .role-editor-preset-card:hover {
        border-color: var(--metro-border-strong);
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.52), 0 6px 16px rgba(0, 0, 0, 0.34);
    }
}

:root[data-theme="dark"] .global-search-dropdown,
:root[data-theme="dark"] .metro-map-detail-sheet,
:root[data-theme="dark"] .create-wo-sticky-footer {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%),
        var(--metro-surface-float);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .leaflet-popup-content,
:root[data-theme="dark"] .metro-map-popup,
:root[data-theme="dark"] .metro-map-popup-desc {
    color: var(--bs-body-color);
}

:root[data-theme="dark"] .metro-map-alert-addr-label {
    color: var(--bs-secondary-color, #adb5bd);
}

:root[data-theme="dark"] .metro-map-alert-addr-list {
    background: var(--metro-surface, #1e2430);
    color: var(--bs-body-color);
    border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .metro-map-loading-panel {
    background: var(--metro-surface, #1e2430) !important;
}

:root[data-theme="dark"] .metro-map-draw-hint {
    background: var(--metro-surface, #1e2430);
    color: var(--bs-body-color);
    border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .metro-map-toolbar-btn {
    background: var(--metro-surface-float, #1e2430);
    border-color: rgba(255, 255, 255, 0.12);
    color: #9ec5ff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] .metro-map-toolbar-btn .bi {
    opacity: 1;
}

:root[data-theme="dark"] .metro-map-cluster {
    border-color: var(--metro-surface-float, #1e2430);
}

:root[data-theme="dark"] .metro-map-address-search-status,
:root[data-theme="dark"] .metro-map-address-search--overlay .input-group,
:root[data-theme="dark"] .metro-map-address-search-results {
    background: var(--metro-surface-float, #1e2430);
    color: var(--bs-body-color);
}

:root[data-theme="dark"] .metro-map-expanded-header {
    background: var(--metro-city-primary, #1a56db) !important;
}

/* Leaflet.draw — Metro chrome sizes; keep spritesheet icons (do not clear background-image). */
.leaflet-draw-toolbar a {
    min-width: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    background-color: var(--metro-surface, #fff) !important;
    border-color: var(--metro-border, #dee2e6) !important;
    /* leaflet.draw.css supplies spritesheet.png / .svg — preserve background-size from that sheet */
    background-size: 300px 30px !important;
    background-repeat: no-repeat !important;
}

.leaflet-draw-actions a {
    min-width: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    background-color: var(--metro-city-primary, #1a56db) !important;
    border-color: var(--metro-city-primary, #1a56db) !important;
    color: #fff !important;
    background-image: none !important;
    font-weight: 600;
}

.leaflet-draw-toolbar a:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
}

.leaflet-draw-actions a:hover {
    background-color: var(--metro-city-primary, #1a56db) !important;
    filter: brightness(1.08);
}

/* Light draw chrome in dark theme so the dark spritesheet icons stay visible */
:root[data-theme="dark"] .leaflet-draw-toolbar a {
    background-color: #f1f3f5 !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

:root[data-theme="dark"] .leaflet-draw-actions a {
    background-color: var(--metro-city-primary, #6ea8fe) !important;
    border-color: var(--metro-city-primary, #6ea8fe) !important;
    color: #0b1220 !important;
}

:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip {
    background: var(--metro-surface-float, #1e2430);
    color: var(--bs-body-color);
}

:root[data-theme="dark"] .global-search-dropdown {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.46);
}

:root[data-theme="dark"] .create-wo-sticky-footer {
    box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.42);
}

.portal-layout.portal-high-contrast {
    --bs-body-bg: #fff;
    --bs-body-color: #000;
    font-size: 1.05rem;
}

.portal-layout.portal-high-contrast .btn {
    font-weight: 600;
}

:root {
    --metro-city-primary: var(--metro-primary, #1a56db);
    --metro-city-sidebar-accent: var(--metro-sidebar-active, #1a56db);
}

/* Fleet management dashboard */
.fleet-dashboard-page .fleet-dash-hero {
    background: linear-gradient(135deg, var(--metro-surface-muted) 0%, var(--metro-surface) 100%);
    border: 1px solid var(--metro-border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
}

.fleet-dashboard-page .fleet-dash-kpi {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fleet-dashboard-page .fleet-dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.08) !important;
}

.fleet-dashboard-page .fleet-dash-kpi-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--metro-surface-muted);
    margin-bottom: 0.35rem;
    font-size: 1.1rem;
}

.fleet-dashboard-page .fleet-dash-kpi-alert {
    border-left: 3px solid var(--bs-warning) !important;
}

.fleet-dashboard-page .fleet-section-empty,
.fleet-dashboard-page .fleet-my-unit-card .fleet-section-empty {
    border: 1px dashed var(--metro-border);
    border-radius: 0.75rem;
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--metro-text-muted);
}

.fleet-dashboard-page .fleet-my-unit-card {
    transition: box-shadow 0.15s ease;
}

.fleet-dashboard-page .fleet-my-unit-card:hover {
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.08) !important;
}

.fleet-dashboard-page .fleet-quick-actions .btn {
    justify-content: flex-start;
}

.fleet-dashboard-page .fleet-widget-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Fleet vehicle detail */
.fleet-detail-page .fleet-at-a-glance .fleet-stat {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--metro-border);
}

.fleet-detail-page .fleet-at-a-glance .fleet-stat:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fleet-detail-page .fleet-at-a-glance .fleet-stat-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--metro-surface-muted);
    color: var(--metro-primary);
    flex-shrink: 0;
}

.fleet-detail-page .fleet-profile-tabs .nav-link {
    font-size: 0.8125rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
}

.fleet-detail-page .fleet-profile-tab-panel {
    padding-top: 0.25rem;
}

.fleet-detail-page .fleet-section-empty {
    border: 1px dashed var(--metro-border);
    border-radius: 0.75rem;
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--metro-text-muted);
}

.fleet-detail-page .fleet-quick-actions .btn {
    justify-content: flex-start;
}

.fleet-detail-page .fleet-profile-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--metro-surface);
    border-top: 1px solid var(--metro-border);
    margin: 0 -1rem -1rem;
    padding: 0.75rem 1rem;
    border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

/* ── Accessibility ───────────────────────────────────────────── */
.accessibility-quick-toggles__menu {
    min-width: 13.5rem;
    z-index: 1080;
}

.accessibility-quick-toggles__option {
    display: flex;
    align-items: center;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
    padding: 0.5rem 1rem;
    background: var(--metro-surface);
    color: var(--metro-text);
    border: 2px solid var(--metro-primary);
    border-radius: 0.25rem;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    position: fixed;
    left: 0.75rem;
    top: 0.75rem;
    width: auto;
    height: auto;
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    /* Keep opacity/color transitions for comprehension; remove transform motion */
    *,
    *::before,
    *::after {
        transition-property: opacity, color, background-color, border-color, box-shadow, filter !important;
        transition-duration: 160ms !important;
        transform: none !important;
    }

    .spinner-border,
    .metro-spinner {
        animation: none !important;
    }
}

/* User opt-in reduced motion (profile / guest localStorage) */
.metro-reduced-motion,
.metro-reduced-motion *,
.metro-reduced-motion *::before,
.metro-reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: opacity, color, background-color, border-color, box-shadow, filter !important;
    transition-duration: 160ms !important;
    transform: none !important;
}

.metro-reduced-motion .spinner-border,
.metro-reduced-motion .metro-spinner {
    animation: none !important;
}

/* Property detail — Google Maps Street View historical imagery */
.property-maps-host {
    position: relative;
    overflow: hidden;
    background: var(--metro-surface-muted);
}

.property-maps-host-inner {
    position: relative;
}

.property-maps-street-pane,
.property-maps-satellite-pane {
    width: 100%;
    height: 100%;
}

.property-maps-street-pane {
    position: relative;
}

.property-maps-street-mount {
    width: 100%;
    height: 100%;
}

.property-maps-time-travel {
    position: absolute;
    top: 0.5rem;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: rgba(34, 34, 34, 0.85);
    border-radius: 0.25rem 0 0 0.25rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.property-maps-time-travel-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

.property-maps-time-travel-select {
    min-width: 9rem;
    font-size: 0.75rem;
}

.letter-pdf-preview-pane {
    display: flex;
    flex-direction: column;
}

.letter-pdf-preview-pane__iframe {
    flex: 1 1 auto;
}

.letter-pdf-preview-pane__canvas-host {
    flex: 1 1 auto;
    padding: .75rem;
}

.letter-pdf-preview-pane__canvas-host .metro-pdf-preview-page {
    border: 1px solid rgba(0, 0, 0, .08);
}

.letter-pdf-preview-pane--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: 0 !important;
    border-width: 0 !important;
}

.letter-pdf-preview-pane--fullscreen .letter-pdf-preview-pane__iframe,
.letter-pdf-preview-pane--fullscreen .letter-pdf-preview-pane__canvas-host {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* Dedicated public e-sign page (/sign-document). */
.sign-document-page__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--metro-muted, #6c757d);
    margin-bottom: 0.25rem;
}

.sign-document-panel__doc > summary {
    cursor: pointer;
    list-style-position: outside;
}

.sign-document-panel__doc > summary:focus-visible {
    outline: 2px solid var(--metro-primary, #0d6efd);
    outline-offset: 2px;
}

/* Applicant building-permit full-screen preview (request-status e-sign). */
.bpnc-permit-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1085;
    display: flex;
    flex-direction: column;
    background: var(--metro-surface, #fff);
}

.bpnc-permit-fullscreen__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--metro-border, rgba(15, 23, 42, 0.12));
    background: var(--metro-surface, #fff);
}

.bpnc-permit-fullscreen__stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #e8ecf2;
    -webkit-overflow-scrolling: touch;
}

.bpnc-permit-fullscreen__zoom-host {
    transform-origin: top left;
    min-height: 100%;
}

.bpnc-permit-fullscreen__iframe {
    display: block;
    width: 100%;
    height: 100vh;
    min-height: 100%;
    background: #fff;
}

.report-builder-live-preview {
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
}

.report-builder-wizard-step-intro ol {
    margin-bottom: 0;
}

.report-builder-wizard-step-intro li:last-child {
    margin-bottom: 0 !important;
}

.report-builder-sidebar-ai .card-body {
    font-size: 0.8125rem;
}

.report-builder-sidebar-ai textarea {
    font-size: 0.8125rem;
}

.report-builder-stepper .badge {
    font-size: 0.7rem;
}

/* Public city services hub — clearer hover/focus on service tiles */
.city-service-link {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.city-service-link:hover,
.city-service-link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.25rem rgba(var(--bs-primary-rgb), 0.18);
    border-color: var(--metro-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.06);
}

.city-services-grid .city-service-link .fw-semibold {
    color: var(--bs-body-color);
}

.city-services-grid .city-service-link:hover .fw-semibold,
.city-services-grid .city-service-link:focus-visible .fw-semibold {
    color: var(--metro-primary);
}

/* ── WASM boot splash (hidden once Blazor is interactive) ───────── */
.metro-app-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--metro-surface);
    z-index: 12000;
}

.metro-app-loading.metro-app-loading--hidden {
    display: none;
}

/* ── Lazy WASM feature assembly load (first navigation to a module) ─ */
/* Thin indeterminate progress — MAUI nav + in-page UiBusy (non-blocking). */
.metro-top-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 12060;
    overflow: hidden;
    pointer-events: none;
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 18%, transparent);
}

.metro-top-progress__bar {
    display: block;
    height: 100%;
    width: 35%;
    border-radius: 0 2px 2px 0;
    background: var(--bs-primary, #0d6efd);
    animation: metro-top-progress-slide 1.05s ease-in-out infinite;
}

@keyframes metro-top-progress-slide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
    .metro-top-progress__bar {
        width: 100%;
        animation: none;
        opacity: 0.75;
    }
}

.mobile-bottom-nav__item.is-busy {
    opacity: 0.85;
}

.mobile-bottom-nav__item.is-busy i {
    animation: metro-dock-busy-pulse 1s ease-in-out infinite;
}

@keyframes metro-dock-busy-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav__item.is-busy i {
        animation: none;
    }
}

.metro-lazy-module-overlay {
    position: fixed;
    inset: 0;
    z-index: 11450;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--metro-shell-bg, #1e2538) 55%, transparent);
    animation: metro-lazy-module-overlay-in 0.28s ease-out forwards;
}

.metro-lazy-module-overlay__panel {
    width: 100%;
    max-width: 22rem;
    padding: 2rem 2rem 1.75rem;
    border-radius: 14px;
    background: var(--metro-surface, var(--bs-body-bg, #fff));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    animation: metro-lazy-module-panel-in 0.35s ease-out forwards;
}

.metro-lazy-module-load-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
}

@keyframes metro-lazy-module-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes metro-lazy-module-panel-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.metro-lazy-route-loading {
    position: fixed;
    top: 0.75rem;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--metro-border, #dee2e6);
    border-radius: 0.5rem;
    background: var(--metro-surface, var(--bs-body-bg, #fff));
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16);
    color: var(--metro-text, inherit);
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 11500;
    opacity: 0;
    transform: translateX(-50%) translateY(-0.35rem);
    animation: metro-lazy-route-loading-in 0.35s ease forwards;
}

.metro-lazy-route-loading--animated {
    /* Modal panel content: stack mark → title → detail → progress (base class is a horizontal toast). */
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    transform: none;
    opacity: 1;
    animation: none;
    max-width: none;
    width: 100%;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    pointer-events: auto;
}

.metro-lazy-route-loading--animated .metro-lazy-route-loading__title {
    white-space: normal;
    text-align: center;
}

.metro-lazy-route-loading--animated .metro-lazy-route-loading__detail {
    text-align: center;
    max-width: 18rem;
}

.metro-lazy-route-loading--animated .metro-lazy-route-loading__progress {
    width: 100%;
    max-width: 14rem;
}

.metro-lazy-route-loading--inline {
    position: static;
    transform: none;
    opacity: 1;
    animation: none;
    max-width: none;
    width: 100%;
    justify-content: center;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--metro-text-muted, var(--bs-secondary-color, #6c757d));
}

.metro-lazy-route-loading__spinner {
    flex-shrink: 0;
}

.metro-lazy-route-loading__label,
.metro-lazy-route-loading__title {
    white-space: nowrap;
}

.metro-lazy-route-loading__title {
    font-size: 1rem;
}

.metro-lazy-route-loading__detail {
    margin-top: 0.25rem;
    white-space: normal;
}

.metro-lazy-route-loading__mark {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
}

.metro-lazy-route-loading__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--bs-primary) 28%, transparent);
}

.metro-lazy-route-loading__ring--outer {
    animation: metro-lazy-module-ring-pulse 1.8s ease-out infinite;
}

.metro-lazy-route-loading__ring--inner {
    inset: 0.55rem;
    animation: metro-lazy-module-ring-pulse 1.8s ease-out infinite 0.45s;
}

.metro-lazy-route-loading__core {
    position: absolute;
    inset: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg, #fff));
    color: var(--bs-primary);
    font-size: 1.35rem;
    animation: metro-lazy-module-core-breathe 1.8s ease-in-out infinite;
}

.metro-lazy-route-loading__progress {
    height: 0.28rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-border-color, #dee2e6));
}

.metro-lazy-route-loading__progress-bar {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 70%, var(--metro-surface)));
    animation: metro-lazy-module-progress 1.35s ease-in-out infinite;
}

.metro-lazy-route-loading__dots {
    display: inline-block;
    width: 1.1em;
    text-align: left;
}

.metro-lazy-route-loading__dots::after {
    content: '';
    animation: metro-lazy-route-loading-dots 1.2s steps(4, end) infinite;
}

@keyframes metro-lazy-route-loading-in {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes metro-lazy-module-ring-pulse {
    0% { transform: scale(0.92); opacity: 0.35; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.08); opacity: 0.2; }
}

@keyframes metro-lazy-module-core-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes metro-lazy-module-progress {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

@keyframes metro-lazy-route-loading-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* ── Toast notifications (ToastHost) ─────────────────────────────── */
.metro-toast-container {
    position: fixed;
    right: 0.75rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(28rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    pointer-events: none;
}

.mobile-shell .metro-toast-container,
.tech-shell .metro-toast-container,
.portal-layout .metro-toast-container {
    bottom: calc(var(--mobile-bottom-h, 4.75rem) + env(safe-area-inset-bottom, 0px) + 0.75rem);
}

.metro-toast {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: var(--metro-surface, #fff);
    border: 1px solid var(--metro-border, #dee2e6);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
    font-size: 1.25rem;
    line-height: 1.45;
    color: #1c2430;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--duration-popover) var(--ease-out),
        transform var(--duration-popover) var(--ease-out);

    @starting-style {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

.metro-toast.metro-toast--exiting {
    opacity: 0;
    transform: translateY(0.35rem);
    transition-duration: 120ms;
}

.metro-toast-success {
    background: #e5f6ea;
    border-color: #1f7a45;
    color: #143d24;
}
.metro-toast-error {
    background: #fde8e6;
    border-color: #b42318;
    color: #3b1210;
}
.metro-toast-info {
    background: #e8f1fb;
    border-color: #1d4f91;
    color: #10233f;
}

.metro-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.metro-toast-text {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.45;
}

.metro-toast-title {
    font-weight: 650;
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
}

.metro-toast-action {
    flex: 0 0 auto;
    min-height: 3rem;
    padding: 0.55rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid currentColor;
    background: #fff;
    color: inherit;
    font-size: 1.125rem;
    font-weight: 650;
    line-height: 1.2;
}

.metro-toast-action:focus-visible {
    outline: 3px solid #1d4f91;
    outline-offset: 2px;
}

.metro-fix-summary {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    border: 2px solid #9a3412;
    border-radius: 0.85rem;
    background: #fff7ed;
    color: #3b1d0b;
}

.metro-fix-summary__title {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

.metro-fix-summary__list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 1.2rem;
    line-height: 1.45;
}

.metro-fix-summary__list a {
    font-weight: 700;
    color: #9a3412;
}

.metro-fix-summary__fix {
    display: block;
    font-weight: 500;
}

.metro-field-fix,
.validation-message {
    margin: 0.35rem 0 0;
    color: #9a3412;
    font-size: 1.125rem;
    line-height: 1.4;
}

.metro-save-disabled-reason {
    margin: 0.6rem 0 0;
    color: #3b1d0b;
    font-size: 1.125rem;
    line-height: 1.4;
}

.metro-crash-fallback__title {
    font-size: 1.75rem;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

.metro-crash-fallback__message {
    font-size: 1.25rem;
    line-height: 1.45;
    max-width: 40rem;
    margin-bottom: 1.25rem;
}

.metro-crash-fallback__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.metro-crash-fallback__button {
    min-height: 3rem;
    font-size: 1.125rem;
    padding: 0.6rem 1.1rem;
}

.metro-crash-fallback__phone-missing {
    margin-top: 0.9rem;
    font-size: 1.125rem;
}

:root[data-theme="dark"] .metro-toast {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%),
        var(--metro-surface-float, var(--metro-surface));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .metro-toast-success {
    background: #143d24;
    color: #e5f6ea;
    border-color: #3dbe74;
}

:root[data-theme="dark"] .metro-toast-error {
    background: #3b1210;
    color: #fde8e6;
    border-color: #f0a8a2;
}

/* ── SimpleBarChart ──────────────────────────────────────────────── */
.metro-bar-chart .metro-bar {
    width: 70%;
    max-width: 2.25rem;
    border-radius: 0.25rem 0.25rem 0 0;
    background: var(--metro-primary, #1a56db);
}

.metro-bar-chart .metro-bar-label {
    font-size: 0.7rem;
}

/* ── Payment visual aids ─────────────────────────────────────────── */
.payment-inheritance-chain .payment-chain-node {
    flex: 1 1 8rem;
    min-width: 7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: var(--bs-body-bg);
}

.payment-inheritance-chain .payment-chain-node--ok {
    border-color: rgba(var(--bs-success-rgb), 0.35);
}

.payment-inheritance-chain .payment-chain-node--primary {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.12);
}

.payment-inheritance-chain .payment-chain-node--warning {
    border-color: rgba(var(--bs-warning-rgb), 0.45);
}

.payment-inheritance-chain .payment-chain-node--muted {
    opacity: 0.85;
}

.payment-inheritance-chain .payment-chain-node--effective {
    border-color: rgba(var(--bs-success-rgb), 0.45);
    background: rgba(var(--bs-success-rgb), 0.06);
}

.payment-inheritance-chain .payment-chain-node-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.2rem;
}

.payment-inheritance-chain .payment-chain-arrow {
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
}

.payment-credential-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    font-size: 0.75rem;
}

.payment-reconciliation-bar {
    display: flex;
    height: 0.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bs-secondary-bg);
}

.payment-reconciliation-bar-segment {
    height: 100%;
    min-width: 2px;
}

.payment-reconciliation-bar-segment--matched { background: var(--bs-success); }
.payment-reconciliation-bar-segment--mismatch { background: var(--bs-warning); }
.payment-reconciliation-bar-segment--local,
.payment-reconciliation-bar-segment--vendor { background: var(--bs-danger); }

.payment-recon-legend {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    margin-right: 0.25rem;
    vertical-align: -0.05rem;
}

.payment-recon-legend--matched { background: var(--bs-success); }
.payment-recon-legend--mismatch { background: var(--bs-warning); }
.payment-recon-legend--local,
.payment-recon-legend--vendor { background: var(--bs-danger); }

.payment-method-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.payment-method-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
}

.payment-method-badge--visa { background: #1a1f71; }
.payment-method-badge--mc { background: #eb001b; }
.payment-method-badge--disc { background: #ff6000; }
.payment-method-badge--ach { background: #2d6a4f; }

/* Valor Passage.js ships light-theme label colors (#374151). Force readable contrast in app dark mode. */
[data-theme="dark"] #valor-passage-fields .passage-label,
[data-bs-theme="dark"] #valor-passage-fields .passage-label,
[data-theme="dark"] #valor-vault-fields .passage-label,
[data-bs-theme="dark"] #valor-vault-fields .passage-label {
    color: var(--bs-body-color, #e9ecef) !important;
}

[data-theme="dark"] #valor-passage-fields .passage-error,
[data-bs-theme="dark"] #valor-passage-fields .passage-error,
[data-theme="dark"] #valor-vault-fields .passage-error,
[data-bs-theme="dark"] #valor-vault-fields .passage-error {
    color: var(--bs-danger-text-emphasis, #f1aeb5) !important;
}

[data-theme="dark"] #valor-passage-fields .passage-payment-method > label,
[data-bs-theme="dark"] #valor-passage-fields .passage-payment-method > label,
[data-theme="dark"] #valor-vault-fields .passage-payment-method > label,
[data-bs-theme="dark"] #valor-vault-fields .passage-payment-method > label {
    color: inherit;
}

[data-theme="dark"] .payment-sheet-modal .modal-content,
[data-bs-theme="dark"] .payment-sheet-modal .modal-content {
    color: var(--bs-body-color, #e9ecef);
}

/* Keep Passage ACH <select> native (not metro-search-select); ensure chevron does not tile. */
#valor-passage-fields select.passage-select,
#valor-vault-fields select.passage-select {
    appearance: auto;
    -webkit-appearance: menulist;
    background-image: none;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    color: var(--metro-text);
    background-color: var(--metro-surface);
}

/* Cards only — Passage enableACH:false should omit ACH; hide any leftover toggle. */
#valor-passage-fields .passage-payment-methods,
#valor-vault-fields .passage-payment-methods {
    display: none !important;
}

/* Passage success is .passage-message.success (green). Force any APPROVAL bubble green.
   Passage often paints APPROVAL with .passage-message.error (pink); data-metro-approved
   is set by metroAsap.js after a successful Metro card-token sale. */
#valor-passage-fields .passage-success,
#valor-passage-fields .passage-approval,
#valor-passage-fields .passage-message.success,
#valor-passage-fields .passage-message.metro-approval-success,
#valor-passage-fields .metro-approval-success,
#valor-passage-fields[data-metro-approved="1"] .passage-message,
#valor-passage-fields[data-metro-approved="1"] .passage-message.error,
#valor-passage-fields[data-metro-approved="1"] .passage-error,
#valor-passage-fields [class*="approval"],
#valor-passage-fields [class*="APPROVAL"] {
    background-color: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

#valor-passage-fields .passage-success *,
#valor-passage-fields .passage-approval *,
#valor-passage-fields .passage-message.success *,
#valor-passage-fields .passage-message.metro-approval-success *,
#valor-passage-fields .metro-approval-success *,
#valor-passage-fields[data-metro-approved="1"] .passage-message *,
#valor-passage-fields[data-metro-approved="1"] .passage-message.error *,
#valor-passage-fields[data-metro-approved="1"] .passage-error *,
#valor-passage-fields [class*="approval"] *,
#valor-passage-fields [class*="APPROVAL"] * {
    color: #166534 !important;
}

.metro-search-select__button.passage-select,
.metro-search-select__button.form-select {
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

/* ── Responsive utilities (see mobile.css breakpoint tokens) ── */
.on-call-calendar-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.on-call-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    min-width: min(840px, 100%);
}

@media (max-width: 768px) {
    .on-call-calendar-grid {
        min-width: 640px;
    }
}

.import-mapping-grid th:first-child,
.import-mapping-grid td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bs-body-bg);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}

.import-mapping-grid thead th:first-child {
    background: var(--bs-light, #f8f9fa);
}

.page-body .table-responsive,
.metro-card .table-responsive,
.card .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

@media (max-width: 768px) {
    .metro-scheduler-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .metro-scheduler-scroll .table {
        min-width: 720px;
    }
}

/* Staff intranet landing */
.intranet-landing {
    margin: -1rem -1rem 0;
}

.intranet-hero {
    min-height: 280px;
    background-size: cover;
    background-position: center;
}

.intranet-hero--empty {
    min-height: 200px;
}

.intranet-landing-logo {
    max-height: 80px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.intranet-quick-link-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.intranet-quick-link-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

.intranet-quick-link-tile__icon {
    font-size: 1.75rem;
    color: var(--metro-city-primary, var(--metro-primary, #1a56db));
    margin-bottom: 0.5rem;
}

.intranet-quick-link-tile__label {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

.intranet-dept-card__icon {
    font-size: 2rem;
    color: var(--metro-city-primary, var(--metro-primary, #1a56db));
}

.intranet-bulletin-body {
    max-height: 8rem;
    overflow: hidden;
}

.intranet-dept-hero {
    min-height: 220px;
}

.intranet-landing-toolbar {
    background: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 1) 0%, rgba(var(--bs-body-bg-rgb), 0.92) 100%);
    border-bottom: 1px solid var(--bs-border-color);
}

.intranet-landing-toolbar__greeting {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.intranet-landing-toolbar__search {
    width: 100%;
    max-width: 560px;
}

.intranet-welcome-block {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
}

.intranet-dept-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.intranet-dept-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1) !important;
}

.intranet-dept-card:hover .intranet-dept-card__icon {
    transform: scale(1.08);
}

.intranet-dept-card__icon {
    transition: transform 0.18s ease;
}

.intranet-image-upload__preview {
    height: 120px;
    border-radius: 0.5rem;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--bs-border-color);
}

.intranet-home-preview__body {
    transform: scale(0.92);
    transform-origin: top center;
    pointer-events: none;
}

.intranet-bulletin--cork {
    background: linear-gradient(180deg, #f8f5f0 0%, #efe8dc 100%);
}

.intranet-cork-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background-color: #b08968;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 100%),
        radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 100%),
        linear-gradient(135deg, #a67c52 0%, #8d6e4c 100%);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    min-height: 240px;
}

.intranet-sticky-note {
    position: relative;
    background: var(--note-bg, #fff59d);
    border-radius: 2px;
    padding: 1rem 1rem 0.75rem;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.18);
    transform: rotate(-1deg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.intranet-sticky-note:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 4px 8px 18px rgba(0, 0, 0, 0.22);
    z-index: 1;
}

.intranet-sticky-note--tilt-left { transform: rotate(-2.5deg); }
.intranet-sticky-note--tilt-right { transform: rotate(2deg); }
.intranet-sticky-note--pinned { border-top: 3px solid var(--metro-city-primary, var(--metro-primary, #1a56db)); }

.intranet-sticky-note__pin {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff6b6b, #c0392b 70%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.intranet-sticky-note__badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--metro-city-primary, var(--metro-primary, #1a56db));
    margin-bottom: 0.35rem;
}

.intranet-sticky-note__title {
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.35rem;
}

.intranet-sticky-note__body {
    font-size: 0.85rem;
    line-height: 1.45;
}

.intranet-sticky-note__date {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.45);
    text-align: right;
}

.intranet-hero-carousel .carousel-item {
    transition: transform 0.8s ease-in-out;
}

.intranet-ack-alert {
    border-left: 4px solid #ffc107;
}

/* Work order type status step wizard */
.wo-status-wizard-timeline {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.wo-status-wizard-timeline__seg {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.wo-status-wizard-timeline__seg--active {
    background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg));
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    font-weight: 600;
    transform: translateY(-1px);
}
.wo-status-wizard-timeline__edge {
    width: 1.25rem;
    height: 2px;
    background: linear-gradient(90deg, var(--bs-border-color), color-mix(in srgb, var(--bs-primary) 40%, var(--bs-border-color)));
    flex-shrink: 0;
}
.wo-status-wizard-hint {
    line-height: 1.35;
}
.wo-status-wizard-body {
    min-height: 16rem;
    animation: wo-status-wizard-fade 0.22s ease;
}
@keyframes wo-status-wizard-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.wo-status-wizard-readiness {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color) !important;
}
.wo-status-wizard-readiness--ready {
    border-color: var(--bs-success) !important;
    background: color-mix(in srgb, var(--bs-success) 8%, var(--bs-body-bg));
}
.wo-status-wizard-preview {
    background: var(--bs-body-bg);
}
.wo-status-wizard-preview__bar {
    background: color-mix(in srgb, var(--bs-secondary) 8%, var(--bs-body-bg));
}
.wo-status-step-card .btn-primary {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.wo-status-step-connector {
    position: relative;
}
.wo-status-step-connector__insert {
    position: absolute;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: var(--bs-body-bg);
}
.wo-status-step-connector:hover .wo-status-step-connector__insert,
.wo-status-step-connector__insert:focus-visible {
    opacity: 1;
}
.wo-status-step-connector:hover .wo-status-step-connector__chevron {
    opacity: 0.15;
}
.wo-workflow-graph-canvas {
    min-height: 4rem;
}
.wo-workflow-graph-edge {
    padding: 0 0.35rem;
    color: var(--bs-secondary-color);
}
.wo-workflow-graph-node--selected .wo-workflow-graph-node-card {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* -- Property detail page --------------------------------------- */
.property-detail-page {
    --prop-detail-radius: 0.625rem;
}

.property-detail-page .property-detail-header {
    margin-bottom: 1rem;
}

.property-detail-page .property-detail-header h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.property-detail-page .property-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.property-detail-page .property-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 550;
    line-height: 1.2;
    background: var(--metro-surface-muted, #f3f4f6);
    color: var(--metro-text, #111827);
    border: 1px solid var(--metro-border, #e5e7eb);
}

.property-detail-page .property-detail-chip--warn {
    background: color-mix(in srgb, var(--bs-warning, #ffc107) 18%, var(--bs-body-bg, #fff));
    border-color: color-mix(in srgb, var(--bs-warning, #ffc107) 40%, var(--metro-border, #e5e7eb));
    color: var(--metro-text, #111827);
}

.property-detail-page .property-detail-chip--muted {
    color: var(--metro-text-muted, #6b7280);
    font-weight: 500;
}

.property-detail-page .property-detail-glance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--metro-border, #e5e7eb);
    border-radius: var(--prop-detail-radius);
    background: var(--metro-surface, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

@media (min-width: 576px) {
    .property-detail-page .property-detail-glance {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .property-detail-page .property-detail-glance {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.property-detail-page .property-detail-glance__item {
    min-width: 0;
}

.property-detail-page .property-detail-glance__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--metro-text-muted, #6b7280);
    margin-bottom: 0.15rem;
}

.property-detail-page .property-detail-glance__value {
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--metro-text, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-detail-page .property-detail-flow-grid {
    --dashboard-grid-gap: 0.875rem;
    align-items: stretch;
}

.property-detail-page .property-widget-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.property-detail-page .property-detail-flow-grid .dashboard-grid-item-inner > .property-section-card,
.property-detail-page .property-detail-flow-grid .dashboard-grid-item-inner > .property-detail-glance,
.property-detail-page .property-widget-stack > .property-section-card {
    margin-bottom: 0;
}

.property-detail-page .property-detail-flow-grid .dashboard-grid-item {
    scroll-margin-top: var(--detail-sticky-chrome, 8.5rem);
}

@media print {
    .page-body:has(.property-detail-page) {
        display: block;
        overflow: visible;
    }

    .property-detail-page,
    .property-detail-page__scroll {
        display: block;
        overflow: visible;
        height: auto;
        min-height: 0;
    }

    .property-detail-page .dashboard-grid-toolbar,
    .property-detail-page .dashboard-widget-library {
        display: none !important;
    }
}

.property-detail-page .property-section-card {
    border: 1px solid var(--metro-border, #e5e7eb);
    border-radius: var(--prop-detail-radius);
    background: var(--metro-surface, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-bottom: 0.85rem;
    overflow: hidden;
}

.property-detail-page .property-section-card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--metro-border, #e5e7eb);
    /* Longhands so dashboard-grid dismiss clearance can win on padding-right. */
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.property-detail-page .property-section-card > .card-header h6 {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--metro-text, #111827);
    margin: 0;
}

.property-detail-page .property-section-card > .card-body {
    padding: 0.85rem 1rem;
}

.property-detail-page .prop-kv {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    gap: 0.35rem 0.85rem;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--metro-border, #e5e7eb) 70%, transparent);
}

.property-detail-page .prop-kv:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.property-detail-page .prop-kv:first-child {
    padding-top: 0;
}

.property-detail-page .prop-kv__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--metro-text-muted, #6b7280);
    line-height: 1.35;
}

.property-detail-page .prop-kv__value {
    font-size: 0.875rem;
    font-weight: 550;
    color: var(--metro-text, #111827);
    line-height: 1.4;
    word-break: break-word;
}

.property-detail-page .prop-kv__value--mono {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
    font-weight: 500;
}

.property-detail-page .prop-group-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.property-detail-page .property-section-card .list-group-item {
    border-color: color-mix(in srgb, var(--metro-border, #e5e7eb) 80%, transparent);
}

.property-detail-page .property-section-card .table {
    --bs-table-bg: transparent;
}

.property-detail-page .property-section-card .table thead th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: var(--metro-text-muted, #6b7280);
    border-bottom-width: 1px;
}

/* Stacked record rows — readable type, tight hierarchy (replaces table-sm in section cards) */
.property-detail-page .prop-record-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.property-detail-page .prop-record-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--metro-border, #e5e7eb) 85%, transparent);
    background: transparent;
    transition: background-color 0.12s ease;
}

.property-detail-page .prop-record-row:last-child {
    border-bottom: 0;
}

.property-detail-page .prop-record-row.is-clickable {
    cursor: pointer;
}

.property-detail-page .prop-record-row.is-clickable:hover,
.property-detail-page .prop-record-row.is-clickable:focus-visible {
    background: color-mix(in srgb, var(--prop-accent, #2563eb) 6%, var(--metro-surface, #fff));
    outline: none;
}

.property-detail-page .prop-record-row__main {
    min-width: 0;
    flex: 1 1 14rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.property-detail-page .prop-record-row__topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
}

.property-detail-page .prop-record-row__id {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--metro-primary, #2563eb);
    letter-spacing: -0.01em;
    line-height: 1.3;
    word-break: break-word;
}

.property-detail-page .prop-record-row__title {
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--metro-text, #111827);
    line-height: 1.35;
}

.property-detail-page .prop-record-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.55rem;
    font-size: 0.875rem;
    color: var(--metro-text-muted, #6b7280);
    line-height: 1.4;
}

.property-detail-page .prop-record-row__meta-sep::before {
    content: "·";
    margin-right: 0.55rem;
    color: color-mix(in srgb, var(--metro-text-muted, #6b7280) 70%, transparent);
}

.property-detail-page .prop-record-row__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.property-detail-page .prop-record-row__due {
    font-size: 0.875rem;
    font-weight: 550;
    color: var(--metro-text, #111827);
    white-space: nowrap;
}

.property-detail-page .prop-record-row__due-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--metro-text-muted, #6b7280);
    display: block;
    margin-bottom: 0.1rem;
}

.property-detail-page .prop-record-filters {
    padding: 0.75rem 1.1rem 0.55rem;
}

.property-detail-page .prop-record-filters .form-label {
    font-size: 0.8125rem;
    font-weight: 550;
    margin-bottom: 0.3rem;
}

.property-detail-page .prop-record-filters .form-control {
    font-size: 0.9375rem;
    min-height: 2.25rem;
}

.property-detail-page .prop-record-empty {
    text-align: center;
    color: var(--metro-text-muted, #6b7280);
    font-size: 0.9375rem;
    padding: 1.25rem 1rem;
    margin: 0;
}

.property-detail-page .prop-record-section-label {
    font-size: 0.8125rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--metro-text-muted, #6b7280);
}

.property-detail-page .card.border-0.shadow-sm {
    border: 1px solid var(--metro-border, #e5e7eb) !important;
    border-radius: var(--prop-detail-radius, 0.625rem);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.property-detail-page .card.border-0.shadow-sm > .card-header.bg-white {
    background: transparent !important;
    border-bottom: 1px solid var(--metro-border, #e5e7eb);
}

.property-detail-page .card.border-0.shadow-sm > .card-header h6 {
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--metro-text-muted, #6b7280);
}

/* -- Citizen detail page (customizable grid) -------------------- */
.citizen-detail-page {
    --citizen-detail-radius: 0.625rem;
}

.citizen-detail-page .citizen-detail-flow-grid {
    --dashboard-grid-gap: 0.875rem;
    align-items: stretch;
}

.citizen-detail-page .citizen-detail-section-card {
    border: 1px solid var(--metro-border, #e5e7eb);
    border-radius: var(--citizen-detail-radius);
    background: var(--metro-surface, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.citizen-detail-page .citizen-detail-section-card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--metro-border, #e5e7eb);
    padding: 0.7rem 1rem;
}

.citizen-detail-page .citizen-detail-section-card > .card-header h6 {
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--metro-text-muted, #6b7280);
    margin: 0;
}

.citizen-detail-page .citizen-detail-section-card > .card-body {
    padding: 0.85rem 1rem;
}

/* -- Business entity detail section cards ----------------------- */
.business-entity-detail-page {
    --business-entity-detail-radius: 0.625rem;
}

.business-entity-detail-page .business-entity-section-card {
    border: 1px solid var(--metro-border, #e5e7eb);
    border-radius: var(--business-entity-detail-radius);
    background: var(--metro-surface, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.business-entity-detail-page .business-entity-section-card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--metro-border, #e5e7eb);
    padding: 0.7rem 1rem;
}

.business-entity-detail-page .business-entity-section-card > .card-header h6 {
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--metro-text-muted, #6b7280);
    margin: 0;
}

.business-entity-detail-page .business-entity-section-card > .card-body {
    padding: 0.85rem 1rem;
}

.business-entity-detail-page .business-entity-section-card .table {
    margin-bottom: 0;
}

.business-entity-detail-page .business-entity-section-card .table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--metro-text-muted, #6b7280);
    font-weight: 600;
    border-top: 0;
}

/* Paid license needing expiration attention — theme-safe (no Bootstrap table-warning wash). */
.business-entity-detail-page .business-entity-license-row--attention > * {
    background: color-mix(in srgb, var(--metro-warning, #c27803) 16%, var(--metro-surface, #fff));
    box-shadow: inset 3px 0 0 var(--metro-warning, #c27803);
    color: var(--metro-text, inherit);
}

.business-entity-detail-page .prop-kv {
    display: grid;
    grid-template-columns: minmax(7rem, 34%) 1fr;
    gap: 0.35rem 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--metro-border, #e5e7eb) 70%, transparent);
    font-size: 0.875rem;
}

.business-entity-detail-page .prop-kv:last-child {
    border-bottom: 0;
}

.business-entity-detail-page .prop-kv__label {
    color: var(--metro-text-muted, #6b7280);
    font-weight: 500;
}

.business-entity-detail-page .prop-kv__value {
    color: var(--metro-text, #111827);
    word-break: break-word;
}

/* Pinned chrome disabled: overflow:hidden ancestors break sticky section nav when
   page-body / mobile-shell is the real scroller. Sticky .property-section-nav pins
   above __scroll (chrome + content scroll under it). */
.citizen-detail-page__chrome {
    padding-bottom: .35rem;
    background: var(--metro-bg, var(--bs-body-bg, #fff));
}

.citizen-detail-page__scroll {
    padding-top: .65rem;
    padding-bottom: 1.25rem;
    overflow-x: clip;
}

/* Jump-to scroll target offset + highlight (attribute is JS-owned; see dashboard-grid.js scrollToWidget). */
.citizen-detail-flow-grid .dashboard-grid-item { scroll-margin-top: var(--detail-sticky-chrome, 8.5rem); }
.citizen-detail-flow-grid .dashboard-grid-item[data-flash="true"] .dashboard-grid-item-inner {
    animation: prop-flash 1.3s ease-out;
    border-radius: var(--citizen-detail-radius);
}

@media print {
    .page-body:has(.citizen-detail-page) {
        display: block;
        overflow: visible;
    }

    .citizen-detail-page,
    .citizen-detail-page__scroll {
        display: block;
        overflow: visible;
        height: auto;
        min-height: 0;
    }

    .citizen-detail-section-nav {
        display: none !important;
    }

    .citizen-detail-page .dashboard-grid-toolbar,
    .citizen-detail-page .dashboard-widget-library {
        display: none !important;
    }
}

/* MAUI phone layouts — plan work, plan management, legislative meetings */
.plan-work-page--phone .page-header .btn,
.plan-management-page--phone .page-header .btn {
    min-height: 2.75rem;
}

.plan-work-page--phone .row.g-3 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

.plan-management-page--phone .plan-drag-handle {
    display: none;
}

.legislative-meeting-page--phone .metro-sticky-footer,
.legislative-meeting-page--phone .legislative-live-conduct__actions {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.mobile-shell .legislative-meeting-page--phone .btn-group .btn {
    min-height: 2.75rem;
}

/* Department landing (sparse customizable home) */
.dept-landing-identity {
    --dept-landing-accent: #4a5568;
    display: flex;
    gap: 0.85rem;
    align-items: stretch;
    padding: 0.25rem 0;
}
.dept-landing-identity__bar {
    width: 0.35rem;
    border-radius: 999px;
    background: var(--dept-landing-accent);
    flex-shrink: 0;
}
.dept-landing-identity__name {
    font-size: 1.65rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.dept-landing-identity__parent {
    text-transform: none;
}
.department-landing-home .dashboard-grid-toolbar {
    margin-bottom: 0.75rem;
}

/* Inspection appointment windows — city scheduling policy */
.inspection-policy-card {
    max-width: 52rem;
    overflow: hidden;
}
.inspection-policy-card__header {
    align-items: flex-start;
    background: linear-gradient(180deg, var(--metro-surface-raised) 0%, var(--metro-surface) 100%);
    border-bottom: 1px solid var(--metro-border, #e4e7ec);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.1rem 1.2rem;
}
.inspection-policy-card__title {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}
.inspection-policy-card__icon {
    align-items: center;
    background: #eef6fb;
    border-radius: 0.7rem;
    color: #0e7490;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.15rem;
    height: 2.4rem;
    justify-content: center;
    width: 2.4rem;
}
.inspection-policy-card__kicker {
    color: var(--metro-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.inspection-policy-card__header h6 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.inspection-policy-card__grid {
    display: grid;
    gap: 0.85rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.inspection-policy-card__field .form-label {
    color: var(--metro-text-secondary);
    font-weight: 650;
}
@media (max-width: 575.98px) {
    .inspection-policy-card__grid {
        grid-template-columns: 1fr;
    }
    .inspection-policy-card__header {
        padding: 1rem;
    }
}

/* Inspector calendar — pending list + drop target */
.inspection-cal-board {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    align-items: start;
}
.inspection-cal-rail {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 72vh;
    overflow: auto;
    position: sticky;
    top: 1rem;
}
.inspection-cal-inspectors-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 14rem;
    overflow: auto;
}
.inspection-cal-inspector-row {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.45rem;
    margin: 0;
    min-height: 1.75rem;
    padding: 0.15rem 0.2rem;
}
.inspection-cal-inspector-dot {
    border-radius: 50%;
    flex-shrink: 0;
    height: 0.65rem;
    width: 0.65rem;
}
.inspection-cal-pending {
    max-height: none;
    overflow: visible;
    position: static;
}
.inspection-cal-pending-item {
    background: var(--metro-surface, #fff);
    border: 1px solid var(--metro-border, #e4e7ec);
    border-radius: 0.5rem;
    cursor: grab;
    margin-bottom: 0.5rem;
    padding: 0.55rem 0.65rem;
}
.inspection-cal-pending-item.is-selected {
    border-color: var(--metro-primary);
    box-shadow: 0 0 0 1px var(--metro-primary);
}
.inspection-cal-pending-item.metro-pointer-item--dragging,
.inspection-cal-event.metro-pointer-item--dragging {
    opacity: 0.55;
}
.inspection-cal-daycol.metro-pointer-drop-target--active,
.inspection-cal-hour-drop.metro-pointer-drop-target--active,
.inspection-cal-month-day.metro-pointer-drop-target--active {
    background: color-mix(in srgb, var(--metro-primary) 12%, transparent);
    outline: 2px dashed var(--metro-primary);
}
button.inspection-cal-hour-drop {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 100%;
}
button.inspection-cal-hour-drop:focus-visible {
    outline: 2px solid var(--metro-primary);
    outline-offset: -2px;
    z-index: 2;
}
.cd-easy-coach {
    font-size: .95rem;
    line-height: 1.35;
    margin: 0 0 .65rem;
}
.cd-easy-cta {
    align-items: center;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 48px;
    min-width: 48px;
    padding: .65rem 1.15rem;
}
.inspection-cta {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}
@media (max-width: 768px) {
    .inspection-cta {
        min-height: var(--metro-touch-target-min, 48px);
        min-width: 48px;
    }
}
.btn.cd-easy-cta {
    min-height: 48px;
    min-width: 48px;
}
.inspection-cal-month-set {
    font-size: 0.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: nowrap;
}
.inspection-queue-item.is-focus {
    background: var(--metro-surface-muted);
    border-left: 3px solid var(--metro-primary);
}
.inspection-queue-item.is-focus:focus,
.inspection-queue-item.is-focus:focus-visible {
    outline: 2px solid var(--metro-primary);
    outline-offset: -2px;
}
.inspection-cal-event {
    cursor: grab;
}
.inspection-cal-event.inspection-cal-event--link {
    cursor: pointer;
}
.inspection-cal-event.inspection-cal-event--focus {
    box-shadow: 0 0 0 2px var(--metro-primary);
}

/* Compact inspector day preview beside schedule inspector picker */
.inspection-schedule-inspector-row .inspector-day-preview-toggle {
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 2.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.inspector-day-preview-toggle.is-active {
    border-color: var(--bs-primary, #0d6efd);
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 10%, var(--metro-surface));
    color: var(--bs-primary, #0d6efd);
}
.inspector-day-preview {
    border: 1px solid var(--metro-border);
    border-radius: 0.5rem;
    background: var(--metro-surface);
    padding: 0.65rem 0.75rem 0.75rem;
}
.inspector-day-preview__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.5rem;
}
.inspector-day-preview__title {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    font-size: 0.9rem;
}
.inspector-day-preview__summary {
    font-size: 0.78rem;
}
.inspector-day-preview__grid {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: 0.25rem;
    max-height: 14rem;
    overflow: auto;
    border: 1px solid var(--metro-border);
    border-radius: 0.375rem;
    background: color-mix(in srgb, var(--metro-bg) 55%, var(--metro-surface));
}
.inspector-day-preview__hours {
    border-right: 1px solid var(--metro-border);
    background: var(--metro-surface);
}
.inspector-day-preview__hour {
    box-sizing: border-box;
    border-top: 1px solid transparent;
    padding: 2px 4px 0;
}
.inspector-day-preview__lane {
    position: relative;
    min-width: 0;
}
.inspector-day-preview__tick {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--metro-border);
    pointer-events: none;
}
.inspector-day-preview__tick--half {
    border-top-style: dashed;
    opacity: 0.55;
}
.inspector-day-preview__block {
    position: absolute;
    left: 2%;
    width: 96%;
    z-index: 2;
    overflow: hidden;
    border-radius: 4px;
    padding: 2px 5px;
    border-left: 3px solid var(--inspector-day-preview-accent, var(--metro-primary));
    font-size: 0.72rem;
    line-height: 1.2;
}
.inspector-day-preview__block--booked {
    color: inherit;
}
.inspector-day-preview__block--blocked {
    background: color-mix(in srgb, var(--bs-secondary) 22%, transparent);
    border-left-color: var(--bs-secondary);
    color: inherit;
}
.inspector-day-preview__block-title {
    font-weight: 600;
}
.inspector-day-preview__block-sub {
    opacity: 0.85;
}
.inspector-day-preview__empty {
    font-size: 0.82rem;
    margin-top: 0.5rem;
}
.inspector-day-preview__list {
    margin-top: 0.55rem;
    display: grid;
    gap: 0.25rem;
}
.inspector-day-preview__list-item {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.3;
}
.inspector-day-preview__list-time {
    color: var(--metro-text-muted);
    white-space: nowrap;
}
.inspector-day-preview__list-item--blocked .inspector-day-preview__list-body {
    color: var(--metro-text-muted);
}
@media (max-width: 991.98px) {
    .inspection-cal-board {
        grid-template-columns: 1fr;
    }
    .inspection-cal-rail {
        max-height: none;
        position: static;
    }
}

/* Inspector calendar — month overview */
.inspection-cal-month-toolbar {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: auto 1fr auto;
}
.inspection-cal-month-title {
    font-size: 1.05rem;
    text-align: center;
}
.inspection-cal-month-weekdays,
.inspection-cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.inspection-cal-month-weekdays {
    color: var(--metro-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
    text-align: center;
    text-transform: uppercase;
}
.inspection-cal-month-grid {
    gap: 0.2rem;
}
.inspection-cal-month-day {
    align-items: flex-start;
    background: var(--metro-surface, #fff);
    border: 1px solid var(--metro-border, #e4e7ec);
    border-radius: 0;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-height: 7.5rem;
    padding: 0.35rem 0.35rem 0.4rem;
    text-align: left;
}
.inspection-cal-month-day.is-outside {
    background: var(--metro-surface-muted);
    opacity: 0.55;
}
.inspection-cal-month-day.is-today {
    background: color-mix(in srgb, var(--metro-primary) 10%, var(--metro-surface-muted));
    border-color: var(--metro-primary);
}
.inspection-cal-month-num {
    font-size: 0.78rem;
    font-weight: 700;
}
.inspection-cal-month-event {
    background: transparent;
    border-left: 3px solid var(--metro-primary);
    border-radius: 0.2rem;
    font-size: 0.68rem;
    line-height: 1.2;
    padding: 0.08rem 0.2rem;
    width: 100%;
}
.inspection-cal-month-event--dot {
    align-items: center;
    border-left: 0;
    display: inline-flex;
    gap: 0.3rem;
    padding-left: 0.1rem;
}
.inspection-cal-month-event--dot .inspection-cal-inspector-dot {
    height: 0.5rem;
    width: 0.5rem;
}
button.inspection-cal-month-event {
    appearance: none;
    color: inherit;
    cursor: pointer;
}
.inspection-cal-month-more {
    color: var(--metro-text-muted);
    font-size: 0.65rem;
    text-align: left;
}
@media (max-width: 767.98px) {
    .inspection-cal-month-toolbar {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .inspection-cal-month-day {
        min-height: 4.5rem;
        padding: 0.3rem;
    }
    .inspection-cal-month-event {
        display: none;
    }
}

/* Shared avatar crop — staff layouts do not load portal.css */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.user-avatar__img,
.user-avatar__initials {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.user-avatar__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Stale-while-revalidate "updating" hint: shown while a page painted from the persisted client cache
   waits for the live response. Deliberately quiet � it must never read as an error or a blocking spinner. */
.metro-updating-hint {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    line-height: 1;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    animation: metro-updating-hint-in 160ms ease-out both;
}

.metro-updating-hint .bi {
    font-size: .85rem;
    animation: metro-updating-hint-spin 1s linear infinite;
}

@keyframes metro-updating-hint-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes metro-updating-hint-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .metro-updating-hint,
    .metro-updating-hint .bi {
        animation: none;
    }
}

/* ==========================================================================
   Work order detail — 2026-09-30 redesign (tabbed, hero accent, segmented tab bar)
   Layered over the base .wo-detail-* rules above; token-driven for light/dark.
   ========================================================================== */
.work-order-detail-page {
    --wo-accent: var(--metro-primary, #2563eb);
    --wo-accent-soft: color-mix(in srgb, var(--wo-accent) 10%, transparent);
    --wo-accent-line: color-mix(in srgb, var(--wo-accent) 35%, var(--metro-border, #e4e7ec));
    --wo-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px -8px rgba(16, 24, 40, .14);
    --wo-shadow-lift: 0 2px 4px rgba(16, 24, 40, .06), 0 14px 28px -12px rgba(16, 24, 40, .22);
}

/* --- Hero ---------------------------------------------------------------- */
.wo-detail-hero {
    position: relative;
    border-radius: 1rem;
    box-shadow: var(--wo-shadow);
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 0% 0%, var(--wo-accent-soft), transparent 55%),
        var(--metro-surface);
}

.wo-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wo-accent), color-mix(in srgb, var(--wo-accent) 45%, transparent));
    z-index: 1;
}

/* Child inspection / linked WO: keep parent context at the top of the hero. */
.wo-detail-parent-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    padding: 0.65rem 1.15rem;
    margin-top: 3px; /* clear the hero accent bar */
    border-bottom: 1px solid color-mix(in srgb, var(--metro-primary, #0d6efd) 28%, var(--metro-border));
    background: color-mix(in srgb, var(--metro-primary, #0d6efd) 10%, var(--metro-surface));
}

.wo-detail-parent-context__copy {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 16rem;
    font-size: 0.9rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--metro-text);
}

.wo-detail-parent-context__copy > .bi {
    margin-top: 0.15rem;
    color: var(--metro-primary, #0d6efd);
    flex-shrink: 0;
}

.wo-detail-parent-context__parent-link {
    font-weight: 750;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.wo-detail-parent-context__cta {
    flex: 0 0 auto;
    white-space: nowrap;
}

:root[data-theme="dark"] .wo-detail-parent-context {
    background: color-mix(in srgb, var(--metro-primary, #0d6efd) 18%, var(--metro-surface));
}

.wo-detail-hero[data-priority="emergency"] { --wo-accent: #dc2626; }
.wo-detail-hero[data-priority="high"]      { --wo-accent: #ea580c; }
.wo-detail-hero[data-priority="low"]       { --wo-accent: #64748b; }
.wo-detail-hero[data-hot="true"]::before {
    background: linear-gradient(90deg, #dc2626, #f97316, #facc15);
}

.wo-detail-hero__body { padding: 0.85rem 1.15rem 0.7rem; }

.wo-detail-hero__title {
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -.02em;
    margin-top: 0.15rem;
}

.wo-detail-hero__subtitle {
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--metro-text);
    opacity: .78;
    max-width: 62ch;
    margin-top: 0.15rem;
}

.wo-detail-hero .breadcrumb {
    font-size: .72rem;
    margin-bottom: 0;
    --bs-breadcrumb-divider-color: var(--metro-text-muted);
}
.wo-detail-hero .breadcrumb a { text-decoration: none; }
.wo-detail-hero .breadcrumb a:hover { text-decoration: underline; }

.wo-detail-hero__meta {
    gap: 0;
    padding: 0;
    background: color-mix(in srgb, var(--metro-surface-muted) 70%, transparent);
    backdrop-filter: blur(6px);
}

.wo-detail-meta-item {
    padding: 0.55rem 1.15rem;
    border-left: 1px solid var(--metro-border);
}
.wo-detail-meta-item:first-child { border-left: 0; }

button.wo-detail-meta-item {
    width: 100%;
    padding: 0.55rem 1.15rem;
}

.wo-detail-meta-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wo-detail-meta-value { font-size: .85rem; font-weight: 650; }

.work-order-detail-header-actions {
    gap: 0.4rem !important;
}

.work-order-detail-header-actions .btn {
    border-radius: 0.55rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* --- Segmented sticky tab bar (Overview / Inspections / Submission data / …).
   Stick the outer .wo-detail-tabs above __scroll. Wrap chips so every section
   stays visible (up to two+ rows) instead of hiding them in a horizontal scroller.
   Desktop: page-body padding otherwise leaves a gap under the topbar when sticky
   top:0 resolves inside the padded scrollport — cancel that with --page-body-pad-y.
   Mobile/tech shells keep top: var(--topbar-height) from mobile.css. */
html:not(:has(.mobile-shell)):not(:has(.tech-shell)) .wo-detail-tabs,
html:not(:has(.mobile-shell)):not(:has(.tech-shell)) .property-detail-tabs,
html:not(:has(.mobile-shell)):not(:has(.tech-shell)) .citizen-detail-tabs,
html:not(:has(.mobile-shell)):not(:has(.tech-shell)) .business-entity-detail-tabs,
html:not(:has(.mobile-shell)):not(:has(.tech-shell)) .fleet-detail-tabs,
html:not(:has(.mobile-shell)):not(:has(.tech-shell)) .legislative-item-detail-tabs,
html:not(:has(.mobile-shell)):not(:has(.tech-shell)) .bid-project-detail-tabs,
html:not(:has(.mobile-shell)):not(:has(.tech-shell)) .property-section-nav {
    top: calc(-1 * var(--page-body-pad-y, 24px));
}

.wo-detail-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-top: 0;
    padding: 0.35rem 0 0.15rem;
    background: var(--metro-bg, var(--bs-body-bg, #fff));
}

.wo-detail-tabs .metro-tabs {
    position: relative;
    top: auto;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: .25rem;
    padding: .3rem;
    margin: 0 0 1rem;
    border: 1px solid var(--metro-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--metro-surface-muted) 92%, var(--metro-surface));
    box-shadow: var(--wo-shadow);
    overflow: visible;
    scrollbar-width: none;
}
.wo-detail-tabs .metro-tabs::-webkit-scrollbar { display: none; }

.wo-detail-tabs .metro-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .55rem .95rem;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    color: var(--metro-text-muted);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wo-detail-tabs .metro-tab:hover {
    color: var(--metro-text);
    background: color-mix(in srgb, var(--metro-text) 6%, transparent);
}

.wo-detail-tabs .metro-tab:focus-visible {
    outline: 2px solid var(--wo-accent);
    outline-offset: 1px;
}

.wo-detail-tabs .metro-tab.active {
    color: var(--wo-accent);
    background: var(--metro-surface);
    border: 0;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -4px color-mix(in srgb, var(--wo-accent) 35%, transparent);
}

.wo-detail-tabs .metro-tab.active::after {
    content: "";
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--wo-accent);
}

.wo-detail-tabs .metro-tab__icon { font-size: 1rem; line-height: 1; opacity: .85; }

.wo-detail-tabs .metro-tab__badge {
    margin: 0 !important;
    min-width: 1.35rem;
    padding: .18rem .42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--wo-accent) 14%, transparent) !important;
    color: var(--wo-accent);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.1;
}
.wo-detail-tabs .metro-tab.active .metro-tab__badge {
    background: var(--wo-accent) !important;
    color: #fff;
}

.wo-detail-more-tools {
    padding: .4rem .85rem;
    border: 1px dashed var(--metro-border);
    border-radius: .75rem;
}

/* --- Panels -------------------------------------------------------------- */
.wo-detail-tab-panels { padding-top: 0; }

/* 'backwards', not 'both': a forwards-filled transform (even the identity) makes the panel the containing
   block for position:fixed descendants, so modals opened from a tab (letters, fees...) were trapped inside it. */
.wo-detail-tab-panel { animation: wo-panel-in .28s cubic-bezier(.2, .7, .2, 1) backwards; }

@keyframes wo-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* --- Overview: glance tiles --------------------------------------------- */
.wo-detail-glance { gap: .75rem; margin-bottom: 1.1rem; }

.wo-detail-glance > div,
.wo-detail-glance > button,
.wo-detail-glance__tile {
    --tile-tone: var(--wo-accent);
    position: relative;
    overflow: hidden;
    gap: .35rem;
    padding: .9rem 1rem .9rem 1.1rem;
    border-radius: .9rem;
    border: 1px solid var(--metro-border);
    background: var(--metro-surface);
    box-shadow: var(--wo-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.wo-detail-glance__tile::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--tile-tone);
}

.wo-detail-glance__tile:hover { transform: translateY(-2px); box-shadow: var(--wo-shadow-lift); }

button.wo-detail-glance__tile {
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
}

.wo-detail-glance__tile--action {
    cursor: pointer;
}

.wo-detail-glance__tile--action:focus-visible {
    outline: 2px solid var(--tile-tone, var(--metro-primary, #2563eb));
    outline-offset: 2px;
}

.wo-detail-glance__edit {
    position: absolute;
    right: .85rem;
    bottom: .65rem;
    font-size: .72rem;
    color: var(--tile-tone);
    opacity: 0;
    transition: opacity .15s ease;
}

.wo-detail-glance__tile--action:hover .wo-detail-glance__edit,
.wo-detail-glance__tile--action:focus-visible .wo-detail-glance__edit {
    opacity: .85;
}

.wo-detail-glance__link {
    font-size: .98rem;
    font-weight: 750;
    letter-spacing: -.012em;
    line-height: 1.25;
    padding-right: 1.6rem;
    overflow-wrap: break-word;
    word-break: normal;
    color: var(--metro-link, #0d6efd);
}

button.wo-detail-glance__link {
    appearance: none;
    border: 0;
    background: transparent;
    text-decoration: none;
    font: inherit;
    font-size: .98rem;
    font-weight: 750;
    letter-spacing: -.012em;
    line-height: 1.25;
    max-width: 100%;
    white-space: normal;
    text-decoration: underline;
    text-underline-offset: .12em;
}

.wo-detail-glance__link:hover {
    color: var(--metro-link-hover, #0a58ca);
}

.wo-detail-glance__tile[data-tone="status"]   { --tile-tone: #2563eb; }
.wo-detail-glance__tile[data-tone="due"]      { --tile-tone: #0d9488; }
.wo-detail-glance__tile[data-tone="danger"]   { --tile-tone: #dc2626; }
.wo-detail-glance__tile[data-tone="assigned"] { --tile-tone: #7c3aed; }
.wo-detail-glance__tile[data-tone="place"]    { --tile-tone: #ea580c; }

.wo-detail-glance__icon {
    position: absolute;
    top: .7rem;
    right: .8rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .6rem;
    font-size: .95rem;
    color: var(--tile-tone);
    background: color-mix(in srgb, var(--tile-tone) 13%, transparent);
}

.wo-detail-glance__tile[data-tone="danger"] strong { color: #dc2626; }
.wo-detail-glance strong {
    font-size: .98rem;
    padding-right: 1.6rem;
    overflow-wrap: break-word;
    word-break: normal;
}

/* --- Cards, rail, CTA ---------------------------------------------------- */
.wo-detail-section-card {
    border-radius: 1rem;
    box-shadow: var(--wo-shadow);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.wo-detail-section-card:hover { box-shadow: var(--wo-shadow-lift); border-color: var(--wo-accent-line); }

.wo-detail-section-title { font-weight: 700; letter-spacing: -.01em; }

.wo-detail-embedded-section { margin-bottom: 1rem; }
.wo-detail-overview__main > .wo-detail-section-card,
.wo-detail-overview__main > .wo-detail-embedded-section {
    padding: 1rem 1.25rem;
    border: 1px solid var(--metro-border);
    border-radius: 1rem;
    background: var(--metro-surface);
    box-shadow: var(--wo-shadow);
}

.wo-detail-overview__fields > dt { color: var(--metro-text-muted); text-transform: none; }
.wo-detail-overview__fields > dt,
.wo-detail-overview__fields > dd { border-bottom: 1px solid color-mix(in srgb, var(--metro-border) 55%, transparent); }
.wo-detail-overview__fields > dt:last-of-type,
.wo-detail-overview__fields > dd:last-child { border-bottom: 0; }

.wo-detail-overview__rail > * + * { margin-top: 1rem; }

.wo-detail-overview__cta {
    margin: 0;
    padding: .75rem 0 0;
    background: linear-gradient(180deg, transparent, var(--metro-surface-muted, var(--metro-surface)) 40%);
}
.wo-detail-overview__cta-btn {
    border-radius: .85rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--wo-accent) 60%, transparent);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 991.98px) {
    .wo-detail-meta-item:nth-child(3) { border-left: 0; }
    .wo-detail-meta-item:nth-child(n+3) { border-top: 1px solid var(--metro-border); }
}

@media (max-width: 575.98px) {
    .wo-detail-hero__body { padding: 0.75rem 0.85rem 0.6rem; }
    .wo-detail-hero__title { font-size: 1.15rem; }
    .wo-detail-meta-item { padding: 0.5rem 0.85rem; border-left: 0; }
    .wo-detail-meta-item + .wo-detail-meta-item { border-top: 1px solid var(--metro-border); }
    .wo-detail-tabs .metro-tabs { border-radius: .85rem; }
    .wo-detail-tabs .metro-tab { padding: .6rem .8rem; }
    .wo-detail-glance { gap: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .wo-detail-tab-panel { animation: none; }
    .wo-detail-glance__tile,
    .wo-detail-glance__edit,
    .wo-detail-tabs .metro-tab,
    .wo-detail-section-card { transition: none; }
    .wo-detail-glance__tile:hover { transform: none; }
    .wo-detail-glance__tile--action .wo-detail-glance__edit { opacity: .7; }
}


/* ==========================================================================
   Property detail — 2026-09-30 redesign (hero, stat tiles, section nav, cards)
   Layered over the base .property-detail-* rules above; token-driven for light/dark.
   Overflow:hidden chrome-pin removed — it breaks sticky section nav under mobile-shell.
   ========================================================================== */
.property-detail-page {
    --prop-accent: var(--metro-primary, #2563eb);
    --prop-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px -8px rgba(16, 24, 40, .14);
    --prop-shadow-lift: 0 2px 4px rgba(16, 24, 40, .06), 0 14px 28px -12px rgba(16, 24, 40, .22);
}

.property-detail-page__chrome {
    padding-bottom: .35rem;
    background: var(--metro-bg, var(--bs-body-bg, #fff));
}

.property-detail-page__scroll {
    padding-top: .65rem;
    padding-bottom: 1.25rem;
    overflow-x: clip;
}

/* --- Hero ---------------------------------------------------------------- */
.property-detail-page .property-detail-hero {
    position: relative;
    overflow: hidden;
    flex-wrap: nowrap;
    padding: 1.25rem 1.5rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--metro-border, #e5e7eb);
    border-radius: 1rem;
    box-shadow: var(--prop-shadow);
    background:
        radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--prop-accent) 11%, transparent), transparent 55%),
        var(--metro-surface, #fff);
}

.property-detail-page .property-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--prop-accent), color-mix(in srgb, var(--prop-accent) 40%, #14b8a6));
}

.property-detail-page .property-detail-hero[data-kind="rental"]     { --prop-accent: #7c3aed; }
.property-detail-page .property-detail-hero[data-kind="commercial"] { --prop-accent: #0d9488; }
.property-detail-page .property-detail-hero[data-flood="true"]::before {
    background: linear-gradient(90deg, var(--prop-accent), #0ea5e9, #38bdf8);
}

.property-detail-page .property-detail-hero__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    margin-top: .35rem;
    border-radius: 1rem;
    font-size: 1.6rem;
    color: #fff;
    background: linear-gradient(135deg, var(--prop-accent), color-mix(in srgb, var(--prop-accent) 55%, #0f172a));
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--prop-accent) 70%, transparent);
}

.property-detail-page .property-detail-hero__title {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.property-detail-page .property-detail-hero .breadcrumb { --bs-breadcrumb-divider-color: var(--metro-text-muted); }
.property-detail-page .property-detail-hero .breadcrumb a { text-decoration: none; }

.property-detail-page .property-detail-chip {
    padding: .3rem .75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--metro-surface-muted, #f3f4f6) 80%, var(--metro-surface, #fff));
}

.property-detail-page .property-detail-hero .btn { border-radius: .7rem; font-weight: 600; }

/* --- Summary tiles ------------------------------------------------------- */
.property-detail-page .property-detail-glance {
    gap: .75rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    margin-bottom: 0;
}

.property-detail-page .property-detail-glance__item {
    position: relative;
    padding: .85rem 1rem .85rem 1.05rem;
    border: 1px solid var(--metro-border, #e5e7eb);
    border-radius: .9rem;
    background: var(--metro-surface, #fff);
    box-shadow: var(--prop-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.property-detail-page .property-detail-glance__item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--prop-accent);
    opacity: .85;
}

.property-detail-page .property-detail-glance__item:hover { transform: translateY(-2px); box-shadow: var(--prop-shadow-lift); }

.property-detail-page .property-detail-glance__icon {
    position: absolute;
    top: .65rem;
    right: .7rem;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .55rem;
    font-size: .9rem;
    color: var(--prop-accent);
    background: color-mix(in srgb, var(--prop-accent) 12%, transparent);
}

.property-detail-page .property-detail-glance__label { font-weight: 700; letter-spacing: .08em; font-size: .64rem; }
.property-detail-page .property-detail-glance__value { font-size: 1.15rem; font-weight: 750; letter-spacing: -.015em; padding-right: 1.5rem; }

/* --- Section jump nav (quick access).
   Starts under the hero; outer sticks on scroll. Chips wrap so every button stays visible.
   Sibling of __scroll (not inside short __chrome) so sticky lasts the full page. */
/* Property / citizen / business-entity / fleet / legislative / bid detail layout switch + tab strip
   (mirrors .wo-detail-tabs). Outer bar is sticky; nested jump-nav / metro-tabs are not. */
.property-detail-tabs,
.citizen-detail-tabs,
.business-entity-detail-tabs,
.fleet-detail-tabs,
.legislative-item-detail-tabs,
.bid-project-detail-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: .65rem;
    padding: .35rem 0 .15rem;
    background: var(--metro-bg, var(--bs-body-bg, #fff));
}

.property-detail-tabs .property-section-nav,
.citizen-detail-tabs .property-section-nav,
.business-entity-detail-tabs .property-section-nav,
.fleet-detail-tabs .property-section-nav,
.legislative-item-detail-tabs .property-section-nav,
.bid-project-detail-tabs .property-section-nav {
    position: static;
    top: auto;
    z-index: auto;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
}

.property-detail-tabs .metro-tabs,
.citizen-detail-tabs .metro-tabs,
.business-entity-detail-tabs .metro-tabs {
    position: relative;
    top: auto;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: .25rem;
    padding: .3rem;
    margin: 0;
    border: 1px solid var(--metro-border, #e5e7eb);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--metro-surface-muted, #f3f4f6) 96%, var(--metro-surface, #fff));
    box-shadow: var(--prop-shadow, 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px -8px rgba(16, 24, 40, .14));
    overflow: visible;
}

.property-detail-tabs .metro-tab,
.citizen-detail-tabs .metro-tab,
.business-entity-detail-tabs .metro-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .5rem .95rem;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    color: var(--metro-text-muted, #6b7280);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.property-detail-tabs .metro-tab.active,
.citizen-detail-tabs .metro-tab.active,
.business-entity-detail-tabs .metro-tab.active {
    color: var(--prop-accent, var(--metro-primary, #2563eb));
    background: var(--metro-surface, #fff);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -4px color-mix(in srgb, var(--prop-accent, #2563eb) 35%, transparent);
}

.property-section-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: .65rem;
    padding: .35rem 0 .15rem;
    background: var(--metro-bg, var(--bs-body-bg, #fff));
}

/* One bordered bar holds jump chips + optional trailing actions (e.g. Customize). */
.property-section-nav__chrome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: .25rem;
    padding: .3rem;
    border: 1px solid var(--metro-border, #e5e7eb);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--metro-surface-muted, #f3f4f6) 96%, var(--metro-surface, #fff));
    box-shadow: var(--prop-shadow);
    overflow: visible;
}

.property-section-nav__track {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex: 1 1 auto;
    gap: .25rem;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.property-section-nav__trailing {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: auto;
}

.property-section-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .5rem .95rem;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    color: var(--metro-text-muted, #6b7280);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.property-section-nav__btn:hover {
    color: var(--prop-accent);
    background: var(--metro-surface, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -4px color-mix(in srgb, var(--prop-accent) 35%, transparent);
}

.property-section-nav__btn:focus-visible { outline: 2px solid var(--prop-accent); outline-offset: 1px; }

.property-section-nav__btn--active,
.property-section-nav__btn--customize[aria-pressed="true"] {
    color: var(--prop-accent, var(--metro-primary, #2563eb));
    background: var(--metro-surface, #fff);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -4px color-mix(in srgb, var(--prop-accent, #2563eb) 35%, transparent);
}

.property-detail-tabs__nav-row,
.business-entity-detail-tabs__nav-row,
.citizen-detail-tabs__nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.property-detail-tabs__nav-row > .metro-tabs,
.business-entity-detail-tabs__nav-row > .metro-tabs,
.citizen-detail-tabs__nav-row > .metro-tabs {
    flex: 1 1 auto;
    min-width: 0;
}

.property-detail-tabs__nav-row > .property-section-nav__btn,
.business-entity-detail-tabs__nav-row > .property-section-nav__btn,
.citizen-detail-tabs__nav-row > .property-section-nav__btn {
    flex: 0 0 auto;
}

/* Mobile / field chrome: one-line dropdown instead of the wrapped chip grid. */
.property-section-nav__dropdown,
.metro-tabs__dropdown {
    display: none;
}

.property-section-nav__select-btn,
.metro-tabs__select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--metro-touch-target-min, 48px);
    padding: 0.55rem 0.85rem;
    border-radius: 0.85rem;
    font-weight: 600;
    text-align: left;
}

.property-section-nav__select-current,
.metro-tabs__select-current {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.property-section-nav__select-current > span,
.metro-tabs__select-current > .metro-tab__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-section-nav__menu,
.metro-tabs__menu {
    width: 100%;
    max-height: min(60vh, 22rem);
    overflow-y: auto;
    padding: 0.35rem;
    border-radius: 0.85rem;
}

.property-section-nav__menu-item,
.metro-tabs__menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--metro-touch-target-min, 48px);
    border-radius: 0.65rem;
    font-weight: 600;
}

/* Floating back-to-top — fixed bottom-left of the page content (clear of the sidebar
   and the right-side metro-fab-stack). */
.detail-back-to-top-fab {
    position: fixed;
    left: var(--metro-fab-inset, 1rem);
    bottom: var(--metro-fab-inset, 1rem);
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--metro-fab-size, 3.25rem);
    height: var(--metro-fab-size, 3.25rem);
    min-width: var(--metro-fab-size, 3.25rem);
    min-height: var(--metro-fab-size, 3.25rem);
    padding: 0;
    border: 1px solid var(--metro-border-strong, #cbd5e1);
    border-radius: 999px;
    background: var(--metro-surface, #fff);
    color: var(--metro-text, #0f172a);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.06),
        0 10px 24px -12px rgba(16, 24, 40, 0.35);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 120ms ease-out, background-color 120ms ease-out, box-shadow 120ms ease-out;
}

.detail-back-to-top-fab:hover {
    background: var(--metro-hover, #f8fafc);
    box-shadow:
        0 2px 4px rgba(16, 24, 40, 0.08),
        0 14px 28px -12px rgba(16, 24, 40, 0.4);
}

.detail-back-to-top-fab:active {
    transform: scale(0.96);
}

.detail-back-to-top-fab:focus-visible {
    outline: 2px solid var(--metro-primary, #2563eb);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .detail-back-to-top-fab {
        transition: none;
    }

    .detail-back-to-top-fab:active {
        transform: none;
    }
}

/* Keep the FAB in the main content column, not over the left nav. */
.metro-layout:not(.sidebar-collapsed) .detail-back-to-top-fab {
    left: calc(var(--sidebar-width, 240px) + var(--metro-fab-inset, 1rem));
}

.metro-layout.sidebar-collapsed .detail-back-to-top-fab {
    left: calc(var(--sidebar-collapsed-width, 56px) + var(--metro-fab-inset, 1rem));
}

.metro-layout:has(.sidebar.sidebar--customize:not(.collapsed)) .detail-back-to-top-fab {
    left: calc(var(--sidebar-customize-width, 360px) + var(--metro-fab-inset, 1rem));
}

@media print {
    .detail-back-to-top-fab {
        display: none !important;
    }
}

/* --- Cards --------------------------------------------------------------- */
.property-detail-page .property-section-card {
    border-radius: 1rem;
    box-shadow: var(--prop-shadow);
    transition: box-shadow .2s ease, border-color .2s ease;
}

.property-detail-page .property-section-card:hover {
    box-shadow: var(--prop-shadow-lift);
    border-color: color-mix(in srgb, var(--prop-accent) 35%, var(--metro-border, #e5e7eb));
}

.property-detail-page .property-section-card > .card-header {
    background: color-mix(in srgb, var(--metro-surface-muted, #f8fafc) 70%, var(--metro-surface, #fff));
    /* Longhands so dashboard-grid dismiss clearance can win on padding-right. */
    padding-top: .8rem;
    padding-bottom: .8rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

.property-detail-page .property-section-card > .card-header h6 {
    font-weight: 750;
    letter-spacing: 0.02em;
    color: var(--metro-text, #111827);
}

.property-detail-page .property-section-card > .card-header h6::before {
    content: "";
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .5rem;
    border-radius: 3px;
    background: var(--prop-accent);
    vertical-align: baseline;
}

.property-detail-page .prop-kv__label { font-weight: 600; }

/* Jump-to highlight (attribute is JS-owned; see dashboard-grid.js scrollToWidget). */
.property-detail-flow-grid .dashboard-grid-item { scroll-margin-top: var(--detail-sticky-chrome, 8.5rem); }
.property-detail-flow-grid .dashboard-grid-item[data-flash="true"] .dashboard-grid-item-inner {
    animation: prop-flash 1.3s ease-out;
    border-radius: 1rem;
}

@keyframes prop-flash {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--prop-accent) 55%, transparent); }
    100% { box-shadow: 0 0 0 14px transparent; }
}

@media (max-width: 767.98px) {
    .property-detail-page .property-detail-hero { flex-wrap: wrap; padding: 1rem; }
    .property-detail-page .property-detail-hero__icon { width: 2.75rem; height: 2.75rem; font-size: 1.3rem; }
    .property-section-nav__chrome { border-radius: .85rem; }
    .property-detail-page .property-detail-glance__value { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .property-detail-page .property-detail-glance__item,
    .property-detail-page .property-section-card,
    .property-section-nav__btn { transition: none; }
    .property-detail-page .property-detail-glance__item:hover { transform: none; }
    .property-detail-flow-grid .dashboard-grid-item[data-flash="true"] .dashboard-grid-item-inner { animation: none; }
}

/* Property bond button (hero) — status-tinted pill with a state label */
.property-bond-btn {
    --bond-tone: var(--metro-text-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--bond-tone) 45%, var(--metro-border, #e5e7eb));
    background: color-mix(in srgb, var(--bond-tone) 9%, var(--metro-surface, #fff));
    color: var(--metro-text, #111827);
    font-weight: 600;
}

.property-bond-btn:hover {
    background: color-mix(in srgb, var(--bond-tone) 16%, var(--metro-surface, #fff));
    border-color: var(--bond-tone);
    color: var(--metro-text, #111827);
}

.property-bond-btn .bi { color: var(--bond-tone); }

.property-bond-btn__status {
    margin-left: .5rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background: var(--bond-tone);
}

.property-bond-btn--ok      { --bond-tone: #16a34a; }
.property-bond-btn--soon    { --bond-tone: #d97706; }
.property-bond-btn--expired { --bond-tone: #dc2626; }
.property-bond-btn--none    { --bond-tone: #64748b; }

.property-bond-modal__body .property-section-card { box-shadow: none; }
.property-bond-modal__body .property-section-card:hover { box-shadow: none; }

/* Rental bond panel — stacked upload form (drop zone + meta row) */
.property-rental-bond__current {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.property-rental-bond__form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.property-rental-bond__field .form-label {
    color: var(--metro-text-muted, #6b7280);
}

.property-rental-bond__drop {
    padding: 0.75rem 0.9rem;
    background: color-mix(in srgb, var(--metro-surface-muted, #f8fafc) 65%, var(--metro-surface, #fff));
    border-style: dashed;
    border-color: color-mix(in srgb, var(--metro-border, #e5e7eb) 80%, var(--metro-text-muted, #6b7280));
    min-height: 3.5rem;
}

.property-rental-bond__drop--ready {
    border-color: color-mix(in srgb, var(--metro-primary, #2563eb) 45%, var(--metro-border, #e5e7eb));
    background: color-mix(in srgb, var(--metro-primary, #2563eb) 6%, var(--metro-surface, #fff));
}

.property-rental-bond__drop-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.property-rental-bond__drop-icon {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--metro-primary, #2563eb);
    flex-shrink: 0;
}

.property-rental-bond__drop-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.property-rental-bond__drop-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--metro-text, #111827);
    line-height: 1.25;
}

.property-rental-bond__drop-hint {
    font-size: 0.75rem;
    color: var(--metro-text-muted, #6b7280);
    line-height: 1.2;
}

.property-rental-bond__meta {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.property-rental-bond__actions {
    display: flex;
    align-items: flex-end;
}

.property-rental-bond__submit {
    white-space: nowrap;
    min-width: 7.5rem;
}

@media (max-width: 767.98px) {
    .property-rental-bond__meta {
        grid-template-columns: 1fr;
    }

    .property-rental-bond__actions {
        width: 100%;
    }

    .property-rental-bond__submit {
        width: 100%;
    }
}

/* ------------------------------------------------------------------------------------------------
   Rich-text editor (TipTap bundle, see tools/letter-editor). Shared by LetterRichEditor and
   RichTextHtmlEditor so chips, tables and toolbar states look the same on every page.
   ------------------------------------------------------------------------------------------------ */
.metro-rt-host { position: relative; }
.metro-rt-host .metro-rt-content {
    outline: 0;
    min-height: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}
.metro-rt-host .metro-rt-content p { margin: 0 0 .65rem 0; }
.metro-rt-host .metro-rt-content p:last-child { margin-bottom: 0; }
.metro-rt-host .metro-rt-content h1,
.metro-rt-host .metro-rt-content h2,
.metro-rt-host .metro-rt-content h3 { margin: .25rem 0 .5rem 0; }
.metro-rt-host .metro-rt-content blockquote {
    margin: .5rem 0;
    padding: .25rem .9rem;
    border-left: 3px solid var(--metro-border-strong, #cbd5e1);
    color: var(--bs-secondary-color, #475569);
}
.metro-rt-host .metro-rt-content ul,
.metro-rt-host .metro-rt-content ol { padding-left: 1.5rem; margin: 0 0 .65rem 0; }
.metro-rt-host .metro-rt-content li > p { margin: 0; }
.metro-rt-host .metro-rt-content hr { margin: .75rem 0; border-top: 1px solid var(--metro-border-strong, #94a3b8); }
.metro-rt-host .metro-rt-content a { color: var(--bs-link-color, #0d6efd); text-decoration: underline; }
.metro-rt-host .metro-rt-content img { max-width: 100%; height: auto; }

/* Tables */
.metro-rt-host .metro-rt-content table {
    border-collapse: collapse;
    width: 100%;
    margin: .5rem 0 .85rem 0;
    table-layout: fixed;
}
.metro-rt-host .metro-rt-content th,
.metro-rt-host .metro-rt-content td {
    border: 1px solid var(--metro-border-strong, #cbd5e1);
    padding: .3rem .55rem;
    vertical-align: top;
    position: relative;
}
.metro-rt-host .metro-rt-content th { background: var(--bs-tertiary-bg, #f1f5f9); font-weight: 600; text-align: left; }
.metro-rt-host .metro-rt-content .selectedCell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(var(--bs-primary-rgb), .12);
    pointer-events: none;
}

/* Merge chips, selection and page breaks */
.metro-merge-chip {
    display: inline-block;
    padding: .05rem .4rem;
    margin: 0 .1rem;
    border-radius: .35rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .92em;
    background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
    color: #0d47a1;
    border: 1px solid #64b5f6;
    white-space: nowrap;
    user-select: all;
    cursor: default;
}
.metro-merge-chip[data-merge-token="SignatorySignature"],
.metro-merge-chip[data-merge-token="SignatoryName"],
.metro-merge-chip[data-merge-token="SignatoryTitle"] {
    cursor: pointer;
}
.metro-rt-host .metro-rt-content .metro-merge-chip.ProseMirror-selectednode {
    outline: 2px solid var(--metro-primary);
    outline-offset: 1px;
}
.metro-rt-host .metro-rt-content .metro-rt-page-break {
    display: block;
    margin: .75rem 0;
    border-top: 2px dashed var(--metro-border-strong, #94a3b8);
    position: relative;
    height: 0;
}
.metro-rt-host .metro-rt-content .metro-rt-page-break::after {
    content: "Page break";
    position: absolute;
    top: -.6rem;
    left: 50%;
    transform: translateX(-50%);
    font: 600 .68rem/1 system-ui, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #64748b);
    background: var(--metro-surface);
    padding: 0 .4rem;
}
.metro-rt-host .metro-rt-content .ProseMirror-gapcursor:after { border-top: 1px solid currentColor; }

/* Toolbar states and popovers */
.rt-toolbar .btn.is-active {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}
.rt-toolbar .btn:disabled { opacity: .45; }
.rt-toolbar .rt-color-wrap { position: relative; display: inline-flex; align-items: center; }
.rt-toolbar .rt-color-wrap .form-control-color { width: 2.2rem; padding: .1rem .15rem; }
.rt-toolbar-row--table {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
    padding: .3rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-size: .8rem;
}
.rt-toolbar-row--table .rt-toolbar-row__label { font-weight: 600; color: var(--bs-secondary-color); margin-right: .25rem; }
.letter-rich-editor,
.metro-rich-text-field { position: relative; }
.rt-popover {
    position: absolute;
    z-index: 1061;
    min-width: 16rem;
    max-width: min(28rem, 92vw);
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--metro-surface);
    box-shadow: 0 .6rem 1.6rem rgba(15, 23, 42, .18);
}
.rt-popover .form-label { font-size: .78rem; margin-bottom: .2rem; }
.rt-popover--menu { padding: .35rem 0; min-width: 15rem; }
.rt-popover--menu .dropdown-item { font-size: .85rem; }
.rt-popover--menu .dropdown-header { font-size: .72rem; }
[data-bs-theme="dark"] .metro-merge-chip {
    background: linear-gradient(180deg, #1e3a5f 0%, #163152 100%);
    color: var(--metro-primary-text);
    border-color: var(--metro-primary);
}

/* Review & send: delivery choice and checks */
.wo-send-review__channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .5rem;
}

.wo-send-review__channel {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    border: 1px solid var(--metro-border, var(--bs-border-color));
    border-radius: .7rem;
    padding: .55rem .7rem;
    cursor: pointer;
    background: var(--metro-surface);
    margin: 0;
}

.wo-send-review__channel:hover {
    border-color: var(--bs-primary, #0d6efd);
}

.wo-send-review__channel.is-selected {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary, #0d6efd) 22%, transparent);
}

.wo-send-review__channel-title {
    font-weight: 600;
    font-size: .9rem;
}

.wo-send-review__channel-desc {
    font-size: .78rem;
    color: var(--bs-secondary-color, #64748b);
}

.wo-send-review__checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .88rem;
}

.wo-send-review__checks li {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}

.wo-send-review__checks li > i {
    flex: 0 0 auto;
    margin-top: .1rem;
}

.wo-send-review__checks code {
    font-size: .85em;
}

/* PDF preview pane chrome */
.letter-pdf-preview-pane__pages {
    font-weight: 600;
    font-size: .72rem;
}

.letter-pdf-preview-pane__zoom .btn {
    font-size: .78rem;
}

.metro-pdf-preview-page {
    position: relative;
}

.metro-pdf-preview-page__num {
    position: absolute;
    top: 4px;
    right: 6px;
    font: 600 .65rem/1 system-ui, sans-serif;
    color: #64748b;
    background: rgba(255, 255, 255, .85);
    padding: 2px 6px;
    border-radius: 999px;
    pointer-events: none;
}

/* ── Full-screen inspection page (/inspect/{key}) — phone + tablet first ───────────────── */
.insp-focus {
    --insp-focus-max: 760px;
    max-width: var(--insp-focus-max);
    margin: 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--metro-text, #0f172a);
}

.insp-focus__top {
    background: var(--metro-surface, #ffffff);
    border-bottom: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    padding: 0.1rem 1rem 1rem;
}

/* Back / Full details stay reachable while the inspector scrolls photos and comments. */
.insp-focus__bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--metro-surface, #ffffff);
}

.insp-focus__bar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.insp-focus .insp-focus__bar-btn {
    min-height: 44px;
    padding: 0.4rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
}

.insp-focus__parent {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.65rem;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--metro-text);
    background: color-mix(in srgb, var(--metro-primary, #0d6efd) 10%, var(--metro-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--metro-primary, #0d6efd) 28%, var(--metro-border, #dee2e6));
}

.insp-focus__parent > .bi {
    margin-top: 0.12rem;
    color: var(--metro-primary, #0d6efd);
    flex-shrink: 0;
}

.insp-focus__parent a {
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.insp-focus__hero { padding-top: 0.35rem; }

.insp-focus__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--metro-text-muted, #64748b);
    font-size: 0.85rem;
    font-weight: 600;
}

.insp-focus__type {
    margin: 0.35rem 0 0.25rem;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.insp-focus__address {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.insp-focus__address .bi { color: var(--metro-danger, #dc2626); margin-top: 0.15rem; }

.insp-focus__directions {
    width: 100%;
    min-height: 52px;
    margin-top: 0.85rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 0.85rem;
}

.insp-focus__state { padding: 1.5rem 1rem; }

.insp-focus__request {
    margin: 0.75rem 1rem 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    border-radius: 0.75rem;
    background: var(--metro-surface-raised, #fafbfc);
}

.insp-focus__request > summary {
    min-height: 32px;
    line-height: 32px;
    font-weight: 600;
    cursor: pointer;
}

.insp-focus__request-body { padding-top: 0.4rem; font-size: 0.95rem; white-space: pre-line; }

.insp-focus-panel {
    flex: 1;
    padding: 0.75rem 1rem 1rem;
}

.insp-focus-panel__loading { padding: 1rem 0; }

.insp-focus-section {
    margin-bottom: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    border-radius: 1rem;
    background: var(--metro-surface, #ffffff);
}

.insp-focus-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}

.insp-focus-section__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.insp-focus-section__count {
    min-width: 1.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--metro-surface-muted, #f1f5f9);
    color: var(--metro-text-muted, #64748b);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

.insp-focus-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.6rem;
}

.insp-focus-photos__add,
.insp-focus-photos__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 0.85rem;
    overflow: hidden;
    padding: 0;
}

.insp-focus-photos__add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin: 0;
    border: 2px dashed var(--metro-border-strong, #cbd5e1);
    background: var(--metro-surface-raised, #fafbfc);
    color: var(--metro-text, #0f172a);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.insp-focus-photos__add .bi { font-size: 1.6rem; }

.insp-focus-photos__add--camera {
    border-style: solid;
    border-color: var(--bs-primary, #0d6efd);
    background: var(--bs-primary, #0d6efd);
    color: #ffffff;
}

.insp-focus-photos__add:disabled,
.insp-focus-photos__add.is-busy { opacity: 0.6; pointer-events: none; }

.insp-focus-photos__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.insp-focus-photos__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    background: var(--metro-surface-muted, #f1f5f9);
    color: var(--metro-text-muted, #64748b);
    cursor: zoom-in;
}

.insp-focus-photos__thumb .text-muted { padding: 0.35rem; font-size: 0.75rem; text-align: center; }

.insp-focus-photos__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A photo that is uploading (or waiting on the device): its own picture under a shimmer, then the stored photo replaces it. */
.insp-focus-photos__thumb--pending { cursor: default; }

.insp-focus-photos__img--pending { opacity: 0.72; transition: opacity 0.25s ease; }

.insp-focus-photos__thumb--pending.is-uploading .insp-focus-photos__img--pending { filter: saturate(0.85); }

.insp-focus-photos__shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: insp-focus-photo-shimmer 1.3s linear infinite;
}

/* No preview yet: the tile itself pulses so something is always visibly happening in the photo's spot. */
.insp-focus-photos__thumb--pending.is-uploading { animation: insp-focus-photo-pulse 1.6s ease-in-out infinite; }

.insp-focus-photos__badge {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.insp-focus-photos__badge--queued { background: rgba(37, 99, 235, 0.88); }

.insp-focus-photos__thumb--pending.is-failed { border-color: var(--bs-danger, #dc3545); }

.insp-focus-photos__thumb--pending.is-failed .insp-focus-photos__img--pending { opacity: 0.35; }

.insp-focus-photos__retry {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border: 0;
    background: transparent;
    color: var(--bs-danger, #dc3545);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.insp-focus-photos__retry .bi { font-size: 1.5rem; }

.insp-focus-photos__dismiss {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 0.75rem;
    cursor: pointer;
}

@keyframes insp-focus-photo-shimmer {
    from { background-position: 160% 0; }
    to { background-position: -60% 0; }
}

@keyframes insp-focus-photo-pulse {
    0%, 100% { background-color: var(--metro-surface-muted, #f1f5f9); }
    50% { background-color: var(--metro-border, #e2e8f0); }
}

@media (prefers-reduced-motion: reduce) {
    .insp-focus-photos__shimmer,
    .insp-focus-photos__thumb--pending.is-uploading { animation: none; }
}

.insp-focus-comments {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.insp-focus-comments__item {
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--metro-surface-muted, #f1f5f9);
}

.insp-focus-comments__meta { font-size: 0.8rem; color: var(--metro-text-muted, #64748b); }

.insp-focus-comments__text { font-size: 1rem; white-space: pre-line; overflow-wrap: anywhere; }

.insp-focus-comments__notes { font-size: 0.95rem; margin-bottom: 0.75rem; white-space: pre-line; }

.insp-focus-composer { display: flex; flex-direction: column; gap: 0.5rem; }

.insp-focus-composer__input { font-size: 1rem; min-height: 88px; border-radius: 0.75rem; }

.insp-focus-composer__save { min-height: 48px; font-weight: 700; border-radius: 0.75rem; }

.insp-focus-hint {
    margin: 0 0 1rem;
    color: var(--metro-text-muted, #64748b);
    font-size: 0.9rem;
    text-align: center;
}

.insp-focus-progress {
    margin-bottom: 0.85rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.75rem;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
    font-size: 0.92rem;
}

.insp-focus-verdict {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid transparent;
}

.insp-focus-verdict--pass { background: rgba(22, 163, 74, 0.1); border-color: rgba(22, 163, 74, 0.35); }
.insp-focus-verdict--fail { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.35); }
.insp-focus-verdict__icon { font-size: 2rem; }
.insp-focus-verdict--pass .insp-focus-verdict__icon { color: #16a34a; }
.insp-focus-verdict--fail .insp-focus-verdict__icon { color: #dc2626; }
.insp-focus-verdict__title { font-size: 1.25rem; font-weight: 800; }
.insp-focus-verdict__meta { font-size: 0.85rem; color: var(--metro-text-muted, #64748b); }

.insp-focus-next { margin-bottom: 1rem; }
.insp-focus-next .btn { min-height: 52px; font-weight: 700; border-radius: 0.85rem; }

/* Pass / Fail dock: sticks to the bottom of the scroller where the bottom nav would be. */
.insp-focus-dock {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 0.75rem 1rem calc(0.75rem + max(var(--mobile-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)));
    background: var(--metro-surface, #ffffff);
    border-top: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08);
}

.insp-focus-dock .wo-visit-verdict { margin: 0; }
.insp-focus-dock .wo-visit-verdict__btn { min-height: 64px; font-size: 1.2rem; }

/* Tablets: more room for photos and a bigger headline. */
@media (min-width: 640px) {
    .insp-focus__type { font-size: 2rem; }
    .insp-focus-photos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .insp-focus-panel { padding: 1rem 1.25rem 1.25rem; }
    .insp-focus__top { padding-inline: 1.25rem; }
    .insp-focus__bar { padding-inline: 1.25rem; }
    .insp-focus__request { margin-inline: 1.25rem; }
}

:root[data-theme="dark"] .insp-focus__top,
:root[data-theme="dark"] .insp-focus__bar,
:root[data-theme="dark"] .insp-focus-section,
:root[data-theme="dark"] .insp-focus-dock {
    background: var(--metro-surface, #141418);
    border-color: var(--metro-border, #2e2e38);
}

:root[data-theme="dark"] .insp-focus-dock { box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.5); }

:root[data-theme="dark"] .insp-focus-photos__add:not(.insp-focus-photos__add--camera),
:root[data-theme="dark"] .insp-focus__request {
    background: var(--metro-surface-raised, #1a1a1f);
    border-color: var(--metro-border-strong, #3a3a46);
}

:root[data-theme="dark"] .insp-focus-progress { background: rgba(var(--bs-primary-rgb), 0.14); color: var(--metro-primary-text); }

/* ── Full-page Pass / Fail (approve / deny) — not a modal or sheet ───────────────── */
.insp-result {
    --insp-result-max: 40rem;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--metro-text, #0f172a);
    background: var(--metro-bg, #f4f6fa);
}

.insp-result__bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--metro-surface, #ffffff);
    border-bottom: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
}

.insp-result__bar-btn {
    min-height: 44px;
    padding: 0.4rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
}

.insp-result__main {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--insp-result-max);
    margin: 0 auto;
    padding: 1rem 1rem 1.25rem;
}

.insp-result__state { padding: 1.5rem 1rem; max-width: var(--insp-result-max); margin: 0 auto; }

.insp-result__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--metro-text-muted, #64748b);
    font-size: 0.85rem;
    font-weight: 600;
}

.insp-result__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.insp-result__pill--pass { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.insp-result__pill--fail { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }

.insp-result__title {
    margin: 0.45rem 0 0.35rem;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.insp-result__intro {
    margin: 0 0 1rem;
    color: var(--metro-text-muted, #64748b);
    font-size: 1rem;
    line-height: 1.45;
}

.insp-result__card {
    background: var(--metro-surface, #ffffff);
    border: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    border-radius: 1rem;
    padding: 1rem;
}

.insp-result__choice {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.insp-result__choice-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    min-height: 76px;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    border: 2px solid var(--metro-border, #e2e8f0);
    background: var(--metro-surface, #fff);
    text-align: left;
    color: inherit;
}

.insp-result__choice-btn i { font-size: 1.25rem; opacity: 0.85; }
.insp-result__choice-label { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.insp-result__choice-hint { font-size: 0.85rem; color: var(--metro-muted, #64748b); line-height: 1.3; }

.insp-result__choice-btn.is-active.is-notify {
    border-color: var(--bs-primary, #0d6efd);
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 10%, var(--metro-surface));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bs-primary, #0d6efd) 35%, transparent);
}

.insp-result__choice-btn.is-active.is-skip {
    border-color: #64748b;
    background: color-mix(in srgb, #64748b 8%, var(--metro-surface));
}

.insp-result__destinations { margin-top: 1rem; }
.insp-result__destinations-title { font-weight: 700; margin-bottom: 0.65rem; }
.insp-result__muted { font-size: 0.875rem; color: var(--metro-text-muted, #64748b); margin-bottom: 0.65rem; }

.insp-result__recipient-list { display: flex; flex-direction: column; gap: 0.75rem; }

.insp-result__recipient {
    border: 1px solid var(--metro-border, #e2e8f0);
    border-radius: 12px;
    padding: 0.85rem;
    background: color-mix(in srgb, var(--metro-bg, #f8fafc) 70%, var(--metro-surface));
}

.insp-result__recipient.is-skipped { opacity: 0.55; }

.insp-result__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.insp-result__fields .form-control { min-height: 48px; font-size: 1rem; }

.insp-result__alert { margin: 0.85rem 0 0; }

.insp-result__footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.65rem;
    padding: 0.85rem 1rem calc(0.85rem + max(var(--mobile-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)));
    background: var(--metro-surface, #ffffff);
    border-top: 1px solid var(--metro-border, rgba(0, 0, 0, 0.08));
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08);
}

.insp-result__action {
    width: 100%;
    min-height: 52px;
    font-weight: 700;
    border-radius: 0.85rem;
}

.insp-result__action--primary { min-height: 56px; font-size: 1.05rem; }

/* Tablet: two notify choices side by side, email/phone in two columns. */
@media (min-width: 640px) {
    .insp-result { --insp-result-max: 46rem; }
    .insp-result__title { font-size: 2rem; }
    .insp-result__main { padding: 1.35rem 1.5rem 1.5rem; }
    .insp-result__bar { padding-inline: 1.5rem; }
    .insp-result__card { padding: 1.25rem; }
    .insp-result__choice { grid-template-columns: 1fr 1fr; }
    .insp-result__fields { grid-template-columns: 1fr 1fr; }
    .insp-result__footer {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding-inline: 1.5rem;
        max-width: none;
    }
    .insp-result__action { width: auto; min-width: 10rem; padding-inline: 1.35rem; }
    .insp-result__action--primary { flex: 1 1 auto; max-width: 22rem; }
}

/* Desktop: wider reading column, footer sits with the content, extra air. */
@media (min-width: 1024px) {
    .insp-result { --insp-result-max: 52rem; background: var(--metro-bg, #eef2f7); }
    .insp-result__bar {
        max-width: var(--insp-result-max);
        width: 100%;
        margin: 0 auto;
        border-bottom: 0;
        background: transparent;
        padding-top: 1.25rem;
    }
    .insp-result__main { padding-top: 0.5rem; padding-bottom: 2rem; }
    .insp-result__hero { margin-bottom: 0.25rem; }
    .insp-result__card {
        padding: 1.5rem 1.6rem;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    }
    .insp-result__choice-btn { min-height: 88px; padding: 1.1rem 1.15rem; }
    .insp-result__footer {
        position: static;
        max-width: var(--insp-result-max);
        width: 100%;
        margin: 0 auto 1.5rem;
        padding: 0 1.5rem;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
}

:root[data-theme="dark"] .insp-result { background: var(--metro-bg, #0f1115); }
:root[data-theme="dark"] .insp-result__bar,
:root[data-theme="dark"] .insp-result__card,
:root[data-theme="dark"] .insp-result__footer {
    background: var(--metro-surface, #141418);
    border-color: var(--metro-border, #2e2e38);
}
:root[data-theme="dark"] .insp-result__choice-btn { background: var(--metro-surface, #141418); border-color: var(--metro-border, #3a3a46); }
:root[data-theme="dark"] .insp-result__recipient { background: var(--metro-surface-raised, #1a1a1f); }

/* Personnel timesheets — readable punches in light and dark (never invert native time text). */
.personnel-timesheet-page {
    color: var(--metro-text, #111827);
}

.personnel-timesheet-page .dash-v2-card,
.personnel-timesheet-page .personnel-timesheet-day,
.personnel-timesheet-page .personnel-timesheet-history .card-header,
.personnel-timesheet-page .list-group-item {
    background: var(--metro-surface-raised, #fff);
    color: var(--metro-text, #111827);
    border-color: var(--metro-border, #d1d5db);
}

.personnel-timesheet-page .form-label,
.personnel-timesheet-page .personnel-timesheet-week__title,
.personnel-timesheet-page .personnel-timesheet-week__total,
.personnel-timesheet-page .personnel-timesheet-field > span,
.personnel-timesheet-page .personnel-timesheet-pair__label {
    color: var(--metro-text, #111827);
}

.personnel-timesheet-page .text-muted,
.personnel-timesheet-page .personnel-timesheet-day__date,
.personnel-timesheet-page .personnel-timesheet-day__total-label {
    color: var(--metro-text-muted, #4b5563) !important;
}

.personnel-timesheet-page .list-group-item-action:hover,
.personnel-timesheet-page .list-group-item-action:focus {
    background: var(--metro-hover, rgba(15, 23, 42, 0.06));
    color: var(--metro-text, #111827);
}

.personnel-timesheet-page .list-group-item.active {
    background: var(--metro-primary, #1a56db);
    border-color: var(--metro-primary, #1a56db);
    color: #fff;
}

.personnel-timesheet-page .list-group-item.active .text-muted,
.personnel-timesheet-page .list-group-item.active .opacity-75 {
    color: rgba(255, 255, 255, 0.88) !important;
}

.personnel-timesheet-week__title {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.personnel-timesheet-week__total {
    text-align: right;
    font-weight: 600;
    margin-top: 0.35rem;
}

.personnel-timesheet-page .form-control,
.personnel-timesheet-page .personnel-timesheet-time {
    background-color: var(--metro-field-bg);
    color: var(--metro-text);
    border-color: var(--metro-field-border, #c5cad3);
    color-scheme: light;
    -webkit-text-fill-color: var(--metro-text);
}

.personnel-timesheet-page .form-control:focus,
.personnel-timesheet-page .personnel-timesheet-time:focus {
    background-color: var(--metro-field-bg);
    color: var(--metro-text);
    -webkit-text-fill-color: var(--metro-text);
    border-color: var(--metro-primary, #1a56db);
}

.personnel-timesheet-page .form-control:disabled,
.personnel-timesheet-page .personnel-timesheet-time:disabled {
    background-color: var(--metro-field-disabled-bg);
    color: var(--metro-text-secondary);
    -webkit-text-fill-color: var(--metro-text-secondary);
    opacity: 1;
}

.personnel-timesheet-time::-webkit-datetime-edit,
.personnel-timesheet-time::-webkit-datetime-edit-fields-wrapper,
.personnel-timesheet-time::-webkit-datetime-edit-text,
.personnel-timesheet-time::-webkit-datetime-edit-hour-field,
.personnel-timesheet-time::-webkit-datetime-edit-minute-field,
.personnel-timesheet-time::-webkit-datetime-edit-ampm-field {
    color: inherit;
    -webkit-text-fill-color: inherit;
}

.personnel-timesheet-time::-webkit-calendar-picker-indicator {
    opacity: 0.72;
    cursor: pointer;
    filter: none;
}

.personnel-timesheet-grid {
    --bs-table-bg: var(--metro-surface-raised, #fff);
    --bs-table-color: var(--metro-text, #111827);
    --bs-table-border-color: var(--metro-border, #d1d5db);
    color: var(--metro-text, #111827);
}

.personnel-timesheet-grid thead th {
    background: var(--metro-surface-muted, #eef1f4);
    color: var(--metro-text, #111827);
    font-weight: 650;
    white-space: nowrap;
}

.personnel-timesheet-grid__subhead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--metro-text-muted, #4b5563);
}

.personnel-timesheet-grid .personnel-timesheet-time {
    min-width: 6.25rem;
    min-height: 2.35rem;
    padding-inline: 0.4rem;
}

.personnel-timesheet-days {
    display: grid;
    gap: 0.85rem;
}

.personnel-timesheet-day {
    border: 1px solid var(--metro-border, #d1d5db);
    border-radius: 1rem;
    padding: 0.95rem 1rem 1.05rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.personnel-timesheet-day__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.personnel-timesheet-day__name {
    font-weight: 750;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--metro-text, #111827);
}

.personnel-timesheet-day__date {
    font-variant-numeric: tabular-nums;
    margin-top: 0.1rem;
}

.personnel-timesheet-day__total {
    text-align: right;
}

.personnel-timesheet-day__total-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.personnel-timesheet-day__total strong {
    font-size: 1.15rem;
    color: var(--metro-text, #111827);
}

.personnel-timesheet-day__fields {
    display: grid;
    gap: 0.7rem;
}

.personnel-timesheet-field {
    display: grid;
    gap: 0.28rem;
    margin: 0;
}

.personnel-timesheet-field > span,
.personnel-timesheet-pair__label {
    font-size: 0.78rem;
    font-weight: 700;
}

.personnel-timesheet-pair__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.personnel-timesheet-day .personnel-timesheet-time {
    min-height: var(--metro-touch-target-min, 48px);
    width: 100%;
    font-size: max(16px, 1rem);
}

:root[data-theme="dark"] .personnel-timesheet-page .form-control,
:root[data-theme="dark"] .personnel-timesheet-page .personnel-timesheet-time,
:root[data-theme="dark"] .personnel-timesheet-page .form-control:focus,
:root[data-theme="dark"] .personnel-timesheet-page .personnel-timesheet-time:focus {
    background-color: var(--metro-field-bg);
    color: var(--metro-text);
    -webkit-text-fill-color: var(--metro-text);
    border-color: var(--metro-field-border, #3f3f4a);
    color-scheme: dark;
}

:root[data-theme="dark"] .personnel-timesheet-page .form-control:disabled,
:root[data-theme="dark"] .personnel-timesheet-page .personnel-timesheet-time:disabled {
    background-color: var(--metro-field-disabled-bg);
    color: var(--metro-text-secondary);
    -webkit-text-fill-color: var(--metro-text-secondary);
}

:root[data-theme="dark"] .personnel-timesheet-time::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.85;
}

:root[data-theme="dark"] .personnel-timesheet-page .dash-v2-card,
:root[data-theme="dark"] .personnel-timesheet-page .personnel-timesheet-day,
:root[data-theme="dark"] .personnel-timesheet-page .personnel-timesheet-history .card-header,
:root[data-theme="dark"] .personnel-timesheet-page .list-group-item {
    background: var(--metro-surface-raised, #141418);
    color: var(--metro-text, #f5f5f7);
    border-color: var(--metro-border, #2e2e38);
}

:root[data-theme="dark"] .personnel-timesheet-grid {
    --bs-table-bg: var(--metro-surface-raised, #141418);
    --bs-table-color: var(--metro-text, #f5f5f7);
    --bs-table-border-color: var(--metro-border, #2e2e38);
}

:root[data-theme="dark"] .personnel-timesheet-grid thead th {
    background: var(--metro-surface-muted, #1a1a1f);
    color: var(--metro-text, #f5f5f7);
}

:root[data-theme="dark"] .personnel-timesheet-grid__subhead th {
    color: var(--metro-text-muted, #a8a8b3);
}

/* Easy-mode timesheet week: large type, 48px targets, sunlight-readable status words. */
.personnel-timesheet-page {
    padding-bottom: 6.5rem;
}

.personnel-timesheet-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.personnel-timesheet-choice {
    min-height: 48px;
    min-width: 48px;
    padding: 0.65rem 0.9rem;
    border: 2px solid var(--metro-border, #9ca3af);
    border-radius: 12px;
    background: var(--metro-surface-raised, #fff);
    color: var(--metro-text, #111827);
    font-weight: 700;
    text-align: left;
}

.personnel-timesheet-choice.is-selected {
    border-color: #1d4e89;
    background: #e8f0fa;
    color: #0f2744;
}

:root[data-theme="dark"] .personnel-timesheet-choice.is-selected {
    border-color: #93c5fd;
    background: #1e3a8a;
    color: #dbeafe;
}

.personnel-timesheet-choice--quiet {
    min-width: 48px;
}

.personnel-timesheet-submit,
.personnel-timesheet-save {
    min-height: 48px;
    font-size: 1.05rem;
    font-weight: 750;
}

.personnel-timesheet-submitbar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 20;
    margin-top: 1rem;
}

.personnel-timesheet-next {
    font-size: 1.05rem;
    margin: 0.35rem 0 0;
    color: var(--metro-text, #111827);
}

.personnel-timesheet-weekview__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pts-status {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.2rem 0.75rem;
    border: 2px solid currentColor;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.pts-status--not-started { color: #1f2937; background: #e5e7eb; }
.pts-status--progress { color: #1e3a8a; background: #dbeafe; }
.pts-status--submitted { color: #78350f; background: #fef3c7; }
.pts-status--approved { color: #14532d; background: #dcfce7; }
.pts-status--sent-back { color: #7c2d12; background: #ffedd5; }

:root[data-theme="dark"] .pts-status--not-started { color: #f9fafb; background: #374151; }
:root[data-theme="dark"] .pts-status--progress { color: #dbeafe; background: #1e3a8a; }
:root[data-theme="dark"] .pts-status--submitted { color: #fef3c7; background: #92400e; }
:root[data-theme="dark"] .pts-status--approved { color: #dcfce7; background: #166534; }
:root[data-theme="dark"] .pts-status--sent-back { color: #ffedd5; background: #9a3412; }

.personnel-timesheet-ring {
    position: relative;
    width: min(220px, 70vw);
    margin: 0.5rem auto 1rem;
}

.personnel-timesheet-ring svg { width: 100%; height: auto; display: block; }
.personnel-timesheet-ring__track { fill: none; stroke: #e7e5e4; stroke-width: 10; }
.personnel-timesheet-ring__progress,
.personnel-timesheet-ring__overtime {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 60px 60px;
}
.personnel-timesheet-ring__progress { stroke: #1d4e89; }
.personnel-timesheet-ring.is-complete .personnel-timesheet-ring__progress { stroke: #1f7a4d; }
.personnel-timesheet-ring__overtime { stroke: #b0893e; }
.personnel-timesheet-ring__leave { stroke: #3f7d86; }

.personnel-timesheet-ring__label {
    position: absolute;
    inset: 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--metro-text, #111827);
}
.personnel-timesheet-ring__label strong { font-size: 1.8rem; line-height: 1; }
.personnel-timesheet-ring__label span { font-weight: 700; }
.personnel-timesheet-ring__label em { font-style: normal; color: #8a6a2f; font-weight: 800; }

.personnel-timesheet-day {
    width: 100%;
    text-align: left;
    min-height: 48px;
    cursor: pointer;
}
.personnel-timesheet-day--open { border-color: #1d4e89; }
.personnel-timesheet-day__missing { display: block; font-weight: 750; margin-top: 0.35rem; }
.personnel-timesheet-day__hours { font-size: 1.25rem; }
.personnel-timesheet-day__job { display: block; margin-top: 0.35rem; color: var(--metro-text-muted, #4b5563); }
.personnel-timesheet-bar {
    display: flex;
    height: 12px;
    margin-top: 0.55rem;
    background: #e7e5e4;
    border-radius: 99px;
    overflow: hidden;
}
.personnel-timesheet-bar__fill { display: block; height: 100%; background: #1d4e89; }
.personnel-timesheet-bar--leave .personnel-timesheet-bar__fill { background: #3f7d86; }
.personnel-timesheet-bar__ot { display: block; height: 100%; background: #b0893e; }

.personnel-timesheet-sentback,
.personnel-timesheet-success,
.personnel-timesheet-notice,
.personnel-timesheet-error {
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
}
.personnel-timesheet-sentback { background: #ffedd5; color: #7c2d12; border: 2px solid #c2410c; }
.personnel-timesheet-success { background: #dcfce7; color: #14532d; border: 2px solid #166534; font-size: 1.15rem; font-weight: 750; }
.personnel-timesheet-notice,
.personnel-timesheet-error { background: #fff7ed; color: #7c2d12; border: 2px solid #c2410c; }
.personnel-timesheet-sentback__reason { margin: 0; font-size: 1.1rem; font-weight: 750; }

.personnel-timesheet-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1400;
}
.personnel-timesheet-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1410;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--metro-surface-raised, #fff);
    color: var(--metro-text, #111827);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.2);
}
.personnel-timesheet-sheet__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1rem 1rem 0.5rem; }
.personnel-timesheet-sheet__title { font-size: 1.35rem; margin: 0; }
.personnel-timesheet-sheet__label { font-weight: 800; margin: 0.8rem 0 0.35rem; }
.personnel-timesheet-sheet__preview { font-size: 1.6rem; font-weight: 800; margin: 0.4rem 0; }
.personnel-timesheet-sheet__save {
    position: sticky;
    bottom: 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--metro-surface-raised, #fff);
    border-top: 1px solid var(--metro-border, #d1d5db);
}
.personnel-timesheet-choices { display: grid; gap: 0.4rem; }
.personnel-timesheet-choices--row { grid-template-columns: 1fr 1fr; }
.personnel-timesheet-stepper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    align-items: center;
}
.personnel-timesheet-stepper strong { font-size: 1.4rem; text-align: center; }
.personnel-timesheet-reason {
    width: 100%;
    min-height: 120px;
    font-size: 1.05rem;
    padding: 0.75rem;
    border: 2px solid var(--metro-border, #9ca3af);
    border-radius: 12px;
    background: var(--metro-field-bg, #fff);
    color: var(--metro-text, #111827);
}
.personnel-timesheet-people { display: grid; gap: 0.75rem; }
.personnel-timesheet-person {
    border: 2px solid var(--metro-border, #d1d5db);
    border-radius: 16px;
    padding: 1rem;
    background: var(--metro-surface-raised, #fff);
    color: var(--metro-text, #111827);
}
.personnel-timesheet-person h2 { font-size: 1.25rem; margin: 0 0 0.25rem; }
.personnel-timesheet-section { margin: 1.25rem 0 0.6rem; font-size: 1.2rem; }
.personnel-timesheet-date { display: grid; gap: 0.25rem; font-weight: 800; }
.personnel-timesheet-date input { width: 100%; }
.personnel-timesheet-chart { max-width: 100%; overflow-x: hidden; }
.personnel-timesheet-chart__total { font-size: 2.2rem; font-weight: 800; margin: 0; line-height: 1.1; }
.personnel-timesheet-chart__ot { font-weight: 800; color: #8a6a2f; }
.personnel-timesheet-chart__leave { font-weight: 800; color: #245e66; margin: 0.15rem 0 0; }

@media (max-width: 768px) {
    .personnel-timesheet-print,
    .personnel-timesheet-sendback {
        display: block;
        flex: 1 0 100%;
        width: 100%;
        box-sizing: border-box;
    }
}
.personnel-timesheet-bars,
.personnel-timesheet-report-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.65rem; max-width: 100%; }
.personnel-timesheet-bars li,
.personnel-timesheet-report-list li { min-width: 0; }
.personnel-timesheet-bars__name { display: block; font-weight: 750; overflow: hidden; text-overflow: ellipsis; }
.personnel-timesheet-bars__track { display: block; height: 14px; background: #e7e5e4; border-radius: 99px; overflow: hidden; }
.personnel-timesheet-bars__track i { display: block; height: 100%; background: #1d4e89; max-width: 100%; }
.personnel-timesheet-report-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--metro-border, #e5e7eb);
    font-weight: 700;
}

@media (min-width: 992px) {
    .personnel-timesheet-sheet {
        left: 50%;
        right: auto;
        width: min(560px, calc(100% - 2rem));
        transform: translateX(-50%);
        bottom: 1.25rem;
        border-radius: 18px;
    }
}

.personnel-timesheet-day-wrap {
    max-width: 100%;
    overflow-x: hidden;
    border: 2px solid var(--metro-border, #d1d5db);
    border-radius: 16px;
    padding: 0.35rem 0.35rem 0.75rem;
    background: var(--metro-surface-raised, #fff);
}
.personnel-timesheet-day-wrap .personnel-timesheet-day {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.personnel-timesheet-fix { width: 100%; min-height: 48px; margin-top: 0.35rem; }
.personnel-timesheet-supervisor,
.personnel-timesheet-supervisor__time {
    margin: 0.35rem 0.5rem 0;
    font-weight: 800;
}
.personnel-timesheet-week-approved {
    margin: 0 0 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #dcfce7;
    color: #14532d;
    border: 2px solid #166534;
    font-size: 1.2rem;
    font-weight: 800;
}
.pts-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    line-height: 1.2;
}
.pts-dot__mark {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    flex: 0 0 auto;
}
.pts-dot--approved { color: #14532d; }
.pts-dot--approved .pts-dot__mark { background: #15803d; }
.pts-dot--waiting { color: #78350f; }
.pts-dot--waiting .pts-dot__mark { background: #d97706; }
.pts-dot--sent-back { color: #7f1d1d; }
.pts-dot--sent-back .pts-dot__mark { background: #b91c1c; }
:root[data-theme="dark"] .pts-dot--approved { color: #bbf7d0; }
:root[data-theme="dark"] .pts-dot--approved .pts-dot__mark { background: #4ade80; }
:root[data-theme="dark"] .pts-dot--waiting { color: #fde68a; }
:root[data-theme="dark"] .pts-dot--waiting .pts-dot__mark { background: #fbbf24; }
:root[data-theme="dark"] .pts-dot--sent-back { color: #fecaca; }
:root[data-theme="dark"] .pts-dot--sent-back .pts-dot__mark { background: #f87171; }
:root[data-theme="dark"] .personnel-timesheet-week-approved { background: #14532d; color: #dcfce7; border-color: #4ade80; }
:root[data-theme="dark"] .personnel-timesheet-day-wrap { background: #111827; color: #f9fafb; }
:root[data-contrast="outdoor"] .pts-dot { font-weight: 900; font-size: 1.05rem; }
:root[data-contrast="outdoor"] .pts-dot__mark { width: 1rem; height: 1rem; box-shadow: 0 0 0 2px currentColor; }
:root[data-contrast="outdoor"] .pts-dot--approved { color: #052e16; }
:root[data-contrast="outdoor"][data-theme="dark"] .pts-dot--approved { color: #ecfdf5; }
:root[data-contrast="outdoor"] .pts-dot--waiting { color: #451a03; }
:root[data-contrast="outdoor"][data-theme="dark"] .pts-dot--waiting { color: #fffbeb; }
:root[data-contrast="outdoor"] .pts-dot--sent-back { color: #450a0a; }
:root[data-contrast="outdoor"][data-theme="dark"] .pts-dot--sent-back { color: #fef2f2; }

.pts-shift {
    position: relative;
    height: 48px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: #e7e5e4;
    margin: 0.5rem 0 0;
}
.pts-shift__work,
.pts-shift__break {
    position: absolute;
    top: 0;
    height: 48px;
    min-height: 48px;
}
.pts-shift__work { background: #1d4e89; }
.pts-shift__break {
    background: transparent;
    box-shadow: inset 0 0 0 3px #b45309;
    pointer-events: none;
}
.pts-break-row {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
}
:root[data-theme="dark"] .pts-shift { background: #374151; }
:root[data-theme="dark"] .pts-shift__work { background: #93c5fd; }
:root[data-theme="dark"] .pts-shift__break { box-shadow: inset 0 0 0 3px #fbbf24; }
:root[data-contrast="outdoor"] .pts-shift__work { background: #0b3a75; }
:root[data-contrast="outdoor"] .pts-shift__break { box-shadow: inset 0 0 0 4px #9a3412; }

.pts-magic { max-width: 100%; overflow-x: hidden; }
.pts-magic-days { display: grid; gap: 0.75rem; }
.pts-magic-day {
    border: 2px solid var(--metro-border, #d1d5db);
    border-radius: 16px;
    padding: 0.75rem;
    max-width: 100%;
    overflow-x: hidden;
}
.pts-magic-day__head { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.pts-magic-actions { display: flex; gap: 0.5rem; width: 100%; margin-top: 0.6rem; }
.pts-magic-actions .btn { flex: 1 1 0; width: 100%; min-height: 48px; }
.pts-magic-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: calc(0.75rem + var(--mobile-safe-bottom, env(safe-area-inset-bottom, 0px)));
    background: var(--metro-surface-raised, #fff);
}
.pts-magic-sticky .btn { min-height: 48px; width: 100%; }
.pts-magic-count { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.75rem; }
.pts-sendback-sheet { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; }
:root[data-theme="dark"] .pts-magic-sticky { background: #111827; }
:root[data-theme="dark"] .pts-magic-day { color: #f9fafb; }