/* ══════════════════════════════════════════════════════════════════════════
   Yippie design-systeem (2026-08-03) - gedeelde verfijningslaag.
   De hub (/) is de canon: dit bestand rolt diezelfde taal (tokens, diepte,
   focus-ringen, typografie) uit naar de overige pagina's. Het wordt NA de
   pagina-eigen <style> en tailwind geladen en wint dus gelijkspel.
   OMKEERBAAR: verwijder de <link href="/yp-design.css"> uit een pagina en
   die pagina valt terug op zijn oude uiterlijk.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --yp-ink:#0F172A; --yp-ink-mute:#475569; --yp-ink-light:#94A3B8;
  --yp-bg:#F5F6F9; --yp-surface:#FFFFFF; --yp-line:#E6E9EF; --yp-line-soft:#F1F3F7;
  --yp-shadow-sm:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.04);
  --yp-shadow:0 1px 3px rgba(15,23,42,.06),0 4px 12px rgba(15,23,42,.05);
  --yp-shadow-lg:0 4px 8px rgba(15,23,42,.06),0 12px 28px rgba(15,23,42,.08);
  --yp-r-s:10px; --yp-r-m:14px; --yp-r-l:20px;
}

/* ── Basis ──
   Pagina's met een bewuste eigen achtergrond (login-gradient e.d.) zetten
   class="yp-eigen-bg" op <body> en houden hun kleur. */
body:not(.yp-eigen-bg){background:var(--yp-bg);color:var(--yp-ink)}
::selection{background:var(--coral-light,#FDECEA);color:var(--coral-dark,#C95A43)}
:focus-visible{outline:2px solid var(--coral,#E8735A);outline-offset:2px;border-radius:4px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:none}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#D3D8E0;border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#B9C0CC;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* Koppen strakker gespatieerd (Inter leest dan als een display-font) */
h1,h2,h3,.font-black{letter-spacing:-.015em}

/* ── Formulier-elementen (gedeelde .fi/.fl over vrijwel alle pagina's) ── */
.fi{border-width:1.5px;border-color:var(--yp-line);border-radius:var(--yp-r-s);
    transition:border-color .13s,box-shadow .13s;background:#fff}
.fi:hover{border-color:#D3D8E0}
.fi:focus{border-color:var(--coral,#E8735A)!important;box-shadow:0 0 0 3px var(--coral-light,#FDECEA)}
.fl{color:#8A94A6;letter-spacing:.06em}
textarea.fi{line-height:1.55}

/* ── Knoppen ── */
.btn{border-radius:var(--yp-r-s);transition:background .13s,color .13s,border-color .13s,
     box-shadow .13s,transform .13s;font-weight:700}
.btn:active{transform:translateY(1px)}
.bc{box-shadow:0 2px 8px rgba(232,115,90,.28)}
.bc:hover{box-shadow:0 4px 14px rgba(232,115,90,.36)}
.bs{border-width:1.5px;background:#fff}
.bs:hover{border-color:#CBD2DC;background:#FAFBFC}
.bdark{box-shadow:0 2px 8px rgba(15,23,42,.22)}

/* ── Kaart-patronen ──
   Pagina's bouwen kaarten met tailwind (bg-white rounded-xl shadow-sm) óf
   met eigen klassen; beide krijgen dezelfde rand + gelaagde schaduw. */
.shadow-sm{box-shadow:var(--yp-shadow-sm)!important}
.shadow-lg{box-shadow:var(--yp-shadow-lg)!important}
.bg-white.rounded-xl,.bg-white.rounded-2xl{border:1px solid var(--yp-line)}
.bg-white.rounded-xl{border-radius:14px}
.bg-white.rounded-2xl{border-radius:18px}

/* ── Statistiek-strip: één kaart met hairline-scheiders i.p.v. losse blokken.
     Aantal kolommen desgewenst via inline style (default 4). ── */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;
  border:1px solid var(--yp-line);border-radius:16px;box-shadow:var(--yp-shadow-sm);overflow:hidden}
/* Dit bestand laadt NÁ tailwind: zonder deze guard zou display:grid hier de
   tailwind-klasse .hidden{display:none} overrulen - een "verborgen" statstrip
   (dagcockpit!) bleef dan gewoon zichtbaar. */
.statstrip.hidden{display:none!important}
.statstrip .statv{padding:15px 20px;border-left:1px solid var(--yp-line-soft)}
.statstrip .statv:first-child{border-left:none}
.statstrip .statn{font-size:27px;font-weight:900;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--yp-ink)}
.statstrip .statl{font-size:10.5px;color:#8A94A6;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;margin-top:6px}
@media (max-width:640px){
  .statstrip{grid-template-columns:repeat(2,1fr)!important}
  .statstrip .statv{border-left:none!important;border-top:1px solid var(--yp-line-soft);padding:12px 16px}
  .statstrip .statv:nth-child(-n+2){border-top:none}
  .statstrip .statv:nth-child(even){border-left:1px solid var(--yp-line-soft)!important}
  .statstrip .statn{font-size:22px}
}

/* ── Chips & statuspillen ── */
.chip,.status-pill,.tag{letter-spacing:.01em}
.status-pill{box-shadow:inset 0 0 0 1px rgba(15,23,42,.04)}

/* ── Modals ── */
.modal-box{border-radius:var(--yp-r-l);box-shadow:0 24px 70px rgba(15,23,42,.25)}
.modal{backdrop-filter:blur(4px)}

/* ── Topbar & sub-kop (me-badge.js injecteert #ypTopbar; de pagina-eigen
     header wordt .yp-sub). Zelfde frosted-taal als de hub. ── */
#ypTopbar{border-bottom:1px solid var(--yp-line)}
header.yp-sub{background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--yp-line)}

/* ── Tabellen (uren/financiën-achtige overzichten) ── */
table{font-variant-numeric:tabular-nums}
thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#8A94A6}

/* ── Mobiel: geen iOS-zoom, ademruimte ── */
@media (max-width:560px){
  .fi,select.fi,textarea.fi{font-size:16px;padding-top:7px;padding-bottom:7px}
  .btn{padding-top:10px;padding-bottom:10px}
}

/* ── Print: schaduwen en decoratie uit (roosterpdf e.a.) ── */
@media print{
  body{background:#fff}
  .btn,.bc,.bg-white.rounded-xl,.bg-white.rounded-2xl,.modal-box{box-shadow:none!important}
  *::-webkit-scrollbar{display:none}
}
