/* =========================
   TOKENS
   ========================= */
:root{
  --topbar-h: 68px;
  --sidebar-w: 340px;
  --gap: 12px;

  /* palette */
  --border:#e5e7eb; --panel:#fff; --muted:#6b7280;
  --blue-25:#f5f9ff; --blue-50:#eaf2ff; --blue-100:#d6e6ff;
  --blue-200:#bdd7ff; --blue-300:#93c1ff; --blue-400:#63a8ff;
  --blue-500:#2f80ff; --blue-700:#1a55cc;

  --ink-700:#0f172a; --ink-500:#334155; --ink-400:#64748b;

  --card-radius:14px;
}

:root{
  /* keep your other variables… */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Set the root font family (sizes remain unchanged) */
html { font-family: var(--font-sans); }

/* Ensure all form controls, buttons, Leaflet, etc. inherit it */
body,
button, input, select, textarea, label,
.leaflet-container, .leaflet-control, .leaflet-popup-content, .leaflet-tooltip {
  font: inherit;
}

/* If any component had a hard-coded font-family, neutralize it */
*[style*="font-family"] { font-family: inherit !important; }

/* Base */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
.leaflet-container{ font: inherit; }

/* Pills used for layer + totals */
.pill{
  display:inline-block; padding:2px 8px; border-radius:999px;
  border:1px solid var(--blue-100); background:var(--blue-50);
  color:var(--ink-500); font-size:12px;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 4000;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 12px 18px;

  /* zachtere, langere overgang + geen keihard wit direct naast het logo */
  background:
    linear-gradient(
      90deg,
      #0f2a7e 0%,
      #0a2371 22%,
      #23418f 40%,
      #6f84c0 60%,
      #e8eefc 82%,
      #f6f8ff 100%
    );

  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 36px rgba(6,19,66,.25);
}

.brand-row{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* put the text first (left) and push the logo to the right */
.brand-text{
  order: 1;
  margin-right: auto;        /* takes remaining space on the left */
  min-width: 0;
  line-height: 1.1;
}
.brand-badge{
  order: 2;
  flex: 0 0 auto;

  background: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: 8px 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  /* subtielere, gelijkmatigere schaduw over de hele box */
  box-shadow: 0 4px 14px rgba(15,42,126,.16);
}


.brand-title{
  margin: 0;
  font-family: var(--font-sans);
  font-size: 34px;          /* iets kleiner, rustiger */
  font-weight: 700;         /* minder schreeuwerig dan 800 */
  letter-spacing: .04em;    /* iets meer lucht tussen de letters */
  color: #ffffff;
}

.brand-subtitle{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,.90);
}

.brand-logo{
  height: 44px;   /* iets kleiner oogt vaak chiquer */
  width: auto;
  display: block;
}

.topbar .pill{
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color:#fff;
}

/* =========================
   APP SHELL
   ========================= */
.app-shell{
  padding:10px 12px 12px;
  background:
    radial-gradient(1000px 500px at -10% -20%, rgba(47,128,255,.12), transparent 60%),
    radial-gradient(900px 500px at 120% 20%, rgba(47,128,255,.10), transparent 60%),
    linear-gradient(180deg,#f7fbff,#ffffff 60%);
}

/* Two-column layout: sidebar (left) | right side (KPIs + map) */
#wrap.layout-grid{
  display:grid;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr);
  gap: var(--gap);
  height:auto;                                /* page can scroll */
  min-height: calc(100vh - var(--topbar-h));
  align-items:start;                           /* same top baseline */
}

/* Left sidebar */
.leftbar{ width:var(--sidebar-w); overflow:visible; }

/* Card look shared by Parameters + KPI panel */
.controls-panel{
  background: linear-gradient(180deg, var(--blue-25), #fff);
  border: 1px solid var(--blue-100);
  border-radius: var(--card-radius);
  padding: 12px;
  box-shadow: 0 8px 22px rgba(47,128,255,.08);
}

/* Right column: KPI panel on top, map fills rest */
/* KPI boven, kaart vult, pie onder */
.right-col{
  display: grid;
  grid-template-rows: auto 1fr auto;  /* <-- extra 'auto' voor de pie */
  gap: var(--gap);
  min-height: 0;
}

.kpi-panel{ padding:12px; }
.kpi-panel .uinfo{ margin:6px 0; color:var(--ink-500); font-size:14px; }
.kpi-panel{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centers KPI row within the panel height */
}

/* KPI cards */
.kpi-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.kpi-card{
  background: linear-gradient(180deg, var(--blue-25), #fff);
  border:1px solid var(--blue-100);
  border-radius:12px; padding:10px 12px;
  box-shadow:0 6px 16px rgba(47,128,255,.08);
}
.kpi-label{
  font-size: 12px;
  color: var(--ink-400);
  white-space: nowrap;   /* titels zoals 'Energie opgewekt (levensduur)' blijven op 1 regel */
}

.kpi-value{ font-size:22px; font-weight:800; color:var(--ink-700); margin-top:2px; }

/* Map card + map size */
.map-card{
  position:relative; border:1px solid var(--blue-100);
  border-radius:16px; background:#fff; overflow:hidden;
  box-shadow:0 12px 30px rgba(47,128,255,.10);
}
.map-card #map{ width:100%; min-height: clamp(460px, 58vh, 820px); }


/* Floating "Selected feature" card inside the map (bottom-right) */
.map-overlay.selected-card{
  position:absolute; right:12px; bottom:12px; width:360px;
  max-height:60vh; overflow:auto; z-index:500;
  background:rgba(255,255,255,.96);
  border:1px solid var(--blue-100); border-radius:12px;
  box-shadow:0 16px 40px rgba(2,6,23,.22);
  padding:10px 12px;
}
.map-overlay.selected-card h4{ margin:2px 0 4px; }

/* =========================
   PARAMETERS (blue sliders)
   ========================= */
.weight-row{
  background:#fff; border:1px solid var(--blue-100);
  border-radius:12px; padding:8px 10px; margin-bottom:8px;
}
.weight-line{ display:flex; align-items:center; gap:10px; }
.wlabel{
  min-width:72px; font-weight:600; color:var(--ink-700); text-transform:capitalize;
}
.norm{
  font-size:11px; color:var(--ink-400);
  background:var(--blue-50); border:1px solid var(--blue-100);
  padding:1px 6px; border-radius:999px;
}

/* slider */
.wslider{
  -webkit-appearance:none; appearance:none;
  flex:1; height:4px; border-radius:999px;
  background:linear-gradient(90deg,var(--blue-300),var(--blue-500));
  outline:none; margin:0;
}
.wslider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid var(--blue-500);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.wslider::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid var(--blue-500);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}

/* Low / Medium / High chips */
.ticks{ display:flex; gap:4px; margin-top:4px; }
.tick{
  border:1px solid var(--blue-200); background:var(--blue-50);
  color:var(--ink-500); border-radius:999px; padding:1px 8px; font-size:11px;
  cursor:pointer; transition:background .15s ease;
}
.tick:hover{ background:var(--blue-100); }
.tick.active{ border-color:var(--blue-500); background:var(--blue-300); color:#0b1a3c; }

/* Totals line under parameters */
.total-row{ margin-top:6px; }
#weights-summary, #wTotal{ font-size:12px; color:var(--ink-400); }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1400px){ .kpi-row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 1000px){
  #wrap.layout-grid{ grid-template-columns: 1fr; }
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
  
}
@media (max-width: 1000px){
  .kpi-panel,
  .userinfo-panel{
    min-height: initial !important;
    height: auto !important;
  }
}
/* =========================
   (Optional) Login page minimal
   ========================= */
.auth{
  min-height:100vh; display:grid; place-items:center; padding:24px; background:#f9fafb;
}
.auth-card{
  width:min(420px,92vw); background:#fff; border:1px solid var(--border);
  border-radius:16px; padding:28px; box-shadow:0 10px 30px rgba(2,6,23,.06);
}

/* Section titles */
.controls-head{
  display:flex; align-items:center; gap:10px; margin: 2px 0 10px;
}
.controls-title{
  font-weight: 800; font-size: 16px; color: var(--ink-700); letter-spacing:.2px;
}
.controls-title::after{
  content:""; flex:1 1 auto; height:1px; border-radius:999px;
  background: linear-gradient(to right, var(--blue-100), transparent);
}

/* Zoom indicator badge (sits under the +/- controls) */
/* Zoom badge — compact, aligned with zoom control */
/* Zoom info badge — compact, sits right of the zoom control */
/* Zoom info badge — compact & perfectly centered */
.zoom-indicator{
  display: flex;                           /* ensures perfect centering */
  align-items: center;
  justify-content: center;
  height: 36px;                            /* a touch taller = easier to read */
  line-height: 36px;                       /* centers the text optically */
  padding: 0 12px;
  margin: 0;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-700);
  box-shadow: 0 6px 16px rgba(47,128,255,.12);
  /* optional 1px nudge if your font still looks high/low */
  /* padding-top: 1px; */
}

.map-card .zoom-indicator            { z-index: 800; }

/* Map legend */
.map-legend{
  background: rgba(255,255,255,.94);
  border: 1px solid var(--blue-100);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 10px 24px rgba(47,128,255,.10);
  font-size: 12px;
  color: var(--ink-700);
}
.map-legend .legend-title{
  font-weight: 800; font-size: 12px; margin-bottom: 6px;
  color: var(--ink-700);
}
.map-legend .legend-items{ display: grid; gap: 6px; }
.map-legend .legend-item{ display: grid; grid-template-columns: 16px auto; align-items: center; gap: 8px; }
.map-legend .swatch{
  width: 16px; height: 12px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,.15);
}
.map-legend .lname{ color: var(--ink-500); }

.legend-fullscreen-btn {
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--blue-100);
  border-radius: 12px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(47,128,255,.15);
  transition: filter .15s ease, transform .1s ease;
}
.legend-fullscreen-btn:hover { filter: brightness(1.05); }
.legend-fullscreen-btn:active { transform: translateY(1px); }


/* Header: remove white frame behind the logo */
.brand-badge{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* keep the logo aligned & crisp */
.brand-logo{
  height: 50px;           /* or 48–56px to taste */
  width: auto;
  display: block;
  filter: none;           /* no glow/shadow */
}

/* User info panel */
.userinfo-panel{ margin-bottom: 10px; }

.info-grid{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 6px;
  font-size: 14px;
  align-items: center;
}
.info-label{ color: var(--ink-400); }
.info-value{ color: var(--ink-700); font-weight: 600; word-break: break-word; }

/* Adjust the User info panel height */
:root { --userinfo-h: 140px; }   /* tweak this: 128–160px usually looks good */

.userinfo-panel{
  min-height: var(--userinfo-h);     /* grows with content */
  display: flex;
  flex-direction: column;
  justify-content: center;           /* vertically center the lines */
}

/* If you want a hard, exact height instead of min-height, use this:
.userinfo-panel{ height: var(--userinfo-h); }
*/

/* Let it auto-size on smaller screens (when layout stacks) */
@media (max-width: 1000px){
  .userinfo-panel{
    min-height: initial;
    height: auto;
  }
}

/* Decouple KPI height from User info */
.kpi-panel{
  height: auto !important;
  min-height: initial !important;
}

/* Set User info height only */
:root { --userinfo-h: 105px; }   /* tweak this value */
.userinfo-panel{
  min-height: var(--userinfo-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Logout button = same look as zoom-indicator/header */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; font-weight:700; letter-spacing:.2px;
  border-radius:999px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; line-height:1; user-select:none;
  transition: filter .15s ease, box-shadow .15s ease, transform .02s ease;
}

.btn-navy{
  background: linear-gradient(180deg, #0f2a7e 0%, #0a2371 55%, #071a59 100%);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}

.btn-navy:hover{ filter: brightness(1.05); }
.btn-navy:active{ transform: translateY(1px); }
.btn-navy:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(47,128,255,.35); }

/* ---------- Auth (login) layout ---------- */
.auth {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg, #f9fafb);
}

/* Hero image on the top half, fading into page */
.auth::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50vh;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(249,250,251,1) 90%),
    url("../img/login-hero.jpg") center/cover no-repeat; /* path is relative to this CSS file */
  z-index: 0;
  pointer-events: none;
}

/* Subtle radial accents */
.auth::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(30,41,59,.06), transparent 60%),
    radial-gradient(1000px 500px at 110% 110%, rgba(30,41,59,.06), transparent 60%);
  z-index: 0;
  pointer-events: none;
}

/* Card + logo sit above */
.auth-card { position: relative; z-index: 1; }
.logo { height: 48px; width: auto; display: block; margin-bottom: 10px; }

@media (max-width: 600px) {
  .auth::before { height: 40vh; }
}

/* Dark mode variant (optional) */
@media (prefers-color-scheme: dark) {
  .auth { background: #0b1220; }
  .auth::before {
    background:
      linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(11,18,32,1) 90%),
      url("../img/login-hero.jpg") center/cover no-repeat;
  }
}

/* Card */
.auth-card {
  width: min(420px, 92vw);
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
}

/* Typography + form */
.auth-header { margin-bottom: 14px; }
.auth-header .brand {
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 14px;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  margin-bottom: 10px;
}
.auth-header h1 { margin: 0 0 4px; }

form#loginForm { display: grid; gap: 10px; }
label { font-size: 12px; color: #334155; margin-top: 6px; }
.input-group { position: relative; display: grid; }

input[type="text"],
input[type="password"],
input:not([type]) {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  outline: none;
}
input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}

.input-action {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  color: #334155;
}
.input-action:hover { background: #f1f5f9; }

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  margin-bottom: 4px;
}
.checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox input { accent-color: #111827; }

.link { color: #111827; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* Primary submit button */
.btn-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  width: 100%;
  background: #0f172a;
  color: #fff;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
.btn-primary[aria-busy="true"] { pointer-events: none; opacity: .8; }
.btn-primary[aria-busy="true"]::after {
  content: "";
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #fff; border-right-color: transparent;
  margin-left: 6px; display: inline-block; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.error {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fee2e2;
  padding: 8px 10px;
  border-radius: 8px;
  margin-top: 6px;
}

.auth-footer { margin-top: 14px; font-size: 12px; }
.auth-footer .link { color: inherit; }

/* Make bottom-left controls sit side-by-side */
.leaflet-bottom.leaflet-left .leaflet-control {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px; /* spacing between legend and fullscreen button */
}

/* Top-left: keep zoom and the zoom info badge on one row */
.leaflet-top.leaflet-left .leaflet-control{
  float: none !important;
  clear: none !important;
  display: inline-block;
  vertical-align: top;
  margin: 6px 0 0 6px;
}

/* Zoom info badge — perfectly centered */
.zoom-indicator{
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  line-height:36px;
  padding:0 12px;
  margin:0 0 0 6px;                 /* small gap from zoom buttons */
  background:rgba(255,255,255,.92);
  border:1px solid var(--blue-100);
  border-radius:999px;
  font-size:12px;
  color:var(--ink-700);
  box-shadow:0 6px 16px rgba(47,128,255,.12);
}

/* —— Unified zoom control (matches the badge) —— */
.leaflet-control-zoom{
  background:rgba(255,255,255,.92);
  border:1px solid var(--blue-100);  /* soft blue outline around the whole pill */
  border-radius:999px;
  box-shadow:0 6px 16px rgba(47,128,255,.12);
  overflow:hidden;                    /* keeps the divider neat */
}

/* inner +/− buttons */
.leaflet-control-zoom a{
  display:block;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  background:transparent;             /* no blue squares */
  color:var(--ink-700);
  border:0;
  font-weight:800;
  font-size:16px;
  transition:background .15s ease;
}

/* subtle divider between + and − */
.leaflet-control-zoom a + a{
  border-top:1px solid var(--blue-100);
}

/* pleasant hover/active */
.leaflet-control-zoom a:hover{ background:var(--blue-50); }
.leaflet-control-zoom a:active{ background:var(--blue-100); }
.leaflet-control-zoom a:focus-visible{
  outline:none;                       /* no browser outline */
  box-shadow:inset 0 0 0 2px rgba(47,128,255,.35);
}

/* slightly larger touch targets on mobile */
.leaflet-touch .leaflet-control-zoom a{
  width:34px; height:34px; line-height:34px;
}

/* A light button that matches your cards */
.btn-white{
  background: #fff;
  color: var(--ink-700);
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(47,128,255,.10);
  padding: 10px 14px;
  font-weight: 700;
}

/* Group container */
.btn-group{
  position: relative;
  display: inline-block;
  margin-left: 8px;
}

/* Dropdown */
.btn-group .menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: none;
  min-width: 220px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--blue-100);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(47,128,255,.14);
  padding: 8px;
  z-index: 5000; /* above header */
}
.btn-group .menu.open{ display: block; }

.menu-item{
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font: inherit;
  color: var(--ink-700);
  cursor: pointer;
}
.menu-item:hover{ background: var(--blue-50); }

.menu-sep{
  height: 1px;
  background: var(--blue-100);
  margin: 6px 0;
}

.menu-check{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-500);
  padding: 4px 2px 2px;
}

.menu [aria-busy="true"]{
  opacity: .7;
  pointer-events: none;
}

/* ---- Header actions (Export + Logout) ---- */
.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;            /* push actions to the far right */
}

/* Export button (white chip to match your UI) */
.btn-white{
  background:#fff;
  color:var(--ink-700);
  border:1px solid var(--blue-100);
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 8px 18px rgba(47,128,255,.10);
  cursor:pointer;
}
.btn-white:hover{ filter:brightness(1.03); }
.btn-white:active{ transform:translateY(1px); }

/* Dropdown menu */
.btn-group{ position:relative; }
.menu{
  position:absolute;
  right:0; top:calc(100% + 6px);
  background:#fff;
  border:1px solid var(--blue-100);
  border-radius:12px;
  padding:6px;
  min-width:220px;
  box-shadow:0 12px 30px rgba(2,6,23,.16);
  display:none;               /* hidden by default */
  z-index:5000;               /* above map controls */
}
.menu.open{ display:block; }

.menu-item{
  display:block; width:100%;
  padding:8px 10px;
  border:0; background:transparent;
  text-align:left; cursor:pointer;
  border-radius:8px; font:inherit; color:var(--ink-700);
}
.menu-item:hover{ background:var(--blue-50); }

.menu-sep{ height:1px; margin:6px 0; background:var(--blue-100); }

.menu-check{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; color:var(--ink-700);
}
.menu-check input{ accent-color:var(--ink-700); }

/* --- FIX: Ensure Export + Logout are visible on the right --- */
.topbar .brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* distribute elements cleanly */
  width: 100%;
}

/* Ensure correct order: title → actions → logo */
.topbar .brand-text {
  order: 1;
  flex: 1;                /* allow text to take available space */
  margin-right: 0;
}
.topbar .topbar-actions {
  order: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  z-index: 5000;
  position: relative;
}
.topbar .brand-badge {
  order: 3;
}

/* Export button look */
.topbar .btn-white {
  background: #ffffff;
  color: var(--ink-700);
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 14px rgba(47,128,255,.12);
}
.topbar .btn-white:hover {
  background: var(--blue-50);
}

.sidebar-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1rem;
}

.sidebar-actions .btn,
.sidebar-actions .btn-group {
  width: 100%;
}

/* bottom-left controls inline (you already have this) */
.leaflet-bottom.leaflet-left .leaflet-control {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

/* wrapper staat naast de zoom-indicator */
.map-export-wrapper {
  position: relative;
  margin-left: 6px;          /* klein gaatje tussen zoom-badge en export */
}

/* knop zelf: vorm komt van .zoom-indicator */
.map-export-btn {
  display: flex;
  align-items: center;
  gap: 6px;                  /* ruimte tussen tekst en pijltje */
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
}

/* optioneel: heel lichte hover zonder vorm te veranderen */
.map-export-btn:hover { filter: brightness(1.03); }
.map-export-btn:active { transform: translateY(1px); }

/* PUT INSIDE/AFTER your existing .leftbar rule */
.leftbar{
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  height: 100%;          /* fill the grid row height */
  min-height: 0;         /* avoids overflow quirks */
}

/* REPLACE your current .sidebar-actions rules with this */
.sidebar-actions{
  display: flex;
  flex-direction: column;
  align-items: center;   /* center the narrower button */
}

/* Remove the full-width button; keep groups full-width if you use them */
.sidebar-actions .btn{ width: auto; }
.sidebar-actions .btn-group{ width: 100%; }

/* Make the Logout button a fixed, smaller width */
.sidebar-actions .btn-navy{
  width: 160px;          /* <— adjust to taste */
  align-self: center;    /* keeps it centered even if parent changes */
}

/* Smaller navy button used in section headers */
.btn-info {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 999px;
  line-height: 1;
}
.controls-head {
  display: flex;
  align-items: center;
  justify-content: space-between; /* title left, button right */
}

/* ---------- Modal (Parameters Info) ---------- */
.modal{
  position: fixed;
  inset: 0;
  display: none;                      /* hidden by default */
  z-index: 6000;                      /* above header (4000) & menus (5000) */
}
.modal.open{ display: block; }

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.45);       /* soft dark overlay */
  backdrop-filter: blur(1.5px);
}

.modal-card{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 92vw);
  max-height: 80vh;
  overflow: auto;

  background: #fff;
  border: 1px solid var(--blue-100);
  border-radius: var(--card-radius);
  box-shadow: 0 20px 60px rgba(47,128,255,.18);
  padding: 14px;
}

.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.modal-title{
  font-weight: 800;
  font-size: 18px;
  color: var(--ink-700);
  letter-spacing: .2px;
}

.modal-body{
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 2px 2px;
}

.modal-footer{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Tighten the small white close button to match your UI */
.modal-close.btn.btn-white{
  padding: 6px 10px;
  border-radius: 999px;
  line-height: 1;
}

/* ============ Neighborhood polygons ============ */
.leaflet-pane.neighPane path {
  fill: var(--blue-700);
  fill-opacity: 0.18;            /* subtiel invulvlak */
  stroke: var(--blue-700);
  stroke-opacity: 0.8;           /* iets sterker randje */
  stroke-width: 2;
  transition:
    fill-opacity .12s ease,
    stroke-opacity .12s ease,
    stroke-width .12s ease;
}

/* Hover- of selectiestaat — helder blauw met meer contrast */
.leaflet-pane.neighPane path:hover,
.leaflet-pane.neighPane path.selected {
  fill-opacity: 0.32;
  stroke-opacity: 1;
  stroke-width: 3;
  filter: brightness(1.1);
}


/* Popup card for neighborhoods */
.neigh-popup .leaflet-popup-content-wrapper{
  border-radius: var(--card-radius);
  box-shadow: 0 10px 24px rgba(2,6,23,.18);
  border: 1px solid rgba(2,132,199,.10);      /* subtle cyan */
}
.neigh-popup .leaflet-popup-content{
  margin: 12px 14px 10px 14px;
  font: 13px/1.45 inherit;
  color: var(--ink-700);
  min-width: 260px;
}

/* Popup layout bits */
.neigh-title{ font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.neigh-grid{
  display:grid; grid-template-columns:1fr auto;
  gap:6px 12px; margin-top:8px;
}
.neigh-label{ color: var(--ink-500); }
.neigh-value{ font-weight: 700; color: var(--ink-700); text-align: right; }
.neigh-divider{
  height:1px; border-radius:1px; margin:8px 0 6px 0;
  background: linear-gradient(to right, rgba(2,132,199,.15), rgba(2,132,199,.05));
}
/* small unit pill (you already have .pill; this is a quieter variant for inline units) */
.neigh-pill{
  display:inline-block; font-size:11px; padding:2px 6px; margin-left:6px;
  border-radius:999px; background:rgba(2,132,199,.10); color:#075985;
}

/* Neighborhood popup — neutral card */
.leaflet-popup.neigh-popup .leaflet-popup-content-wrapper{
  border-radius: 12px;
  border: 1px solid var(--blue-100);
  box-shadow: 0 14px 36px rgba(2,6,23,.18);
}
.leaflet-popup.neigh-popup .leaflet-popup-content{
  margin: 10px 12px;
  font-size: 13px;
  color: var(--ink-700);
}

/* Header chip + title (chip uses same neutral colors as polygon) */
.neigh-card__head{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.neigh-chip{
  width:14px; height:14px; border-radius:999px;
  background: rgba(51,65,85,.18);            /* fill */
  outline: 2px solid rgba(51,65,85,.85);     /* stroke */
  outline-offset: 2px;
}
.neigh-title{ margin:0; font-size:16px; font-weight:800; color: var(--ink-700); }

/* Metric rows */
.neigh-metrics{ display:grid; gap:4px; margin-top:4px; }
.neigh-metrics .row{ display:flex; justify-content:space-between; gap:12px; }
.neigh-metrics .k{ font-weight:700; color: var(--ink-700); }
.neigh-metrics .v{ color: var(--ink-500); }

/* Divider similar to roof popup */
.neigh-divider{
  height:1px; margin:8px 0;
  background: linear-gradient(to right, rgba(99,168,255,.28), rgba(99,168,255,0));
  border-radius:999px;
}

/* Neighborhood Popup — match roof popup styling */
.neigh-popup.leaflet-popup .leaflet-popup-content-wrapper {
  background: linear-gradient(180deg, #fff 0%, var(--blue-25) 100%);
  border: 1px solid var(--blue-100);
  border-radius: var(--card-radius);
  box-shadow: 0 18px 36px rgba(15,42,126,.18);
  overflow: hidden;
}

.neigh-popup.leaflet-popup .leaflet-popup-content {
  margin: 14px 18px;
  color: var(--ink-700);
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 320px;
}

.neigh-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--blue-700);
  margin: 0 0 6px 0;
}

.neigh-divider {
  height: 1px;
  background: linear-gradient(to right, var(--blue-100), transparent);
  border-radius: 999px;
  margin: 8px 0 10px;
}

.neigh-info { display: grid; gap: 4px; }
.neigh-label { color: var(--ink-500); }
.neigh-value { color: var(--ink-700); font-weight: 700; }

/* Two columns like roof popup metrics */
.neigh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.neigh-col  { display: grid; gap: 4px; }

/* Pills consistent with roof popup */
.neigh-pill {
  align-self: start;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--blue-100);
  background: var(--blue-50);
  color: var(--blue-700);
  display: inline-block;
  margin-bottom: 4px;
}
.neigh-pill-live {
  background: linear-gradient(180deg, var(--blue-100) 0%, var(--blue-50) 100%);
  border-color: var(--blue-200);
}

.neigh-muted { opacity: .7; font-style: italic; }

/* Neighborhood popup — match roof popup look */
.neigh-popup.leaflet-popup .leaflet-popup-content-wrapper {
  background: linear-gradient(180deg, #fff 0%, var(--blue-25) 100%) !important;
  border: 1px solid var(--blue-100) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 18px 36px rgba(15,42,126,.18) !important;
  overflow: hidden;
}

.neigh-popup.leaflet-popup .leaflet-popup-content {
  margin: 14px 18px !important;
  color: var(--ink-700) !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  max-width: 320px !important;
}

.neigh-title { font-weight: 800; font-size: 16px; color: var(--black--); margin: 0 0 6px; }
.neigh-divider { height: 1px; background: linear-gradient(to right, var(--blue-100), transparent); border-radius: 999px; margin: 8px 0 10px; }
.neigh-info { display: grid; gap: 4px; }
.neigh-label { color: var(--ink-500); }
.neigh-value { color: var(--ink-700); font-weight: 700; }

.neigh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.neigh-col  { display: grid; gap: 4px; }

/* Pills like roof popup */
.neigh-pill {
  align-self: start;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--blue-100);
  background: var(--blue-50);
  color: var(--blue-700);
  display: inline-block;
  margin-bottom: 4px;
}
.neigh-pill-live {
  background: var(--blue-50);
  border-color: var(--blue-100);
}

.neigh-muted { opacity: .7; font-style: italic; }

/* Kaartje onder de map voor de cirkeldiagram */
.chart-card{
  background: linear-gradient(180deg, var(--blue-25), #fff);
  border: 1px solid var(--blue-100);
  border-radius: var(--card-radius);
  padding: 12px;
  box-shadow: 0 8px 22px rgba(47,128,255,.08);
}
.chart-card canvas{ display:block; max-width:100%; height:auto; }
.chart-card .muted{ color: var(--ink-400); font-size: 12px; }

/* Rij met twee grafieken onder de kaart */
.charts-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 1200px){
  .charts-row{ grid-template-columns: 1fr; }
}

/* Kaarten responsive canvas */
.chart-card canvas{ display:block; width:100%; height:auto; }

/* Zorg dat beide grafieken even hoog zijn */
.charts-row .chart-card canvas {
  width: 100%;
  height: 320px;       /* vaste hoogte, pas aan naar smaak */
  object-fit: contain;
}

/* twee kaarten naast elkaar */
#chartsRow {               /* geef dit id aan de wrapper van de 2 chart-cards */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Charts onder de kaart */
.chart-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.chart-card{
  display:flex;
  flex-direction:column;
  padding:12px;
  min-height: 380px;           /* vaste “kaart”-hoogte */
}

/* wrapper zodat canvas flexibel kan groeien, subtitle staat eronder */
.chart-wrap{
  position: relative;
  flex: 1 1 auto;              /* neemt rest van de card-hoogte in */
  min-height: 0;
}

/* vaste canvas-hoogte: Chart.js schaalt wél, maar hoogte blijft constant */
.chart-card canvas{
  width: 100% !important;
  height: 320px !important;    /* <— vaste hoogte */
}

/* subtitel altijd zichtbaar onder de canvas */
.chart-sub{
  margin-top: 8px;
  color: var(--ink-500);
  font-size: 12px;
}

/* ==== Export menu: always on top + smaller ==== */

/* 1) Zorg dat alle Leaflet controls hoog genoeg zitten */
.map-card .leaflet-control-container { z-index: 3500 !important; }

/* Map-card: zelfde ronding als andere cards + map binnen de hoeken houden */
.map-card{
  position: relative;
  border:1px solid var(--blue-100);
  border-radius:16px;
  background:#fff;
  box-shadow:0 12px 30px rgba(47,128,255,.10);
  overflow: hidden;              /* <-- belangrijk: dropdown mag uitsteken */
  z-index: 3000;                  /* boven de kaarten eronder */
}



/* Keep the export menu compact and above other map controls (you already have most of this) */
.map-export-wrapper { position: relative; z-index: 3800 !important; }

.map-export-wrapper {
  position: relative;
}

.map-export-wrapper {
  position: relative;              /* anker voor het menu */
}

.map-export-menu {
  position: absolute;
  top: calc(100% + 4px);   /* kleinere afstand onder de knop */
  left: 4px;               /* menu iets naar rechts t.o.v. knop */
  z-index: 9999;

  min-width: 220px;
  max-width: 260px;
  max-height: 56vh;
  overflow: auto;

  background: rgba(255,255,255,.96);
  border: 1px solid var(--blue-100);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(47,128,255,.14);
  padding: 8px 10px;
  font-size: 12.5px;
}

/* alleen tonen als JS de .open class toevoegt */
.map-export-menu:not(.open) {
  display: none;
}

/* Zorg dat KPI-waarden zoals 'Extensief groen' op één regel blijven */
.kpi-value{
  white-space: nowrap;
}

.scenario-wrap{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(30,58,138,.15);
}

.scenario-title{
  font-weight: 700;
  margin-bottom: 8px;
  color: #0f2a7e;
}

.scenario-btns{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.scenario-btn{
  border: 1px solid rgba(30,58,138,.25);
  background: white;
  color: #0f2a7e;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
  cursor: pointer;
}

.scenario-btn.active{
  background: rgba(30,58,138,.12);
  border-color: rgba(30,58,138,.45);
}