/**
 * Poolster UI-systeem — Laag 2: gedeeld stijlbestand.
 * Reset, basistypografie en de patronen die vandaag al écht identiek
 * hergebruikt worden over meerdere pagina's heen. GEEN paginaspecifieke
 * layout, GEEN componenten die nog maar in één scherm bestaan — die horen
 * in components/pw-*.js (Laag 3) zodra ze gebouwd worden.
 *
 * Lost de duplicatie op die tijdens de annotatierondes van 2026-07-25 werd
 * vastgesteld: button/input/select/textarea-font-inherit stond letterlijk
 * 3× gekopieerd, .side-nav en .drawer 2× (met beginnende, kleine afwijkingen
 * tussen de kopieën — precies het risico dat deze laag uitsluit).
 *
 * Verbruikt uitsluitend tokens uit tokens.css — geen eigen hex-kleur hierin
 * (zie UI Design/03-UI Architectuur, Regelboek-reset R-001).
 */

/* ===== reset & basistypografie ===== */
*{box-sizing:border-box;}
button,input,select,textarea{font-family:inherit;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); line-height:1.5;}
h1,h2,h3,h4{font-family:var(--font-heading); font-weight:600; margin:0; letter-spacing:-.01em;}
p{margin:0; color:var(--color-text-muted);}
a{color:var(--color-info);}
code{background:var(--color-surface-alt); padding:1px 5px; border-radius:4px; font-size:12px; font-family:ui-monospace,Consolas,monospace; color:var(--color-text);}

/* ===== iconen — vaste maten, kleur volgt tekstkleur (currentColor) ===== */
.icon{width:18px; height:18px; display:inline-block; vertical-align:middle; flex:none; color:inherit;}
.icon-sm{width:14px; height:14px;}
.icon-lg{width:28px; height:28px;}

/* ===== tooltip — hover, één antwoord ===== */
[data-tip]{position:relative;}
[data-tip]::after{content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px); background:var(--color-text); color:#fff; padding:6px 11px; border-radius:var(--radius-xs); font-size:12px; white-space:nowrap; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:.15s; z-index:60;}
[data-tip]::before{content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--color-text); opacity:0; transition:.15s; z-index:60;}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1; transform:translateX(-50%) translateY(0);}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1;}

/* ===== info-knop & popover — klik, meer detail. Regel: info-knop staat altijd rechtsboven (.tile-info) in het element, → R-003 ===== */
.info-btn{width:20px; height:20px; border-radius:50%; border:1px solid var(--color-info); color:var(--color-info); background:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; position:relative; padding:0;}
.info-btn:hover{background:var(--color-info-bg);}
.info-btn .icon{width:13px; height:13px;}
.tile-info{position:absolute; top:10px; right:10px;}
/* Positionering (left:0 of right:0) is bewust NIET hier vastgelegd — hangt af waar de trigger
   t.o.v. de schermrand staat, dus dat blijft een paginalokale toevoeging (zie styleguide/index.html
   resp. owner-dashboard/index.html). */
.popover{position:absolute; top:calc(100% + 8px); width:260px; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:12px 14px; font-size:12.5px; color:var(--color-text); opacity:0; visibility:hidden; transform:translateY(-4px); transition:.15s; z-index:95; text-align:left;}
.popover.open{opacity:1; visibility:visible; transform:translateY(0);}
.popover b{display:block; margin-bottom:4px; font-size:12.5px;}

/* ===== app-shell — flex-rij die drawer als echte layout-sibling toelaat (geen overlay-illusie). De inhoud-kolom zelf (bv. .page-wrap of main.wrap) is paginaspecifiek en hoort niet hier. ===== */
.app-shell{display:flex;}
/* [hidden] MOET hier expliciet herhaald worden (2026-08-17, Els-melding:
   twee SPA-secties tegelijk zichtbaar) — de UA-stylesheet zet [hidden] enkel
   met element-specificiteit, dus elke author-regel die display op hetzelfde
   element zet (zoals .app-shell hierboven) wint anders van [hidden]. Zelfde
   patroon als .alert[hidden]/.collapsible-body[hidden] elders in deze CSS —
   een element dat zowel via een tab-switch (hidden-attribuut) áls .app-shell
   toegepast wordt, verdween anders niet meer bij het wisselen van tab. */
.app-shell[hidden]{display:none;}

/* ===== zijpaneel (drawer) — duwt de pagina smaller i.p.v. eroverheen te zweven; kop blijft zichtbaar bij scroll ===== */
/* STICKY, EN DAT IS ESSENTIEEL (Owner 2026-07-27: "zorg dat de bovenkant van de
   drawer zichtbaar blijft als ik het hoofdscherm naar beneden scroll").
   .drawer-head was al sticky, maar dat werkt enkel bínnen de eigen scroll van het
   paneel — scrolde je de PAGINA, dan schoof het hele paneel mee uit beeld, kop en
   sluitknop incluis. Het paneel zelf blijft nu in beeld: het plakt aan de bovenrand
   en is maximaal één schermhoogte hoog, waarbij .drawer-inner de eigen scrollbalk
   levert. align-self:flex-start is nodig omdat een flex-item anders even hoog
   gestrekt wordt als de inhoud ernaast, en dan heeft sticky geen ruimte om in te
   schuiven. */
.drawer{position:sticky; top:0; align-self:flex-start; max-height:100vh; width:0; flex:0 0 auto; overflow:hidden; background:#fff; transition:width .22s ease, box-shadow .22s ease; z-index:10;}
.drawer.open{width:340px; box-shadow:-8px 0 24px rgba(22,35,47,.14);}
.drawer-inner{width:340px; height:100%; max-height:100vh; padding:var(--sp-5); box-sizing:border-box; overflow-y:auto;}
/* ===== drawer-rail — één icoon per zijpaneel, dat het paneel opent én sluit.
   Owner-richting 2026-07-27. Staat als laatste kind van .app-shell, dus rechts van
   de panelen zelf, en blijft bij scrollen staan (sticky) want het is de enige weg
   terug naar een gesloten paneel.
   Precies één paneel tegelijk open: het openen van een tweede sluit het eerste.
   Dat is geen beperking maar wat de rail betekent — de icoontjes zijn broers waar
   er één van gekozen wordt, net als bij Tabs en de Paneel-sidebar. Wil je twee
   dingen náást elkaar zien, dan is een zijpaneel niet de juiste vorm.
   De actieve staat hangt aan aria-expanded en niet aan een eigen .active-klasse:
   die toestand moet er voor een schermlezer tóch staan, en twee plekken die
   hetzelfde zeggen lopen uit elkaar. ===== */
/* order:9 zet de rail ALTIJD uiterst rechts, ongeacht waar ze in de markup staat.
   Dat is geen sierlijkheid maar een reparatie: in het Owner-dashboard stond de rail
   vóór het paneel in de DOM, en dus schoof ze 340px naar links zodra het paneel
   opende — de iconen "gingen mee naar links" i.p.v. op hun plaats te blijven. De
   rail is een vast ankerpunt aan de rand van het scherm; die plaats mag niet
   afhangen van de volgorde waarin iemand de markup schrijft. */
.drawer-rail{order:9; flex:0 0 auto; align-self:flex-start; position:sticky; top:0; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-2); background:var(--color-surface-alt); border-left:1px solid var(--color-border);}
/* Author-CSS `display:flex` wint altijd van de UA-stylesheet se
   `[hidden]{display:none}`, ongeacht specificiteit — een consumer die de
   rail per context verbergt (`rail.hidden = true`, bv. Els-Dashboard "Alle
   boeken": niets om te kiezen) zag 'm zonder deze regel gewoon blijven
   staan. Zelfde terugkerende bug/fix-patroon als `.field[hidden]` in
   ui-elements.css. */
.drawer-rail[hidden]{display:none;}
.rail-btn{width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid transparent; background:transparent; color:var(--color-text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
.rail-btn:hover{background:var(--color-surface); color:var(--color-primary);}
.rail-btn:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px;}
.rail-btn[aria-expanded=true]{background:var(--color-surface); border-color:var(--color-primary); color:var(--color-primary); box-shadow:var(--shadow-sm);}
/* De tooltip uit base.css opent naar boven en gecentreerd. Op een verticale rail
   tegen de rechterrand valt hij daarmee half buiten het scherm, dus hier naar
   links. Het pijltje gaat weg in plaats van meeverhuizen: op deze afstand voegt
   het niets toe en het zou een tweede positieberekening vragen. */
.drawer-rail [data-tip]::after{left:auto; right:calc(100% + 10px); top:50%; bottom:auto; transform:translateY(-50%) translateX(4px);}
.drawer-rail [data-tip]:hover::after,.drawer-rail [data-tip]:focus-visible::after{transform:translateY(-50%) translateX(0);}
.drawer-rail [data-tip]::before{display:none;}

/* Op een telefoon neemt het paneel de rest van de breedte: 340px naast de inhoud
   laat op een venster van 390px nog 50px voor die inhoud over, en dan heeft het
   "duwt smaller"-principe geen ruimte meer om waar te zijn. Staat er een rail,
   dan blijft die 54px wél staan — zonder rail is het paneel niet meer te sluiten. */
@media(max-width:640px){
  .drawer.open{width:100%;}
  .app-shell:has(.drawer-rail) .drawer.open{width:calc(100% - 54px);}
  .drawer-inner{width:100%;}
}
.drawer-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:var(--sp-3); position:sticky; top:0; background:#fff; padding-top:2px; z-index:2;}
.close-x{background:none; border:none; color:var(--color-text-muted); cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-full); flex:none;}
.close-x:hover{background:var(--color-surface-alt); color:var(--color-text);}