/* SuperDoggo — sd-ui.css · gedeelde componentlaag (K1).
   Bouwt op tokens.css. Nieuwe/gemigreerde onderdelen gebruiken de .sdc-*-klassen hieronder;
   ze zijn genamespaced zodat ze de bestaande .btn/.card/.chip van de oude pagina's niet
   overschrijven. Migreer een pagina door de oude klassen te vervangen door deze.
   Bevat: knoppen (P9 states), kaarten, formulieren, badges, lege staten (K4),
   skeletons (P10), gerelateerde-tools (W2) en layout-utilities. */

/* ---------- Layout-utilities (P2 spacing · P11 grid) ---------- */
.sdc-wrap{max-width:1100px;margin-inline:auto;padding-inline:var(--space-5)}
.sdc-stack>*+*{margin-top:var(--space-4)}
.sdc-stack-lg>*+*{margin-top:var(--space-6)}
.sdc-grid{display:grid;gap:var(--space-5)}
.sdc-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.sdc-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.sdc-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.sdc-grid.cols-3,.sdc-grid.cols-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sdc-grid.cols-2,.sdc-grid.cols-3,.sdc-grid.cols-4{grid-template-columns:1fr}}
.sdc-section{padding-block:var(--space-8)}

/* ---------- Typografie ---------- */
.sdc-h1{font-family:var(--font-kop);font-weight:800;font-size:var(--text-2xl);line-height:var(--leading-tight);letter-spacing:-.01em}
.sdc-h2{font-family:var(--font-kop);font-weight:800;font-size:var(--text-xl);line-height:var(--leading-tight)}
.sdc-h3{font-family:var(--font-kop);font-weight:700;font-size:var(--text-md)}
.sdc-lead{font-size:var(--text-md);color:var(--gray-500)}
.sdc-muted{color:var(--gray-500)}

/* ---------- Knoppen met volledige states (P9) ---------- */
.sdc-btn{
  --_bg:var(--accent-500); --_fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-body);font-weight:600;font-size:var(--text-base);line-height:1;
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);border:1.5px solid transparent;
  background:var(--_bg);color:var(--_fg);cursor:pointer;text-decoration:none;
  transition:transform var(--snel),box-shadow var(--snel),background var(--snel),filter var(--snel);
  box-shadow:var(--shadow-2)}
.sdc-btn:hover{filter:brightness(.94);transform:translateY(-1px)}
.sdc-btn:active{transform:translateY(0) scale(.98);filter:brightness(.88)}
.sdc-btn:focus-visible{outline:3px solid var(--accent-300);outline-offset:2px}
.sdc-btn[disabled],.sdc-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.sdc-btn.ghost{--_bg:transparent;--_fg:var(--accent-600);border-color:var(--gray-300);box-shadow:none}
.sdc-btn.ghost:hover{background:var(--accent-50);filter:none}
.sdc-btn.blauw{--_bg:var(--blauw-500);--_fg:#fff}
.sdc-btn.klein{padding:var(--space-2) var(--space-4);font-size:var(--text-sm)}

/* ---------- Kaarten ---------- */
.sdc-card{
  background:var(--card,#fff);border:1px solid var(--border,var(--gray-200));
  border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-1);
  transition:transform var(--normaal),box-shadow var(--normaal)}
.sdc-card.hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-3)}
.sdc-card .sdc-h3{margin-bottom:var(--space-2)}

/* ---------- Badges ---------- */
.sdc-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;
  padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--accent-50);color:var(--accent-700)}
.sdc-badge.ok{background:color-mix(in srgb,var(--ok-500) 15%,#fff);color:var(--ok-500)}
.sdc-badge.info{background:var(--blauw-50);color:var(--blauw-500)}

/* ---------- Formulieren ---------- */
.sdc-field{width:100%;font:inherit;font-size:var(--text-base);
  padding:var(--space-3) var(--space-4);border:1.5px solid var(--border,var(--gray-300));
  border-radius:var(--radius-md);background:var(--card,#fff);color:var(--ink,var(--gray-900))}
.sdc-field:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px var(--accent-100)}

/* ---------- Lege staten met Doggo (K4) ---------- */
.sdc-empty{text-align:center;padding:var(--space-8) var(--space-5);max-width:38ch;margin-inline:auto;color:var(--gray-500)}
.sdc-empty img{width:140px;height:auto;margin:0 auto var(--space-4);opacity:.95}
.sdc-empty h3{font-family:var(--font-kop);font-size:var(--text-md);color:var(--ink,var(--gray-900));margin-bottom:var(--space-2)}
.sdc-empty p{font-size:var(--text-sm);margin-bottom:var(--space-4)}

/* ---------- Skeleton-laadstaat (P10) ---------- */
.sdc-skel{position:relative;overflow:hidden;background:var(--gray-200);border-radius:var(--radius-sm);min-height:14px}
.sdc-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:sdc-shim 1.3s infinite}
@keyframes sdc-shim{100%{transform:translateX(100%)}}

/* ---------- Gerelateerde tools (W2) ---------- */
.sdc-related{border-top:1px solid var(--border,var(--gray-200));margin-top:var(--space-8);padding-top:var(--space-6)}
.sdc-related h2{font-family:var(--font-kop);font-size:var(--text-md);margin-bottom:var(--space-4)}
.sdc-related .lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3)}
.sdc-related a{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-4);
  border:1px solid var(--border,var(--gray-200));border-radius:var(--radius-md);text-decoration:none;
  color:var(--ink,var(--gray-900));background:var(--card,#fff);transition:border-color var(--snel),transform var(--snel)}
.sdc-related a:hover{border-color:var(--accent-400);transform:translateY(-2px)}
.sdc-related a .em{font-size:1.3rem}


/* ---------- Alerts / banners (herbruikbaar) ---------- */
.sdc-alert{display:flex;gap:var(--space-3);align-items:flex-start;text-decoration:none;
  border:1px solid var(--border,var(--gray-200));border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--ink,var(--gray-900));background:var(--card,#fff)}
.sdc-alert .ic{font-size:1.3rem;line-height:1;flex:0 0 auto}
.sdc-alert.danger{background:color-mix(in srgb,var(--fout-500) 8%,var(--card,#fff));border-color:color-mix(in srgb,var(--fout-500) 30%,#fff);color:#8e2a20}
.sdc-alert.accent{background:var(--accent-50);border-color:color-mix(in srgb,var(--accent-500) 28%,#fff)}
.sdc-alert.info{background:var(--blauw-50);border-color:color-mix(in srgb,var(--blauw-500) 22%,#fff)}
a.sdc-alert{transition:transform var(--snel),filter var(--snel)}
a.sdc-alert:hover{transform:translateY(-1px)}

/* risico-varianten voor .sdc-badge */
.sdc-badge.hoog{background:color-mix(in srgb,var(--fout-500) 14%,#fff);color:var(--fout-500)}
.sdc-badge.middel{background:color-mix(in srgb,var(--waarschuwing-500) 16%,#fff);color:var(--waarschuwing-500)}
.sdc-badge.laag{background:var(--gray-100);color:var(--gray-600)}


/* ---------- Broodkruimels (B9) ---------- */
.sd-breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--text-sm,.85rem);
  color:var(--muted,#4A5680);margin:14px 0 4px}
.sd-breadcrumb a{color:var(--muted,#4A5680);text-decoration:none}
.sd-breadcrumb a:hover{color:var(--accent,#0942B6);text-decoration:underline}
.sd-breadcrumb .sep{opacity:.5}
.sd-breadcrumb [aria-current]{color:var(--ink,#101A3A);font-weight:600}

@media(prefers-reduced-motion:reduce){
  .sdc-btn,.sdc-card,.sdc-related a{transition:none}
  .sdc-skel::after{animation:none}
}