/* ===== Azia integration overrides ===== */
body.az-dashboard-page {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 42%, #f8fafc 100%);
    color: var(--text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#appContent {
    min-height: 100vh;
}

/* Unified fixed header layout */
:root {
    --app-header-height: 80px;
}

.az-header.app-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: var(--app-header-height) !important;
    z-index: 1100 !important;
    background: linear-gradient(180deg, #ffffff, #fbfbfd);
    border-bottom: 1px solid rgba(15,23,42,0.06);
}

.app-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 12px;
}

/* Compatibility fixes for original header markup (app-header-top-row) */
.app-header-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    gap: 12px !important;
}

.az-header-left, .az-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Ensure header children are positioned inline at top (remove stray top offsets) */
.az-logo.app-logo, .app-header-copy, .app-header-search, .nav-user, .sidebar-search-card {
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
}

/* Center search region and preserve blue search button styling */
.app-header-search { flex: 1 1 420px; display:flex; align-items:center; justify-content:center; }
.app-header-search input { width: 100%; max-width: 420px; }
.app-header-search button { background: #2563eb; color: #fff; border: none; }

/* Ensure dropdown avatar sits at the right edge */
.nav-user { margin-left: 8px; }

/* Keep a clear gap between the header search bar and the user dropdown so they are
   never flush against each other (most noticeable in the wide / fullscreen layout). */
.az-header.app-header .az-header-right { margin-left: 22px !important; }

/* Push main content below fixed header */
#toolContainer { padding-top: var(--app-header-height) !important; }

/* Safety overrides to prevent the header from filling the viewport.
   These rules force the header and its top-row to a fixed height and
   neutralize stray top offsets or transforms on child elements. */
.az-header.app-header {
    height: var(--app-header-height) !important;
    max-height: var(--app-header-height) !important;
    overflow: visible !important;
}

.az-header.app-header .app-header-top-row,
.az-header.app-header .app-header-inner {
    height: var(--app-header-height) !important;
    min-height: 0 !important;
    align-items: center !important;
}

/* Reset any accidental absolute positioning applied to header children */
.az-header.app-header .az-logo.app-logo,
.az-header.app-header .sidebar-search-card,
.az-header.app-header .app-header-search,
.az-header.app-header .nav-user,
.az-header.app-header .app-header-copy {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
}

/* If scripts set large inline heights, cap them visually */
.az-header.app-header[style] {
    max-height: var(--app-header-height) !important;
}

/* Ensure the main content remains under the header. Only #toolContainer carries
   the header-height offset — applying it to the nested .az-content-dashboard as
   well stacked a second header-height below the header, which is what produced
   the large gap between the header and the first card. */
#toolContainer { padding-top: var(--app-header-height) !important; }

/* Clean, permanent header layout that preserves original HTML structure.
   Keeps header fixed at top, centers children on a single row, and pushes
   the main content area down. This avoids aggressive resets and preserves
   existing element classes and event handlers. */
:root { --app-header-height: 80px; }

.az-header.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--app-header-height);
    z-index: 1100;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}

.az-header.app-header .container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0 18px;
}

.app-header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--app-header-height);
    gap: 12px;
}

.az-header-left { display:flex; align-items:center; gap:12px; }
.az-header-right { display:flex; align-items:center; gap:12px; }

/* Keep search visually intact (blue search button preserved) */
.sidebar-search-card.app-header-search { display:flex; align-items:center; }
.sidebar-search-card.app-header-search input { height: 40px; }
.sidebar-search-card.app-header-search button { height: 40px; background:#2563eb; color:#fff; border:none; }

/* Ensure the dropdown sits visually under the header */
.nav-user { position: relative; }
.nav-user-dropdown { position: absolute; right: 0; top: calc(var(--app-header-height) + 8px); z-index: 1100; }

/* Ensure main content is always below header; JS will adjust exact padding if menu shows */
#toolContainer { padding-top: var(--app-header-height); box-sizing: border-box; }

/* Header normalization helper styles (avoid overflow while JS measures) */
.az-header.app-header * { box-sizing: border-box; }


.az-header-left { display:flex; align-items:center; gap:12px; order: 1; }
.app-header-copy { font-weight:700; }

/* Place search immediately to the left of the user panel (right side of header) */
.app-header-center { order: 2; flex: 1 1 auto; display:flex; align-items:center; gap:12px; justify-content:flex-end; }
.app-header-search { display:flex; align-items:center; flex: 0 0 360px; max-width: 360px; justify-content:flex-end; }
.app-header-search input { width: 100%; padding: 10px 12px; border-radius: 8px 0 0 8px; border:1px solid var(--border); }
.app-header-search button { padding: 10px 12px; border-radius: 0 8px 8px 0; border:1px solid var(--border); background:#eef2ff; }

.az-header-right { display:flex; align-items:center; gap:12px; order: 3; }
.nav-user { position:relative; }
.nav-user-btn { background:transparent; border:none; cursor:pointer; display:flex; align-items:center; gap:8px; }
.nav-user-dropdown { position:absolute; right:0; top:100%; margin-top:8px; background:white; border:1px solid rgba(15,23,42,0.08); box-shadow:0 8px 24px rgba(15,23,42,0.12); padding:8px; border-radius:8px; min-width:160px; z-index:1100; }
.nav-user-item { display:block; width:100%; text-align:left; padding:8px 10px; background:transparent; border:none; cursor:pointer; }
.nav-user-item:hover { background:#f1f5f9; }

/* Push main content down below the header */
#toolContainer { padding-top: var(--app-header-height); }


/* Header / content stacking fixes to prevent the header from overlapping main content
   when its computed height is unusually large. Adjust --app-header-height if your
   header uses a different measured height. */
:root {
    --app-header-height: 80px; /* adjust as needed */
}

/* Dark mode styles */

/* Alias for backward-compatible class name requested by user */
.moving-trucks-bg { }
.moving-trucks-bg, .truck-background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -3; }

/* When wallpaper is visible reduce contrast in dark mode (dark mode removed) */
.truck-sprite { opacity: 0.1; }

/* Wallpaper disabled */
body.wallpaper-disabled {
    background-image: none !important;
    background-color: #ffffff !important;
}

/* dark mode removed � no combined rule */

/* ── Settings page layout ─────────────────────────────────────────────
   Each row: setting name + description stacked on the left; the control
   (toggle / button / stepper) right-aligned and vertically centred. */
.settings-container { padding: 24px; }
.settings-group { margin-bottom: 20px; }
.settings-card .settings-row { display:flex; flex-direction:column; gap:8px; }

.settings-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:18px 0;
    border-bottom:1px solid rgba(15,23,42,0.06);
    flex-wrap:wrap;
}
.settings-card .settings-item:last-child { border-bottom:none; }

/* Left column: name (bold, larger) above description (smaller, muted). */
.settings-info { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 260px; }
.settings-label { font-weight:700; font-size:1.1rem; margin:0; }
.settings-desc { font-size:0.925rem; color:var(--muted); margin:0; line-height:1.4; }

/* Right column: the control, vertically centred, sized to its content. */
.settings-control { display:flex; align-items:center; gap:12px; flex:0 0 auto; }

/* Stacked variant (e.g. Change Password): control drops full-width below. */
.settings-item-stacked { flex-direction:column; align-items:stretch; }
.settings-item-stacked .settings-info { flex:1 1 auto; }
.settings-item-stacked .settings-control { width:100%; }

/* Text-size stepper (− / + buttons) */
.text-size-control { display:flex; align-items:center; gap:10px; }
.text-size-btn {
    width:30px; height:30px; flex:0 0 auto;
    border:1px solid #c7d6f5; border-radius:8px;
    background:#fff; color:#2563eb; font-size:1.275rem; font-weight:700; line-height:1;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
    transition:background .15s, border-color .15s, color .15s;
}
.text-size-btn:hover:not(:disabled) { background:#2563eb; color:#fff; border-color:#2563eb; }
.text-size-btn:disabled { opacity:.45; cursor:default; }
.text-size-value { font-size:0.975rem; color:#2563eb; font-weight:600; min-width:46px; text-align:center; }
.text-size-preview-btn {
    margin-left:6px; border:1px solid #c7d6f5; border-radius:8px;
    background:#fff; color:#2563eb; font-size:0.905rem; font-weight:600;
    padding:6px 12px; cursor:pointer; white-space:nowrap;
    transition:background .15s, border-color .15s, color .15s;
}
.text-size-preview-btn:hover { background:#2563eb; color:#fff; border-color:#2563eb; }

/* ── Text-size picker dialog (opened from Settings) ───────────────────────
   Lives in document.body (outside #appContent) so the global text zoom never
   scales the picker itself — only the live preview area is zoomed. */
.font-onboard-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;              /* above the auth screen and fixed app header */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.font-onboard-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.font-onboard-close {
    position: absolute; top: 10px; right: 12px;
    width: 32px; height: 32px;
    border: none; background: transparent;
    color: #94a3b8; font-size: 1.625rem; line-height: 1;
    cursor: pointer; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.font-onboard-close:hover { background: #f1f5f9; color: #0f172a; }
.font-onboard-title { font-size: 1.275rem; font-weight: 800; color: #0f172a; }
.font-onboard-sub { font-size: 0.945rem; color: #64748b; line-height: 1.4; margin-top: 4px; }
.font-onboard-controls { display: flex; align-items: center; justify-content: center; gap: 16px; }
.font-onboard-btn {
    width: 48px; height: 48px; flex: 0 0 auto;
    border-radius: 50%; border: 1.5px solid #cbd5e1;
    background: #f8fafc; color: #0f172a;
    font-size: 1.725rem; font-weight: 700; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.font-onboard-btn:hover:not(:disabled) { background: #eef2f7; }
.font-onboard-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.font-onboard-value { min-width: 92px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.font-onboard-value > span:first-child { font-size: 1.625rem; font-weight: 800; color: #2563eb; }
.font-onboard-pct { font-size: 0.825rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.font-onboard-preview-label { font-size: 0.785rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
.font-onboard-preview-frame {
    border: 1px solid #e2e8f0; border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc, #eef2f7);
    padding: 10px; height: 280px; overflow: hidden;
}
.font-onboard-preview-zoom { display: flex; flex-direction: column; gap: 8px; transform-origin: top left; }
.font-onboard-pv-card { padding: 0.6rem 0.7rem !important; }
.font-onboard-pv-scores { display: flex; gap: 16px; }
.font-onboard-pv-score { display: flex; flex-direction: column; gap: 2px; }
.font-onboard-pv-table { width: 100%; border-collapse: collapse; font-size: 0.845rem; }
.font-onboard-pv-table th, .font-onboard-pv-table td {
    text-align: left; padding: 3px 6px; border-bottom: 1px solid #eef2f7; color: #334155;
}
.font-onboard-pv-table th { font-size: 0.725rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.font-onboard-continue {
    margin-top: 2px; width: 100%; padding: 13px 16px;
    border: none; border-radius: 10px;
    background: #2563eb; color: #fff;
    font-size: 1.125rem; font-weight: 800; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.font-onboard-continue:hover { background: #1d4ed8; }

/* Export-to-PDF action on saved report cards (sits in the top-right corner with
   the status dot + remove button). */
.report-export-pdf-btn {
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    background:#fff; color:#2563eb; border:1px solid #c7d6f5;
    border-radius:6px; padding:4px 10px; font-size:0.845rem; font-weight:600;
    cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.report-export-pdf-btn:hover { background:#2563eb; color:#fff; border-color:#2563eb; }
.report-export-pdf-btn:active { transform:translateY(1px); }

/* Export-to-PDF modal */
.export-pdf-overlay {
    position:fixed; inset:0; background:rgba(15,23,42,0.55);
    display:flex; align-items:center; justify-content:center; z-index:4000; padding:16px;
}
.export-pdf-modal {
    background:#fff; border-radius:12px; width:min(440px,94vw);
    box-shadow:0 24px 60px rgba(15,23,42,0.35);
    max-height:92vh; overflow:auto;
}
.export-pdf-modal-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid #eef1f6;
}
.export-pdf-modal-title { font-size:1.175rem; font-weight:700; color:#0f172a; }
.export-pdf-close { background:none; border:none; font-size:1.175rem; color:#94a3b8; cursor:pointer; line-height:1; padding:4px; }
.export-pdf-close:hover { color:#334155; }
.export-pdf-modal-body { padding:18px 20px 6px; }
.export-pdf-modal-desc { font-size:0.975rem; color:#64748b; margin:0 0 14px; }
.export-pdf-range { display:flex; gap:8px; }
.export-pdf-range-opt {
    flex:1; padding:10px 6px; border:1.5px solid #e2e8f0; border-radius:8px;
    background:#f8fafc; color:#334155; font-size:0.975rem; font-weight:600; cursor:pointer;
    transition:border-color .15s, background .15s, color .15s;
}
.export-pdf-range-opt:hover { border-color:#c7d6f5; }
.export-pdf-range-opt.is-selected { border-color:#2563eb; background:#2563eb; color:#fff; }
.export-pdf-status { padding:2px 20px 0; font-size:0.925rem; min-height:16px; }
.export-pdf-status.is-busy { color:#2563eb; }
.export-pdf-status.is-error { color:#dc2626; }
.export-pdf-modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:12px 20px 18px; }
.export-pdf-btn-cancel {
    background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:8px 16px;
    font-size:0.975rem; font-weight:600; color:#475569; cursor:pointer;
}
.export-pdf-btn-cancel:hover { background:#f1f5f9; }
.export-pdf-btn-go {
    background:#2563eb; border:1px solid #2563eb; border-radius:8px; padding:8px 18px;
    font-size:0.975rem; font-weight:600; color:#fff; cursor:pointer;
}
.export-pdf-btn-go:hover { background:#1d4ed8; }
.export-pdf-btn-go:disabled { opacity:.6; cursor:default; }

/* Export modal — section checklist */
.export-pdf-field-label { font-size:0.845rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:#64748b; margin:14px 0 6px; }
.export-pdf-sections { max-height:230px; overflow-y:auto; border:1px solid #e2e8f0; border-radius:8px; padding:8px 12px; }
.export-pdf-check { display:flex; align-items:center; gap:8px; font-size:0.975rem; color:#334155; padding:3px 0; cursor:pointer; }
.export-pdf-check input { accent-color:#2563eb; cursor:pointer; width:15px; height:15px; flex:0 0 auto; }
.export-pdf-selectall { font-weight:700; color:#0f172a; padding-bottom:7px; margin-bottom:5px; border-bottom:1px solid #eef1f6; }
.export-pdf-group { margin:7px 0; }
.export-pdf-group-toggle { font-weight:700; color:#0f172a; }
.export-pdf-item-row { padding-left:24px; }
.export-pdf-item-row span { color:#475569; }

/* Toggle switch */
.switch { position:relative; display:inline-block; width:46px; height:26px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ccc; transition:.2s; border-radius:26px; }
.slider:before { position:absolute; content:''; height:20px; width:20px; left:3px; bottom:3px; background:white; transition:.2s; border-radius:50%; }
.switch input:checked + .slider { background:#2563eb; }
.switch input:checked + .slider:before { transform:translateX(20px); }

/* Avatar upload/preview */
.avatar-control { display:flex; gap:12px; align-items:center; }
.avatar-preview-wrap { width:80px; height:80px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#f8fafc; overflow:hidden; }
.avatar-preview-wrap img { width:100%; height:100%; object-fit:cover; }
.avatar-emoji { font-size:42px; }
.avatar-actions input[type=file] { display:block; }
.btn-secondary { background:#f1f5f9; border:1px solid rgba(15,23,42,0.06); }
/* Improve spacing and layout for Settings page */
.settings-card {
    padding: 24px !important;
    box-sizing: border-box;
}
.settings-card .settings-row { gap: 8px; }
.settings-card .settings-item { padding: 18px 4px; margin-bottom: 0; }
.settings-card .settings-item:last-child { margin-bottom: 0; }

/* Avatar upload spacing */
.avatar-control { display:flex; gap:16px; align-items:center; padding:0; }
.avatar-preview-wrap { flex: 0 0 80px; }
.avatar-actions { display:flex; flex-direction:column; gap:8px; }

/* Change Password form (stacked settings item) */
.change-password-form { flex-direction:column; align-items:stretch; gap:14px; width:100%; max-width:440px; }
.change-pw-field { display:flex; flex-direction:column; gap:6px; }
.change-pw-field label { font-size:0.85rem; font-weight:600; color:var(--muted); }
.change-pw-field input {
    padding:9px 11px;
    border:1px solid rgba(15,23,42,0.18);
    border-radius:6px;
    font-size:0.95rem;
    background:#fff;
    color:inherit;
    box-sizing:border-box;
    width:100%;
}
.change-pw-field input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,0.15); }
.change-pw-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:2px; }
.change-pw-status { font-size:0.9rem; font-weight:600; min-height:1.2em; }
.change-pw-status.is-error { color:#dc2626; }
.change-pw-status.is-success { color:#16a34a; }

/* Dropdown menu item icons */
.nav-user-item-icon { display:inline-block; width:1.35rem; margin-right:0.5rem; text-align:center; font-size:0.95rem; }
.avatar-actions input[type=file] { max-width: 220px; }
.avatar-actions .btn { width: auto; }

/* Avatar preview styling */
#avatarPreview { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: none; }
.nav-avatar-small { width:24px; height:24px; border-radius:50%; display:block; object-fit:cover; }
.nav-avatar-large { width:40px; height:40px; border-radius:8px; display:block; object-fit:cover; }

/* Ensure form groups have spacing */
.settings-card .form-group, .settings-card .input-group, .settings-card .admin-create-field {
    margin-bottom: 20px;
}

/* Ensure nav avatars look correct */
.nav-user-avatar img { width:24px; height:24px; border-radius:50%; display:block; }
.nav-user-greeting-avatar img { width:40px; height:40px; border-radius:8px; display:block; }
.nav-user-greeting-avatar { display:inline-block; margin-right:8px; vertical-align:middle; }

/* Make header fixed at the top and ensure it sits above page content */
.az-header.app-header,
nav.az-header.app-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: var(--app-header-height) !important;
    z-index: 1100 !important;
}

/* Push main content below the fixed header so it is never hidden behind it. */
#toolContainer {
    position: relative;
    z-index: 1;
    padding-top: var(--app-header-height) !important;
}

/* Ensure page content region respects the header offset */
#pageContent,
.az-content-dashboard,
.dashboard-main {
    position: relative;
    z-index: 1;
}

/* If you still see overlap, increase the header height variable or inspect
   the header children that may be expanding it (see diagnostic script below). */

.auth-container {
    min-height: 100vh;
    padding: 2rem 1rem;
}

.auth-page-shell {
    max-width: 1140px;
    margin: 0 auto;
}

.auth-page-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(121, 135, 161, 0.18) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(28, 39, 60, 0.12) !important;
}

.auth-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    min-height: 680px;
}

.auth-brand-panel {
    padding: 3.5rem;
    background: linear-gradient(135deg, #1c273c 0%, #33415c 100%);
    color: #fff;
}

.auth-brand-panel h1 {
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.05;
    margin-bottom: 1.25rem;
}

.auth-brand-panel .subtitle,
.auth-brand-panel .auth-brand-point span {
    color: rgba(255, 255, 255, 0.78);
}

.auth-brand-points {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.auth-brand-point {
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.auth-brand-point strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #fff;
}

.auth-form-panel {
    padding: 3rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-form-panel h2 {
    font-size: 2.025rem;
    font-weight: 700;
    color: #1c273c;
    margin-bottom: 0.75rem;
}

.auth-form-stack {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.error-message {
    min-height: 1.25rem;
    color: #b91c1c;
    font-size: 1.025rem;
    font-weight: 600;
}

.auth-input-grid {
    display: grid;
    gap: 0.9rem;
}

.auth-input-grid input,
.sidebar-search-card input {
    height: 48px;
    border-radius: 10px !important;
    border: 1px solid rgba(121, 135, 161, 0.24) !important;
    padding: 0.75rem 0.95rem !important;
    box-shadow: none !important;
}

.auth-action-button,
.sidebar-search-card button,
.app-logout-button {
    border: none !important;
    border-radius: 10px !important;
    background: #285cf3 !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.auth-action-button {
    padding: 0.9rem 1rem !important;
}

.auth-switch a {
    color: #285cf3;
    font-weight: 600;
    cursor: pointer;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: auto;
    background: rgba(244, 245, 251, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(121, 135, 161, 0.18);
    overflow: visible;
}

.app-header .container {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: 0;
    padding: 0.5rem 1.5rem;
    overflow: visible;
}

.app-header-top-row {
    display: flex;
}

.app-logo {
    white-space: nowrap;
}

.app-logo .logo-roi {
    color: #08306b;
}

.app-logo .logo-sight {
    color: #000;
    margin-left: 0.15rem;
    font-weight: 700;
}

.app-header-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-left: 1rem;
}

.app-header-copy strong {
    color: #1c273c;
    font-size: 1.125rem;
}

.app-header-copy span {
    color: #7987a1;
    font-size: 0.925rem;
}

.app-header-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.app-header-menu::-webkit-scrollbar {
    display: none;
}

.nav-tab {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #596882;
    font-size: 0.905rem;
    font-weight: 600;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-tab:hover,
.nav-tab.active {
    background: #fff;
    color: #285cf3;
    border-color: rgba(40, 92, 243, 0.15);
    box-shadow: 0 8px 20px rgba(40, 92, 243, 0.08);
}

.app-header-right {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.app-header-search {
    min-width: 300px;
    background: transparent !important;
}

.app-header-right {
    position: relative;
}

.carrier-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2000;
    background: #ffffff;
    border: 1px solid #e1e5ea;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(16,24,40,0.08);
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
    display: none; /* shown by JS when there are results */
}

.carrier-search-results {
    /* stronger rounded container */
    border-radius: 8px;
}

.carrier-search-result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 16px;
    gap: 4px;
    border-bottom: 1px solid rgba(15,23,42,0.06);
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
}

.carrier-search-result:last-child { border-bottom: none; }

.carrier-search-result:hover {
    background: #f3f6ff;
    transition: background 120ms ease;
}

.carrier-name {
    color: #0f1724;
    font-weight: 700;
    font-size: 1.105rem;
}

.carrier-dot {
    color: #596882;
    font-size: 0.985rem;
}

.carrier-state {
    color: #596882;
    font-size: 0.945rem;
}

/* Make the dropdown look like distinct pills by adding spacing between items */
.carrier-search-results .carrier-search-result { margin: 6px; }

/* Constrain overall height and add a subtle inner padding */
.carrier-search-results { max-height: 320px; padding: 6px; overflow-y: auto; box-sizing: border-box; }

/* Scrollbar style for modern browsers */
.carrier-search-results::-webkit-scrollbar { width: 8px; }
.carrier-search-results::-webkit-scrollbar-thumb { background: rgba(16,24,40,0.08); border-radius: 8px; }

.app-header-search input {
    min-width: 180px;
    background: #fff !important;
}

/* Remove button for report rows on Profile page */
.remove-report-btn {
    background: transparent;
    border: none;
    color: var(--text-soft);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 8px;
}
.remove-report-btn:hover {
    color: #dc3545; /* red on hover */
}
.report-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.app-header-search button {
    min-width: 48px;
    width: 48px;
    height: 48px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-button-icon {
    font-size: 1.275rem;
    line-height: 1;
}

.app-header-search button.is-loading {
    position: relative;
    min-width: 48px;
    width: 48px;
    color: transparent !important;
    pointer-events: none;
}

.app-header-search button.is-loading::after {
    content: '';
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-right-color: transparent;
    animation: button-spinner 0.8s linear infinite;
}

@keyframes button-spinner {
    to {
        transform: rotate(360deg);
    }
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(121, 135, 161, 0.2);
}
.nav-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}
.nav-user-btn:hover {
    background: rgba(0,0,0,0.03);
}
.nav-user-avatar { font-size: 1.125rem; }
.nav-user-caret { font-size: 0.925rem; color: var(--text-muted); }
.nav-user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card);
    border-radius: 8px;
    min-width: 180px;
    z-index: 60;
    padding: 0.5rem;
}
.nav-user-greeting { font-size: 1.025rem; margin-bottom: 0.4rem; color: var(--text-muted); }
.nav-user-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.45rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.nav-user-item:hover { background: rgba(0,0,0,0.03); }
.nav-user-sep { height: 1px; background: var(--border); margin: 0.45rem 0; }

.nav-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.nav-user-meta span {
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7987a1;
}

.nav-user-meta strong {
    color: #1c273c;
    font-size: 1.025rem;
}

.nav-logout-btn {
    margin-left: 0.65rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.905rem;
    font-weight: 600;
    color: #fff;
    background: #5b6b88;
    border: 1px solid #4a597a;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.1;
    transition: background 0.15s ease, transform 0.15s ease;
}

.nav-logout-btn:hover {
    background: #4a597a;
}

.nav-logout-btn:active {
    transform: translateY(1px);
}

.app-logout-button {
    padding: 0.72rem 1rem !important;
}

.app-dashboard-content {
    /* No top padding here: #toolContainer already offsets the fixed header, and
       .page-content-surface supplies the (gap-matching) space above the first
       card. Top padding here just re-opened the header→card gap. */
    padding-top: 0;
    padding-bottom: 2rem;
}

.app-dashboard-content .container {
    max-width: none;
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.app-dashboard-body {
    display: block;
}

.dashboard-shell {
    position: relative;
}

.dashboard-sidebar {
    display: none !important;
}

.dashboard-main {
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

.dashboard-section-header,
.tool-intro-card,
.app-state-card,
.card,
.subpanel-card,
.info-panel,
.basics-chart-container,
.map-shell,
.violation-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body.az-dashboard-page .card,
body.az-dashboard-page .subpanel-card,
body.az-dashboard-page .info-panel,
body.az-dashboard-page .basics-chart-container,
body.az-dashboard-page .map-shell,
body.az-dashboard-page .violation-card,
body.az-dashboard-page .dashboard-section-header,
body.az-dashboard-page .tool-intro-card,
body.az-dashboard-page .app-state-card {
    background: var(--glass) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: blur(9.3px);
    -webkit-backdrop-filter: blur(9.3px);
}

.card:hover,
.subpanel-card:hover,
.info-panel:hover,
.basics-chart-container:hover,
.map-shell:hover,
.violation-card:hover,
.dashboard-section-header:hover,
.tool-intro-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
}

.dashboard-section-header {
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem !important;
}

.dashboard-section-header .section-label,
.tool-intro-card .section-label,
.auth-brand-panel .section-label,
.auth-form-panel .section-label {
    color: #285cf3;
    font-size: 0.865rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.dashboard-section-header .az-dashboard-title,
.tool-intro-card h1 {
    margin-bottom: 0.55rem;
    color: #1c273c;
}

.dashboard-section-header .az-dashboard-title,
.tool-intro-card h1 {
    font-size: clamp(1.6rem, 2vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.dashboard-section-header .az-dashboard-text,
.tool-intro-card .subtitle,
.az-dashboard-text {
    font-size: 1.075rem;
    line-height: 1.65;
}

.dashboard-section-header .az-dashboard-text,
.tool-intro-card .subtitle {
    color: var(--text-soft);
    margin-bottom: 0;
    max-width: 72ch;
}

/* ── Tab description-banner icons (Violations / Insurance & Authority / Incidents) ──
   The image is absolutely positioned against the LEFT edge, vertically centered, and
   sized to the card height minus a small margin (full colour, with a soft drop shadow).
   The title/description sit to its right. Scoped to .has-tab-icon so every other
   section header is untouched; padding-left reserves space so the text never runs
   under the image, and overflow:hidden keeps the image strictly inside the banner. */
.dashboard-section-header.has-tab-icon {
    position: relative;
    overflow: hidden;
    padding-left: 150px !important;
}
.tab-banner-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    height: calc(100% - 18px);   /* fit the card height with a ~9px top/bottom margin */
    width: auto;
    max-height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.25));
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
@media (max-width: 640px) {
    .dashboard-section-header.has-tab-icon { padding-left: 88px !important; }
    .tab-banner-icon { left: 10px; max-height: 60px; }
}

.tool-intro-card {
    padding: 1.75rem !important;
}

.tool-intro-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.tool-intro-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-intro-point {
    background: #f9fafc;
    border-radius: 14px;
}

.tool-intro-note {
    margin-top: 1.25rem;
}

.sidebar-nav-link,
.sidebar-anchor-link {
    text-align: left;
    transition: all 0.2s ease;
}

.sidebar-nav-link.active,
.sidebar-anchor-link.active {
    box-shadow: 0 10px 20px rgba(40, 92, 243, 0.09) !important;
}

.app-search-error {
    margin-bottom: 1rem;
}

.insurance-layout {
    display: grid;
    gap: 1.5rem;
}

.profile-history-card {
    /* Fill the (gutter-inset) content surface instead of a 100vw full-bleed hack
       that overflowed to the right. Horizontal padding gives the saved cards a
       margin from the container edges (smaller on mobile to preserve width). */
    padding: 1.5rem clamp(10px, 2vw, 24px) !important;
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
    border-radius: 0 !important;
}

.revocation-section {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}

.profile-history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    padding: 0 40px;
}

.profile-history-title {
    margin-bottom: 0;
}

.profile-history-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-history-filter-select {
    min-width: 130px;
    border: 1px solid rgba(121, 135, 161, 0.24);
    border-radius: 12px;
    background: #fff;
    color: #1c273c;
    font-weight: 600;
    padding: 0.6rem 0.8rem;
}

.profile-history-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-history-toolbar-status {
    color: #596882;
    font-size: 0.975rem;
    font-weight: 600;
}

.report-history-update-all-btn {
    min-width: 118px;
    padding: 0.82rem 1rem;
    border: 1px solid rgba(40, 92, 243, 0.22);
    border-radius: 14px;
    background: #285cf3;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.report-history-update-all-btn:hover:not(:disabled) {
    background: #1d4ed8;
    border-color: rgba(29, 78, 216, 0.3);
}

.report-history-update-all-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.report-history-update-all-btn.is-loading {
    min-width: 132px;
}

.report-history-list {
    display: grid;
    /* Single full-width column so rows (and the cards inside) stretch to fill the
       container instead of shrinking to their content width. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
}

.report-history-row {
    display: grid;
    /* The row renders only the report card now (the drag-handle/actions columns
       were removed in the redesign), so a single full-width column makes the card
       fill the row. The old `auto minmax(0,1fr) auto` left the card in the narrow
       first `auto` column with empty space to its right. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
    /* The whole row opens the report (handled by delegated click in legacy-fixes.js).
       Previously set inline per-row in JS; moved here when that wiring was removed. */
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.report-history-drag-handle {
    width: 38px;
    min-width: 38px;
    border: 1px solid rgba(121, 135, 161, 0.2);
    border-radius: 14px;
    background: #fff;
    color: #7987a1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    cursor: grab;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.report-history-drag-handle span {
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.report-history-drag-handle:hover:not(:disabled) {
    background-color: rgba(255,255,255,0.12);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 100%);
    border-color: rgba(40, 92, 243, 0.2);
}

.report-history-drag-handle:disabled {
    cursor: default;
    opacity: 0.65;
}

.report-history-placeholder {
    border: 1px dashed rgba(40, 92, 243, 0.26);
    border-radius: 16px;
    background: rgba(40, 92, 243, 0.05);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.report-history-row.is-dragging {
    z-index: 1200;
    cursor: grabbing;
}

.report-history-row.is-dragging .report-history-drag-handle {
    cursor: grabbing;
}

body.report-history-dragging-body {
    user-select: none;
}

body.report-history-dragging-body .report-history-row:not(.is-dragging) {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.report-history-actions {
    display: flex;
    gap: 0.45rem;
    align-items: stretch;
}

.report-history-item {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr;
    width: 100%;
    min-height: 52px;
    /* Bottom inset matches the side inset (0.7rem) so the stat cards line up with
       the card's bottom corners the same way they do at the sides. */
    padding: 0.3rem 0.7rem 0.7rem;
    border: 1px solid rgba(121, 135, 161, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.73);
    text-align: left;
    cursor: pointer;
    align-items: center;
    backdrop-filter: blur(9.3px);
    -webkit-backdrop-filter: blur(9.3px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 16px;
}

.report-history-item:disabled {
    cursor: default;
    opacity: 1;
}

.report-history-item:hover {
    background-color: rgba(238,242,255,0.16);
    background-image: linear-gradient(135deg, rgba(238,242,255,0.28) 0%, rgba(219,234,254,0.1) 100%);
    border-color: rgba(40, 92, 243, 0.2);
}

.report-history-item > * {
    position: relative;
    z-index: 1;
}

.report-history-item-loading::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--report-update-progress, 0%);
    background: linear-gradient(90deg, rgba(40, 92, 243, 0.16) 0%, rgba(96, 165, 250, 0.28) 100%);
    transition: width 0.35s ease;
    z-index: 0;
}

.report-history-item-loading {
    border-color: rgba(40, 92, 243, 0.22);
}

.report-history-item-client {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(255,255,255,0.04) 100%);
    border-color: rgba(21, 128, 61, 0.18);
}

.report-history-item-client:hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(21, 128, 61, 0.26);
}

.report-history-item-prospect {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.14) 0%, rgba(255,255,255,0.04) 100%);
    border-color: rgba(180, 83, 9, 0.18);
}

.report-history-item-prospect:hover {
    background: rgba(250, 204, 21, 0.17);
    border-color: rgba(180, 83, 9, 0.26);
}

/* Locked state during bulk update � gray tint, non-interactive */
.report-history-row-locked {
    pointer-events: none;
}

.report-history-item-locked {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(60%);
}

/* Report badges (restored original pill style) */
.report-history-item .badge,
.report-history-item .report-badge,
.report-history-item .report-history-iss,
.report-history-item .state-count-badge,
.report-history-item .report-history-dot {
    display: inline-block;
    padding: 8px 12px; /* restored */
    font-size: 16px; /* restored */
    line-height: 1;
    margin-right: 8px; /* spacing between badges */
    margin-bottom: 8px; /* allow wrapping with spacing */
    border-radius: 16px; /* restored */
    border: 1px solid rgba(15,23,42,0.06);
    background: rgba(15,23,42,0.03);
    color: var(--text) !important;
}

/* Ensure badges wrap cleanly inside the report row */
.report-history-main-cell { display:flex; flex-direction:column; gap:6px; }
.report-history-primary-cell .report-badge,
.report-history-primary-cell .report-history-dot { margin-right: 8px; }

.report-history-item-locked:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

.report-history-row-locked .report-history-actions {
    opacity: 0.4;
    pointer-events: none;
}

.report-history-row-locked .report-history-drag-handle {
    opacity: 0.3;
    pointer-events: none;
}

/* � The currently-updating card during bulk keeps normal pointer-events */
.report-history-row-locked:has(.report-history-item-loading) {
    pointer-events: auto;
    opacity: 1;
}

.report-history-row-locked .report-history-item-loading {
    opacity: 1;
    filter: none;
}

/* Confirmation dialog */
.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0);
    transition: background 0.2s ease, backdrop-filter 0.2s ease;
    opacity: 0;
}

.confirm-dialog-overlay.visible {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    opacity: 1;
}

.confirm-dialog {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    padding: 1.75rem 2rem;
    max-width: 420px;
    width: 90%;
    transform: scale(0.92);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.confirm-dialog-overlay.visible .confirm-dialog {
    transform: scale(1);
}

.carrier-load-progress-modal {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
}

.carrier-load-progress-dialog {
    width: min(420px, 100%);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
}

.carrier-load-progress-spinner {
    width: 2.35rem;
    height: 2.35rem;
    border: 3px solid rgba(37, 99, 235, 0.16);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: ntab-spin 0.7s linear infinite;
    flex-shrink: 0;
}

.carrier-load-progress-copy {
    min-width: 0;
}

.carrier-load-progress-dot {
    font-size: 1.005rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.2rem;
}

.carrier-load-progress-status {
    font-size: 0.945rem;
    color: #475569;
    line-height: 1.5;
}

.carrier-load-progress-modal.is-error .carrier-load-progress-spinner {
    border-color: rgba(185, 28, 28, 0.14);
    border-top-color: #b91c1c;
}

.carrier-load-progress-modal.is-error .carrier-load-progress-status {
    color: #991b1b;
}

/* ?? FMCSA outage modal (closable, dismisses to profile) ????????????????? */
.fmcsa-outage-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.fmcsa-outage-dialog {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.22);
    max-width: 440px;
    width: 100%;
    padding: 1.6rem 1.6rem 1.4rem;
    text-align: center;
}

.fmcsa-outage-close {
    position: absolute;
    top: 0.5rem;
    right: 0.7rem;
    background: none;
    border: 0;
    font-size: 1.625rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
}

.fmcsa-outage-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.fmcsa-outage-icon {
    font-size: 2.125rem;
    color: #b45309;
    margin-bottom: 0.4rem;
}

.fmcsa-outage-title {
    font-size: 1.225rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

.fmcsa-outage-message {
    font-size: 1.025rem;
    color: #334155;
    margin: 0 0 1.1rem;
    line-height: 1.45;
}

.fmcsa-outage-actions {
    display: flex;
    justify-content: center;
}

.fmcsa-outage-btn {
    background: #1d4ed8;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0.55rem 1.4rem;
    font-size: 1.025rem;
    font-weight: 600;
    cursor: pointer;
}

.fmcsa-outage-btn:hover {
    background: #1e40af;
}

.confirm-dialog-title {
    font-size: 1.225rem;
    font-weight: 700;
    color: #1c273c;
    margin-bottom: 0.6rem;
}

.confirm-dialog-message {
    font-size: 0.975rem;
    color: #475569;
    line-height: 1.55;
    margin-bottom: 1.5rem;
}

.confirm-dialog-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

.confirm-dialog-btn {
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1.4rem;
    font-size: 0.945rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.confirm-dialog-btn-no {
    background: #f1f5f9;
    color: #475569;
}

.confirm-dialog-btn-no:hover {
    background: #e2e8f0;
}

.confirm-dialog-btn-yes {
    background: #285cf3;
    color: #fff;
}

.confirm-dialog-btn-yes:hover {
    background: #1d4ed8;
}

.report-history-company {
    color: #1c273c;
    font-size: 1.275rem;
    font-weight: 600;
    line-height: 1.05;
}

.report-history-main-grid,
.report-history-footer-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(88px, 0.8fr));
    column-gap: 0.45rem;
    align-items: center;
}

.report-history-main-cell {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
    align-content: center;
    min-height: 100%;
}

.report-history-primary-cell {
    justify-items: start;
}

.report-history-main-cell strong {
    color: #596882;
    font-size: 0.945rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
}

.report-history-main-cell span {
    color: #1c273c;
    font-size: 1.125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.05;
}

.report-history-dot {
    color: #596882;
    font-size: 1.105rem;
}

.report-history-iss {
    /* Minimal/plain-text appearance for ISS score (restore original subtle look) */
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: normal !important;
    color: inherit !important;
    white-space: nowrap;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.report-history-iss-cell,
.report-history-alerts-cell,
.report-history-insurance-cell,
.report-history-updated-cell {
    justify-items: start;
}

.report-history-loading-status {
    color: #1d4ed8;
    font-size: 0.965rem;
    font-weight: 600;
    min-height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}

.report-history-loading-placeholder {
    visibility: hidden;
}

.report-history-empty {
    color: #7987a1;
    padding: 0.5rem 0;
}

.report-history-footer-row {
    position: absolute;
    right: 0.7rem;
    bottom: 0.22rem;
    width: auto;
    grid-template-columns: auto;
    gap: 0;
}

.report-history-footer-spacer {
    display: none;
}

.report-history-tag-select {
    min-width: 148px;
    border: 1px solid rgba(121, 135, 161, 0.24);
    border-radius: 14px;
    background: #fff;
    color: #1c273c;
    font-weight: 600;
    padding: 0.85rem 0.9rem;
}

.report-history-update-btn {
    min-width: 96px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(40, 92, 243, 0.22);
    border-radius: 14px;
    background: #eef2ff;
    color: #285cf3;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.report-history-update-btn:hover:not(:disabled) {
    background: #dbe7ff;
    border-color: rgba(40, 92, 243, 0.35);
}

.report-history-update-btn:disabled {
    cursor: default;
    opacity: 1;
}

.report-history-update-btn.is-success {
    background: #dcfce7;
    border-color: rgba(22, 163, 74, 0.28);
    color: #15803d;
}

.report-update-spinner {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 3px solid rgba(37, 99, 235, 0.22);
    border-top-color: #2563eb;
    animation: report-update-spin 0.8s linear infinite;
}

.report-update-checkmark {
    font-size: 1.125rem;
    line-height: 1;
}

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

.report-history-remove-btn {
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.06);
    color: #94a3b8;
    font-size: 0.975rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.report-history-remove-btn:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #dc2626;
}

.report-history-remove-btn:disabled {
    cursor: default;
    opacity: 0.4;
}

.responsive-panel-row {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.6fr);
    gap: 1.5rem;
    align-items: stretch;
}

.insurance-card {
    padding: 0.95rem 1.1rem !important;
}

.insurance-wide-card {
    width: 100%;
}

.authority-card {
    min-height: 0;
}

.authority-history-layout,
.insurance-history-layout {
    width: 100%;
}

.authority-history-panel {
    width: 100%;
}

.revocation-full-card {
    width: 100%;
}

.chameleon-summary-grid {
    margin-bottom: 1rem;
}

.overview-analytics-row {
    display: contents;
}

.overview-analytics-row > * {
    min-width: 0;
}

.overview-analytics-row .carrier-timeline-card,
.overview-analytics-row .basics-chart-row,
.overview-analytics-row .basics-chart-container {
    height: 100%;
    margin: 0;
}

.overview-analytics-row .carrier-timeline-card {
    display: flex;
    flex-direction: column;
}

.overview-analytics-row .carrier-timeline-shell,
.overview-analytics-row .carrier-timeline-track {
    flex: 1;
}

.chameleon-table-wrap {
    max-height: 260px;
    overflow: auto;
    padding-bottom: 0.6rem;
    margin-top: 0.2rem;
}

.chameleon-grouped-wrap {
    margin-top: 0.6rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    height: 380px;
    max-height: 380px;
}
.chameleon-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 8px;
    background: #fff;
    padding: 0.55rem 0.65rem;
    overflow: hidden;
}
.chameleon-section-title {
    font-size: 0.975rem;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}
.chameleon-section-count { color: #64748b; font-weight: 600; margin-left: 0.25rem; }
.chameleon-vin-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 0.25rem;
}
.chameleon-column-empty {
    color: #64748b;
    font-size: 0.975rem;
    text-align: center;
    padding: 1.25rem 0.5rem;
}
@media (max-width: 720px) {
    .chameleon-grouped-wrap {
        grid-template-columns: 1fr;
        height: auto;
        max-height: 600px;
    }
    .chameleon-column { max-height: 280px; }
}
.chameleon-vin-card {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 8px;
    background: #fff;
    padding: 0.55rem 0.75rem;
}
.chameleon-vin-card[open] { background: #fafbfc; }
.chameleon-vin-header {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.025rem;
}
.chameleon-vin-value code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.975rem;
    font-weight: 700;
    color: #0f172a;
}
.chameleon-vin-badge {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.845rem;
    font-weight: 700;
    white-space: nowrap;
}
.chameleon-carrier-list {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.chameleon-carrier-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 0.955rem;
}
.chameleon-carrier-row:first-child { border-top: none; }
.chameleon-carrier-main { display: flex; flex-direction: column; min-width: 0; }
.chameleon-carrier-name { font-weight: 600; color: #0f172a; }
.chameleon-carrier-dot { font-size: 0.865rem; color: #64748b; }
.chameleon-carrier-side { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.chameleon-carrier-loc { font-size: 0.865rem; color: #64748b; }
.chameleon-carrier-empty { justify-content: flex-start; color: #64748b; }
.chameleon-status-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.825rem;
    font-weight: 700;
}
.chameleon-status-active { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.chameleon-status-inactive { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.chameleon-status-unknown { background: rgba(148, 163, 184, 0.18); color: #475569; }

/* Inspection date + report state shown on each shared truck/trailer VIN card. */
.chameleon-vin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    padding: 0.4rem 0.7rem 0.15rem;
    font-size: 0.945rem;
    color: #475569;
}
.chameleon-vin-meta-label { font-weight: 700; color: #64748b; }

.violations-sort-btn {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.violations-sort-btn:hover {
    color: #285cf3;
}

/* ── Unified, font-independent table sort indicator (CSS triangle) ────────
   Replaces the old `::after { content: '?' }` placeholder and the Unicode
   ▲▼↕ glyphs that rendered as "?" in some fonts. Shared by the violations
   cards and the carrier-history "Status & Metrics" table. */
.sort-ind {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;   /* faint down triangle = sortable */
    opacity: 0.32;
    transition: opacity .12s ease;
}
.sort-ind.sort-asc {
    border-top: 0;
    border-bottom: 5px solid currentColor;
    opacity: 1;
}
.sort-ind.sort-desc {
    border-top: 5px solid currentColor;
    border-bottom: 0;
    opacity: 1;
}
.violations-sort-btn:hover .sort-ind,
.violations-sort-btn:focus-visible .sort-ind,
.ch-history-table thead th.ch-sortable:hover .sort-ind {
    opacity: 0.85;
}

.boc3-history-list {
    display: grid;
    gap: 0.75rem;
}

.boc3-history-item {
    /* Render directly inside the parent card � no nested white block. The
       parent .subpanel-card already provides the translucent surface. */
    border: 1px solid rgba(121, 135, 161, 0.18);
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.85rem 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 1rem;
    font-size: 1.005rem;
    color: var(--text);
}

.insurance-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(121, 135, 161, 0.3);
}

.insurance-table th,
.insurance-table td {
    border: 1px solid rgba(121, 135, 161, 0.3);
    padding: 0.85rem 0.95rem;
    vertical-align: top;
}

.insurance-table thead th {
    background: #eef2ff;
}

.oos-rates-table {
    font-size: 1.125rem !important;
}

.oos-rates-table th,
.oos-rates-table td {
    font-size: 1.125rem;
    padding: 1rem 1.1rem;
}

.authority-history-table th,
.authority-history-table td {
    font-size: 1.075rem;
}

.authority-history-alert {
    margin-bottom: 0.85rem;
    color: #b91c1c;
    font-weight: 700;
}

.revocation-card {
    background: #fef2f2 !important;
    border-left: 4px solid #b91c1c !important;
    padding: 1.2rem !important;
}

.revocation-card-title {
    margin-bottom: 0.55rem;
    color: #111827;
    font-size: 1.125rem;
    font-weight: 800;
}

.revocation-card-alert {
    color: #b91c1c;
    font-weight: 700;
}

.revocation-card-item {
    margin: 0.4rem 0 0;
    font-size: 1.075rem;
}

#companyInfoSection,
.full-width-card,
.two-column-grid {
    width: 100% !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.full-width-card,
#companyInfoSection {
    margin-bottom: 0.75rem;
}

.two-column-grid {
    gap: 1.25rem;
}

.company-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.company-card-span-2 {
    grid-column: span 2;
}

.company-card-span-3 {
    grid-column: 1 / -1;
}

.dashboard-main .company-snapshot-grid > .card,
.dashboard-main .company-snapshot-grid > .info-panel {
    min-height: auto;
    padding: 0.85rem 1rem !important;
}

#companyColIdentity,
#companyColAddresses,
#companyColContact,
#companyColFleetMetrics,
#companyColComplianceStatus {
    display: flex;
    flex-direction: column;
}

#companyColIdentity h3 {
    font-size: 1.425rem;
    line-height: 1.2;
    margin-bottom: 0.65rem;
}

#companyColIdentity .company-field-grid,
#companyColFleetMetrics .company-field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem 0.9rem;
}

#companyColAddresses,
#companyColContact,
#companyColComplianceStatus {
    gap: 0.55rem;
}

#companyColAddresses,
#companyColContact,
#companyColComplianceStatus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
}

#companyColAddresses .subpanel-title,
#companyColContact .subpanel-title,
#companyColComplianceStatus .subpanel-title,
#companyColAddresses .ov-detail-title,
#companyColContact .ov-detail-title,
#companyColComplianceStatus .ov-detail-title {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

#companyColIdentity p,
#companyColAddresses p,
#companyColContact p,
#companyColFleetMetrics p,
#companyColComplianceStatus p {
    font-size: 1.045rem;
    line-height: 1.45;
    margin: 0;
}

#companyColIdentity p strong,
#companyColAddresses p strong,
#companyColContact p strong,
#companyColFleetMetrics p strong,
#companyColComplianceStatus p strong {
    display: inline-block;
    font-size: 1.045rem;
    margin-right: 0.2rem;
}

#companyColIdentity span,
#companyColAddresses span,
#companyColContact span,
#companyColFleetMetrics span,
#companyColComplianceStatus span {
    /* +2px readability bump (was 0.9rem) — these are the company-detail values. */
    font-size: 1.145rem;
}

#companyColFleetMetrics .warning-item {
    font-size: 1.175rem;
    line-height: 1.4;
}

.basics-table-snapshot {
    min-height: 0;
    overflow-y: auto;
}

.basics-chart-row {
    width: 100%;
}

.basics-chart-container {
    min-height: 200px;
    padding: 1rem !important;
}

.basics-chart-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    flex: 1;
}

.basics-chart-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chart-controls-label {
    font-size: 0.905rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #596882;
}

#basicsChartControls,
.chart-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* When #basicsChartControls is used inline, override column layout */
.ov-chart-controls-bar #basicsChartControls,
.ov-chart-controls-bar .chart-toggle-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.2rem !important;
}

.chart-toggle-btn {
    width: 100%;
    text-align: left;
    padding: 0.9rem 1rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ov-chart-controls-bar .chart-toggle-btn {
    width: auto !important;
    padding: 0.15rem 0.4rem !important;
    font-size: 0.745rem !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}

.chart-range-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.chart-range-select {
    width: 100%;
    min-height: 46px;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(121, 135, 161, 0.24);
    border-radius: 12px;
    background-color: rgba(255,255,255,0.14);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.07) 100%);
    color: #1c273c;
}

.basics-chart-canvas-wrap {
    position: relative;
    min-height: 200px;
}

.basics-chart-canvas-wrap canvas {
    /* Pin the canvas absolutely so its rendered height cannot feed back into the
       flex card → grid row → card height → canvas loop. Without this, a burst of
       resize events (e.g. window → fullscreen) makes the chart — and the ISS and
       BASIC-table cards sharing its grid row — grow taller until a refresh. */
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

#basicsSummaryTable .violations-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(121, 135, 161, 0.28);
}

#basicsSummaryTable .violations-table th,
#basicsSummaryTable .violations-table td {
    border: 1px solid rgba(121, 135, 161, 0.28);
    padding: 0.8rem 0.85rem;
    text-align: left;
}

#basicsSummaryTable .violations-table thead th {
    background: #eef2ff;
}

#basicsSummaryTable .violations-table tbody tr:nth-child(even) {
    background: #f8faff;
}

.basic-score-est {
    font-size: 0.72em;
    font-weight: 600;
    opacity: 0.7;
    font-style: italic;
}

.violations-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
    grid-auto-rows: minmax(0, 1fr);
}

.violations-grid .violation-card {
    display: flex;
    flex-direction: column;
    height: 620px;
    min-height: 620px;
    padding: 1.1rem;
    background: rgba(255, 255, 255, 0.73) !important;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(9.3px);
    -webkit-backdrop-filter: blur(9.3px);
}

.violations-grid .violation-card-title {
    padding: 0.25rem 0.3rem 1rem;
    margin: 0;
}

.violations-grid .scrollable-table {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.35rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.violations-grid .scrollable-table::-webkit-scrollbar {
    display: none;
}

.violations-board {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.snapshot-summary-card {
    min-height: auto !important;
}

.snapshot-summary-card .subpanel-title {
    margin-bottom: 0.35rem;
}

.fixed-scroll-card .section-title {
    padding: 0 0 1rem;
    margin: 0;
}

.violations-grid .violations-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(121, 135, 161, 0.28);
}

.violations-grid .violations-table th,
.violations-grid .violations-table td {
    border: 1px solid rgba(121, 135, 161, 0.28);
    padding: 0.8rem 0.85rem;
    text-align: left;
    vertical-align: top;
}

.violations-grid .violations-table thead th {
    background: #eef2ff;
}

.violation-library-card {
    padding: 1.1rem !important;
    height: 620px;
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
}

.violation-library-controls {
    display: block;
    margin: 0.35rem 0 1rem;
}

.violation-library-controls input {
    width: 100%;
    border: 1px solid rgba(121, 135, 161, 0.24);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    background-color: rgba(255,255,255,0.12);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%);
}

.violation-library-results {
    display: grid;
    gap: 0.85rem;
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.violation-library-results::-webkit-scrollbar {
    display: none;
}

.violation-library-item {
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.73);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.3px);
    -webkit-backdrop-filter: blur(9.3px);
    padding: 0.95rem 1rem;
}

.violation-library-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

.violation-library-meta strong {
    color: #1c273c;
}

.violation-library-meta span,
.violation-library-description,
.violation-library-empty {
    color: #596882;
}

.section-title,
.subpanel-title {
    color: #1c273c;
}

.loading.app-state-card,
#errorCard.app-state-card {
    padding: 2rem;
    text-align: center;
}


/* ── Prospect / advanced search (admin) ─────────────────────────────────────── */
.prospect-search-card { padding: 20px 24px; margin-bottom: 28px; }
/* Map on the left, the fleet-size / insurance-window / search controls stacked on the right.
   Wraps to a single column on narrow screens. */
.prospect-filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 28px; }
.prospect-field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.prospect-field > label { font-size: 0.8rem; font-weight: 700; color: var(--muted, #64748b); text-transform: uppercase; letter-spacing: 0.04em; }
.prospect-field-states { flex: 1 1 320px; }
.prospect-select, .prospect-extra-states {
    padding: 9px 11px; border: 1px solid rgba(15,23,42,0.18); border-radius: 6px;
    font-size: 0.95rem; background: #fff; color: inherit; box-sizing: border-box;
}
.prospect-select:focus, .prospect-extra-states:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.prospect-state-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.prospect-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.15); font-size: 0.85rem; font-weight: 600; cursor: pointer; user-select: none;
}
.prospect-chip input { accent-color: #2563eb; }
.prospect-extra-states { max-width: 220px; }
.prospect-actions { min-width: auto; }
/* Primary CTA — the app has no base .btn fill (Bootstrap's .btn is transparent), so give the
   search action an explicit filled style rather than letting it render as bare text. */
.prospect-actions .btn {
    padding: 10px 22px;
    background: #2563eb;
    color: #fff;
    border: 1px solid #2563eb;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.prospect-actions .btn:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }
.prospect-actions .btn:disabled { opacity: 0.6; cursor: default; }
.prospect-status { margin-top: 12px; font-size: 0.9rem; color: var(--muted, #64748b); min-height: 1.1em; }

.prospect-empty { padding: 28px 12px; text-align: center; color: var(--muted, #64748b); font-size: 0.95rem; }
.prospect-table-wrap { overflow-x: auto; max-height: 65vh; overflow-y: auto; border: 1px solid rgba(15,23,42,0.06); border-radius: 8px; }
.prospect-table thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.prospect-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.prospect-table thead th {
    text-align: left; padding: 10px 12px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted, #64748b); border-bottom: 2px solid rgba(15,23,42,0.08);
}
.prospect-table td { padding: 11px 12px; border-bottom: 1px solid rgba(15,23,42,0.05); vertical-align: top; }
.prospect-row { cursor: pointer; transition: background-color 0.12s ease; }
.prospect-row:hover { background: rgba(37,99,235,0.05); }
.prospect-name { display: flex; flex-direction: column; }
.prospect-name-main { font-weight: 700; }
.prospect-dot { font-size: 0.75rem; color: var(--muted, #94a3b8); }
.prospect-city { display: block; font-size: 0.75rem; color: var(--muted, #94a3b8); }
.prospect-pu { font-weight: 700; }
.prospect-insurer { color: var(--muted, #475569); }
.prospect-muted { color: var(--muted, #94a3b8); }
.prospect-hint { margin-top: 12px; font-size: 0.82rem; color: var(--muted, #94a3b8); }

/* Mini report modal */
.prospect-mini-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.prospect-mini-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.5); }
.prospect-mini-panel {
    position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
    background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(15,23,42,0.35); padding: 22px 24px;
}
.prospect-mini-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted, #64748b); }
.prospect-mini-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-right: 28px; }
.prospect-mini-header h3 { margin: 0; font-size: 1.15rem; }
.prospect-mini-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; color: #2563eb; background: rgba(37,99,235,0.12); padding: 3px 8px; border-radius: 999px; }
.prospect-mini-table { width: 100%; border-collapse: collapse; }
.prospect-mini-table th { text-align: left; padding: 8px 10px 8px 0; font-size: 0.8rem; color: var(--muted, #64748b); font-weight: 600; white-space: nowrap; vertical-align: top; width: 40%; }
.prospect-mini-table td { padding: 8px 0; font-size: 0.92rem; border-bottom: 1px solid rgba(15,23,42,0.05); }
.prospect-mini-loading { padding: 20px 4px; color: var(--muted, #64748b); }
.prospect-mini-actions { margin-top: 16px; text-align: right; }
@media (max-width: 640px) { .prospect-filters { gap: 12px; } .prospect-field { min-width: 100%; } }

.prospect-mini-note { margin: 0 0 12px; padding: 8px 10px; font-size: 0.82rem; color: #92400e; background: rgba(251,191,36,0.14); border-radius: 6px; }

/* Interactive US map state picker (CC0 Wikimedia blank US map) */
/* The map absorbs the card's spare width (up to a cap that keeps it from growing absurdly tall on
   an ultrawide monitor) and the map itself fills that column. Capping the map instead of the
   column, as this once did, left the column stretched past the map and stranded the controls at
   the far edge of the card. */
.prospect-field-map { flex: 1 1 560px; min-width: 300px; max-width: 960px; }
.prospect-map-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.78rem; color: var(--muted, #94a3b8); }
.prospect-map { width: 100%; margin: 6px 0; }
.prospect-map svg { width: 100%; height: auto; display: block; }
/* The map SVG is unstyled (Census-derived paths only) — fill/borders live entirely here. */
.prospect-map svg path { fill: #e2e8f0; stroke: #ffffff; stroke-width: 1; stroke-linejoin: round; cursor: pointer; transition: fill 0.1s ease; }
/* Hover tint ONLY on devices that truly hover: on touch screens the :hover state sticks to
   the last tapped element, which made a DESELECTED state keep its color until the next tap.
   :not(.is-selected) keeps the selection blue authoritative under the cursor too. */
@media (hover: hover) {
    .prospect-map svg path:hover:not(.is-selected) { fill: #c6d6e8; }
}
.prospect-map svg path.is-selected { fill: #2563eb; }
.prospect-map-loading { padding: 40px 12px; text-align: center; color: var(--muted, #94a3b8); }
.prospect-map-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.prospect-map-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(15,23,42,0.15); background: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: inherit; }
.prospect-map-btn:hover { background: #f1f5f9; }
.prospect-selected-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 1.5em; }
.prospect-sel-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 4px 3px 10px; border-radius: 999px; background: rgba(37,99,235,0.1); color: #2563eb; font-size: 0.82rem; font-weight: 700; }
.prospect-sel-chip button { border: none; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 3px; }
/* Right-hand control column (fleet size, insurance window, search). */
.prospect-controls-row { display: flex; flex-direction: column; align-items: stretch; gap: 18px; flex: 0 1 260px; min-width: 220px; margin-top: 0; }
.prospect-controls-row .prospect-field { min-width: 0; width: 100%; }
.prospect-controls-row .prospect-select { width: 100%; }
.prospect-controls-row .prospect-actions { margin-top: 2px; }
.prospect-controls-row .prospect-actions .btn { width: 100%; }
@media (max-width: 860px) { .prospect-controls-row { flex: 1 1 100%; } }

/* --- FMCSA availability pill (header, left of the search box) --- */
.fmcsa-status {
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 11px; border-radius:999px;
    border:1px solid var(--border); background:#ffffff;
    font-size:12px; font-weight:600; line-height:1; letter-spacing:.01em;
    color:#64748b; white-space:nowrap; cursor:default; user-select:none;
}
.fmcsa-status-dot { width:7px; height:7px; border-radius:50%; background:#94a3b8; flex:0 0 auto; }
.fmcsa-status.is-unknown { opacity:.7; }
.fmcsa-status.is-up { color:#15803d; border-color:#bbf7d0; background:#f0fdf4; }
.fmcsa-status.is-up .fmcsa-status-dot { background:#22c55e; }
.fmcsa-status.is-down { color:#b91c1c; border-color:#fecaca; background:#fef2f2; }
.fmcsa-status.is-down .fmcsa-status-dot { background:#ef4444; animation:fmcsa-status-pulse 2s ease-in-out infinite; }
@keyframes fmcsa-status-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .fmcsa-status.is-down .fmcsa-status-dot { animation:none; } }
/* Narrow headers keep the dot and drop the word. */
@media (max-width: 900px) { .fmcsa-status-label { display:none; } .fmcsa-status { padding:6px; } }

/* --- Prospect search: custom fleet-size range --- */
.prospect-pu-custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.prospect-pu-input { width: 100%; min-width: 0; }
.prospect-pu-dash { color: var(--muted, #94a3b8); flex: 0 0 auto; }