/* Mijn dashboard (het Overzicht = de landingspagina na inloggen).
   ----------------------------------------------------------------------------
   Rol-bewust werkdashboard: een persoonlijke kern (agenda vandaag, mijn taken,
   tellers) plus operationele blokken die zich naar de rol van de ingelogde
   gebruiker voegen (komende acties, vergunningen die aandacht vragen).

   Styling valt terug op de globale huisstijl: het VLAKKE kaartuiterlijk komt uit
   de globale .card (forms.css); de klassen hier regelen alleen de dashboard-eigen
   STRUCTUUR/plaatsing (padding-reset, flex, koppen, rijen). Statuspillen hergebruiken
   de globale .lg-badge (listgrid.css), tellers de globale .badge, knoppen .btn /
   .btn-actie, voetlinks .menu-voetlink en lege/foutstates .melding (alle base.css).
   Alle kleuren/maten komen uit de tokens (tokens.css), nooit als losse hex-waarde.
   Kaarten zijn vlak (1px-rand + schaduw), zonder decoratieve linker-accentbalk. */

/* ---- Paginawrapper: verticale stapel -------------------------------------- */
.dash { display: flex; flex-direction: column; gap: 18px; }
.dash-laadmelding { color: var(--muted); padding: 8px 2px; }

/* ---- Begroetingskop ------------------------------------------------------- */
.dash-hd {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.dash-hd__titel { margin: 0; font-size: 1.35rem; }
.dash-hd__sub { margin: 3px 0 0; color: var(--muted); font-size: .9rem; }
.dash-hd__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Tellers (KPI-tegels bovenop de globale .card) ------------------------ */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.card.dash-kpi {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  text-decoration: none; color: inherit; transition: border-color .12s ease;
}
a.card.dash-kpi:hover { border-color: color-mix(in srgb, var(--blue-700) 35%, white); }
.dash-kpi__lichaam { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-kpi__val { font-family: var(--font-heading); font-weight: 600; font-size: 1.7rem; line-height: 1; color: var(--blue-700); letter-spacing: -.02em; }
.dash-kpi__lbl { font-size: .8rem; color: var(--muted); }

/* ---- Getinte icoon-chip (zelfde palet als de listgrid-badges) ------------- */
.dash-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--bg-50); color: var(--ink-900);
}
.dash-chip svg { width: 19px; height: 19px; }
.dash-chip--blauw { color: var(--blue-700); border-color: color-mix(in srgb, var(--blue-700) 30%, white); background: color-mix(in srgb, var(--blue-700) 10%, white); }
.dash-chip--gold  { color: #7a5c00;         border-color: color-mix(in srgb, var(--gold-500) 45%, white); background: color-mix(in srgb, var(--gold-500) 20%, white); }
.dash-chip--ok    { color: var(--ok);       border-color: color-mix(in srgb, var(--ok) 35%, white);       background: color-mix(in srgb, var(--ok) 12%, white); }

/* ---- Kolommen (hoofdkolom + smallere zijkolom) ---------------------------- */
.dash-cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
.dash-kol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } }

/* ---- Kaart: structuur bovenop de globale .card ---------------------------- */
.card.dash-card { padding: 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.dash-card__hd { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.dash-card__titel-ico { flex: 0 0 auto; display: inline-flex; color: var(--blue-700); }
.dash-card__titel-ico svg { width: 17px; height: 17px; }
.dash-card__titel { margin: 0; font-size: 1rem; flex: 1 1 auto; min-width: 0; }
.dash-card__hd-actie { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.dash-card__bd { padding: 6px; flex: 1 1 auto; min-width: 0; }
.dash-card__laad, .dash-card__leeg { padding: 20px 16px; text-align: center; color: var(--muted); font-size: var(--fs-data); }
.dash-card__fout { padding: 16px; text-align: center; color: var(--muted); font-size: var(--fs-data); }
.dash-card__fout .btn-actie { margin-top: 8px; }
/* De voetlink is de globale .menu-voetlink (die tekent zelf de scheidingslijn +
   afgeronde onderhoeken); geen extra styling nodig. */

/* ---- Lijstrijen binnen een kaart ------------------------------------------ */
.dash-rij {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; border: 0; background: none; text-align: left;
  border-radius: var(--radius-sm); color: var(--ink-900); font: inherit;
  cursor: pointer; text-decoration: none;
}
.dash-rij + .dash-rij { border-top: 1px solid var(--line); border-radius: 0; }
.dash-rij:hover { background: var(--bg-50); }
.dash-rij:focus-visible { outline: 2px solid var(--blue-700); outline-offset: -2px; }
.dash-rij__lichaam { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-rij__titel { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-rij__meta { font-size: var(--fs-data); color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-rij__meta svg { width: 12px; height: 12px; }
.dash-rij__eind { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.dash-rij__eind svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.dash-verlopen { color: var(--err); font-weight: 600; }
.dash-rij__tijd { flex: 0 0 auto; font-size: var(--fs-data); color: var(--muted); white-space: nowrap; }
.dash-rij__tijd--let { color: var(--warn); font-weight: 600; }
.dash-rij__tijd--nu  { color: var(--err); font-weight: 600; }

/* Datumblokje links in een rij (dag + maand). */
.dash-datum { flex: 0 0 auto; width: 44px; text-align: center; padding: 4px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-50); }
.dash-datum__dag { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; line-height: 1; color: var(--blue-700); }
.dash-datum__mnd { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 2px; }

/* ---- Bezettingsbalk (vulling t.o.v. capaciteit) --------------------------- */
.dash-bezet { display: flex; align-items: center; gap: 8px; width: 104px; }
.dash-bar { flex: 1 1 auto; height: 7px; min-width: 44px; border-radius: 999px; background: var(--blue-100); overflow: hidden; }
.dash-bar__vul { height: 100%; border-radius: 999px; background: var(--ok); }
.dash-bar__vul--warn { background: var(--warn); }
.dash-bar__vul--err  { background: var(--err); }
.dash-bar__vul--blauw { background: var(--blue-700); }
.dash-bar__vul--neutraal { background: var(--muted); }
.dash-bezet__cijfer { flex: 0 0 auto; font-size: var(--fs-data); font-weight: 600; white-space: nowrap; }
.dash-bezet__cijfer--warn { color: var(--warn); }
.dash-bezet__cijfer--err { color: var(--err); }

/* ---- Tijdlijn (agenda van vandaag) ---------------------------------------- */
.dash-tijd { display: flex; flex-direction: column; }
.dash-tijd__rij { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 6px 8px; text-decoration: none; color: inherit; border-radius: var(--radius-sm); }
.dash-tijd__rij:hover .dash-tijd__blok { border-color: color-mix(in srgb, var(--blue-700) 30%, white); }
.dash-tijd__rij:focus-visible { outline: 2px solid var(--blue-700); outline-offset: -2px; }
.dash-tijd__tijd { font-size: var(--fs-data); color: var(--muted); padding-top: 9px; text-align: right; }
.dash-tijd__blok { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); padding: 8px 11px; transition: border-color .12s ease; }
.dash-tijd__blok--nu { border-color: color-mix(in srgb, var(--blue-700) 40%, white); background: color-mix(in srgb, var(--blue-700) 7%, white); }
.dash-tijd__titel { font-weight: 600; font-size: .88rem; }
.dash-tijd__meta { font-size: var(--fs-data); color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-tijd__meta svg { width: 12px; height: 12px; }