/* ── Google Fonts fallbacks (active until real font files are dropped into assets/) ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* ── @font-face stubs — drop the files into assets/ to activate the real fonts ── */
@font-face {
    font-family: 'Agrandir';
    src: url('/assets/Agrandir-Bold.woff2') format('woff2'),
         url('/assets/Agrandir-Bold.woff')  format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Apercu';
    src: url('/assets/Apercu-Regular.woff2') format('woff2'),
         url('/assets/Apercu-Regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Apercu';
    src: url('/assets/Apercu-Medium.woff2') format('woff2'),
         url('/assets/Apercu-Medium.woff')  format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Apercu';
    src: url('/assets/Apercu-Bold.woff2') format('woff2'),
         url('/assets/Apercu-Bold.woff')  format('woff');
    font-weight: 600 700;
    font-style: normal;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

:root {
    --Dash-Fill-Interactive-Strong: #1e3a5c;
}

body {
    background-color: #f5f5f7;
    margin: 0;
    font-family: 'Apercu', 'DM Sans', system-ui, sans-serif;
}

/* ── Header font — Agrandir Bold (falls back to Plus Jakarta Sans) ─────────────── */
.app-header-title {
    font-family: 'Agrandir', 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

/* Hide radio inputs inside toggles so they don't inflate label widths */
.view-toggle-radio input[type="radio"],
.level-toggle-radio input[type="radio"],
.chart-type-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* Dash 4 adds margin-right: 16px to each inline radio option — remove it
   so the last option sits flush with the container and the thumb aligns */
.view-toggle-radio .dash-options-list-option,
.level-toggle-radio .dash-options-list-option,
.chart-type-radio .dash-options-list-option {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* ── Segmented control — shared base ────────────────────────────────────────── */

.view-toggle-radio,
.level-toggle-radio,
.chart-type-radio {
    display: inline-flex;
    align-items: center;
    position: relative;
    background-color: #c8dcee;
    border: 1px solid rgba(30,58,92,0.18);
    border-radius: 8px;
    padding: 3px;
    gap: 0;
}

/* When level-toggle floats over the map, frosted-glass that blends with the map */
.level-toggle-radio {
    background-color: rgba(255,255,255,0.72);
    border-color: rgba(0,0,0,0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 8px rgba(0,0,0,0.10);
}

.level-toggle-radio label {
    color: rgba(20,40,65,0.80);
}

.level-toggle-radio .toggle-thumb {
    background-color: rgba(30,58,92,0.82);
}

/* Sliding thumb — navy pill that moves between options */
.toggle-thumb {
    position: absolute;
    border-radius: 6px;
    background-color: #1e3a5c;
    pointer-events: none;
    z-index: 0;
    transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                top  0.22s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Labels sit above the thumb; off state: transparent track + black text */
.view-toggle-radio label,
.level-toggle-radio label,
.chart-type-radio label {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 5px 14px;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    color: #000000;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.18s;
    user-select: none;
    white-space: nowrap;
}

/* Active label text flips to white once the navy thumb is behind it */
.view-toggle-radio label:has(input[type="radio"]:checked),
.level-toggle-radio label:has(input[type="radio"]:checked),
.chart-type-radio label:has(input[type="radio"]:checked) {
    color: #ffffff;
}

/* Disabled chart-type options (e.g. Surveillance/Lab/Care at zone level,
   where that data isn't tracked) — dim to light blue and block the click */
.chart-type-radio label:has(input[type="radio"]:disabled) {
    color: #a9c8e8 !important;
    cursor: not-allowed;
}

/* ── Map/Treemap view toggle — larger than the lang toggle ──────────────────────── */

.view-toggle-lg label {
    padding: 8px 22px !important;
    font-size: 14px !important;
}

/* ── Shared 3D lift — applied to all clickable cards ────────────────────────────── */

.reset-btn,
.ir-row-btn {
    will-change: transform;
    transition: background 0.15s ease,
                background-color 0.15s ease,
                color 0.15s ease,
                transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease;
}

.reset-btn:hover,
.ir-row-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(30,58,92,0.13);
}

/* ── Reset view button — matches the off-state of the toggle segments ─────────── */

.reset-btn {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid rgba(30,58,92,0.18);
    background-color: #c8dcee;
    color: #000000;
    cursor: pointer;
}

.reset-btn:hover {
    background-color: #1e3a5c;
    color: #ffffff;
}

.reset-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── IR list row buttons ─────────────────────────────────────────────────────── */

.ir-row-btn {
    background: none;
    cursor: pointer;
}

.ir-row-btn:hover {
    background: rgba(200,220,238,0.4);
}

/* ── Global catch-all: any radio/checkbox label defaults to dark ─────────────── */

label {
    color: #111111;
}

/* ── Date slider ─────────────────────────────────────────────────────────────── */

/* Track */
.rc-slider-rail {
    background-color: #d0d0d0 !important;
    height: 3px !important;
}

.rc-slider-track {
    background-color: #1e3a5c !important;
    height: 3px !important;
}

/* Handle */
.rc-slider-handle {
    border-color: #1e3a5c !important;
    background-color: #1e3a5c !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -5px !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 3px rgba(30,58,92,0.2) !important;
}

.rc-slider-handle:hover,
.rc-slider-handle:active {
    box-shadow: 0 0 0 5px rgba(30,58,92,0.25) !important;
}

/* Dash 4 native range input fallback */
#date-slider input[type="range"] {
    accent-color: #1e3a5c;
}
[class*="rc-slider-track"],
[class*="SliderTrack"] {
    background-color: #1e3a5c !important;
}
[class*="rc-slider-handle"],
[class*="SliderHandle"] {
    border-color: #1e3a5c !important;
    background-color: #1e3a5c !important;
}

.dash-slider-root {
    --slider-color: #1e3a5c !important;
    --accent: #1e3a5c !important;
    --primary: #1e3a5c !important;
    --color-primary: #1e3a5c !important;
    --color-accent: #1e3a5c !important;
    --track-color: #1e3a5c !important;
    --fill-color: #1e3a5c !important;
    --interactive-color: #1e3a5c !important;
    --strong-color: #1e3a5c !important;
}

#date-slider .dash.fill.interactive.strong,
#date-slider .fill.interactive.strong,
#date-slider .fill.strong {
    background-color: #1e3a5c !important;
    border-color: #1e3a5c !important;
}

.dash-slider-thumb {
    background-color: #1e3a5c !important;
    border-color: #1e3a5c !important;
    box-shadow: none !important;
}

.dash-slider-thumb:hover,
.dash-slider-thumb:focus,
.dash-slider-thumb:active {
    background-color: #1e3a5c !important;
    box-shadow: 0 0 0 4px rgba(30,58,92,0.2) !important;
}

/* Tick marks */
.rc-slider-mark-text {
    color: #777 !important;
    font-size: 10px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    margin-top: 4px !important;
}

/* Hide the raw index-number tooltip and Dash 4's editable input beside the handle */
.rc-slider-tooltip,
.rc-slider-tooltip-inner,
[class*="slider-tooltip"],
[class*="SliderTooltip"],
#date-slider input,
#date-slider [role="tooltip"],
#date-slider [class*="tooltip"],
#date-slider [class*="handle-label"],
#date-slider [class*="Tooltip"],
#date-slider [class*="Input"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ── Treemap tile lift ───────────────────────────────────────────────────────── */

/* Let the shadow bleed outside the SVG canvas */
#treemap .main-svg,
#treemap svg {
    overflow: visible !important;
}

/* Base transition on every tile */
#treemap g.slice {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter   0.18s ease;
}

/* Lifted state — set by JS mouseenter so only the topmost tile activates */
#treemap g.slice.slice-lift {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 16px rgba(30, 58, 92, 0.22));
}

/* Hide Plotly's hover label anchor arrow on the choropleth map */
#choropleth-map .hovertext {
    display: none !important;
}

/* Crosshair cursor over the choropleth map — covers Plotly drag layers,
   MapLibre/Mapbox canvas, and any element Plotly sets dynamically */
#choropleth-map,
#choropleth-map *,
#choropleth-map canvas,
#choropleth-map .mapboxgl-canvas,
#choropleth-map .mapboxgl-canvas-container,
#choropleth-map .mapboxgl-interactive,
#choropleth-map .maplibregl-canvas,
#choropleth-map .maplibregl-canvas-container,
#choropleth-map .maplibregl-interactive,
#choropleth-map .nsewdrag,
#choropleth-map .nsdrag,
#choropleth-map .ewdrag,
#choropleth-map .drag {
    cursor: crosshair !important;
}

/* ── Zone rankings DataTable ─────────────────────────────────────────────────── */

/* Remove all cell borders that Dash injects by default */
#ir-table .dash-spreadsheet-container .dash-spreadsheet,
#ir-table .dash-spreadsheet-container .dash-spreadsheet td,
#ir-table .dash-spreadsheet-container .dash-spreadsheet th {
    border: none !important;
    box-shadow: none !important;
}

/* Row hover — highlight entire row */
#ir-table .dash-spreadsheet-container tbody tr:hover td.dash-cell {
    background-color: rgba(200, 220, 238, 0.35) !important;
    cursor: pointer;
}

/* Active / selected cell — no blue outline ring */
#ir-table .dash-spreadsheet-container td.dash-cell.focused {
    outline: none !important;
    box-shadow: none !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────────── */

/* No extra margin above footer */
body > div:last-child {
    margin-top: 0;
}

/* Invisible scrollbar for the incidence ranking list */
.no-scrollbar {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / Edge */
}
.no-scrollbar::-webkit-scrollbar {
    display: none;               /* Chrome / Safari */
}