*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif;overflow-x:auto}
/* #app is designed at a fixed 1280px minimum width. overflow is intentionally
   "auto" (not "hidden"): on a browser window narrower than 1280px, controls that
   sit past the visible edge (admin chip, mode toggle) must stay reachable via
   scroll instead of being permanently clipped. */
#app{position:relative;width:100%;min-width:1280px;height:100vh;min-height:780px;overflow:auto;background:linear-gradient(135deg,#eaf1f9,#dde7f3);color:#16273f}

.cc-scroll::-webkit-scrollbar{width:8px;height:8px}
.cc-scroll::-webkit-scrollbar-thumb{background:rgba(70,110,160,.28);border-radius:4px}
.cc-scroll::-webkit-scrollbar-track{background:transparent}

.leaflet-container{background:#dfe8f3;font-family:'IBM Plex Sans',sans-serif}
.leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 8px 26px rgba(20,53,107,.22);border:1px solid rgba(70,110,160,.18)}
.leaflet-popup-content{margin:12px 14px;font-family:'IBM Plex Sans',sans-serif}
.leaflet-tooltip{border-radius:7px;border:1px solid rgba(70,110,160,.2);font:600 11px 'IBM Plex Sans';color:#14356b;box-shadow:0 3px 10px rgba(20,53,107,.14)}

.cc-alert{width:20px;height:20px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 0 0 2px var(--c),0 2px 8px rgba(0,0,0,.5);position:relative;animation:cc-blink 1s steps(1) infinite}
.cc-alert::after{content:'';position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border-radius:50%;border:3px solid var(--c);animation:cc-ping 1.4s ease-out infinite}
.cc-alert::before{content:'';position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;border-radius:50%;background:var(--c);opacity:.18;animation:cc-ping2 1.4s ease-out infinite}
@keyframes cc-ping{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.9);opacity:0}}
@keyframes cc-ping2{0%{transform:scale(1);opacity:.35}100%{transform:scale(3.6);opacity:0}}
@keyframes cc-blink{0%,60%{box-shadow:0 0 0 2px var(--c),0 2px 8px rgba(0,0,0,.5),0 0 14px 4px var(--c)}61%,100%{box-shadow:0 0 0 2px var(--c),0 2px 8px rgba(0,0,0,.5)}}
.cc-flow{animation:cc-dash 1.1s linear infinite}
@keyframes cc-dash{to{stroke-dashoffset:-32}}
@keyframes cc-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes cc-spin{to{transform:rotate(360deg)}}
@keyframes cc-slidein{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}
.cc-panel-anim{animation:cc-slidein .28s ease}
@keyframes cc-fadein{from{opacity:0}to{opacity:1}}
@keyframes cc-drawer{from{transform:translateY(18px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.cc-click{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.cc-click:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(20,53,107,.18)!important}
.cc-hotspot{animation:cc-hot 1.1s ease-in-out infinite}
@keyframes cc-hot{0%,100%{fill-opacity:.72}50%{fill-opacity:.95}}

/* hover/focus states that were per-element style-hover/style-focus in the original prototype */
.cc-field:focus{border-color:#2f6fe0;box-shadow:0 0 0 3px rgba(47,111,224,.14)}
.cc-login-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(20,53,107,.36)}
/* Facility markers/clusters overlay every map layer for reference, but must not steal
   clicks meant for the choropleth beneath except on the Fasilitas layer itself (see
   mapmanager.js _applyLayer). Leaflet's own CSS sets pointer-events:auto on interactive
   markers regardless of pane style, so this has to target the marker icons directly. */
.leaflet-facil-pane.facil-noclick .leaflet-marker-icon{pointer-events:none!important}
.cc-admin-chip:hover{background:#f2f6fb}
.cc-side-link:hover{background:rgba(255,255,255,.08)}
.cc-tab-row::-webkit-scrollbar{display:none}

button, input, select{font-family:inherit}