/* WerkApp — single stylesheet entry point.
   Mirrors styles.css from the WerkApp Design System project, with the token
   files re-rooted under assets/styles/tokens/. AssetMapper rewrites the
   @import url() targets to digested paths, so keep them relative. */

@import url("tokens/colors-rHmtz9t.css");
@import url("tokens/theme-light-UEtja2k.css");
@import url("tokens/theme-dark-yIb3jFJ.css");
@import url("tokens/typography-stRSBCd.css");
@import url("tokens/spacing-88eO82R.css");
@import url("tokens/radius-wy9s1WY.css");
@import url("tokens/elevation-mOJ_IRz.css");
@import url("tokens/motion-rkGpYmc.css");
@import url("tokens/base-gX0NhNc.css");
@import url("components-aZE7Hxh.css");

/* ===================================================================
   Layout — not part of the design system's component set. The system
   documents the composition rules (232px sidebar, 1280px content cap,
   32px gutters, 390px app column, 4px grid) but ships no layout CSS,
   so these classes implement those rules for the Symfony surfaces.
   =================================================================== */

/* Het hidden-attribuut moet winnen van onze eigen display-regels.
   De UA-stylesheet zet [hidden]{display:none}, maar elke auteursregel met
   display verslaat dat — dus een `<div class="…" hidden>` met een klasse die
   display:flex zet, blijft zichtbaar. En dan doet `element.hidden = true` in JS
   ook niets meer, wat zich voordoet als "de knop werkt niet".
   Staat bovenaan zodat het voor alles hieronder geldt. */
[hidden] { display: none !important; }

/* ---------- Backend shell (web app) ---------- */
.vs-shell{display:flex;min-height:100vh}
.vs-shell__main{flex:1;min-width:0;display:flex;flex-direction:column}

/* The system caps content at --content-max for readability: a row stretched
   across a 2560px display is harder to scan. Lists, forms and detail screens
   all take the cap. */
.vs-page{width:100%;max-width:var(--content-max);margin:0 auto;padding:var(--space-8) var(--space-8) var(--space-16)}
.vs-page--reading{max-width:var(--reading-max)}
.vs-page--full{max-width:none}

.vs-pagehead{display:flex;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-6)}
.vs-pagehead__text{flex:1;min-width:0}
.vs-pagehead__actions{display:flex;gap:var(--space-2);flex:none}

/* Kapitalen eyebrow — the huisstijl convention for logo addenda, reused for
   section labels (VANDAAG · MIJDRECHT, GEGEVENS, BEZETTING). */
.vs-eyebrow{display:block;font-size:var(--text-eyebrow-size);line-height:var(--text-eyebrow-line);letter-spacing:var(--text-eyebrow-tracking);text-transform:uppercase;font-weight:var(--weight-heavy);color:var(--text-faint);margin-bottom:var(--space-2)}

.vs-stack{display:flex;flex-direction:column;gap:var(--stack)}
.vs-stack--tight{gap:var(--stack-tight)}
.vs-stack--loose{gap:var(--stack-loose)}
.vs-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.vs-row--end{justify-content:flex-end}
.vs-spacer{flex:1}
.vs-section{margin-bottom:var(--section-gap)}
.vs-muted{color:var(--text-muted)}
.vs-lede{font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line);color:var(--text-muted)}

/* ---------- Forms ---------- */
.vs-form{display:flex;flex-direction:column;gap:var(--space-4)}
.vs-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.vs-form__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vs-form__wide{grid-column:1/-1}
.vs-form__actions{display:flex;gap:var(--space-2);align-items:center;padding-top:var(--space-2);border-top:var(--border-width) solid var(--border-subtle);margin-top:var(--space-2)}
@media (max-width:720px){
  .vs-form__grid,.vs-form__grid--3{grid-template-columns:minmax(0,1fr)}
  .vs-page{padding:var(--space-5) var(--gutter-screen) var(--space-16)}
}

/* ---------- Table ---------- */
.vs-tablewrap{overflow-x:auto;background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg)}
.vs-table{width:100%;border-collapse:collapse;font-size:var(--text-body-size)}
.vs-table th{text-align:left;font-size:var(--text-eyebrow-size);line-height:var(--text-eyebrow-line);letter-spacing:var(--text-eyebrow-tracking);text-transform:uppercase;font-weight:var(--weight-heavy);color:var(--text-faint);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width) solid var(--border-subtle);white-space:nowrap}
.vs-table td{padding:var(--space-3) var(--space-4);border-bottom:var(--border-width) solid var(--border-subtle);color:var(--text-body);vertical-align:middle}
.vs-table tbody tr:last-child td{border-bottom:none}
.vs-table tbody tr:hover{background:var(--surface-hover)}
.vs-table__num{font-variant-numeric:tabular-nums;text-align:right}
.vs-table__actions{text-align:right;white-space:nowrap}
.vs-table__strong{font-weight:var(--weight-medium);color:var(--text-heading)}

/* ---------- Stat tile ---------- */
.vs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4)}
.vs-stat__value{font-size:var(--text-display-size);line-height:var(--text-display-line);letter-spacing:var(--text-display-tracking);font-weight:var(--weight-heavy);color:var(--text-heading);font-variant-numeric:tabular-nums}

/* ---------- Card list ---------- */
.vs-cardlist{display:flex;flex-direction:column;gap:var(--space-3);list-style:none;margin:0;padding:0}

/* ---------- Flash / toast region ---------- */
.vs-flashes{position:fixed;left:50%;bottom:var(--space-6);transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:var(--space-2);width:min(calc(100% - var(--space-8)),420px)}

/* ---------- Brand mark ----------
   The lockup is roughly 4:1. Height is set inline per placement and the width
   stays auto, so the mark is never stretched — the handbook forbids distorting
   it. max-width keeps it inside the 232px sidebar on narrow screens. */
.vs-brandmark{display:block;width:auto;max-width:100%;height:auto}

/* ---------- Wordmark fallback ----------
   Used only when the licensed logo PNGs are not on disk. Per the handbook: VAN
   in PMS 368, SCHIE in PMS 349, additions in black kapitalen. This is type, not
   a reconstruction of the mark — the mark itself is never redrawn. */
.vs-wordmark{display:inline-flex;align-items:baseline;gap:2px;font-family:var(--font-brand);font-weight:var(--weight-heavy);letter-spacing:-0.01em;line-height:1;white-space:nowrap}
.vs-wordmark__van{color:var(--vs-green-licht)}
.vs-wordmark__schie{color:var(--vs-green-donker)}
.vs-wordmark__add{margin-left:4px;font-size:.5em;letter-spacing:var(--text-eyebrow-tracking);color:var(--text-heading);align-self:center}
/* On the green app bar the two greens disappear — knock the wordmark out in white
   instead, which is the handbook rule for the mark on a coloured ground. */
.vs-topbar--accent .vs-wordmark__van,
.vs-topbar--accent .vs-wordmark__schie,
.vs-topbar--accent .vs-wordmark__add{color:#fff}
[data-theme="dark"] .vs-wordmark__schie{color:var(--green-300)}
[data-theme="dark"] .vs-wordmark__add{color:var(--text-heading)}

/* ---------- Auth ---------- */
.vs-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-6);background:var(--bg-app)}
.vs-auth__panel{width:min(100%,400px)}
.vs-auth__brand{display:flex;justify-content:center;margin-bottom:var(--space-6)}
.vs-auth__brand img{height:44px;width:auto}

/* ---------- PWA shell (medewerkersapp) ---------- */
/* One 390px column, sticky 56px app bar, fixed 60px tab bar. 48px is the floor
   for any tap target here — it is operated with work gloves on. */
.vs-app{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg-app);max-width:520px;margin:0 auto;box-shadow:var(--shadow-xs)}
.vs-app__body{flex:1;padding:var(--gutter-screen) var(--gutter-screen) calc(var(--tabbar-height) + var(--space-8))}
.vs-app__tabbar{position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;z-index:30;padding-bottom:env(safe-area-inset-bottom)}

/* ---------- Install-uitnodiging ----------
   Staat boven de lijst in de app. Gebruikt de accent-kaart van het designsysteem,
   zodat het als onderdeel van de app leest en niet als browsermelding. */
.vs-install__kaart{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}
.vs-install__tekst{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-body-sm-size);line-height:var(--text-body-line);color:var(--text-body)}
.vs-install__tekst b{display:block;font-weight:var(--weight-heavy);color:var(--text-heading)}
.vs-install__tekst .vs-icon{color:var(--text-accent);flex:none;margin-top:2px}
.vs-install__acties{display:flex;gap:var(--space-2)}
/* 48px-vloer geldt ook hier: dit wordt met handschoenen aan aangetikt. */
.vs-install__acties .vs-btn{min-height:var(--hit-min);flex:1}

/* A tap row in the field: full-width, 48px floor, whole row is the target. */
.vs-taprow{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--hit-min);padding:var(--space-3) var(--space-4);background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-body);text-align:left;cursor:pointer;transition:var(--transition-color),var(--transition-transform);text-decoration:none}
.vs-taprow:hover{background:var(--surface-hover);text-decoration:none;color:var(--text-body)}
.vs-taprow:active{transform:scale(var(--press-scale))}
.vs-taprow__body{flex:1;min-width:0}
/* display:block on the spans — inline spans would run the title and the
   subtitle together on one line. */
.vs-taprow__title{display:block;font-size:var(--text-body-size);line-height:22px;font-weight:var(--weight-medium);color:var(--text-heading)}
.vs-taprow__sub{display:block;font-size:var(--text-caption-size);line-height:var(--text-caption-line);color:var(--text-muted)}
.vs-taprow__chev{color:var(--text-faint);flex:none}

/* Afvinken — the one action the app has. A form button styled as a full-width
   tap row; the checkbox box is the affordance, the whole row is the target. */
.vs-afvink{display:flex;align-items:flex-start;gap:var(--space-3);width:100%;min-height:var(--hit-min);padding:var(--space-4);background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);text-align:left;cursor:pointer;transition:var(--transition-color),var(--transition-transform)}
.vs-afvink:hover{background:var(--surface-hover)}
.vs-afvink:active{transform:scale(var(--press-scale))}
.vs-afvink:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.vs-afvink__box{width:26px;height:26px;flex:none;margin-top:1px;border:var(--border-width-strong) solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-card);display:flex;align-items:center;justify-content:center;color:transparent;transition:var(--transition-color)}
.vs-afvink__body{flex:1;min-width:0}
.vs-afvink__title{display:block;font-size:var(--text-body-size);line-height:22px;font-weight:var(--weight-medium);color:var(--text-heading)}
.vs-afvink__sub{display:block;font-size:var(--text-caption-size);line-height:var(--text-caption-line);color:var(--text-muted);margin-top:2px}
.vs-afvink--gereed .vs-afvink__box{background:var(--green-700);border-color:var(--green-700);color:#fff}
.vs-afvink--gereed .vs-afvink__title{color:var(--text-faint);text-decoration:line-through}
/* Afvinkrij met daarnaast de knop naar de klus (foto's, details). De afvinkknop
   houdt de volle breedte min die ene 48px-knop. */
.vs-afvinkrij{display:flex;align-items:center;gap:var(--space-2)}
.vs-afvinkrij>form{flex:1;min-width:0}
/* Het file-input is visueel verborgen in het label; de focus moet dan op het label te zien zijn. */
.vs-fotoupload label{cursor:pointer}
.vs-fotoupload label:focus-within{box-shadow:var(--focus-ring)}

/* Sidebar collapses off-canvas on narrow screens; the backend is a desk tool,
   so this is a fallback rather than a designed mobile layout. */
@media (max-width:900px){
  .vs-shell{flex-direction:column}
  .vs-sidenav{width:100%;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:var(--border-width) solid var(--border-subtle);align-items:center;gap:var(--space-1)}
  .vs-sidenav__group{display:none}
  .vs-sidenav__brand{padding:var(--space-2)}
  .vs-sidenav__item{width:auto;white-space:nowrap}
}
