/* SWAG-DSS - shared CSS: IWMI National font + Leaflet overrides */

/* IWMI brand body font. National is the primary face per IWMI brand spec;
   Inter is the system fallback while the user agent loads National. */
@font-face {
    font-family: 'National';
    src: url('/static/fonts/National-Book.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'National';
    src: url('/static/fonts/National-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'National';
    src: url('/static/fonts/National-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'National';
    src: url('/static/fonts/National-Semibold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Apply National everywhere a sans-serif is used; DM Serif Text headings
   are unaffected because they use font-serif / font-headline classes. */
html, body {
    font-family: 'National', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.font-sans, .font-body {
    font-family: 'National', 'Inter', system-ui, -apple-system, sans-serif !important;
}



/* Reallocation flow arrowheads. These are divIcon markers, not paths, so they
   are never clipped by the SVG renderer and stay put across zooms. A custom
   className already opts out of .leaflet-div-icon, but pin the reset here so a
   future Leaflet upgrade cannot reintroduce the default white box. */
.flow-arrowhead {
    background: none;
    border: none;
    pointer-events: none;
}

/* Leaflet zoom control */
.leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 2px 8px rgba(7, 60, 100, 0.04) !important;
}
.leaflet-control-zoom a {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    color: #28537D !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
}
.leaflet-control-zoom a:hover {
    background: #f1f5f9 !important;
}

/* Leaflet popup */
.leaflet-popup-content-wrapper {
    border-radius: 8px !important;
    box-shadow: 0 20px 40px rgba(7, 60, 100, 0.06) !important;
    font-family: 'National', 'Inter', sans-serif !important;
}
.leaflet-popup-tip {
    box-shadow: none !important;
}

/* Leaflet tooltip */
.leaflet-tooltip {
    font-family: 'National', 'Inter', sans-serif !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    box-shadow: 0 4px 16px rgba(7, 60, 100, 0.06) !important;
}

/* Suppress the browser's default focus outline on clicked map polygons.
   When a Leaflet SVG path is focused (after a click) the browser draws a
   rectangular focus ring around the path's bounding box - that's the "box
   encompassing the polygon", not the polygon itself.
   Removing the outline lets the polygon's own fill / stroke do the
   highlighting work (driven by WRUA_STYLE_SELECTED in map.js). */
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible {
    outline: none !important;
}

/* Scrollbar styling for sidebars */
.overflow-y-auto::-webkit-scrollbar { width: 4px; }
.overflow-y-auto::-webkit-scrollbar-track { background: transparent; }
.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #E8E7E7;
    border-radius: 4px;
}

/* Tooltips are rendered by app/static/js/shared/tooltip.js as a body-level
   portal, so a CSS-only fallback is no longer needed. The previous ::after
   approach lived here; it was removed because pseudo-elements are clipped by
   their anchor's stacking context (sidebar / right-panel overflow), which made
   tooltips appear under nearby panels regardless of z-index. */

/* ---- Stat skeleton shimmer ----
   Applied to the stat value span while a side-panel fetch is in flight so
   the panel doesn't sit on "--" for a perceivable beat. The element keeps
   its layout box; only the text colour and background are swapped. */
.stat-skeleton {
    color: transparent !important;
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    animation: stat-shimmer 1.2s linear infinite;
    border-radius: 4px;
    min-width: 3em;
    display: inline-block;
}
@keyframes stat-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Region loading overlay (loaders: chart / map / table fetches) ----
   Companion to .stat-skeleton for non-span regions (chart canvases, the
   Leaflet map, comparison cards/table). setRegionLoading(elId, on) in the
   dashboard/comparison JS injects an absolutely-positioned overlay holding a
   centred progress_activity spinner, then removes it in BOTH the success and
   error paths. The host element is made position:relative while loading so
   the overlay pins to it; map interaction is not blocked (pointer-events:none
   on the map variant) so the spinner only signals an in-flight repaint. */
.region-loading-host { position: relative; }
.region-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: inherit;
    z-index: 400;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}
/* On the map the overlay must not swallow pan/zoom; it is a hint, not a modal. */
.region-loading-overlay.region-loading-map { pointer-events: none; }
.region-loading-overlay .material-symbols-outlined { font-size: 28px; color: #0297A6; }

/* Side-panel Compact/Expert density toggle removed.
   The `.expert-only` blocks now always render (full detail panel). */