/* ============================================================
   map.css — StarPath Thailand WebGIS Map Page
   Dark UI chrome + light Positron map tiles for readability.
   ============================================================ */

/* ── MAP PAGE SHELL ─────────────────────────────────────── */
html, body { height: 100%; overflow: hidden; }

.map-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── MAP TOPBAR ─────────────────────────────────────────── */
.map-topbar {
  height: 52px; min-height: 52px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr2);
  display: flex; align-items: center;
  gap: 8px; padding: 0 14px;
  flex-shrink: 0; z-index: 200;
  overflow: hidden;
}

/* Date control */
.date-ctrl {
  display: flex; align-items: center; gap: 7px;
  background: var(--surf2); border: 1px solid var(--bdr2);
  border-radius: var(--rs); padding: 5px 10px;
  transition: border-color .18s; cursor: pointer;
}
.date-ctrl:hover { border-color: var(--purple); }
.date-ctrl label {
  font-family: var(--fm); font-size: 9px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--t2); cursor: pointer; flex-shrink: 0;
}
.date-ctrl svg { color: var(--t3); flex-shrink: 0; }
#date-input {
  background: transparent; border: none; outline: none;
  font-family: var(--fm); font-size: 12px; color: var(--t1);
  cursor: pointer; color-scheme: dark;
}

/* Moon chip */
.moon-chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--amber-dim); border: 1px solid rgba(245,158,11,.25);
  border-radius: var(--rs); padding: 5px 11px; flex-shrink: 0;
}
.moon-data { display: flex; flex-direction: column; gap: 1px; }
.moon-pct  { font-family: var(--fm); font-size: 13px; font-weight: 500; color: var(--amber); line-height: 1; }
.moon-name { font-family: var(--fm); font-size: 9px; color: var(--t2); text-transform: uppercase; letter-spacing: .07em; }
.moon-times{ display: flex; flex-direction: column; gap: 1px; }
.moon-time { font-family: var(--fm); font-size: 9.5px; color: var(--t1); opacity:0.8; }

/* Condition pill */
.cond-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--rs);
  border: 1px solid; font-family: var(--fm);
  font-size: 10px; font-weight: 500; flex-shrink: 0;
}
.cond-pill.good { background: var(--hi-dim); border-color: var(--hi-bdr); color: var(--hi); }
.cond-pill.fair { background: var(--md-dim); border-color: var(--md-bdr); color: var(--md); }
.cond-pill.poor { background: var(--lo-dim); border-color: var(--lo-bdr); color: var(--lo); }
.cond-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.tb-gap { flex: 1; }

/* Legend button */
.leg-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--surf2); border: 1px solid var(--bdr2);
  border-radius: var(--rs); padding: 5px 11px;
  font-family: var(--fm); font-size: 10px;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--t2); cursor: pointer;
  transition: all .18s;
}
.leg-btn:hover { border-color: var(--purple-l); color: var(--t1); }

/* ── MAIN ROW ────────────────────────────────────────────── */
.main-row {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  width: 292px; min-width: 292px;
  background: var(--bg2);
  border-right: 1px solid var(--bdr2);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Search */
.sb-top { padding: 11px 11px 0; flex-shrink: 0; }
.sb-search {
  display: flex; align-items: center; gap: 7px;
  background: var(--surf); border: 1px solid var(--bdr2);
  border-radius: var(--rs); padding: 7px 10px;
  transition: border-color .18s;
}
.sb-search:focus-within { border-color: var(--purple); }
.sb-search svg { color: var(--t3); flex-shrink: 0; }
.sb-search input {
  background: transparent; border: none; outline: none;
  font-family: var(--fb); font-size: 13px; color: var(--t1); width: 100%;
}
.sb-search input::placeholder { color: var(--t3); }

/* Filter chips */
.sb-chips { padding: 8px 11px 0; }

/* Tonight box */
.tonight-box {
  margin: 9px 11px;
  background: var(--surf); border: 1px solid var(--bdr2);
  border-radius: var(--r); padding: 10px 12px; flex-shrink: 0;
}
.tn-label {
  font-family: var(--fm); font-size: 8.5px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--t2); margin-bottom: 8px;
}
.tn-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.tn-m    { display: flex; flex-direction: column; gap: 2px; }
.tn-val  { font-family: var(--fm); font-size: 15px; font-weight: 500; line-height: 1; }
.tn-lbl  { font-family: var(--fm); font-size: 8.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--t2); }

/* Site list heading */
.sb-heading {
  padding: 2px 11px 6px;
  font-family: var(--fm); font-size: 8.5px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--t2);
  flex-shrink: 0;
}

/* Site list scroll area */
.site-list {
  flex: 1; overflow-y: auto;
  padding: 0 5px 8px;
}

/* Site row */
.srow {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 8px; border-radius: var(--rs);
  cursor: pointer; border: 1px solid transparent;
  transition: background .13s; margin-bottom: 2px;
  animation: fadeUp .18s ease both;
}
.srow:hover  { background: var(--surf); }
.srow.active { background: var(--purple-dim); border-color: var(--purple); }

.sinfo { flex: 1; min-width: 0; }
.sname {
  font-size: 12.5px; font-weight: 600; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25;
}
.smeta { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.sprov { font-size: 11px; color: var(--t1); opacity:0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sright { flex-shrink: 0; }
.stag  { font-family: var(--fm); font-size: 9px; color: var(--t2); }

.sb-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 130px; color: var(--t3);
  font-size: 12px; gap: 8px;
}

/* ── MAP PANE ─────────────────────────────────────────────── */
.map-pane {
  flex: 1; position: relative; overflow: hidden;
}
#the-map { width: 100%; height: 100%; }

/* Leaflet overrides — LIGHT TILES, DARK CHROME */
.leaflet-container { background: #E8EAF0; font-family: var(--fb); }
.leaflet-control-zoom {
  border: 1px solid var(--bdr2) !important;
  background: var(--surf) !important;
  box-shadow: none !important;
  border-radius: var(--rs) !important;
  overflow: hidden;
}
.leaflet-control-zoom a {
  background: var(--surf) !important;
  color: var(--t2) !important;
  border-bottom: 1px solid var(--bdr2) !important;
  transition: background .15s !important;
}
.leaflet-control-zoom a:hover { background: var(--surf2) !important; color: var(--t1) !important; }
.leaflet-control-attribution {
  background: rgba(6,6,26,0.75) !important;
  color: var(--t3) !important; font-size: 8.5px !important;
}
.leaflet-control-attribution a { color: var(--t2) !important; }

/* Map tooltip */
.leaflet-tooltip.sp-tip {
  background: var(--surf); border: 1px solid var(--bdr2);
  border-radius: var(--rs); color: var(--t1);
  font-family: var(--fb); font-size: 12px;
  padding: 5px 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  white-space: nowrap;
}

/* Map markers — white fill for contrast against light tiles */
.mm {
  width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fm); font-size: 11.5px; font-weight: 600;
  cursor: pointer; background: var(--bg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: transform .15s, box-shadow .15s;
  position: relative;
}
.mm::after {
  content: ''; position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%); width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
}
.mm.hi { border-color: var(--hi); color: var(--hi); box-shadow: 0 2px 10px rgba(52,211,153,.25); }
.mm.hi::after { border-top: 6px solid var(--hi); }
.mm.md { border-color: var(--md); color: var(--md); box-shadow: 0 2px 10px rgba(251,191,36,.25); }
.mm.md::after { border-top: 6px solid var(--md); }
.mm.lo { border-color: var(--lo); color: var(--lo); box-shadow: 0 2px 10px rgba(248,113,113,.2); }
.mm.lo::after { border-top: 6px solid var(--lo); }
.mm.sel { transform: scale(1.25); z-index: 9999 !important; box-shadow: 0 4px 20px rgba(123,108,246,.5) !important; border-color: var(--purple-l) !important; }

/* ── MAP LEGEND OVERLAY ─────────────────────────────────── */
.map-legend {
  position: absolute; bottom: 20px; left: 12px;
  background: rgba(10,10,34,0.96); border: 1px solid var(--bdr2);
  border-radius: var(--r); padding: 12px 14px;
  z-index: 500; display: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.map-legend.open { display: block; }
.leg-ttl {
  font-family: var(--fm); font-size: 8px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--t2); margin-bottom: 9px;
}
.leg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--fm); font-size: 11px; color: var(--t2); }
.leg-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; flex-shrink: 0; }
.leg-sep { border-top: 1px solid var(--bdr); margin: 7px 0; }

/* ── DETAIL PANEL ────────────────────────────────────────── */
.detail-panel {
  position: absolute; top: 0; right: 0;
  width: 370px; height: 100%;
  background: var(--bg2); border-left: 1px solid var(--bdr2);
  z-index: 400;
  /* Flex column so hero is fixed and body scrolls */
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,1,.36,1);
  overflow: hidden;   /* clip the slide-in animation only */
}
.detail-panel.open { transform: translateX(0); }

/* dp-content is the ONLY flex child — takes all remaining height.
   It is itself a flex column: hero (fixed) + body (scrolls).
   overflow:visible so the close button (absolute) can sit above it.    */
#dp-content {
  flex: 1 1 0;
  min-height: 0;        /* CRITICAL: allows flex child to shrink below content height */
  display: flex;
  flex-direction: column;
  overflow: hidden;     /* MUST be hidden so dp-body gets a bounded height to scroll */
}

/* Close button — absolute inside .detail-panel so it floats above hero   */
.dp-close {
  position: absolute; top: 11px; right: 11px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surf2); border: 1px solid var(--bdr2);
  color: var(--t1); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  z-index: 20; transition: all .15s;
  flex-shrink: 0;
}
.dp-close:hover { background: var(--surf3); color: var(--t1); border-color: var(--bdr3); }

/* Hero — FIXED height, never grows, never shrinks.
   Give it a visible border so the scroll split is obvious. */
.dp-hero {
  padding: 16px 16px 13px;
  padding-right: 44px;   /* clear the close button */
  background: linear-gradient(180deg, var(--surf) 0%, var(--bg2) 100%);
  border-bottom: 2px solid var(--bdr2);
  flex-shrink: 0;        /* never squash the hero */
}
.dp-type {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  font-family: var(--fm); font-size: 8.5px;
  text-transform: uppercase; letter-spacing: .09em;
  margin-bottom: 7px; border: 1px solid;
}
.dp-type.national_park { background: var(--hi-dim);    color: var(--hi); border-color: var(--hi-bdr); }
.dp-type.private       { background: var(--purple-dim); color: var(--purple-l); border-color: var(--bdr2); }
.dp-type.community     { background: rgba(56,189,248,.10); color: #38BDF8; border-color: rgba(56,189,248,.25); }
.dp-type.suburban      { background: rgba(251,146,60,.10); color: #FB923C; border-color: rgba(251,146,60,.25); }

.dp-name { font-family: var(--fd); font-size: 19px; font-weight: 700; color: var(--t1); line-height: 1.15; margin-bottom: 3px; padding-right: 30px; }
.dp-loc  { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--t2); }

/* Score ring row */
.score-row { display: flex; align-items: center; gap: 14px; margin-top: 13px; }
.ring-wrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-num  { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fm); font-size: 20px; font-weight: 600; }
.bars      { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.bar-row   { display: flex; align-items: center; gap: 7px; }
.bar-lbl   { font-family: var(--fm); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--t2); width: 56px; flex-shrink: 0; }
.bar-track { flex: 1; height: 4px; background: var(--surf3); border-radius: 2px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 2px; transition: width .45s ease; }
.bar-val   { font-family: var(--fm); font-size: 10px; font-weight: 500; width: 30px; text-align: right; flex-shrink: 0; }

/* MW banner */
.mw-banner {
  display: flex; align-items: center; gap: 9px;
  margin-top: 11px; border-radius: var(--rs); padding: 8px 10px;
  background: var(--purple-dim); border: 1px solid var(--bdr2);
}
.mw-banner.off { background: rgba(255,255,255,.02); border-color: var(--bdr); }
.mw-ico  { font-size: 17px; flex-shrink: 0; }
.mw-ttl  { font-size: 11px; font-weight: 700; color: var(--t1); margin-bottom: 1px; }
.mw-sub  { font-size: 10px; color: var(--t1); opacity:0.7; line-height: 1.4; }

/* Scrollable body — needs both flex:1 AND min-height:0 to actually scroll.
   Without min-height:0, a flex child's minimum height = its content height,
   so overflow-y:auto never activates because the container always fits.  */
.dp-body {
  flex: 1;
  min-height: 0;        /* CRITICAL: lets the body shrink so scrollbar appears */
  overflow-y: auto;
  overflow-x: hidden;
}
.dp-body::-webkit-scrollbar       { width: 4px; }
.dp-body::-webkit-scrollbar-track { background: transparent; }
.dp-body::-webkit-scrollbar-thumb { background: var(--surf3); border-radius: 2px; }

/* Sections */
.dp-sec { padding: 13px 16px; border-bottom: 1px solid var(--bdr); }
.dp-sec:last-child { border-bottom: none; }
.dp-sec-ttl {
  font-family: var(--fm); font-size: 8.5px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--t2); margin-bottom: 10px;
}

/* 7-night forecast */
.fc-strip { display: flex; gap: 4px; }
.fc-night {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--rs); padding: 7px 2px 6px;
}
.fc-night.best { border-color: var(--purple); background: var(--purple-dim); }
.fc-day  { font-family: var(--fm); font-size: 8px; color: var(--t2); text-transform: uppercase; letter-spacing: .04em; }
.fc-sc   { font-family: var(--fm); font-size: 14px; font-weight: 600; line-height: 1; }
.fc-moon { font-size: 11px; line-height: 1; }
.fc-cloud{ width: 80%; height: 3px; background: var(--surf2); border-radius: 1px; overflow: hidden; }
.fc-bar  { height: 100%; border-radius: 1px; background: var(--t3); }
.fc-best { font-family: var(--fm); font-size: 7.5px; color: var(--purple-l); text-transform: uppercase; letter-spacing: .04em; }

/* Detail grid */
.dg { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.dg-item { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--rs); padding: 9px 11px; }
.dg-item.full { grid-column: span 2; }
.dg-lbl  { font-family: var(--fm); font-size: 8.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--t2); margin-bottom: 4px; }
.dg-val  { font-size: 13px; font-weight: 600; color: var(--t1); line-height: 1.25; }
.dg-sub  { font-size: 10.5px; color: var(--t1); opacity:0.65; margin-top: 2px; }

/* Bortle bar */
.bortle-bar { display: flex; gap: 2px; margin-top: 6px; }
.b-seg { flex: 1; height: 5px; border-radius: 1px; background: var(--surf3); }
.b-seg.lit { background: var(--purple); }

/* Site description */
.site-desc { font-size: 12.5px; color: var(--t1); opacity:0.8; line-height: 1.65; font-weight: 300; }

/* Month chips */
.month-row { display: flex; flex-wrap: wrap; gap: 3px; }
.mchip {
  padding: 3px 7px; border-radius: 4px;
  font-family: var(--fm); font-size: 8.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em; border: 1px solid;
}
.mchip.best { background: var(--hi-dim); color: var(--hi); border-color: var(--hi-bdr); }
.mchip.off  { background: transparent; color: var(--t3); border-color: var(--bdr); }

/* Facilities */
.fac-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
.fac {
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: 4px; padding: 3px 8px;
  font-size: 11px; color: var(--t2);
}
.fac-link {
  background: var(--purple-dim); border: 1px solid var(--bdr2);
  border-radius: 4px; padding: 3px 8px;
  font-size: 11px; color: var(--purple-l);
  text-decoration: none; transition: background .15s;
}
.fac-link:hover { background: rgba(123,108,246,.25); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:780px) {
  .sidebar { width: 100%; min-width: unset; height: 220px; border-right: none; border-bottom: 1px solid var(--bdr2); }
  .main-row { flex-direction: column; }
  .map-pane { flex: 1; }
  .detail-panel { width: 100%; height: 60%; top: auto; bottom: 0; transform: translateY(100%); border-left: none; border-top: 1px solid var(--bdr2); }
  .detail-panel.open { transform: translateY(0); }
  .map-topbar { gap: 6px; padding: 0 8px; overflow-x: auto; }
}

/* ── DATA SOURCE BADGES ─────────────────────────────────── */
.data-badge {
  display: inline-block;
  font-family: var(--fm); font-size: 8px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 6px; border-radius: 4px; margin-left: 6px;
  vertical-align: middle;
}
.data-badge.live { background: var(--hi-dim); color: var(--hi); border: 1px solid var(--hi-bdr); }
.data-badge.est  { background: var(--md-dim); color: var(--md); border: 1px solid var(--md-bdr); }

.src-live { font-family: var(--fm); font-size: 8px; color: var(--hi); }
.src-est  { font-family: var(--fm); font-size: 8px; color: var(--md); }

/* ── LP TOGGLE BUTTON ────────────────────────────────────── */
.lp-toggle-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--surf2); border: 1px solid var(--bdr2);
  border-radius: var(--rs); padding: 5px 11px;
  font-family: var(--fm); font-size: 10px;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--t2); cursor: pointer;
  transition: all .18s; white-space: nowrap;
}
.lp-toggle-btn:hover  { border-color: var(--amber-dim); color: var(--t1); }
.lp-toggle-btn.active {
  background: var(--amber-dim); border-color: var(--amber);
  color: var(--amber);
}
.lp-toggle-btn .lp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

/* ── TOPBAR DATA STATUS DOTS ─────────────────────────────── */
.data-status-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fm); font-size: 9.5px; color: var(--t3);
  flex-shrink: 0;
}
.status-item {
  display: flex; align-items: center; gap: 4px;
}
.status-icon {
  font-size: 10px; transition: color .3s;
  cursor: help;
}

/* LP legend colours */
.lp-legend-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lp-chip {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--fm); font-size: 9.5px; color: var(--t2);
}
.lp-swatch {
  width: 14px; height: 10px; border-radius: 2px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
}