/* Indeling: kaart links, paneel rechts. Telefoon: kaart over het hele scherm, lijst en zaak als bottom sheet. */
:root { --paneel: 440px; --gebouw: #efecee; --stip-rand: #767676; --blad-h: 0px; --boven: 100px; }
@media (prefers-color-scheme: dark) { :root { --gebouw: #232323; --stip-rand: #9a9a9a; } }
html, body { height: 100%; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 8px; }
.app { display: grid; grid-template-columns: minmax(0, 1fr) var(--paneel); height: 100%; }
.kaart-vak { position: relative; min-width: 0; background: var(--land); border-right: 1px solid var(--rule); }
#kaart { position: absolute; inset: 0; }
.zij { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--paper);
  padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); padding-top: env(safe-area-inset-top, 0px); }

.kop { padding-block: var(--space-4) var(--space-3); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--rule); }
.kop-tekst { min-width: 0; }
.kop-rechts { display: grid; justify-items: end; gap: var(--space-2); }
.mini { background: none; border: 0; padding: 4px 0; font: 700 12px/16px var(--sans); color: var(--ink-muted); cursor: pointer; }
.mini:hover, .mini[aria-expanded="true"] { color: var(--ink); text-decoration: underline; }
.hoofdnav { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.hoofdnav a { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-muted); text-decoration: none; padding: 4px 0; }
.hoofdnav a:hover { color: var(--ink); text-decoration: underline; }
.hoofdnav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

.account { padding-block: var(--space-3); border-bottom: 1px solid var(--rule); display: grid; gap: var(--space-3); }
.ww-form { display: grid; gap: var(--space-3); }
.knoppen { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.zoekbalk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding-block: var(--space-3) var(--space-2); }
.zoekbalk input { min-height: 44px; }
.filterknop { min-height: 44px; position: relative; }
.tal { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; background: var(--rose); color: var(--on-rose); border-radius: 10px; font-size: 12px; }

/* Chips: filters en groepen */
.chips, .groepen { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; background: var(--paper); color: var(--ink-muted);
  border: 1px solid var(--rule); border-radius: 0; font: 12px/16px var(--sans); cursor: pointer; white-space: nowrap; flex: none; }
.chip .n { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.chip[aria-pressed="true"] { color: var(--ink); font-weight: 700; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip[aria-pressed="true"] .n { color: var(--ink); }
.chip[aria-pressed="false"] .stip { opacity: .55; }
.chip.nul { opacity: .6; }
.chip:hover { border-color: var(--ink); }
.groepen { padding: var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--rule); }

.meer { border-bottom: 1px solid var(--rule); max-height: 46vh; overflow-y: auto; padding-bottom: var(--space-3); }
.meer-kop { display: none; }
.meer-inhoud { display: grid; gap: var(--space-3); padding-top: var(--space-1); }
.fgroep { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-2); }
.fgroep legend { padding: 0; font-size: 12px; line-height: 16px; font-weight: 700; margin-bottom: var(--space-2); }
.meer-voet { display: flex; gap: var(--space-2); justify-content: space-between; margin-top: var(--space-3); }
.meer-voet .knop { min-height: 44px; }
.meer-voet .knop:disabled { opacity: .45; cursor: default; text-decoration: none; }
#meer-klaar { display: none; }

.stip.cluster { background: var(--ink); box-shadow: 0 0 0 2px var(--rose); width: 12px; height: 12px; margin: 1px; }

/* Blad: op bureaublad gewoon de kolom, op telefoon de sheet */
.blad { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.blad.met-detail .groepen { display: none; }
.hendel { display: none; }
.overzicht { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.lijst-kop { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-muted); padding-block: var(--space-2); }
.lk-rechts { display: flex; align-items: center; gap: var(--space-3); }
.lk-rechts select { font: 12px/16px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 0; padding: 6px 8px; min-height: 32px; }
.lijst-vak { flex: 1; overflow-y: auto; min-height: 0; margin-right: calc(-1 * max(24px, env(safe-area-inset-right, 0px))); padding-right: max(24px, env(safe-area-inset-right, 0px)); padding-bottom: var(--space-4); overscroll-behavior: contain; }
.lijst { list-style: none; margin: 0; padding: 0; }
.rij { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline;
  width: 100%; min-height: 56px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rij .stip { align-self: center; }
.rij .naam { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rij .rv { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rij .sub { grid-column: 2 / 4; font-size: 12px; line-height: 16px; color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rij .sub .merk { color: var(--ink); font-weight: 700; }
.rij .sub .wk { color: var(--ink); font-weight: 700; }
.rij:hover .naam { text-decoration: underline; }
.leeg { padding: var(--space-4) 0; color: var(--ink-muted); list-style: none; }
.meer-rijen { width: 100%; margin-top: var(--space-3); min-height: 44px; }

/* Zaakkaartje */
.detail { flex: 1; overflow-y: auto; min-height: 0; padding-block: var(--space-3) var(--space-5); animation: in .22s cubic-bezier(.2,.7,.2,1); overscroll-behavior: contain; }
@keyframes in { from { transform: translateX(12px); opacity: .4; } to { transform: none; opacity: 1; } }
.terug { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 0; min-height: 44px; font: 700 12px/16px var(--sans); color: var(--ink); cursor: pointer; }
.terug:hover { text-decoration: underline; }
.detail h2 { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; margin: var(--space-2) 0 var(--space-1); text-wrap: balance; outline: none; }
.adres { color: var(--ink-muted); }
.groep-label { display: flex; margin-bottom: var(--space-1); align-items: center; gap: 8px; font-size: 12px; font-weight: 700; margin-top: var(--space-1); }
.groep-label .code { color: var(--ink-muted); font-weight: 400; }
.groep-label.klant { color: var(--rose); }
.waarom { margin: var(--space-3) 0 0; font-size: 16px; line-height: 22px; text-wrap: pretty; }
.citaat { margin: var(--space-3) 0 0; padding: var(--space-3); background: var(--gebouw); }
.citaat cite { display: block; margin-top: var(--space-2); font-style: normal; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.acties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }
.acties > :first-child:not(:nth-last-child(2)) { grid-column: 1 / -1; }
.acties > * { min-width: 0; text-align: center; }
.knop.groot { min-height: 48px; font-size: 14px; line-height: 20px; }
.knop.uit { border-color: var(--rule); color: var(--ink-muted); cursor: default; }
.knop.uit:hover { text-decoration: none; }
.knop:disabled { cursor: default; }
.feiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.feiten div { padding: 10px 0; min-width: 0; }
.feiten dt { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.feiten dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.blok { margin-top: var(--space-4); }
.blok h3 { font-size: 12px; line-height: 16px; font-weight: 700; margin: 0 0 var(--space-2); }
.blok p { margin: 0; }
.merken { display: grid; gap: 6px; margin: 0; }
.merkrij { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--space-2); }
.merken dt { font-size: 12px; color: var(--ink-muted); }
.merken dd { margin: 0; overflow-wrap: anywhere; }
.merken dd.sterk { font-weight: 700; }
.bewijs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.bewijs li { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.bewijs b { color: var(--ink); }
.bewijs a, .citaat a { word-break: break-all; }
.los { font-weight: 700; display: inline-block; padding: 8px 0; }
.uren { font-size: 12px; line-height: 18px; color: var(--ink-muted); margin: 0; padding: 0; list-style: none; }
.uren .vandaag { color: var(--ink); font-weight: 700; }

/* Legenda en kaart */
.legenda { position: absolute; left: 12px; bottom: max(28px, env(safe-area-inset-bottom, 0px)); z-index: 2;
  background: var(--paper); border: 1px solid var(--rule); font-size: 12px; line-height: 16px; max-width: 250px; }
.legenda summary { cursor: pointer; padding: 10px 12px; font-weight: 700; list-style: none; min-height: 36px; }
.legenda summary::-webkit-details-marker { display: none; }
.legenda summary::after { content: " +"; color: var(--ink-muted); }
.legenda[open] summary::after { content: " −"; }
.leg-rijen { display: grid; gap: 6px; padding: 0 12px 10px; }
.legenda .r { display: flex; align-items: center; gap: 8px; }
.maat { display: flex; align-items: center; gap: 4px; }
.maat i { display: inline-block; border-radius: 50%; background: var(--ink); }

/* MapLibre in huisstijl */
.maplibregl-ctrl-group { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--rule); background: var(--paper) !important; }
.maplibregl-ctrl-group button { background-color: var(--paper) !important; width: 36px; height: 36px; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--rule) !important; }
@media (prefers-color-scheme: dark) { .maplibregl-ctrl-icon { filter: invert(1); } }
.maplibregl-ctrl-attrib { background: var(--paper) !important; color: var(--ink-muted); font-size: 10px; }
.maplibregl-ctrl-attrib a { color: var(--ink-muted) !important; }
.maplibregl-popup.naamkaartje .maplibregl-popup-content { background: var(--ink); color: var(--paper); border-radius: 0; padding: 4px 8px; font: 700 12px/16px var(--sans); box-shadow: none; }
.maplibregl-popup.naamkaartje .maplibregl-popup-tip { display: none; }
.maplibregl-popup.naamkaartje .sub { font-weight: 400; opacity: .75; }

/* Telefoon */
@media (max-width: 820px) {
  html, body { overflow: hidden; }
  .app { display: block; height: 100%; }
  .kaart-vak { position: fixed; inset: 0; border: 0; }
  .zij { display: contents; }
  .kop { position: fixed; z-index: 5; top: 0; left: 0; right: 0; height: 44px; padding: env(safe-area-inset-top, 0) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    background: var(--paper); align-items: center; gap: var(--space-2); box-sizing: content-box; }
  .kop-tekst { display: flex; align-items: center; gap: var(--space-3); }
  .kop .kicker { display: none; }
  h1 { font-size: 16px; line-height: 20px; margin: 0; }
  .hoofdnav { margin: 0; }
  .hoofdnav a { padding: 12px 0; }
  .kop-rechts { display: flex; align-items: center; gap: var(--space-3); }
  .logo { width: 48px; }
  .mini { padding: 12px 0; }
  .account { position: fixed; z-index: 7; top: calc(44px + env(safe-area-inset-top, 0px)); left: 0; right: 0; padding: var(--space-3) 16px; background: var(--paper); border-bottom: 1px solid var(--rule); }
  .zoekbalk { position: fixed; z-index: 5; top: calc(44px + env(safe-area-inset-top, 0px)); left: 0; right: 0; padding: 6px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: var(--paper); border-bottom: 1px solid var(--rule); }
  .kaart-vak .maplibregl-ctrl-top-right { top: calc(112px + env(safe-area-inset-top, 0px)); }
  .kaart-vak .maplibregl-ctrl-bottom-right, .kaart-vak .maplibregl-ctrl-bottom-left { bottom: var(--blad-h); transition: bottom .25s; }
  .legenda { top: calc(112px + env(safe-area-inset-top, 0px)); bottom: auto; left: max(8px, env(safe-area-inset-left, 0px)); max-width: 220px; }
  .chip { min-height: 44px; padding: 8px 12px; font-size: 14px; line-height: 20px; }

  .blad { position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; height: 150px; background: var(--paper); border-top: 1px solid var(--ink);
    padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom, 0) max(16px, env(safe-area-inset-left)); transition: height .25s cubic-bezier(.2,.7,.2,1); }
  .blad[data-stand="half"] { height: 52svh; }
  .blad[data-stand="vol"] { height: calc(100svh - 110px); }
  .blad.sleept { transition: none; }
  .hendel { display: block; width: 100%; height: 28px; padding: 0; background: none; border: 0; cursor: grab; touch-action: none; flex: none; }
  .hendel span { display: block; width: 44px; height: 4px; margin: 12px auto 0; background: var(--ink-muted); }
  .groepen { flex-wrap: nowrap; overflow-x: auto; padding-block: var(--space-1) var(--space-2); margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; flex: none; border-bottom: 0; }
  .groepen::-webkit-scrollbar { display: none; }
  .lijst-vak, .detail { margin-right: 0; padding-right: 0; }
  .lijst-vak { margin-right: -16px; padding-right: 16px; }
  .blad[data-stand="peek"] .lijst-vak, .blad[data-stand="peek"] .detail { overflow: hidden; }
  .feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail h2 { font-size: 24px; line-height: 28px; }

  .meer { position: fixed; z-index: 9; inset: 0; max-height: none; background: var(--paper); padding: env(safe-area-inset-top, 0) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    display: flex; flex-direction: column; overflow: hidden; border: 0; }
  .meer[hidden] { display: none; }
  .meer-kop { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-3); border-bottom: 1px solid var(--rule); }
  .meer-kop h2 { margin: 0; font-size: 20px; line-height: 24px; }
  .meer-inhoud { flex: 1; overflow-y: auto; padding-block: var(--space-3); }
  .meer-voet { padding-block: var(--space-3) max(var(--space-3), env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); margin: 0; }
  #meer-klaar { display: inline-flex; flex: 1; }
  .filters-open .kop, .filters-open .zoekbalk { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .detail { animation: none; } .blad { transition: none; } .kaart-vak .maplibregl-ctrl-bottom-right { transition: none; } }

.hints { margin-top: var(--space-3); display: grid; gap: 6px; }
.hint { margin: 0; font-size: 12px; line-height: 16px; }
.hint.job { font-size: 14px; line-height: 20px; font-weight: 700; padding: 8px 12px; background: var(--ink); color: var(--paper); }
.hint.oud { color: var(--ink-muted); }

.stip.ring { background: none; box-shadow: inset 0 0 0 2px var(--ink); width: 14px; height: 14px; }
.inplan { margin: 0 0 var(--space-3); padding: 10px 12px; border: 1px solid var(--ink); font-size: 12px; line-height: 16px; }

/* Telefoon: de balk is smal; vier menu-items en Account, zonder titel en logo */
@media (max-width: 820px) {
  .kop { justify-content: space-between; }
  .kop h1, .kop .logo { display: none; }
  .hoofdnav { gap: 14px; }
  .hoofdnav a { white-space: nowrap; }
}

.stip.eerder { background: none; box-shadow: inset 0 0 0 2px var(--rose); width: 14px; height: 14px; }
.stip.vlak { background: rgba(192, 57, 107, .15); box-shadow: inset 0 0 0 1.5px var(--rose); border-radius: 4px; width: 14px; height: 14px; }
.leg-dek[aria-pressed="false"] { opacity: .45; }

.stip.ring-ander { background: none; box-shadow: inset 0 0 0 2px var(--ander); width: 14px; height: 14px; }
.rij .sub .wk.ander { color: var(--ander); }