/* ==========================================================================
   KP GeoPortal — Core Stylesheet
   Design language: cartographic ink & contour — deep slate blues with a
   copper/amber survey-marker accent. Space Grotesk for display,
   Inter for UI text, JetBrains Mono for coordinates/data.
   ========================================================================== */

:root{
  /* palette */
  --ink-950:#0a1420;
  --ink-900:#0e1a2b;
  --ink-800:#132538;
  --ink-700:#1b3350;
  --ink-600:#254468;
  --ink-500:#33587f;
  --paper-0:#f6f4ee;
  --paper-50:#eeebe1;
  --line:#d9d4c4;
  --copper:#c76b3f;
  --copper-light:#e08a5c;
  --teal:#2b9e8f;
  --amber:#d9a441;
  --danger:#c9503f;
  --text-900:#101820;
  --text-600:#4c5a68;
  --text-050:#f6f4ee;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-s:8px;
  --radius-m:14px;
  --radius-l:20px;
  --shadow-soft:0 8px 30px rgba(10,20,32,.14);
  --shadow-deep:0 20px 60px rgba(10,20,32,.28);

  --bar-h:64px;
  --panel-w:340px;

  --surface: rgba(255,255,255,.72);
  --surface-solid:#ffffff;
  --surface-border: rgba(16,24,32,.08);
  --bg: var(--paper-0);
  --fg: var(--text-900);
  --fg-muted: var(--text-600);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:var(--font-body);
  color:var(--fg);
  background:var(--bg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);margin:0;}
button{font-family:inherit;cursor:pointer;}
input{font-family:inherit;}
::selection{background:var(--copper-light);color:#fff;}

/* ---------- App bar ---------- */
.app-bar{
  position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:1000;
  display:flex;align-items:center;gap:20px;padding:0 18px;
  background:var(--surface);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--surface-border);
}
.app-bar__brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand-mark{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--copper),var(--copper-light));
  color:#fff;font-size:16px;box-shadow:var(--shadow-soft);
}
.brand-text h1{font-size:17px;line-height:1.1;letter-spacing:.2px;}
.brand-text span{font-size:11px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.6px;}

.app-bar__search{
  flex:1;max-width:480px;position:relative;display:flex;align-items:center;gap:10px;
  background:var(--surface-solid);border:1px solid var(--surface-border);
  border-radius:999px;padding:9px 16px;color:var(--fg-muted);
}
.app-bar__search input{
  flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--fg);
}
.app-bar__actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0;}

.icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid transparent;
  background:var(--surface-solid);color:var(--fg);display:grid;place-items:center;
  font-size:15px;transition:.15s ease;border:1px solid var(--surface-border);
}
.icon-btn:hover{background:var(--ink-900);color:#fff;transform:translateY(-1px);}
.icon-btn.ghost{background:transparent;border-color:transparent;box-shadow:none;}
.icon-btn.ghost:hover{background:rgba(16,24,32,.08);color:var(--fg);}

/* search results dropdown */
.search-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--surface-solid);border-radius:var(--radius-m);
  box-shadow:var(--shadow-deep);border:1px solid var(--surface-border);
  max-height:340px;overflow:auto;padding:6px;z-index:1100;
}
.search-results .sr-group-label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--fg-muted);padding:8px 10px 4px;}
.search-results .sr-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-s);font-size:13.5px;
}
.search-results .sr-item:hover, .search-results .sr-item.active{background:var(--paper-50);}
.search-results .sr-item i{color:var(--copper);width:16px;}
.search-results .sr-item small{margin-left:auto;color:var(--fg-muted);font-family:var(--font-mono);}

/* ---------- Side panel ---------- */
.side-panel{
  position:fixed;top:var(--bar-h);left:0;bottom:0;width:var(--panel-w);z-index:900;
  display:flex;background:var(--surface);backdrop-filter:blur(16px) saturate(140%);
  border-right:1px solid var(--surface-border);transition:transform .25s ease;
}
.side-panel.collapsed{transform:translateX(-100%);}
.side-panel__tabs{
  display:flex;flex-direction:column;width:64px;flex-shrink:0;
  border-right:1px solid var(--surface-border);padding:10px 0;gap:4px;
}
.tab-btn{
  border:none;background:transparent;padding:12px 4px;display:flex;flex-direction:column;
  align-items:center;gap:4px;color:var(--fg-muted);font-size:10px;border-radius:var(--radius-s);margin:0 6px;
}
.tab-btn i{font-size:16px;}
.tab-btn.active{background:var(--ink-900);color:#fff;}
.side-panel__body{flex:1;overflow-y:auto;padding:18px 18px 40px;}
.side-panel__body h2{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--fg-muted);margin:22px 0 10px;}
.side-panel__body h2:first-child{margin-top:2px;}
.tab-pane{display:none;}
.tab-pane.active{display:block;}
.hint{font-size:12.5px;color:var(--fg-muted);line-height:1.5;}

/* basemap thumbnails */
.basemap-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.basemap-card{
  border-radius:var(--radius-m);padding:10px;background:var(--surface-solid);
  border:2px solid transparent;text-align:center;font-size:11.5px;font-weight:500;
}
.basemap-card .thumb{
  height:52px;border-radius:8px;margin-bottom:6px;
  background-size:cover;background-position:center;
}
.basemap-card.active{border-color:var(--copper);box-shadow:var(--shadow-soft);}

/* overlay / uploaded layer list */
.layer-list{display:flex;flex-direction:column;gap:8px;}
.layer-row{
  background:var(--surface-solid);border:1px solid var(--surface-border);border-radius:var(--radius-m);
  padding:10px 12px;display:flex;align-items:center;gap:10px;
}
.layer-row .drag-handle{color:var(--fg-muted);cursor:grab;font-size:12px;}
.layer-row .layer-name{flex:1;font-size:13px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.layer-row .layer-actions{display:flex;gap:4px;}
.layer-row button{width:26px;height:26px;border:none;background:transparent;border-radius:6px;color:var(--fg-muted);}
.layer-row button:hover{background:var(--paper-50);color:var(--fg);}
.layer-row input[type="range"]{width:100%;accent-color:var(--copper);}
.layer-row .opacity-row{display:none;flex-direction:column;gap:4px;width:100%;margin-top:6px;}
.layer-row.expanded .opacity-row{display:flex;}

.legend-box{background:var(--surface-solid);border:1px solid var(--surface-border);border-radius:var(--radius-m);padding:12px;font-size:12.5px;}
.legend-item{display:flex;align-items:center;gap:8px;padding:4px 0;}
.legend-swatch{width:14px;height:14px;border-radius:4px;flex-shrink:0;}

.empty-state{color:var(--fg-muted);font-size:12.5px;font-style:italic;}

/* draw / route / upload panes */
.draw-summary{background:var(--surface-solid);border:1px solid var(--surface-border);border-radius:var(--radius-m);padding:12px;font-size:12.5px;margin-bottom:12px;max-height:220px;overflow:auto;}
.draw-summary .draw-feature{padding:6px 0;border-bottom:1px dashed var(--surface-border);}
.draw-summary .draw-feature:last-child{border-bottom:none;}

label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--fg-muted);margin:14px 0 6px;}
input[type="text"], input[type="search"]{
  width:100%;padding:10px 12px;border-radius:var(--radius-s);border:1px solid var(--surface-border);
  background:var(--surface-solid);font-size:13.5px;color:var(--fg);
}
.segmented{display:flex;background:var(--surface-solid);border:1px solid var(--surface-border);border-radius:var(--radius-s);overflow:hidden;}
.segmented button{flex:1;border:none;background:transparent;padding:9px 4px;font-size:11.5px;color:var(--fg-muted);}
.segmented button.active{background:var(--ink-900);color:#fff;}

.btn-primary, .btn-outline{
  width:100%;padding:11px;border-radius:var(--radius-s);font-size:13.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;border:1px solid transparent;
}
.btn-primary{background:var(--copper);color:#fff;}
.btn-primary:hover{background:var(--copper-light);}
.btn-outline{background:transparent;border-color:var(--surface-border);color:var(--fg);}
.btn-outline:hover{background:var(--surface-solid);}

.route-summary{margin-top:14px;font-size:13px;}
.route-summary .rs-line{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--surface-border);}

.dropzone{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  border:2px dashed var(--surface-border);border-radius:var(--radius-m);
  padding:28px 12px;text-align:center;color:var(--fg-muted);font-size:12.5px;cursor:pointer;
}
.dropzone.dragover{border-color:var(--copper);color:var(--copper);background:rgba(199,107,63,.06);}
.dropzone i{font-size:26px;color:var(--copper);}

/* ---------- Map ---------- */
#map{
  position:fixed;top:var(--bar-h);left:var(--panel-w);right:0;bottom:0;background:#dfe6ea;
  transition:left .25s ease;
}
.side-panel.collapsed ~ #map{left:0;}

/* popups */
.leaflet-popup-content-wrapper{border-radius:var(--radius-m);box-shadow:var(--shadow-deep);}
.district-popup{min-width:230px;font-family:var(--font-body);}
.district-popup h3{font-family:var(--font-display);font-size:16px;margin-bottom:8px;color:var(--ink-900);}
.district-popup table{width:100%;font-size:12.5px;border-collapse:collapse;}
.district-popup td{padding:3px 0;color:var(--fg-muted);}
.district-popup td:last-child{text-align:right;font-family:var(--font-mono);color:var(--fg);font-weight:600;}

/* ---------- Tool dock ---------- */
.tool-dock{
  position:fixed;right:18px;top:calc(var(--bar-h) + 18px);z-index:800;
  display:flex;flex-direction:column;gap:2px;background:var(--surface);
  backdrop-filter:blur(16px);border-radius:var(--radius-m);border:1px solid var(--surface-border);
  box-shadow:var(--shadow-soft);padding:6px;
}
.tool-dock button{
  width:40px;height:40px;border:none;background:transparent;border-radius:10px;color:var(--fg);font-size:15px;
}
.tool-dock button:hover{background:var(--ink-900);color:#fff;}
.dock-sep{height:1px;background:var(--surface-border);margin:4px 6px;}

/* ---------- Status strip ---------- */
.status-strip{
  position:fixed;left:calc(var(--panel-w) + 16px);bottom:16px;z-index:800;
  display:flex;gap:14px;background:var(--surface);backdrop-filter:blur(16px);
  border:1px solid var(--surface-border);border-radius:999px;padding:8px 16px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--fg-muted);transition:left .25s ease;
}
.side-panel.collapsed ~ .status-strip{left:16px;}
.status-strip i{color:var(--copper);margin-right:4px;}

/* ---------- Stats panel ---------- */
.stats-panel{
  position:fixed;top:var(--bar-h);right:-420px;bottom:0;width:400px;z-index:1200;
  background:var(--surface-solid);box-shadow:var(--shadow-deep);border-left:1px solid var(--surface-border);
  transition:right .25s ease;display:flex;flex-direction:column;
}
.stats-panel.open{right:0;}
.stats-panel__header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--surface-border);}
.stats-panel__header h2{font-size:15px;display:flex;gap:8px;align-items:center;}
.stats-panel__body{padding:18px;overflow-y:auto;flex:1;}
.stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.stat-card{background:var(--paper-50);border-radius:var(--radius-m);padding:14px;text-align:center;}
.stat-value{display:block;font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink-900);}
.stat-label{font-size:11px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.4px;}
.chart-card{background:var(--paper-50);border-radius:var(--radius-m);padding:14px;margin-bottom:16px;}
.chart-card h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--fg-muted);margin-bottom:10px;}

/* ---------- Toasts ---------- */
.toast-stack{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;}
.toast{
  background:var(--ink-900);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;
  box-shadow:var(--shadow-deep);opacity:0;transform:translateY(10px);transition:.25s ease;display:flex;align-items:center;gap:8px;
}
.toast.show{opacity:1;transform:translateY(0);}
.toast.error{background:var(--danger);}
.toast.success{background:var(--teal);}

/* ---------- Print template (offscreen; used by html2canvas) ---------- */
.print-template{
  position:fixed;left:-9999px;top:0;width:1122px;background:#fff;padding:24px;font-family:var(--font-body);color:#111;
}
.print-header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:12px;}
.print-header h1{font-size:20px;}
#printMapArea{width:100%;height:650px;}
.print-footer{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;}

/* leaflet control tweaks to match theme */
.leaflet-control-zoom, .leaflet-control-layers, .leaflet-bar{
  border-radius:var(--radius-s) !important;overflow:hidden;box-shadow:var(--shadow-soft) !important;border:none !important;
}
.leaflet-draw-toolbar a{background-color:#fff;}

/* scrollbars */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:rgba(16,24,32,.18);border-radius:8px;}