:root{
  --bg:#0b0c10;
  --card:#111318;
  --ink:#e8e8ea;
  --muted:#a8acb6;
  --accent:#7cc4ff;
  --border:#22252d;
  --good:#44d19f;
  --bad:#ff6b6b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:1100px; margin:24px auto 48px; padding:0 16px}
.pagehead h1{margin:0 0 6px}
.subtle{color:var(--muted); font-size:14px}

.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.card-sm{padding:10px; border-radius:10px}

#map{
  width:100%;
  height:70vh;
  border:1px solid var(--border);
  border-radius:12px;
}

/* Status + badges */
.statusbar{ margin-top:10px; color:var(--muted); font-size:13px; }
.badge{border:1px solid var(--border); padding:2px 8px; border-radius:999px; color:var(--muted); font-size:12px}
.error{color:var(--bad)}
.note{color:var(--muted); font-size:13px}
.spinner{display:inline-block; width:12px; height:12px; border:2px solid var(--muted); border-right-color:transparent; border-radius:50%; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Small legend panel (if used) */
.legend{
  position:absolute; z-index:500;
  top:12px; left:12px;
  background:#0e1015; border:1px solid var(--border);
  color:var(--ink); border-radius:10px; padding:8px 10px;
}
.legend strong{display:block; margin-bottom:6px; font-size:13px; color:#cfd3db}
.legend label{display:block; font-size:13px; margin:4px 0}
.legend input{vertical-align:middle}

/* --- Tooltip labels --- */
.leaflet-tooltip.mytip{
  background:#0e1015;
  color:var(--ink);
  border:1px solid var(--border);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  border-radius:10px;
  padding:8px 10px;
  pointer-events:none; /* keeps map hover smooth */
}
.leaflet-tooltip.mytip code{
  color:#9fb7ff;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace
}
/* keep older class names compatible */
.mytip { background:#111318; color:#e8e8ea; border:1px solid #22252d; }
.leaflet-tooltip.region-label { background:transparent; border:none; box-shadow:none; }
.region-num {
  font-weight:800; font-size:16px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 6px rgba(0,0,0,.5);
}

/* ---------- Inputs & buttons ---------- */
input, select, button{
  font:inherit;
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 10px;
  background:#1a1c22;
  color:var(--ink);
}
input:focus, select:focus{outline:none; border-color:var(--accent)}
button{cursor:pointer; background:var(--accent); color:#000; font-weight:600}
button.ghost{background:transparent; color:var(--muted); border:1px solid var(--border)}
button.copybtn{background:#2a2d34; font-size:12px; margin-left:6px; padding:2px 6px; border-radius:6px}
button.copybtn:hover{background:var(--accent); color:#000}

/* Toolbar */
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{border:1px solid var(--border); padding:6px 8px; text-align:left}
th{background:#1a1c22; color:var(--accent); font-weight:600}
tr:nth-child(even){background:#16181d}
tr:hover{background:#20222a}
code.k{background:#1e2026; padding:1px 4px; border-radius:4px; font-size:13px}

/* Sections */
.section{margin-top:32px}
.section h2{margin:0 0 8px; font-size:18px; color:var(--accent)}

/* Dropdown chain */
.dropdown-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.dropdown-row select{flex:1; min-width:180px}

/* Output areas */
#hs-out, #dropdown-out, #areacode-out{margin-top:12px}
#areacode-out table{font-size:13px}

/* --- Hospital/School Search --- */
.hs-controls { display:flex; flex-direction:column; gap:12px; }
.hs-row { display:flex; gap:8px; flex-wrap:wrap; }
.hs-input {
  flex:1; min-width:240px; padding:8px 10px;
  border:1px solid var(--border); border-radius:8px;
  background:#1a1c22; color:var(--ink);
}
.hs-input:focus { outline:none; border-color:var(--accent); }
.hs-options { justify-content:space-between; align-items:center; }
.hs-scope label { margin-right:12px; font-size:14px; color:var(--muted); }
.hs-pagesize { display:flex; align-items:center; gap:6px; }
.hs-pagesize select {
  background:#1a1c22; border:1px solid var(--border);
  border-radius:6px; color:var(--ink); padding:4px 6px;
}

/* ---------- Leaflet dark UI tweaks ---------- */
.leaflet-container { background:transparent; }
.leaflet-control-zoom a{
  background:#1a1c22; color:var(--ink); border:1px solid var(--border);
}
.leaflet-control-zoom a:hover{ background:#22262f; }
.leaflet-control-attribution{
  background:#0e1015; color:var(--muted) !important; border:1px solid var(--border);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background:#0e1015; color:var(--ink); border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

/* ---------- API pins status row ---------- */
#hosp-status .count{ color:var(--ink); }
#hosp-status .warn{ color:var(--bad); }
#hosp-status .ok{ color:var(--good); }

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .container{margin:16px auto 28px}
  #map{height:60vh}
  .pagehead h1{font-size:20px}
  .statusbar{font-size:12px}
  .legend{font-size:12px}
}