/* ============================================================================================
   mobiel.css : telefoonbediening en leesbare keuzelijsten, centraal en overal (8 oktober 2026)
   Oplevercriteria uit docs/OPERATIONELE-BASIS.md: tikgebieden van minstens 44 bij 44 pixels, invoer van minstens 16 pixels, geen horizontaal schuiven van de pagina, en keuzelijsten (de
   geselecteerde waarde en de geopende opties) met duidelijke kleur, selectie en focus in het lichte en het donkere thema. Dit bestand komt na alle andere opmaak en vervangt geen schermspecifieke opmaak.
   ============================================================================================ */
:root{color-scheme:light;--muted:#566b72}  /* de grijs van bijschriften en knoppen haalt 4,5 op wit; was #7d8f95 met 3,4 */
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--muted:#a9bbc0;--crit:#ff8a80}
  .agweek.aan,.wkijk .btn.primary,button.agweek.aan{color:#0e1a1d !important}}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* de keuzelijsten, op elke breedte: leesbare kleur, een duidelijke selectie en focus, en lange namen die herkenbaar blijven */
select,.zkveld{color:var(--ink,inherit);background-color:var(--surface-1,Canvas)}
select option,select optgroup{background:var(--surface-1,Canvas);color:var(--ink,CanvasText)}
select:disabled,.zkveld:disabled{color:var(--ink-2,GrayText);opacity:1;background-color:color-mix(in srgb,var(--surface-1,Canvas) 85%,var(--muted,gray))}
select:focus-visible,.zkveld:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--s1,#1f6f5c);outline-offset:2px}
.zkveld::placeholder,input::placeholder,textarea::placeholder{color:var(--ink-2,#5a6560);opacity:1}
.zklijst{width:max-content;min-width:100%;max-width:min(560px,92vw);color:var(--ink,CanvasText);background:var(--surface-1,Canvas);border-color:var(--ink-2,#5a6560)}
.zkrij{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3;color:var(--ink,CanvasText)}
.zkrij:hover,.zkrij.aan{background:color-mix(in srgb,var(--s1,#1f6f5c) 22%,var(--surface-1,Canvas));color:var(--ink,CanvasText)}
.zkrij.nu{font-weight:700;box-shadow:inset 3px 0 0 var(--s1,#1f6f5c)}
.zkgroep,.zkleeg{color:var(--ink-2,#5a6560)}
.zkvol{display:block;font-size:var(--nx-tekst);line-height:1.3;color:var(--ink-2,#5a6560);margin-top:2px;overflow-wrap:anywhere}
/* knoppen met te weinig contrast */
.wrap .btn:not(.primary):not(.crit),.wrap .kbtn:not(.primary){color:var(--ink,CanvasText)}
.btn.primary,.kbtn.primary{color:var(--knop-ink,#fff)}

.mob-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

@media (max-width:900px),(pointer:coarse){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .wrap{overflow-x:clip}
  /* ruime tikgebieden */
  button,.btn,.kbtn,a.btn,summary,[role=button],select:not(.zkecht),textarea,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.kopicoon{min-height:44px !important}
  button,.btn,.kbtn,a.btn,.kopicoon,input[type=color]{min-width:44px !important}
  td a,th a,li a,a.bordbon,.fiche-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;padding:0 6px}
  p a,.small a,.kmini a,.muted a,.wrap a:not([class]){display:inline-block;padding:13px 4px;margin:-13px 0}
  .kbtn.mini,.btn.klein{padding:8px 12px}
  input[type=checkbox],input[type=radio]{width:24px !important;height:24px !important;min-width:24px;margin:10px}
  label.kkitem,label.afrij{min-height:44px;display:flex;align-items:center;gap:8px}
  /* invoer van minstens 16 pixels, anders zoomt iOS in en schuift de pagina */
  input,select,textarea,.zkveld{font-size:var(--nx-tekst) !important}
  .zkrij{font-size:var(--nx-tekst);min-height:44px;display:flex;align-items:center;padding:10px 12px}
  .zkgroep{font-size:var(--nx-tekst);padding:10px 12px 4px}
  .zklijst{max-width:calc(100vw - 16px)}
  .zkbox,.zkveld{max-width:100%}
  /* niets mag de pagina breder duwen */
  img,video,canvas,svg,iframe{max-width:100%}
  pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
  .rij,.krij,.afvorm,.afraster,.fieldgrid{flex-wrap:wrap}
  .rij>*,.krij>*{min-width:0}
  h1,h2,h3,h4,p,label,.pill,.badge{overflow-wrap:anywhere}
  td input:not([type=checkbox]):not([type=radio]):not([type=color]),td select,td textarea{min-width:140px}
  /* dialoogvensters passen in het zichtbare scherm en schuiven binnenin */
  dialog,.nx-dialog,#kvenster .kkaart,.apkaart{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto}
  #kvenster .kkaart{width:calc(100vw - 16px)}
  .apmodal{padding:8px}
  .kpblok>summary{padding:12px}
  /* de navigatie: grote tikknoppen en schuiven binnen de eigen rij */
  header .takkies,header .tabs{display:flex;flex-wrap:wrap;gap:6px}
  header .takkies button,header .tabs button{min-height:44px}
}
@media (max-width:480px){
  .nx .panel{padding:10px}
  .panel-head{flex-wrap:wrap;gap:8px}
}

/* ---------- het donkere thema voor de schermen van de herbouw (`.nx`, ontwerp.css) ----------
   ontwerp.css schrijft wit en donkergroen hard; in het donker gaf dat witte vlakken met lichte tekst en omgekeerd. Hier krijgen ze dezelfde variabelen als de rest van het platform. */
@media(prefers-color-scheme:dark){
  .nx{--nx-brand:#8fd3a0;--nx-bg:#0e1a1d;--nx-paper:#16262a;--nx-text:#f2f4f3;--nx-muted:#b8c6ca;--nx-line:#40606a;--nx-ok:#5fd07a;--nx-okbg:#16281f;--nx-warn:#fab219;--nx-warnbg:#2c2717;--nx-error:#ff9a90;--nx-errorbg:#2d1b19}
  .nx button,.nx .panel,.nx :is(select,input,textarea),.nxb-balk button,.nxb-acties button,dialog.nx-dialog,dialog.nx-dialog button,.nx .stapel tr{background:var(--nx-paper)}
  .nx button:hover,dialog.nx-dialog .stukrij:hover{background:#20363c}
  .nx button.primary,dialog.nx-dialog button.primary{background:#8fd3a0;color:#0e1a1d;border-color:#8fd3a0}
  .nx button.primary:hover{background:#a6e0b4}
  .nx button.danger{border-color:#7a3a35}
  .nx .badge,.nx .flow-item,.nx th,.nxb-wijzig{background:#1b2c30}
  .nx .meter{background:#25393e}.nx .meter span{background:#5fd07a}
  .nx .attention{border-color:#6b5a1f}
  dialog.nx-dialog{color:var(--ink)}
  dialog.nx-dialog button{color:var(--ink);border-color:#40606a}
  dialog.nx-dialog button.primary{color:#0e1a1d}
  .nx-toast{background:#2b4a50;color:#fff}
  .nxb-balk button,.nxb-acties button{color:var(--nx-text)}
}

/* ---------- het menu op telefoon en tablet: dicht achter een knop, de kop plakt niet ---------- */
.mob-menuknop{display:none}
@media(max-width:999px){
  header{position:static !important}
  .mob-menuknop{display:flex;align-items:center;gap:8px;order:0;flex:1 1 100%;min-height:48px;padding:10px 14px;border:1px solid rgba(255,255,255,.35);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-weight:600;text-align:left;cursor:pointer}
  header>b,header>.merkwoord{order:-1}
  header:not(.mob-open) .takkies,header:not(.mob-open) .tabs{display:none}
  header .takkies,header .tabs{flex:1 1 100%}
}