/* Uurtje Factuurtje — speels maar zakelijk. */

:root {
  --indigo:   #5b6cff;
  --indigo-d: #4453e0;
  --mint:     #00c2a8;
  --coral:    #ff6b6b;
  --amber:    #ffb020;
  --violet:   #8b5cf6;
  --sky:      #38bdf8;

  --ink:      #1c1b33;
  --ink-2:    #45435f;
  --muted:    #7b7994;
  --line:     #e6e4f2;
  --surface:  #ffffff;
  --surface-2:#f7f6fd;
  --bg:       #f2f1fb;

  --radius:   16px;
  --radius-s: 10px;
  --shadow:   0 1px 2px rgba(28, 27, 51, .05), 0 8px 24px -12px rgba(28, 27, 51, .18);
  --shadow-l: 0 24px 60px -20px rgba(28, 27, 51, .35);
  --font: "Segoe UI", system-ui, -apple-system, "Inter", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* min-height en niet height: bij een vaste hoogte houdt de body op bij de
   onderkant van het scherm, en dan blijft de topbar niet plakken zodra je
   verder scrollt dan één schermlengte. De achtergrond blijft staan dankzij
   background-attachment: fixed hieronder. */
html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1000px 520px at 8% -12%, #e5e8ff 0%, transparent 60%),
    radial-gradient(880px 480px at 96% 0%, #d9f7f1 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

.muted { color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; }

/* ------------------------------------------------------------ topbar */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 10px 22px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.brand span { letter-spacing: -.02em; color: var(--ink-2); }
.brand strong { color: var(--indigo); }

.tabs { display: flex; gap: 4px; margin-left: 8px; }
.tabs a {
  padding: 8px 15px; border-radius: 999px; font-weight: 600; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.tabs a:hover { background: var(--surface-2); }
.tabs a.active { background: var(--ink); color: #fff; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.timer-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--coral), #ff9068); color: #fff; cursor: pointer;
  box-shadow: 0 6px 18px -8px var(--coral);
}
.timer-pill[hidden] { display: none; }
.timer-pill::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.user-menu { position: relative; }
.user-menu summary {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px;
  border-radius: 999px; cursor: pointer; list-style: none; border: 1px solid var(--line);
  background: var(--surface);
}
.user-menu summary::-webkit-details-marker { display: none; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff;
  font-size: 12px; font-weight: 700;
}
.user-name { font-weight: 600; font-size: 14px; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 260px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-l);
}
.menu-item {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0;
  border-radius: var(--radius-s); background: none; cursor: pointer; font-weight: 600;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--coral); }

/* ------------------------------------------------------------ layout */

.view { max-width: 1560px; margin: 0 auto; padding: 22px; }

.page-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-head h1 { font-size: 24px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.card-body { padding: 16px 18px; }

.uren-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1080px) { .uren-layout { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ knoppen */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--surface); font-weight: 600; cursor: pointer;
  transition: transform .08s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:hover { border-color: #cfcbe8; box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(120deg, var(--indigo), var(--violet)); color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px -10px var(--indigo);
}
.btn-primary:hover { background: linear-gradient(120deg, var(--indigo-d), #7c4ff0); }
.btn-mint { background: linear-gradient(120deg, var(--mint), #34d399); color: #fff; border-color: transparent; }
.btn-coral { background: var(--coral); color: #fff; border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); box-shadow: none; }
.btn-sm { padding: 6px 11px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 17px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.fab-add {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0;
  border-radius: 999px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(120deg, var(--indigo), var(--violet));
  box-shadow: 0 10px 24px -10px var(--indigo);
}
.fab-add:hover { filter: brightness(1.05); }

/* ------------------------------------------------------------ formulier */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea, .input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(91, 108, 255, .16);
}
.field textarea { resize: vertical; min-height: 68px; }
/* Moet ná .field staan: die zet display:flex en wint het anders van [hidden]. */
.field[hidden] { display: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-error {
  margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius-s);
  background: #ffecec; color: #c02b2b; font-size: 13.5px; font-weight: 600;
}
.form-warn {
  margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius-s);
  background: #fff5e0; color: #8a5a00; font-size: 13.5px; font-weight: 600;
}
.hint { font-size: 12.5px; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); font-size: 13px; font-weight: 600; cursor: pointer;
}
.chip:hover { border-color: var(--indigo); color: var(--indigo); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Tweede rij: de onderdelen van de aangetikte hoofdtaak. */
.sub-chips {
  align-items: center; margin-top: 9px; padding: 9px 11px;
  background: var(--surface-2); border-radius: var(--radius-s);
}
/* Moet ná .chips staan: die zet display:flex en wint het anders van [hidden]. */
.sub-chips[hidden] { display: none; }
.sub-chips .chip { background: var(--surface); }
.sub-chips .sub-label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-right: 2px; }

/* Onderdeel-regels in de takentabel staan ingesprongen onder hun hoofdtaak. */
.data tr.sub-row td:first-child { padding-left: 34px; color: var(--ink-2); }
.sub-arrow { color: var(--muted); margin-right: 8px; }

.filter-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px 5px 12px;
  border-radius: 999px; background: #eceafe; color: var(--indigo-d);
  font-size: 13px; font-weight: 600;
}
.filter-chip button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 15px; line-height: 1; }

/* ------------------------------------------------------------ combobox */

.combo { position: relative; }
.combo-input { cursor: text; }
.combo-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 5px);
  max-height: 280px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-l);
}
.combo-option {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-s); cursor: pointer;
}
.combo-option:hover, .combo-option.highlight { background: var(--surface-2); }
.combo-option small { color: var(--muted); margin-left: auto; }
/* Klantnummer in een vaste kolom vóór de naam, zodat de namen uitlijnen. */
.combo-code {
  flex: 0 0 62px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px;
}
.combo-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-empty { padding: 10px; color: var(--muted); font-size: 13.5px; }

/* ------------------------------------------------------------ maandkiezer */

.month-picker-head { display: flex; gap: 8px; margin-bottom: 12px; }
.month-picker-head select {
  flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface);
}
/* Eerste kolom is het weeknummer, daarna de zeven dagen. */
.mini-cal { display: grid; grid-template-columns: 22px repeat(7, 1fr); gap: 3px; }
.mini-cal .dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding-bottom: 4px; }
.mini-cal .wk-head {
  text-align: center; font-size: 10px; font-weight: 700; color: var(--muted);
  padding-bottom: 4px; text-transform: uppercase;
}
.mini-cal .wk {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-size: 11px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; border-right: 1px solid var(--line);
}
.mini-cal .wk:hover { color: var(--indigo); }
.mini-day {
  position: relative; aspect-ratio: 1; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600;
  display: grid; place-items: center; transition: background .12s, color .12s, transform .08s;
}
.mini-day:hover { background: #e6e3fb; }
.mini-day.other { opacity: .32; }
.mini-day.weekend { background: #f1f0f8; color: var(--muted); }
.mini-day.today { box-shadow: inset 0 0 0 2px var(--amber); }
.mini-day.selected { background: var(--ink); color: #fff; transform: scale(1.04); }
.mini-day.has-hours::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--mint);
}
.mini-day.selected.has-hours::after { background: #fff; }
.month-total { margin-top: 12px; display: flex; justify-content: space-between; font-size: 13.5px; }
.month-total b { font-size: 16px; }

/* ------------------------------------------------------------ weekbalk */

/* Zeven dagen, en daarachter het weektotaal met de norm. */
.week-strip {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 104px;
  gap: 8px; margin-bottom: 18px;
}
.day-btn {
  padding: 11px 8px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; text-align: center;
  transition: transform .1s, box-shadow .15s, border-color .15s;
}
.day-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.day-btn .dow { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.day-btn .dnum { font-size: 21px; font-weight: 700; line-height: 1.25; }
.day-btn .dsum { font-size: 12.5px; font-weight: 700; color: var(--mint); min-height: 18px; }
.day-btn.weekend { background: var(--surface-2); }
.day-btn.today .dnum { color: var(--amber); }
.day-btn.selected {
  background: linear-gradient(140deg, var(--ink), #35335c); border-color: transparent; color: #fff;
  box-shadow: var(--shadow);
}
.day-btn.selected .dow { color: rgba(255, 255, 255, .7); }
.day-btn.selected .dnum { color: #fff; }
.day-btn.selected .dsum { color: #7ff3e0; }

/* Weektotaal naast de zondag. Staat het niet op de norm (40,00 van 40,00), dan
   valt het vakje rood op en komt er een melding onder de balk. */
.week-sum {
  padding: 11px 8px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); text-align: center;
}
.week-sum .dow {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.week-sum .wnum { font-size: 21px; font-weight: 700; line-height: 1.25; }
.week-sum .wtarget { font-size: 12.5px; font-weight: 700; color: var(--muted); min-height: 18px; }
.week-sum.afwijking {
  border: 2px solid var(--coral); background: #fff3f3;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, .18);
}
.week-sum.afwijking .wnum, .week-sum.afwijking .wtarget { color: #c02b2b; }

.week-warn {
  margin: -8px 0 18px; padding: 10px 14px; border-radius: var(--radius-s);
  background: #ffecec; color: #c02b2b; font-size: 13.5px; font-weight: 700;
}

.week-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.week-nav h2 { font-size: 17px; }

/* ------------------------------------------------------------ urenlijst */

.day-panel-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.day-panel-head h2 { font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.day-total-badge {
  padding: 5px 12px; border-radius: 999px; font-weight: 700;
  background: #e6fbf6; color: #048a76;
}

.entry-row {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background .12s;
}
.entry-row:last-child { border-bottom: 0; }
.entry-row:hover { background: var(--surface-2); }
/* Afsluitende regel met het dagtotaal — geen knop, dus ook geen hover-effect. */
.day-total-row {
  cursor: default; background: var(--surface-2); border-top: 2px solid var(--line);
  font-weight: 700;
}
.day-total-row:hover { background: var(--surface-2); }
.day-total-row .entry-hours { color: #048a76; }
.entry-hours { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.entry-main { min-width: 0; }
.entry-client { font-weight: 600; }
.entry-desc { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
}
.task-dot { width: 8px; height: 8px; border-radius: 50%; }
.entry-actions { display: flex; gap: 6px; opacity: 0; transition: opacity .12s; }
.entry-row:hover .entry-actions { opacity: 1; }

.lock-note {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  background: #fff1e0; color: #a35a08; font-size: 13px; font-weight: 700;
}
.day-btn.closed { opacity: .62; }
.day-btn.closed .dnum { color: var(--muted); }
.day-btn.selected.closed { opacity: 1; }

.empty-state { padding: 44px 20px; text-align: center; color: var(--muted); }
.empty-state .big { font-size: 34px; margin-bottom: 8px; }

/* ------------------------------------------------------------ timer-kaart */

.timer-card .card-body { display: flex; flex-direction: column; gap: 12px; }
.timer-display {
  font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
  letter-spacing: -.02em;
}
.timer-display small { font-size: 13px; font-weight: 600; color: var(--muted); display: block; }
.timer-actions { display: flex; gap: 8px; }
.timer-actions .btn { flex: 1; }

/* ------------------------------------------------------------ tabellen */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr.clickable { cursor: pointer; }
table.data tbody tr.clickable:hover { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- balken die blijven staan

De topbar plakt al bovenaan; deze balken schuiven daar precies onder door. De
hoogtes worden in core.js gemeten en als variabele gezet, want ze verschillen
met de tekstgrootte en de breedte van het venster. De z-index blijft onder die
van de topbar (50), zodat alles daar netjes achter verdwijnt. */

.sticky-bar {
  position: sticky; top: var(--topbar-h, 54px); z-index: 30;
  background: var(--bg);          /* dekkend, anders schemert de inhoud erdoorheen */
  padding-top: 12px;
}

/* Een kolomkop kan alleen blijven staan als er geen scrollende ouder tussen
   zit — vandaar dat .table-wrap hier zijn overflow loslaat. */
.sticky-wrap { overflow: visible; }
.sticky-wrap table.data thead th {
  position: sticky; top: var(--head-top, 108px); z-index: 20;
  background: var(--surface);
}

/* ------------------------------------------------------- inklapbare taken */

.task-toggle {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 11px; width: 20px; padding: 0; margin-right: 2px;
  font-family: inherit; line-height: 1;
}
.task-toggle:hover { color: var(--ink); }
.task-count { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 8px; }

.bar-cell { position: relative; min-width: 120px; }
.bar {
  height: 7px; border-radius: 999px; background: var(--indigo); opacity: .85; min-width: 3px;
}
.bar-track { background: var(--surface-2); border-radius: 999px; }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--ink-2);
}
.badge.archived { background: #fff1e0; color: #a35a08; }
.badge.role { background: #eceafe; color: var(--indigo-d); }
.badge.off { background: #ffecec; color: #c02b2b; }

/* ------------------------------------------------------------ rapport */

/* Twee regels: de periodekeuze boven, het zoeken en filteren eronder. */
.report-toolbar { display: grid; gap: 10px; padding: 14px 18px; margin-bottom: 18px; }
.report-row {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.period-label {
  font-size: 17px; font-weight: 700; min-width: 230px; text-align: center;
  border: 1px solid transparent; border-radius: var(--radius-s); background: none;
  padding: 5px 10px; cursor: pointer; color: inherit; font-family: inherit;
}
.period-label:hover { border-color: var(--line); background: var(--surface-2); }
/* Bij "Alle jaren" valt er niets te kiezen, dus ook geen knop-gedrag. */
.period-label.static, .period-label.static:hover {
  cursor: default; border-color: transparent; background: none;
}
.rap-client { width: 260px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat {
  padding: 16px 18px; border-radius: var(--radius); color: #fff;
  box-shadow: 0 12px 26px -16px rgba(28, 27, 51, .7);
}
.stat .label { font-size: 12.5px; font-weight: 600; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.stat .value { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.stat.a { background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.stat.b { background: linear-gradient(135deg, var(--mint), #22b8a0); }
.stat.c { background: linear-gradient(135deg, var(--amber), #ff8a3d); }
.stat.d { background: linear-gradient(135deg, var(--sky), #3b82f6); }

.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; margin-bottom: 18px; }

/* Uitsplitsingen (per klant/taak/gebruiker/dag): de drie kolommen passen altijd
   samen in de kaart — geen horizontale scroll en het urental nooit afgekapt. */
.report-grid .table-wrap { overflow-x: visible; }
.report-grid table.data { table-layout: fixed; }
.report-grid table.data td { padding: 10px 12px; }
.report-grid table.data td:first-child { overflow-wrap: anywhere; }
.report-grid table.data td.bar-cell { width: 32%; min-width: 0; padding-left: 8px; padding-right: 8px; }
.report-grid table.data td.num { width: 92px; }

/* Meldingsbalk onder de topbar (nu: back-up loopt achter). */
.alert-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  /* Lijnt op met de inhoud van .view: 1560px minus de 22px padding aan weerszijden. */
  max-width: 1516px; width: calc(100% - 44px); margin: 18px auto -4px; padding: 12px 18px;
  border: 1px solid #ffd9a8; border-radius: var(--radius-s);
  background: #fff6e8; color: #8a5200; font-weight: 600;
}
/* display:flex hierboven wint het anders van het ingebouwde [hidden]. */
.alert-bar[hidden] { display: none; }
.alert-bar a { text-decoration: underline; }
.alert-bar button { margin-left: auto; color: inherit; }

/* Logboek in Beheer: dichtgeklapt tot je er zelf om vraagt. */
.log-card > summary { cursor: pointer; list-style: none; }
.log-card > summary::-webkit-details-marker { display: none; }
.log-card > summary::after { content: '▾'; color: var(--muted); margin-left: 10px; }
.log-card[open] > summary::after { content: '▴'; }
.log-card:not([open]) > summary { border-bottom: 0; }

/* ------------------------------------------------------------ modal */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: rgba(28, 27, 51, .42); backdrop-filter: blur(3px);
  animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(560px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-l);
  animation: pop .18s cubic-bezier(.2, .9, .3, 1.2);
}
.modal.wide { width: min(780px, 100%); }
@keyframes pop { from { transform: translateY(12px) scale(.97); opacity: 0; } }
.modal-head {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px;
}
.modal-head h2 { font-size: 19px; }
.modal-body { padding: 4px 22px 8px; }
.modal-foot {
  display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px 20px;
}
.modal-foot .left { margin-right: auto; }

/* ------------------------------------------------------------ toasts */

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  padding: 12px 16px; border-radius: var(--radius-s); background: var(--ink); color: #fff;
  font-weight: 600; box-shadow: var(--shadow-l); animation: slide .2s ease;
  max-width: 380px;
}
.toast.error { background: #d13b3b; }
.toast.ok { background: #0d9c85; }
@keyframes slide { from { transform: translateX(20px); opacity: 0; } }

/* ------------------------------------------------------------ login */

.login-body {
  display: grid; place-items: center; min-height: 100vh; min-height: 100dvh;
  padding: 24px; position: relative;
}
/* De gekleurde vlekken liggen eráchter en tellen niet mee in het raster. Deden ze dat
   wel, dan kreeg het raster een tweede rij en zakte de kaart onder het midden. */
.login-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.login-blobs span {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5;
}
.login-blobs span:nth-child(1) { width: 380px; height: 380px; background: #b9c2ff; top: -80px; left: -60px; }
.login-blobs span:nth-child(2) { width: 320px; height: 320px; background: #9df0e2; bottom: -70px; right: -40px; }
.login-blobs span:nth-child(3) { width: 260px; height: 260px; background: #ffd6a8; bottom: 20%; left: 12%; }

.login-card {
  position: relative; width: min(400px, 92vw); padding: 32px 30px 30px;
  background: rgba(255, 255, 255, .93); border-radius: 22px; box-shadow: var(--shadow-l);
  text-align: center;
}
.login-card h1 { font-size: 24px; margin-top: 8px; }
.login-card > .muted { margin: 4px 0 22px; }
.login-card .field { text-align: left; }
.login-logo { display: flex; justify-content: center; }

/* ------------------------------------------------------------ diversen */

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.search-input { min-width: 260px; }
.spinner {
  width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--indigo);
  border-radius: 50%; animation: spin .7s linear infinite; margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.color-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; vertical-align: -2px; }
.switch-row { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-weight: 600; font-size: 14px; }