/* ============================================================
   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;
    --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: #ffffff;
    --metro-surface-muted: #f8fafc;
    --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 12px 32px rgba(15, 23, 42, 0.06);
    --metro-shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.18);
    --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);
    --transition: 0.2s ease;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --metro-surface: #0b0b0d;
    --metro-surface-raised: #131317;
    --metro-surface-muted: #19191e;
    --metro-surface-float: #202027;
    --metro-bg: #000000;
    --metro-border: #27272f;
    --metro-border-strong: #3a3a45;
    --metro-text: #f5f5f7;
    --metro-text-muted: #a1a1ad;
    --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(255, 255, 255, 0.12);
    --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(255, 255, 255, 0.02);
    /* Bootstrap 5.3+ vars used heavily throughout shared pages */
    --bs-body-bg: var(--metro-bg);
    --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-tertiary-bg: rgba(20, 20, 20, 0.96);
    --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);
    --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: #181818;
    --bs-nav-pills-link-active-color: var(--metro-text);
}

/* ── 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(26, 86, 219, 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"] {
    /* Readable link/accent colors on the black-based dark theme */
    --bs-link-color: #8cb0f8;
    --bs-link-color-rgb: 140, 176, 248;
    --bs-link-hover-color: #a9c4fa;
    --bs-link-hover-color-rgb: 169, 196, 250;
    --bs-focus-ring-color: rgba(140, 176, 248, 0.28);
    --bs-primary-text-emphasis: #9ec1ff;
    --bs-primary-bg-subtle: rgba(26, 86, 219, 0.28);
    --bs-primary-border-subtle: rgba(140, 176, 248, 0.35);
}

.btn-primary {
    --bs-btn-bg: var(--metro-primary);
    --bs-btn-border-color: var(--metro-primary);
    --bs-btn-hover-bg: var(--metro-primary-dark);
    --bs-btn-hover-border-color: var(--metro-primary-dark);
    --bs-btn-active-bg: var(--metro-primary-dark);
    --bs-btn-active-border-color: var(--metro-primary-dark);
    --bs-btn-disabled-bg: var(--metro-primary);
    --bs-btn-disabled-border-color: var(--metro-primary);
    --bs-btn-focus-shadow-rgb: 26, 86, 219;
}

.btn-outline-primary {
    --bs-btn-color: var(--metro-primary);
    --bs-btn-border-color: var(--metro-primary);
    --bs-btn-hover-bg: var(--metro-primary);
    --bs-btn-hover-border-color: var(--metro-primary);
    --bs-btn-active-bg: var(--metro-primary);
    --bs-btn-active-border-color: var(--metro-primary);
    --bs-btn-disabled-color: var(--metro-primary);
    --bs-btn-disabled-border-color: var(--metro-primary);
    --bs-btn-focus-shadow-rgb: 26, 86, 219;
}

:root[data-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #8cb0f8;
    --bs-btn-border-color: rgba(140, 176, 248, 0.55);
}

.btn-success {
    --bs-btn-bg: var(--metro-success);
    --bs-btn-border-color: var(--metro-success);
    --bs-btn-hover-bg: #046c4b;
    --bs-btn-hover-border-color: #046c4b;
    --bs-btn-active-bg: #046c4b;
    --bs-btn-active-border-color: #046c4b;
    --bs-btn-disabled-bg: var(--metro-success);
    --bs-btn-disabled-border-color: var(--metro-success);
}

.btn-danger {
    --bs-btn-bg: var(--metro-danger);
    --bs-btn-border-color: var(--metro-danger);
    --bs-btn-hover-bg: #a91c1c;
    --bs-btn-hover-border-color: #a91c1c;
    --bs-btn-active-bg: #a91c1c;
    --bs-btn-active-border-color: #a91c1c;
    --bs-btn-disabled-bg: var(--metro-danger);
    --bs-btn-disabled-border-color: var(--metro-danger);
}

:root[data-theme="dark"] .text-primary {
    color: #8cb0f8 !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: #181818;
}

.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: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);
    color: var(--metro-text);
    box-shadow: var(--metro-shadow-lg);
}

: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"] .btn-outline-secondary {
    color: var(--metro-text-muted);
    border-color: var(--metro-border);
}

:root[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--metro-hover);
    border-color: var(--metro-border-strong);
    color: var(--metro-text);
}

: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, #000000 0%, #0d0d0d 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(26, 86, 219, 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: #212529;
}

:root[data-theme="dark"] .metro-cal-block--highlighted {
    background: rgba(26, 86, 219, 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: #495057; }

: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-bg);
}

/* ── 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: 0.9rem;
    background: var(--metro-bg);
    color: var(--metro-text);
}

:focus-visible {
    outline: 3px solid rgba(26, 86, 219, 0.35);
    outline-offset: 2px;
}

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

/* ── Layout Shell ───────────────────────────────────────────── */
.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);
}

/* ── 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(--transition), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease;
    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 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    overflow: hidden;
}

.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 */
.sidebar-brand .brand-icon:has(.sidebar-city-logo) {
    width: auto;
    max-width: 130px;
}
.sidebar-brand .brand-icon .sidebar-city-logo { width: auto; max-width: 120px; max-height: 38px; object-fit: contain; }

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

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

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

.sidebar.collapsed .sidebar-brand {
    justify-content: center;
    padding: 0 8px;
    gap: 0;
}

.sidebar-nav-edit-btn {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    transition: background var(--transition), color var(--transition);
}

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

.sidebar-nav-edit-btn--active {
    background: rgba(26, 86, 219, 0.35);
    color: #fff;
}

.sidebar-nav-edit-btn--active:hover {
    background: rgba(26, 86, 219, 0.5);
}

.sidebar.collapsed .sidebar-nav-edit-btn {
    display: none;
}

.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);
}

.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(26,86,219,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.collapsed .sidebar-badge {
    display: none;
}

/* 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;
    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-editor-arrange-row:last-child {
    border-bottom: 0 !important;
}

.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: #fafbfc;
}

.nav-editor-add-dept-filter .form-select {
    background-color: #fff;
}

.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, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-editor-add-family-header--grouping {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border-bottom-color: rgba(13, 110, 253, 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: #fafbfc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.75rem;
}

.nav-editor-add-crumb {
    color: #64748b;
}

.nav-editor-add-crumb--active {
    color: #334155;
    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: #f8fafc;
    border-left-color: rgba(13, 110, 253, 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: #f8fafc;
    border-left-color: rgba(13, 110, 253, 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: #f8fafc;
}

.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: #fafbfc;
}

.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;
}

/* 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);
}

/* 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;
    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 clips fixed children). */
.admin-view-as-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.45);
}

/* ── 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;
    padding: 0 20px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    backdrop-filter: blur(16px);
}

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

.topbar-toggle:hover { background: var(--metro-bg); }

.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-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(13, 110, 253, 0.08);
}

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

.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;
    padding: 24px;
    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-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: 1rem 1.25rem 0.875rem;
}

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

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

.wo-detail-hero__chips {
    margin-top: 0.5rem;
}

.wo-detail-hero__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    padding: 0.75rem 1.25rem;
    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.15rem;
}

.wo-detail-meta-label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--metro-text-muted, #6b7280);
}

.wo-detail-meta-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--metro-text);
    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;
}

@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;
}

.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%;
}

.wo-detail-dashboard .dashboard-grid-item-inner > .card.mb-3,
.wo-detail-dashboard .dashboard-grid-item-inner > .card.mb-2 {
    margin-bottom: 0 !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);
}

.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));
}

.login-bg {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: linear-gradient(135deg, #1e2538 0%, #1a56db 100%);
    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));
}

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

.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;
}

/* 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-btn,
    .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-brand {
        justify-content: center;
        padding: 0 8px;
        gap: 0;
    }

    .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;
}

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

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

/* 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%;
}

/* ── 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%, #fff));
    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);
}

.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 .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-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: #f3f4f6; color: #374151; }
.badge-cancelled   { background: #fef2f2; color: #991b1b; }
.badge-active      { background: #f0fdf4; color: #15803d; }
.badge-inactive    { background: #f3f4f6; color: #6b7280; }
.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: #eff6ff; color: #1d4ed8; }
.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: #f3f4f6; color: #374151; border: 1px solid var(--metro-border); }

:root[data-theme="dark"] .badge-soft-primary { background: rgba(29, 78, 216, 0.3); color: #93c5fd; }
: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: #d1d5db; 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: #f3f4f6; color: #6b7280; }
.priority-emergency { background: #7f1d1d; color: #fff; }
.priority-high      { background: #dc3545; color: #fff; }
.priority-normal    { background: #eff6ff; color: #1d4ed8; }
.priority-low       { background: #f3f4f6; color: #6b7280; }

: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: #d1d5db; }
: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: #9ca3af; }
: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: #9ca3af; }

/* 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;
    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); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-metro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition);
    text-decoration: none;
}

.btn-metro:hover { text-decoration: none; }

.btn-primary-metro  { background: var(--metro-primary); color: #fff; border-color: var(--metro-primary); }
.btn-primary-metro:hover { background: var(--metro-primary-dark); border-color: var(--metro-primary-dark); color: #fff; }

.btn-secondary-metro { background: var(--metro-surface); color: var(--metro-text); border-color: var(--metro-border); }
.btn-secondary-metro:hover { background: var(--metro-bg); }

.btn-danger-metro { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-danger-metro:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.btn-sm-metro { padding: 5px 11px; font-size: 0.8rem; }

/* ── 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.8s 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-empty .empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.4; }
.metro-empty p { font-size: 0.9rem; }

/* ── 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 .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);
}

.process-step-tracker .tracker-line {
    flex: 1;
    width: 2px;
    min-height: 1rem;
    background: var(--bs-border-color);
    margin-top: 2px;
}

.process-step-tracker .tracker-step-done .tracker-dot { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
.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.25); }
.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: var(--bs-light); color: var(--bs-secondary); border: 1px solid var(--bs-border-color); }

.process-step-tracker .tracker-step-active {
    background: var(--bs-primary-bg-subtle);
    border-radius: 0.375rem;
    margin: 0 -0.5rem;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* 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; }

/* 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;
}

.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 .process-step-tracker__step > .flex-grow-1 {
    padding-bottom: 0 !important;
    width: 100%;
}

.process-step-tracker--horizontal .process-step-tracker__step .d-flex {
    justify-content: center;
}

.process-step-tracker--horizontal .tracker-step-active {
    margin: 0;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

/* ── 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;
    transition: all var(--transition);
}

.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%, #1a56db 100%);
    padding: 20px;
}

.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: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.login-brand-mark {
    max-height: 96px;
    max-width: 220px;
    width: 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-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 { padding: 16px; }
    .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 #dee2e6;
    border-top: 1px solid #dee2e6;
}

.calendar-month-grid > * {
    min-width: 0;
}

.calendar-month-head-cell,
.calendar-month-day {
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.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);
    overflow: hidden;
    font-size: inherit;
}

.modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

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

/* 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;
}

.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) */
.modal-content {
    border: 1px solid var(--metro-border);
    border-radius: var(--bs-border-radius-lg, 0.75rem);
    box-shadow: var(--metro-shadow-lg);
}

/* 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). */
.modal.show.d-block.metro-modal-stacked {
    position: fixed;
    inset: 0;
    z-index: 1060;
}

.modal.show.d-block.metro-modal-stacked::before {
    z-index: 0;
}

.modal.show.d-block.metro-modal-stacked .modal-dialog {
    z-index: 1;
}

/* ── 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(37, 99, 235, 0.1);
    color: #2563eb;
    font-size: 1.15rem;
}

.checklist-section-card .card-header {
    background: linear-gradient(180deg, rgba(37, 99, 235, 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) ── */
.metro-fab-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    /* 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: 0.5rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

.metro-fab-stack > * {
    pointer-events: auto;
}

.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(320px, 92vw);
    border-radius: 0.5rem !important;
    animation: metro-msg-toast-in 0.22s ease-out;
}

@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;
}

/* ── 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(13, 110, 253, 0.12),
        rgba(13, 110, 253, 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(13, 110, 253, 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(720px, 96vw);
    height: min(560px, 70vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.metro-msg-panel--fullpage {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: min(620px, calc(100vh - 11rem));
}

.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.55rem 0.65rem;
    position: relative;
    cursor: pointer;
}

.metro-msg-thread-row:hover {
    background: rgba(13, 110, 253, 0.06);
}

.metro-msg-thread-row.active {
    background: rgba(13, 110, 253, 0.12);
}

.metro-msg-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.62rem;
}

.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(13, 110, 253, 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(13, 110, 253, 0.12);
    color: var(--bs-primary);
    border: 1px solid rgba(13, 110, 253, 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(13, 110, 253, 0.2);
    border-color: rgba(13, 110, 253, 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(13, 110, 253, 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(13, 110, 253, 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(13, 110, 253, 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(13, 110, 253, 0.06) 0%, rgba(13, 110, 253, 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(13, 110, 253, 0.12) 0%, rgba(13, 110, 253, 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(13, 110, 253, 0.2);
}

.metro-msg-menu-emoji--mine {
    background: rgba(13, 110, 253, 0.18);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 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(13, 110, 253, 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(13, 110, 253, 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(13, 110, 253, 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(13, 110, 253, 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(13, 110, 253, 0.35);
    background: rgba(13, 110, 253, 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(13, 110, 253, 0.45);
    background: rgba(13, 110, 253, 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(13, 110, 253, 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(13, 110, 253, 0.2);
}

.sortable-list-handle {
    cursor: grab;
    padding: 0.15rem 0.25rem;
    flex-shrink: 0;
    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 {
    opacity: 0.55;
}

tr.sortable-table-row--drop-target td {
    border-top: 2px solid var(--bs-primary, #0d6efd);
}

.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--active {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.06);
}

.file-drop-zone-hint {
    pointer-events: none;
}

.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: #fff;
    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%;
}

@media (max-width: 768px) {
    .metro-map-canvas {
        height: min(55dvh, 520px);
        min-height: 280px;
    }

    .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: none;
    border-radius: 8px;
    background: #fff;
    color: #1a56db;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.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: #1a56db;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid #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-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;
    overflow: auto;
    background: var(--bs-body-bg, #fff);
    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(26, 86, 219, 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(26, 86, 219, 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; }
.checkin-shell { background: #f8f9fa; }
.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-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-dropdown {
    max-height: 22rem;
    overflow-y: auto;
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.18);
}

.citizen-wo-timeline-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--metro-primary);
}

.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: #212529;
}

.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%),
        rgba(10, 10, 12, 0.9);
    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);
}

: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"] .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 ───────────────────────────────────────────── */
.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;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .spinner-border {
        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;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

.metro-reduced-motion .spinner-border {
    animation: none !important;
}

/* Property detail — Google Maps Street View historical imagery */
.property-maps-host {
    position: relative;
    overflow: hidden;
    background: #e9ecef;
}

.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--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 {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.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(26, 86, 219, 0.18);
    border-color: var(--metro-primary) !important;
    background-color: rgba(26, 86, 219, 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(--bs-body-bg, #fff);
    z-index: 12000;
}

.metro-app-loading.metro-app-loading--hidden {
    display: none;
}

/* ── Lazy WASM feature assembly load (first navigation to a module) ─ */
.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) 42%, transparent);
    backdrop-filter: blur(4px);
    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;
}

@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%, #fff));
    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: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.metro-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.5rem;
    background: var(--metro-surface, #fff);
    border: 1px solid var(--metro-border, #dee2e6);
    border-left-width: 4px;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
    font-size: 0.875rem;
    color: var(--metro-text, inherit);
    pointer-events: auto;
    animation: metro-toast-in 0.18s ease-out;
}

@keyframes metro-toast-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: none; }
}

.metro-toast-success { border-left-color: var(--bs-success, #198754); }
.metro-toast-success .metro-toast-icon { color: var(--bs-success, #198754); }
.metro-toast-error { border-left-color: var(--bs-danger, #dc3545); }
.metro-toast-error .metro-toast-icon { color: var(--bs-danger, #dc3545); }
.metro-toast-info { border-left-color: var(--bs-info, #0dcaf0); }
.metro-toast-info .metro-toast-icon { color: var(--bs-info, #0dcaf0); }

.metro-toast-icon {
    font-size: 1.1rem;
    line-height: 1.2;
}

.metro-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.metro-toast-title {
    font-weight: 600;
}

.metro-toast-close {
    font-size: 0.7rem;
    margin-top: 0.15rem;
}

: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);
}

/* ── 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; }

/* ── 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: 56px;
    max-width: 140px;
    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;
}