/*
 * components.css — design-system v2 · 12 canonical componenten
 *
 * Scope: `scope/design-system.md` sectie 6 (12 c-*) + sectie 7 (overlay) +
 *        sectie 9 (visual-refresh patterns met narratief anker)
 *
 * **"No new component without reason."** Als een scherm iets nieuws nodig
 * heeft dat niet in deze 12 past: eerst scope-doc challenge, dan toevoegen.
 *
 * Alle styling via tokens (geen hardcoded waardes).
 * Varianten gebruiken 5 semantic rollen (--accent/--ok/--warn/--err/--info).
 */

/* ═════════════════════════════════════════════════════════════════
   BASE RESET — minimale normalize voor consistency
   ═════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Focus-visible — toegankelijkheid WCAG 2.1 (--focus-ring in tokens) */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ═════════════════════════════════════════════════════════════════
   C1 · .c-card — default · elevated · hero
   ───────────────────────────────────────────────────────────────────
   Narratief-anker (P-10): warme eilanden tegen rustige basis.
   ═════════════════════════════════════════════════════════════════ */

.c-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: var(--sh-sm);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.c-card.elevated {
  background: var(--card-elevated);
  box-shadow: var(--sh-md);
}

.c-card.hero {
  background: var(--cream);
  border-left: 3px solid var(--accent);     /* visual-refresh pattern */
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
}

/* Hover-lift (visual-refresh sectie 9) */
.c-card[role="button"]:hover,
a.c-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* ═════════════════════════════════════════════════════════════════
   C2 · .c-btn — default · primary · ghost · loading · disabled · lg
   ───────────────────────────────────────────────────────────────────
   Narratief-anker: grutto roept kort en helder.
   ═════════════════════════════════════════════════════════════════ */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font: var(--fw-semibold) var(--f-base)/1 var(--font-sans);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  min-height: 44px;              /* iOS tap-target */
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  user-select: none;
}
.c-btn:hover { background: var(--cream); }
.c-btn:active { transform: scale(0.98); }     /* visual-refresh */

.c-btn.primary {
  background: var(--accent);
  color: #ffffff;                /* altijd wit op accent-oranje in light */
  border-color: var(--accent);
}
.c-btn.primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}
.theme-dark .c-btn.primary { color: var(--bg); }  /* micro-detail 3.9 — knoppen dragen polder-green */
.theme-dark .c-btn.primary:hover { background: var(--accent-ink); }

.c-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}
.c-btn.ghost:hover { background: var(--accent-soft); }

.c-btn.lg {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--f-md);
  min-height: 52px;
}

.c-btn.loading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.8;
}
.c-btn.loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.c-btn.disabled,
.c-btn:disabled {
  background: var(--line);
  color: var(--ink-tertiary);
  border-color: var(--line);
  cursor: not-allowed;
  pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════
   C3 · .c-badge — cached · pre · timed · booked · walk-in · verified · ok
   ───────────────────────────────────────────────────────────────────
   Micro-labels op POI-cards / list-items.
   ═════════════════════════════════════════════════════════════════ */

.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font: var(--fw-semibold) var(--f-xs)/1.3 var(--font-sans);
  letter-spacing: var(--tracking-wide);
  background: var(--line);
  color: var(--ink-secondary);
}

.c-badge.cached   { background: var(--info-soft);   color: var(--info-ink); }
.c-badge.pre      { background: var(--warn-soft);   color: var(--warn-ink); }
.c-badge.timed    { background: var(--info-soft);   color: var(--info-ink); }
.c-badge.booked   { background: var(--ok-soft);     color: var(--ok-ink); }
.c-badge.walk-in  { background: var(--ok-soft);     color: var(--ok-ink); }
.c-badge.verified { background: var(--ok-soft);     color: var(--ok-ink); }
.c-badge.ok       { background: var(--ok-soft);     color: var(--ok-ink); }

/* Dark theme — invert ink naar lichtere kleur voor contrast */
.theme-dark .c-badge.cached,
.theme-dark .c-badge.timed    { color: var(--info); }
.theme-dark .c-badge.pre      { color: var(--warn); }
.theme-dark .c-badge.booked,
.theme-dark .c-badge.walk-in,
.theme-dark .c-badge.verified,
.theme-dark .c-badge.ok       { color: var(--ok); }

/* ═════════════════════════════════════════════════════════════════
   C4 · .c-toast — default · warn · err · ok · info
   ───────────────────────────────────────────────────────────────────
   Celebration + system-feedback — 3 sec fade-out standaard.
   Positioneert boven alles (--z-toast).
   ═════════════════════════════════════════════════════════════════ */

.c-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font: var(--fw-medium) var(--f-sm) var(--font-sans);
  box-shadow: var(--sh-lg);
  animation: toast-in var(--dur-base) var(--ease-spring);
}
.c-toast.warn { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.c-toast.err  { background: var(--err-soft);  color: var(--err-ink);  border-color: transparent; }
.c-toast.ok   { background: var(--ok-soft);   color: var(--ok-ink);   border-color: transparent; }
.c-toast.info { background: var(--info-soft); color: var(--info-ink); border-color: transparent; }

.theme-dark .c-toast.warn { color: var(--warn); }
.theme-dark .c-toast.err  { color: var(--err); }
.theme-dark .c-toast.ok   { color: var(--ok); }
.theme-dark .c-toast.info { color: var(--info); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═════════════════════════════════════════════════════════════════
   C5 · .c-dialog — default · destructive
   ───────────────────────────────────────────────────────────────────
   Center-modal pattern (overlay-strategie sectie 7).
   Alleen bij binary beslissing + consequentie (delete-trip, reset-data).
   ═════════════════════════════════════════════════════════════════ */

.c-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 19, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  z-index: var(--z-overlay);
  animation: fade-in var(--dur-fast) var(--ease-out);
}
.theme-dark .c-dialog-backdrop { background: rgba(0, 0, 0, 0.65); }

.c-dialog {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  max-width: 420px;
  width: 100%;
  box-shadow: var(--sh-xl);
  z-index: var(--z-modal);
  animation: dialog-in var(--dur-base) var(--ease-spring);
}
.c-dialog h3 {
  font: var(--fw-bold) var(--f-lg)/var(--lh-tight) var(--font-sans);
  margin-bottom: var(--sp-2);
}
.c-dialog p {
  font-size: var(--f-sm);
  color: var(--ink-secondary);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-base);
}
.c-dialog .c-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.c-dialog.destructive {
  border-top: 3px solid var(--err);
}
.c-dialog.destructive h3 { color: var(--err); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═════════════════════════════════════════════════════════════════
   C6 · .c-row — default · with-chevron
   ───────────────────────────────────────────────────────────────────
   List-item: Settings-row, Info-category, generic.
   ═════════════════════════════════════════════════════════════════ */

.c-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--card);
  min-height: 56px;              /* comfort tap-target */
}
.c-row:last-child { border-bottom: none; }
.c-row .c-row-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-row .c-row-main strong {
  font-weight: var(--fw-semibold);
  font-size: var(--f-base);
}
.c-row .c-row-main small {
  color: var(--ink-secondary);
  font-size: var(--f-sm);
}
.c-row .c-row-end {
  color: var(--ink-tertiary);
  font-size: var(--f-sm);
}

.c-row.with-chevron {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.c-row.with-chevron:hover { background: var(--cream); }
.c-row.with-chevron::after {
  content: "›";
  color: var(--ink-tertiary);
  font-size: var(--f-lg);
  margin-left: var(--sp-2);
}

/* ═════════════════════════════════════════════════════════════════
   C7 · .c-input — default · with-ico · with-value · focus-accent
   ═════════════════════════════════════════════════════════════════ */

.c-input {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.c-input input,
.c-input textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--f-base);
  color: var(--ink);
  min-width: 0;
}
.c-input input::placeholder,
.c-input textarea::placeholder { color: var(--ink-tertiary); }

.c-input.with-ico { padding-left: var(--sp-3); }
.c-input.with-ico > .c-input-ico {
  color: var(--ink-tertiary);
  flex-shrink: 0;
}

.c-input.with-value {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.c-input.with-value input { color: var(--accent-ink); font-weight: var(--fw-semibold); }
.theme-dark .c-input.with-value input { color: var(--accent); }

.c-input:focus-within,
.c-input.focus-accent { border-color: var(--accent); }

/* ═════════════════════════════════════════════════════════════════
   C8 · .c-tab — 2-tab · 3-tab
   ───────────────────────────────────────────────────────────────────
   Segmented control (Calculator Uitrekenen/Delen etc.)
   On-state: elevated card op dark, ink-donker op light.
   ═════════════════════════════════════════════════════════════════ */

.c-tabs {
  display: inline-flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--cream);
  border-radius: var(--r-full);
  width: 100%;
}
.c-tabs.compact { width: auto; }

.c-tab {
  flex: 1;
  text-align: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  font: var(--fw-medium) var(--f-sm)/1 var(--font-sans);
  color: var(--ink-secondary);
  cursor: pointer;
  background: transparent;
  border: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  min-height: 36px;
}
.c-tab:hover { color: var(--ink); }
.c-tab.active {
  background: var(--card);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  box-shadow: var(--sh-sm);
}
.theme-dark .c-tab.active {
  background: var(--card-elevated);
  color: var(--ink);
}

/* ═════════════════════════════════════════════════════════════════
   C9 · .c-chip — default · shortcut · filter · time-pick
   ═════════════════════════════════════════════════════════════════ */

.c-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font: var(--fw-medium) var(--f-sm)/1 var(--font-sans);
  cursor: pointer;
  min-height: 32px;
  transition: all var(--dur-fast) var(--ease-out);
}
.c-chip:hover { background: var(--cream-strong); }

.c-chip.active,
.c-chip.shortcut.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.theme-dark .c-chip.active,
.theme-dark .c-chip.shortcut.active { color: var(--bg); }

.c-chip.shortcut {
  background: var(--card);
  border-color: var(--line-strong);
}

.c-chip.filter {
  background: var(--info-soft);
  color: var(--info-ink);
  border-color: transparent;
}
.theme-dark .c-chip.filter { color: var(--info); }

.c-chip.time-pick {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: transparent;
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
}
.theme-dark .c-chip.time-pick { color: var(--accent); }

/* ═════════════════════════════════════════════════════════════════
   C10 · .c-strip (alert band) — warn · info · anticipation
   ───────────────────────────────────────────────────────────────────
   Volle-breedte alert, bovenaan content.
   ═════════════════════════════════════════════════════════════════ */

.c-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  font: var(--fw-medium) var(--f-sm)/var(--lh-tight) var(--font-sans);
}

.c-strip.warn {
  background: var(--warn-soft);
  color: var(--warn-ink);
}
.c-strip.info {
  background: var(--info-soft);
  color: var(--info-ink);
}
.c-strip.anticipation {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: var(--fw-semibold);
}
.c-strip.ok {
  background: var(--ok-soft);
  color: var(--ok-ink);
}

.theme-dark .c-strip.warn { color: var(--warn); }
.theme-dark .c-strip.info { color: var(--info); }
.theme-dark .c-strip.anticipation { color: var(--accent); }
.theme-dark .c-strip.ok { color: var(--ok); }

/* ═════════════════════════════════════════════════════════════════
   C11 · .c-progress — default · primary (in-button)
   ═════════════════════════════════════════════════════════════════ */

.c-progress {
  width: 100%;
  height: 6px;
  background: var(--cream);
  border-radius: var(--r-full);
  overflow: hidden;
}
.c-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-full);
  transition: width var(--dur-base) var(--ease-out);
}
.c-progress.primary { height: 8px; }

/* ═════════════════════════════════════════════════════════════════
   C12 · .c-skel (skeleton) — line · circle · card · thumb
   ───────────────────────────────────────────────────────────────────
   Loading placeholders. Shimmer-animatie, pauzeert bij reduced-motion.
   ═════════════════════════════════════════════════════════════════ */

@keyframes skel-shimmer {
  from { background-position: -200px 0; }
  to   { background-position: calc(200px + 100%) 0; }
}

.c-skel {
  background:
    linear-gradient(90deg,
      var(--line) 0%,
      var(--line-strong) 50%,
      var(--line) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
.c-skel.line {
  height: 12px;
  width: 100%;
}
.c-skel.line + .c-skel.line { margin-top: var(--sp-2); }
.c-skel.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.c-skel.card {
  width: 100%;
  height: 72px;
  border-radius: var(--r-md);
}
.c-skel.thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
}

/* ═════════════════════════════════════════════════════════════════
   OVERLAY-STRATEGIE (sectie 7)
   ───────────────────────────────────────────────────────────────────
   .sheet (bottom-sheet) — context-switch of lijst (>2 opties)
   .inline-expand       — micro-flow in context (1-2 taps)
   ═════════════════════════════════════════════════════════════════ */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 19, 0.35);
  z-index: var(--z-overlay);
  animation: fade-in var(--dur-fast) var(--ease-out);
}
.theme-dark .sheet-backdrop { background: rgba(0, 0, 0, 0.55); }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card);
  color: var(--ink);
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--sh-sheet);
  z-index: var(--z-modal);
  animation: sheet-in var(--dur-base) var(--ease-out);
}
.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--line-strong);
  border-radius: var(--r-full);
  margin: 0 auto var(--sp-3);
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.inline-expand {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-top: var(--sp-2);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out),
    padding var(--dur-base) var(--ease-out),
    margin-top var(--dur-base) var(--ease-out);
}
.inline-expand[aria-hidden="true"] {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  opacity: 0;
}
.inline-expand[aria-hidden="false"] {
  max-height: 400px;
  opacity: 1;
}