/* ============================================================
   Lijndraad — components.css
   Merkneutrale .ui-* laag. Prefix "ui-" is bewust: motion.css claimt
   al kale .card en .cta, en circa 300 bestaande bestanden gebruiken
   kale klassen. Met "ui-" valt dit bestand in een bestaand project
   zonder iets te herstylen.

   Elke selector staat in :where() zodat specificiteit op 0 blijft en
   merk-CSS overschrijft zonder !important nodig te hebben.

   Link na contract.css, brands/<merk>/tokens.css en base.css.
   Lost D6 op (geen dialog-primitive, role="dialog" kwam 0x voor).
   Twee regels komen letterlijk uit gsa-orderportaal/docs/design-system.md:
   "Kleur is nooit het enige signaal" (KPI-delta) en tabellen scrollen
   alleen binnen hun eigen wrapper, nooit de pagina.
   ============================================================ */

/* ---------- Button ---------- */
:where(.ui-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-size: var(--fs-small);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-corners-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
:where(.ui-btn--primary) {
  /* bg-invert/fg-invert is per definitie het contrasterende paar van een
     merk (gebruikt voor donkere secties/kaarten), en dus altijd veilig
     voor een gevulde primaire knop. --accent/--accent-ink is dat NIET
     gegarandeerd: bevestigd deze sessie faalt wit-op-Top-Match-paars op
     4.2:1 tegen de vereiste 4.5:1 (impeccable low-contrast, gevonden op
     de eigen web-starter). Top Match's eigen .cta--primary gebruikt ook
     al bordeaux (bg-invert), niet paars, als primaire knopvulling. */
  background: var(--bg-invert); color: var(--fg-invert);
}
:where(.ui-btn--ghost)   { background: transparent; color: var(--fg); border-color: var(--border); }
:where(.ui-btn--danger)  { background: var(--err); color: var(--fg-invert); }
:where(.ui-btn--sm) { padding: var(--space-2) var(--space-4); font-size: var(--fs-micro); }
:where(.ui-btn--lg) { padding: var(--space-4) var(--space-6); font-size: var(--fs-body); }
:where(.ui-btn:disabled) { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---------- Card ---------- */
:where(.ui-card) {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-corners-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
:where(.ui-card--outline) { background: transparent; box-shadow: none; }
:where(.ui-card--invert)  { background: var(--bg-invert); color: var(--fg-invert); border-color: var(--border-invert); }
:where(.ui-card__media) { border-radius: var(--radius-corners-md); overflow: hidden; margin-bottom: var(--space-4); }
:where(.ui-card__body)  { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Nav ---------- */
:where(.ui-nav) {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--page-gutter);
  gap: var(--space-5);
}
:where(.ui-nav__links) { display: flex; align-items: center; gap: var(--space-5); list-style: none; }
:where(.ui-nav__links a) { color: var(--fg-muted); text-decoration: none; }
:where(.ui-nav__links a[aria-current="page"]) { color: var(--fg); font-weight: 600; }
:where(.ui-nav__toggle) { display: none; }
@media (max-width: 720px) {
  :where(.ui-nav__toggle) { display: inline-flex; }
  :where(.ui-nav__links) { display: none; }
  :where(.ui-nav__links.is-open) { display: flex; flex-direction: column; }
}

/* ---------- Sidebar ---------- */
:where(.ui-sidebar) { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); }
:where(.ui-sidebar__item) {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-corners-md);
  color: var(--fg-muted);
}
:where(.ui-sidebar__item[aria-current="page"]) { background: var(--bg-soft); color: var(--fg); }

/* ---------- Table. Horizontaal scrollen mag alleen binnen __wrap. ---------- */
:where(.ui-table__wrap) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
:where(.ui-table) { width: 100%; border-collapse: collapse; min-width: 40rem; }
:where(.ui-table th) {
  text-align: left; font-size: var(--fs-small); color: var(--fg-muted);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-strong);
}
:where(.ui-table td) { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }

/* ---------- Hero. Nooit een vaste px-headline: altijd clamp (dekt D3). ---------- */
:where(.ui-hero) { display: flex; flex-direction: column; gap: var(--space-4); max-width: 70ch; }
:where(.ui-hero__kicker) { font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
:where(.ui-hero__title) {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-h3), 7vw, var(--fs-h1));
  line-height: var(--lh-tight);
}
:where(.ui-hero__lede) { font-size: clamp(var(--fs-body), 2vw, var(--fs-lede)); color: var(--fg-muted); max-width: 60ch; }
:where(.ui-hero__actions) { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- KPI. Kleur is nooit het enige signaal: het pijltje komt uit CSS. ---------- */
:where(.ui-kpi) { display: flex; flex-direction: column; gap: var(--space-2); }
:where(.ui-kpi__label) { font-size: var(--fs-small); color: var(--fg-muted); }
:where(.ui-kpi__value) { font-size: var(--fs-h3); font-family: var(--font-display); }
:where(.ui-kpi__delta) { font-size: var(--fs-small); display: inline-flex; align-items: center; gap: var(--space-1); }
:where(.ui-kpi--up)   .ui-kpi__delta { color: var(--ok); }
:where(.ui-kpi--up)   .ui-kpi__delta::before { content: "\2191"; }
:where(.ui-kpi--down) .ui-kpi__delta { color: var(--err); }
:where(.ui-kpi--down) .ui-kpi__delta::before { content: "\2193"; }

/* ---------- Dialog. Native <dialog>, ontbrak volledig op de schijf. ---------- */
:where(.ui-dialog) { border: 0; padding: 0; background: transparent; max-width: min(92vw, 40rem); }
:where(.ui-dialog)::backdrop { background: color-mix(in srgb, var(--fg) 45%, transparent); }
:where(.ui-dialog__panel) {
  background: var(--bg); color: var(--fg);
  border-radius: var(--radius-corners-lg);
  padding: var(--space-6); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: var(--space-4);
}
:where(.ui-dialog__title) { font-size: var(--fs-h4); font-family: var(--font-display); }
:where(.ui-dialog__close) { position: absolute; top: var(--space-4); right: var(--space-4); }

/* ---------- Field ---------- */
:where(.ui-field) { display: flex; flex-direction: column; gap: var(--space-2); }
:where(.ui-field__label) { font-size: var(--fs-small); color: var(--fg-muted); }
:where(.ui-field__hint) { font-size: var(--fs-micro); color: var(--fg-subtle); }
:where(.ui-field__error) { font-size: var(--fs-micro); color: var(--err); }
:where(.ui-field input, .ui-field textarea, .ui-field select) {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-corners-md);
  background: var(--bg); color: var(--fg);
}

/* ---------- Staten ---------- */
:where(.ui-empty, .ui-error) {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-9) var(--space-5); text-align: center; color: var(--fg-muted);
}
:where(.ui-skeleton) {
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--border) 50%, var(--bg-soft) 75%);
  background-size: 200% 100%; border-radius: var(--radius-corners-md);
  animation: ui-skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes ui-skeleton-sweep { to { background-position: -200% 0; } }

/* ---------- Chip / Badge ---------- */
:where(.ui-chip, .ui-badge) {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-micro); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); background: var(--bg-soft); color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  :where(.ui-card, .ui-btn, .ui-chip, .ui-skeleton) { transition: none !important; animation: none !important; }
}