@font-face { font-family: 'Roboto'; font-weight: 300; font-display: swap; src: url(/fonts/roboto-300.woff2) format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 400; font-display: swap; src: url(/fonts/roboto-400.woff2) format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 500; font-display: swap; src: url(/fonts/roboto-500.woff2) format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 500; font-display: swap; src: url(/fonts/bvp-500.woff2) format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 600; font-display: swap; src: url(/fonts/bvp-600.woff2) format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 700; font-display: swap; src: url(/fonts/bvp-700.woff2) format('woff2'); }

/* DroneKracht kaartportaal
 * Huisstijl van dronekracht.nl: donkerblauw (#003173) voor koppen en vlakken,
 * blauw (#0160ed) voor links, oranje (#ef6900) voor knoppen en wat je gekozen hebt.
 * Lichtblauwgrijze achtergrond (#f2f6fb) met witte kaarten. Be Vietnam Pro en Roboto.
 * Pas hier de huisstijl aan. */


:root {
  /* huisstijl dronekracht.nl */
  --merk: #0160ed;
  --merk-2: #004aad;
  --titel: #003173;
  --merk-diep: #00265a;
  --merk-verloop: linear-gradient(165deg, #00408f 0%, #003173 55%, #00265a 100%);
  --oranje: #ef6900;
  --oranje-donker: #c95800;

  /* op het donkerblauwe paneel */
  --rail-2: rgb(255 255 255 / 0.10);
  --rail-3: rgb(255 255 255 / 0.28);
  --rail-tekst: #c8d6ee;

  /* licht */
  --glas: #f2f6fb;
  --glas-2: #d6dade;
  --krijt: #ffffff;
  --staal: #5a6673;
  --inkt: #1c2836;
  --alarm: #b3261e;
  --alarm-licht: #fbe9e7;
  --ok: #2f7a4d;

  --kop: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --tekst: 'Roboto', system-ui, sans-serif;

  --r-klein: 4px;
  --r: 12px;
  --schaduw: 0 1px 2px rgb(0 49 115 / 0.10), 0 6px 20px rgb(0 49 115 / 0.10);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.45;
  color: var(--inkt);
  background: var(--krijt);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--kop); font-weight: 600; line-height: 1.2; margin: 0; color: inherit; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Het portaal heeft één lichte vormgeving; de donkere modus van de computer mag velden en vensters niet zwart maken. */
:root { color-scheme: light !important; }
:focus-visible { outline: 3px solid var(--oranje); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- knoppen en velden ---------- */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 42px; padding: 0 18px;
  background: var(--oranje); color: #fff;
  border: 1px solid var(--oranje); border-radius: var(--r-klein); font-family: var(--kop);
  font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.knop:hover { background: var(--oranje-donker); border-color: var(--oranje-donker); }
.knop:disabled { opacity: 0.6; cursor: progress; }
.knop.breed { width: 100%; }
.knop.klein { min-height: 34px; padding: 0 12px; font-size: 0.92rem; }
.knop.stil { background: #fff; color: var(--titel); border-color: var(--glas-2); }
.knop.stil:hover { background: var(--glas); border-color: var(--titel); }
.knop.gevaar { background: #fff; color: var(--alarm); border-color: #e7c2be; }
.knop.gevaar:hover { background: var(--alarm-licht); }
.linkknop {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  color: var(--merk-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.linkknop:hover { color: var(--titel); }
.linkknop.gevaar { color: var(--alarm); }
.linkknop.licht { color: var(--rail-tekst); }

.veld { display: grid; gap: 6px; margin-bottom: 16px; }
.veld > span, .veldlabel { font-weight: 500; font-size: 0.92rem; color: var(--staal); }
.veld input, .veld textarea, select, .zoekveld input {
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--glas-2); border-radius: var(--r-klein); background: #fff; color: var(--inkt);
}
.veld input::placeholder, .veld textarea::placeholder { color: #8a95a1; }
.veld input:focus, .veld textarea:focus, select:focus, .zoekveld input:focus { border-color: var(--merk-2); outline: 2px solid var(--oranje); outline-offset: 0; }
.fout { color: var(--alarm); background: var(--alarm-licht); padding: 10px 12px; border-radius: var(--r-klein); margin-bottom: 14px; }
.fout.klein { font-size: 0.85rem; padding: 6px 8px; margin: 6px 0 0; }
.hint { color: var(--staal); font-size: 0.88rem; }

/* ---------- woordmerk ---------- */

.woordmerk { display: inline-flex; align-items: flex-end; gap: 12px; text-decoration: none; color: inherit; }
.woordmerk img { display: block; height: auto; }
.woordmerk-sub { font-weight: 500; font-size: 1rem; opacity: 0.8; padding-bottom: 2px; }

/* ---------- inloggen ---------- */

body.inlog { display: grid; grid-template-columns: minmax(380px, 560px) minmax(0, 1fr); min-height: 100vh; background: var(--krijt); }
/* Links het witte inlogvlak. */
.inlog-paneel { padding: clamp(32px, 7vw, 88px) clamp(28px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.inlog-icoon { width: 44px; height: 44px; border-radius: 10px; margin-bottom: 22px; }
.inlog-paneel h1 { font-size: clamp(2.2rem, 4vw, 3.1rem); margin: 0 0 12px; color: var(--titel); letter-spacing: -0.01em; }
.inlog-intro { color: var(--staal); max-width: 40ch; margin-bottom: 32px; font-size: 1.05rem; }
.inlog-paneel form { max-width: 400px; }
.inlog-hulp { margin-top: 28px; color: var(--staal); font-size: 0.9rem; max-width: 40ch; }
/* Rechts een kasdek van bovenaf, met het merk van DroneKracht erop. */
.inlog-dak {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: clamp(28px, 5vw, 64px);
  background:
    linear-gradient(180deg, rgb(0 38 90 / 0.15) 0%, rgb(0 38 90 / 0.35) 45%, rgb(0 30 72 / 0.92) 100%),
    linear-gradient(90deg, rgb(0 49 115 / 0.35), rgb(0 49 115 / 0) 40%),
    url('../merk/kasdek.jpg') center 35% / cover no-repeat,
    var(--merk-diep);
}
@media (min-width: 761px) { .inlog-dak { position: sticky; top: 0; height: 100vh; height: 100dvh; } }
.inlog-merk { position: relative; display: grid; gap: 10px; }
.inlog-powered { color: rgb(255 255 255 / 0.8); font-family: var(--kop); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.inlog-logo { width: clamp(220px, 26vw, 360px); height: auto; filter: drop-shadow(0 2px 12px rgb(0 0 0 / 0.35)); }
@media (max-width: 760px) {
  body.inlog { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .inlog-dak { order: -1; min-height: 210px; padding: 22px 24px; background-position: center, center, center 30%, center; }
  .inlog-logo { width: min(200px, 60%); }
  .inlog-paneel { padding: 28px 24px 40px; justify-content: flex-start; }
  .inlog-icoon { display: none; }
}

/* ---------- kaartviewer ---------- */

body.viewer { overflow: hidden; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.voorbeeld-balk { background: var(--oranje); color: var(--inkt); padding: 8px 16px; font-size: 0.92rem; display: flex; gap: 16px; align-items: center; }
.voorbeeld-balk a { color: var(--inkt); font-weight: 600; }
.viewer-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; }

.rail {
  background: var(--merk-verloop); color: #fff;
  display: flex; flex-direction: column; overflow-y: auto; min-height: 0;
  scrollbar-color: var(--rail-3) transparent;
}
.rail-kop { padding: 22px 22px 18px; border-bottom: 1px solid var(--rail-2); }
.bedrijf { color: var(--rail-tekst); margin-top: 6px; font-size: 0.95rem; }
.rail-blok { padding: 18px 22px; border-bottom: 1px solid var(--rail-2); }
.rail-blok:empty { display: none; }
.blokkop { font-family: var(--tekst); font-weight: 600; font-size: 0.95rem; color: var(--rail-tekst); margin-bottom: 12px; }
.locatie-naam { font-size: 1.5rem; }
.locatie-plaats { color: var(--rail-tekst); }
.rail .veldlabel { display: block; color: var(--rail-tekst); margin-bottom: 6px; }
.rail select { background: var(--rail-2); border-color: var(--rail-3); color: #fff; }
.rail select option { color: var(--inkt); background: #fff; }
.rail .hint { color: var(--rail-tekst); margin-top: 10px; }

/* tijdlijn met vluchten: een echte volgorde in de tijd */
.tijdlijn { list-style: none; margin: 0; padding: 0; position: relative; }
.tijdlijn::before { content: ''; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: var(--rail-3); }
.tijdlijn li { position: relative; }
.vlucht {
  display: grid; grid-template-columns: 1fr auto; gap: 0 10px; width: 100%;
  text-align: left; background: none; border: 0; color: #fff; cursor: pointer;
  padding: 9px 10px 9px 30px; border-radius: var(--r-klein);
}
.vlucht::before {
  content: ''; position: absolute; left: 1px; top: 15px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--merk-diep); border: 2px solid var(--rail-tekst);
}
.vlucht:hover { background: var(--rail-2); }
.vlucht.gekozen { background: var(--rail-2); }
.vlucht.gekozen::before { background: var(--oranje); border-color: var(--oranje); box-shadow: 0 0 0 4px rgb(239 105 0 / 0.3); }
.vlucht.vergeleken::before { border-color: var(--oranje); background: var(--merk-diep); }
.vlucht-datum { font-family: var(--kop); font-weight: 600; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.vlucht-titel { grid-column: 1; color: var(--rail-tekst); font-size: 0.92rem; }
.vlucht-soort { grid-column: 2; grid-row: 1; align-self: center; font-size: 0.8rem; color: var(--rail-tekst); }
.tijdlijn .leeg { color: var(--rail-tekst); padding-left: 0; }
.tijdlijn:has(.leeg)::before { display: none; }

/* segmentschakelaar */
.schakelaar { display: inline-flex; background: var(--rail-2); border-radius: var(--r-klein); padding: 3px; }
.schakelaar label { position: relative; }
.schakelaar input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.schakelaar span { display: block; padding: 7px 13px; border-radius: 3px; font-weight: 500; font-family: var(--kop); color: var(--rail-tekst); }
.schakelaar input:checked + span { background: var(--oranje); color: #fff; }
.schakelaar input:focus-visible + span { outline: 3px solid #fff; outline-offset: 1px; }
.schakelaar.klein span { padding: 5px 12px; font-size: 0.9rem; }

.vinkje { display: flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 500; }
.vinkje input { width: 20px; height: 20px; accent-color: var(--oranje); }
#vergelijk-keuze { margin-top: 14px; }

.notitie { background: var(--rail-2); padding: 10px 12px; border-radius: var(--r-klein); margin-bottom: 12px; font-size: 0.95rem; white-space: pre-line; }
.download { display: flex; justify-content: space-between; gap: 12px; color: #fff; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.download-grootte { color: var(--rail-tekst); text-decoration: none; font-variant-numeric: tabular-nums; }

.rail-voet { margin-top: auto; padding: 16px 22px 20px; color: var(--rail-tekst); font-size: 0.92rem; }
.rail-acties { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.rail-acties .linkknop { color: #fff; padding-left: 0; }

/* kaart */
.kaartvlak { position: relative; min-width: 0; min-height: 0; background: #1a2440; }
.kaart { position: absolute; inset: 0; }
.kaart:focus-visible { outline-offset: -3px; }
.kaart-knoppen { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; align-items: center; }
.kaart-knoppen .schakelaar { background: rgb(0 49 115 / 0.92); box-shadow: var(--schaduw); }
.knop-kaart { background: rgb(0 49 115 / 0.92); color: #fff; border: 0; border-radius: var(--r-klein); padding: 9px 14px; font-weight: 600; cursor: pointer; box-shadow: var(--schaduw); }
.knop-kaart:hover { background: var(--titel); }
.lade-knop { display: none; }

/* OpenLayers bediening in huisstijl */
.ol-zoom { top: 12px; left: 12px; }
.ol-control { background: transparent; }
.ol-control button {
  background: rgb(0 49 115 / 0.92); color: #fff; width: 36px; height: 36px; font-size: 1.3rem;
  border-radius: var(--r-klein); margin: 0 0 4px; font-family: var(--tekst);
}
.ol-control button:hover, .ol-control button:focus { background: var(--titel); outline: none; }
.ol-control button:focus-visible { outline: 3px solid var(--oranje); }
.ol-scale-line { left: auto; right: 12px; bottom: 12px; background: rgb(0 49 115 / 0.85); }
.ol-attribution { bottom: 44px; right: 12px; }

/* vergelijkschuif */
.swipe { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; pointer-events: none; z-index: 2; }
.swipe::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--oranje); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25); }
.swipe-greep {
  position: absolute; top: 50%; left: -22px; width: 44px; height: 44px; margin-top: -22px;
  border-radius: 50%; background: var(--oranje); box-shadow: var(--schaduw);
  pointer-events: auto; cursor: ew-resize; touch-action: none;
}
.swipe-greep::before, .swipe-greep::after {
  content: ''; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent;
}
.swipe-greep::before { left: 7px; border-right-color: var(--inkt); }
.swipe-greep::after { right: 7px; border-left-color: var(--inkt); }
.swipe-label {
  position: absolute; top: 60px; white-space: nowrap; background: rgb(0 49 115 / 0.92); color: #fff;
  padding: 5px 10px; border-radius: var(--r-klein); font-family: var(--kop); font-weight: 600; font-variant-numeric: tabular-nums;
}
.swipe-label.links { right: 14px; }
.swipe-label.rechts { left: 14px; }

.peil {
  position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; z-index: 3;
  background: var(--inkt); color: #fff; padding: 5px 10px; border-radius: var(--r-klein);
  font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: var(--schaduw);
}
.peil::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--inkt); }

/* legenda */
.legenda {
  position: absolute; left: 12px; bottom: 12px; width: min(330px, calc(100% - 24px)); z-index: 2;
  background: rgb(250 251 253 / 0.97); border-radius: var(--r); box-shadow: var(--schaduw); padding: 14px 16px;
}
.legenda-schalen { display: flex; gap: 4px; margin-bottom: 10px; }
.legenda-schalen label { position: relative; }
.legenda-schalen input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.legenda-schalen span { display: block; padding: 3px 10px; border-radius: 3px; font-size: 0.88rem; font-weight: 600; color: var(--staal); border: 1px solid var(--glas-2); }
.legenda-schalen input:checked + span { background: var(--merk); color: #fff; border-color: var(--merk); }
.legenda-schalen input:focus-visible + span { outline: 3px solid var(--oranje); }
.legenda-titel { font-size: 1.1rem; color: var(--titel); margin-bottom: 8px; }
.legenda-balk { height: 14px; border-radius: 3px; }
.legenda-uiteinden { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; margin-top: 6px; }
.legenda-instellen { margin-top: 10px; border-top: 1px solid var(--glas-2); padding-top: 8px; }
.legenda-instellen summary { cursor: pointer; font-weight: 600; color: var(--merk-2); font-size: 0.92rem; }
.schuif { display: grid; gap: 2px; margin-top: 10px; font-size: 0.88rem; }
.schuif span { display: flex; justify-content: space-between; color: var(--staal); }
.schuif output { font-variant-numeric: tabular-nums; color: var(--inkt); font-weight: 600; }
.schuif input { accent-color: var(--merk); width: 100%; }
.legenda-noot { margin-top: 10px; font-size: 0.82rem; color: var(--staal); }

@media (max-width: 760px) {
  .viewer-grid { grid-template-columns: 1fr; position: relative; }
  .rail {
    position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; max-height: 72%;
    transform: translateY(100%); transition: transform 0.25s ease; border-radius: 12px 12px 0 0;
  }
  .rail.open { transform: none; box-shadow: 0 -8px 30px rgb(0 0 0 / 0.35); }
  .lade-knop {
    display: block; position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); bottom: 16px;
    background: var(--oranje); color: var(--inkt); border: 0; border-radius: 999px; padding: 12px 22px;
    font-weight: 600; box-shadow: var(--schaduw);
  }
  .rail.open ~ .kaartvlak .lade-knop, .viewer-grid:has(.rail.open) .lade-knop { bottom: calc(72% + 12px); }
  .kaart-knoppen { right: 8px; top: 8px; }
  .legenda { bottom: 72px; }
  .ol-scale-line { bottom: 76px; right: 56px; }
  .ol-attribution { bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* ---------- dialogen en meldingen ---------- */

.dialoog { background: #fff; color: var(--inkt); border: 0; border-radius: var(--r); padding: 26px 28px; width: min(480px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgb(0 0 0 / 0.3); }
.dialoog::backdrop { background: rgb(14 26 51 / 0.55); }
.dialoog h2 { font-size: 1.5rem; margin-bottom: 16px; color: var(--titel); }
.dialoog .hint { margin-bottom: 16px; }
.dialoog-knoppen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.inlogblok { background: var(--glas); padding: 14px; border-radius: var(--r-klein); white-space: pre-wrap; font-family: var(--tekst); font-size: 0.95rem; margin: 0 0 16px; }

.toasts { position: fixed; z-index: 50; right: 16px; bottom: 16px; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--inkt); color: #fff; padding: 12px 16px; border-radius: var(--r-klein); box-shadow: var(--schaduw); border-left: 4px solid var(--oranje); }
.toast-fout { border-left-color: #ff8a80; }

/* ---------- beheer ---------- */

body.beheer { background: var(--glas); min-height: 100vh; color: var(--inkt); }
.topbalk { background: var(--merk-verloop); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; position: sticky; top: 0; z-index: 10; }
.topbalk-rechts { display: flex; gap: 16px; align-items: center; color: var(--rail-tekst); }
.beheer-grid { display: grid; grid-template-columns: 300px 1fr; gap: 0; min-height: calc(100vh - 58px); }
.klantenkolom { background: var(--krijt); border-right: 1px solid var(--glas-2); padding: 20px 16px; }
.klantenkolom-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.klantenkolom-kop h2 { font-size: 1.4rem; }
.zoekveld { display: block; margin-bottom: 10px; }
.klantenlijst { list-style: none; margin: 0; padding: 0; }
.klant { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-klein); padding: 10px 12px; cursor: pointer; border-left: 3px solid transparent; }
.klant:hover { background: var(--glas); }
.klant.gekozen { background: var(--glas); border-left-color: var(--oranje-donker); }
.klant-naam { display: block; font-weight: 600; }
.klant-meta { display: block; font-size: 0.85rem; color: var(--staal); }
.klantenlijst .leeg { color: var(--staal); padding: 10px 12px; }

.detail { padding: 28px clamp(16px, 3vw, 40px) 120px; max-width: 1100px; }
.leeg-groot { padding: 60px 0; max-width: 50ch; }
.leeg-groot h2 { font-size: 1.8rem; color: var(--titel); margin-bottom: 8px; }
.leeg-groot p { color: var(--staal); }
.detail-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.detail-kop h1 { font-size: 2.2rem; color: var(--titel); }
.contact { color: var(--staal); white-space: pre-line; margin-top: 4px; }
.detail-acties { display: flex; gap: 8px; flex-wrap: wrap; }

.sectie { background: var(--krijt); border-radius: var(--r); padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--schaduw); }
.sectie-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.sectie-kop h2 { font-size: 1.35rem; }
.sectie > .leeg { color: var(--staal); }

.tabel-wrap { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabel th { text-align: left; font-weight: 600; color: var(--staal); font-size: 0.88rem; padding: 6px 10px; border-bottom: 1px solid var(--glas-2); }
.tabel td { padding: 9px 10px; border-bottom: 1px solid var(--glas); vertical-align: middle; }
.tabel tr.uit td { color: var(--staal); }
.acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
td.acties { justify-content: flex-end; }

.locatie { border: 1px solid var(--glas-2); border-radius: var(--r); margin-top: 14px; overflow: hidden; }
.locatie-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--glas); }
.locatie-kop h3 { font-size: 1.25rem; display: inline; margin-right: 8px; }
.locatie-kop .locatie-plaats { color: var(--staal); }
.locatie > .leeg { padding: 14px 16px; color: var(--staal); }
.vluchtlijst { list-style: none; margin: 0; padding: 0; }
.vluchtrij { padding: 14px 16px; border-top: 1px solid var(--glas); }
.vluchtrij:first-child { border-top: 0; }
.vluchtrij-kop { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.vluchtrij-kop .vlucht-datum { color: var(--titel); }
.vluchtrij-kop .vlucht-titel { color: var(--staal); font-size: 0.95rem; grid-column: auto; }
.vluchtrij-kop .acties { margin-left: auto; }
.kaartlijst { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.kaartrij { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--glas); border-radius: var(--r-klein); padding: 8px 12px; font-size: 0.92rem; }
.kaartrij .fout { grid-column: 1 / -1; }
.kaart-soort { font-weight: 600; }
.kaart-bestand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kaart-grootte { color: var(--staal); font-variant-numeric: tabular-nums; }
.status { font-size: 0.85rem; font-weight: 600; padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.status-ready { background: #e3f1e8; color: var(--ok); }
.status-queued, .status-processing { background: #fdf4d6; color: #7a5b00; }
.status-uploading { background: var(--glas); color: var(--staal); }
.status-error { background: var(--alarm-licht); color: var(--alarm); }
.upload-knoppen { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.upload-knoppen label { cursor: pointer; }

.uploads { position: fixed; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); background: var(--krijt); border-radius: var(--r); box-shadow: 0 10px 40px rgb(0 0 0 / 0.25); padding: 16px 18px; z-index: 20; }
.uploads h2 { font-size: 1.15rem; margin-bottom: 10px; }
.uploads ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; max-height: 50vh; overflow-y: auto; }
.upload-naam { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 0.92rem; word-break: break-all; }
.upload-naam span { font-variant-numeric: tabular-nums; }
.upload progress { width: 100%; height: 8px; accent-color: var(--merk); }
.upload-sub { font-size: 0.82rem; color: var(--staal); }
.upload-fout .upload-sub { color: var(--alarm); }
body.beheer:has(.uploads:not([hidden])) .toasts { bottom: auto; top: 76px; }

@media (max-width: 860px) {
  .beheer-grid { grid-template-columns: 1fr; }
  .klantenkolom { border-right: 0; border-bottom: 1px solid var(--glas-2); }
  .klantenlijst { max-height: 240px; overflow-y: auto; }
  .kaartrij { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .kaartrij .kaart-grootte { display: none; }
  .kaartrij .acties { grid-column: 1 / -1; }
}
.ol-scale-line-inner { color: #fff; border-color: #fff; font-family: var(--tekst); font-size: 0.78rem; }
.sectie-kop h2, .klantenkolom-kop h2, .locatie-kop h3 { color: var(--titel); }

/* meten */
.meetbalk { position: absolute; top: 12px; left: 56px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.meetknop {
  background: rgb(0 49 115 / 0.92); color: #fff; border: 0; border-radius: var(--r-klein);
  padding: 9px 12px; font-family: var(--kop); font-weight: 500; font-size: 0.92rem; cursor: pointer; box-shadow: var(--schaduw);
}
.meetknop:hover { background: var(--titel); }
.meetknop[aria-pressed="true"] { background: var(--oranje); }
.meetknop.wis { background: #fff; color: var(--titel); }
.meet-hint {
  position: absolute; top: 58px; left: 56px; z-index: 2; max-width: min(420px, calc(100% - 72px));
  background: rgb(255 255 255 / 0.96); color: var(--inkt); padding: 8px 12px; border-radius: var(--r-klein);
  font-size: 0.88rem; box-shadow: var(--schaduw);
}
.meetlabel {
  background: var(--titel); color: #fff; padding: 4px 9px; border-radius: var(--r-klein);
  font-family: var(--kop); font-weight: 600; font-size: 0.9rem; white-space: nowrap; font-variant-numeric: tabular-nums;
  box-shadow: var(--schaduw); pointer-events: none;
}
.meetlabel.live { background: var(--oranje); }
@media (max-width: 760px) {
  .meetbalk { top: 56px; left: 8px; right: 8px; }
  .meet-hint { top: 100px; left: 8px; }
  .swipe-label { top: 100px; }
  .viewer:has(.meet-hint:not([hidden])) .doorkijk { top: 156px; }
}

/* kasdekscan instellen */
.toon-keuze { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.toon-keuze label { position: relative; }
.toon-keuze input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.toon-keuze span { display: block; padding: 4px 10px; border-radius: 3px; font-size: 0.86rem; font-weight: 500; color: var(--staal); border: 1px solid var(--glas-2); }
.toon-keuze input:checked + span { background: var(--titel); color: #fff; border-color: var(--titel); }
.toon-keuze input:focus-visible + span { outline: 3px solid var(--oranje); }
.grens { border: 0; margin: 10px 0 0; padding: 0; }
.grens legend { font-weight: 600; font-size: 0.9rem; color: var(--titel); padding: 0; }

.keuze { display: grid; gap: 4px; margin-top: 10px; font-size: 0.88rem; color: var(--staal); }
.keuze select { min-height: 36px; padding: 4px 8px; font-size: 0.92rem; background: #fff; color: var(--inkt); border: 1px solid var(--glas-2); border-radius: var(--r-klein); }
#auto-contrast { display: block; margin-top: 8px; }
.legenda { max-height: calc(100% - 24px); overflow-y: auto; }

.voorinstelling { display: grid; gap: 6px; margin: 10px 0 4px; }
.voorinstelling .schakelaar { width: 100%; }
.voorinstelling .schakelaar label { flex: 1; text-align: center; }
.voorinstelling .hint { font-size: 0.82rem; }

/* doorkijken: schuif tussen foto en scan, zoals in DroneDB */
.doorkijk {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 7px 14px;
  background: rgb(0 49 115 / 0.92); color: #fff; border-radius: 999px; box-shadow: var(--schaduw);
  font-family: var(--kop); font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.doorkijk[hidden] { display: none; }
.doorkijk-icoon { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(to right, #fff 50%, transparent 50%); flex: none; }
.doorkijk input { width: clamp(120px, 18vw, 220px); accent-color: var(--oranje); }
.doorkijk output { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1100px) { .doorkijk { left: auto; right: 12px; transform: none; bottom: 40px; } }
@media (max-width: 760px) { .doorkijk { top: 100px; bottom: auto; } .doorkijk input { width: 150px; } }
.voorinstelling .schakelaar { background: var(--glas); border: 1px solid var(--glas-2); }
.voorinstelling .schakelaar span { color: var(--titel); }
.voorinstelling .schakelaar input:checked + span { color: #fff; }
.voorinstelling .schakelaar input:focus-visible + span { outline-color: var(--oranje); }
@media (max-width: 760px) { .meetbalk { left: 52px; right: 8px; } }

/* thermografie */
#weergave .schakelaar { flex-wrap: wrap; }
#weergave-thermo.op-bestelling span { opacity: 0.8; }
#weergave-thermo.op-bestelling span::after {
  content: ''; display: inline-block; width: 9px; height: 11px; margin-left: 6px; vertical-align: -1px;
  background: currentColor; -webkit-mask: var(--slot) no-repeat center / contain; mask: var(--slot) no-repeat center / contain;
  --slot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M2 5V3.5a2.5 2.5 0 0 1 5 0V5h1v6H1V5zm1 0h3V3.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E");
}
.bestel { display: grid; gap: 10px; }
.bestel p { font-size: 0.92rem; color: var(--rail-tekst); }
.bestel textarea { width: 100%; padding: 8px 10px; border-radius: var(--r-klein); border: 1px solid var(--rail-2); font: inherit; font-size: 0.92rem; resize: vertical; color: var(--inkt); background: #fff; }
.bestel .bestel-klaar { color: #fff; background: var(--rail-2); padding: 10px 12px; border-radius: var(--r-klein); }

/* aanvragen in beheer */
.aanvragen { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r); background: #fff4ea; border: 1px solid #f6c9a3; display: grid; gap: 8px; }
.aanvragen h2 { font-size: 1rem; color: var(--oranje-donker, #b84f00); }
.aanvragen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aanvraag { display: grid; gap: 4px; justify-items: start; font-size: 0.88rem; }
.aanvraag-klant { font-weight: 600; }
.aanvraag-meta, .aanvraag-opmerking { color: var(--staal); }
.klant-aanvraag { display: inline-block; margin-top: 4px; font-size: 0.78rem; font-weight: 600; color: #fff; background: var(--oranje); padding: 1px 8px; border-radius: 999px; }
.voorinstelling .schakelaar[hidden] { display: none; }

.ondergrond-melding {
  position: absolute; z-index: 2; left: 50%; bottom: 70px; transform: translateX(-50%); width: max-content; max-width: min(420px, calc(100% - 24px));
  background: rgb(255 255 255 / 0.96); color: var(--inkt); font-size: 0.85rem; padding: 7px 12px; border-radius: var(--r-klein); box-shadow: var(--schaduw); text-align: center;
}
@media (max-width: 760px) { .ondergrond-melding { bottom: 104px; } }
.ondergrond-melding[hidden] { display: none; }

/* beheer: accounts en toegang */
.account-naam { display: block; font-weight: 500; }
.account-functie { display: block; font-size: 0.82rem; color: var(--staal); }
.tabel td.beperkt { color: var(--oranje-donker); font-weight: 500; }
.tabel td.acties { white-space: normal; }
.locatie-toegang { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--staal); }
.toegang { border: 1px solid var(--glas-2); border-radius: var(--r-klein); padding: 10px 14px 12px; margin: 4px 0 12px; display: grid; gap: 8px; }
.toegang legend { font-weight: 600; font-size: 0.9rem; color: var(--titel); padding: 0 4px; }
.toegang-keuze { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.toegang-keuze input { margin-top: 3px; accent-color: var(--oranje); }
.toegang-keuze small { display: block; color: var(--staal); font-size: 0.82rem; }
.toegang-lijst { display: grid; gap: 6px; padding: 4px 0 0 26px; }
.toegang-lijst[hidden] { display: none; }
.vinkje.klein { font-weight: 400; font-size: 0.92rem; }
.vinkje.klein input { width: 17px; height: 17px; }

/* beheer: meerkeuze soort vlucht */
.keuzeknoppen { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.keuzeknoppen legend { font-weight: 500; font-size: 0.92rem; color: var(--staal); margin-bottom: 6px; padding: 0; }
.keuzeknop { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border: 1.5px solid var(--glas-2); border-radius: var(--r-klein); cursor: pointer; background: #fff; }
.keuzeknop input { margin-top: 3px; accent-color: var(--oranje); }
.keuzeknop strong { display: block; color: var(--titel); }
.keuzeknop small { display: block; color: var(--staal); font-size: 0.82rem; }
.keuzeknop:has(input:checked) { border-color: var(--oranje); background: #fff6ee; }
.keuzeknop.uit { cursor: not-allowed; opacity: 0.55; }

/* Knop Kaart: alleen de openbare luchtfoto, zonder dronefoto, scan en de bijbehorende knoppen. */
.zonder-dronefoto #legenda,
.zonder-dronefoto #doorkijk,
.zonder-dronefoto #swipe,
.zonder-dronefoto #peil { display: none !important; }

/* Compacte legenda: kleiner en rustiger, zonder Instellen. */
.legenda-instellen { display: none !important; }
.legenda { width: min(268px, calc(100% - 24px)); padding: 10px 12px; border-radius: 10px; }
.legenda-titel { font-size: 0.95rem; margin-bottom: 6px; }
.legenda-balk { height: 8px; border-radius: 999px; }
.legenda-uiteinden { font-size: 0.75rem; margin-top: 3px; color: var(--staal); }
.voorinstelling { gap: 4px; margin: 8px 0 0; }
.voorinstelling .schakelaar { padding: 2px; }
.voorinstelling .schakelaar.klein span { padding: 3px 8px; font-size: 0.82rem; }
.voorinstelling .hint { font-size: 0.75rem; line-height: 1.35; color: var(--staal); margin: 0; }
.legenda-noot { margin-top: 6px; font-size: 0.72rem; }

/* Uitleg: vraagteken-knop en welkomstscherm */
.hulp-knop { width: 38px; padding: 9px 0; font-size: 1.05rem; text-align: center; }
.hulp-dialoog { width: min(440px, calc(100vw - 32px)); }
.hulp-dialoog h2 { font-size: 1.3rem; }
.hulp-stappen { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 14px; }
.hulp-stappen li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.hulp-nr { width: 32px; height: 32px; border-radius: 50%; background: var(--oranje); color: #fff; font-weight: 700; display: grid; place-items: center; font-family: var(--kop); }
.hulp-stappen strong { color: var(--titel); font-family: var(--kop); }
.hulp-stappen p { margin: 2px 0 0; font-size: 0.9rem; color: var(--staal); line-height: 1.4; }
.hulp-dialoog .hint { font-size: 0.82rem; color: var(--staal); margin-bottom: 12px; }

/* ---------- beheer: locaties en vluchten (overzichtelijk) ---------- */
.locatie { border: 1px solid var(--glas-2); border-left: 5px solid var(--merk); border-radius: 10px; margin-top: 14px; overflow: hidden; background: #fff; }
.locatie-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--glas); cursor: pointer; list-style: none; justify-content: flex-start; }
.locatie-kop::-webkit-details-marker { display: none; }
.locatie-pijl { width: 0; height: 0; border-left: 7px solid var(--titel); border-top: 6px solid transparent; border-bottom: 6px solid transparent; transition: transform 0.15s; flex: none; }
.locatie[open] .locatie-pijl { transform: rotate(90deg); }
.locatie-speld { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--glas-2); color: var(--merk); display: grid; place-items: center; flex: none; }
.locatie-info { min-width: 0; }
.locatie-kop h3 { font-size: 1.15rem; display: block; margin: 0; }
.locatie-sub { font-size: 0.85rem; color: var(--staal); }
.locatie-toegang { display: inline-block; margin-top: 4px; font-size: 0.75rem; font-weight: 500; padding: 1px 9px; border-radius: 999px; background: #fff4e6; color: #9a4a00; }
.locatie-toegang.ok { background: #e8f3ec; color: var(--ok); }
.locatie-kop .acties { margin-left: auto; display: flex; align-items: center; gap: 4px; cursor: default; }
.icoonknop { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--staal); cursor: pointer; }
.icoonknop:hover { background: #fff; border-color: var(--glas-2); color: var(--titel); }
.icoonknop.gevaar { color: var(--alarm); }
.icoonknop.gevaar:hover { background: var(--alarm-licht); border-color: transparent; color: var(--alarm); }
.icoonknop:focus-visible { outline: 3px solid var(--oranje); outline-offset: 1px; }
.vluchttabel { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.vluchttabel th { text-align: left; font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--staal); padding: 8px 16px 6px; border-bottom: 1px solid var(--glas); }
.vluchttabel td { padding: 8px 16px; border-bottom: 1px solid var(--glas); vertical-align: middle; }
.vluchttabel tbody tr:last-child td { border-bottom: 0; }
.vluchttabel tr.vervolg td { border-top: 0; }
.vt-datum { font-family: var(--kop); font-weight: 600; color: var(--titel); white-space: nowrap; }
.vt-grootte { color: var(--staal); white-space: nowrap; }
.soortlabel { display: inline-block; font-size: 0.8rem; font-weight: 500; padding: 1px 8px; border-radius: 4px; background: #e8f0fe; color: var(--merk); }
.vt-acties { display: flex; justify-content: flex-end; gap: 2px; }
.vt-upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vt-upload label { cursor: pointer; }
.vt-extra { margin-left: 8px; }
.vluchttabel .fout { margin: 4px 0 0; }
@media (max-width: 760px) {
  .vluchttabel thead { display: none; }
  .vluchttabel td { padding: 6px 10px; }
  .vt-grootte { display: none; }
  .locatie-kop .acties { margin-left: 0; width: 100%; }
}
/* Vaste kolommen, zodat alle locaties precies onder elkaar uitlijnen. */
.vluchttabel { table-layout: fixed; }
.vluchttabel th:nth-child(1) { width: 20%; }
.vluchttabel th:nth-child(2) { width: 18%; }
.vluchttabel th:nth-child(3) { width: 13%; }
.vluchttabel th:nth-child(5) { width: 96px; }
.soortlabel { white-space: nowrap; }
@media (max-width: 760px) { .vluchttabel { table-layout: auto; } }
/* Accounts en relatiekop in dezelfde lijn als Locaties en vluchten */
.tabel th { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px 6px; border-bottom: 1px solid var(--glas); }
.status-uit { background: var(--glas); color: var(--staal); }
.detail-acties { display: flex; align-items: center; gap: 6px; }
.detail-acties .icoonknop { width: 40px; height: 40px; background: #fff; border-color: var(--glas-2); }
a.icoonknop { text-decoration: none; }
/* Telefoon: brede tabellen mogen de pagina niet breder maken dan het scherm. */
.beheer-grid > * { min-width: 0; }
@media (max-width: 760px) {
  .beheer-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-kop h1 { font-size: 1.6rem; }
  .vluchttabel td { word-break: normal; }
  .vt-upload .knop { white-space: normal; }
}
/* Telefoon: tabellen worden kaartjes per regel, zodat niets buiten beeld valt. */
@media (max-width: 760px) {
  .sectie-kop { flex-wrap: wrap; }
  .sectie-kop h2 { font-size: 1.2rem; }
  .vluchttabel, .vluchttabel tbody, .tabel, .tabel tbody { display: block; width: 100%; }
  .vluchttabel thead, .tabel thead { display: none; }
  .vluchttabel tr, .tabel tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-bottom: 1px solid var(--glas); }
  .vluchttabel td, .tabel td { display: block; padding: 0; border: 0; }
  .vluchttabel td:empty { display: none; }
  .vluchttabel td:last-child, .tabel td:last-child { margin-left: auto; }
  .vluchttabel tr.vervolg { padding-top: 0; }
  .vt-upload { width: 100%; }
  .tabel-wrap { overflow: visible; }
  .tabel td:nth-child(1), .tabel td:nth-child(2) { flex-basis: 100%; }
  .tabel td:nth-child(2) { color: var(--staal); font-size: 0.88rem; }
  .tabel td:nth-child(3) { font-size: 0.85rem; }
  .tabel td:nth-child(4) { font-size: 0.85rem; color: var(--staal); }
  .tabel td:nth-child(4)::before { content: 'Laatst ingelogd: '; }
  .tabel td:nth-child(5) { flex-basis: 100%; }
  .tabel td:last-child { margin-left: 0; }
}