/* Huisstijl Gastouder 't Dasje: turquoise ballon (#0093b4) en antraciet dasje (#313131). */
:root { --bg:#f3f8fa; --card:#fff; --ink:#313131; --muted:#667177; --accent:#0093b4; --accent-d:#007892; --accent-soft:#e1f2f6; --line:#d9e5ea; --ok:#2f8f5b; --err:#c0392b; }
@media (prefers-color-scheme: dark) { :root { --bg:#101b1f; --card:#18272d; --ink:#eef3f5; --muted:#9fb0b7; --accent:#22b3d3; --accent-d:#0093b4; --accent-soft:#17353d; --line:#2b4047; } }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--ink); }
header.top { background:var(--card); border-bottom:3px solid var(--accent); }
header.top .in { max-width:960px; margin:0 auto; padding:.5rem 1rem; display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; }
header.top .brand { margin-right:auto; display:flex; align-items:center; }
.logo { background:#fff; border-radius:10px; padding:3px 6px; display:block; }
header.top .logo { height:96px; width:auto; }
header.top .btn { padding:.3rem .9rem; font-size:.9rem; }
header.top a:not(.brand) { color:var(--ink); text-decoration:none; padding:.3rem .65rem; border-radius:99px; font-weight:500; }
header.top a:not(.brand):hover { background:var(--accent-soft); }
header.top a.active { background:var(--accent); color:#fff; }
main { max-width:960px; margin:0 auto; padding:1.5rem 1rem 4rem; }
h1 { margin:.2rem 0 1rem; font-size:1.7rem; color:var(--accent); }
h2 { color:var(--ink); }
a { color:var(--accent-d); }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1rem; margin-bottom:1rem; box-shadow:0 1px 2px rgba(0,60,80,.05); }
.row { display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; }
label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:.15rem; }
input, select, textarea { font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:.45rem .6rem; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
input[type=checkbox] { width:auto; accent-color:var(--accent); }
.btn { font:inherit; font-weight:500; background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:99px; padding:.45rem 1.1rem; cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover { background:var(--accent-d); border-color:var(--accent-d); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.ghost { background:transparent; color:var(--accent-d); border:1px solid var(--accent); }
.btn.ghost:hover { background:var(--accent-soft); }
.btn.danger { background:transparent; color:var(--err); border:1px solid var(--err); }
@media (prefers-color-scheme: dark) { .btn.ghost { color:var(--accent); } a { color:var(--accent); } }
.muted { color:var(--muted); font-size:.9rem; }
.badge { font-size:.75rem; padding:.1rem .6rem; border-radius:99px; background:var(--accent-soft); border:1px solid var(--line); color:var(--muted); }
.badge.ok { color:var(--ok); border-color:var(--ok); background:transparent; }
.badge.warn { color:#9a5b00; border-color:#d98a00; background:#fff4de; font-weight:600; }
.flash { background:var(--accent-soft); border:1px solid var(--accent); border-radius:10px; padding:.6rem 1rem; margin-bottom:1rem; }
.error { color:var(--err); font-size:.85rem; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.5rem; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; font-size:.85rem; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.nowrap { white-space:nowrap; }
.plus { color:var(--ok); } .minus { color:var(--err); }
.daynav { display:flex; gap:.5rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.grid-days { display:grid; grid-template-columns:8rem 1fr; gap:.4rem .75rem; align-items:center; }
.grid-days .times { display:flex; gap:.5rem; }
summary { cursor:pointer; }
.login { max-width:380px; margin:2rem auto; text-align:center; }
.login .logo { width:240px; max-width:70%; margin:0 auto 1rem; padding:8px; }
.login form { text-align:left; }

/* --- iPhone en iPad ------------------------------------------------------------------------- */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
a, button, input, select, textarea, summary, label { touch-action:manipulation; }
body { -webkit-tap-highlight-color:transparent; padding-bottom:env(safe-area-inset-bottom); }

/* Veilige marges: in landscape op een iPhone met inkeping of een iPad in een webapp. */
header.top .in, main { padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); }

header.top .menu { display:flex; flex-wrap:wrap; gap:.25rem; align-items:center; }
header.top .logout { margin:0; }

/* Brede tabellen schuiven binnen hun kaart, de pagina zelf wordt nooit breder dan het scherm. */
.card { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.card > table, .card > form > table { min-width:34rem; }
.card table th, .card table td { vertical-align:top; }

/* Aanraakschermen: grotere doelen (minimaal 44 punten) en geen inzoomen bij het typen (16px of groter). */
@media (pointer: coarse) {
  .btn, input:not([type=checkbox]):not([type=radio]), select, textarea { min-height:44px; }
  header.top a:not(.brand) { padding:.65rem .95rem; }
  input[type=checkbox], input[type=radio] { width:1.4rem; height:1.4rem; }
  label { font-size:.9rem; }
  select { padding-right:1.6rem; }
}

/* Telefoon */
@media (max-width: 700px) {
  header.top .in { gap:.25rem .5rem; padding-top:.35rem; padding-bottom:0; }
  header.top .brand { flex:1; }
  header.top .logo { height:56px; }
  header.top .logout { order:2; }
  header.top .who { display:none; }
  /* Het menu als één regel die je zijwaarts veegt, onder het logo. */
  header.top .menu { order:3; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:.35rem; margin-left:calc(-1 * max(1rem, env(safe-area-inset-left))); margin-right:calc(-1 * max(1rem, env(safe-area-inset-right))); padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); }
  header.top .menu::-webkit-scrollbar { display:none; }
  main { padding-top:1rem; }
  h1 { font-size:1.45rem; }
  .row { gap:.6rem; }
  .row > form, .row > div { max-width:100%; }
  .daynav .btn, .daynav select, .daynav input { flex:0 0 auto; }
}

/* iPad (staand en liggend): iets meer ruimte voor de inhoud. */
@media (min-width: 768px) and (max-width: 1100px) {
  header.top .in, main { max-width:1040px; }
}
/* Telefoon: kolommen die minder belangrijk zijn verdwijnen, de rest past zonder zijwaarts vegen. */
@media (max-width: 700px) {
  .hide-sm { display:none; }
  .card > table.compact { min-width:0; }
  .card table.compact th, .card table.compact td { padding:.5rem .35rem; }
  /* Velden in een formulier gebruiken de volle breedte. */
  .row > p { flex:1 1 12rem; margin:.4rem 0; }
  input[type=text], input[type=email], input[type=password], input[type=tel], input:not([type]), textarea { width:100%; }
}

.only-sm { display:none; }
@media (max-width: 700px) {
  .only-sm { display:inline; }
  div.only-sm { display:block; }
}

.btn.icon { min-width:44px; text-align:center; }
@media (max-width: 700px) {
  .btn.icon { padding:.45rem .55rem; }
  .card { padding:.75rem; }
  .card table.compact th, .card table.compact td { padding:.5rem .3rem; }
}

a.rowlink { color:inherit; font-weight:600; text-decoration:none; }
a.rowlink:hover { text-decoration:underline; }

@media (max-width: 700px) {
  .card table.compact { font-size:.92rem; }
  .card table.compact th { font-size:.78rem; }
}

/* iPad staand en kleine laptops: tabellen iets compacter, zodat alle kolommen in beeld blijven. */
@media (max-width: 900px) {
  .card > table.compact { min-width:0; }
  .card table.compact th, .card table.compact td { padding:.5rem .4rem; }
  .card table.compact td .btn { padding:.3rem .8rem; font-size:.9rem; }
}
@media (max-width: 900px) {
  .card table.compact { font-size:.92rem; }
}
@media (max-width: 900px) { .hide-md { display:none; } }

/* Bijlage: camera en bestand kiezen. */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.visually-hidden:focus-visible + *, label:has(+ .visually-hidden:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.camera-only { display:none; }
@media (pointer: coarse) { label.camera-only { display:inline-block; } p.camera-only { display:block; } }

/* Een veld dat de beschikbare ruimte mag opvullen en op een telefoon op een eigen regel komt. */
.row > p.grow { flex:2 1 14rem; }
.back { display:inline-block; margin:.1rem 0 .3rem; padding:.35rem .6rem .35rem 0; font-size:.95rem; color:var(--muted); text-decoration:none; }
.back:hover { color:var(--accent); }