/* ============================================================
   COMPONENTEN
   Knoppen, kaarten, labels, formulieren, modals, meldingen,
   tabellen, kanban, filters, lege states.
   ============================================================ */

/* ============================================================
   1. KNOPPEN
   De verspringende omlijning is het handelsmerk: een tweede
   randje dat 9px verschoven staat en op hover terugspringt.
   ============================================================ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-klein);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background var(--snel), color var(--snel),
              filter var(--snel), box-shadow var(--snel), transform var(--snel);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--lijn-dik) solid transparent;
  border-radius: var(--ronding);
  transform: translate(var(--vspr-s), var(--vspr-s));
  transition: transform var(--snel);
}

.btn:hover::after { transform: translate(0, 0); }
.btn:active { transform: translateY(1px); }

.btn-roze {
  background: var(--roze);
  border-color: var(--roze);
  color: #fff;
  box-shadow: var(--schaduw-1);
}
.btn-roze::after { border-color: var(--geel); }
.btn-roze:hover { filter: brightness(1.06); box-shadow: var(--schaduw-2); }

.btn-geel {
  background: var(--geel);
  border-color: var(--geel);
  color: var(--ink);
  box-shadow: var(--schaduw-1);
}
.btn-geel::after { border-color: var(--roze); }
.btn-geel:hover { filter: brightness(1.04); box-shadow: var(--schaduw-2); }

.btn-ink {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.btn-ink::after { border-color: var(--roze); }
.btn-ink:hover { background: var(--ink-2); }

.btn-lijn::after { border-color: var(--roze); }
.btn-lijn:hover { background: var(--roze-zacht); }

.btn-stil {
  border-color: transparent;
  background: transparent;
  color: var(--label);
  font-weight: 500;
}
.btn-stil::after { display: none; }
.btn-stil:hover { background: var(--vlak-3); color: var(--ink); }

.btn-gevaar {
  background: var(--alarm);
  border-color: var(--alarm);
  color: #fff;
}
.btn-gevaar::after { border-color: var(--ink); }
.btn-gevaar:hover { filter: brightness(1.08); }

.btn-klein { padding: 7px 12px; font-size: var(--t-label); letter-spacing: .06em; }
.btn-klein::after { transform: translate(4px, 4px); }

.btn-groot { padding: 15px 26px; font-size: var(--t-body); }

.btn-vol { width: 100%; }

.btn[disabled],
.btn[aria-busy="true"] {
  opacity: .55;
  pointer-events: none;
}

/* Ruimte tussen knoppen: de verspringende lijn heeft lucht nodig. */
.knoprij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--vspr-s) + 10px);
}

/* Ronde icoonknop, bijvoorbeeld bewerken of verwijderen op een kaart. */
.ikoonknop {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ronding);
  border: 1px solid transparent;
  color: var(--label);
  flex-shrink: 0;
  transition: background var(--snel), color var(--snel), border-color var(--snel);
}
.ikoonknop:hover { background: var(--vlak-3); color: var(--ink); border-color: var(--lijn); }
.ikoonknop.gevaar:hover { background: var(--alarm-zacht); color: var(--alarm); border-color: var(--alarm); }

/* Externe link als kleine chip, opent altijd in een nieuw tabblad. */
.extlink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  background: var(--vlak-2);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background var(--snel), border-color var(--snel);
}
.extlink:hover { background: var(--geel); border-color: var(--ink); text-decoration: none; }
.extlink::after { content: "\2197"; font-size: .9em; opacity: .6; }

/* ============================================================
   2. KAARTEN
   ============================================================ */

.kaart {
  position: relative;
  background: var(--vlak);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  padding: var(--sp-5);
}

.kaart-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.kaart-titel {
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.kaart-sub {
  font-size: var(--t-klein);
  color: var(--muted);
  margin-top: 2px;
}

.kaart-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--lijn);
}

/* Klikbare kaart in een overzicht. */
.kaart-klik {
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: block;
  transition: transform var(--snel), box-shadow var(--snel);
}
.kaart-klik:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--roze);
}
.kaart-klik:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--roze);
}

/* Zachte kaart zonder zware rand, voor lijsten binnen een sectie. */
.kaart-zacht {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  padding: var(--sp-4);
}

/* ============================================================
   3. STATISTIEKKAARTEN
   ============================================================ */

.stat {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--vlak);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  overflow: hidden;
  transition: transform var(--snel), box-shadow var(--snel);
}

a.stat:hover, button.stat:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--ink);
  text-decoration: none;
}

/* Kleurstreep bovenaan: het enige grote gebruik van roze/geel. */
.stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--lijn);
}
.stat.accent-roze::before  { background: var(--roze); }
.stat.accent-geel::before  { background: var(--geel); }
.stat.accent-ink::before   { background: var(--ink); }
.stat.accent-alarm::before { background: var(--alarm); }
.stat.accent-ok::before    { background: var(--ok); }

.stat-label {
  display: block;
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--label);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
}

.stat-cijfer {
  font-family: var(--display);
  font-size: var(--t-cijfer);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.stat-cijfer.is-alarm { color: var(--alarm); }
.stat-cijfer.is-let-op { color: var(--geel-diep); }

.stat-meta {
  font-size: var(--t-label);
  color: var(--muted);
  margin-top: var(--sp-2);
  min-height: 1em;
}

/* ============================================================
   4. STATUSLABELS EN CHIPS
   ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--ronding);
  border: 1px solid var(--lijn);
  background: var(--vlak-2);
  color: var(--ink);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}

.tag-roze  { background: var(--roze-zacht); border-color: var(--roze); color: var(--roze-diep); }
.tag-geel  { background: var(--geel-zacht); border-color: var(--geel-diep); color: var(--geel-diep); }
.tag-ok    { background: var(--ok-zacht); border-color: var(--ok); color: var(--ok); }
.tag-alarm { background: var(--alarm-zacht); border-color: var(--alarm); color: var(--alarm); }
.tag-info  { background: var(--info-zacht); border-color: var(--info); color: var(--info); }
.tag-ink   { background: var(--ink); border-color: var(--ink); color: #fff; }
.tag-stil  { background: transparent; border-color: var(--lijn); color: var(--muted); }

/* De vier stappen van een taak: wit als er nog niets mee gedaan is, en dan
   steeds voller roze tot hij af is. Zacht genoeg om naast elkaar in een lijst
   te staan zonder te schreeuwen. */
.tag-stap-0 { background: var(--paper);  border-color: var(--lijn);  color: var(--muted); }
.tag-stap-1 { background: #fdeff4;       border-color: #f6cfdf;      color: var(--roze-diep); }
.tag-stap-2 { background: #ffd7e6;       border-color: #ffa9c7;      color: var(--roze-diep); }
.tag-stap-3 { background: var(--roze-diep); border-color: var(--roze-diep); color: #fff; }

/* Stipje voor de status in kanban en lijsten. */
.stip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.tagrij {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* ============================================================
   5. SIGNALERINGEN
   ============================================================ */

.sein {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--muted);
  border-radius: var(--ronding);
  background: var(--vlak-2);
  font-size: var(--t-klein);
}

.sein-alarm  { border-left-color: var(--alarm); background: var(--alarm-zacht); }
.sein-let-op { border-left-color: var(--geel-diep); background: var(--let-op-zacht); }
.sein-info   { border-left-color: var(--info); background: var(--info-zacht); }
.sein-ok     { border-left-color: var(--ok); background: var(--ok-zacht); }

.sein-tekst { flex: 1; min-width: 0; }
.sein strong { font-weight: 700; }

/* ============================================================
   6. FORMULIEREN
   ============================================================ */

.veld { display: grid; gap: 6px; }

/* Veldlabels lees je, dus geen gespatieerde hoofdletters: bij een
   formulier met twintig velden wordt dat een muur. Gespatieerd
   hoofdletterwerk blijft voor kleine opschriften. */
.veld > label,
.veld-label {
  font-family: var(--display);
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.veld-verplicht { color: var(--roze); margin-left: 2px; }

.invoer,
.veld input[type="text"],
.veld input[type="email"],
.veld input[type="url"],
.veld input[type="tel"],
.veld input[type="date"],
.veld input[type="time"],
.veld input[type="number"],
.veld input[type="password"],
.veld textarea,
.veld select {
  width: 100%;
  padding: 10px 12px;
  border: var(--lijn-dik) solid var(--lijn);
  border-radius: var(--ronding);
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-klein);
  color: var(--ink);
  transition: border-color var(--snel), box-shadow var(--snel);
}

.veld input:hover,
.veld textarea:hover,
.veld select:hover { border-color: #d0d0d8; }

.veld input:focus,
.veld textarea:focus,
.veld select:focus {
  outline: none;
  border-color: var(--roze);
  box-shadow: 0 0 0 3px var(--roze-zacht);
}

.veld textarea { min-height: 92px; resize: vertical; line-height: 1.55; }

/* Een keuzelijst houdt uit zichzelf de breedte van zijn langste optie aan. Met
   jouw klant- en projectnamen erin rekt zo een formulier breder dan een
   telefoonscherm, en kun je de hele app opzij schuiven. min-width: 0 haalt die
   ondergrens weg; de tekst wordt afgekapt in plaats van het scherm opgerekt. */
.veld { min-width: 0; }
.veld input,
.veld textarea,
.veld select { min-width: 0; max-width: 100%; }
.veld select { text-overflow: ellipsis; }
.form-raster > * { min-width: 0; }
.modaal-body { min-width: 0; }

.veld select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--label) 50%),
    linear-gradient(135deg, var(--label) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}

.veld input::placeholder,
.veld textarea::placeholder { color: #b4b4bd; }

.veld-hulp { font-size: var(--t-label); color: var(--muted); letter-spacing: 0; text-transform: none; }

.veld-fout {
  display: none;
  font-size: var(--t-label);
  color: var(--alarm);
  font-weight: 700;
  letter-spacing: .02em;
}

.veld.heeft-fout .veld-fout { display: block; }
.veld.heeft-fout input,
.veld.heeft-fout textarea,
.veld.heeft-fout select { border-color: var(--alarm); }
.veld.heeft-fout input:focus,
.veld.heeft-fout textarea:focus,
.veld.heeft-fout select:focus { box-shadow: 0 0 0 3px var(--alarm-zacht); }

/* Vinkje */
.vink {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--t-klein);
  padding: 6px 0;
}

.vink input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--roze);
  flex-shrink: 0;
  cursor: pointer;
}

/* Meerkeuze als aanklikbare chips, bijvoorbeeld diensten. */
.chipkeuze {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: var(--lijn-dik) solid var(--lijn);
  border-radius: var(--ronding);
  background: var(--paper);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--snel);
}

.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:hover { border-color: var(--muted); }
.chip:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.chip:has(input:focus-visible) { outline: 3px solid var(--geel); outline-offset: 2px; }

/* Formulierraster in modals */
.form-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.form-raster .breed { grid-column: 1 / -1; }

.form-blok + .form-blok { margin-top: var(--sp-5); }

.form-blok-kop {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--lijn);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.form-blok-kop::before { content: "//"; color: var(--roze); }

/* ============================================================
   7. ZOEKEN EN FILTEREN
   ============================================================ */

.filterbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
}

.zoekveld {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}

.zoekveld input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: var(--lijn-dik) solid var(--lijn);
  border-radius: var(--ronding);
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-klein);
}

.zoekveld input:focus {
  outline: none;
  border-color: var(--roze);
  box-shadow: 0 0 0 3px var(--roze-zacht);
}

.zoekveld .zoek-ikoon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.filterbalk select {
  padding: 9px 30px 9px 12px;
  border: var(--lijn-dik) solid var(--lijn);
  border-radius: var(--ronding);
  background-color: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--label) 50%),
    linear-gradient(135deg, var(--label) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.filterbalk select:focus { outline: none; border-color: var(--roze); box-shadow: 0 0 0 3px var(--roze-zacht); }
.filterbalk select.actief { border-color: var(--ink); background-color: var(--geel); }

.filter-telling {
  margin-left: auto;
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Weergaveschakelaar: lijst / kanban */
.schakel {
  display: inline-flex;
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  overflow: hidden;
}

.schakel button {
  padding: 8px 14px;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--paper);
  transition: background var(--snel), color var(--snel);
}

.schakel button + button { border-left: var(--lijn-dik) solid var(--ink); }
.schakel button:hover { background: var(--vlak-3); }
.schakel button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* Snelfilters als tabbladen, bijvoorbeeld Vandaag / Deze week. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-4);
}

.tab {
  padding: 8px 14px;
  border: var(--lijn-dik) solid var(--lijn);
  border-radius: var(--ronding);
  background: var(--paper);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--label);
  transition: all var(--snel);
}

.tab:hover { border-color: var(--muted); color: var(--ink); }

.tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.tab .telling {
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--vlak-3);
  color: var(--label);
  font-size: .6rem;
}
.tab[aria-selected="true"] .telling { background: var(--roze); color: #fff; }

/* ============================================================
   8. TABELLEN
   ============================================================ */

.tabel-omhulsel {
  overflow-x: auto;
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  background: var(--vlak);
}

.tabel { min-width: 720px; font-size: var(--t-klein); }

.tabel thead th {
  position: sticky;
  top: 0;
  background: var(--vlak-2);
  padding: 11px var(--sp-4);
  text-align: left;
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--label);
  border-bottom: var(--lijn-dik) solid var(--ink);
  white-space: nowrap;
}

.tabel thead th.sorteerbaar { cursor: pointer; user-select: none; }
.tabel thead th.sorteerbaar:hover { color: var(--ink); background: var(--vlak-3); }
.tabel thead th .pijl { color: var(--roze); margin-left: 4px; }

.tabel tbody td {
  padding: 11px var(--sp-4);
  border-bottom: 1px solid var(--lijn);
  vertical-align: middle;
}

.tabel tbody tr:last-child td { border-bottom: none; }
.tabel tbody tr:hover { background: var(--vlak-2); }
.tabel tbody tr.klikbaar { cursor: pointer; }
.tabel .cel-naam { font-weight: 700; }
.tabel .cel-getal { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tabel .cel-acties { text-align: right; white-space: nowrap; width: 1%; }

/* ============================================================
   9. LIJSTREGELS (taken, deadlines, dashboard)
   ============================================================ */

.regel {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  background: var(--vlak);
  transition: border-color var(--snel), transform var(--snel);
  text-align: left;
  width: 100%;
}

.regel + .regel { margin-top: 7px; }
.regel:hover { border-color: var(--ink); transform: translateX(2px); }

.regel-links { flex: 1; min-width: 0; }

.regel-naam {
  font-weight: 700;
  font-size: var(--t-klein);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regel-meta {
  font-size: var(--t-label);
  color: var(--muted);
  letter-spacing: .02em;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regel-rechts {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* Afvinkrondje voor taken. */
.afvink {
  width: 20px;
  height: 20px;
  border: var(--lijn-dik) solid var(--muted);
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 11px;
  transition: all var(--snel);
}
.afvink:hover { border-color: var(--roze); color: var(--roze); }
.afvink.af { background: var(--roze); border-color: var(--roze); color: #fff; }

.regel.is-af .regel-naam { text-decoration: line-through; color: var(--muted); }

/* Te laat kleurt de hele regel zacht rood. Zo zie je in één blik waar het
   knelt, zonder dat er nog een label bij hoeft. */
.regel.is-te-laat {
  background: var(--alarm-zacht);
  border-color: #f5c4c0;
}
.regel.is-te-laat .regel-meta { color: var(--alarm); }

/* Prioriteitsstreep aan de linkerkant. */
.regel.prio-urgent { border-left: 4px solid var(--alarm); }
.regel.prio-hoog   { border-left: 4px solid var(--roze); }
.regel.prio-normaal{ border-left: 4px solid var(--lijn); }
.regel.prio-laag   { border-left: 4px solid var(--lijn); }

/* ============================================================
   10. KANBAN
   ============================================================ */

.kanban {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  padding-bottom: var(--sp-4);
  scroll-snap-type: x proximity;
}

.kanban-kolom {
  flex: 0 0 290px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--vlak-2);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  max-height: 74vh;
}

.kanban-kop {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: var(--lijn-dik) solid var(--ink);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  position: sticky;
  top: 0;
  background: var(--vlak-2);
  z-index: 1;
  border-radius: var(--ronding) var(--ronding) 0 0;
}

.kanban-kop .telling {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .6rem;
}

.kanban-lijst {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  min-height: 80px;
}

.kanban-kaart {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  cursor: grab;
  transition: border-color var(--snel), box-shadow var(--snel), transform var(--snel);
}

.kanban-kaart:hover {
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--roze);
  transform: translate(-1px, -1px);
}

.kanban-kaart.sleept { opacity: .45; cursor: grabbing; }
.kanban-lijst.doelwit { background: var(--roze-zacht); outline: var(--lijn-dik) dashed var(--roze); outline-offset: -4px; }

.kanban-kaart-titel { font-weight: 700; font-size: var(--t-klein); line-height: 1.35; margin-bottom: 5px; }
.kanban-kaart-meta { font-size: var(--t-label); color: var(--muted); }

/* ============================================================
   11. MODAL
   ============================================================ */

.waas {
  position: fixed;
  inset: 0;
  z-index: var(--z-waas);
  background: rgba(22, 22, 26, .55);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  overflow-y: auto;
  animation: waas-in var(--snel);
}

@keyframes waas-in { from { opacity: 0; } to { opacity: 1; } }

.modaal {
  position: relative;
  z-index: var(--z-modaal);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 2 * var(--sp-5));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  box-shadow: var(--schaduw-3);
  animation: modaal-in var(--traag);
}

.modaal-smal { max-width: 460px; }
.modaal-breed { max-width: 1000px; }

@keyframes modaal-in {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.modaal-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--lijn-dik) solid var(--ink);
  flex-shrink: 0;
}

.modaal-titel {
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: 800;
  letter-spacing: -.01em;
}

.modaal-sub { font-size: var(--t-label); color: var(--muted); margin-top: 2px; }

.modaal-dicht {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--ronding);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--label);
  flex-shrink: 0;
  transition: background var(--snel), color var(--snel);
}
.modaal-dicht:hover { background: var(--vlak-3); color: var(--ink); }

.modaal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5);
}

.modaal-voet {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--vspr-s) + 10px);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--lijn);
  background: var(--vlak-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.modaal-voet .links { margin-right: auto; }

/* ============================================================
   12. MELDINGEN (toasts)
   ============================================================ */

.meldingen {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-melding);
  display: grid;
  gap: var(--sp-2);
  width: min(340px, calc(100vw - 2 * var(--sp-4)));
  pointer-events: none;
}

.melding {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink);
  color: #fff;
  border-radius: var(--ronding);
  border-left: 4px solid var(--roze);
  box-shadow: var(--schaduw-2);
  font-size: var(--t-klein);
  pointer-events: auto;
  animation: melding-in var(--traag);
}

.melding.gaat-weg { animation: melding-uit var(--snel) forwards; }
.melding.is-ok { border-left-color: var(--ok); }
.melding.is-fout { border-left-color: var(--alarm); }
.melding.is-let-op { border-left-color: var(--geel); }

/* Een pauzemoment is geen systeemmelding maar een schouderklopje, dus is hij
   licht en warm in plaats van zwart. */
.melding.is-pauze {
  background: var(--geel-zacht);
  color: var(--ink);
  border-left-color: var(--roze);
  font-weight: 600;
}
.melding.is-pauze .melding-tekst::before {
  content: "✦";
  color: var(--roze);
  margin-right: 8px;
}
.melding.is-pauze .melding-dicht { color: var(--muted); }
.melding.is-pauze .melding-dicht:hover { color: var(--ink); }

.melding-tekst { flex: 1; min-width: 0; }
.melding-dicht { color: #9a9aa6; font-size: 1.1rem; line-height: 1; }
.melding-dicht:hover { color: #fff; }

@keyframes melding-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes melding-uit {
  to { opacity: 0; transform: translateX(20px); }
}

/* ============================================================
   13. LEGE STATES, LADEN EN FOUTEN
   ============================================================ */

.leeg {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  border: var(--lijn-dik) dashed var(--lijn);
  border-radius: var(--ronding);
  background: var(--vlak);
}

.leeg-teken {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--roze);
  letter-spacing: .1em;
}

.leeg-titel { font-family: var(--display); font-size: var(--t-m); font-weight: 800; }
.leeg-tekst { font-size: var(--t-klein); color: var(--muted); max-width: 42ch; }

/* Compacte variant binnen een sectie of kanban-kolom. */
.leeg-klein {
  padding: var(--sp-4);
  font-size: var(--t-label);
  color: var(--muted);
  text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px dashed var(--lijn);
  border-radius: var(--ronding);
}

.lader {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7);
  color: var(--muted);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--lijn);
  border-top-color: var(--roze);
  border-radius: 50%;
  animation: draai .7s linear infinite;
}

.spinner-klein { width: 15px; height: 15px; border-width: 2px; }

@keyframes draai { to { transform: rotate(360deg); } }

/* Skeleton tijdens het laden van kaarten. */
.skelet {
  background: linear-gradient(90deg, var(--vlak-2) 25%, var(--vlak-3) 50%, var(--vlak-2) 75%);
  background-size: 200% 100%;
  animation: skelet 1.3s infinite;
  border-radius: var(--ronding);
  height: 96px;
}

@keyframes skelet { to { background-position: -200% 0; } }

.foutvlak {
  padding: var(--sp-4);
  border: var(--lijn-dik) solid var(--alarm);
  border-radius: var(--ronding);
  background: var(--alarm-zacht);
  color: var(--alarm);
  font-size: var(--t-klein);
  font-weight: 700;
}

/* ============================================================
   13b. CHECKLIJST
   De technische checklist van een website: aanklikbare regels
   die meteen opslaan.
   ============================================================ */

.checklijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 7px;
}

.checkregel {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 10px var(--sp-3);
  text-align: left;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  font-size: var(--t-klein);
  transition: border-color var(--snel), background var(--snel);
}

.checkregel:hover { border-color: var(--ink); background: var(--vlak-2); }

.checkregel.aan { background: var(--ok-zacht); border-color: var(--ok); }

.checkvak {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: var(--lijn-dik) solid var(--muted);
  border-radius: var(--ronding);
  font-size: 12px;
  font-weight: 700;
  color: transparent;
  transition: all var(--snel);
}

.checkregel.aan .checkvak {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}

.checktekst { flex: 1; min-width: 0; }

/* ============================================================
   13c. PREVIEW VAN EEN ONTWERP
   ============================================================ */

.preview {
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  overflow: hidden;
  background: var(--vlak-2);
}

.preview img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
}

.preview-leeg {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--muted);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Formaatkaart binnen een vormgevingsopdracht. */
.formaat {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
}

.formaat + .formaat { margin-top: 7px; }
.formaat.is-goedgekeurd { border-color: var(--ok); background: var(--ok-zacht); }

.formaat-links { flex: 1; min-width: 0; }
.formaat-naam { font-weight: 700; font-size: var(--t-klein); }

.formaat-maat {
  font-size: var(--t-label);
  color: var(--muted);
  letter-spacing: .04em;
  margin-top: 2px;
}

.formaat-rechts {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ============================================================
   13d. AGENDA (planning)
   ============================================================ */

.agenda-dag + .agenda-dag { margin-top: var(--sp-4); }

.agenda-dagkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 6px 0 8px;
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--label);
  border-bottom: 1px solid var(--lijn);
  margin-bottom: 7px;
}

.agenda-dagkop.is-vandaag {
  color: var(--roze-diep);
  border-bottom-color: var(--roze);
}

.agenda-dagmeta { font-weight: 500; letter-spacing: .04em; text-transform: none; }

.agenda-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px var(--sp-4);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--lijn);
  border-radius: var(--ronding);
  transition: border-color var(--snel), transform var(--snel);
}

.agenda-item + .agenda-item { margin-top: 5px; }
.agenda-item:hover { border-color: var(--ink); transform: translateX(2px); }
.agenda-item.is-urgent { border-left-color: var(--alarm); }

.agenda-stip {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lijn-strong, var(--muted));
  margin: 0 6px;
}

.agenda-links {
  flex: 1;
  min-width: 0;
  display: block;
}

.agenda-links:hover { text-decoration: none; }

.agenda-titel {
  display: block;
  font-weight: 700;
  font-size: var(--t-klein);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-meta {
  display: block;
  font-size: var(--t-label);
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-rechts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* De filterknoppen van de planning zijn tweestandsknoppen. */
.tab[aria-pressed="false"] { opacity: .5; }
.tab[aria-pressed="false"]:hover { opacity: 1; }

@media (max-width: 640px) {
  .agenda-item { padding: 8px var(--sp-3); }
  .agenda-rechts .tag:not(.tag-alarm) { display: none; }
}

/* ============================================================
   14. DETAILWEERGAVE
   ============================================================ */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-5);
  align-items: start;
}

.detail-zij { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }

.gegevens { display: grid; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--ronding); overflow: hidden; }

.gegeven {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: 9px var(--sp-3);
  background: var(--paper);
  font-size: var(--t-klein);
}

.gegeven dt {
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label);
  font-weight: 700;
  padding-top: 2px;
}

.gegeven dd { min-width: 0; word-break: break-word; }
.gegeven dd.leeg-waarde { color: #c2c2cb; }

.notitie {
  padding: var(--sp-4);
  background: var(--geel-zacht);
  border: 1px solid var(--geel);
  border-radius: var(--ronding);
  font-size: var(--t-klein);
  white-space: pre-wrap;
  line-height: 1.6;
}

/* Voortgangsbalk, bijvoorbeeld correctierondes of uren. */
.balk {
  height: 7px;
  background: var(--vlak-3);
  border-radius: 999px;
  overflow: hidden;
}
.balk-vul { height: 100%; background: var(--roze); border-radius: 999px; transition: width var(--traag); }
.balk-vul.is-alarm { background: var(--alarm); }
.balk-vul.is-ok { background: var(--ok); }

/* ============================================================
   HET DASHBOARD
   ------------------------------------------------------------
   Geen muur met kaarten. De volgorde van het scherm is de volgorde
   waarin je 's ochtends denkt: wat brandt er, wat moet vandaag, wat
   komt eraan. Blokken hebben daarom geen randen; de kop en de witruimte
   doen het groeperen. Alleen "Aandacht nodig" krijgt een eigen vlak,
   want dat moet je oog als eerste vangen.
   ============================================================ */

.begroet {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.begroet-tekst { min-width: 0; }

.begroet-titel {
  font-family: var(--display);
  font-size: clamp(1.45rem, 5.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

.begroet-sub {
  margin: var(--sp-2) 0 0;
  font-size: var(--t-lead);
  color: var(--label);
}

/* ---------- De plusknop ----------
   Eén duidelijke maakknop in plaats van vijf "Nieuwe ..."-knoppen. */
.snel { position: relative; flex: 0 0 auto; }

.snel-knop {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--paper);
  background: var(--roze);
  border: 0;
  border-radius: var(--ronding);
  cursor: pointer;
  transition: transform var(--snel), background var(--snel);
}

.snel-knop:hover { background: var(--roze-diep); }
.snel-knop:active { transform: scale(.97); background: var(--roze-diep); }

.snel-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  z-index: var(--z-kopbalk);
  display: grid;
  min-width: 170px;
  padding: var(--sp-2);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  box-shadow: var(--schaduw-2);
}

.snel-menu[hidden] { display: none; }

.snel-menu button {
  padding: 10px var(--sp-3);
  min-height: 44px;
  font: inherit;
  font-size: var(--t-body);
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--ronding);
  cursor: pointer;
}

.snel-menu button:hover { background: var(--vlak-3); }

/* ---------- Blokken ---------- */
.blok { margin-bottom: var(--sp-6); }

.blok-kop {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.blok-kop h2 {
  font-family: var(--display);
  font-size: var(--t-l);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}

.blok-telling {
  font-family: var(--mono);
  font-size: var(--t-klein);
  color: var(--muted);
}

.blok-link {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-klein);
  color: var(--label);
  text-decoration: none;
}

.blok-link:hover { color: var(--roze-diep); }

.blok-leeg {
  margin: 0;
  padding: var(--sp-4) 0;
  font-size: var(--t-body);
  color: var(--muted);
}

.blok-meer {
  margin-top: var(--sp-3);
  padding: 10px var(--sp-3);
  min-height: 44px;
  font-family: var(--mono);
  font-size: var(--t-klein);
  color: var(--label);
  background: none;
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  cursor: pointer;
}

.blok-meer:hover { border-color: var(--muted); color: var(--ink); }

/* ---------- Aandacht nodig ---------- */
.blok-aandacht {
  padding: var(--sp-4);
  background: var(--vlak);
  border-radius: var(--ronding);
}

.aandacht { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.aandacht-rij {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--ronding);
  transition: background var(--snel);
}

.aandacht-rij:hover { background: var(--vlak-2); }

.aandacht-stip {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.niveau-alarm  .aandacht-stip { background: var(--alarm); }
.niveau-let-op .aandacht-stip { background: var(--geel-diep); }
.niveau-info   .aandacht-stip { background: var(--info); }

.aandacht-tekst {
  flex: 1;
  min-width: 0;
  font-size: var(--t-body);
  line-height: 1.45;
}

.aandacht-pijl { flex: 0 0 auto; color: var(--muted); }
.aandacht-rij:hover .aandacht-pijl { color: var(--roze); }

/* ---------- Vandaag ---------- */
.dagrij-lijst { list-style: none; margin: 0; padding: 0; }

.dagrij {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  border-bottom: 1px solid var(--lijn);
}

.dagrij:last-child { border-bottom: 0; }

.dagrij-tijd {
  flex: 0 0 52px;
  font-family: var(--mono);
  font-size: var(--t-klein);
  color: var(--muted);
  text-align: right;
}

/* Het rondje waarmee je een taak afvinkt. */
.dagrij-vink {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}

.dagrij-vink::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 19px;
  height: 19px;
  border: var(--lijn-dik) solid var(--muted);
  border-radius: 50%;
  transition: border-color var(--snel), background var(--snel);
}

.dagrij-vink:hover::before { border-color: var(--roze); background: var(--roze-zacht); }
.dagrij-vink:active::before { scale: .94; }

.dagrij-tekst {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: var(--sp-2) 0;
  color: var(--ink);
  text-decoration: none;
}

.dagrij-titel {
  font-size: var(--t-body);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.dagrij-tekst:hover .dagrij-titel { color: var(--roze-diep); }

.dagrij-context {
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--muted);
}

/* ---------- Deze week ---------- */
.weeklijst { list-style: none; margin: 0; padding: 0; }

.weekrij {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  border-bottom: 1px solid var(--lijn);
}

.weekrij:last-child { border-bottom: 0; }

.weekrij-dag {
  flex: 0 0 40px;
  display: grid;
  justify-items: center;
  font-family: var(--mono);
  line-height: 1.1;
}

.weekrij-naam { font-size: var(--t-label); color: var(--muted); text-transform: lowercase; }
.weekrij-nr { font-size: var(--t-body); font-weight: 700; }

.weekrij-inhoud { min-width: 0; display: grid; gap: 1px; padding: var(--sp-2) 0; }
.weekrij-eerste { font-size: var(--t-body); overflow-wrap: anywhere; }
.weekrij-rest { font-family: var(--mono); font-size: var(--t-label); color: var(--muted); }

/* ---------- In het kort ----------
   De cijfers die overblijven. Eén regel, klein, onderaan: context,
   geen kop van het scherm. */
.kortstrip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--lijn);
}

.kortstrip-item {
  display: grid;
  gap: 2px;
  min-height: 44px;
  align-content: center;
  color: var(--ink);
  text-decoration: none;
}

.kortstrip-cijfer {
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kortstrip-label {
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--muted);
}

.kortstrip-item:hover .kortstrip-cijfer { color: var(--roze-diep); }

@media (prefers-reduced-motion: reduce) {
  .snel-knop, .aandacht-rij, .dagrij-vink::before { transition: none; }
  .snel-knop:active, .dagrij-vink:active::before { transform: none; scale: 1; }
}

/* Leesbaarheid boven karakter: wat je léést staat in de schreefloze,
   wat je scánt (tijden, klantnamen, categorieën) blijft mono.
   Zie het typografiepunt in de UX-richtlijn. */
.begroet-sub,
.aandacht-tekst,
.dagrij-titel,
.weekrij-eerste,
.blok-leeg {
  font-family: var(--display);
  font-weight: 400;
}

.dagrij-titel, .weekrij-eerste { font-weight: 500; }

/* Op een telefoon twee kolommen in plaats van een wapperende rij. */
@media (max-width: 600px) {
  .kortstrip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-4);
  }
}

/* Vanaf een breed scherm staan "Vandaag" en "Deze week" naast elkaar.
   "Aandacht nodig" blijft over de volle breedte: dat moet je oog eerst
   vangen, en het staat nooit naast iets anders. */
@media (min-width: 900px) {
  .dash-kolommen {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }

  .blok-aandacht { max-width: 900px; }
}

/* ============================================================
   DE BLOKKEN KRIJGEN HUN OMLIJNING TERUG
   ------------------------------------------------------------
   Kaal is niet hetzelfde als rustig. De zwarte rand met het
   verspringende randje eronder is het merkteken van Lucy's Web;
   zonder dat wordt het een willekeurig dashboard.

   De kleur van dat tweede randje zegt iets:
     geel  = hier begin je mee
     roze  = dit is vandaag
     zwart = achtergrondinformatie
   Zo hebben roze en geel een reden, in plaats van overal te zitten.
   ============================================================ */

.blok-aandacht,
.blok-vandaag,
.blok-week {
  padding: var(--sp-4);
  background: var(--vlak);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding-blok);
  /* Ruimte voor het verspringende randje, zodat het nergens afgesneden wordt. */
  margin-right: var(--vspr-s);
  margin-bottom: calc(var(--sp-6) + var(--vspr-s));
}

.blok-aandacht { box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--geel); }
.blok-vandaag  { box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--roze); }
.blok-week     { box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--ink); }

/* Het haakje voor een kop: het codeteken uit de huisstijl, klein gehouden. */
.blok-kop h2 .haak {
  color: var(--roze);
  font-family: var(--mono);
  font-size: .7em;
  margin-right: 6px;
  vertical-align: 2px;
}

/* De naam in de begroeting in roze: het eerste wat je ziet is van jou. */
.begroet-naam { color: var(--roze-diep); }

/* Een gele streep onder de kop van "Hier begin je mee", zodat het blok
   warm aanvoelt in plaats van alarmerend. */
.blok-aandacht .blok-kop {
  padding-bottom: var(--sp-3);
  border-bottom: var(--lijn-dik) solid var(--geel);
  margin-bottom: var(--sp-3);
}

.blok-aandacht .blok-telling {
  padding: 2px 8px;
  color: var(--ink);
  background: var(--geel);
  border-radius: 999px;
  font-weight: 700;
}

/* De tellingen bij de andere blokken krijgen dezelfde vorm, rustiger. */
.blok-vandaag .blok-telling {
  padding: 2px 8px;
  background: var(--roze-zacht);
  color: var(--roze-diep);
  border-radius: 999px;
  font-weight: 700;
}

/* Alles-goed-blok: geen leeg gat maar een prettig bericht. */
.blok-goed {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--geel-zacht);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding-blok);
  box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--geel);
  margin-right: var(--vspr-s);
  margin-bottom: calc(var(--sp-6) + var(--vspr-s));
}

.blok-goed-teken { font-family: var(--mono); font-weight: 700; color: var(--roze); }
.blok-goed-tekst { font-family: var(--display); font-size: var(--t-lead); }

/* De cijferstrip krijgt de gele lijn erboven in plaats van een grijze. */
.kortstrip { border-top: var(--lijn-dik) solid var(--ink); }
.kortstrip-cijfer { color: var(--ink); }

/* De knop "alles bekijken" hoort bij het gele blok. */
.blok-aandacht .blok-meer { border-color: var(--ink); color: var(--ink); }
.blok-aandacht .blok-meer:hover { background: var(--geel); border-color: var(--ink); }

@media (min-width: 900px) {
  /* Naast elkaar hebben de twee kolommen dezelfde bovenlijn nodig. */
  .dash-kolommen > .blok { margin-bottom: var(--vspr-s); }
}

/* ============================================================
   LIJSTSCHERMEN (klanten, en straks de rest)
   ------------------------------------------------------------
   Het oude scherm gebruikte 44% van een telefoonscherm aan een
   eyebrow, een titel die de kopbalk herhaalde, en een filterpaneel
   met vijf keuzelijsten. Nu: één identiteit, zoeken en filteren op
   één regel, en het filter dichtgeklapt tot je erom vraagt.
   ============================================================ */

.lijstkop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.lijstkop-titel {
  font-family: var(--display);
  font-size: clamp(1.45rem, 5.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
}

.lijstkop-sub {
  margin: var(--sp-2) 0 0;
  font-family: var(--mono);
  font-size: var(--t-klein);
  color: var(--label);
}

/* ---------- Zoeken, filteren en toevoegen op één regel ---------- */
.zoekrij {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.zoekrij .zoekveld { flex: 1 1 auto; min-width: 0; }
.zoekrij .zoekveld { display: flex; }
.zoekrij .zoekveld input { min-height: 44px; height: 100%; }

.zoekrij-knop {
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

/* Een filter dat aanstaat mag je zien zonder het paneel te openen. */
.zoekrij-knop.is-actief {
  border-color: var(--ink);
  background: var(--geel);
  color: var(--ink);
}

.zoekrij-plus { display: inline-flex; align-items: center; gap: 6px; }

/* Op een telefoon alleen de plus; de tekst zou de zoekbalk opeten. */
@media (max-width: 560px) {
  .zoekrij-plus-tekst { display: none; }
  .zoekrij-plus { padding-left: var(--sp-4); padding-right: var(--sp-4); font-size: 1.2rem; }
}

/* ---------- Het filterpaneel ---------- */
.filterpaneel {
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--vlak);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding-blok);
  box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--geel);
  margin-right: var(--vspr-s);
}

.filterpaneel[hidden] { display: none; }

.filterpaneel-voet {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--lijn);
}

.chiprij { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.chip {
  min-height: 40px;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: var(--t-klein);
  color: var(--ink);
  background: var(--paper);
  border: var(--lijn-dik) solid var(--lijn);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--snel), background var(--snel);
}

.chip:hover { border-color: var(--muted); }
.chip.is-aan { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.lijst-uitslag {
  margin: 0 0 var(--sp-3);
  font-family: var(--mono);
  font-size: var(--t-klein);
  color: var(--label);
}

/* De schakelaar lijst/tabel heeft op een telefoon geen zin: een tabel
   op een klein scherm lees je niet. */
.schakel-breed { display: none; margin-bottom: var(--sp-3); }

@media (min-width: 900px) {
  .schakel-breed { display: inline-flex; }
}

/* ---------- De lijst zelf ---------- */
.blok-lijst {
  padding: 0 var(--sp-4);
  background: var(--vlak);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding-blok);
  box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--ink);
  margin-right: var(--vspr-s);
  margin-bottom: calc(var(--sp-6) + var(--vspr-s));
}

.rijlijst { list-style: none; margin: 0; padding: 0; }
.rijlijst > li + li { border-top: 1px solid var(--lijn); }

.klantrij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--sp-3);
  min-height: 60px;
  padding: var(--sp-3) 0;
  color: var(--ink);
  text-decoration: none;
}

.klantrij:hover .klantrij-naam { color: var(--roze-diep); }

/* De statustag staat rechts en beslaat beide regels. */
.klantrij > .tag { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }

.klantrij-meta { grid-column: 1; min-width: 0; }

/* Contactpersoon en lopend werk staan op een telefoon achter elkaar. */
.klantrij-contact:not(:empty) + .klantrij-werk:not(:empty)::before { content: " · "; }

.klantrij-naam {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-body);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.klantrij-meta {
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Op een breed scherm heeft de regel ruimte voor kolommen: wie het is,
   wie je spreekt, wat er loopt, hoe het ervoor staat. Op een telefoon
   zakt dat terug naar twee regels. */
@media (min-width: 900px) {
  .klantrij {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto;
    gap: var(--sp-4);
  }

  /* Het omhulsel verdwijnt, zodat de twee spans zelf kolommen worden. */
  .klantrij-meta { display: contents; }
  .klantrij > .tag { grid-column: 4; grid-row: 1; }
  .klantrij-contact:not(:empty) + .klantrij-werk:not(:empty)::before { content: none; }
}

/* ============================================================
   INKLAPBARE FORMULIERSECTIES
   ------------------------------------------------------------
   Een nieuwe klant hoeft niet meteen drieëntwintig velden te zien.
   De secties die je zelden nodig hebt staan dicht, met eronder een
   hint van wat erin zit. Bij het bewerken gaan de secties die al
   iets bevatten vanzelf open.
   ============================================================ */

.form-blok-vouw {
  border-top: 1px solid var(--lijn);
  padding-top: var(--sp-3);
}

.form-vouw-kop {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-2) 0;
  cursor: pointer;
  list-style: none;
}

/* Het standaard driehoekje van de browser weg; we tekenen zelf een plus. */
.form-vouw-kop::-webkit-details-marker { display: none; }
.form-vouw-kop::marker { content: ""; }

.form-vouw-titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-body);
}

.form-vouw-uitleg {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Een plus die een min wordt: duidelijker dan een pijltje. */
.form-vouw-teken {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border: var(--lijn-dik) solid var(--ink);
  border-radius: 50%;
}

.form-vouw-teken::before,
.form-vouw-teken::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  background: var(--ink);
}

.form-vouw-teken::before { width: 10px; height: 2px; }
.form-vouw-teken::after { width: 2px; height: 10px; transition: opacity var(--snel); }

.form-blok-vouw[open] .form-vouw-teken::after { opacity: 0; }
.form-blok-vouw[open] .form-vouw-teken { background: var(--geel); }

.form-vouw-kop:hover .form-vouw-teken { background: var(--geel); }

/* Zichtbare focus op de hele kop, want dat is de knop. */
.form-vouw-kop:focus-visible {
  outline: var(--lijn-dik) solid var(--geel);
  outline-offset: 2px;
  border-radius: var(--ronding);
}

.form-blok-vouw > .form-raster { padding-bottom: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  .form-vouw-teken::after { transition: none; }
}

/* ============================================================
   HET KLANTDOSSIER
   ------------------------------------------------------------
   Contact stond onderaan, achter vijf secties. Om te bellen moest
   je dus langs alles heen scrollen. Nu staat het bovenaan, en de
   naslag (adres, tarief, links) zit ingeklapt onderaan: dat lees je
   zelden, maar het moet wel te vinden zijn.
   ============================================================ */

.terugrij { margin: 0 0 var(--sp-3); }

.dossierkop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.dossierkop-tekst { min-width: 0; }

.dossierkop-knoppen {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.snel-knop-klein { width: 40px; height: 40px; font-size: 1.3rem; }

/* ---------- Direct contact ---------- */
.contactrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  /* Alle knoppen even hoog, ook als een label over twee regels valt. */
  grid-auto-rows: 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.contactknop {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-2) var(--sp-3);
  color: var(--ink);
  text-decoration: none;
  background: var(--vlak);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  transition: background var(--snel);
}

.contactknop:hover { background: var(--geel-zacht); }

.contactknop-wat {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-body);
}

/* Het ikoon in roze: het enige kleuraccent op deze knoppen. */
.contactknop-ikoon { flex: 0 0 auto; color: var(--roze); }

.contactknop:hover .contactknop-ikoon { color: var(--roze-diep); }

/* ---------- De blokken in het dossier ---------- */
.blok-dossier {
  padding: var(--sp-4);
  background: var(--vlak);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding-blok);
  margin-right: var(--vspr-s);
  margin-bottom: calc(var(--sp-5) + var(--vspr-s));
}

.blok-dossier.rand-ink  { box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--ink); }
.blok-dossier.rand-roze { box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--roze); }
.blok-dossier.rand-geel { box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--geel); }

/* Te laat is het enige blok dat rood mag zijn: een echte achterstand, geen
   smaakje. */
.blok-dossier.rand-alarm { box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--alarm); }
.blok-dossier.rand-alarm .blok-kop h2 .haak { color: var(--alarm); }

/* Een regel tekst onder een blokkop, voor als de titel alleen niet genoeg
   uitlegt. */
.blok-uitleg {
  font-size: var(--t-label);
  color: var(--muted);
  margin: -4px 0 var(--sp-3);
}

.blok-dossier .blok-kop h2 .haak { color: var(--roze); }
.blok-link-knop { margin-left: auto; }

.dossier-bedrag {
  font-family: var(--mono);
  font-size: var(--t-klein);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- De naslag onderaan ---------- */
.dossier-naslag {
  padding: var(--sp-4);
  background: var(--vlak-2);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-blok);
  margin-bottom: var(--sp-6);
}

.dossier-naslag > .form-vouw-kop { padding-top: 0; }

.naslag-raster {
  display: grid;
  gap: var(--sp-5);
  padding-top: var(--sp-4);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--lijn);
}

@media (min-width: 700px) {
  .naslag-raster { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* Op een breed scherm staan de werkblokken naast elkaar. */
@media (min-width: 1100px) {
  .blok-dossier { margin-bottom: var(--sp-5); }
}

/* Een taaknaam mag afbreken, maar niet eindeloos: bij meer dan twee regels
   valt de lijst uit elkaar en zie je niet meer hoeveel taken er staan. Wie de
   hele naam wil lezen, opent de taak. */
.regel-naam {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.regel-rechts { flex: 0 0 auto; }

/* Regels binnen een dossierblok hebben geen eigen kader nodig; het blok
   eromheen doet dat al. Een kaart in een kaart maakt het onrustig. */
.blok-dossier .regel {
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  background: none;
}

.blok-dossier .regel + .regel {
  margin-top: 0;
  border-top: 1px solid var(--lijn);
}

.blok-dossier .regel:hover { transform: none; background: var(--vlak-2); }

/* Binnen een blok heeft een regel geen eigen kader, maar een te late taak
   moet wel opvallen. Die krijgt daarom zijn eigen zachte rode vlak terug. */
.blok-dossier .regel.is-te-laat {
  background: var(--alarm-zacht);
  border-radius: var(--ronding);
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}
.blok-dossier .regel.is-te-laat:hover { background: #fbe0de; }

/* In het blok "Te laat" hoeft niet ook nog eens elke regel rood: daar is
   vlak per regel: dan is het blok zelf het signaal. */
.blok-dossier.rand-alarm .regel.is-te-laat { background: none; padding-left: 0; padding-right: 0; }
.blok-dossier.rand-alarm .regel.is-te-laat:hover { background: var(--vlak-2); }

/* De kop van een blok mag afbreken als er een knop naast staat. */
.blok-kop { flex-wrap: wrap; }
.blok-kop h2 { min-width: 0; overflow-wrap: anywhere; }

/* De knop met de taaknaam is een knop, dus centreert de browser hem.
   Hier hoort de tekst gewoon links te staan. */
.regel-links { text-align: left; align-items: flex-start; }

/* Op een telefoon staan de drie contactknoppen naast elkaar. Daar is te
   weinig breedte voor een icoon náást de tekst, dus komt het erboven. */
@media (max-width: 600px) {
  .contactrij { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .contactknop {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: var(--sp-3) 6px;
    text-align: center;
  }

  .contactknop-wat {
    font-size: var(--t-klein);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   TAKEN: DE LIJST ZO HOOG MOGELIJK IN BEELD
   ------------------------------------------------------------
   Zeven tabbladen, drie keuzelijsten en een kop met vier knoppen: op een
   telefoon zag je daardoor pas taken als je scrolde. Nu staat de keuze
   welke taken je ziet in één keuzelijst met de aantallen erin, blijft
   zoeken zichtbaar, en zit de rest achter de filterknop.
   ============================================================ */

.lijstkop-krap {
  align-items: center;
  margin-bottom: var(--sp-3);
}

.schakel-krap { flex: 0 0 auto; }
.schakel-krap button { padding: 7px 11px; font-size: .62rem; }

.takenbalk {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.takenbalk .veld-kaal { flex: 1 1 auto; min-width: 0; gap: 0; }

.kieslijst {
  min-height: 44px;
  font-weight: 700;
  width: 100%;
}

.takenbalk-knop {
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

.takenbalk-plus { display: inline-flex; align-items: center; gap: 6px; }
.takenbalk-plus [aria-hidden] { font-size: 1.15rem; line-height: 1; }

.zoekveld-vol {
  display: flex;
  width: 100%;
  margin-bottom: var(--sp-3);
}

.zoekveld-vol input { min-height: 44px; }

/* Op een telefoon is de plusknop alleen een plus: de tekst kost breedte
   die het zoekveld beter kan gebruiken. */
@media (max-width: 600px) {
  .takenbalk-plus-tekst { display: none; }
  .takenbalk-plus { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}

/* ---------- Het filter als bodempaneel ---------- */

.filterdek { display: none; }

@media (max-width: 699px) {
  .filterdek {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(22, 22, 26, .38);
    z-index: var(--z-waas);
  }

  .filterpaneel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modaal);
    margin: 0;
    max-height: 82vh;
    overflow-y: auto;
    border: 0;
    border-top: var(--lijn-dik) solid var(--ink);
    border-radius: var(--ronding-blok) var(--ronding-blok) 0 0;
    box-shadow: var(--schaduw-3);
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
    animation: paneel-omhoog .22s ease-out;
  }

  /* Een greep bovenaan: dit paneel komt van onder en gaat weer weg. */
  .filterpaneel::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto var(--sp-3);
    border-radius: 999px;
    background: var(--lijn);
  }

  .filterpaneel-voet {
    position: sticky;
    bottom: 0;
    background: var(--vlak);
    margin-top: var(--sp-4);
  }
}

@keyframes paneel-omhoog {
  from { transform: translateY(12%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ============================================================
   TAKEN: DE REGEL
   ============================================================ */

/* Status en startknop staan naast elkaar. Op een telefoon is daar naast de
   taaknaam geen ruimte voor, dus zakken ze samen naar een tweede regel: de
   naam krijgt de volle breedte en de knoppen blijven groot genoeg voor een
   duim. Zie de media query onderaan dit blok. */
.regel-rechts {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
}

.regel { position: relative; }

/* ---------- De timerknop ---------- */

.tijdknop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--paper);
  color: var(--label);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--snel), color var(--snel), transform var(--snel);
}

.tijdknop:hover { border-color: var(--ink); color: var(--ink); background: var(--vlak-2); }
.tijdknop:active { transform: scale(.97); }
.tijdknop-teken { font-size: .55rem; opacity: .8; }
.tijdknop-woord { font-weight: 700; letter-spacing: .04em; }

/* Loopt de klok, dan is dat de opvallendste knop op de regel. */
.tijdknop.is-loopt {
  background: var(--roze);
  border-color: var(--roze);
  color: #fff;
  font-weight: 700;
}
.tijdknop.is-loopt:hover { background: var(--roze-diep); border-color: var(--roze-diep); }
.tijdknop.is-loopt .tijdknop-teken { opacity: 1; }

/* Wel begonnen, nu gepauzeerd: de tijd staat er nog, de knop schreeuwt niet. */
/* Nog niet ingepland: dan is dat de vraag, niet "start". */
.tijdknop.is-plannen {
  border-color: var(--geel-diep);
  color: var(--geel-diep);
  background: var(--geel-zacht);
}
.tijdknop.is-plannen:hover { border-color: var(--ink); color: var(--ink); background: var(--geel-zacht); }

.tijdknop.is-pauze {
  border-color: var(--roze);
  color: var(--roze-diep);
  background: var(--roze-zacht);
}

.tijdknop-tijd { font-variant-numeric: tabular-nums; opacity: .9; }

/* Op een aanraakscherm mag de knop niet kleiner zijn dan een duim. */
@media (pointer: coarse) {
  .tijdknop { min-height: 44px; padding: 8px 14px; }
}

/* ---------- Afvinken ---------- */

.afvink:active { transform: scale(.9); }
.afvink.af { animation: vink-pop .32s cubic-bezier(.2, 1.5, .4, 1); }

@keyframes vink-pop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Het "Yes" verschijnt alleen op het moment van afvinken. */
.regel-jes {
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-50%) scale(.8);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--roze);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .04em;
  opacity: 0;
  pointer-events: none;
}

.regel.is-klaar { border-color: var(--roze); background: var(--roze-zacht); }
.regel.is-klaar .afvink { background: var(--roze); border-color: var(--roze); color: #fff; }
.regel.is-klaar .regel-rechts { opacity: 0; transition: opacity .12s ease-out; }
.regel.is-klaar .regel-jes { animation: jes .62s ease-out forwards; }
.regel.is-klaar .regel-naam { text-decoration: line-through; color: var(--muted); }

@keyframes jes {
  0%   { opacity: 0; transform: translateY(-50%) scale(.8); }
  22%  { opacity: 1; transform: translateY(-50%) scale(1); }
  70%  { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) scale(.96); }
}

/* Wie minder beweging wil, krijgt de bevestiging zonder animatie. */
@media (prefers-reduced-motion: reduce) {
  .afvink.af,
  .regel.is-klaar .regel-jes { animation: none; }
  .regel.is-klaar .regel-jes { opacity: 1; }
  .filterpaneel { animation: none; }
}

/* ============================================================
   KANBAN OP EEN TELEFOON
   ============================================================ */

.kanban-tabs { display: none; }

.kanban-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--paper);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.kanban-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.kanban-tab .telling { opacity: .75; font-variant-numeric: tabular-nums; }

/* De pijlen om een taak een kolom op te schuiven. Met een muis sleep je,
   met een duim tik je. */
.kaart-verplaats {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--lijn);
}

.verplaatsknop {
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  background: var(--vlak-2);
  font-size: 1rem;
  line-height: 1;
  transition: background var(--snel), border-color var(--snel);
}

.verplaatsknop:hover:not(:disabled) { background: var(--paper); border-color: var(--ink); }
.verplaatsknop:active:not(:disabled) { transform: scale(.97); }
.verplaatsknop:disabled { opacity: .3; cursor: default; }

@media (max-width: 899px) {
  .kanban-tabs {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-3);
    scrollbar-width: none;
  }

  .kanban-tabs::-webkit-scrollbar { display: none; }

  /* Eén kolom per scherm, en veeg naar de volgende. */
  .kanban { scroll-snap-type: x mandatory; gap: var(--sp-3); }
  /* scroll-snap-stop zorgt dat een veeg op één kolom stopt in plaats van
     er twee door te schieten. */
  .kanban-kolom { flex: 0 0 100%; max-height: none; scroll-snap-stop: always; }
  .kanban-lijst { max-height: 62vh; }
}

/* ============================================================
   TAKEN: STATUS KIEZEN IN DE LIJST
   ============================================================ */

/* De status is geen plaatje maar een keuze. Hij ziet eruit als het label dat
   er stond, in de kleur van die status, maar je kunt hem meteen omzetten
   zonder de taak te openen. De kleur komt van .tag-ok, .tag-geel enzovoort;
   hier regelen we alleen de vorm. */
.tagkeuze {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 6px;
  cursor: pointer;
  transition: filter var(--snel);
}

.tagkeuze:hover { filter: brightness(.96); }

.tagkeuze-lijst {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  max-width: 8.5rem;
  text-overflow: ellipsis;
}

.tagkeuze-lijst:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* De opties zelf tekent het besturingssysteem; daar hoort gewone tekst in. */
.tagkeuze-lijst option { color: var(--ink); background: var(--paper); }

.tagkeuze-pijl { font-size: .6rem; opacity: .7; pointer-events: none; }

@media (pointer: coarse) {
  .tagkeuze { min-height: 44px; padding-left: 12px; padding-right: 10px; }
}

/* ============================================================
   TAKEN: DE REGEL OP EEN TELEFOON
   ============================================================ */

/* Naast een taaknaam past geen status én een startknop. Ze zakken daarom
   samen naar een tweede regel, uitgelijnd onder de naam. De naam houdt de
   volle breedte, de knoppen houden hun formaat. */
@media (max-width: 699px) {
  .regel {
    flex-wrap: wrap;
    row-gap: var(--sp-3);
  }

  .regel-rechts {
    flex: 1 0 100%;
    justify-content: space-between;
    padding-left: calc(20px + var(--sp-3));
  }

  /* In een dossierblok staat de regel al ingesprongen. */
  .blok-dossier .regel-rechts { padding-left: 0; }
}

/* ============================================================
   TAKEN: HELEMAAL BIJ
   ============================================================ */

/* Staat er niets te laat, dan zeggen we dat ook. Geen kaart, geen kader:
   één rustige regel die je meeneemt in het goede nieuws. */
.bij-melding {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--ronding);
  background: var(--geel-zacht);
  color: var(--geel-diep);
  font-size: var(--t-klein);
  font-weight: 600;
}

.bij-teken { font-size: .9rem; line-height: 1; }

/* ============================================================
   NIET GELUKT, EN NOG IN TE PLANNEN
   ============================================================ */

/* Geen alarm maar een keuzemoment, dus hetzelfde rustige blok als de rest
   met een ink-randje in plaats van rood. */
.blok-nietgelukt {
  padding: var(--sp-4);
  background: var(--vlak);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding-blok);
  margin-right: var(--vspr-s);
  margin-bottom: calc(var(--sp-6) + var(--vspr-s));
  box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--ink);
}

.nietgelukt-lijst { display: grid; gap: var(--sp-3); }

.nietgelukt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--lijn);
}

.nietgelukt:first-child { padding-top: 0; border-top: 0; }

.nietgelukt-tekst { display: grid; gap: 2px; min-width: 0; flex: 1 1 12rem; }

.nietgelukt-naam {
  font-weight: 700;
  font-size: var(--t-klein);
  overflow-wrap: anywhere;
}

.nietgelukt-meta {
  font-size: var(--t-label);
  color: var(--muted);
  font-family: var(--mono);
}

.nietgelukt-keuze { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Op een telefoon staan de drie keuzes onder elkaar en over de volle breedte:
   met een duim mik je niet op drie knopjes naast elkaar. */
@media (max-width: 640px) {
  .nietgelukt-keuze { width: 100%; }
  .nietgelukt-keuze .btn { flex: 1 1 100%; min-height: 44px; }
}

/* Nog in te plannen is geen blok maar een regel: het is een herinnering, geen
   werk dat je hier afmaakt. */
.blok-inplannen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-6);
  background: var(--geel-zacht);
  border-radius: var(--ronding);
}

.inplannen-tekst {
  flex: 1;
  min-width: 12rem;
  font-size: var(--t-klein);
  color: var(--geel-diep);
  font-weight: 600;
}

.inplannen-teken { margin-right: 6px; }

/* ============================================================
   PLANNING: DE KALENDER

   De omlijsting (kalender-balk, weekraster, maandraster) komt uit
   marketing.css; twee kalenders die er anders uitzien is er één te veel.
   Hier staat alleen wat eigen is aan de planning: het kaartje van een
   agendapunt, de dagweergave en de tellingen in de maand.
   ============================================================ */

.plankaart {
  display: grid;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border-radius: var(--ronding);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--muted);
  background: var(--paper);
  color: inherit;
  transition: transform var(--snel), box-shadow var(--snel);
}

.plankaart:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }

/* Elke soort zijn eigen streep, in de kleuren die de app al gebruikt. */
.plankaart.cat-taak      { border-left-color: var(--roze);      background: var(--roze-zacht); }
.plankaart.cat-project   { border-left-color: var(--roze-diep); }
.plankaart.cat-onderhoud { border-left-color: var(--info); }
.plankaart.cat-domein    { border-left-color: var(--geel-diep); }
.plankaart.cat-ontwerp   { border-left-color: var(--roze); }
.plankaart.cat-factuur   { border-left-color: var(--ok); }
.plankaart.cat-offerte   { border-left-color: var(--lijn); }
.plankaart.is-urgent     { border-left-color: var(--alarm); }

.plankaart-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.plankaart-soort {
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--label);
}

.plankaart-tijd {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plankaart-titel {
  font-size: var(--t-label);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.plankaart-meta { font-size: .62rem; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- Eén dag ---------- */

.dagplan {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
}

.dagplan.is-vandaag { border-color: var(--roze); box-shadow: 0 0 0 2px var(--roze-zacht); }

/* De tijd staat in een eigen kolom, zodat je verticaal langs de klok leest. */
.dagplan-regel {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

.dagplan-tijd {
  font-family: var(--mono);
  font-size: var(--t-klein);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--label);
  padding-top: 7px;
}

.dagplan-kop {
  margin-top: var(--sp-3);
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--label);
}

.dagplan-leeg { color: var(--muted); font-size: var(--t-klein); padding: var(--sp-4) 0; }
.dagplan-erbij { justify-self: start; margin-top: var(--sp-2); }

/* ---------- De tellingen in de maand ---------- */

.maanddag-tellingen { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.maanddag-tellingen b,
.legenda-item i.tel-taak,
.legenda-item i.tel-deadline {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  line-height: 1;
}

.tel-taak { background: var(--roze); color: #fff; }
.tel-deadline { background: var(--geel); color: var(--ink); }
.legenda-item i.tel-taak,
.legenda-item i.tel-deadline { min-width: 14px; height: 14px; }

/* ============================================================
   PLANNING: DE TOON-KEUZE
   ============================================================ */

/* Een dichtgeklapte keuze verbergt wat je gekozen hebt, dus staat het er
   gewoon naast. */
.toonbalk {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.toonknop { flex-shrink: 0; }

.toonknop-aantal {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: .6rem;
  line-height: 1;
}

.toonbalk-samenvatting {
  min-width: 0;
  font-size: var(--t-label);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* De chips in dit paneel zijn aan of uit, niet één uit een rijtje. */
.chip .telling {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

@media (pointer: coarse) {
  .toonknop { min-height: 44px; }
}

/* ============================================================
   FACTURATIE

   Drie bedragen om iets mee te doen, daaronder de regels, onderaan de omzet.
   Geen zes even grote kaarten meer: dan is alles even belangrijk en dus niets.
   ============================================================ */

.geldrij {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* Elk bedrag is een knop: hij zet de lijst eronder op die weergave. */
.geldpost {
  display: grid;
  gap: 2px;
  padding: var(--sp-3);
  text-align: left;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  transition: border-color var(--snel), background var(--snel);
}

.geldpost:hover { border-color: var(--ink); background: var(--vlak-2); }
.geldpost.is-geel { border-left: 4px solid var(--geel); }
.geldpost.is-alarm { border-left: 4px solid var(--alarm); }

.geldpost-label {
  font-size: var(--t-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--label);
}

.geldpost-bedrag {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.geldpost.is-alarm .geldpost-bedrag { color: var(--alarm); }
.geldpost-meta { font-size: .62rem; color: var(--muted); }

/* ---------- De regels ----------

   Precies de opmaak van een klantregel: één blok met een verspringend randje,
   en daarin regels die door een dun lijntje gescheiden worden. Geen losse
   kaartjes met elk een eigen kader — dat is een kaart in een kaart. */

.docregel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nummer bedrag"
    "klant  bedrag"
    "oms    oms"
    "datum  status";
  align-items: center;
  gap: 2px var(--sp-3);
  min-height: 60px;
  padding: var(--sp-3) 0;
  color: var(--ink);
  text-decoration: none;
}

.docregel:hover .docregel-klant { color: var(--roze-diep); }

/* Te laat of verlopen: een streepje links, geen vlak. In een blok vol regels
   is een gekleurd vlak per regel te veel. */
.docregel.is-dringend {
  padding-left: var(--sp-3);
  box-shadow: inset 3px 0 0 var(--alarm);
}

.docregel-nummer {
  grid-area: nummer;
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--muted);
}

.docregel-klant {
  grid-area: klant;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-body);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.docregel-oms {
  grid-area: oms;
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docregel-datum {
  grid-area: datum;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--muted);
}

.docregel-eind.is-dringend { color: var(--alarm); font-weight: 700; }

.docregel-bedrag {
  grid-area: bedrag;
  align-self: center;
  font-family: var(--mono);
  font-size: var(--t-klein);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.docregel-status { grid-area: status; justify-self: end; align-self: center; }

/* Op een breed scherm heeft de regel ruimte voor kolommen, net als bij
   klanten: welk nummer, welke klant, waarover, wanneer, hoeveel, hoe het
   ervoor staat. */
@media (min-width: 900px) {
  .docregel {
    grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1.3fr) 10rem 7.5rem 7.5rem;
    grid-template-areas: "nummer klant oms datum bedrag status";
    gap: var(--sp-3);
  }

  .docregel-bedrag { text-align: right; }
  .docregel-datum { flex-wrap: nowrap; }
}

/* ---------- Onderaan ---------- */

.omzetregel {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--vlak-2);
  border-radius: var(--ronding);
  font-size: var(--t-klein);
  color: var(--muted);
}

.omzetregel b { color: var(--ink); font-variant-numeric: tabular-nums; }
.omzetregel-uitleg { display: block; font-size: .62rem; margin-top: 2px; }

/* Instellingen die je bijna nooit nodig hebt, staan onderaan. */
.pagina-voet {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-4);
}

@media (max-width: 640px) {
  .geldrij { gap: 5px; }
  .geldpost { padding: var(--sp-2); }
  .geldpost-bedrag { font-size: 1rem; }
  .geldpost-label { font-size: .55rem; letter-spacing: .04em; }
  .geldpost-meta { display: none; }
}

/* ============================================================
   HET PRULLENBAKJE
   ============================================================ */

/* Verwijderen is het enige onomkeerbare in de app. Als woord trekt het meer
   aandacht dan het verdient en staat het naast "Opslaan" alsof het een gewone
   keuze is. Als bakje is het rustig aanwezig, en pas als je erheen gaat kleurt
   het rood. De bevestiging die erop volgt is niet veranderd. */
.prullenknop {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--ronding);
  background: none;
  color: var(--muted);
  transition: color var(--snel), background var(--snel), border-color var(--snel);
}

.prullenknop:hover {
  color: var(--alarm);
  background: var(--alarm-zacht);
  border-color: var(--alarm);
}

.prullenknop:active { transform: scale(.94); }

.prullenknop:focus-visible {
  outline: 2px solid var(--alarm);
  outline-offset: 2px;
}

/* In de voet van een formulier staat hij links, los van opslaan en annuleren. */
.prullenknop.links { margin-right: auto; }

@media (pointer: coarse) {
  .prullenknop { width: 44px; height: 44px; }
}

/* In een formulierrij die op een telefoon onder elkaar staat, mag het bakje
   niet ineens de volle breedte pakken zoals de knoppen ernaast. */
@media (max-width: 640px) {
  .modaal-voet .prullenknop { width: 44px; align-self: flex-start; }
}

/* ============================================================
   OPSLAANMENU

   Een <details> in plaats van eigen klikcode: de browser regelt open- en
   dichtklappen, het toetsenbord en de toegankelijkheid al.
   ============================================================ */

.opslaanmenu { position: relative; display: inline-block; }

.opslaanmenu > summary {
  list-style: none;
  cursor: pointer;
}

.opslaanmenu > summary::-webkit-details-marker { display: none; }
.opslaanmenu > summary::after { content: " ▾"; font-size: .7em; opacity: .7; }

.opslaanmenu-lijst {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 12rem;
  padding: 5px;
  display: grid;
  gap: 2px;
  background: var(--paper);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  box-shadow: var(--schaduw-3);
}

.opslaanmenu-lijst button {
  padding: 9px 10px;
  min-height: 40px;
  text-align: left;
  border-radius: var(--ronding);
  font-size: var(--t-klein);
  transition: background var(--snel);
}

.opslaanmenu-lijst button:hover { background: var(--vlak-2); }
.opslaanmenu-lijst button:focus-visible { outline: 2px solid var(--roze); outline-offset: -2px; }

/* Op een telefoon zou een zwevend menu half buiten beeld vallen. Daar klapt
   het gewoon onder de knop uit, over de volle breedte. */
@media (max-width: 640px) {
  /* De knoprij is een flexrij; zonder deze regel blijft het menu zo smal
     als het woord "Opslaan". */
  .opslaanmenu { display: block; flex: 1 1 100%; }
  .opslaanmenu > summary { width: 100%; text-align: center; }

  .opslaanmenu-lijst {
    position: static;
    margin-top: 6px;
    min-width: 0;
  }

  .opslaanmenu-lijst button { min-height: 44px; }
}

/* ============================================================
   DE KALENDER

   Dezelfde opmaak als de marketingkalender in de volledige versie. Die
   module zit niet in dit pakket, dus staat de kalender hier bij de
   componenten. Verandert er iets aan, dan hoort het op beide plekken.
   ============================================================ */

.kalender-balk {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
}

.kalender-titel {
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: 800;
  letter-spacing: -.01em;
  flex: 1;
  min-width: 180px;
  text-align: center;
}

.kalender-balk .btn::after { display: none; }

/* ============================================================
   2. WEEKOVERZICHT
   ============================================================ */

.weekraster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.weekdag {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  overflow: hidden;
}

.weekdag.is-weekend { background: var(--vlak-2); }

.weekdag.is-vandaag {
  border-color: var(--roze);
  box-shadow: 0 0 0 2px var(--roze-zacht);
}

.weekdag-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--lijn);
  background: var(--vlak-2);
}

.weekdag.is-vandaag .weekdag-kop { background: var(--roze); color: #fff; }

.weekdag-naam {
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--label);
}
.weekdag.is-vandaag .weekdag-naam { color: #fff; }

.weekdag-nr {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.weekdag-lijst {
  flex: 1;
  padding: 6px;
  display: grid;
  gap: 5px;
  align-content: start;
}

.weekdag-leeg { color: #c9c9d2; font-size: var(--t-label); text-align: center; padding: var(--sp-3) 0; }

.weekdag-erbij {
  padding: 5px;
  border-top: 1px dashed var(--lijn);
  color: var(--muted);
  font-size: var(--t-klein);
  font-weight: 700;
  transition: background var(--snel), color var(--snel);
}
.weekdag-erbij:hover { background: var(--geel-zacht); color: var(--ink); }


.maandraster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.maand-kop {
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--label);
  text-align: center;
  padding-bottom: 4px;
}

.maanddag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 76px;
  padding: 6px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  cursor: pointer;
  transition: border-color var(--snel), background var(--snel);
}

.maanddag:hover { border-color: var(--ink); background: var(--geel-zacht); }
.maanddag.is-buiten { background: var(--vlak-2); opacity: .5; }
.maanddag.is-vandaag { border-color: var(--roze); box-shadow: inset 0 0 0 2px var(--roze-zacht); }

.maanddag-nr {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.maanddag.is-vandaag .maanddag-nr { color: var(--roze-diep); }









/* ============================================================
   5. LEGENDA
   ============================================================ */

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: var(--vlak-2);
  border-radius: var(--ronding);
  font-size: var(--t-label);
  color: var(--label);
}

.legenda-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.legenda-item i { width: 11px; height: 11px; border-radius: 2px; background: var(--muted); display: block; }



.legenda-uitleg { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }

/* ============================================================
   HET OOGJE BIJ EEN WACHTWOORD
   ============================================================ */

.wachtwoordveld { position: relative; display: block; }

/* Ruimte voor het oogje, zodat de tekst er niet onder doorloopt. */
.wachtwoordveld input { padding-right: 46px; }

.oogje {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--ronding);
  background: none;
  color: var(--muted);
  transition: color var(--snel), background var(--snel);
}

.oogje:hover { color: var(--ink); background: var(--vlak-2); }
.oogje:focus-visible { outline: 2px solid var(--roze); outline-offset: 1px; }

/* Zichtbaar wachtwoord: het streepje door het oog verdwijnt en het oogje
   krijgt de accentkleur, zodat je ziet dat je wachtwoord nu leesbaar is. */
.oogje-streep { transition: opacity var(--snel); }
.oogje.is-zichtbaar { color: var(--roze); }
.oogje.is-zichtbaar .oogje-streep { opacity: 0; }

@media (pointer: coarse) {
  .oogje { width: 40px; height: 40px; }
  .wachtwoordveld input { padding-right: 52px; }
}