:root {
  --oranje: #f6931e;
  --oranje-zacht: #fdf0e0;
  --blauw: #6aa8ff;
  --donker: #17191e;
  --donker-2: #22252c;
  --tekst: #1c1f24;
  --grijs: #6b7280;
  --lijn: #e6e8ec;
  --achtergrond: #f4f5f7;
  --wit: #ffffff;
  --groen: #1f9d55;
  --rood: #d64545;
  --radius: 12px;
  --schaduw: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Helvetica, Arial, sans-serif;
  background: var(--achtergrond);
  color: var(--tekst);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.app { display: flex; min-height: 100vh; }

/* ---------------------------------------------------------------- zijbalk */
.zijbalk {
  width: 244px;
  flex: 0 0 244px;
  background: var(--donker);
  color: #d7dae0;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.zijbalk img { width: 168px; margin: 4px 6px 22px; }
.zijbalk nav { display: flex; flex-direction: column; gap: 2px; }
.zijbalk a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  color: #c9ced8; text-decoration: none; font-weight: 500; cursor: pointer;
}
.zijbalk a:hover { background: var(--donker-2); color: #fff; }
.zijbalk a.actief { background: var(--oranje); color: #fff; }
.zijbalk a svg { width: 18px; height: 18px; flex: 0 0 18px; }
.zijbalk .voet {
  margin-top: auto; border-top: 1px solid #2c3038; padding-top: 16px; font-size: 12px; color: #8b93a1;
}
.zijbalk .voet strong { display: block; color: #fff; font-size: 14px; margin: 2px 0; }
.gebruiker { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.gebruiker .bol {
  width: 30px; height: 30px; border-radius: 50%; background: var(--donker-2);
  display: grid; place-items: center; font-size: 11px; color: #fff; font-weight: 600;
}

/* ------------------------------------------------------------------ inhoud */
.inhoud { flex: 1; min-width: 0; }
.koprand {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px; background: var(--wit); border-bottom: 1px solid var(--lijn);
  position: sticky; top: 0; z-index: 20;
}
.koprand .bovenlabel { font-size: 11px; letter-spacing: .12em; color: var(--grijs); text-transform: uppercase; }
.koprand h1 { margin: 4px 0 0; font-size: 22px; font-weight: 600; }
.koprand .knoppen { display: flex; gap: 10px; }
main { padding: 26px 32px 60px; max-width: 1360px; }

/* ------------------------------------------------------------------ knoppen */
button, .knop {
  font: inherit; font-weight: 500; border-radius: 9px; padding: 9px 15px;
  border: 1px solid var(--lijn); background: var(--wit); color: var(--tekst);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
button:hover, .knop:hover { border-color: #cfd3da; }
button.primair { background: var(--donker); color: #fff; border-color: var(--donker); }
button.primair:hover { background: #2b2f37; }
button.accent { background: var(--oranje-zacht); border-color: #f4d3a8; color: #a05a06; }
button.gevaar { color: var(--rood); border-color: #f0cccc; background: #fff6f6; }
button.klein { padding: 6px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* -------------------------------------------------------------------- kaart */
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw); }
.kaart + .kaart { margin-top: 20px; }
.kaart-kop { padding: 18px 22px; border-bottom: 1px solid var(--lijn); display: flex; justify-content: space-between; align-items: center; }
.kaart-kop .bovenlabel { font-size: 11px; letter-spacing: .12em; color: var(--grijs); text-transform: uppercase; }
.kaart-kop h2 { margin: 3px 0 0; font-size: 17px; font-weight: 600; }
.kaart-lijf { padding: 20px 22px; }

.banner {
  background: linear-gradient(120deg, #1d2026 0%, #2a2118 100%);
  color: #fff; border-radius: var(--radius); padding: 30px 32px; margin-bottom: 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.banner h2 { margin: 8px 0 10px; font-size: 26px; line-height: 1.25; max-width: 15em; font-weight: 600; }
.banner p { margin: 0 0 18px; color: #b9bfc9; max-width: 34em; }
.banner .bovenlabel { font-size: 11px; letter-spacing: .14em; color: #8b93a1; text-transform: uppercase; }
.banner button.oranje { background: var(--oranje); border-color: var(--oranje); color: #fff; }

.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }
.tegel { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--schaduw); }
.tegel .label { color: var(--grijs); font-size: 13px; }
.tegel .waarde { font-size: 26px; font-weight: 600; margin: 8px 0 4px; }
.tegel .sub { color: var(--grijs); font-size: 12px; }

/* ------------------------------------------------------------------ tabellen */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grijs); font-weight: 600; padding: 0 12px 10px; border-bottom: 1px solid var(--lijn);
}
td { padding: 14px 12px; border-bottom: 1px solid #f1f2f5; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td.rechts, th.rechts { text-align: right; }
.sub { color: var(--grijs); font-size: 12px; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.badge.concept { background: #eef0f4; color: #565e6b; }
.badge.verzonden { background: #e5efff; color: #2a5db0; }
.badge.betaald { background: #e4f5ea; color: #17703c; }
.badge.vervallen { background: #fdeaea; color: #a12a2a; }
.badge.intern { background: var(--oranje-zacht); color: #a05a06; }

/* ------------------------------------------------------------------- velden */
label.veld { display: block; margin-bottom: 14px; }
label.veld span { display: block; font-size: 12.5px; color: var(--grijs); margin-bottom: 5px; }
input, select, textarea {
  font: inherit; width: 100%; padding: 9px 11px; border: 1px solid var(--lijn);
  border-radius: 9px; background: var(--wit); color: var(--tekst);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #f7d2a4; border-color: var(--oranje); }
textarea { min-height: 84px; resize: vertical; }
.rij { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rij-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.zoekbalk { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.zoekbalk input { max-width: 420px; }

/* ------------------------------------------------------------- klantenkaarten */
.klantgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.klantkaart { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px; background: var(--wit); }
.klantkaart .kop { display: flex; justify-content: space-between; align-items: flex-start; }
.initialen { width: 34px; height: 34px; border-radius: 9px; background: var(--donker); color: var(--oranje); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.klantkaart h3 { margin: 14px 0 2px; font-size: 15px; font-weight: 600; }
.contactregel { border: 1px solid var(--lijn); border-radius: 9px; padding: 9px 11px; margin-top: 10px; display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.kenmerk { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--grijs); padding-top: 9px; }
.kenmerk b { color: var(--tekst); font-weight: 500; }

/* -------------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 6px; padding: 0 22px; border-bottom: 1px solid var(--lijn); }
.tabs button {
  border: none; background: none; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 13px 12px; color: var(--grijs); font-weight: 500;
}
.tabs button.actief { color: var(--tekst); border-bottom-color: var(--oranje); }
.tabs .telling { background: #eef0f4; border-radius: 999px; padding: 1px 8px; font-size: 11px; }

/* ------------------------------------------------------------------- dialoog */
.overlay { position: fixed; inset: 0; background: rgba(16, 19, 24, .45); display: grid; place-items: center; padding: 24px; z-index: 60; }
.dialoog { background: var(--wit); border-radius: 16px; width: min(880px, 100%); max-height: 90vh; overflow: auto; }
.dialoog .kop { padding: 20px 24px; border-bottom: 1px solid var(--lijn); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--wit); }
.dialoog .kop h2 { margin: 0; font-size: 18px; }
.dialoog .lijf { padding: 22px 24px; }
.dialoog .voet { padding: 16px 24px; border-top: 1px solid var(--lijn); display: flex; justify-content: space-between; gap: 10px; position: sticky; bottom: 0; background: var(--wit); }

.melding { position: fixed; right: 24px; bottom: 24px; background: var(--donker); color: #fff; padding: 13px 18px; border-radius: 10px; z-index: 90; box-shadow: 0 10px 25px rgba(0,0,0,.25); max-width: 420px; }
.melding.fout { background: var(--rood); }
.leeg { text-align: center; color: var(--grijs); padding: 40px 0; }
.hint { font-size: 12.5px; color: var(--grijs); margin: 6px 0 0; }
.totaalregel { display: flex; justify-content: flex-end; gap: 28px; padding: 8px 12px; }
.totaalregel.groot { font-weight: 700; font-size: 16px; border-top: 1px solid var(--lijn); padding-top: 14px; }
.opzoekresultaat { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.opzoekresultaat:hover { border-color: var(--oranje); background: #fffaf3; }
.regeltabel input, .regeltabel select { padding: 7px 9px; }
.regeltabel td { padding: 8px 6px; }
/* ------------------------------------------------------------------ gesprek */
.gesprek {
  border: 1px solid var(--lijn); border-radius: 12px; padding: 14px; margin-bottom: 14px;
  max-height: 320px; overflow: auto; background: #fbfbfc; display: flex; flex-direction: column; gap: 12px;
}
.gesprek:empty::after { content: 'Beschrijf hieronder kort de opdracht, dan stelt de assistent de eerste vragen.'; color: var(--grijs); font-size: 13px; }
.bericht .wie { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); margin-bottom: 3px; }
.bericht .tekst { background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.bericht.jij .tekst { background: var(--oranje-zacht); border-color: #f4d3a8; }

.leaflet-container { font: inherit; }

.binnenkort { border: 1px dashed var(--lijn); border-radius: var(--radius); padding: 34px; text-align: center; color: var(--grijs); background: #fbfbfc; }

/* --------------------------------------------------------------------- hero */
.hero {
  background:
    radial-gradient(900px 320px at 88% -10%, rgba(246, 147, 30, 0.28), transparent 60%),
    linear-gradient(135deg, #16181d 0%, #1d2027 55%, #24211c 100%);
  color: #fff;
  border-radius: 16px;
  padding: 32px 34px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: 30px;
  align-items: center;
}
.hero .bovenlabel { color: var(--oranje); letter-spacing: .16em; font-size: 11px; text-transform: uppercase; font-weight: 600; }
.hero h2 { margin: 10px 0 12px; font-size: 30px; line-height: 1.2; font-weight: 600; max-width: 16em; letter-spacing: -0.01em; }
.hero p { margin: 0 0 20px; color: #b6bcc7; max-width: 40em; line-height: 1.6; }
.hero-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-knoppen button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
.hero-knoppen button:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.hero-knoppen button.oranje { background: var(--oranje); border-color: var(--oranje); color: #fff; font-weight: 600; }
.hero-knoppen button.oranje:hover { background: #ffa437; }
.hero-zij { display: grid; gap: 10px; }
.hero-chip {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  padding: 11px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.hero-chip b { font-size: 13.5px; font-weight: 600; }
.hero-chip span { font-size: 12px; color: #98a0ad; }
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero-zij { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* Melding dat de app nog op oude code draait */
.versiebalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: #a12a2a; color: #fff; padding: 12px 22px; font-size: 13.5px; line-height: 1.5;
  box-shadow: 0 -2px 12px rgba(0,0,0,.2);
}

/* -------------------------------------------------- in de Mac-app (Electron)
   De vensterknoppen van macOS zweven over de zijbalk, dus daar maken we
   bovenin wat ruimte vrij. In de browser verandert er niets. */
body.macapp .zijbalk { padding-top: 46px; -webkit-app-region: drag; }
body.macapp .zijbalk a,
body.macapp .zijbalk .voet,
body.macapp .zijbalk img { -webkit-app-region: no-drag; }
body.macapp .koprand { -webkit-app-region: drag; }
body.macapp .koprand button,
body.macapp .koprand input,
body.macapp .koprand select { -webkit-app-region: no-drag; }

/* ---------------------------------------------------- kaartlagen op de kaart
   De algemene veldopmaak maakt keuzerondjes anders paginabreed. */
.leaflet-control-layers { border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.leaflet-control-layers-list { padding: 4px 2px; }
.leaflet-control-layers label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1px 0;
  padding: 2px 4px;
  font-size: 13px;
  cursor: pointer;
}
.leaflet-control-layers label:hover { background: #f3f4f6; border-radius: 4px; }
.leaflet-control-layers input[type='radio'],
.leaflet-control-layers input[type='checkbox'] { width: auto; margin: 0; box-shadow: none; }
.leaflet-control-layers-selector { flex: 0 0 auto; }

/* ------------------------------------------------------------ op de telefoon
   Onder de 820 pixels wordt de zijbalk een balk onderin, staan velden onder
   elkaar en vullen dialoogvensters het hele scherm. Zo werkt dezelfde app ook
   op de iPhone, ook als hij vanaf het beginscherm wordt gestart. */
@media (max-width: 820px) {
  body { font-size: 15px; }
  .app { flex-direction: column; min-height: 100dvh; }

  .zijbalk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    flex: none;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    overflow-x: auto;
    z-index: 50;
    border-top: 1px solid #000;
  }
  .zijbalk img,
  .zijbalk .voet { display: none; }
  .zijbalk nav { flex-direction: row; gap: 2px; }
  .zijbalk a {
    flex-direction: column;
    gap: 3px;
    font-size: 10.5px;
    line-height: 1.15;
    text-align: center;
    padding: 7px 9px;
    min-width: 66px;
    white-space: normal;
  }
  .zijbalk a svg { width: 20px; height: 20px; flex: 0 0 20px; }

  .inhoud { padding-bottom: 78px; }
  .koprand {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--achtergrond);
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  }
  .koprand h1 { font-size: 19px; }
  .koprand .knoppen { width: 100%; flex-wrap: wrap; }
  .koprand .knoppen button { flex: 1 1 auto; }

  main#scherm { padding: 0 12px 16px; }
  .kaart-kop { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kaart-lijf { padding: 16px 14px; }
  .rij, .rij-2 { grid-template-columns: 1fr; }
  .hero { padding: 20px 18px; }
  .hero h2 { font-size: 21px; }

  /* Tabellen mogen zijwaarts schuiven in plaats van de pagina op te rekken. */
  .kaart-lijf table { min-width: 560px; }
  .kaart-lijf { overflow-x: auto; }

  .overlay { padding: 0; place-items: stretch; }
  .dialoog {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .dialoog .kop { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
  .dialoog .lijf { padding: 16px; flex: 1; overflow: auto; }
  .dialoog .voet { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .dialoog .voet button { flex: 1 1 auto; }

  /* Invoervelden op 16px, anders zoomt Safari bij het aantikken in. */
  input, select, textarea { font-size: 16px; }
  #o-kaart { height: 320px !important; }
  .versiebalk { bottom: 78px; }
}

/* Vanaf het beginscherm gestart: de app krijgt het hele scherm. */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
}

/* ------------------------------------------------- telefoonblok bij instellingen */
.netwerkblok { margin: 10px 0 4px; }
.netwerk { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.netwerk-qr { flex: 0 0 auto; background: #fff; padding: 8px; border: 1px solid var(--lijn); border-radius: 10px; }
.netwerk-qr svg { display: block; width: 180px; height: 180px; }
.netwerk ol { margin: 8px 0 10px; padding-left: 20px; line-height: 1.7; }
.netwerk code { background: #f1f2f5; padding: 2px 6px; border-radius: 5px; font-size: 13px; }

/* ----------------------------------------------------------- aanmeldpagina */
body.aanmeldpagina { display: grid; place-items: center; min-height: 100dvh; background: var(--donker); padding: 24px; }
.aanmeldkaart {
  background: var(--wit);
  border-radius: 16px;
  padding: 28px 26px 24px;
  width: min(380px, 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.aanmeldkaart img { width: 200px; display: block; margin: 0 auto 18px; }
.aanmeldkaart h1 { margin: 0 0 6px; font-size: 20px; text-align: center; }
.aanmeldkaart p { margin: 0 0 18px; color: var(--grijs); font-size: 13.5px; text-align: center; line-height: 1.6; }
.aanmeldkaart button { width: 100%; margin-top: 6px; }
.aanmeldkaart .fout { color: var(--rood); font-size: 13px; min-height: 18px; margin-top: 6px; }
.aanmeldkaart .hint { margin-top: 14px; text-align: center; }