/* ============================================================
   Wunsiedel POI Clustering Dashboard — Styles
   Master's Thesis: Atefeh Zaeemi, BHT Berlin, 2026
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #f0ede6;
  font-family: 'Source Sans 3', sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── BANNER ── */
.banner {
  background: #1a2744;
  color: #fff;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  border-bottom: 3px solid #c8a84b;
}
.banner h1 {
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.banner p { font-size: 10px; color: #b0bcd4; font-style: italic; }
.badge {
  margin-left: auto;
  font-size: 10px;
  background: #c8a84b;
  color: #1a2744;
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── LAYOUT ── */
.layout { display: flex; flex: 1; overflow: hidden; }

/* ── LEFT PANEL ── */
.lpanel {
  width: 225px;
  background: #f7f4ef;
  border-right: 2px solid #c8c0b0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}
.pb { padding: 10px 12px; border-bottom: 1px solid #ddd8ce; }
.ptitle {
  font-family: 'Source Serif 4', serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #1a2744;
  font-weight: 700;
  margin-bottom: 7px;
  padding-bottom: 3px;
  border-bottom: 2px solid #c8a84b;
  display: inline-block;
}

/* ── METHOD TABS ── */
.tabs { display: flex; }
.tab {
  flex: 1; padding: 6px 2px;
  font-size: 10px; font-weight: 700;
  text-align: center; cursor: pointer;
  border: 1px solid #bbb;
  background: #e8e0d0; color: #666;
  transition: all .15s;
}
.tab:first-child { border-radius: 3px 0 0 3px; }
.tab:last-child  { border-radius: 0 3px 3px 0; }
.tab.on { background: #1a2744; color: #fff; border-color: #1a2744; }

/* ── STATS TABLE ── */
.st { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 4px; }
.st td { padding: 3px 2px; }
.st td:first-child { color: #666; width: 56%; }
.st td:last-child  { font-weight: 600; color: #1a2744; text-align: right; }
.st tr.sep td { border-top: 1px solid #ddd; padding-top: 5px; }

/* ── NOISE BAR ── */
.nbar { height: 5px; background: #e0dbd2; border-radius: 3px; margin-top: 3px; overflow: hidden; }
.nfill { height: 100%; background: #e84040; border-radius: 3px; transition: width .4s; }

/* ── FILTERS ── */
select {
  font-size: 10.5px; font-family: inherit;
  width: 100%; padding: 4px 5px;
  border: 1px solid #bbb; background: #fff;
  color: #222; border-radius: 2px; margin-bottom: 5px;
}
.cbrow { display: flex; align-items: center; gap: 6px; font-size: 10.5px; padding: 2px 0; cursor: pointer; }
.cnt   { font-size: 9px; color: #888; margin-top: 4px; text-align: right; }

/* ── CATEGORY LEGEND ── */
.li { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 10px; }
.ldot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.15); }
.ln   { font-size: 9px; font-weight: 700; color: #1a2744; margin-left: auto; }

/* ── INFO BOX ── */
.ibox {
  background: #fff; border: 1px solid #c8a84b;
  padding: 8px; border-radius: 2px;
  font-size: 10.5px; color: #333; min-height: 70px; line-height: 1.5;
}
.ibox b { color: #1a2744; }
.tag       { display: inline-block; background: #1a2744; color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 2px; margin: 2px 2px 0 0; }
.tag.tnoise { background: #e84040; }

/* ── MAP ── */
#map { flex: 1; position: relative; }
.leaflet-control-attribution { font-size: 8px !important; }
.leaflet-control-zoom a { background: #f7f4ef !important; color: #1a2744 !important; border-color: #aaa !important; font-weight: bold !important; }

/* ── MAP OVERLAY CONTROLS ── */
.mctrl { position: absolute; top: 10px; right: 10px; z-index: 900; display: flex; flex-direction: column; gap: 4px; }
.cbtn {
  background: rgba(247,244,239,.95); border: 1px solid #bbb;
  padding: 5px 9px; font-size: 10px; cursor: pointer;
  font-family: inherit; color: #1a2744; border-radius: 2px;
  font-weight: 600; box-shadow: 1px 1px 3px rgba(0,0,0,.2);
  transition: background .15s;
}
.cbtn:hover { background: #e8e0d0; }
.cbtn.on    { background: #1a2744; color: #fff; border-color: #1a2744; }
.mfoot { position: absolute; bottom: 6px; right: 10px; font-size: 9px; color: #333; background: rgba(247,244,239,.9); padding: 3px 7px; border: 1px solid #bbb; z-index: 800; }
.msrc  { position: absolute; bottom: 6px; left: 10px; font-size: 9px; color: #555; background: rgba(247,244,239,.9); padding: 3px 7px; border: 1px solid #ccc; z-index: 800; font-style: italic; }