/* ============================================================
 * style.css · CAO-toeslagcalculator
 * Eigen ontwerp: donkergroen "ploegendienst"-palet met amberen accenten en
 * een 24-uurs tijdband waarin je de dienst ziet liggen.
 * Uitgangspunten: mobiel eerst (375px zonder zijwaarts scrollen), raakvlakken
 * minimaal 44px, zichtbare toetsenbordfocus, donker thema via systeemvoorkeur,
 * geen externe bestanden (systeemlettertypen), print één overzichtelijke pagina.
 * ============================================================ */

:root {
  --bg: #eef1f4;
  --card: #ffffff;
  --card-2: #f7f9fa;
  --ink: #10161c;
  --muted: #4d5a67;
  --line: #d5dce3;
  --line-soft: #e7ecf0;
  --brand: #123f3c;
  --brand-text: #123f3c;   /* merk als tekstkleur: apart token, want in donker thema moet het lichter */
  --brand-ink: #ffffff;
  --brand-soft: #e2f0ee;
  --accent: #8a4b00;
  --accent-soft: #fdf1e0;
  --warn-bg: #fdf1e0;
  --warn-line: #c98a3c;
  --warn-ink: #6d3a00;
  --err: #a1121b;
  --ok: #10603a;
  --focus: #0b63d6;
  --night: #24456f;
  --day: #cfe3d8;
  --eve: #e8c88a;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 22, 28, .07), 0 10px 26px rgba(16, 22, 28, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1417;
    --card: #161e22;
    --card-2: #1b2529;
    --ink: #e9eff2;
    --muted: #aab8bf;
    --line: #2b383d;
    --line-soft: #232e33;
    --brand: #2f8f86;
    --brand-text: #7fd8cf;
    --brand-ink: #05100e;
    --brand-soft: #14302e;
    --accent: #f0b46a;
    --accent-soft: #2c2318;
    --warn-bg: #2c2318;
    --warn-line: #8a6531;
    --warn-ink: #f4d3a3;
    --err: #ff9aa2;
    --ok: #7fd6a1;
    --focus: #8fb4ff;
    --night: #3c6ea8;
    --day: #35564a;
    --eve: #8a6a2c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
}

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.wrap, .card, td, th, li, p, dd, dt, label { min-width: 0; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--brand); color: var(--brand-ink);
  padding: 12px 16px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ---------------- kop ---------------- */
.site-head {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 62px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; font-size: 16.5px; }
.brand .logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: var(--brand); color: var(--brand-ink);
  font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -.5px;
}
.lang { display: flex; gap: 6px; }
.lang a, .lang span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 54px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
  font-weight: 600; text-decoration: none;
}
.lang .is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* ---------------- hoofd ---------------- */
.page-title { font-size: clamp(22px, 5vw, 31px); line-height: 1.2; margin: 26px 0 8px; letter-spacing: -.2px; }
.lead { color: var(--muted); margin: 0 0 14px; }
.hint { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }
.hint.note { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 14px; }
.hint.note-warn { color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 10px; }
.muted { color: var(--muted); font-size: 13px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px 20px;
  margin: 0 0 20px;
}
.card > h2 { font-size: 19px; margin: 0 0 6px; }
.card h3 { font-size: 15.5px; margin: 18px 0 6px; }

.kader {
  display: grid; gap: 8px 18px; margin: 0 0 20px;
  background: var(--brand-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
}
.kader p { margin: 0; }
.kader b { font-weight: 700; }
.kader a { color: inherit; }

/* ---------------- tijdband ---------------- */
.band { margin: 4px 0 18px; }
.band-track {
  position: relative; height: 34px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--card-2);
}
.band-seg { position: absolute; top: 0; bottom: 0; opacity: .55; }
.band-seg.nacht { background: var(--night); }
.band-seg.dag { background: var(--day); }
.band-seg.avond { background: var(--eve); }
.band-shift {
  position: absolute; top: 0; bottom: 0;
  background: var(--brand); opacity: .85;
  border-left: 2px solid var(--brand); border-right: 2px solid var(--brand);
}
.band-shift.next { background: repeating-linear-gradient(45deg, var(--brand), var(--brand) 6px, var(--brand-soft) 6px, var(--brand-soft) 12px); }
.band.is-feest .band-track { border-color: var(--accent); }
.band.is-feest .band-shift { background: var(--accent); }
.band.is-weekend .band-track { border-color: var(--brand); }
.band-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.band-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.band-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.band-legend .k-nacht { background: var(--night); opacity: .6; }
.band-legend .k-dag { background: var(--day); }
.band-legend .k-avond { background: var(--eve); opacity: .8; }
.band-legend .k-dienst { background: var(--brand); }

/* ---------------- formulieren ---------------- */
label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 4px; }
input[type="text"], input[type="number"], input[type="date"], input[type="time"], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font: inherit;
}
input[type="number"], input[type="date"], input[type="time"] { font-variant-numeric: tabular-nums; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
input[aria-invalid="true"] { border-color: var(--err); border-width: 2px; }

.field { margin: 0 0 12px; }
.fields { display: grid; gap: 0; grid-template-columns: 1fr; }
.field-err { color: var(--err); font-size: 12.5px; margin: 4px 0 0; display: block; }
.field-err:empty { display: none; }

.check { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 44px; margin: 0; }
.check input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; }

.btn {
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--brand); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-quiet { background: transparent; font-weight: 500; }
.btn[data-armed="1"] { background: var(--err); border-color: var(--err); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.btn-icon {
  min-height: 44px; min-width: 44px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--err); font: 700 18px/1 inherit; cursor: pointer;
}

/* ---------------- uitkomst ---------------- */
.hero {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 16px 0 18px;
}
.hero-label { margin: 0; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.hero-value {
  margin: 2px 0 2px; font-size: clamp(30px, 8.5vw, 44px); line-height: 1.05;
  font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-text);
}
.hero-sub { margin: 0; font-size: 14px; color: var(--muted); }

.facts { display: grid; gap: 10px; margin: 0 0 16px; }
.facts > div { border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; }
.facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 2px; }
.facts dd { margin: 0; font-size: 17px; font-variant-numeric: tabular-nums; }

.sub-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 16px 0 6px; }

/* ---------------- tabellen ---------------- */
.grid { width: 100%; border-collapse: collapse; margin: 10px 0 14px; }
.grid th, .grid td { text-align: left; vertical-align: middle; padding: 8px; border-bottom: 1px solid var(--line-soft); }
.grid thead th { font-size: 12.5px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.grid td.num, .grid th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.grid tfoot th, .grid tfoot td { border-top: 1px solid var(--line); border-bottom: 0; font-weight: 700; }
.grid td.act, .grid th.act { width: 58px; text-align: right; }
.grid tr[data-error] { background: var(--warn-bg); }
.grid .rowlabel { font-weight: 600; }

.form-status { min-height: 22px; font-size: 14px; margin: 8px 0 0; }
.form-status.ok { color: var(--ok); font-weight: 600; }
.form-status.err { color: var(--err); font-weight: 600; }

.copy-preview {
  margin: 12px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-2); color: var(--ink);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto;
}
.copy-preview:empty { display: none; }

.empty { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 14px; color: var(--muted); margin: 10px 0; }
.empty p { margin: 0; }

/* ---------------- regels en feestdagen ---------------- */
.rules { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.rules li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 9px 12px; background: var(--card-2);
}
.rules .r-txt { font-size: 14px; }
.rules .r-pct { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-text); white-space: nowrap; }
.rules li.is-stack { border-color: var(--accent); background: var(--accent-soft); }

.hol-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.hol-wrap .grid { margin: 0; }
.hol-wrap thead th { position: sticky; top: 0; background: var(--card); }

/* ---------------- voet ---------------- */
.site-foot {
  border-top: 1px solid var(--line); background: var(--card);
  margin-top: 8px; padding: 18px 0 26px; font-size: 13px; color: var(--muted);
}
.site-foot p { margin: 0 0 6px; }
.site-foot a { color: var(--brand-text); }
.foot-langs { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------- print ---------------- */
.print-only { display: none; }

@media print {
  :root { --ink: #000; --muted: #333; --line: #999; --line-soft: #ccc; --brand: #000; --accent: #000; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .site-head, .skip, main, .site-foot, #bac-intent, #intent-slot, #nl-sec-suite, .toast { display: none !important; }
  .print-only { display: block !important; }
  #print-sheet { padding: 0; }
  #print-sheet h1 { font-size: 19pt; margin: 0 0 8pt; }
  #print-sheet h2 { font-size: 12.5pt; margin: 12pt 0 4pt; }
  #print-sheet .sheet-meta { width: 100%; border-collapse: collapse; margin-bottom: 6pt; }
  #print-sheet .sheet-meta th { text-align: left; width: 42%; font-weight: 600; padding: 2pt 0; vertical-align: top; }
  #print-sheet .sheet-meta td { padding: 2pt 0; }
  #print-sheet .sheet-fee { font-size: 15pt; font-weight: 700; border-top: 1pt solid #000; border-bottom: 1pt solid #000; padding: 6pt 0; margin: 10pt 0; }
  #print-sheet .small { font-size: 9pt; color: #333; margin: 4pt 0; }
  @page { margin: 16mm; }
}

/* ---------------- smalle schermen: tabellen worden kaarten ----------------
   De feestdagentabel blijft een echte tabel (korte cellen, past ook op 375px). */
@media (max-width: 720px) {
  .grid:not(#feestdagen-table),
  .grid:not(#feestdagen-table) tbody,
  .grid:not(#feestdagen-table) tr,
  .grid:not(#feestdagen-table) td,
  .grid:not(#feestdagen-table) tfoot,
  .grid:not(#feestdagen-table) tfoot tr,
  .grid:not(#feestdagen-table) tfoot th,
  .grid:not(#feestdagen-table) tfoot td {
    display: block; width: 100%;
  }
  .grid:not(#feestdagen-table) thead { display: none; }
  .grid:not(#feestdagen-table) tr { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; margin-bottom: 10px; }
  .grid:not(#feestdagen-table) td,
  .grid:not(#feestdagen-table) th { border: 0; padding: 5px 0; text-align: left; }
  .grid:not(#feestdagen-table) td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block;
    font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 2px;
  }
  .grid:not(#feestdagen-table) td.num { text-align: left; white-space: normal; }
  .grid:not(#feestdagen-table) td.act { text-align: left; }
  .grid:not(#feestdagen-table) tfoot tr { border: 0; padding: 0; margin: 0; }
  .grid:not(#feestdagen-table) tfoot th { padding: 4px 0 0; font-size: 13px; }
  .grid:not(#feestdagen-table) tfoot td { padding: 0 0 6px; }
  .hol-wrap { max-height: none; }
  .hol-wrap thead th { position: static; }
  #feestdagen-table { font-size: 13px; }
  #feestdagen-table th, #feestdagen-table td { padding: 7px 5px; }
  #feestdagen-table thead th { font-size: 11.5px; }
}

/* Op smalle schermen de kolom "Dag" laten vallen en de weekdag onder de
   datum zetten: daarmee past de feestdagentabel zonder zijwaarts scrollen. */
.hol-dow { display: none; }
@media (max-width: 620px) {
  #feestdagen-table .hol-day { display: none; }
  #feestdagen-table .hol-dow {
    display: block; font-weight: 400; font-size: 11px; color: var(--muted); white-space: normal;
  }
}

@media (min-width: 560px) {
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}
@media (min-width: 721px) {
  .fields { grid-template-columns: 1.1fr 1.2fr .9fr .9fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
  .facts > div { border-bottom: 0; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}