:root {
    --ink:#1C2333; --paper:#FDF6EC; --accent:#CC0000; --good:#3F7355;
    --bad:#B0463A; --warn:#C8932E; --border:#DDD0B8; --surface2:#F5EDD8;
    --kv-red:#CC0000; --kv-yellow:#F7C200;
    --surface:#fff; --muted:#6B6558; --label-muted:#5C5648;
  }
  /* Volgt automatisch de systeeminstelling van het toestel — geen aparte schakelaar.
     Alleen de structurele kleuren (achtergrond/kaarten/tekst) reageren hierop; kleine
     accentkleuren (statuslabels, badges) blijven bewust ongewijzigd. */
  @media (prefers-color-scheme: dark) {
    :root {
      --ink:#E8E3D6; --paper:#14171A; --surface:#1E222C; --surface2:#262B37;
      --border:#3A3F4C; --muted:#9099A8; --label-muted:#7C8494;
      --accent:#FF6B5E; --good:#5FB37F; --bad:#E2857A; --warn:#E5B45C;
      --kv-red:#FF6B5E;
    }
  }
  html { color-scheme: light dark; }
  /* Hoog contrast — handmatige schakelaar (opgeslagen op dit toestel), overschrijft
     bewust zowel het lichte als het automatische donkere thema zodra actief. */
  html.hoog-contrast {
    --ink:#000000; --paper:#FFFFFF; --surface:#FFFFFF; --surface2:#FFFFFF;
    --border:#000000; --muted:#000000; --label-muted:#000000;
    --accent:#B00000; --good:#0A6B0A; --bad:#B00000; --warn:#7A5A00;
    color-scheme: light;
  }
  html.hoog-contrast .card, html.hoog-contrast .banner, html.hoog-contrast .pill { border-width:2px !important; }
  /* Dyslexie-vriendelijk lettertype — meer letter-/woordafstand, breder lettertype.
     .mono-elementen (datums/tijden) behouden hun monospace-uitlijning. */
  body.dyslexie-lettertype, body.dyslexie-lettertype input, body.dyslexie-lettertype textarea,
  body.dyslexie-lettertype select, body.dyslexie-lettertype button {
    font-family: Verdana, Tahoma, "Trebuchet MS", sans-serif;
    letter-spacing: 0.02em;
    line-height: 1.6;
  }
  body.dyslexie-lettertype .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:normal; }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--paper); color:var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .container { max-width: 880px; margin: 0 auto; padding: 0 16px; }
  a { color: inherit; }
  .app-header { background: var(--paper); border-bottom: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
  .app-header::before { content:''; display:block; height:5px; background: var(--kv-yellow); }
  .app-header-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 0; flex-wrap: wrap; }
  @media (max-width: 480px) {
    .app-header-top { flex-wrap: nowrap; gap:8px; }
    .app-header-top > div:first-child { min-width:0; overflow:hidden; gap:8px !important; }
    .app-header-top > div:first-child img { height:30px; flex-shrink:0; }
    .brand { font-size:13px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    .brand span { display:none; }
    .header-right { gap:4px; flex-shrink:0; }
    .header-user .naam { font-size:11.5px; max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .header-user .pill { display:none; }
    .icon-btn { padding:6px; font-size:14px; }
  }
  .brand { color: var(--kv-red); text-transform: uppercase; letter-spacing: 0.04em; font-size: 17px; font-weight:800; }
  .brand span { color: #666; font-size:11px; font-weight:500; letter-spacing:0.08em; display:block; margin-top:1px; }
  .header-right { display:flex; align-items:center; gap:10px; }
  .header-user { text-align:right; }
  .header-user .naam { color:var(--ink); font-size: 13px; font-weight:600; }
  .icon-btn { background:none; border:none; color:#666; padding:8px; border-radius:6px; cursor:pointer; font-size:16px; line-height:1; }
  .icon-btn:hover { color: var(--kv-red); background:#F0EBE0; }
  .icon-btn-light { background:none; border:none; color:#fff; padding:8px; border-radius:6px; cursor:pointer; font-size:18px; line-height:1; font-weight:700; }
  .icon-btn-light:hover { background:rgba(255,255,255,0.15); }
  .tabs { display:flex; gap:4px; overflow-x:auto; padding-bottom:4px; }
  .tab-btn { background:none; border:none; border-bottom:3px solid transparent; color:#666; padding:9px 12px; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; border-top: 1px solid #DDD0B8; }
  .tab-btn.active { color: var(--kv-red); border-color: var(--kv-red); font-weight:700; }
  main.container { padding: 24px 16px 48px; display:flex; flex-direction:column; gap:16px; }
  .card { background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); padding:16px; }
  .label { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--label-muted); font-family: ui-monospace, monospace; }
  .input, textarea.input, select.input { width:100%; margin-top:4px; border:1px solid var(--border); border-radius:6px; padding:8px 10px; font-size:14px; font-family:inherit; background:var(--surface); color:var(--ink); }
  .row { display:flex; flex-wrap:wrap; gap:12px; align-items: flex-end; }
  .btn { border:none; border-radius:6px; padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
  .btn:disabled { opacity:0.45; cursor:default; }
  .btn-primary { background: var(--accent); color:#fff; }
  .btn-good { background: var(--good); color:#fff; }
  .btn-bad { background: var(--bad); color:#fff; }
  .btn-outline { background:var(--surface); border:1px solid var(--border); color: var(--ink); }
  .btn-outline-bad { background:var(--surface); border:1px solid var(--bad); color: var(--bad); }
  .btn-sm { padding:5px 10px; font-size:12px; }
  .btn-block { width:100%; justify-content:center; }
  .muted { color:var(--muted); }
  .err-box { display:flex; gap:8px; font-size:13px; color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, white); border-radius:6px; padding:8px 10px; }
  .banner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-radius:8px; padding:12px 16px; font-size:14px; }
  .banner-warn { background: color-mix(in srgb, var(--warn) 14%, white); border:1px solid color-mix(in srgb, var(--warn) 40%, white); color:#7A5A1E; }
  .pill { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; font-family: ui-monospace, monospace; }
  .pill-warn { color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, white); border:1px solid color-mix(in srgb, var(--warn) 40%, white); }
  .pill-good { color:var(--good); background:color-mix(in srgb, var(--good) 12%, white); border:1px solid color-mix(in srgb, var(--good) 40%, white); }
  .pill-bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, white); border:1px solid color-mix(in srgb, var(--bad) 40%, white); }
  .pill-accent { color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, white); border:1px solid color-mix(in srgb, var(--accent) 30%, white); }
  .pill-grey { color:#6B7280; background:#6B728014; border:1px solid #6B728040; }
  .auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; background: var(--paper); }
  .auth-box { width:100%; max-width:380px; }
  .auth-banner { background: var(--kv-red); border-radius:10px; padding:18px 20px; margin-bottom:16px; text-align:center; }
  .auth-banner .small { color:rgba(255,255,255,0.78); font-family: ui-monospace, monospace; text-transform:uppercase; letter-spacing:0.15em; font-size:11px; }
  .auth-banner .big { color:#fff; font-family: ui-monospace, monospace; text-transform:uppercase; letter-spacing:0.1em; font-size:22px; margin-top:4px; font-weight:800; }
  .auth-toggle { display:flex; gap:4px; padding:4px; background: var(--surface2); border-radius:8px; margin-bottom:18px; }
  .auth-toggle button { flex:1; border:none; background:none; padding:7px; border-radius:6px; font-size:14px; font-weight:500; color:#888; cursor:pointer; }
  .auth-toggle button.active { background:var(--surface); color: var(--kv-red); box-shadow:0 1px 2px rgba(0,0,0,0.06); font-weight:700; }
  .field { margin-bottom: 10px; min-width:0; }
  /* iOS geeft native datumvelden een vaste minimumbreedte die CSS niet kan
     overschrijven — twee ervan naast elkaar passen dan niet en overlappen.
     Op smalle schermen (telefoon) laten we veldparen daarom onder elkaar
     staan i.p.v. naast elkaar. Raakt alleen .field-rijen, geen knoppenrijen. */
  @media (max-width: 480px) {
    .row .field { flex-basis: 100%; }
  }
  .day-block { border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:8px; }
  .day-block-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
  .day-name { font-weight:600; font-size:14px; }
  .day-hours { font-size:11px; color:var(--muted); font-family: ui-monospace, monospace; }
  .block-row { display:flex; align-items:center; gap:6px; margin-top:6px; }
  .block-row input[type=time] { border:1px solid var(--border); border-radius:6px; padding:5px 6px; font-size:13px; width:108px; }
  .block-remove { background:none; border:none; color:var(--bad); cursor:pointer; font-size:14px; padding:4px; }
  .chip-row { display:flex; flex-wrap:wrap; gap:6px; }
  .chip { font-size:12px; border-radius:6px; padding:4px 8px; background: var(--surface2); font-family: ui-monospace, monospace; }
  .pill-btn { border:none; border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:600; cursor:pointer; }
  .pill-btn-good { background: color-mix(in srgb, var(--good) 14%, white); color: var(--good); border:1px solid color-mix(in srgb, var(--good) 35%, white); }
  .pill-btn-neutral { background: #F0EBE0; color:#6b6558; border:1px solid var(--border); }
  .chip-empty { font-size:12px; color:var(--muted); }
  .req-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .req-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .req-when { font-size:11px; color:var(--muted); margin-top:4px; }
  .req-body { margin-top:10px; font-size:14px; display:flex; flex-direction:column; gap:8px; }
  .reject-box { background: color-mix(in srgb, var(--bad) 10%, white); border:1px solid color-mix(in srgb, var(--bad) 30%, white); border-radius:6px; padding:8px 10px; }
  .reject-box .t { font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--bad); font-family: ui-monospace, monospace; }
  .emp-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 0; border-top:1px solid #EFEAE0; }
  .emp-row:first-child { border-top:none; }
  .avatar { width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; flex-shrink:0; }
  .toast { position:fixed; bottom:16px; right:16px; z-index:50; color:#fff; border-radius:8px; padding:12px 16px; font-size:14px; font-weight:500; max-width:320px; box-shadow:0 4px 12px rgba(0,0,0,0.2); }
  .spin { display:inline-block; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .center-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; color:var(--muted); gap:8px; }

  /* Type-tabs (verlof/structureel/extra) in het aanvraagformulier: drie kaarten
     naast elkaar, elk met naam + korte uitleg. Actieve kaart kleurt in de vaste
     kleur van dat type (rood=verlof, blauw=structureel, groen=extra), los van de
     status-kleuren (goedgekeurd/afgewezen) die elders al bestaan. */
  .type-tabs { display:flex; gap:6px; margin-bottom:16px; }
  .type-tab { flex:1; border:1.5px solid var(--border); border-radius:8px; padding:9px 6px; text-align:center; background:var(--surface); font-family:inherit; cursor:pointer; }
  .type-tab-t { font-weight:700; font-size:12.5px; color:var(--ink); }
  .type-tab-d { font-size:10px; color:var(--muted); margin-top:3px; line-height:1.25; }
  .type-tab.active.verlof { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, var(--surface)); }
  .type-tab.active.verlof .type-tab-t { color:var(--bad); }
  .type-tab.active.structureel { border-color:#2C4A6E; background:color-mix(in srgb, #2C4A6E 8%, var(--surface)); }
  .type-tab.active.structureel .type-tab-t { color:#2C4A6E; }
  .type-tab.active.extra { border-color:var(--good); background:color-mix(in srgb, var(--good) 8%, var(--surface)); }
  .type-tab.active.extra .type-tab-t { color:var(--good); }

  /* Inklapbare dagenlijst (verlof/extra/structureel invullen): elke dag/datum
     staat als eigen "knop"-vak (lichte achtergrond + rand), met een kleine
     onderstreepte hint eronder zodat duidelijk is dat er iets te openen valt.
     Geopende dag wordt wit met accentkleur-rand en de editor klapt eronder open. */
  .day-list { padding:4px 0; }
  .day-row-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 12px; margin:8px 0; background:var(--surface2); border:1px solid var(--border); border-radius:8px; cursor:pointer; }
  .day-row-left { display:flex; flex-direction:column; gap:1px; }
  .day-row-name { font-weight:700; font-size:13.5px; }
  .day-row-hint { font-size:10px; color:var(--accent); text-decoration:underline; }
  .day-row-summary { flex:1; font-size:13px; color:var(--ink); font-family:ui-monospace, monospace; margin:0 4px; text-align:right; }
  .day-row-summary.leeg { color:var(--muted); font-family:inherit; }
  .day-row-chev { width:24px; height:24px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--muted); flex-shrink:0; transition:transform .15s ease; }
  .day-row-head.open { background:var(--surface); border-color:var(--accent); border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; }
  .day-row-head.open .day-row-chev { color:var(--accent); border-color:var(--accent); transform:rotate(180deg); }
  .day-row-body { border:1px solid var(--border); border-top:none; border-radius:0 0 8px 8px; padding:12px 12px 14px; margin-bottom:8px; }
  .day-row-oh { font-size:11px; color:var(--muted); font-family:ui-monospace, monospace; margin-bottom:8px; }
  .day-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
  .btn-pill { border:1px solid var(--border); background:var(--surface2); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--ink); cursor:pointer; }
  .btn-pill-primary { border-color:var(--good); color:var(--good); background:color-mix(in srgb, var(--good) 8%, var(--surface)); }
  .btn-pill-warn { border-color:var(--bad); color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, var(--surface)); }
  .btn-pill-danger { border-color:var(--bad); color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, var(--surface)); }
  .btn-add-dashed { border:1px dashed var(--border); background:none; border-radius:6px; padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--ink); margin:8px 0; cursor:pointer; }