/* ============================================================
   MetroASAP — Application Shell (core staff styles)
   Portal, technician, and FOIA styles load per-layout via HeadContent.
   ============================================================ */

: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 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(13, 110, 253, 0.22);
    border-left: 3px solid #0d6efd;
    color: #052c65;
}

.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(13, 110, 253, 0.35);
    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: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 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-logo-img { width: 22px; height: 22px; }
.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 {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 12px 8px;
    flex-shrink: 0;
}

.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-input {
    width: 100%;
    padding: 7px 30px 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.9);
    font-size: 0.8125rem;
    line-height: 1.2;
    outline: none;
    transition: border-color var(--transition), background var(--transition);
}

.sidebar-nav-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.sidebar-nav-search-input:focus {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-nav-search-clear {
    position: absolute;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    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-search-clear:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

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

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

.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: 320px; }
.offcanvas.metro-drawer-md { --bs-offcanvas-width: 480px; }
.offcanvas.metro-drawer-lg { --bs-offcanvas-width: 640px; }
.offcanvas.metro-drawer-xl { --bs-offcanvas-width: min(820px, 95vw); }
.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;
}

.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-section-header {
    background: var(--metro-surface);
    border-bottom: 1px solid var(--metro-border);
    padding: 0.75rem 1rem;
}

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

.wo-detail-section-title {
    font-size: 0.9375rem;
    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);
    }

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

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

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

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

/* ── 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 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e2538 0%, #1a56db 100%);
    padding: 20px;
}

@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: 64px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
    display: inline-block;
}

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

.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-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: rgba(15, 23, 42, 0.52);
}

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

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

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

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

/* 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-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__spinner {
    flex-shrink: 0;
}

.metro-lazy-route-loading__label {
    white-space: nowrap;
}

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