/* Locatie-check — tool-specifieke aanvullingen op /css/tools.css */

/* Autosuggest */
.loc-autocomplete {
  position: relative;
  flex: 1;
  min-width: 0;
}

.loc-suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--ui-border, rgba(0,0,0,0.12));
  background: var(--color-bg-panel, #fff);
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  max-height: 320px;
  overflow-y: auto;
}

:root[data-theme="dark"] .loc-suggestions {
  background: #1f1f1f;
  border-color: rgba(255,255,255,0.14);
}

.loc-suggestions[hidden] { display: none; }

.loc-suggestion {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: baseline;
  padding: .55rem .7rem;
  border-radius: 8px;
  cursor: pointer;
}

.loc-suggestion:hover,
.loc-suggestion.is-active {
  background: rgba(255,106,0,0.08);
}

.loc-suggestion__type {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .55;
  flex-shrink: 0;
}

/* Parcel-only mededeling: rustig, geen fout */
.tool-parcel-only {
  border-color: rgba(91,107,122,0.28);
  background: rgba(91,107,122,0.06);
}

:root[data-theme="dark"] .tool-parcel-only {
  background: rgba(255,255,255,0.04);
}

.tool-parcel-only p { margin: 0; }

/* Kopieer-knopjes (perceel / postcode) */
.loc-copy {
  margin-left: .5rem;
  padding: .1rem .5rem;
  font: inherit;
  font-size: .75rem;
  border-radius: 6px;
  border: 1px solid var(--ui-border, rgba(0,0,0,0.12));
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
}

.loc-copy:hover { background: rgba(255,106,0,0.06); }
.loc-copy.is-copied { color: #166534; border-color: rgba(34,197,94,0.35); }

/* Contextuele CTA waar de gratis data eindigt */
.loc-cta-inline {
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--tool-border, rgba(0,0,0,0.07));
  font-size: .92rem;
}

.loc-cta-inline a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.loc-cta-inline a:hover { text-decoration: underline; }

/* Blok-laadstaten */
.loc-block-loading { opacity: .6; }
.loc-block-error .tool-card-title { color: var(--color-steel); }

/* Luchtfoto-header */
.loc-aerial {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ui-border, rgba(0,0,0,0.08));
}

.loc-aerial img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  background: rgba(0,0,0,0.05);
}

.loc-aerial figcaption {
  padding: .5rem .75rem;
  font-size: .78rem;
}

/* Rekenlaag: inputs achter een getal */
.loc-inputs {
  font-size: .8rem;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

/* Signalenlijst (feitelijk, geen kleuren/oordeel) */
.loc-signals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.loc-signal {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .9rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  border: 1px solid var(--ui-border, rgba(0,0,0,0.08));
  background: rgba(91,107,122,0.05);
  line-height: 1.45;
}

:root[data-theme="dark"] .loc-signal {
  background: rgba(255,255,255,0.04);
}

.loc-signal::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: .5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.loc-signal > span:first-of-type { flex: 1; }

.loc-source-tag {
  flex-shrink: 0;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55;
  white-space: nowrap;
  padding-top: .1rem;
}

/* Hidden-class op deze pagina (div/p/details) betrouwbaar verbergen */
.tool-locatie-page .hidden { display: none !important; }

/* ── Map-tool: grote kaart met zwevend datapaneel ── */
.loc-app {
  position: relative;
  height: 84vh;
  min-height: 520px;
  margin-top: 1rem;
  /* Alleen de kaart-app breekt breder uit dan de (smalle) contentkolom. */
  width: min(1500px, 94vw);
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ui-border, rgba(0,0,0,0.08));
}

.loc-app--full {
  position: fixed;
  inset: 0;
  width: auto;
  height: 100vh;
  z-index: 2000;
  margin: 0;
  transform: none;
  border: none;
  border-radius: 0;
}

.loc-map-col { position: absolute; inset: 0; }
.loc-map { width: 100%; height: 100%; }

.loc-map .leaflet-control-attribution {
  font-size: .65rem;
  background: rgba(255,255,255,0.7);
}

/* Legenda / hint linksonder over de kaart */
.loc-map-caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 500;
  margin: 0;
  max-width: 55%;
  font-size: .72rem;
  line-height: 1.35;
  background: rgba(255,255,255,0.88);
  color: #1A1A1A;
  padding: .35rem .55rem;
  border-radius: 8px;
}

/* Knoppencluster rechtsboven (meten + volledig scherm) */
.loc-map-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 700;
  display: flex;
  gap: 6px;
}

.loc-map-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--ui-border, rgba(0,0,0,0.18));
  background: rgba(255,255,255,0.92);
  color: #1A1A1A;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.loc-map-btn:hover { background: #fff; }
.loc-map-btn.is-active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.loc-map-btn svg { display: block; }
.loc-map-btn--wide { width: auto; padding: 0 .6rem; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.loc-chevron { transition: transform .2s ease; }
.loc-app.loc-collapsed .loc-chevron { transform: rotate(180deg); }

/* Meetresultaat bovenaan de kaart */
.loc-measure-out {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 650;
  max-width: 60%;
  background: rgba(255,255,255,0.94);
  color: #1A1A1A;
  padding: .35rem .7rem;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  text-align: center;
}

.loc-measure-out[hidden] { display: none; }

/* Aftel-timer op de kaart (verschijnt bij klikken) */
.loc-map-timer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 550;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--color-accent) var(--p, 0%), rgba(255,255,255,0.9) 0);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}

.loc-map-timer[hidden] { display: none; }

.loc-map-timer::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #fff;
}

.loc-map-timer span {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: .95rem;
  color: #1A1A1A;
  font-variant-numeric: tabular-nums;
}

/* Zwevend datapaneel rechts over de kaart */
.loc-panel {
  position: absolute;
  top: 56px;
  right: 12px;
  bottom: 12px;
  width: 370px;
  max-width: calc(100% - 24px);
  z-index: 500;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .9rem;
  border-radius: 14px;
  border: 1px solid var(--ui-border, rgba(0,0,0,0.10));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

:root[data-theme="dark"] .loc-panel {
  background: rgba(26,26,26,0.94);
  border-color: rgba(255,255,255,0.12);
}
:root[data-theme="dark"] .loc-map-caption { background: rgba(26,26,26,0.85); color: #eee; }
:root[data-theme="dark"] .loc-map-btn { background: rgba(26,26,26,0.9); color: #eee; }
:root[data-theme="dark"] .loc-measure-out { background: rgba(26,26,26,0.92); color: #eee; }

/* Accordion-items niet laten inkrimpen (anders halveren de kopjes) → paneel scrollt. */
.loc-panel > * { flex-shrink: 0; }

.loc-panel-empty {
  font-size: .9rem;
  line-height: 1.5;
  opacity: .75;
  padding: .5rem .3rem;
}

/* Accordion-secties */
.loc-acc {
  border: 1px solid var(--ui-border, rgba(0,0,0,0.10));
  border-radius: 11px;
  overflow: hidden;
  background: var(--color-bg-secondary, rgba(0,0,0,0.015));
}

.loc-acc > summary {
  cursor: pointer;
  list-style: none;
  padding: .6rem .8rem;
  font-weight: 700;
  font-size: .92rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.loc-acc > summary::-webkit-details-marker { display: none; }
.loc-acc > summary::after { content: "+"; opacity: .5; font-weight: 400; }
.loc-acc[open] > summary::after { content: "–"; }

.loc-acc-body { padding: .1rem .8rem .8rem; }

.loc-acc .tool-kv { gap: .5rem; }
.loc-acc .tool-kv-row { grid-template-columns: 1fr; gap: 1px; }
.loc-acc .tool-kv-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; opacity: .55; font-family: "Geist Mono", monospace; }
.loc-acc .tool-kv-value { font-size: .9rem; line-height: 1.4; }
.loc-acc .tool-kv-value,
.loc-acc .tool-kv-label { min-width: 0; overflow-wrap: anywhere; }
.loc-acc .tool-result-disclaimer { font-size: .72rem; }

/* Kerngegevens: compacte tegels voor de belangrijkste feiten */
.loc-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
}
.loc-tile {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: .4rem .5rem;
  border-radius: 8px;
  background: rgba(255,106,0,0.05);
  border: 1px solid rgba(255,106,0,0.14);
  min-width: 0;
}
.loc-tile-k {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
  font-family: "Geist Mono", monospace;
}
.loc-tile-v { font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
:root[data-theme="dark"] .loc-tile { background: rgba(255,106,0,0.08); }

/* Pagina blijft even breed als de KvK-tool; alleen de kaart-app breekt breder uit. */
.tool-locatie-page .tool-panel { position: relative; z-index: 1200; }
.loc-suggestions { z-index: 1300; }

/* Kaart-hint (als er nog niks is opgehaald) */
.loc-map-hint {
  position: absolute;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%);
  z-index: 520;
  background: rgba(255,255,255,0.92);
  color: #1A1A1A;
  padding: .5rem .9rem;
  border-radius: 10px;
  font-size: .85rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  text-align: center;
}
.loc-map-hint[hidden] { display: none; }
:root[data-theme="dark"] .loc-map-hint { background: rgba(26,26,26,0.9); color: #eee; }

/* Bodemkaart-legenda */
.loc-legend {
  position: absolute;
  left: 12px;
  bottom: 44px;
  z-index: 520;
  max-width: 230px;
  max-height: 42%;
  overflow: auto;
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  padding: .4rem .55rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.loc-legend[hidden] { display: none; }
.loc-legend-title { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.loc-legend img { max-width: 100%; height: auto; display: block; }
:root[data-theme="dark"] .loc-legend { background: rgba(26,26,26,0.92); color: #eee; }

/* Liniaal-cursor in meetmodus */
.loc-app.measuring .leaflet-container { cursor: crosshair; }

/* Subtiele verwijzing naar het Kadaster */
.loc-paid-note {
  margin: .3rem .3rem 0;
  font-size: .82rem;
  line-height: 1.55;
}

/* Mobiel: kaart boven, paneel eronder */
@media (max-width: 860px) {
  .loc-app {
    width: auto; margin-left: 0; transform: none;
    height: auto; min-height: 0; overflow: visible; border: none; border-radius: 0;
  }
  .loc-map-col { position: relative; height: 52vh; border-radius: 14px; overflow: hidden; }
  .loc-panel {
    position: static; width: auto; max-width: none; margin-top: .7rem;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    background: transparent; border: none; padding: 0;
  }
  .loc-tiles { grid-template-columns: 1fr; }
  .loc-map-caption { max-width: 76%; font-size: .66rem; }
  .loc-compare-body { overflow-x: auto; }
  .loc-compare-table { font-size: .8rem; }
}

/* Luchtfoto-jaar-selector (linksboven) */
.loc-year {
  position: absolute;
  top: 12px;
  left: 52px;
  z-index: 700;
  max-width: 170px;
  height: 30px;
  padding: 0 .5rem;
  border-radius: 8px;
  border: 1px solid var(--ui-border, rgba(0,0,0,0.18));
  background: rgba(255,255,255,0.92);
  color: #1A1A1A;
  font-size: .8rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
:root[data-theme="dark"] .loc-year { background: rgba(26,26,26,0.9); color: #eee; }

/* Paneel in-/uitklappen */
.loc-panel-toggle {
  position: absolute;
  top: 50%;
  right: 390px;
  transform: translateY(-50%);
  z-index: 700;
  width: 24px;
  height: 46px;
  border-radius: 8px 0 0 8px;
  border: 1px solid var(--ui-border, rgba(0,0,0,0.15));
  background: rgba(255,255,255,0.94);
  color: #1A1A1A;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.loc-app.loc-collapsed .loc-panel { display: none; }
.loc-app.loc-collapsed .loc-panel-toggle { right: 12px; }
:root[data-theme="dark"] .loc-panel-toggle { background: rgba(26,26,26,0.9); color: #eee; }

@media (max-width: 860px) {
  /* Paneel staat vast onder de kaart → invouwen niet nodig */
  #locPanelToggle { display: none; }
  /* Jaar-selector onder de knoppen-cluster (clear van links = tekenbalk) */
  .loc-year { top: 52px; right: 12px; left: auto; max-width: 150px; }

  /* Volledig scherm op mobiel: kaart vult, paneel zwevend rechts */
  .loc-app--full .loc-map-col { position: absolute; inset: 0; height: auto; }
  .loc-app--full .loc-panel {
    position: absolute; top: 54px; right: 10px; bottom: 10px;
    width: min(320px, calc(100% - 20px)); max-width: none; margin-top: 0;
    padding: .8rem; overflow-y: auto;
    background: rgba(255,255,255,0.96); border: 1px solid var(--ui-border, rgba(0,0,0,0.1));
    border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  :root[data-theme="dark"] .loc-app--full .loc-panel { background: rgba(26,26,26,0.95); }
}

/* Teken: wis-alles */
.loc-draw-clear { color: var(--color-accent); text-decoration: underline; cursor: pointer; }

/* Vergelijk-overlay */
.loc-compare {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.loc-compare.hidden { display: none; }
.loc-compare-inner {
  background: var(--color-bg-panel, #fff);
  border-radius: 14px;
  max-width: 900px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
:root[data-theme="dark"] .loc-compare-inner { background: #1f1f1f; }
.loc-compare-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--ui-border, rgba(0,0,0,0.1));
  position: sticky; top: 0; background: inherit;
}
.loc-compare-close { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: inherit; }
.loc-compare-body { padding: 1rem 1.1rem; }
.loc-compare-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.loc-compare-table th, .loc-compare-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--ui-border, rgba(0,0,0,0.08)); vertical-align: top; }
.loc-compare-table tbody th { font-weight: 600; opacity: .7; font-size: .78rem; white-space: nowrap; }
.loc-compare-rm { border: none; background: none; color: var(--color-steel); cursor: pointer; font-size: .8rem; }

/* Print-kaartbeeld */
.tool-print-map { display: none; }

/* Afdrukken: geen interactieve kaart, wel een statisch kaartbeeld + paneel breed */
@media print {
  .tool-print-map { display: block !important; width: 100%; max-width: 640px; margin: 0 0 12px; border: 1px solid #ddd; }
  .loc-app { position: static; height: auto; width: auto; margin-left: 0; transform: none; border: none; overflow: visible; }
  .loc-map-col, .loc-map-expand, .loc-map-caption { display: none !important; }
  .loc-panel {
    position: static; width: auto; max-width: none;
    box-shadow: none; border: none; background: none; padding: 0; overflow: visible;
  }
  .loc-acc { break-inside: avoid; page-break-inside: avoid; }
  .loc-acc-body { display: block !important; }
}