/* ==========================================================================
   HYDROSOUT MASTER STYLESHEET (v1.2 - PRODUCTION STABILIZED)
   ========================================================================== */

:root {
    --bg-dark: #0f172a;
    --panel-bg: rgba(30, 41, 59, 0.85);
    --border-color: #334155;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --accent-blue: #38bdf8;
    --accent-green: #22c55e;
    --accent-orange: #f97316;
    --accent-red: #ef4444;
}

/* ==========================================================================
   Universal Reset (Tailwind Preflight Replacement)
   ========================================================================== */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #334155; /* Subtle slate border instead of stark white */
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-dark, #0f172a);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Universal Utility & Modal Defense */
.hidden, [hidden] {
    display: none !important;
}

#leadModal,
#feedbackModal,
.modal-overlay:not(.active) {
    display: none;
}

/* ==========================================================================
   Master Application Grid
   ========================================================================== */
#app-container {
    display: grid;
    grid-template-columns: 360px 1fr; /* 360px Sidebar, 1fr Map Workspace */
    grid-template-rows: 48px 1fr;     /* 48px Header, 1fr Main Workspace */
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-dark, #0f172a);
}

/* ==========================================================================
   Grid Placement Locks
   ========================================================================== */

/* 1. Header spans the entire top row */
.top-nav {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
}

/* 2. Sidebar locks to the bottom-left */
#sidebar {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 100%;
    background-color: #0f172a; /* Fallback for stripped Tailwind class */
    border-right: 1px solid #334155;
    z-index: 50;
}

/* 3. Workspace locks to the bottom-right */
#app-workspace {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* 4. Docked Sidebar Toggle Tab */
.sidebar-toggle-tab {
    position: absolute;
    top: 18px;
    right: -32px; /* Hangs flush outside the right border of the sidebar */
    width: 32px;
    height: 40px;
    background: #0f172a;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-color: rgba(56, 189, 248, 0.3) !important;
    border-left: none; /* Seamless join with drawer body */
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #38bdf8;
    z-index: 1050;
    transition: background 0.2s ease, color 0.2s ease;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.35);
}
.sidebar-toggle-tab:hover {
    background: #1e293b;
    color: #ffffff;
}
.sidebar-toggle-tab svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}
.sidebar-toggle-tab.is-collapsed svg {
    transform: rotate(180deg);
}

/* Strip Leaflet default popup chrome for the basin card (scoped so allocation /
   WSC gauge popups keep their existing dark envelope) */
.basin-click-popup .leaflet-popup-content-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
}
.basin-click-popup .leaflet-popup-content {
    margin: 0 !important;
    line-height: inherit !important;
    width: auto !important;
}
.basin-click-popup .leaflet-popup-tip-container {
    display: none !important;
}

/* Cohesive Sub-Basin Modal Card */
.basin-card {
    background: #0b1120;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-color: rgba(56, 189, 248, 0.25) !important;
    border-radius: 8px;
    padding: 16px;
    width: 320px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
    color: #f8fafc;
    font-family: inherit;
}
.basin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5) !important;
}
.basin-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row !important;
    flex-wrap: nowrap;
}
.basin-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}
/* Harmonized Status Badge (Matching WSC Panel) */
.basin-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    white-space: nowrap;
}
.basin-status-pill.status-controlled {
    background: rgba(180, 83, 9, 0.25) !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    color: #fbbf24 !important;
}
.basin-status-pill.status-closed {
    background: rgba(159, 18, 57, 0.25) !important;
    border: 1px solid rgba(244, 63, 94, 0.45) !important;
    color: #fb7185 !important;
}
.basin-close-btn {
    background: transparent;
    border: none !important;
    color: #94a3b8;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin-left: auto;
    transition: color 0.15s ease;
}
.basin-close-btn:hover {
    color: #ffffff;
}
.basin-metrics-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.basin-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(51, 65, 85, 0.3);
}
.basin-metric-row:last-child {
    border-bottom: none;
}
.basin-label {
    color: #94a3b8;
}
.basin-val {
    color: #f1f5f9;
    font-weight: 600;
}
.basin-val-gauge {
    color: #38bdf8;
    font-size: 12px;
    font-weight: 500;
}
.basin-card-footer {
    background: rgba(15, 23, 42, 0.6);
    border-left: 2px solid #38bdf8;
    border-left-color: #38bdf8 !important;
    padding: 8px 10px;
    border-radius: 0 4px 4px 0;
    font-size: 11px;
    line-height: 1.4;
    color: #94a3b8;
}
.basin-card-footer strong {
    color: #e2e8f0;
}

#app-workspace {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
    grid-column: 2;
    grid-row: 2;
}

#map-workspace {
    flex: 1 1 0%;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#map {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* Modal Overrides */
.modal-overlay.active,
#leadModal.active,
#feedbackModal.active {
    display: flex !important;
}

/* ==========================================================================
   Top Navigation Telemetry & CTA Controls (Pure CSS)
   ========================================================================== */
.top-nav-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.nav-telemetry-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: 4px;
}

.nav-telemetry-badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: #34d399;
}

.nav-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: #fbbf24;
    background: rgba(69, 26, 3, 0.4);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
}

.nav-preview-badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: #fbbf24;
}

/* Shared styling for Top Nav and Matrix Drawer Early Access CTAs */
#nav-early-access-btn,
#btn-matrix-early-access {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #ffffff !important;
    background-color: #0284c7 !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

#nav-early-access-btn:hover,
#btn-matrix-early-access:hover {
    background-color: #0369a1 !important;
    border-color: rgba(56, 189, 248, 0.7) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   Floating Map Tool Selector (Pure CSS)
   ========================================================================== */
#map-tool-selector {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(51, 65, 85, 0.8);
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
}

.map-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.map-tool-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.map-tool-btn:hover {
    background: #1e293b;
    color: #f8fafc;
}

.map-tool-btn.active {
    color: #22d3ee;
    background: rgba(8, 51, 68, 0.6);
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

/* --- HYDROSOUT CUSTOM SLEEK SCROLLBAR --- */
* {
    scrollbar-width: thin;
    scrollbar-color: #334155 rgba(2, 6, 23, 0.6);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(2, 6, 23, 0.4);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
}

html, body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--bg-dark);
    color: var(--text-main);
}

/* --- MASTER CSS GRID LAYOUT --- */
#app-container {
    display: grid;
    grid-template-rows: 64px 1fr !important; /* Lock header track: non-collapsible 64px */
    grid-template-columns: 340px 1fr;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#app-container.sidebar-collapsed {
    grid-template-columns: 0px 1fr;
}

#sidebar {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    background: var(--panel-bg);
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--border-color);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    z-index: 1000;
    transition: padding 0.3s ease;
}

#app-container.sidebar-collapsed #sidebar {
    padding: 0;
    border: none;
    overflow: visible;
}

#app-container.sidebar-collapsed #sidebar .sidebar-scroll-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#app-workspace {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

#map-workspace {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* --- TOP NAVIGATION & HEADER COMPONENTS --- */
.top-nav {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 64px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(2, 6, 23, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #334155;
    z-index: 2000;
}

.brand-container,
.logo-container {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.brand-logo-link {
    display: block;
    text-decoration: none;
    color: inherit;
    line-height: 0;
}

.brand-logo-link:hover,
.brand-logo-link:focus-visible {
    opacity: 0.85;
}

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0;
}

.logo-title .scout-part {
    color: #0284c7;
    font-weight: 700;
}

.brand-text .sub-title,
.brand-text .logo-sub {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 3px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    background: rgba(6, 78, 59, 0.4);
    border: 1px solid #059669;
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #34d399;
    font-weight: 500;
}

/* Invite badge state classes: only render the green "active" treatment when a
   validated session token / feature flag is present; otherwise show neutral
   "locked". Defined after .status-pill so the late-safe inactive state wins. */
.invite-active {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #34d399;
}

/* Emerald unlocked HUD accent (applied alongside .invite-active when a verified
   session token with a company/days payload is present). */
.badge-unlocked {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
}

/* Resilient HUD badge — explicit CSS so it never depends on runtime Tailwind
   compilation. Used by the header session HUD (#token-session-badge). */
.hs-hud-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(6, 78, 59, 0.4);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.hs-hud-badge.warning {
    background: rgba(120, 53, 15, 0.4);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.4);
}
.hs-hud-badge.danger {
    background: rgba(136, 19, 55, 0.4);
    color: #fda4af;
    border: 1px solid rgba(244, 63, 94, 0.4);
}
.hs-hud-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 6px currentColor;
}

/* #token-session-badge quota HUD (rendered by updateQuotaHUD). Provides dark,
   emerald/amber/rose variants with a pulsing status dot. */
#token-session-badge.flex { display: flex; }
#token-session-badge .items-center { align-items: center; }
#token-session-badge .inline-flex {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid;
    line-height: 1.4;
}
#token-session-badge .rounded-full { border-radius: 9999px; }
#token-session-badge .w-2 { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }
#token-session-badge .animate-pulse { animation: hs-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
#token-session-badge .font-bold { font-weight: 700; }
#token-session-badge .uppercase { text-transform: uppercase; }
#token-session-badge .tracking-wide { letter-spacing: 0.025em; }
#token-session-badge .text-neutral-400 { color: #a3a3a3; }

/* Normal (emerald) quota state */
#token-session-badge .bg-emerald-950\/80 { background: rgba(2, 44, 34, 0.8); }
#token-session-badge .text-emerald-300 { color: #6ee7b7; }
#token-session-badge .border-emerald-800\/60 { border-color: rgba(6, 95, 70, 0.6); }
#token-session-badge .bg-emerald-400 { background: #34d399; }

/* Warning (amber) at >=50% used */
#token-session-badge .bg-amber-950\/80 { background: rgba(69, 26, 3, 0.8); }
#token-session-badge .text-amber-300 { color: #fcd34d; }
#token-session-badge .border-amber-800\/60 { border-color: rgba(146, 64, 14, 0.6); }
#token-session-badge .bg-amber-400 { background: #fbbf24; }

/* High (rose) at >=70% used */
#token-session-badge .bg-rose-950\/80 { background: rgba(76, 5, 25, 0.8); }
#token-session-badge .text-rose-300 { color: #fda4af; }
#token-session-badge .border-rose-800\/60 { border-color: rgba(159, 18, 57, 0.6); }
#token-session-badge .bg-rose-400 { background: #fb7185; }

@keyframes hs-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.invite-inactive {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid #475569;
    color: #94a3b8;
}

.status-dot {
    width: 6px;
    height: 6px;
    background-color: #34d399;
    border-radius: 50%;
    box-shadow: 0 0 8px #34d399;
}

.search-bar-wrapper {
    margin-left: 16px;
    display: flex;
    align-items: center;
    position: relative;
    max-width: 380px;
    width: 100%;
}

.search-bar-wrapper input {
    background: #111827;
    border: 1px solid #374151;
    border-radius: 9999px;
    padding: 0.5rem 2.5rem 0.5rem 1rem; /* Padding on the right for icon */
    color: #f3f4f6;
    font-size: 0.875rem;
    width: 320px;
    transition: border-color 0.2s;
    outline: none;
}

.search-bar-wrapper input:focus {
    border-color: #0284c7;
}

.search-bar-wrapper svg.search-icon {
    position: absolute;
    right: 0.85rem; /* Pinned to the right */
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    pointer-events: none;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- FITFIR RISK / PRIORITY BADGES (visual parity with sidebar legend) --- */
.fitfir-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.fitfir-ultra-senior {
    color: #052e16;
    background: #22c55e;
}

.fitfir-senior-low {
    color: #0c4a6e;
    background: #38bdf8;
}

.fitfir-moderate {
    color: #431407;
    background: #f97316;
}

.fitfir-critical {
    color: #fef2f2;
    background: #ef4444;
}

.fitfir-verification {
    color: #0f172a;
    background: #94a3b8;
}

/* --- AUDIT / RISK STATUS BADGES (right-hand audit column) --- */
.audit-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.audit-badge.gas-green {
    color: #052e16;
    background: #22c55e;
}

.audit-badge.gas-neutral {
    color: #0f172a;
    background: #94a3b8;
}

/* Scan-failure error banner rendered inside the matrix drawer body. Replaces the
   misleading empty-results table when the /scan endpoint returns 422/500. */
.scan-error-banner {
    margin: 12px 16px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid #ef4444;
    border-radius: 8px;
    color: #fecaca;
    font-size: 0.82rem;
    line-height: 1.4;
}

/* --- UNIFIED MARKER ACTIVE / HOVER STATE (STABLE VECTOR) --- */

/* 1. Outer Leaflet icon wrapper: manage layer depth only, never touch transform */
.leaflet-marker-icon.pin-highlight,
.hs-icon-wrapper.pin-highlight,
.wsc-static-wrapper.pin-highlight {
    box-shadow: none !important;
    filter: none !important;
    z-index: 99999 !important;
}

/* 2. Prevent internal SVG vector elements from breaking mouse contact */
.hs-icon-wrapper *,
.wsc-static-wrapper * {
    pointer-events: none !important;
}

/* 3. Scale only the inner shape container */
.pin-highlight .hs-shape-marker {
    transform: scale(1.15) !important;
    transform-origin: center center;
    transition: transform 0.1s ease-out;
}

/* 4. Crisp 1.5px solid white vector outline */
.pin-highlight .hs-shape-marker svg,
.pin-highlight .hs-shape-marker path {
    stroke: #FFFFFF !important;
    stroke-width: 2px !important;
    stroke-opacity: 1 !important;
    filter: drop-shadow(0 0 1px #FFFFFF);
}

/* WSC diamond active outline (transform/border/background handled by the
   dedicated WSC hover/highlight rules further down the sheet). */
.pin-highlight .wsc-diamond-node {
    outline: 2px solid #FFFFFF !important;
    outline-offset: 1px;
}

/* --- PRIORITY ALLOCATION MATRIX DRAWER STABILIZATION --- */
.matrix-drawer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: rgba(2, 6, 23, 0.98) !important;
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -20px 40px -12px rgba(0, 0, 0, 0.8);
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    max-height: 45vh;
    min-height: 40px;
    transition: max-height 0.3s ease;
}

.matrix-drawer.collapsed {
    max-height: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    overflow: hidden !important;
}

.matrix-drawer.collapsed .matrix-controls,
.matrix-drawer.collapsed .matrix-body,
.matrix-drawer.collapsed .matrix-footer,
.matrix-drawer.collapsed #matrixSelectionSummary,
.matrix-drawer-container.collapsed .matrix-drawer-content {
    display: none !important;
}

.matrix-drawer.collapsed .matrix-header {
    height: 44px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Unified Map Attribution Chip.
   Base bottom sits at 44px = the collapsed matrix drawer's header height so the chip
   stays visible on the map; the .matrix-drawer-open rule lifts it above the expanded
   drawer. */
.map-attribution-chip {
    position: absolute;
    bottom: 44px; /* above collapsed drawer (44px); 12px when drawer is open via rule below */
    right: 12px;
    z-index: 990;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.2;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: auto;
    user-select: none;
    transition: bottom 0.2s ease, opacity 0.2s ease;
}

.map-attribution-chip a {
    color: #38bdf8;
    text-decoration: none;
    transition: color 0.15s ease;
}

.map-attribution-chip a:hover {
    color: #7dd3fc;
    text-decoration: underline;
}

.map-attribution-chip .attr-sep {
    color: #475569;
    font-size: 9px;
}

/* Clear Matrix Drawer collision when open */
.matrix-drawer-open .map-attribution-chip {
    bottom: calc(var(--drawer-height, 320px) + 12px);
}

/* Matrix Header: Centered title with toggle icon pinned right */
.matrix-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 24px;
    position: relative;
    cursor: pointer;
    user-select: none;
    background: rgba(2, 6, 23, 0.92);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.4);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    flex-shrink: 0;
}

.matrix-header::before {
    content: "";
    width: 32px;
}

.matrix-header h3 {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f8fafc;
}

.matrix-toggle-icon-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 32px;
    color: #38bdf8;
}

/* Matrix Control Bar */
.matrix-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    background: rgba(2, 6, 23, 0.95);
    border-top: 1px solid var(--border-color);
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.matrix-controls input[type="text"] {
    flex: 1 1 300px;
    min-width: 220px;
    padding: 7px 12px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: #fff;
    font-size: 0.82rem;
    outline: none;
}

.matrix-controls input[type="text"]:focus {
    border-color: var(--accent-blue);
}

.matrix-body {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: calc(45vh - 100px);
    padding: 4px 6px 8px;
}

.matrix-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: rgba(2, 6, 23, 0.95);
    flex-shrink: 0;
}

/* --- ALLOCATION TABLE STYLING & ZEBRA STRIPING --- */
.matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.matrix-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #111827;
    color: var(--accent-blue);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.matrix-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
    color: #cbd5e1;
    white-space: nowrap;
}

/* Alternating Row Zebra Striping */
.matrix-table tbody tr:nth-child(even) {
    background-color: rgba(30, 41, 59, 0.35);
}

.matrix-table tbody tr:nth-child(odd) {
    background-color: rgba(15, 23, 42, 0.5);
}

/* Row Hover & Active Selection States */
.matrix-table tbody tr:hover {
    background-color: rgba(56, 189, 248, 0.08) !important;
    cursor: pointer;
}

.matrix-table tbody tr.active {
    background-color: rgba(56, 189, 248, 0.18) !important;
}

.matrix-table tbody tr.active td:first-child {
    border-left: 3px solid var(--accent-blue);
}

/* --- CANONICAL BUTTON COMPONENT TOKENS --- */
.hs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #38bdf8;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.hs-btn:hover {
    transform: translateY(-1px);
}

/* --- PRIMARY ACTION BUTTON STYLING --- */
.hs-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border: 1px solid #38bdf8;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
    transition: all 0.2s ease;
}

.hs-btn-primary:hover {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    border-color: #7dd3fc;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.4);
    transform: translateY(-1px);
}

/* Keep modal / inline action buttons from stretching full-width where the
   full-width primary treatment is not desired (e.g. prospectus modal footer). */
.prospectus-modal-content .hs-btn-primary,
#section81Modal .hs-btn-primary {
    width: auto;
}

.hs-btn-secondary {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #0284c7;
}

.hs-btn-secondary:hover {
    background: #273549;
    border-color: #38bdf8;
    color: #fff;
}

/* Nav-bar anchor button (e.g. METHODOLOGY & FAQ): behaves like the secondary
   button but is a real link so it routes without dead-end relative paths. */
.hs-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #0284c7;
    background: #1e293b;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.hs-nav-btn:hover {
    transform: translateY(-1px);
    background: #273549;
    border-color: #38bdf8;
    color: #fff;
}

/* --- SUCCESS / EXPORT ACTION BUTTON STYLING --- */
.hs-btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: 1px solid #34d399;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    transition: all 0.2s ease;
}

.hs-btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border-color: #6ee7b7;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.hs-btn:disabled,
.hs-btn[disabled] {
    background: #334155 !important;
    color: #64748b !important;
    border-color: #475569 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* --- SIDEBAR INPUT SIZING FIX --- */
#sidebar .input-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

#sidebar .input-row input {
    width: 100% !important;
    min-width: 0;
}

/* --- SIDEBAR CONTROL PANEL STABILIZATION --- */
#sidebar .sidebar-scroll-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

/* Dark-mode scrollbar for the left sidebar scroll container. */
#sidebar .sidebar-scroll-content::-webkit-scrollbar {
    width: 6px;
}
#sidebar .sidebar-scroll-content::-webkit-scrollbar-track {
    background: rgba(11, 15, 23, 0.6);
}
#sidebar .sidebar-scroll-content::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}
#sidebar .sidebar-scroll-content::-webkit-scrollbar-thumb:hover {
    background: #0077B6;
}

#sidebar .control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-bottom: 2px;
}

#sidebar label, 
#sidebar .control-label,
#sidebar p {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

#sidebar .input-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

#sidebar input[type="text"],
#sidebar input[type="number"],
#sidebar select {
    width: 100%;
    padding: 7px 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-main);
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s ease;
}

#sidebar input:focus {
    border-color: var(--accent-blue);
}

/* Sidebar Stats Card */
#sidebar .stats-card,
#sidebar .metrics-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
}

#sidebar .metric-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

#sidebar .metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

#sidebar .metric-label {
    font-size: 0.68rem;
    color: var(--text-muted);
}

#sidebar .stats-card .stat-box h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

#sidebar .stats-card .stat-box span {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* FITFIR Legend Checklist in Sidebar */
.fitfir-legend-container,
#sidebar .legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(51, 65, 85, 0.4);
}

.fitfir-legend-item,
#sidebar .legend-item,
#sidebar .legend-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #cbd5e1;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
}

.fitfir-legend-item input[type="checkbox"],
#sidebar .legend-item input[type="checkbox"] {
    accent-color: #0284c7;
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.fitfir-legend-dot,
#sidebar .legend-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
/* --- SECTION 81 PROSPECTUS REPORT MODAL FIXES --- */
.prospectus-modal-content {
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    color: #f8fafc;
    max-width: 720px;
    width: 90vw;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
}

.prospectus-report-box {
    background: #0b0f19;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8rem;
    color: #e2e8f0;
    height: 320px; /* Forces proper vertical container volume */
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Smooth, GPU-accelerated scrolling for the Section 81 prospectus text body. */
#prospectusReportContent,
#prospectusContent,
.prospectus-report-box,
.prospectus-preview,
.prospectus-modal pre {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
}

/* --- ADVANCED FILTERS ACCORDION STYLING --- */
.advanced-filters-wrapper {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.advanced-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
    user-select: none;
    background: rgba(30, 41, 59, 0.5);
}

.advanced-filters-header:hover {
    background: rgba(30, 41, 59, 0.8);
}

.advanced-filters-header .toggle-icon {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.advanced-filters-header.open .toggle-icon {
    transform: rotate(90deg);
}

.advanced-filters-body {
    padding: 12px 14px;
    display: none;
    border-top: 1px solid var(--border-color);
    background: rgba(15, 23, 42, 0.4);
}

.advanced-filters-body.open {
    display: block;
}

.filter-section-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}

/* --- 2-COLUMN FILTER GRID STABILIZATION --- */
.filter-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Changed from 3 columns to 2 */
    gap: 8px 16px;
}

.filter-checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #cbd5e1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-checkbox-item input[type="checkbox"] {
    accent-color: #0284c7;
    width: 13px;
    height: 13px;
    cursor: pointer;
}

/* --- ALLOCATION & GAUGE POPUP CONTRAST FIX --- */
.mapboxgl-popup-content,
.allocation-popup-container,
.map-popup-card {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    color: #f8fafc !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8) !important;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

.allocation-popup-container .popup-field-label,
.map-popup-card .field-label,
.mapboxgl-popup-content p {
    color: #94a3b8 !important; /* Muted label color */
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
}

.allocation-popup-container .popup-field-value,
.map-popup-card .field-value,
.mapboxgl-popup-content strong {
    color: #f8fafc !important; /* Crisp high-contrast main text */
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

/* --- LEAFLET POPUP FORCED HIGH-CONTRAST TOKENS --- */
.leaflet-popup-content-wrapper,
.leaflet-popup-content {
    background: #0f172a !important;
    color: #f8fafc !important;
}

/* Target the inner wrapper injected by JavaScript */
.leaflet-popup-content > div {
    color: #f8fafc !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

/* Force all text inside the popup container to high contrast */
.leaflet-popup-content div,
.leaflet-popup-content span,
.leaflet-popup-content strong,
.leaflet-popup-content b {
    color: #f8fafc !important;
}

/* Specifically style labels or muted prefixes if generated */
.leaflet-popup-content .popup-label {
    color: #94a3b8 !important;
}

/* --- LEAFLET POPUP BORDER & CONTAINER REFINEMENT --- */
.leaflet-popup-content-wrapper {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(51, 65, 85, 0.4) !important;
    padding: 0 !important;
    overflow: hidden;
}

.leaflet-popup-tip {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
}

/* --- WSC WIDGET & MAP CONTROLS STACKING --- */
.wsc-widget {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 12px;
    width: 280px;
    color: #f8fafc;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    margin-bottom: 12px;
    z-index: 999;
}

/* Collapsible WSC streamflow panel body (top-right stack). Defaults collapsed. */
#wscPanelBody {
    display: none;
    transition: opacity 0.25s ease, max-height 0.25s ease;
}
#wscPanelBody.collapsed {
    display: none;
}
#wscToggleBtn {
    cursor: pointer;
    background: none;
    border: none;
    color: #38bdf8;
    font-size: 0.8rem;
    padding: 2px 6px;
}

.wsc-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #38bdf8;
    cursor: pointer;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

/* Active sub-basin line + regulatory status badge inside the WSC telemetry card.
   These layout classes are authored as Tailwind utilities in markup but are not
   present in the compiled Tailwind bundle, so they are defined explicitly here,
   scoped to the basin row. */
#wscPanelBody > .flex {
    display: flex;
}
#wscPanelBody .items-center { align-items: center; }
#wscPanelBody .justify-between { justify-content: space-between; }
#wscPanelBody .gap-2 { gap: 0.5rem; }
#wscPanelBody .pb-2 { padding-bottom: 0.5rem; }
#wscPanelBody .mb-2 { margin-bottom: 0.5rem; }
#wscPanelBody .border-b { border-bottom-width: 1px; border-bottom-style: solid; }
#wscPanelBody .border-slate-700\/60 { border-color: rgba(51, 65, 85, 0.6); }
#wscPanelBody .min-w-0 { min-width: 0; }
#wscPanelBody .shrink-0 { flex-shrink: 0; }
#wscPanelBody .w-1\.5 { width: 0.375rem; }
#wscPanelBody .h-1\.5 { height: 0.375rem; }
#wscPanelBody .rounded-full { border-radius: 9999px; }
#wscPanelBody .bg-cyan-400 { background-color: #22d3ee; }
#wscPanelBody #wsc-basin-title {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    color: #e2e8f0;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge styling here is explicit instead of Tailwind utilities because these
   classes are injected at runtime via JS strings and Tailwind only ships classes
   found at build time. */
#wsc-basin-status span {
    display: inline-block;
    white-space: nowrap;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.status-badge-closed {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 0.25rem;
    color: #fda4af;
    background-color: rgba(136, 19, 55, 0.4);
    border: 1px solid rgba(225, 29, 72, 0.5);
}

.status-badge-controlled {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 0.25rem;
    color: #fcd34d;
    background-color: rgba(120, 53, 15, 0.4);
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.status-badge-open {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 0.25rem;
    color: #6ee7b7;
    background-color: rgba(6, 78, 59, 0.4);
    border: 1px solid rgba(16, 185, 129, 0.5);
}

.status-badge-outside {
    background-color: rgba(51, 65, 85, 0.4);
    color: #94a3b8;
    border: 1px solid rgba(71, 85, 105, 0.6);
}

/* Sticky tooltip rendered beneath the SSRB sub-basin boundary layer */
.basin-tooltip {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

#wscToggleBtn {
    background: none;
    border: none;
    color: #38bdf8;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0 4px;
}

.gauge-mode-toggle {
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(30, 41, 59, 0.6);
    padding: 4px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.gauge-mode-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #94a3b8;
    padding-left: 4px;
    font-weight: 600;
}

.gauge-mode-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.gauge-mode-btn.active {
    background: #0284c7;
    color: #ffffff;
}

/* --- TOP RIGHT MAP OVERLAY STACK --- */
#topRightStack {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
    pointer-events: auto;
}

/* --- WSC STRESS PILL ACCENTS --- */
.stress-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.stress-pill.amber, .stress-pill.yellow {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}

.stress-pill.red, .stress-pill.critical {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #f87171;
}

.stress-pill.green {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #34d399;
}

.wsc-val {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.wsc-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-bottom: 12px;
    line-height: 1.35;
    border-bottom: 1px solid #334155;
    padding-bottom: 8px;
}

/* Global keyboard focus indicator (WCAG 2.4.7 / 2.4.13): restores a visible,
   high-contrast focus ring that supersedes the earlier outline:none defaults so
   power users can navigate every control with the keyboard alone. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.leaflet-control button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #38bdf8, 0 0 10px rgba(56, 189, 248, 0.5);
    border-color: #38bdf8;
}

/* --- RELOCATED ZOOM CONTROL (bottom-right) --- */
/* Matches the industrial high-contrast palette (Slate bg / Blue accent) and keeps
   proper spacing from the map edge so it does not crowd active UI drawers. */

/* Position the Leaflet zoom control up to clear the exact height of the bottom
   Priority Allocation Matrix drawer's collapsed state. Scoped to the zoom control
   itself so the Leaflet attribution stays anchored at the true map bottom. */
.leaflet-bottom.leaflet-right {
    right: 20px !important;
    z-index: 999 !important; /* Floats above map overlays but below active modals */
}

.leaflet-bottom.leaflet-right .leaflet-control-zoom {
    bottom: 70px !important; /* Lift zoom above the collapsed drawer */
}

/* Keep the Leaflet attribution pinned to the actual bottom-right of the map. */
.leaflet-bottom.leaflet-right .leaflet-control-attribution {
    bottom: 8px !important;
    right: 8px !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #64748b !important;
    border-radius: 4px 0 0 0;
}

.leaflet-control-zoom {
    border: 1px solid #334155 !important;
    background: #0f172a !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
    border-radius: 4px !important;
    overflow: hidden;
}

.leaflet-control-zoom a {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid #334155 !important;
    transition: background-color 0.15s ease;
    text-decoration: none;
}

.leaflet-control-zoom a:hover {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
}

.leaflet-control-zoom a:last-child {
    border-bottom: none !important;
}

/* --- HARD-GATE ACCESS LOCKOUT OVERLAY --- */
/* Full-viewport, backdrop-blurred, non-dismissible lockout surfaced over the intact
   UI shell when the beta evaluation token is missing, invalid, or expired. Sits
   above map overlays and regular modals but below nothing user-facing. */

/* Defense-in-depth: while the lockout overlay is displayed, force the bottom
   Priority Allocation Matrix drawer out of view so stale data never shows beneath
   the overlay (the drawer's own rule uses `display:flex !important`, hence the
   `!important`). The JS also hides it inline to guarantee the behavior. */
body:has(#accessDeniedOverlay[style*="display: flex"]) #matrixDrawer,
body:has(#accessDeniedOverlay[style*="display:flex"]) #matrixDrawer {
    display: none !important;
}

.access-denied-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000; /* Above Leaflet panes (400-1000) and app modals (1100) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.access-denied-overlay .access-denied-modal {
    max-width: 520px;
    width: 90%;
    background: #0f172a; /* Slate industrial token */
    border: 1px solid #334155;
    border-radius: 12px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8);
    padding: 32px 34px 26px;
    text-align: center;
    color: #e2e8f0;
}

.access-denied-overlay .access-denied-modal h2 {
    margin: 0 0 14px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
}

.access-denied-overlay .access-denied-modal p {
    margin: 0 0 12px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #94a3b8;
}

.access-denied-overlay .access-denied-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.access-denied-overlay .access-denied-actions .hs-btn {
    text-decoration: none;
    white-space: nowrap;
    width: auto;
}

/* Hardened Modal Stacking Context */
#feedbackModal.modal-overlay,
div#feedbackModal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(10, 15, 29, 0.85) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Active State */
#feedbackModal.active,
#feedbackModal.modal-overlay.active {
    display: flex !important;
}

/* ==========================================================================
   HydroScout Feedback / Discrepancy Modal Styles
   ========================================================================== */

#feedbackModal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(6, 11, 25, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
}

#feedbackModal.active {
    display: flex !important;
}

/* Inner Modal Card Container */
#feedbackModal .feedback-modal-content,
#feedbackModal .modal-container,
#feedbackModal .modal-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #0d1527;
    border: 1px solid #1e2e4a;
    border-radius: 8px;
    padding: 24px 28px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(56, 189, 248, 0.1);
    color: #f1f5f9;
    box-sizing: border-box;
}

/* Header */
#feedbackModal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #1e2e4a;
    padding-bottom: 12px;
}

#feedbackModal .modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #f8fafc;
    letter-spacing: -0.01em;
}

#feedbackModal .modal-close-btn {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.15s ease;
}

#feedbackModal .modal-close-btn:hover {
    color: #f8fafc;
}

/* Form Layout */
#feedbackModal form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#feedbackModal .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

#feedbackModal label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

/* Inputs, Selects, Textareas */
#feedbackModal input[type="email"],
#feedbackModal input[type="text"],
#feedbackModal select,
#feedbackModal textarea {
    width: 100%;
    background: #080d1a;
    border: 1px solid #1e2e4a;
    border-radius: 6px;
    padding: 10px 12px;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#feedbackModal input:focus,
#feedbackModal select:focus,
#feedbackModal textarea:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
}

#feedbackModal textarea {
    min-height: 100px;
    resize: vertical;
}

/* Primary Action Button */
#feedbackModal .btn-submit-feedback,
#feedbackModal button[type="submit"] {
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
    transition: background 0.15s ease, transform 0.05s ease;
    letter-spacing: 0.02em;
}

#feedbackModal .btn-submit-feedback:hover,
#feedbackModal button[type="submit"]:hover {
    background: #0369a1;
}

#feedbackModal .btn-submit-feedback:active,
#feedbackModal button[type="submit"]:active {
    transform: scale(0.99);
}

/* ==========================================================================
   Leaflet Popup Custom Styling (HydroScout Pin HUD)
   ========================================================================== */

.leaflet-popup-content-wrapper {
    background: #0d1527 !important;
    border: 1px solid #1e293b !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6) !important;
    padding: 0 !important;
}

.leaflet-popup-content {
    margin: 16px !important;
    line-height: 1.4 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    min-width: 240px;
    color: #f8fafc;
}

.leaflet-popup-tip {
    background: #0d1527 !important;
    border: 1px solid #1e293b !important;
}

/* FITFIR Seniority / Title Classes */
.pin-popup-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #38bdf8; /* Canonical Sky Blue */
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    padding-bottom: 4px;
}

.pin-popup-title.tier-critical {
    color: #f87171 !important; /* Critical Curtailment Risk */
}

.pin-popup-title.tier-moderate,
.pin-popup-title.tier-senior {
    color: #38bdf8 !important; /* Senior / Moderate Priority */
}

/* Tier color-mapping utilities (from getTierColorClass) — scoped to the popup so
   they override the legacy .tier-* base colors with the exact palette colors. */
.pin-popup-title.text-emerald-400 { color: #10b981 !important; }
.pin-popup-title.text-sky-400 { color: #38bdf8 !important; }
.pin-popup-title.text-amber-400 { color: #f59e0b !important; }
.pin-popup-title.text-rose-400 { color: #f43f5e !important; }
.pin-popup-title.text-neutral-300 { color: #a3a3a3 !important; }

/* Risk-tier badge utilities (Tailwind-style, scoped to the popup). */
.pin-popup-container .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.pin-popup-container .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.pin-popup-container .rounded { border-radius: 0.25rem; }
.pin-popup-container .bg-emerald-950 { background: #022c22; }
.pin-popup-container .text-emerald-300 { color: #6ee7b7; }
.pin-popup-container .bg-sky-950 { background: #082f49; }
.pin-popup-container .text-sky-300 { color: #7dd3fc; }
.pin-popup-container .bg-amber-950 { background: #451a03; }
.pin-popup-container .text-amber-300 { color: #fcd34d; }
.pin-popup-container .bg-rose-950 { background: #4c0519; }
.pin-popup-container .text-rose-300 { color: #fda4af; }
.pin-popup-container .bg-neutral-800 { background: #262626; }
.pin-popup-container .text-neutral-300 { color: #d4d4d4; }

/* Grid Alignment */
.pin-popup-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pin-popup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.825rem;
}

.pin-popup-label {
    color: #cbd5e1;
    font-weight: 500;
}

.pin-popup-value {
    color: #ffffff;
    font-weight: 700;
    text-align: right;
}

.pin-popup-divider {
    height: 1px;
    background-color: #334155;
    margin: 8px 0;
    border: none;
}

/* Valuation Currency Accent */
.pin-popup-value.value-currency-green {
    color: #34d399 !important; /* Emerald Green */
    font-weight: 800;
}

/* ==========================================================================
   WSC Canal Diversion HUD Card Styling
   ========================================================================== */

.wsc-card {
    background: #0b1329;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 16px;
    color: #f8fafc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    width: 280px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

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

/* Scoped to the new WSC HUD card so it does not override the legacy .wsc-widget
   header (which uses justify-content: space-between). */
.wsc-card .wsc-title,
.wsc-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #38bdf8;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wsc-collapse-btn {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 4px;
    color: #38bdf8;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
}

/* Target Reach Toggle */
.wsc-reach-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 0.75rem;
}

.wsc-reach-label {
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
}

.wsc-pill {
    background: transparent;
    border: 1px solid #334155;
    color: #94a3b8;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: none;
}

.wsc-pill.active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    font-weight: 600;
}

/* Primary Metric & Station Details */
.wsc-metric-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 4px;
}

.wsc-metric-caption {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 2px;
}

.wsc-gauge-name {
    font-size: 0.55rem;
    font-weight: 700;
    color: #38bdf8;
    text-transform: uppercase;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

/* Sub-Basin Stress Section */
.wsc-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.wsc-badge-stress {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.wsc-badge-stress.low {
    background: #2dd4bf;
    color: #042f2e;
}

.wsc-badge-stress.moderate {
    background: #facc15;
    color: #422006;
}

.wsc-badge-stress.critical {
    background: #f87171;
    color: #450a0a;
}

.wsc-stress-details {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.4;
}

/* ==========================================================================
   WSC Sub-Basin Stress Badge (spec: wsc-stress-container / stress-badge)
   ========================================================================== */

.wsc-stress-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stress-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stress-badge-wrap {
    display: flex;
    align-items: center;
}

.stress-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Canonical stress tiers */
.stress-badge.low {
    background: #2dd4bf;
    color: #042f2e;
}
.stress-badge.moderate {
    background: #facc15;
    color: #422006;
}
.stress-badge.critical {
    background: #f87171;
    color: #450a0a;
}

/* Alias tiers used by the JS renderers (renderStressIndex / updateWscWidgetData) */
.stress-badge.gray {
    background: #334155;
    color: #cbd5e1;
}
.stress-badge.green,
.stress-badge.emerald {
    background: #2dd4bf;
    color: #042f2e;
}
.stress-badge.amber {
    background: #facc15;
    color: #422006;
}
.stress-badge.red {
    background: #f87171;
    color: #450a0a;
}

.stress-subtext {
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.45;
}

/* WSC Gauge Subtitle */
.wsc-gauge-name {
    font-size: 0.55rem !important;
    font-weight: 500 !important;
    color: #38bdf8 !important; /* Sky Blue */
    text-transform: uppercase !important;
    margin-top: 2px !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.02em !important;
}

/* Stress Section Layout */
.wsc-stress-container {
    margin-top: 12px !important;
    border-top: 1px solid #1e293b !important;
    padding-top: 12px !important;
}

.stress-label {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important; /* Muted Slate */
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 8px !important;
}

.stress-badge-wrap {
    margin-bottom: 8px !important;
}

.stress-badge {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

/* Stress Badge Severity Tiers */
.stress-badge.low {
    background: #2dd4bf !important; /* Emerald/Mint */
    color: #042f2e !important;       /* Deep Slate/Black */
}

.stress-badge.moderate {
    background: #facc15 !important; /* Amber */
    color: #422006 !important;
}

.stress-badge.critical,
.stress-badge.high {
    background: #f87171 !important; /* Coral Red */
    color: #450a0a !important;
}

.stress-subtext {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   Matrix Bottom Drawer Stability
   ========================================================================== */
/* NOTE: The drawer uses `.matrix-drawer` / `.matrix-body` class names (not the
   `.matrix-drawer-container` / `.matrix-drawer-content` names), and its collapsed
   state is driven by the `.matrix-drawer.collapsed` utility class. */

#matrixDrawer,
.matrix-drawer {
    transition: transform 0.25s ease-in-out, height 0.25s ease-in-out, max-height 0.3s ease;
}

/* Ensure the table body maintains layout when open */
.matrix-body,
.matrix-drawer-content {
    min-height: 180px;
    max-height: 35vh;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Collapsed state rules are consolidated under .matrix-drawer.collapsed above. */

/* ==========================================================================
   FULLSCREEN DATABASE WARMUP & COLD-START MODAL
   ========================================================================== */
.db-warmup-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.db-warmup-overlay.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.db-warmup-card {
  background: #0f172a;
  border: 1px solid #0284c7;
  box-shadow: 0 20px 45px -10px rgba(2, 132, 199, 0.35), 0 0 0 1px rgba(56, 189, 248, 0.15);
  border-radius: 12px;
  padding: 2.25rem 2rem;
  max-width: 440px;
  width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.db-warmup-icon-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-warmup-spinner {
  position: absolute;
  inset: 0;
  border: 3px solid rgba(56, 189, 248, 0.15);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: db-spin 1s linear infinite;
}

.db-warmup-pin {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: db-pulse 2s ease-in-out infinite;
}

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

@keyframes db-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.12); opacity: 1; filter: drop-shadow(0 0 8px #38bdf8); }
}

.db-warmup-title {
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.db-warmup-subtitle {
  color: #94a3b8;
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 0;
}

.db-warmup-bar {
  width: 100%;
  height: 4px;
  background: #1e293b;
  border-radius: 9999px;
  overflow: hidden;
}

.db-warmup-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-radius: 9999px;
  animation: db-shimmer 1.8s ease-in-out infinite;
}

@keyframes db-shimmer {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

.db-warmup-tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 9999px;
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Fresh #dbWarmupModal build: the modal is authored with Tailwind-style utility
   classes that are not present in the compiled Tailwind bundle, so equivalent
   rules are defined here (scoped to the modal). Positioning, backdrop and the
   .hidden transition keep coming from the .db-warmup-overlay rule above. */
#dbWarmupModal .max-w-md { max-width: 28rem; }
#dbWarmupModal .p-6 { padding: 1.5rem; }
#dbWarmupModal .mx-4 { margin-left: 1rem; margin-right: 1rem; }
#dbWarmupModal .rounded-xl { border-radius: 0.75rem; }
#dbWarmupModal .border { border-width: 1px; border-style: solid; }
#dbWarmupModal .border-slate-700\/70 { border-color: rgba(51, 65, 85, 0.7); }
#dbWarmupModal .bg-slate-900\/95 { background-color: rgba(15, 23, 42, 0.95); }
#dbWarmupModal .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
#dbWarmupModal .flex { display: flex; }
#dbWarmupModal .justify-center { justify-content: center; }
#dbWarmupModal .mb-4 { margin-bottom: 1rem; }
#dbWarmupModal .relative { position: relative; }
#dbWarmupModal .items-center { align-items: center; }
#dbWarmupModal .w-12 { width: 3rem; }
#dbWarmupModal .h-12 { height: 3rem; }
#dbWarmupModal .rounded-full { border-radius: 9999px; }
#dbWarmupModal .bg-cyan-950\/60 { background-color: rgba(8, 51, 68, 0.6); }
#dbWarmupModal .border-cyan-500\/40 { border-color: rgba(6, 182, 212, 0.4); }
#dbWarmupModal .text-cyan-400 { color: #22d3ee; }
#dbWarmupModal .w-6 { width: 1.5rem; }
#dbWarmupModal .h-6 { height: 1.5rem; }
#dbWarmupModal .text-base { font-size: 1rem; line-height: 1.5rem; }
#dbWarmupModal .mb-1 { margin-bottom: 0.25rem; }
#dbWarmupModal .inline-flex { display: inline-flex; }
#dbWarmupModal .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
#dbWarmupModal .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
#dbWarmupModal .bg-slate-800 { background-color: #1e293b; }
#dbWarmupModal .text-slate-300 { color: #cbd5e1; }
#dbWarmupModal .border-slate-700 { border-color: #334155; }
#dbWarmupModal .text-slate-400 { color: #94a3b8; }
#dbWarmupModal .text-slate-100 { color: #f1f5f9; }
#dbWarmupModal .tracking-wide { letter-spacing: 0.025em; }
#dbWarmupModal .text-\[11px\] { font-size: 11px; }
#dbWarmupModal .font-medium { font-weight: 500; }
#dbWarmupModal .font-semibold { font-weight: 600; }

#dbWarmupModal .animate-spin {
  animation: db-spin 1s linear infinite;
}
#dbWarmupModal .opacity-25 { opacity: 0.25; }
#dbWarmupModal .opacity-75 { opacity: 0.75; }

/* Remove legacy bottom-right toast styles */
.toast-warmup, #warmup-toast, .warmup-banner-fixed {
  display: none !important;
}

/* ==========================================================================
   QUOTA UPGRADE MODAL & NAVBAR METADATA BADGE
   ========================================================================== */
.quota-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.quota-modal-overlay.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.quota-modal-card {
  position: relative;
  background: #0f172a;
  border: 1px solid #d97706;
  box-shadow: 0 25px 50px -12px rgba(217, 119, 6, 0.35), 0 0 0 1px rgba(245, 158, 11, 0.2);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  max-width: 480px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.quota-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.quota-modal-close:hover {
  color: #f8fafc;
  background: #1e293b;
}

.quota-modal-icon {
  width: 56px;
  height: 56px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quota-modal-title {
  color: #f8fafc;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.quota-modal-body {
  color: #cbd5e1;
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}

.quota-modal-actions {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
}

.quota-btn-dismiss {
  flex: 1;
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 0.625rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.quota-btn-dismiss:hover {
  background: #334155;
  color: #f8fafc;
}

.quota-btn-upgrade {
  flex: 1.4;
  background: #f59e0b;
  color: #0f172a;
  padding: 0.625rem 1rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.quota-btn-upgrade:hover {
  background: #fbbf24;
}

/* Navbar Metadata Badge Styling */
.nav-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(12, 74, 110, 0.3);
  border: 1px solid rgba(2, 132, 199, 0.4);
  color: #7dd3fc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ==========================================================================
   CANONICAL BRAND LOCKUP (abstracted from inline styles in the top navbar)
   ========================================================================== */
.hs-brand-lockup {
  width: 360px;
  min-width: 360px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  box-sizing: border-box;
  text-decoration: none;
  border-right: 1px solid var(--border-color, #334155);
}

.hs-brand-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: #0f172a;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
  flex-shrink: 0;
}

.hs-brand-icon svg {
  /* Sizing is delegated to the w-10 h-10 / md:w-12 md:h-12 utility classes so the
     brand pins stay consistent across all pages without a Tailwind build. */
  display: block;
  color: #38bdf8;
}

.hs-brand-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.hs-brand-text > span:first-child {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
  line-height: 1;
}

.hs-brand-text > span:first-child span {
  color: #38bdf8; /* "Scout" accent — mirrors the inline "Scout" span. */
}

.hs-brand-text > span:last-child {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-top: 4px;
  line-height: 1;
}

/* Brand icon size utilities (Tailwind-equivalent, so the logo badge renders at the
   canonical ~2.5rem / ~3rem across pages that do not load a Tailwind build).
   Applied to the shared docs/assets/logo.svg image used in the navbar. */
.hs-brand-icon img,
.hs-brand-icon svg {
  display: block;
}
.hs-brand-icon .w-10 { width: 2.5rem; }
.hs-brand-icon .h-10 { height: 2.5rem; }
.shrink-0 { flex-shrink: 0; }
@media (min-width: 768px) {
  .hs-brand-icon .md\:w-12 { width: 3rem; }
  .hs-brand-icon .md\:h-12 { height: 3rem; }
}

/* ==========================================================================
   WSC HYDRAMETRIC GAUGE MARKER & TOOLTIP
   ========================================================================== */
.wsc-hydro-marker {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  transition: transform 0.15s ease-in-out, filter 0.15s ease-in-out;
  cursor: pointer;
}
.wsc-hydro-marker svg {
  display: block;
  pointer-events: none;
}
.wsc-pulse {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.5);
  animation: wsc-pulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes wsc-pulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}
.wsc-tooltip {
  background-color: #0f172a !important;
  border: 1px solid #38bdf8 !important;
  color: #f8fafc !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
.wsc-tooltip::before {
  border-top-color: #38bdf8 !important;
}

/* ==========================================================================
   ALLOCATION MATRIX SORT HEADERS (hover affordance + arrow theme)
   ========================================================================== */
#matrixDrawer thead th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#matrixDrawer thead th.sortable:hover {
  background-color: #1e293b !important;
  color: #38bdf8 !important;
}
#matrixDrawer thead th.sortable .sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: #38bdf8;
  opacity: 0.85;
}

/* Compact source-type badge shown in the matrix "Source" column */
.source-badge-gw {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: uppercase;
  background-color: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.source-badge-sw {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: uppercase;
  background-color: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* Sortable header click affordance (compounds with #matrixDrawer thead th.sortable) */
th.sortable-header {
  cursor: pointer;
  user-select: none;
}
th.sortable-header:hover {
  color: #38bdf8;
}

/* Sticky selection summary bar pinned to the bottom of the matrix drawer */
#matrixSelectionSummary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid #334155;
  background: rgba(15, 23, 42, 0.95);
  font-size: 0.75rem;
  color: #e2e8f0;
  white-space: nowrap;
  overflow-x: auto;
}
#matrixSelectionSummary strong {
  color: #38bdf8;
  font-weight: 700;
}

/* ==========================================================================
   CLEAN STATIC WSC GAUGE DIAMOND NODE (zero keyframes / no pulse)
   ========================================================================== */
.wsc-static-wrapper {
  background: transparent !important;
  border: none !important;
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
}
.wsc-diamond-node {
  width: 14px;
  height: 14px;
  background-color: #0284c7;
  border: 1.5px solid #38bdf8;
  transform: rotate(45deg);
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease-out, border-color 0.12s ease-out, background-color 0.12s ease-out;
  animation: none !important;
  box-shadow: none !important;
}
.wsc-diamond-pip {
  width: 4px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  flex-shrink: 0;
}
/* WSC Active Station Diamond Hover & Highlight */
.wsc-static-wrapper:hover,
.wsc-static-wrapper.pin-highlight {
  z-index: 99999 !important;
}

.pin-highlight .wsc-diamond-node,
.wsc-static-wrapper:hover .wsc-diamond-node {
  transform: rotate(45deg) scale(1.2) !important;
  transform-origin: center center;
  border-color: #FFFFFF !important;
  background-color: #0ea5e9 !important;
  transition: transform 0.1s ease-out, border-color 0.1s ease-out;
}

.wsc-static-wrapper:hover .wsc-diamond-pip,
.wsc-static-wrapper.pin-highlight .wsc-diamond-pip {
  background-color: #ffffff;
}

/* Suppress browser focus rectangles on sub-basin SVG paths so clicking a basin
   shows no white outline frame. Correct Leaflet pane class is leaflet-subbasinPane-pane. */
.leaflet-pane.leaflet-subbasinPane-pane path,
.leaflet-subbasinPane-pane path,
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible {
  outline: none !important;
}

/* Floating toast: fixed top-center notification that floats above both the map
   and the matrix drawer (z-index 99999), used for transient guardrail errors. */
#toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.floating-toast {
    min-width: 320px;
    max-width: 480px;
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    font-family: Inter, system-ui, sans-serif;
    color: #F8F9FA;
    background-color: #1A2332;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    border-left: 4px solid #0077B6;
    pointer-events: auto;
    animation: toastFadeIn 0.25s ease-out forwards;
}

.floating-toast.toast-error {
    border-left-color: #E63946;
    background-color: #201518;
    border: 1px solid rgba(230, 57, 70, 0.4);
    border-left-width: 4px;
}

.floating-toast.toast-warning {
    border-left-color: #F59E0B;
    background-color: #201B10;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-left-width: 4px;
}

.floating-toast.toast-success {
    border-left-color: #10B981;
    background-color: #10201A;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-left-width: 4px;
}

.floating-toast.toast-info {
    border-left-color: #0077B6;
    background-color: #101A24;
    border: 1px solid rgba(0, 119, 182, 0.4);
    border-left-width: 4px;
}

.floating-toast.fade-out {
    animation: toastFadeOut 0.35s ease-in forwards;
}

@keyframes toastFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-8px); }
}

/* ==========================================================================
   Allocation Matrix Risk Badges (Pure CSS)
   ========================================================================== */
.badge-curtailment {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.03em;
    border-radius: 4px;
    border: 1px solid transparent;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Senior (Restricted / Demo Lock) -> Alert Amber / Orange */
.badge-curtailment-restricted {
    color: #fbbf24;
    background: rgba(120, 53, 15, 0.4);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.15);
}

/* Ultra Senior -> Green */
.badge-curtailment-ultra {
    color: #4ade80;
    background: rgba(20, 83, 45, 0.4);
    border-color: rgba(34, 197, 94, 0.5);
}

/* Senior Low Risk -> Sky Blue */
.badge-curtailment-low {
    color: #38bdf8;
    background: rgba(12, 74, 110, 0.4);
    border-color: rgba(56, 189, 248, 0.5);
}

/* Moderate Risk -> Orange */
.badge-curtailment-moderate {
    color: #fb923c;
    background: rgba(124, 45, 18, 0.4);
    border-color: rgba(249, 115, 22, 0.5);
}

/* Critical Risk -> Red */
.badge-curtailment-critical {
    color: #f87171;
    background: rgba(127, 29, 29, 0.4);
    border-color: rgba(239, 68, 68, 0.5);
}

/* ==========================================================================
   Allocation Matrix Preview Banner
   ========================================================================== */
.matrix-preview-banner {
    margin: 8px 16px 12px 16px;
    padding: 8px 14px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #fcd34d;
    background: rgba(120, 53, 15, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Sidebar & Nav Action Controls
   ========================================================================== */
.nav-cta-link {
    text-decoration: none;
}

.btn-sidebar-feedback {
    width: 100%;
    background: #2563eb;
    color: #fff;
    border: none;
    font-weight: 700;
    padding: 11px 16px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 8px;
}
.btn-sidebar-feedback:hover {
    background: #1d4ed8;
}

/* ==========================================================================
   FITFIR Legend Swatches
   ========================================================================== */
.legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    flex-shrink: 0;
}
.legend-swatch-ultra-senior { background: #22c55e; }
.legend-swatch-senior-low   { background: #38bdf8; }
.legend-swatch-moderate     { background: #f97316; }
.legend-swatch-critical     { background: #ef4444; }
.legend-swatch-unverified   { background: #94a3b8; }
.legend-swatch-groundwater  { background: #d946ef; border: 1px solid #f5d0fe; }

.wsc-gauge-icon {
    flex-shrink: 0;
}

/* ==========================================================================
   Map Workspace Overlays & Banners
   ========================================================================== */
.map-coverage-banner {
    display: none;
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1400;
    background: rgba(2, 6, 23, 0.92);
    border: 1px solid var(--border-color, #334155);
    border-radius: 8px;
    padding: 8px 14px;
    color: #f8fafc;
    font-size: 0.78rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    align-items: center;
}

.map-coverage-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    margin-right: 8px;
    box-shadow: 0 0 6px #f59e0b;
    flex-shrink: 0;
}

/* ==========================================================================
   Allocation Matrix Table Layout
   ========================================================================== */
.matrix-col-select {
    width: 32px;
    text-align: center;
}

.wsc-panel-body-collapsed {
    display: none;
}

/* ==========================================================================
   Modal Overlay & Card Framework
   ========================================================================== */
.hs-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.hs-modal-backdrop-prospectus {
    backdrop-filter: blur(8px);
    z-index: 10000;
}

.hs-modal-dialog {
    background: var(--bg-dark, #0f172a);
    border: 1px solid var(--border-color, #334155);
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px;
    color: #cbd5e1;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.hs-modal-dialog-narrow { max-width: 500px; }
.hs-modal-dialog-wide   { max-width: 700px; }

.hs-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.hs-modal-heading {
    margin: 0;
    color: #f8fafc;
    font-size: 1.25rem;
    font-weight: 700;
}

.hs-modal-close-icon {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}
.hs-modal-close-icon:hover {
    color: #f8fafc;
}

.hs-modal-copy {
    font-size: 0.85rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hs-form-feedback-status {
    font-size: 0.8rem;
    color: #22c55e;
    text-align: center;
    margin-top: 8px;
    display: none;
}

/* Access Denied Overlay Component */
.access-denied-email-input {
    width: 100%;
    padding: 10px 12px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f8fafc;
    font-size: 0.88rem;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.access-denied-label {
    display: block;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 6px;
}

.access-denied-error {
    display: none;
    color: #f87171;
    font-size: 0.8rem;
    margin-bottom: 10px;
    text-align: left;
}

.access-denied-button-row {
    display: flex;
    gap: 10px;
}

/* ==========================================================================
   Sub-Basin Map Popup Styling
   ========================================================================== */
.leaflet-popup-content .basin-stat-row {
    border: 1px solid #334155;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leaflet-popup-content .basin-stat-row span {
    border: none !important;
    outline: none !important;
}

.leaflet-popup-content .basin-stat-label {
    color: #94a3b8;
    font-weight: 500;
}

.leaflet-popup-content .basin-stat-value {
    color: #38bdf8;
    font-weight: 600;
}

/* ==========================================================================
   Responsive Header Layout (Single-Line Enforcement)
   ========================================================================== */
.top-nav {
    gap: 12px;
    flex-wrap: nowrap !important;
    overflow: hidden;
}

/* Search Input Flexible Shrink */
.search-bar-wrapper {
    flex: 1 1 360px;
    max-width: 440px;
    min-width: 200px;
}

.search-bar-wrapper input {
    width: 100%;
    min-width: 0;
}

.top-nav-controls {
    gap: 10px;
    flex-shrink: 0;
}

/* Responsive Visibility Breakpoints */
@media (max-width: 1200px) {
    .header-badge-registry {
        display: none !important; /* Hide secondary registry count on smaller laptops */
    }
}

@media (max-width: 992px) {
    .header-badge-preview {
        display: none !important; /* Hide preview pill */
    }
    .search-bar-wrapper {
        min-width: 160px;
    }
}

/* ==========================================================================
   Mode Toggle & WSC Widget Collision Guard (Narrow Viewports)
   ========================================================================== */
/* #map-tool-selector is already horizontally centered at top:16px. */

.wsc-widget {
    max-width: 310px;
}

/* Viewport collision guard below 850px */
@media (max-width: 850px) {
    #topRightStack {
        top: 68px; /* Drops below the mode-toggle pill */
        right: 12px;
    }
    .wsc-widget {
        max-width: 260px;
        width: 260px;
    }
    .top-nav {
        padding: 0 8px;
    }
    .search-bar-wrapper {
        max-width: 180px;
        min-width: 130px;
    }
    /* Hide sub-brand tagline on narrow screens to preserve action buttons */
    .hs-brand-text > span:last-child {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .search-bar-wrapper {
        display: none !important; /* Retain map canvas visibility on small mobile */
    }
}

/* ==========================================================================
   Header Row Collapse Prevention (Resize Lock)
   ========================================================================== */
.top-nav {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center;
}

/* Entity Inspection Popup Card */
.entity-card {
    background: #0b1120;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    border-radius: 8px;
    padding: 16px;
    width: 320px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
    color: #f8fafc;
    font-family: inherit;
}
.entity-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5) !important;
}
.entity-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}
.entity-badge-count {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #38bdf8;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}