/* ==========================================================================
   HOTTENS · onderdelen.css
   Herbruikbare onderdelen voor alle apps. Vereist huisstijl.css (tokens).

   Inhoud
     01 Merk & navigatie      brand, nav, breadcrumb
     02 Knoppen               btn, btn-group, icon-btn
     03 Formulieren           field, input, select, check, switch, segmented
     04 Kaarten               card, stat, kv
     05 Tabellen              table-wrap, table, toolbar, pagination
     06 Labels & status       badge, tag, dot, delta, avatar
     07 Meldingen             alert, toast, empty
     08 Lagen                 modal, dropdown/menu, tooltip
     09 Navigatie in pagina   tabs
     10 Voortgang & laden     progress, meter, spinner, skeleton
     11 Lijsten               list, checklist, feed
     12 Trading               ticker, quote
     13 Knipoog               wink, cursor, tech-hoeken
   ========================================================================== */

@layer h.onderdelen {

/* ==========================================================================
   01 MERK & NAVIGATIE
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--h-space-3);
  color: var(--h-text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--h-fs-lg);
  letter-spacing: -0.02em;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: var(--h-radius-sm);
  background: var(--h-surface-inv);
  color: var(--h-text-inv);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-sm);
  font-weight: 600;
  position: relative;
  flex-shrink: 0;
}
/* Knipoog: een citroen-pixel rechtsboven op het logo */
.brand__mark::after {
  content: "";
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--h-zest);
  box-shadow: 0 0 0 2px var(--h-bg);
}
.brand__name { display: inline-flex; align-items: baseline; gap: 0.35em; }
.brand__app {
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-xs);
  font-weight: 500;
  color: var(--h-text-3);
  letter-spacing: 0.02em;
}
.brand__app::before { content: "/"; margin-right: 0.35em; color: var(--h-border-strong); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__label {
  padding: var(--h-space-4) var(--h-space-3) var(--h-space-2);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-label);
  color: var(--h-text-3);
}
.nav__item {
  display: flex;
  align-items: center;
  gap: var(--h-space-3);
  min-height: 2.25rem;
  padding: 0 var(--h-space-3);
  border-radius: var(--h-radius-sm);
  color: var(--h-text-2);
  text-decoration: none;
  font-size: var(--h-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--h-dur-1) var(--h-ease), color var(--h-dur-1) var(--h-ease);
}
.nav__item svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; opacity: 0.8; }
.nav__item:hover { background: var(--h-surface-3); color: var(--h-text); }
.nav__item[aria-current="page"], .nav__item.is-active {
  background: var(--h-accent-soft);
  color: var(--h-accent-text);
  position: relative;
}
.nav__item[aria-current="page"] svg, .nav__item.is-active svg { opacity: 1; }
.nav__count {
  margin-left: auto;
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-2xs);
  color: var(--h-text-3);
}
.nav--horizontal { flex-direction: row; flex-wrap: wrap; }
@media (max-width: 52rem) {
  .nav { flex-direction: row; }
  .brand { flex-shrink: 0; white-space: nowrap; }
  .nav__label { display: none; }
}

/* Op een gekleurde schil (wereld met --h-shell, zoals de Weerkaart) leest het merk en de navigatie in de schilkleuren;
   zonder schil-tokens vallen de var()-terugvallen terug op de gewone waarden hierboven. */
.app__sidebar .brand, .topbar .brand { color: var(--h-on-shell, var(--h-text)); }
.app__sidebar .brand__mark, .topbar .brand__mark { background: var(--h-on-shell, var(--h-surface-inv)); color: var(--h-shell, var(--h-text-inv)); }
.app__sidebar .brand__mark::after { box-shadow: 0 0 0 2px var(--h-shell, var(--h-bg)); }
.app__sidebar .brand__app { color: var(--h-on-shell-2, var(--h-text-3)); }
.app__sidebar .brand__app::before { color: var(--h-on-shell-2, var(--h-border-strong)); }
.app__sidebar .nav__label { color: var(--h-on-shell-2, var(--h-text-3)); }
.app__sidebar .nav__item { color: var(--h-on-shell-2, var(--h-text-2)); }
.app__sidebar .nav__item:hover { background: var(--h-shell-2, var(--h-surface-3)); color: var(--h-on-shell, var(--h-text)); }
.app__sidebar .nav__item[aria-current="page"], .app__sidebar .nav__item.is-active { background: var(--h-shell-2, var(--h-accent-soft)); color: var(--h-on-shell, var(--h-accent-text)); font-weight: 600; }
.app__sidebar .nav__count { color: var(--h-on-shell-2, var(--h-text-3)); }
.app__sidebar .card { color: var(--h-text); }   /* een kaart op de schil is een gewoon vlak: tekst in de tekstkleur, niet in on-shell */
.app__sidebar a:focus-visible, .topbar a:focus-visible, .topbar button:focus-visible { outline: 2px solid var(--h-on-shell, var(--h-accent)); outline-offset: 2px; }
.topbar .input { background: color-mix(in srgb, var(--h-on-shell, var(--h-surface)) 10%, transparent); border-color: var(--h-shell-border, var(--h-border)); color: var(--h-on-shell, var(--h-text)); }
.topbar .input::placeholder { color: var(--h-on-shell-2, var(--h-text-3)); }
.topbar .segmented { background: color-mix(in srgb, var(--h-on-shell, var(--h-surface)) 10%, transparent); border-color: var(--h-shell-border, var(--h-border)); }
.topbar .segmented > button { color: var(--h-on-shell-2, var(--h-text-2)); }
.topbar .segmented > button[aria-pressed="true"] { background: var(--h-on-shell, var(--h-surface)); color: var(--h-shell, var(--h-text)); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--h-space-2);
  list-style: none;
  padding: 0;
  font-size: var(--h-fs-sm);
  color: var(--h-text-3);
}
.breadcrumb a { color: var(--h-text-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--h-text); }
.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--h-space-2);
  color: var(--h-border-strong);
  font-family: var(--h-font-mono);
}
.breadcrumb [aria-current] { color: var(--h-text); font-weight: 500; }

/* ==========================================================================
   02 KNOPPEN
   ========================================================================== */
.btn {
  --btn-bg: var(--h-surface);
  --btn-fg: var(--h-text);
  --btn-bd: var(--h-border-strong);
  --btn-bg-hover: var(--h-surface-2);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--h-space-2);
  height: var(--h-control-h);
  padding: 0 var(--h-space-4);
  border: 1px solid var(--btn-bd);
  border-radius: var(--h-radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--h-fs-sm);
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--h-shadow-sm);
  transition:
    background var(--h-dur-1) var(--h-ease),
    border-color var(--h-dur-1) var(--h-ease),
    box-shadow var(--h-dur-1) var(--h-ease),
    transform var(--h-dur-1) var(--h-ease);
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--h-ring); }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.btn--primary {
  --btn-bg: var(--h-accent);
  --btn-fg: var(--h-on-accent);
  --btn-bd: transparent;
  --btn-bg-hover: var(--h-accent-hover);
  box-shadow: var(--h-shadow-sm), inset 0 1px 0 rgb(255 255 255 / 0.14);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-bd: transparent;
  --btn-fg: var(--h-text-2);
  --btn-bg-hover: var(--h-surface-3);
  box-shadow: none;
}
.btn--ghost:hover { color: var(--h-text); }
.btn--soft {
  --btn-bg: var(--h-accent-soft);
  --btn-fg: var(--h-accent-text);
  --btn-bd: transparent;
  --btn-bg-hover: color-mix(in srgb, var(--h-accent-soft) 70%, var(--h-accent) 15%);
  box-shadow: none;
}
.btn--danger {
  --btn-bg: var(--h-neg);
  --btn-fg: var(--h-on-accent);
  --btn-bd: transparent;
  --btn-bg-hover: color-mix(in srgb, var(--h-neg) 85%, #000);
}
.btn--danger-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--h-neg);
  --btn-bd: transparent;
  --btn-bg-hover: var(--h-neg-soft);
  box-shadow: none;
}
.btn--success {
  --btn-bg: var(--h-pos);
  --btn-fg: var(--h-on-accent);
  --btn-bd: transparent;
  --btn-bg-hover: color-mix(in srgb, var(--h-pos) 85%, #000);
}
/* Knipoog-knop: één per scherm, voor de leuke actie */
.btn--zest {
  --btn-bg: var(--h-zest);
  --btn-fg: var(--h-on-zest);
  --btn-bd: color-mix(in srgb, var(--h-zest) 60%, #000 12%);
  --btn-bg-hover: color-mix(in srgb, var(--h-zest) 88%, #000);
}

.btn--sm { height: var(--h-control-h-sm); padding: 0 var(--h-space-3); font-size: var(--h-fs-xs); gap: var(--h-space-1); }
.btn--lg { height: var(--h-control-h-lg); padding: 0 var(--h-space-6); font-size: var(--h-fs-md); }
.btn--block { width: 100%; }
.btn--icon { width: var(--h-control-h); padding: 0; }
.btn--icon.btn--sm { width: var(--h-control-h-sm); }

.btn__kbd {
  margin-left: var(--h-space-1);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-2xs);
  font-weight: 500;
  opacity: 0.8;
}

.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1rem; height: 1rem;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: h-spin 0.7s linear infinite;
}

.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; box-shadow: none; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:first-child { border-radius: var(--h-radius-sm) 0 0 var(--h-radius-sm); }
.btn-group > .btn:last-child  { border-radius: 0 var(--h-radius-sm) var(--h-radius-sm) 0; }
.btn-group > .btn:focus-visible { position: relative; z-index: 1; }

/* ==========================================================================
   03 FORMULIEREN
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: var(--h-space-5); }
.form-row { display: grid; gap: var(--h-space-4); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--h-space-2); padding-top: var(--h-space-2); }

.field { display: flex; flex-direction: column; gap: var(--h-space-2); min-width: 0; }
.label {
  font-size: var(--h-fs-sm);
  font-weight: 550;
  color: var(--h-text);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--h-space-2);
}
.label__opt { font-weight: 400; color: var(--h-text-3); font-size: var(--h-fs-xs); }
.hint  { font-size: var(--h-fs-xs); color: var(--h-text-3); }
.error { font-size: var(--h-fs-xs); color: var(--h-neg); font-weight: 500; }

.input, .select, .textarea {
  width: 100%;
  height: var(--h-control-h);
  padding: 0 var(--h-space-3);
  border: 1px solid var(--h-border-strong);
  border-radius: var(--h-radius-sm);
  background: var(--h-surface);
  color: var(--h-text);
  font-size: var(--h-fs-sm);
  box-shadow: inset 0 1px 1px rgb(12 17 32 / 0.03);
  transition: border-color var(--h-dur-1) var(--h-ease), box-shadow var(--h-dur-1) var(--h-ease);
}
.input::placeholder, .textarea::placeholder { color: var(--h-text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--h-border-strong) 60%, var(--h-text-3)); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--h-accent);
  box-shadow: var(--h-ring);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--h-surface-3);
  color: var(--h-text-3);
  cursor: not-allowed;
}
.input[readonly] { background: var(--h-surface-2); }
.input--num { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--h-font-mono); }
.input--sm, .select--sm { height: var(--h-control-h-sm); font-size: var(--h-fs-xs); }
.input--lg { height: var(--h-control-h-lg); font-size: var(--h-fs-md); }

.textarea { height: auto; min-height: 6rem; padding: var(--h-space-3); line-height: 1.5; resize: vertical; }

.select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237b8499' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
}

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea,
.input[aria-invalid="true"] {
  border-color: var(--h-neg);
}
.field.is-invalid .input:focus,
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-neg) 30%, transparent); }

/* Invoer met voor-/achtervoegsel: €, %, kg, stuks */
.input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--h-border-strong);
  border-radius: var(--h-radius-sm);
  background: var(--h-surface);
  overflow: hidden;
  transition: border-color var(--h-dur-1) var(--h-ease), box-shadow var(--h-dur-1) var(--h-ease);
}
.input-group:focus-within { border-color: var(--h-accent); box-shadow: var(--h-ring); }
.input-group .input { border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.input-group .input:focus { box-shadow: none; }
.input-group__addon {
  display: flex;
  align-items: center;
  padding: 0 var(--h-space-3);
  background: var(--h-surface-2);
  color: var(--h-text-3);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-xs);
  white-space: nowrap;
}
.input-group__addon:first-child { border-right: 1px solid var(--h-border); }
.input-group__addon:last-child  { border-left: 1px solid var(--h-border); }

/* Zoekveld met icoon en sneltoets */
.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search .input { padding-left: 2.25rem; padding-right: 2.75rem; }
.search__icon {
  position: absolute; left: 0.75rem;
  width: 1rem; height: 1rem;
  color: var(--h-text-3);
  pointer-events: none;
}
.search kbd { position: absolute; right: 0.6rem; pointer-events: none; }

/* Checkbox & radio */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--h-space-3);
  font-size: var(--h-fs-sm);
  cursor: pointer;
  line-height: 1.4;
}
.check input {
  appearance: none;
  flex-shrink: 0;
  width: 1.125rem; height: 1.125rem;
  margin-top: 0.05rem;
  border: 1.5px solid var(--h-border-strong);
  border-radius: 5px;
  background: var(--h-surface);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--h-dur-1) var(--h-ease), border-color var(--h-dur-1) var(--h-ease);
}
.check input[type="radio"] { border-radius: 50%; }
.check input::before {
  content: "";
  width: 0.65rem; height: 0.65rem;
  transform: scale(0);
  transition: transform var(--h-dur-1) var(--h-ease-out);
  background: var(--h-on-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.check input[type="radio"]::before { clip-path: circle(50%); width: 0.45rem; height: 0.45rem; }
.check input:checked { background: var(--h-accent); border-color: var(--h-accent); }
.check input:checked::before { transform: scale(1); }
.check input:indeterminate { background: var(--h-accent); border-color: var(--h-accent); }
.check input:indeterminate::before { transform: scale(1); clip-path: inset(40% 10%); }
.check input:focus-visible { outline: none; box-shadow: var(--h-ring); }
.check input:disabled { opacity: 0.5; cursor: not-allowed; }
.check__desc { display: block; color: var(--h-text-3); font-size: var(--h-fs-xs); }

/* Schakelaar */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--h-space-3);
  font-size: var(--h-fs-sm);
  cursor: pointer;
}
.switch input {
  appearance: none;
  flex-shrink: 0;
  position: relative;
  width: 2.25rem; height: 1.25rem;
  border-radius: 99px;
  background: var(--h-border-strong);
  cursor: pointer;
  transition: background var(--h-dur-2) var(--h-ease);
}
.switch input::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: calc(1.25rem - 4px); height: calc(1.25rem - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: transform var(--h-dur-2) var(--h-ease-out);
}
.switch input:checked { background: var(--h-accent); }
.switch input:checked::before { transform: translateX(1rem); }
.switch input:focus-visible { outline: none; box-shadow: var(--h-ring); }

/* Gesegmenteerde keuze: periode (1D 1W 1M 1J), weergave (lijst/raster) */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--h-radius-sm);
  background: var(--h-surface-3);
  border: 1px solid var(--h-border);
}
.segmented > button, .segmented > a, .segmented > label {
  display: inline-flex;
  align-items: center;
  gap: var(--h-space-1);
  height: calc(var(--h-control-h-sm) - 4px);
  padding: 0 var(--h-space-3);
  border-radius: 4px;
  color: var(--h-text-2);
  font-size: var(--h-fs-xs);
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--h-dur-1) var(--h-ease), color var(--h-dur-1) var(--h-ease);
}
.segmented > :hover { color: var(--h-text); }
.segmented > [aria-pressed="true"],
.segmented > [aria-selected="true"],
.segmented > .is-active,
.segmented > label:has(input:checked) {
  background: var(--h-surface);
  color: var(--h-text);
  box-shadow: var(--h-shadow-sm);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented--mono > * { font-family: var(--h-font-mono); }

/* ==========================================================================
   04 KAARTEN
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-lg);
  background: var(--h-surface);
  box-shadow: var(--h-shadow-sm);
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--h-space-4);
  flex-wrap: wrap;
  padding: var(--h-card-pad) var(--h-card-pad) 0;
}
.card__header--bordered { padding-bottom: var(--h-card-pad); border-bottom: 1px solid var(--h-border); }
.card__title { font-size: var(--h-fs-md); font-weight: 620; letter-spacing: -0.01em; }
.card__sub   { font-size: var(--h-fs-xs); color: var(--h-text-3); margin-top: 2px; }
.card__body  { padding: var(--h-card-pad); flex: 1; min-width: 0; }
.card__body--flush { padding: 0; }
.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--h-space-3);
  padding: var(--h-space-3) var(--h-card-pad);
  border-top: 1px solid var(--h-border);
  background: var(--h-surface-2);
  border-radius: 0 0 var(--h-radius-lg) var(--h-radius-lg);
  font-size: var(--h-fs-sm);
  color: var(--h-text-2);
}
.card--flat { box-shadow: none; background: var(--h-surface-2); }
.card--raised { box-shadow: var(--h-shadow); }
.card--interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--h-dur-2) var(--h-ease), box-shadow var(--h-dur-2) var(--h-ease), transform var(--h-dur-2) var(--h-ease);
}
.card--interactive:hover {
  border-color: var(--h-border-strong);
  box-shadow: var(--h-shadow);
  transform: translateY(-2px);
}
.card--inverse {
  background: var(--h-surface-inv);
  color: var(--h-text-inv);
  border-color: transparent;
}
.card--inverse .card__sub, .card--inverse .muted { color: color-mix(in srgb, var(--h-text-inv) 65%, transparent); }

/* Kengetal-tegel: saldo, P&L, voorraadwaarde, budget over */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--h-space-2);
  padding: var(--h-card-pad);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-lg);
  background: var(--h-surface);
  box-shadow: var(--h-shadow-sm);
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.stat__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--h-space-2);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-label);
  color: var(--h-text-3);
}
.stat__value {
  font-size: var(--h-fs-2xl);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat__value small { font-size: 0.55em; font-weight: 500; color: var(--h-text-3); letter-spacing: 0; margin-left: 0.15em; }
.stat__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--h-space-2);
  font-size: var(--h-fs-xs);
  color: var(--h-text-3);
}
.stat__spark { height: 2.5rem; margin-top: var(--h-space-1); color: var(--h-accent); }
.stat__spark svg { width: 100%; height: 100%; overflow: visible; }
.stat--pos .stat__spark { color: var(--h-pos); }
.stat--neg .stat__spark { color: var(--h-neg); }
.stat--hero .stat__value { font-size: var(--h-fs-4xl); }

/* Sleutel-waarde: detailweergave van een boeking, product, order */
.kv {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: var(--h-space-3) var(--h-space-6);
  font-size: var(--h-fs-sm);
}
.kv dt { color: var(--h-text-3); }
.kv dd { color: var(--h-text); font-weight: 500; min-width: 0; }
.kv--lines { gap: 0; }
.kv--lines dt, .kv--lines dd { padding-block: var(--h-space-3); border-bottom: 1px solid var(--h-border); }
@media (max-width: 30rem) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0 var(--h-space-4); }
  .kv dd { padding-bottom: var(--h-space-3); }
  .kv--lines dt { border-bottom: 0; padding-bottom: 0; }
}

/* ==========================================================================
   05 TABELLEN
   ========================================================================== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-lg);
  background: var(--h-surface);
  box-shadow: var(--h-shadow-sm);
}
.card .table-wrap, .table-wrap--flush { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.table-wrap--scroll { max-height: var(--table-max-h, 32rem); overflow-y: auto; }

.table {
  width: 100%;
  font-size: var(--h-fs-sm);
  font-variant-numeric: tabular-nums;
}
.table th, .table td {
  padding: var(--h-cell-py) var(--h-cell-px);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--h-border);
}
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: calc(var(--h-cell-py) * 0.8);
  background: var(--h-surface-2);
  color: var(--h-text-3);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-label);
  white-space: nowrap;
  border-bottom-color: var(--h-border);
}
.table tbody tr { transition: background var(--h-dur-1) var(--h-ease); }
.table tbody tr:hover { background: color-mix(in srgb, var(--h-accent) 4%, transparent); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-selected { background: var(--h-accent-soft); }
.table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--h-accent); }
.table tbody tr.is-muted td { color: var(--h-text-3); }

/* Kolomtypen */
.table .num, .table th.num { text-align: right; font-family: var(--h-font-mono); font-size: 0.95em; white-space: nowrap; }
.table .col-check  { width: 2.75rem; padding-right: 0; }
.table .col-shrink { width: 1%; white-space: nowrap; }
.table .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.table .cell-main { font-weight: 550; color: var(--h-text); }
.table .cell-sub  { display: block; font-size: var(--h-fs-xs); color: var(--h-text-3); font-weight: 400; }
.table .cell-flex { display: flex; align-items: center; gap: var(--h-space-3); min-width: 0; }

/* Rij-acties: verschijnen bij hover, altijd zichtbaar op touch */
.row-actions { display: inline-flex; gap: 2px; opacity: 0; transition: opacity var(--h-dur-1) var(--h-ease); }
.table tr:hover .row-actions, .table tr:focus-within .row-actions, .row-actions:focus-within { opacity: 1; }
@media (hover: none) { .row-actions { opacity: 1; } }

/* Sorteren: zet aria-sort op de th en een <button> erin */
.table th button {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.table th button::after {
  content: "↕";
  opacity: 0.35;
  font-size: 1.1em;
}
.table th[aria-sort="ascending"]  button::after { content: "↑"; opacity: 1; color: var(--h-accent-text); }
.table th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; color: var(--h-accent-text); }
.table th[aria-sort] { color: var(--h-text); }
.table th.num button { flex-direction: row-reverse; }

/* Groepskop binnen tbody (bijv. per maand of per categorie) */
.table tr.row-group td {
  padding-block: var(--h-space-2);
  background: var(--h-surface-2);
  color: var(--h-text-2);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-label);
}

/* Totaalregel */
.table tfoot td, .table tfoot th {
  background: var(--h-surface-2);
  font-weight: 650;
  color: var(--h-text);
  border-top: 1px solid var(--h-border-strong);
  border-bottom: 0;
}

.table--striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--h-surface-3) 45%, transparent); }
.table--compact { --h-cell-py: 0.4rem; --h-cell-px: 0.75rem; }
.table--lines td + td, .table--lines th + th { border-left: 1px solid var(--h-border); }

/* Werkbalk boven een tabel: zoeken, filters, bulkacties */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--h-space-3);
  padding: var(--h-space-3) var(--h-card-pad);
  border-bottom: 1px solid var(--h-border);
}
.toolbar .search { flex: 1 1 14rem; max-width: 22rem; }
.toolbar__spacer { flex: 1; }
.toolbar--bulk {
  background: var(--h-accent-soft);
  color: var(--h-accent-text);
  font-size: var(--h-fs-sm);
  font-weight: 550;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--h-space-3);
  padding: var(--h-space-3) var(--h-card-pad);
  border-top: 1px solid var(--h-border);
  font-size: var(--h-fs-xs);
  color: var(--h-text-3);
}
.pagination__pages { display: flex; gap: 2px; }
.pagination__pages > * {
  display: grid;
  place-items: center;
  min-width: 2rem; height: 2rem;
  padding: 0 var(--h-space-2);
  border-radius: var(--h-radius-sm);
  color: var(--h-text-2);
  font-family: var(--h-font-mono);
  text-decoration: none;
}
.pagination__pages > a:hover, .pagination__pages > button:hover { background: var(--h-surface-3); color: var(--h-text); }
.pagination__pages > [aria-current="page"] { background: var(--h-surface-inv); color: var(--h-text-inv); }

/* ==========================================================================
   06 LABELS & STATUS
   ========================================================================== */
.badge {
  --badge-bg: var(--h-surface-3);
  --badge-fg: var(--h-text-2);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  height: 1.375rem;
  padding: 0 0.55rem;
  border-radius: var(--h-radius-pill);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--h-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
}
.badge--accent { --badge-bg: var(--h-accent-soft); --badge-fg: var(--h-accent-text); }
.badge--pos    { --badge-bg: var(--h-pos-soft);  --badge-fg: var(--h-pos); }
.badge--neg    { --badge-bg: var(--h-neg-soft);  --badge-fg: var(--h-neg); }
.badge--warn   { --badge-bg: var(--h-warn-soft); --badge-fg: var(--h-warn); }
.badge--info   { --badge-bg: var(--h-info-soft); --badge-fg: var(--h-info); }
.badge--zest   { --badge-bg: var(--h-zest);      --badge-fg: var(--h-on-zest); }
.badge--solid  { --badge-bg: var(--h-surface-inv); --badge-fg: var(--h-text-inv); }
.badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--h-border-strong); }
.badge--mono   { font-family: var(--h-font-mono); font-weight: 500; letter-spacing: 0.03em; }
.badge--square { border-radius: var(--h-radius-xs); }
/* Statusbolletje voor in een badge */
.badge--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Tag/chip: filters, categorieën, verwijderbaar */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--h-space-2);
  height: 1.875rem;
  padding: 0 var(--h-space-3);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-pill);
  background: var(--h-surface);
  color: var(--h-text-2);
  font-size: var(--h-fs-xs);
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
}
button.tag, a.tag, label.tag { cursor: pointer; text-decoration: none; transition: all var(--h-dur-1) var(--h-ease); }
button.tag:hover, a.tag:hover, label.tag:hover { border-color: var(--h-border-strong); color: var(--h-text); }
.tag[aria-pressed="true"], .tag.is-active, label.tag:has(input:checked) {
  background: var(--h-surface-inv);
  border-color: var(--h-surface-inv);
  color: var(--h-text-inv);
}
.tag input { position: absolute; opacity: 0; pointer-events: none; }
.tag__count { font-family: var(--h-font-mono); font-size: var(--h-fs-2xs); opacity: 0.6; }
.tag__remove {
  display: grid;
  place-items: center;
  width: 1rem; height: 1rem;
  margin-right: calc(var(--h-space-1) * -1);
  border-radius: 50%;
  color: inherit;
  opacity: 0.6;
  font-size: 0.9em;
  line-height: 1;
}
.tag__remove:hover { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }

/* Statuspunt: online, live, gesynchroniseerd */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--h-text-3);
  flex-shrink: 0;
  vertical-align: middle;
}
.dot--pos  { background: var(--h-pos); }
.dot--neg  { background: var(--h-neg); }
.dot--warn { background: var(--h-warn); }
.dot--info { background: var(--h-info); }
.dot--accent { background: var(--h-accent); }
.dot--live { background: var(--h-pos); box-shadow: 0 0 0 0 var(--h-pos); animation: h-pulse 2s var(--h-ease) infinite; }

/* Verschil: +2,4% / −€ 120 met pijltje */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-family: var(--h-font-mono);
  font-size: 0.92em;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.delta--up   { color: var(--h-pos); }
.delta--down { color: var(--h-neg); }
.delta--flat { color: var(--h-text-3); }
.delta--up::before   { content: "▲"; font-size: 0.7em; }
.delta--down::before { content: "▼"; font-size: 0.7em; }
.delta--flat::before { content: "■"; font-size: 0.6em; }
.delta--pill { padding: 0.15em 0.5em; border-radius: var(--h-radius-xs); }
.delta--pill.delta--up   { background: var(--h-pos-soft); }
.delta--pill.delta--down { background: var(--h-neg-soft); }
.delta--pill.delta--flat { background: var(--h-surface-3); }

/* Avatar / initialen / productplaatje */
.avatar {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-size, 2rem); height: var(--avatar-size, 2rem);
  border-radius: 50%;
  background: var(--h-accent-soft);
  color: var(--h-accent-text);
  font-size: calc(var(--avatar-size, 2rem) * 0.38);
  font-weight: 650;
  letter-spacing: 0;
  overflow: hidden;
  flex-shrink: 0;
  text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { --avatar-size: 1.5rem; }
.avatar--lg { --avatar-size: 2.75rem; }
.avatar--square { border-radius: var(--h-radius-sm); }
/* Ticker-logo / categorie-icoon */
.avatar--mono {
  border-radius: var(--h-radius-sm);
  background: var(--h-surface-3);
  color: var(--h-text);
  font-family: var(--h-font-mono);
  font-size: calc(var(--avatar-size, 2rem) * 0.3);
  font-weight: 600;
}
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--h-surface); }
.avatar-stack .avatar + .avatar { margin-left: -0.5rem; }

/* ==========================================================================
   07 MELDINGEN
   ========================================================================== */
.alert {
  --alert-c: var(--h-info);
  --alert-bg: var(--h-info-soft);
  display: flex;
  gap: var(--h-space-3);
  align-items: flex-start;
  padding: var(--h-space-4) var(--h-space-5);
  border: 1px solid color-mix(in srgb, var(--alert-c) 25%, transparent);
  border-radius: var(--h-radius);
  background: var(--alert-bg);
  color: var(--h-text);
  font-size: var(--h-fs-sm);
  line-height: 1.5;
}
.alert__icon { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; color: var(--alert-c); }
.alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--h-space-1); }
.alert__title { font-weight: 620; }
.alert__actions { display: flex; gap: var(--h-space-2); margin-top: var(--h-space-2); flex-wrap: wrap; }
.alert--pos  { --alert-c: var(--h-pos);  --alert-bg: var(--h-pos-soft); }
.alert--neg  { --alert-c: var(--h-neg);  --alert-bg: var(--h-neg-soft); }
.alert--warn { --alert-c: var(--h-warn); --alert-bg: var(--h-warn-soft); }
.alert--accent { --alert-c: var(--h-accent); --alert-bg: var(--h-accent-soft); }
/* Smalle variant: één regel boven een tabel of formulier */
.alert--inline { padding: var(--h-space-2) var(--h-space-3); border-radius: var(--h-radius-sm); align-items: center; }

/* Toasts: <div class="toast-region"> eenmalig onderaan de body */
.toast-region {
  position: fixed;
  right: var(--h-space-6);
  bottom: calc(var(--h-space-6) + env(safe-area-inset-bottom, 0px));
  z-index: var(--h-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--h-space-2);
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--h-space-3);
  padding: var(--h-space-3) var(--h-space-4);
  border-radius: var(--h-radius);
  background: var(--h-surface-inv);
  color: var(--h-text-inv);
  box-shadow: var(--h-shadow-lg);
  font-size: var(--h-fs-sm);
  pointer-events: auto;
  animation: h-toast-in var(--h-dur-3) var(--h-ease-out);
}
.toast__body { flex: 1; min-width: 0; }
.toast .btn--ghost { --btn-fg: var(--h-zest); --btn-bg-hover: rgb(127 127 127 / 0.18); }
.toast--pos .dot { background: var(--h-pos); }
.toast--neg .dot { background: var(--h-neg); }
@media (max-width: 40rem) {
  .toast-region { right: 1rem; left: 1rem; width: auto; }
}

/* Lege staat — met een knipoog in de tekst, nooit een kale 'Geen data' */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--h-space-3);
  padding: var(--h-space-12) var(--h-space-6);
  text-align: center;
  color: var(--h-text-2);
}
.empty__icon {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  margin-bottom: var(--h-space-2);
  border: 1px dashed var(--h-border-strong);
  border-radius: var(--h-radius-lg);
  color: var(--h-text-3);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-lg);
  background: var(--h-surface-2);
}
.empty__title { color: var(--h-text); font-size: var(--h-fs-lg); font-weight: 620; }
.empty__text  { max-width: 26rem; font-size: var(--h-fs-sm); }
.empty .btn   { margin-top: var(--h-space-3); }

/* ==========================================================================
   08 LAGEN — modal, dropdown, tooltip
   ========================================================================== */
/* Gebruik het native <dialog class="modal">, open met dialog.showModal() */
.modal {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 4rem);
  padding: 0;
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-xl);
  background: var(--h-surface);
  color: var(--h-text);
  box-shadow: var(--h-shadow-lg);
  overflow: auto;
  margin: auto;
}
.modal--lg { width: min(48rem, calc(100vw - 2rem)); }
.modal--sheet {
  margin-right: 0;
  height: 100dvh;
  max-height: none;
  border-radius: var(--h-radius-xl) 0 0 var(--h-radius-xl);
  width: min(28rem, 100vw);
}
.modal::backdrop {
  background: rgb(8 11 22 / 0.5);
  backdrop-filter: blur(4px);
}
.modal[open] { animation: h-modal-in var(--h-dur-3) var(--h-ease-out); }
.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--h-space-4);
  padding: var(--h-space-6) var(--h-space-6) var(--h-space-2);
}
.modal__title { font-size: var(--h-fs-xl); }
.modal__body { padding: var(--h-space-4) var(--h-space-6); color: var(--h-text-2); font-size: var(--h-fs-sm); }
.modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--h-space-2);
  padding: var(--h-space-4) var(--h-space-6) var(--h-space-6);
}

/* Dropdown met <details class="dropdown"><summary>…</summary><div class="menu">…</div></details> */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > .menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--h-z-dropdown);
  animation: h-pop var(--h-dur-2) var(--h-ease-out);
}
.dropdown--left > .menu { right: auto; left: 0; }
.menu {
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: var(--h-space-1);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  background: var(--h-surface);
  box-shadow: var(--h-shadow-lg);
}
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--h-space-3);
  width: 100%;
  min-height: 2.125rem;
  padding: 0 var(--h-space-3);
  border-radius: var(--h-radius-sm);
  color: var(--h-text);
  font-size: var(--h-fs-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu__item svg { width: 1rem; height: 1rem; color: var(--h-text-3); }
.menu__item:hover, .menu__item:focus-visible { background: var(--h-surface-3); outline: none; }
.menu__item kbd { margin-left: auto; }
.menu__item--danger { color: var(--h-neg); }
.menu__item--danger svg { color: currentColor; }
.menu__item--danger:hover { background: var(--h-neg-soft); }
.menu__sep { height: 1px; margin: var(--h-space-1) calc(var(--h-space-1) * -1); background: var(--h-border); }
.menu__label {
  padding: var(--h-space-2) var(--h-space-3) var(--h-space-1);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-label);
  color: var(--h-text-3);
}

/* Tooltip met alleen CSS: <span data-tip="Uitleg">…</span> */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: var(--h-z-dropdown);
  width: max-content;
  max-width: 16rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--h-radius-sm);
  background: var(--h-surface-inv);
  color: var(--h-text-inv);
  font-family: var(--h-font);
  font-size: var(--h-fs-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity var(--h-dur-1) var(--h-ease), transform var(--h-dur-1) var(--h-ease);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   09 TABS
   ========================================================================== */
.tabs {
  display: flex;
  gap: var(--h-space-6);
  border-bottom: 1px solid var(--h-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--h-space-2);
  padding: var(--h-space-3) 0;
  color: var(--h-text-3);
  font-size: var(--h-fs-sm);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--h-dur-1) var(--h-ease);
}
.tabs__tab:hover { color: var(--h-text); }
.tabs__tab[aria-selected="true"], .tabs__tab[aria-current="page"], .tabs__tab.is-active { color: var(--h-text); }
.tabs__tab[aria-selected="true"]::after, .tabs__tab[aria-current="page"]::after, .tabs__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--h-accent);
}
.tabs__count {
  padding: 0.1em 0.45em;
  border-radius: var(--h-radius-pill);
  background: var(--h-surface-3);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-2xs);
  color: var(--h-text-2);
}

/* ==========================================================================
   10 VOORTGANG & LADEN
   ========================================================================== */
.progress {
  --progress-c: var(--h-accent);
  position: relative;
  height: 0.5rem;
  border-radius: var(--h-radius-pill);
  background: var(--h-surface-3);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: var(--value, 0%);
  border-radius: inherit;
  background: var(--progress-c);
  transition: width var(--h-dur-3) var(--h-ease-out);
}
.progress--sm { height: 0.3rem; }
.progress--lg { height: 0.75rem; }
.progress--pos  { --progress-c: var(--h-pos); }
.progress--neg  { --progress-c: var(--h-neg); }
.progress--warn { --progress-c: var(--h-warn); }
/* Gesegmenteerde voortgang: 'tech'-uitstraling, mooi voor voorraad/budget */
.progress--ticks .progress__bar {
  background: repeating-linear-gradient(90deg, var(--progress-c) 0 6px, transparent 6px 8px);
}
.progress--indeterminate .progress__bar {
  width: 35%;
  animation: h-indeterminate 1.4s var(--h-ease) infinite;
}

/* Meter: label + waarde + balk (budget, voorraad, limiet) */
.meter { display: flex; flex-direction: column; gap: var(--h-space-2); }
.meter__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--h-space-3);
  font-size: var(--h-fs-sm);
}
.meter__label { color: var(--h-text); font-weight: 520; }
.meter__value { font-family: var(--h-font-mono); font-size: var(--h-fs-xs); color: var(--h-text-3); font-variant-numeric: tabular-nums; }
.meter__value strong { color: var(--h-text); font-weight: 600; }

.spinner {
  display: inline-block;
  width: var(--spinner-size, 1.25rem);
  height: var(--spinner-size, 1.25rem);
  border: 2px solid var(--h-border-strong);
  border-top-color: var(--h-accent);
  border-radius: 50%;
  animation: h-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.skeleton {
  display: block;
  height: 0.875rem;
  border-radius: var(--h-radius-xs);
  background: linear-gradient(90deg, var(--h-surface-3) 0%, var(--h-surface-2) 50%, var(--h-surface-3) 100%);
  background-size: 200% 100%;
  animation: h-shimmer 1.4s linear infinite;
}
.skeleton--title  { height: 1.5rem; width: 40%; }
.skeleton--circle { width: 2rem; height: 2rem; border-radius: 50%; }
.skeleton--block  { height: 6rem; border-radius: var(--h-radius); }

/* ==========================================================================
   11 LIJSTEN
   ========================================================================== */
.list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
}
.list__item {
  display: flex;
  align-items: center;
  gap: var(--h-space-4);
  padding: var(--h-space-3) var(--h-card-pad);
  border-bottom: 1px solid var(--h-border);
  min-width: 0;
}
.list__item:last-child { border-bottom: 0; }
.list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list__title { font-size: var(--h-fs-sm); font-weight: 550; color: var(--h-text); }
.list__sub   { font-size: var(--h-fs-xs); color: var(--h-text-3); }
.list__end   { display: flex; align-items: center; gap: var(--h-space-3); flex-shrink: 0; text-align: right; }
a.list__item, button.list__item { color: inherit; text-decoration: none; width: 100%; text-align: left; transition: background var(--h-dur-1) var(--h-ease); }
a.list__item:hover, button.list__item:hover { background: var(--h-surface-2); }
.list--inset .list__item { padding-inline: 0; }

/* Afvinklijst: boodschappen, taken, inpaklijst */
.checklist { display: flex; flex-direction: column; list-style: none; padding: 0; }
.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--h-space-3);
  padding: var(--h-space-3) var(--h-card-pad);
  border-bottom: 1px solid var(--h-border);
  cursor: pointer;
  transition: background var(--h-dur-1) var(--h-ease);
}
.checklist__item:last-child { border-bottom: 0; }
.checklist__item:hover { background: var(--h-surface-2); }
.checklist__item .check { flex: 1; min-width: 0; align-items: center; }
.checklist__qty {
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-xs);
  color: var(--h-text-3);
  white-space: nowrap;
}
.checklist__item:has(input:checked) .checklist__text {
  text-decoration: line-through;
  text-decoration-color: var(--h-text-3);
  color: var(--h-text-3);
}
.checklist__item:has(input:checked) .checklist__qty { opacity: 0.5; }

/* Tijdlijn / activiteitenfeed: mutaties, orders, logboek */
.feed { display: flex; flex-direction: column; list-style: none; padding: 0; position: relative; }
.feed__item {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  gap: var(--h-space-3);
  padding-bottom: var(--h-space-5);
  font-size: var(--h-fs-sm);
}
.feed__item::before {
  content: "";
  position: absolute;
  left: calc(0.625rem - 0.5px);
  top: 1.25rem;
  bottom: 0.15rem;
  width: 1px;
  background: var(--h-border);
}
.feed__item:last-child { padding-bottom: 0; }
.feed__item:last-child::before { display: none; }
.feed__marker {
  display: grid;
  place-items: center;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--h-surface);
  border: 1.5px solid var(--h-border-strong);
}
.feed__marker::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--marker-c, var(--h-text-3)); }
.feed__marker--pos    { --marker-c: var(--h-pos); }
.feed__marker--neg    { --marker-c: var(--h-neg); }
.feed__marker--accent { --marker-c: var(--h-accent); }
.feed__time { font-family: var(--h-font-mono); font-size: var(--h-fs-2xs); color: var(--h-text-3); white-space: nowrap; padding-top: 2px; }
.feed__text { color: var(--h-text-2); }
.feed__text strong { color: var(--h-text); }

/* ==========================================================================
   12 TRADING — ticker en koers
   ========================================================================== */
.ticker {
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--h-border);
  background: var(--h-surface);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker__track {
  display: flex;
  flex-shrink: 0;
  gap: var(--h-space-8);
  padding: var(--h-space-2) var(--h-space-4);
  animation: h-marquee var(--ticker-speed, 40s) linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--h-space-2);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ticker__sym { font-weight: 600; color: var(--h-text); }
.ticker__px  { color: var(--h-text-2); }

/* Grote koersweergave in een detailpagina */
.quote { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--h-space-2) var(--h-space-4); }
.quote__px {
  font-size: var(--h-fs-4xl);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.quote__ccy { font-family: var(--h-font-mono); font-size: var(--h-fs-sm); color: var(--h-text-3); }
/* Kort oplichten bij een koerswijziging: zet .flash-up / .flash-down via JS */
.flash-up   { animation: h-flash-up 900ms var(--h-ease); }
.flash-down { animation: h-flash-down 900ms var(--h-ease); }

/* Grafiekcontainer: geeft SVG-grafieken de juiste kleuren en raster */
.chart { position: relative; width: 100%; color: var(--h-chart-1); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid-line { stroke: var(--h-border); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .axis-label { fill: var(--h-text-3); font-family: var(--h-font-mono); font-size: 10px; }
.chart .line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: currentColor; opacity: 0.12; stroke: none; }
.chart .endpoint { fill: currentColor; stroke: var(--h-surface); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: var(--h-space-2) var(--h-space-5); font-size: var(--h-fs-xs); color: var(--h-text-2); }
.legend__item { display: inline-flex; align-items: center; gap: var(--h-space-2); }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--swatch, var(--h-chart-1)); }

/* ==========================================================================
   13 KNIPOOG — kleine dingen die het leuk maken
   ========================================================================== */
/* Knipperende terminal-cursor achter een titel of laadtekst */
.cursor::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.12em;
  vertical-align: -0.12em;
  background: var(--h-zest);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--h-zest) 40%, #000 25%);
  animation: h-blink 1.1s steps(1) infinite;
}

/* Tech-hoeken: vier richtmerken rond een kaart, zoals een HUD */
.tech-corners {
  position: relative;
  --tc-c: var(--h-accent);
  --tc-s: 10px;
}
.tech-corners::before, .tech-corners::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(var(--tc-c), var(--tc-c)) top left    / var(--tc-s) 1.5px,
    linear-gradient(var(--tc-c), var(--tc-c)) top left    / 1.5px var(--tc-s),
    linear-gradient(var(--tc-c), var(--tc-c)) bottom right / var(--tc-s) 1.5px,
    linear-gradient(var(--tc-c), var(--tc-c)) bottom right / 1.5px var(--tc-s);
  background-repeat: no-repeat;
}
.tech-corners::after {
  background:
    linear-gradient(var(--tc-c), var(--tc-c)) top right   / var(--tc-s) 1.5px,
    linear-gradient(var(--tc-c), var(--tc-c)) top right   / 1.5px var(--tc-s),
    linear-gradient(var(--tc-c), var(--tc-c)) bottom left / var(--tc-s) 1.5px,
    linear-gradient(var(--tc-c), var(--tc-c)) bottom left / 1.5px var(--tc-s);
  background-repeat: no-repeat;
}
.tech-corners.card, .tech-corners.stat { border-radius: var(--h-radius-xs); }

/* Markeerstift-onderstreping in citroen */
.highlight {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--h-zest) 70%, transparent) 62%);
  padding: 0 0.1em;
}

/* De knipoog zelf: een ;) die even kantelt bij hover. Gebruik voor easter eggs. */
.wink {
  display: inline-block;
  font-family: var(--h-font-mono);
  color: var(--h-text-3);
  transition: transform var(--h-dur-2) var(--h-ease-out), color var(--h-dur-2) var(--h-ease);
}
.wink:hover, a:hover > .wink, button:hover > .wink { transform: rotate(90deg); color: var(--h-accent-text); }

/* Nieuw-markering: klein citroen-label */
.is-new::after {
  content: "nieuw";
  margin-left: var(--h-space-2);
  padding: 0.1em 0.4em;
  border-radius: var(--h-radius-xs);
  background: var(--h-zest);
  color: var(--h-on-zest);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-2xs);
  font-weight: 600;
  vertical-align: 0.1em;
}

/* Sneltoets-strip onderaan een pagina */
.shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--h-space-2) var(--h-space-5);
  font-size: var(--h-fs-xs);
  color: var(--h-text-3);
}
.shortcuts > span { display: inline-flex; align-items: center; gap: var(--h-space-2); }

/* Scheidingslijn met label */
.divider {
  display: flex;
  align-items: center;
  gap: var(--h-space-3);
  color: var(--h-text-3);
  font-family: var(--h-font-mono);
  font-size: var(--h-fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-label);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--h-border); }

} /* einde @layer h.onderdelen */

/* ==========================================================================
   ANIMATIES
   ========================================================================== */
@keyframes h-spin { to { transform: rotate(360deg); } }
@keyframes h-blink { 50% { opacity: 0; } }
@keyframes h-shimmer { to { background-position: -200% 0; } }
@keyframes h-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--h-pos) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes h-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes h-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes h-toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes h-marquee { to { transform: translateX(-100%); } }
@keyframes h-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes h-flash-up   { from { background: color-mix(in srgb, var(--h-pos) 28%, transparent); } }
@keyframes h-flash-down { from { background: color-mix(in srgb, var(--h-neg) 28%, transparent); } }