/* ═══════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar         { width: 12px; }
::-webkit-scrollbar-track   { background: #eee; }
::-webkit-scrollbar-thumb   { background: var(--menu-accent); border-radius: 20px; border: 2px solid #eee; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* ═══════════════════════════════════════════
   RESET / BASE
═══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
}

img { width: 100%; display: block; }
html { scroll-behavior: smooth; }

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
h1 { font-size: 16px; color: #fff; margin: 5px 14px; }

h2 {
  font-size: 15px;
  color: #000;
  margin-top: 15px;
  margin-bottom: 5px;
}

h3 {
  font-size: 14px;
  color: #000;
  font-weight: normal;
  text-align: center;
}

/* ═══════════════════════════════════════════
   MENU SHELL
═══════════════════════════════════════════ */
#menu {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  min-width: 250px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Foutmelding bij mislukt laden van woningdata ── */
#data-error-banner {
  display: none;
  flex-shrink: 0;
  background: #b3261e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  padding: 10px 14px;
}
#data-error-banner.visible { display: block; }

/* ── Logo ── */
#logocontainer {
  width: 100%;
  min-height: 15px;
  aspect-ratio: 1 / 0.25;
  background: #fff url('../img/logo_pelmolenpad_banner.png') center / auto 100% no-repeat;
  flex-shrink: 0;
}

/* ── Situatie map ── */
#situatiecontainer {
  width: 100%;
  position: relative;
  flex-shrink: 0;
}

#situatie_dots {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.situatie-dot {
  position: absolute;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.situatie-dot.active {
  opacity: 1;
  transform: scale(2);
  z-index: 2;
}

/* In edit mode blijven alle geplaatste stippen zichtbaar, anders kun je
   niet zien waar bestaande punten al staan terwijl je nieuwe plaatst. */
body.app-edit-mode .situatie-dot { opacity: 1; }

/* ── Situatie-editor: bouwnummer-locaties plaatsen (Edit mode) ── */
#situatie-edit-panel {
  display: none;
  flex-shrink: 0;
  background: #fff;
  border-bottom: 2px solid var(--menu-accent);
  padding: 8px 5%;
}

body.app-edit-mode #situatie-edit-panel { display: block; }
body.app-edit-mode #situatie_basis      { cursor: crosshair; }

#situatie-edit-panel select {
  padding: 6px;
  font-size: 12px;
}

#situatie-edit-hint {
  font-size: 11px;
  color: var(--filter-value-text);
  margin-top: 6px;
}

.situatie-edit-actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.situatie-edit-actions button {
  padding: 5px 10px;
  border: 2px solid var(--menu-accent);
  border-radius: 5px;
  background: transparent;
  color: var(--menu-accent);
  font-family: inherit;
  font-weight: bold;
  font-size: 11px;
  cursor: pointer;
}
.situatie-edit-actions button:hover { background: var(--menu-accent); color: #fff; }

#situatie-output-pre {
  display: none;
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
  background: #111;
  color: #7dd3fc;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 8px;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-all;
}
#situatie-output-pre.visible { display: block; }

/* ── Scrollable filter area ── */
#menucontainer {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5%;
  min-width: 200px;
}

/* ═══════════════════════════════════════════
   FORM CONTROLS
═══════════════════════════════════════════ */
select {
  width: 100%;
  padding: 8px 6px;
  color: var(--filter-value-text);
  font-weight: bold;
  border: 2px solid var(--menu-accent);
  border-radius: 5px;
  outline: none;
  background: #fff;
  cursor: pointer;
}

/* Min–tot–Max row */
.range-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.range-row select  { flex: 1; }

.range-sep {
  font-size: 13px;
  color: #555;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Dual-handle range slider ── */
.dual-slider {
  margin-top: 14px;
}

.dual-slider-values {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: bold;
  color: var(--filter-value-text);
}

.dual-slider-control {
  position: relative;
  height: 20px;
}

.dual-slider-track {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  transform: translateY(-50%);
}

.dual-slider-range {
  position: absolute;
  height: 100%;
  background: var(--menu-accent);
  border-radius: 2px;
}

.dual-slider-control input[type="range"] {
  position: absolute;
  top: 50%; left: 0;
  width: 100%;
  margin: 0;
  height: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: none;
  pointer-events: none;
}

.dual-slider-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--menu-accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--menu-accent);
  cursor: pointer;
}

.dual-slider-control input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 14px; height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--menu-accent);
  box-shadow: 0 0 0 1px var(--menu-accent);
  cursor: pointer;
}

.dual-slider-control input[type="range"]::-moz-range-track {
  background: none;
  border: none;
}

/* ── Two-column checkbox groups ── */
.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
}

/* ── Custom checkbox ── */
.checkboxcontainer {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--filter-value-text);
  user-select: none;
}

.checkboxcontainer input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.checkmark {
  position: absolute;
  left: 0;
  width: 20px; height: 20px;
  background: var(--menu-accent);
  flex-shrink: 0;
}

.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.checkboxcontainer input:checked ~ .checkmark::after { display: block; }

/* ── Divider ── */
hr.solid  { border: none; border-top: 1px solid #bbb; margin: 20px 0; }
hr.rounded { border: none; border-top: 2px solid #bbb; border-radius: 5px; margin: 20px 0; }

/* ── Reset button ── */
#reset-filters-btn {
  display: block;
  width: 100%;
  padding: 9px 0;
  margin-bottom: 12px;
  background: transparent;
  border: 2px solid var(--menu-accent);
  border-radius: 5px;
  color: var(--menu-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#reset-filters-btn:hover {
  background: var(--menu-accent);
  color: #fff;
}

/* ═══════════════════════════════════════════
   RESULTS LIST
═══════════════════════════════════════════ */
#resultaten {
  width: 100%;
  min-height: 200px;
}

.result-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
}

.result-row:nth-child(even) { background: rgba(158,172,120,0.05); }
.result-row:nth-child(odd)  { background: #fff; }
/* Zelfde dekking (0.55) als de hover-highlight van de hotspots
   (HOVER_ALPHA in js/config.js), zodat beide even sterk oplichten. */
.result-row:hover           { background: rgba(158,172,120,0.55); }

.result-row .col-nr     { font-weight: bold; font-size: 16px; width: 30%; }
.result-row .col-status { font-weight: bold; flex: 1; font-size: 15px; padding-left: 10px; width: 30%; }
.result-row .col-prijs  { font-size: 15px; text-align: right; min-width: 100px; width: 30%; }

/* ── Status colours ── */
.Vrij * { color: var(--status-vrij) !important; }
.Inoptie  * { color: var(--status-inoptie) !important; }
.Verkocht    * { color: var(--status-verkocht) !important; }
.Invoorbereiding * { color: var(--status-voorbereiding) !important; }

/* ═══════════════════════════════════════════
   RESPONSIVE — kleine schermen
   Staand op mobiel toont main.css ("MOBIEL STAAND") de situatiekaart
   via de 360°|Situatie-schakelaar i.p.v. in het menu.
═══════════════════════════════════════════ */
@media (max-width: 480px), (max-height: 480px) {
  /* Vaste logohoogte i.p.v. de aspect-ratio te laten meeschalen met de
     menubreedte (te klein bij smal, te hoog bij een menu van 100vw) */
  #logocontainer {
    aspect-ratio: auto;
    height: 64px;
  }
}

/* ── Mobiel liggend: menu is 100vw breed maar laag. Twee varianten
   voor de situatiekaart; B is actief.
   Zelfde apparaten als isMobile() in js/ui.js, alleen liggend. ── */
/* VARIANT B (actief): situatiekaart boven in het menu. Het menu scrollt
   als één geheel; het logo scrollt weg, de kaart blijft bovenaan staan
   (sticky) en de filters en resultaten schuiven eronder door. De kaart
   is half zo hoog als het scherm, zodat er genoeg ruimte voor de
   filters overblijft. */
/* Was @media ... (orientation: landscape); nu via html.is-landscape */
html.is-landscape #menu { overflow-y: auto; }
html.is-landscape #logocontainer { height: 56px; aspect-ratio: auto; }
html.is-landscape #situatiecontainer {
  align-self: center;
  /* Breedte volgt de schermhoogte (kaart is 2471×1601), zodat de
     stippen (percentages) op de afbeelding blijven kloppen */
  width: min(100%, calc(var(--app-height, 100vh) * 0.5 * 2471 / 1601));
  position: sticky;
  top: 0;
  z-index: 2;
  /* Witte achtergrond over de volle menubreedte, zodat de filters
     er ook naast de (smallere) kaart niet doorheen schemeren */
  background: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}
html.is-landscape #menucontainer {
  flex: none;
  overflow: visible;
  border-top: 1px solid #E5E3E3;
  /* Ruimte voor de ronde menuknop rechtsboven (#menu-toggle) */
  padding-right: 72px;
}


/* VARIANT A: kaart links, filters rechts. Om terug te zetten: dit blok
   activeren en variant B hierboven uitschakelen. Let op: vervang dan
   de @media-regel door een html.is-landscape-prefix op elke selector,
   zoals bij variant B (media queries werken niet goed in een iframe).
@media (max-width: 768px) and (orientation: landscape),
       (max-height: 550px) and (pointer: coarse) and (orientation: landscape) {
  #menu {
    display: grid;
    grid-template-columns: 45% 1fr;
    grid-template-rows: auto auto auto auto 1fr;
  }
  #data-error-banner  { grid-column: 1 / -1; }
  #logocontainer      { grid-column: 1; height: 56px; aspect-ratio: auto; }
  #situatiecontainer {
    grid-column: 1;
    justify-self: center;
    width: min(100%, calc((var(--app-height, 100vh) - 72px) * 2471 / 1601));
  }
  #situatie-edit-panel { grid-column: 1; }
  #menucontainer {
    grid-column: 2;
    grid-row: 1 / -1;
    min-height: 0;
    border-left: 1px solid #E5E3E3;
    padding-right: 72px;
  }
}
*/