/* CN-beheer · de agenda (M7; js/views/beheer/agenda.js). Voorvoegsel agd- (ag- is van de aangifte).
   Telefoon eerst (390), vanaf 768 de week als zeven kolommen. Geen echte kleur, net als de site: de soorten verschillen in vlak en lijn.
     kennismaking  nude vlak (zoals een gekozen tab)        opname       inkt (het zwaarste: een opnamedag)
     klus          papier met een inktlijn links           privé-blok   gearceerd, rustig
     herinnering   een lijntje met een belletje            voorstel     gestippelde rand en het woord "voorstel"
     afgezegd      doorgestreept, gestippeld
   Maten in het tijdraster via CSSOM (--top, --len, --baan, --banen, --rijen): 1 rij = een kwartier = var(--slot). */

.agd { --slot: 15px; --uren-w: 46px; }
@media (min-width: 768px) { .agd { --slot: 16px; --uren-w: 54px; } }

/* ---------------------------------------------------------------- kop en vandaag in één oogopslag */
.agd-kop { padding-bottom: 12px; }
.agd-nu {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 0 18px; padding: 14px 16px 14px 14px;
  background: var(--cn-card); border: 1px solid var(--cn-hair); border-radius: var(--cn-r); box-shadow: var(--cn-shadow-1); color: inherit; text-decoration: none;
  transition: border-color var(--cn-t-fast);
}
.agd-nu:hover { border-color: var(--cn-line-2); }
.agd-nu-kal { display: flex; flex-direction: column; align-items: stretch; text-align: center; border: 1px solid var(--cn-line-2); border-radius: 14px; overflow: hidden; background: var(--cn-field); }
.agd-nu-kal .m { background: var(--cn-solid); color: var(--cn-on-accent); font: 500 11px/1 var(--cn-f-sans); letter-spacing: .16em; text-transform: uppercase; padding: 5px 0 4px; }
.agd-nu-kal .d { font: 400 30px/1 var(--cn-f-serif); padding: 7px 0 2px; font-variant-numeric: lining-nums; }
.agd-nu-kal .w { font-size: 11.5px; color: var(--cn-muted); padding: 0 0 7px; letter-spacing: .04em; }
.agd-nu-tekst { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.agd-nu-eyebrow { font: 500 var(--cn-fs-label)/1.4 var(--cn-f-sans); letter-spacing: var(--cn-track); text-transform: uppercase; color: var(--cn-muted); }
.agd-nu-zin { font: 400 17.5px/1.45 var(--cn-f-sans); color: var(--cn-text); }
.agd-nu-zin strong { font-weight: 500; }
.agd-nu-sub { font-size: var(--cn-fs-s); color: var(--cn-muted); line-height: 1.45; }
.agd-nu-balk { position: relative; display: block; height: 10px; margin: 9px 0 2px; border-radius: 6px; background: var(--cn-bg-2); overflow: hidden; }
.agd-nu-blok { position: absolute; top: 2px; bottom: 2px; left: calc(var(--van) * 1%); width: calc(var(--len) * 1%); border-radius: 3px; background: var(--cn-line-2); }
.agd-nu-blok.is-kennismaking { background: var(--cn-nude-2); }
.agd-nu-blok.is-opname { background: var(--inkt); }
.agd-nu-blok.is-klus { background: var(--cn-line-2); }
.agd-nu-blok.is-prive { background: repeating-linear-gradient(135deg, var(--cn-line-2) 0 1.5px, transparent 1.5px 4px); }
.agd-nu-blok.is-herinnering { background: var(--inkt); width: 2px; }
.agd-nu-blok.is-voorstel { background: transparent; box-shadow: inset 0 0 0 1.2px var(--inkt); }
.agd-nu-nu { position: absolute; top: -2px; bottom: -2px; left: calc(var(--van) * 1%); width: 2px; margin-left: -1px; background: var(--cn-bad); }
.agd-nu-klok { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--cn-fs-xs); color: var(--cn-warn-ink); }

/* ---------------------------------------------------------------- de balk: weergave en bladeren */
.agd-balk { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.agd-seg .seg { width: 100%; }
.agd-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; align-items: center; gap: 2px; }
.agd-nav .btn[hidden] { display: none !important; }
.agd-titel { font: 400 23px/1.15 var(--cn-f-serif); margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; min-width: 0; outline: none; }
.agd-titel-h { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.agd-titel-h em { color: var(--cn-text); }
.agd-titel-s { font: 500 12px/1.4 var(--cn-f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cn-muted); margin-top: 3px; }
@media (min-width: 768px) {
  .agd-balk { flex-direction: row; align-items: center; justify-content: space-between; }
  .agd-seg .seg { width: auto; }
  .agd-nav { grid-template-columns: 44px auto 44px auto; gap: 6px; }
  .agd-titel { flex-direction: row; align-items: baseline; gap: 10px; font-size: 26px; min-width: 15ch; justify-content: center; }
  .agd-titel-s { margin: 0; }
}

/* ---------------------------------------------------------------- bladeren: de bladzijde schuift en volgt de vinger */
.agd-lijf { transform: translateX(var(--veeg, 0px)); transition: transform .45s var(--cn-silk); touch-action: pan-y pinch-zoom; }   /* keuring 23 okt: knijpen om te zoomen moet blijven werken */
.agd-lijf.is-vegen { transition: none; }
.agd-lijf.agd-in-verder { animation: agd-in-verder .34s var(--cn-silk) both; }
.agd-lijf.agd-in-terug { animation: agd-in-terug .34s var(--cn-silk) both; }
@keyframes agd-in-verder { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes agd-in-terug { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- de week als strook (telefoon, boven de dag) */
.agd-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 0 0 12px; }
.agd-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 60px; padding: 8px 0 7px; border-radius: 16px;
  border: 1px solid var(--cn-line); background: var(--cn-card); color: var(--cn-text); transition: background var(--cn-t-fast), border-color var(--cn-t-fast); }
.agd-chip .wd { font: 500 11px/1 var(--cn-f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); }
.agd-chip .d { font: 400 20px/1 var(--cn-f-serif); font-variant-numeric: lining-nums; }
.agd-chip .dots { display: flex; gap: 3px; height: 6px; }
.agd-chip .dots i, .agd-mdag-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cn-line-2); flex: none; }
.agd-chip.is-vandaag { border-color: var(--inkt); }
.agd-chip.is-vandaag .wd { color: var(--cn-text); }
.agd-chip[aria-pressed="true"] { background: var(--cn-solid); border-color: var(--cn-solid); color: var(--cn-on-accent); }
.agd-chip[aria-pressed="true"] .wd { color: color-mix(in srgb, var(--cn-on-accent) 78%, transparent); }
.agd-chip[aria-pressed="true"] .dots i { background: var(--cn-on-accent); }
/* stippen per soort (strook, maand) */
:is(.agd-chip .dots, .agd-mdag-dots) i.is-kennismaking { background: var(--cn-nude-2); }
:is(.agd-chip .dots, .agd-mdag-dots) i.is-opname { background: var(--inkt); }
:is(.agd-chip .dots, .agd-mdag-dots) i.is-prive { background: transparent; box-shadow: inset 0 0 0 1.2px var(--cn-line-2); }
:is(.agd-chip .dots, .agd-mdag-dots) i.is-herinnering { border-radius: 1px; width: 4px; }
:is(.agd-chip .dots, .agd-mdag-dots) i.is-voorstel { background: transparent; box-shadow: inset 0 0 0 1.3px var(--inkt); }
.agd-chip[aria-pressed="true"] .dots i.is-voorstel { box-shadow: inset 0 0 0 1.3px var(--cn-on-accent); background: transparent; }

/* ---------------------------------------------------------------- hele dag en de administratie */
.agd-heledag { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.agd-hd { position: relative; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 36px; padding: 6px 12px; border-radius: 12px; font-size: var(--cn-fs-s); text-align: left; }
.agd-hd .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.agd-adm { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 36px; padding: 6px 12px; border-radius: 12px; border: 1px dashed var(--cn-line-2);
  font-size: var(--cn-fs-s); color: var(--cn-text-2); text-decoration: none; background: transparent; }
a.agd-adm:hover { border-color: var(--cn-text); color: var(--cn-text); }
.agd-adm .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.agd-klok { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 10px 14px; border-radius: var(--cn-r-s); background: var(--cn-warn-tint); color: var(--cn-text); font-size: var(--cn-fs-s); line-height: 1.45; }
.agd-klok .icon { color: var(--cn-warn); margin-top: 1px; }
.agd-leeg { margin: 12px 4px 0; color: var(--cn-muted); font-size: var(--cn-fs-s); }

/* ---------------------------------------------------------------- de dag op de pc: de tijdlijn met een zijkolom */
.agd-dag-breed { display: grid; gap: 20px; align-items: start; }
.agd-dag-hoofd { min-width: 0; }
.agd-dag-zij { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) {
  .agd-dag-breed { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 24px; }
  .agd-dag-zij { position: sticky; top: calc(var(--cn-top-h) + var(--cn-safe-t) + 16px); }
}
.agd-zij-blok { display: flex; flex-direction: column; gap: 8px; }
.agd-zij-blok .agd-strip { margin: 0; gap: 4px; }
.agd-zij-blok .agd-chip { min-height: 54px; padding: 7px 0 6px; border-radius: 14px; }
.agd-zij-k { margin: 0 2px; font: 500 var(--cn-fs-label)/1.4 var(--cn-f-sans); letter-spacing: var(--cn-track); text-transform: uppercase; color: var(--cn-muted); }
.agd-zij-blok > .list { margin: 0; }
.agd-zij-blok > .note { margin: 0 2px; }
.agd-zij-adm .item { min-height: 56px; }
.agd-zij-vrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--cn-r-s);
  border: 1px dashed var(--cn-line-2); background: color-mix(in srgb, var(--cn-card) 60%, transparent); }
.agd-zij-vrij p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.agd-zij-vrij .agd-zij-k { margin: 0; }
.agd-zij-uur { font: 400 22px/1.15 var(--cn-f-serif); font-variant-numeric: lining-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- het tijdraster */
.agd-raster { position: relative; display: grid; grid-template-columns: var(--uren-w) minmax(0, 1fr); padding: 10px 0; background: var(--cn-card); border: 1px solid var(--cn-hair);
  border-radius: var(--cn-r); box-shadow: var(--cn-shadow-1); }
.agd-raster-week { grid-template-columns: var(--uren-w) repeat(7, minmax(0, 1fr)); border-radius: 0 0 var(--cn-r) var(--cn-r); border-top: 0; box-shadow: none; }
.agd-uren { position: relative; height: calc(var(--rijen) * var(--slot)); border-right: 1px solid var(--cn-line); }
.agd-uur { position: absolute; right: 8px; top: calc(var(--top) * var(--slot)); transform: translateY(-50%); font: 500 12px/1 var(--cn-f-sans); color: var(--cn-muted); font-variant-numeric: tabular-nums; }
.agd-kol { position: relative; height: calc(var(--rijen) * var(--slot)); }
.agd-raster-week .agd-kol + .agd-kol { border-left: 1px solid var(--cn-line); }
.agd-lijnen { position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, var(--cn-line) 0 1px, transparent 1px calc(var(--slot) * 4)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--slot) * 2), var(--cn-hair) calc(var(--slot) * 2) calc(var(--slot) * 2 + 1px), transparent calc(var(--slot) * 2 + 1px) calc(var(--slot) * 4)); }
.agd-kol.is-vandaag { background: color-mix(in srgb, var(--nude) 16%, transparent); }
.agd-kol-voorbij { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--len) * var(--slot)); background: color-mix(in srgb, var(--cn-bg-2) 60%, transparent); pointer-events: none; }
.agd-tap { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: cell; }
.agd-tap:focus-visible { outline-offset: -3px; border-radius: 12px; }
.agd-nu-lijn { position: absolute; z-index: 4; left: -5px; right: 0; top: calc(var(--top) * var(--slot)); border-top: 2px solid var(--cn-bad); pointer-events: none; transition: top 1.2s linear; }
.agd-nu-lijn::before { content: ""; position: absolute; left: 0; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--cn-bad); }
.agd-cursor { position: absolute; z-index: 3; left: 4px; right: 4px; top: calc(var(--top) * var(--slot)); height: calc(2 * var(--slot)); display: flex; align-items: center; padding: 0 10px;
  border: 1.5px dashed var(--inkt); border-radius: 10px; background: color-mix(in srgb, var(--nude) 30%, transparent); font: 500 13px/1 var(--cn-f-sans); color: var(--cn-text);
  pointer-events: none; transition: top .3s var(--cn-silk); font-variant-numeric: tabular-nums; }

/* een afspraak in het raster */
.agd-ev {
  position: absolute; z-index: 2;
  left: calc(4px + var(--baan, 0) * (100% - 8px) / var(--banen, 1));
  width: calc((100% - 8px) / var(--banen, 1) - 3px);
  top: calc(var(--top) * var(--slot) + 1px);
  height: calc(var(--len) * var(--slot) - 2px);
  display: flex; flex-direction: column; gap: 2px; padding: 5px 8px 5px 10px; overflow: hidden; text-align: left;
  border: 0; border-radius: 10px; font-size: 13px; line-height: 1.25; color: var(--inkt);
  background: var(--cn-field); box-shadow: inset 3px 0 0 var(--inkt), 0 0 0 1px var(--cn-line) inset;
  transform: translate(var(--sleep-x, 0px), var(--sleep-y, 0px));
  transition: box-shadow var(--cn-t-fast), transform .25s var(--cn-silk);
}
.agd-ev:hover { box-shadow: inset 3px 0 0 var(--inkt), 0 0 0 1px var(--cn-line-2) inset, var(--cn-shadow-1); }
.agd-ev-tijd { display: flex; align-items: center; gap: 5px; font: 500 12px/1.1 var(--cn-f-sans); font-variant-numeric: tabular-nums; color: var(--cn-text-2); white-space: nowrap; }
.agd-ev-tijd .icon { width: 14px; height: 14px; }
.agd-ev-t { font: 500 14px/1.25 var(--cn-f-sans); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.agd-ev-s { color: var(--cn-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agd-ev.is-kort { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; z-index: 3; }
.agd-ev.is-kort .agd-ev-t { -webkit-line-clamp: 1; line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; min-width: 0; }
/* een uur of korter: de titel op hooguit twee regels, de plek valt weg (staat in het blad) */
.agd-ev.is-krap .agd-ev-t { -webkit-line-clamp: 2; line-clamp: 2; }
.agd-ev.is-krap .agd-ev-s { display: none; }
/* soorten */
.agd-ev.is-kennismaking { background: var(--nude); box-shadow: inset 3px 0 0 var(--cn-nude-ink); }
.agd-ev.is-kennismaking .agd-ev-tijd, .agd-ev.is-kennismaking .agd-ev-s { color: var(--cn-nude-ink); }
.agd-ev.is-opname { background: var(--inkt); color: var(--cn-on-accent); box-shadow: inset 3px 0 0 var(--cn-nude-2); }
.agd-ev.is-opname .agd-ev-tijd, .agd-ev.is-opname .agd-ev-s { color: color-mix(in srgb, var(--cn-on-accent) 82%, transparent); }
.agd-ev.is-prive { background: repeating-linear-gradient(135deg, var(--cn-hair) 0 1px, transparent 1px 7px), var(--cn-bg-2); color: var(--cn-text); box-shadow: inset 3px 0 0 var(--cn-line-2); }
.agd-ev.is-herinnering { background: var(--cn-card); box-shadow: inset 3px 0 0 var(--inkt), 0 0 0 1px var(--cn-line) inset; }
.agd-ev.is-punt { height: auto; min-height: 26px; flex-direction: row; align-items: center; gap: 6px; padding: 3px 8px; transform: translate(var(--sleep-x, 0px), calc(var(--sleep-y, 0px) - 50%)); background: var(--cn-card);
  box-shadow: 0 0 0 1px var(--cn-line-2) inset; border-radius: 999px; z-index: 3; }
.agd-ev.is-punt .agd-ev-t { -webkit-line-clamp: 1; line-clamp: 1; display: block; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.agd-ev.is-voorstel { background: color-mix(in srgb, var(--nude) 30%, var(--cn-card)); box-shadow: none; outline: 1.5px dashed var(--inkt); outline-offset: -1.5px; }
.agd-ev.is-afgezegd { background: transparent; color: var(--cn-muted); box-shadow: none; outline: 1px dashed var(--cn-line-2); outline-offset: -1px; z-index: 1; }
.agd-ev.is-afgezegd .agd-ev-t { text-decoration: line-through; text-decoration-thickness: 1px; }
.agd-ev.is-voorbij:not(.is-opname):not(.is-afgezegd) { background: color-mix(in srgb, var(--cn-bg-2) 55%, var(--cn-card)); }
.agd-ev.is-voorbij.is-kennismaking { background: color-mix(in srgb, var(--nude) 55%, var(--cn-card)); }
.agd-ev.is-sleep { z-index: 6; cursor: grabbing; transition: none; box-shadow: var(--cn-shadow-2); opacity: .94; }
.agd-sleep-label { position: absolute; right: 6px; top: 4px; padding: 2px 7px; border-radius: 999px; background: var(--cn-dark); color: var(--cn-on-dark); font: 500 12px/1.3 var(--cn-f-sans); font-variant-numeric: tabular-nums; }
.agd-woord { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; border: 1px dashed currentColor; font: 500 10.5px/1.6 var(--cn-f-sans); letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px; }

/* hele dag (en de kaartjes in de lijsten) per soort */
.agd-hd.is-kennismaking { background: var(--nude); color: var(--inkt); }
.agd-hd.is-opname { background: var(--inkt); color: var(--cn-on-accent); }
.agd-hd.is-klus { background: var(--cn-field); color: var(--inkt); box-shadow: inset 3px 0 0 var(--inkt), 0 0 0 1px var(--cn-line) inset; }
.agd-hd.is-prive { background: repeating-linear-gradient(135deg, var(--cn-hair) 0 1px, transparent 1px 7px), var(--cn-bg-2); color: var(--cn-text); }
.agd-hd.is-herinnering { background: var(--cn-card); color: var(--inkt); box-shadow: 0 0 0 1px var(--cn-line-2) inset; }
.agd-hd.is-voorstel { outline: 1.5px dashed var(--inkt); outline-offset: -1.5px; }
.agd-hd.is-afgezegd { text-decoration: line-through; color: var(--cn-muted); background: transparent; }

/* ---------------------------------------------------------------- de week (telefoon): zeven dagen onder elkaar */
.agd-weeklijst { display: flex; flex-direction: column; border-top: 1px solid var(--cn-line); }
.agd-wdag { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 10px; padding: 10px 0 12px; border-bottom: 1px solid var(--cn-line); }
.agd-wdag-kop { grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 7px 0; border: 0; border-radius: 14px; background: transparent; color: var(--cn-text); }
.agd-wdag-kop:hover { background: var(--cn-accent-tint); }
.agd-wdag-kop .wd { font: 500 11px/1 var(--cn-f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); }
.agd-wdag-kop .d { font: 400 28px/1 var(--cn-f-serif); font-variant-numeric: lining-nums; }
.agd-wdag-kop .m { font-size: 11.5px; color: var(--cn-muted); }
.agd-wdag-kop > .icon { display: none; }
.agd-vandaag-woord { font: 500 10.5px/1.6 var(--cn-f-sans); white-space: nowrap; background: var(--cn-solid); color: var(--cn-on-accent); border-radius: 999px; padding: 0 5px; margin-top: 4px; }
.agd-klok-mini { color: var(--cn-warn); }
.agd-wdag.is-vandaag .agd-wdag-kop { background: color-mix(in srgb, var(--nude) 45%, transparent); }
.agd-wdag.is-leeg { padding: 4px 0; align-items: center; }
.agd-wdag.is-leeg .agd-wdag-kop { min-height: 0; padding: 6px 0; }
.agd-wdag.is-leeg .agd-wdag-kop .d { font-size: 20px; color: var(--cn-text-2); }
.agd-wdag.is-leeg .agd-wdag-kop .m { display: none; }
.agd-wleeg { margin: 0; padding-left: 14px; align-self: center; color: var(--cn-faint); font-size: var(--cn-fs-s); }
.agd-wlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.agd-wregel, .agd-wadm { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 48px; padding: 8px 10px 8px 12px;
  border: 0; border-radius: 14px; text-align: left; text-decoration: none; color: var(--inkt); background: var(--cn-field); box-shadow: inset 3px 0 0 var(--inkt), 0 0 0 1px var(--cn-line) inset; font-size: var(--cn-fs-s); }
.agd-wadm { background: transparent; box-shadow: none; outline: 1px dashed var(--cn-line-2); outline-offset: -1px; color: var(--cn-text-2); }
.agd-wtijd { display: flex; align-items: center; font: 500 13.5px/1.2 var(--cn-f-sans); font-variant-numeric: tabular-nums; color: var(--cn-text-2); }
.agd-wtekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.agd-wtekst .t { font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.agd-wtekst .s { color: var(--cn-text-2); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agd-wteken { color: var(--cn-muted); display: grid; place-items: center; }
.agd-wregel.is-kennismaking { background: var(--nude); box-shadow: inset 3px 0 0 var(--cn-nude-ink); }
.agd-wregel.is-kennismaking :is(.agd-wtijd, .s, .agd-wteken) { color: var(--cn-nude-ink); }
.agd-wregel.is-opname { background: var(--inkt); color: var(--cn-on-accent); box-shadow: inset 3px 0 0 var(--cn-nude-2); }
.agd-wregel.is-opname :is(.agd-wtijd, .s, .agd-wteken) { color: color-mix(in srgb, var(--cn-on-accent) 82%, transparent); }
.agd-wregel.is-prive { background: repeating-linear-gradient(135deg, var(--cn-hair) 0 1px, transparent 1px 7px), var(--cn-bg-2); box-shadow: inset 3px 0 0 var(--cn-line-2); }
.agd-wregel.is-voorstel { background: color-mix(in srgb, var(--nude) 30%, var(--cn-card)); box-shadow: none; outline: 1.5px dashed var(--inkt); outline-offset: -1.5px; }

/* ---------------------------------------------------------------- de week (vanaf 768): zeven kolommen */
.agd-week { border: 1px solid var(--cn-hair); border-radius: var(--cn-r); background: var(--cn-card); box-shadow: var(--cn-shadow-1); }
.agd-wkop { position: sticky; top: calc(var(--cn-top-h) + var(--cn-safe-t)); z-index: 7; display: grid; grid-template-columns: var(--uren-w) repeat(7, minmax(0, 1fr));
  background: var(--cn-card); border-bottom: 1px solid var(--cn-line); border-radius: var(--cn-r) var(--cn-r) 0 0; }
.agd-wkop-dag { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 66px; padding: 8px 2px; border: 0; border-left: 1px solid var(--cn-line); background: transparent; color: var(--cn-text); }
.agd-wkop-dag:hover { background: var(--cn-accent-tint); }
.agd-wkop-dag .wd { font: 500 11px/1 var(--cn-f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); }
.agd-wkop-dag .d { font: 400 24px/1 var(--cn-f-serif); font-variant-numeric: lining-nums; }
.agd-wkop-dag .s { font-size: 11.5px; color: var(--cn-muted); white-space: nowrap; }
.agd-wkop-dag.is-vandaag { box-shadow: inset 0 -2px 0 var(--inkt); background: color-mix(in srgb, var(--nude) 30%, transparent); }
.agd-wkop-dag.is-vandaag .wd { color: var(--cn-text); }
.agd-whd { display: grid; grid-template-columns: var(--uren-w) repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--cn-line); }
.agd-whd-label { padding: 8px 6px 0 0; text-align: right; font: 500 11px/1.2 var(--cn-f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cn-muted); }
.agd-whd-kol { min-width: 0; padding: 5px 4px; border-left: 1px solid var(--cn-line); }
.agd-whd-kol .agd-heledag { margin: 0; flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.agd-whd-kol :is(.agd-hd, .agd-adm) { width: 100%; min-height: 30px; padding: 4px 8px; font-size: 12.5px; border-radius: 9px; }
.agd-raster-week .agd-ev { padding: 4px 6px 4px 8px; }
.agd-raster-week .agd-ev-t { font-size: 13px; }

/* ---------------------------------------------------------------- de maand */
.agd-mraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.agd-mwd { text-align: center; font: 500 11px/1 var(--cn-f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); padding: 4px 0 6px; }
.agd-mdag { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-height: 56px; padding: 6px 6px 7px; border-radius: 12px;
  border: 1px solid var(--cn-line); background: var(--cn-card); color: var(--cn-text); text-align: left; overflow: hidden; transition: border-color var(--cn-t-fast), background var(--cn-t-fast); }
.agd-mdag:hover { border-color: var(--cn-line-2); }
.agd-mdag-top { display: flex; align-items: flex-start; justify-content: space-between; }
.agd-mdag-top .d { font: 400 17px/1 var(--cn-f-serif); font-variant-numeric: lining-nums; }
.agd-madm { width: 7px; height: 7px; margin: 3px 1px 0 0; border-radius: 2px; border: 1px dashed var(--cn-line-2); }
.agd-mdag-dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-height: 6px; }
.agd-mdag-dots b { font: 500 10.5px/1 var(--cn-f-sans); color: var(--cn-text-2); }
.agd-mdag-lijst { display: none; }
.agd-mdag.is-buiten { background: transparent; border-style: dashed; }
.agd-mdag.is-buiten .d { color: var(--cn-muted); }
.agd-mdag.is-prive { background: repeating-linear-gradient(135deg, var(--cn-hair) 0 1px, transparent 1px 7px), var(--cn-bg-2); }
.agd-mdag.is-vandaag { border-color: var(--inkt); box-shadow: inset 0 0 0 1px var(--inkt); }
.agd-mdag.is-klok::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--cn-warn); }
.agd-mdag[aria-pressed="true"] { background: var(--cn-solid); border-color: var(--cn-solid); color: var(--cn-on-accent); }
.agd-mdag[aria-pressed="true"] .d { color: var(--cn-on-accent); }
.agd-mdag[aria-pressed="true"] .agd-mdag-dots i { background: var(--cn-on-accent); box-shadow: none; }
.agd-mdag[aria-pressed="true"] .agd-mdag-dots b { color: var(--cn-on-accent); }
.agd-mtel { margin: 10px 4px 0; color: var(--cn-muted); font-size: var(--cn-fs-s); }
.agd-daglijst .section-title { margin-top: 22px; }
.agd-daglijst > .linkbtn { margin: 12px 4px 0; min-height: 44px; }
@media (min-width: 768px) {
  .agd-mdag { min-height: 112px; justify-content: flex-start; }
  .agd-mdag-dots { display: none; }
  .agd-mdag-lijst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .agd-mev { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 1.35; padding: 1px 6px 1px 8px; border-radius: 6px;
    background: linear-gradient(var(--inkt), var(--inkt)) no-repeat 3px 50% / 2px 62%, var(--cn-field); }
  .agd-mev b { font-weight: 500; font-variant-numeric: tabular-nums; }
  .agd-mev.is-kennismaking { background: var(--nude); box-shadow: none; }
  .agd-mev.is-opname { background: var(--inkt); color: var(--cn-on-accent); box-shadow: none; }
  .agd-mev.is-prive { background: var(--cn-bg-2); box-shadow: none; color: var(--cn-text-2); }
  .agd-mev.is-voorstel { background: transparent; box-shadow: none; outline: 1px dashed var(--inkt); outline-offset: -1px; }
  .agd-mmeer { font-size: 12px; color: var(--cn-muted); padding-left: 6px; }
  .agd-mdag[aria-pressed="true"] .agd-mev { background: color-mix(in srgb, var(--cn-on-accent) 16%, transparent); color: var(--cn-on-accent); box-shadow: none; outline: 0; }
  .agd-mdag[aria-pressed="true"] .agd-mmeer { color: var(--cn-on-accent); }
}

/* ---------------------------------------------------------------- lijsten (de maand, het dossier, Vandaag) */
.agd-dlijst .agd-r { display: flex; flex-direction: column; }
.agd-ritem { min-height: 64px; }
.agd-ritem .t { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.35; }
.agd-ritem .s { white-space: normal; }
.agd-rlead { width: 46px !important; height: 46px !important; border-radius: 14px !important; font: inherit !important; }
.agd-rkal { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.agd-rkal .d { font: 400 20px/1 var(--cn-f-serif); font-variant-numeric: lining-nums; }
.agd-rkal .m { font: 500 10.5px/1 var(--cn-f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); margin-top: 3px; }
.agd-rteken { display: grid; place-items: center; }
.agd-r .agd-rlead .icon { color: inherit; }   /* .item .s (de ondertitel) kleurt anders ook het kleine icoon */
.agd-r.is-kennismaking .agd-rlead { background: var(--nude); color: var(--inkt); }
.agd-r.is-opname .agd-rlead { background: var(--inkt); color: var(--cn-on-accent); }
.agd-r.is-opname .agd-rlead .m { color: color-mix(in srgb, var(--cn-on-accent) 80%, transparent); }
.agd-r.is-prive .agd-rlead { background: repeating-linear-gradient(135deg, var(--cn-hair) 0 1px, transparent 1px 7px), var(--cn-bg-2); }
.agd-r.is-voorstel .agd-rlead { background: transparent; box-shadow: inset 0 0 0 1.5px var(--inkt); }
.agd-r.is-afgezegd .t { text-decoration: line-through; color: var(--cn-muted); }
.agd-dlijst.is-geweest .agd-ritem { opacity: .9; }
.agd-rrit { display: flex; align-items: center; gap: 8px; margin: -6px 16px 12px 74px; min-height: 40px; padding: 0 14px; align-self: flex-start; border-radius: 999px;
  border: 1px solid var(--cn-line-2); background: var(--cn-field); color: var(--cn-text); font-size: var(--cn-fs-s); }
.agd-rrit:hover { border-color: var(--cn-text); }

/* Vandaag (Beheer): vandaag en morgen */
.vd-afs-r.is-opname { background: var(--inkt); color: var(--cn-on-accent); }
.vd-afs-r.is-opname .vd-afs-waar { color: color-mix(in srgb, var(--cn-on-accent) 80%, transparent); }
.vd-afs-r.is-klus, .vd-afs-r.is-herinnering { background: var(--cn-card); box-shadow: inset 3px 0 0 var(--inkt), 0 0 0 1px var(--cn-line) inset; }
.vd-afs-r.is-prive { background: repeating-linear-gradient(135deg, var(--cn-hair) 0 1px, transparent 1px 7px), var(--cn-bg-2); }
.vd-afs-r.is-voorstel { background: color-mix(in srgb, var(--nude) 30%, var(--cn-card)); outline: 1.5px dashed var(--inkt); outline-offset: -1.5px; }
.vd-afs-r:hover { filter: brightness(.97); }
.vd-morgen { margin-top: 12px; }
.vd-morgen-k { margin: 0 0 6px 2px; font: 500 var(--cn-fs-label)/1.4 var(--cn-f-sans); letter-spacing: var(--cn-track); text-transform: uppercase; color: var(--cn-muted); }
.vd-afs-morgen .vd-afs-r { min-height: 44px; padding: 9px 16px; font-size: var(--cn-fs-s); }
.vd-afs-morgen .vd-afs-r.is-kennismaking { background: color-mix(in srgb, var(--nude) 55%, var(--cn-card)); }

/* ---------------------------------------------------------------- de legenda */
.agd-legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 2px 0; font-size: 12.5px; color: var(--cn-muted); }
.agd-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.agd-legenda i { width: 16px; height: 11px; border-radius: 3px; background: var(--cn-field); box-shadow: inset 2px 0 0 var(--inkt), 0 0 0 1px var(--cn-line) inset; }
.agd-legenda i.is-kennismaking { background: var(--nude); box-shadow: none; }
.agd-legenda i.is-opname { background: var(--inkt); box-shadow: none; }
.agd-legenda i.is-prive { background: repeating-linear-gradient(135deg, var(--cn-line-2) 0 1px, transparent 1px 4px), var(--cn-bg-2); box-shadow: none; }
.agd-legenda i.is-herinnering { height: 2px; background: var(--inkt); box-shadow: none; border-radius: 1px; }
.agd-legenda i.is-voorstel { background: transparent; box-shadow: none; outline: 1.3px dashed var(--inkt); outline-offset: -1.3px; }
.agd-legenda i.is-adm { background: transparent; box-shadow: none; outline: 1px dashed var(--cn-line-2); outline-offset: -1px; }

/* ---------------------------------------------------------------- het afspraakblad */
.agd-lees-kop { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; align-items: center; margin: 2px 0 16px; }
.agd-lees-kal { display: flex; flex-direction: column; text-align: center; border: 1px solid var(--cn-line-2); border-radius: 14px; overflow: hidden; background: var(--cn-field); }
.agd-lees-kal .m { background: var(--cn-solid); color: var(--cn-on-accent); font: 500 11px/1 var(--cn-f-sans); letter-spacing: .16em; text-transform: uppercase; padding: 5px 0 4px; }
.agd-lees-kal .d { font: 400 30px/1 var(--cn-f-serif); padding: 7px 0 2px; }
.agd-lees-kal .w { font-size: 11.5px; color: var(--cn-muted); padding-bottom: 7px; }
.agd-lees-tijd p { margin: 0; }
.agd-lees-soort { display: flex; align-items: center; gap: 7px; font: 500 var(--cn-fs-label)/1.4 var(--cn-f-sans); letter-spacing: var(--cn-track); text-transform: uppercase; color: var(--cn-muted); }
.agd-lees-uur { font: 400 30px/1.1 var(--cn-f-serif); margin-top: 4px !important; font-variant-numeric: lining-nums; }
.agd-lees-dag { color: var(--cn-text-2); margin-top: 2px !important; }
.agd-lees .callout { margin: 0 0 14px; }
.agd-info { margin: 0 0 6px; border-top: 1px solid var(--cn-line); }
.agd-info-r { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--cn-line); }
.agd-info-r dt { color: var(--cn-muted); padding-top: 2px; }
.agd-info-r dd { margin: 0; overflow-wrap: anywhere; }
.agd-info-notitie dd { white-space: pre-wrap; line-height: 1.55; }
.agd-lees-acties { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }

/* het formulier */
.agd-soorten { display: flex; flex-wrap: wrap; gap: 8px; }
.agd-soort { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1px solid var(--cn-line-2); background: var(--cn-field);
  color: var(--cn-text); font-size: var(--cn-fs-s); transition: background var(--cn-t-fast), border-color var(--cn-t-fast); }
.agd-soort .ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cn-bg-2); }
.agd-soort.is-kennismaking .ic { background: var(--nude); }
.agd-soort.is-opname .ic { background: var(--inkt); color: var(--cn-on-accent); }
.agd-soort.is-prive .ic { background: repeating-linear-gradient(135deg, var(--cn-line-2) 0 1px, transparent 1px 4px), var(--cn-bg-2); }
.agd-soort:hover { border-color: var(--cn-text); }
.agd-soort[aria-checked="true"] { border-color: var(--inkt); box-shadow: 0 0 0 1px var(--inkt) inset; background: color-mix(in srgb, var(--nude) 40%, var(--cn-field)); }
.agd-form .group-label { margin-top: 18px; }
.agd-duurrij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 14px; }
.agd-duren { display: flex; flex-wrap: wrap; gap: 6px; }
.agd-duren .chip { min-height: 36px; padding: 4px 12px; font-size: var(--cn-fs-xs); }
.agd-duur { font-size: var(--cn-fs-s); color: var(--cn-muted); font-variant-numeric: tabular-nums; }
.agd-wie { align-items: start; }
@media (max-width: 520px) { .agd-wie { grid-template-columns: 1fr; } }

/* snel iets plannen (tik op een lege tijd) */
.agd-snel { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.agd-stapper { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 8px; }
.agd-stapper .iconbtn { border: 1px solid var(--cn-line-2); }
.agd-stap-tijd { font: 400 40px/1 var(--cn-f-serif); min-width: 4ch; text-align: center; font-variant-numeric: lining-nums tabular-nums; }

/* verplaatsen, de rit, de instellingen en de link */
.agd-snelknoppen { margin: 4px 0 6px; }
.agd-rit-zin { margin: 6px 0 4px; font-size: 16.5px; line-height: 1.5; }
.agd-werkdagen { display: flex; flex-wrap: wrap; gap: 6px; }
.agd-werkdagen .chip { min-width: 52px; justify-content: center; text-transform: lowercase; }
.agd-link .note { line-height: 1.55; }
.agd-link-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 14px; font-size: var(--cn-fs-s); color: var(--cn-text-2); }
.agd-link-nieuw { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.agd-link-url { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.agd-qr svg { width: 180px; height: 180px; border-radius: 12px; border: 1px solid var(--cn-line); }

@media (prefers-reduced-motion: reduce) {
  .agd-lijf, .agd-lijf.agd-in-verder, .agd-lijf.agd-in-terug { animation: none; transition: none; transform: none; }
  .agd-nu-lijn, .agd-cursor, .agd-ev { transition: none; }
}
main.view.stil .agd-lijf { animation: none; }

/* ---------------------------------------------------------------- tikvlak (keuring 23 okt; app.css §21)
   De link naar de relatie of het rittenlog in het blad (20 px hoog) en de kaartjes voor de hele dag en de administratie (30-39 px)
   krijgen een onzichtbaar vlak van 44 px hoog. De rij in het blad is zelf hoger dan 44 px, dus het vlak blijft binnen zijn rij. */
.agd-info-r dd > a, .agd-adm { position: relative; }
.agd-info-r dd > a::before, .agd-hd::before, .agd-adm::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: min(0px, calc((100% - var(--cn-tap)) / 2)); bottom: min(0px, calc((100% - var(--cn-tap)) / 2));
}