/* =====================================================================
   OSAV Yonetim Sistemi — designsysteem
   ---------------------------------------------------------------------
   Een bestand voor alles wat licht is: tokens, basis, schil, componenten.
   De donkere modus staat in osav-dark.css en NERGENS anders.

   DRIE REGELS DIE DIT BESTAND BIJEENHOUDEN:

   1. Geen kleur in een view. Staat er in een Blade `color:#285C4D`, dan
      blijft die kleur in donkere modus staan op een donker vlak. In
      IUASR-SIS gebeurde dat op ruim vijftig plaatsen en geen enkele
      zoekopdracht in de CSS bracht het aan het licht — de kleur stond in
      de HTML. ThemeTest bewaakt dit.

   2. Elk vlak dat hier een achtergrond krijgt, krijgt er een in
      osav-dark.css. Een vergeten vlak is wit in donkere modus.

   3. Vlakken zijn ONDOORZICHTIG. Nooit rgba() met alpha als achtergrond
      van een kaart: dan schijnt de laag eronder erdoorheen en verandert
      de kleur met de context.
   ===================================================================== */

/* =====================================================================
   1. LETTERTYPEN — zelf gehost, geen Google Fonts
   ---------------------------------------------------------------------
   Zelf hosten voorkomt dat het IP-adres van elke medewerker naar een
   derde partij gaat bij het openen van een intern systeem (AVG/KVKK).

   LET OP DE SUBSETS. Het Turks heeft c-cedille, o-umlaut en u-umlaut in
   `latin`, maar de letters g-breve, s-cedille en de gepunte hoofdletter-I
   staan in `latin-ext` (U+0100-02AF). Wie alleen `latin` laadt, krijgt in
   elk Turks woord met zo'n letter een teken uit een terugvalfont —
   zichtbaar scheef in een verder nette regel. Beide subsets worden dus
   geladen en beide worden voorgeladen.
   ===================================================================== */

@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * KFGQPC Uthman Taha Naskh — uitsluitend voor Arabisch schrift.
 * De unicode-range grendelt dat af: zonder die grens zou dit font ook de
 * Latijnse cijfers en leestekens uit een gemengde regel overnemen, en dan
 * springt de regelhoogte zichtbaar op elke pagina waar een Arabisch woord
 * tussen Turkse tekst staat.
 */
@font-face {
  font-family: 'KFGQPC Uthman Taha Naskh'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/kfgqpc-uthman-taha-naskh-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'KFGQPC Uthman Taha Naskh'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/kfgqpc-uthman-taha-naskh-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* =====================================================================
   2. TOKENS
   ---------------------------------------------------------------------
   De merkkleuren komen ongewijzigd uit IUASR-SIS: dit systeem hoort
   herkenbaar bij dezelfde familie. Wat WEL veranderde is de typografie
   (Poppins in plaats van DM Serif Display + Fira Sans) en de
   standaardstand van het thema: OSAV start licht.
   ===================================================================== */

:root {
  /* --- Merk ---------------------------------------------------------- */
  --brand:          #1E1446;   /* diep indigo: zijbalk, koppen, primaire knop */
  --brand-hover:    #2C1F63;
  --brand-soft:     #F2F1F4;   /* zeer licht indigo vlak */
  --brand-tint:     rgba(30, 20, 70, .06);
  --brand-tint-2:   rgba(30, 20, 70, .03);

  --accent:         #C8102E;   /* rood: nadruk, gevaar, actieve markering */
  --accent-hover:   #9A0C24;
  --heritage:       #285C4D;   /* heritage-groen */
  --gold:           #D69A2D;   /* goud */

  /* --- Vlakken en inkt ----------------------------------------------- */
  --canvas:         #F5F6FA;
  --surface:        #FFFFFF;
  --surface-2:      #F9FAFC;   /* gedempt vlak binnen een kaart */
  --sidebar:        #1E1446;
  --sidebar-ink:    #E9E7F5;
  --sidebar-muted:  #A9A4C2;

  --ink:            #1A1533;
  --ink-2:          #4A4463;
  --ink-3:          #6F6A85;   /* 5.1:1 op wit — leesbare hulptekst, geen decoratie */
  --ink-on-brand:   #FFFFFF;

  --line:           rgba(30, 20, 70, .12);
  --line-subtle:    rgba(30, 20, 70, .07);
  --line-strong:    rgba(30, 20, 70, .22);

  /* --- Statussen -----------------------------------------------------
   * Elk paar is gecontroleerd op ten minste 4.5:1 voor tekst op de eigen
   * achtergrond. Bewust geen blauw voor een status: dat botst met een link.
   */
  --ok:        #1B7A3E;  --ok-bg:      #DCF5E4;
  --warn:      #8A5A00;  --warn-bg:    #FDF0D5;
  --danger:    #B3261E;  --danger-bg:  #FBE3E0;
  --neutral:   #4A5A7A;  --neutral-bg: #ECEFF4;
  --info:      #1F5FA8;  --info-bg:    #E4EEF9;

  /* --- Vorm ---------------------------------------------------------- */
  --radius-chip:    999px;
  --radius-control: 8px;
  --radius-card:    12px;
  --shadow-card:    rgba(30, 20, 70, .05) 0 1px 2px, rgba(30, 20, 70, .07) 0 6px 20px -10px;
  --shadow-pop:     rgba(30, 20, 70, .06) 0 1px 2px, rgba(30, 20, 70, .18) 0 14px 34px -14px;

  /* --- Maten --------------------------------------------------------- */
  --header-height:  64px;
  --sidebar-width:  248px;
  --content-max:    1240px;
  --form-max:       920px;     /* een formulier is een kolom, geen vlakte */
  --tap:            44px;      /* kleinste aanraakvlak; daaronder mist men */

  /* --- Typografie ----------------------------------------------------- */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'KFGQPC Uthman Taha Naskh', 'Traditional Arabic', serif;
}

/* Animatie is hier decoratie, nooit informatie. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   3. BASIS
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 600; line-height: 1.25; letter-spacing: -.011em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }

p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

/* Cijfers in tabellen en tellers moeten onder elkaar uitlijnen. */
table, .osav-num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Arabisch schrift krijgt zijn eigen font en een ruimere regel: het naskh-
   schrift heeft hoge en lage uithalen die anders tegen elkaar aan lopen. */
[lang='ar'], .osav-arabic {
  font-family: var(--font-arabic);
  line-height: 1.9;
  direction: rtl;
}

.osav-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--surface); color: var(--brand);
  padding: 10px 16px; border-radius: 0 0 var(--radius-control) 0;
  font-weight: 600;
}
.osav-skip:focus { left: 0; }

.osav-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* =====================================================================
   4. SCHIL — kop, zijbalk, werkvlak
   ===================================================================== */

.osav-header {
  position: sticky; top: 0; z-index: 70;
  height: var(--header-height);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.osav-header__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.osav-header__logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; color: var(--brand);
  text-decoration: none; white-space: nowrap;
}
/* Het merkvierkant draagt een KORTE afkorting. Bij vier letters op 30px valt
   de laatste buiten het vlak; daarom min-width in plaats van width, zodat het
   vierkant meegroeit als de afkorting langer wordt. */
.osav-header__logo .mark {
  min-width: 30px; height: 30px; padding: 0 7px; border-radius: 8px;
  background: var(--brand); color: var(--ink-on-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.osav-header__logo .wordmark { font-weight: 600; color: var(--ink); }
@media (max-width: 640px) { .osav-header__logo .wordmark { display: none; } }

.osav-header__spacer { flex: 1 1 auto; }
.osav-header__tools { display: flex; align-items: center; gap: 6px; }

.osav-menubtn {
  display: none;
  width: var(--tap); height: var(--tap);
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--brand);
  border-radius: var(--radius-control);
}
.osav-menubtn:hover { background: var(--brand-tint); }

.osav-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-chip);
  background: var(--brand-soft); color: var(--ink-2);
  white-space: nowrap;
}
.osav-pill--role { background: transparent; border: 1px solid currentColor; color: var(--brand); }

.osav-iconbtn {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background .12s, border-color .12s;
}
.osav-iconbtn:hover { background: var(--brand-tint); border-color: var(--line-strong); }

/* --- Taalschakelaar TR/EN -------------------------------------------
 * Twee knoppen naast elkaar en geen keuzelijst: er zijn er precies twee,
 * en een keuzelijst van twee kost een klik extra om te zien wat de andere
 * optie is. De actieve taal is INGEDRUKT en niet alleen gekleurd — kleur
 * alleen is geen verschil voor wie kleuren niet onderscheidt.
 */
.osav-lang {
  display: inline-flex; border: 1px solid var(--line);
  border-radius: var(--radius-control); overflow: hidden;
}
.osav-lang__opt {
  min-width: 40px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink-3);
  border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
}
.osav-lang__opt + .osav-lang__opt { border-left: 1px solid var(--line); }
.osav-lang__opt:hover { background: var(--brand-tint); color: var(--brand); }
.osav-lang__opt.is-active { background: var(--brand); color: var(--ink-on-brand); }

.osav-user { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.osav-user__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: var(--ink-on-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.osav-user__name { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.osav-user__out {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--ink-3);
  padding: 6px 8px; border-radius: var(--radius-control);
}
.osav-user__out:hover { color: var(--accent); background: var(--brand-tint); }

/* --- Romp ------------------------------------------------------------ */
.osav-app { display: flex; min-height: calc(100vh - var(--header-height)); align-items: stretch; }

.osav-sidebar {
  width: var(--sidebar-width); flex: 0 0 var(--sidebar-width);
  background: var(--sidebar); color: var(--sidebar-ink);
  padding: 14px 12px 24px;
  overflow-y: auto;
  position: sticky; top: var(--header-height);
  height: calc(100vh - var(--header-height));
}

.osav-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.osav-nav__group {
  margin: 16px 8px 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sidebar-muted);
}
.osav-nav__item {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 8px 12px;
  border-radius: var(--radius-control);
  color: var(--sidebar-ink); text-decoration: none;
  font-size: 13.5px;
}
.osav-nav__item:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
/* De actieve pagina is een lichte kaart in de donkere balk — hetzelfde
   patroon als Noordhoff: het huidige onderdeel steekt eruit als vlak, niet
   als kleurtje. */
.osav-nav__item.is-active {
  background: var(--surface); color: var(--brand); font-weight: 600;
  box-shadow: rgba(0, 0, 0, .18) 0 1px 3px;
}
.osav-nav__item svg { flex: 0 0 auto; }

.osav-main { min-width: 0; flex: 1 1 auto; }
.osav-main__inner { max-width: var(--content-max); margin: 0 auto; padding: 22px 22px 40px; }

.osav-foot {
  margin-top: 28px; padding: 14px 2px;
  border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 12px;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}

/* =====================================================================
   5. ZIJBALKTEGEL — Esma-ul Husna + hidjri
   ---------------------------------------------------------------------
   Linksboven, zoals de opdrachtgever vroeg. De hidjri-datum staat eronder
   en is DECORATIEF — zie CLAUDE.md, kernprincipe 6.
   ===================================================================== */

.osav-quote {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-card);
  padding: 14px 12px 10px;
  text-align: center;
}
.osav-quote__inner { animation: osav-fade .5s ease both; }
@keyframes osav-fade { from { opacity: 0; } to { opacity: 1; } }

.osav-quote__ar {
  font-family: var(--font-arabic);
  font-size: 27px; line-height: 1.8; color: #FFFFFF;
  direction: rtl; margin-bottom: 4px;
}
.osav-quote__img { max-width: 100%; height: auto; border-radius: 8px; }
.osav-quote__title { font-size: 13.5px; font-weight: 600; color: #FFFFFF; }
.osav-quote__meaning { font-size: 12px; color: var(--sidebar-muted); line-height: 1.45; }
.osav-quote__source { margin-top: 4px; font-size: 11px; color: var(--sidebar-muted); }

.osav-hijri {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.osav-hijri__ar { font-family: var(--font-arabic); font-size: 15px; color: #FFFFFF; direction: rtl; }
.osav-hijri__text { font-size: 11.5px; color: var(--sidebar-muted); }
.osav-hijri__greg { font-size: 11px; color: var(--sidebar-muted); opacity: .8; }

/* =====================================================================
   6. WEEKKALENDER — alleen-lezen, uit een popover in de kop
   ===================================================================== */

.osav-weekcal-wrap { position: relative; }
.osav-weekcal-pop {
  position: absolute; inset-inline-end: 0; top: 44px; z-index: 80; width: 322px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-pop); padding: 12px 14px;
}
.osav-weekcal-pop[hidden] { display: none; }

.osav-weekcal__hd {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 8px;
}
.osav-weekcal__hd .ttl { font-size: 12.5px; font-weight: 600; color: var(--brand); }
.osav-weekcal__hd .rng { font-size: 11px; color: var(--ink-3); }

.osav-weekcal__tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.osav-weekcal__tbl th {
  padding: 4px 0; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3); border-bottom: 1px solid var(--line-subtle);
}
.osav-weekcal__tbl td { padding: 5px 0; text-align: center; color: var(--ink-2); }
.osav-weekcal__tbl td.wk, .osav-weekcal__tbl th.wk {
  color: var(--ink-3); font-weight: 600;
  border-inline-end: 1px solid var(--line-subtle); padding-inline-end: 7px;
}
.osav-weekcal__tbl td.weekend { color: var(--ink-3); }
.osav-weekcal__tbl td.first {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3);
}
.osav-weekcal__tbl td.today {
  background: var(--brand); color: var(--ink-on-brand);
  border-radius: 6px; font-weight: 600;
}
.osav-weekcal__tbl tr.is-now td.wk { color: var(--brand); }
.osav-weekcal__ft { margin-top: 8px; font-size: 10.5px; color: var(--ink-3); }

/* =====================================================================
   7. COMPONENTEN
   ===================================================================== */

/* --- Paginakop: titel met accentlijn eronder -------------------------- */
.osav-pagehead { margin-bottom: 20px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.osav-pagehead__text { min-width: 0; flex: 1 1 auto; }
.osav-pagehead h1 { margin-bottom: 6px; }
.osav-pagehead__rule { width: 42px; height: 3px; background: var(--accent); border-radius: 2px; }
.osav-pagehead__sub { margin: 8px 0 0; color: var(--ink-3); font-size: 13px; max-width: 68ch; }

/* --- Kaart ------------------------------------------------------------ */
.osav-card {
  background: var(--surface);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
/*
 * GEEN marge op de kaart zelf. Er stond hier `.osav-card + .osav-card
 * { margin-top: 16px }`, en die vuurde ook binnen `.osav-grid`: elke kaart
 * behalve de eerste kreeg 16px marge, werd hoog in de rij gedrukt en verloor
 * precies die 16px in hoogte. Op het scherm zag je een eerste kaart die uit de
 * rij stak, wat leest als een uitlijnfout terwijl de grid het goed deed.
 *
 * Afstand tussen componenten is een zaak van de CONTAINER. Onder elkaar:
 * `.osav-stack`. Naast elkaar: `.osav-grid`.
 */
.osav-stack { display: flex; flex-direction: column; gap: 16px; }

/* Een kaart die zelf een link is. Zonder deze regel erft ALLE tekst in de
   kaart de onderstreping en de linkkleur van <a> — titel, label en cijfer —
   en leest de kaart als een blok losse links. */
a.osav-card {
  display: block; text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
a.osav-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-pop);
  transform: translateY(-1px);
}
a.osav-card:hover .osav-card__title { color: var(--brand); }
@media (prefers-reduced-motion: reduce) { a.osav-card:hover { transform: none; } }
.osav-card__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.osav-card__title {
  font-size: 14px; font-weight: 600; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
/* Een icoon in de kaartkop is decoratief (aria-hidden) en mag daarom kleuren
   met het merk: het helpt scannen, het draagt geen betekenis. */
.osav-card__title svg { flex: 0 0 auto; color: var(--brand); }

.osav-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* --- Statistiektegel --------------------------------------------------- */
.osav-stat {
  background: var(--surface); border: 1px solid var(--line-subtle);
  border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--shadow-card);
}
.osav-stat__label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.osav-stat__value { font-size: 1.85rem; font-weight: 600; line-height: 1.15; margin-top: 4px; }
.osav-stat__note { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* --- Tabel in een kaart -----------------------------------------------
 * De kaart scrollt ZELF horizontaal. Zonder deze regel duwt een brede
 * tabel de hele pagina opzij en verdwijnt de zijbalk half uit beeld.
 */
.osav-tablecard {
  background: var(--surface); border: 1px solid var(--line-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden;
}
.osav-tablecard__scroll { overflow-x: auto; }
.osav-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.osav-table th {
  text-align: start; padding: 10px 14px;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-subtle); white-space: nowrap;
}
.osav-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-subtle); }
.osav-table tbody tr:last-child td { border-bottom: 0; }
.osav-table tbody tr:hover td { background: var(--surface-2); }

/* --- Filterbalk: een veld verschijnt alleen als het wordt meegegeven --- */
.osav-filters {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--line-subtle);
  border-radius: var(--radius-card); padding: 14px 16px; margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.osav-field { display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
/* Het zoekveld van een balk mag de rest opzij duwen: een naam van drie woorden
 * hoort te passen, en de knop ernaast is even breed als zijn woord. */
.osav-field--grow { flex: 1 1 320px; }
.osav-field__label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}

/* --- Formuliervelden --------------------------------------------------- */
input[type='text'], input[type='password'], input[type='email'], input[type='number'],
input[type='date'], input[type='search'], select, textarea {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-control);
  padding: 9px 11px; min-height: var(--tap); width: 100%;
}
textarea { min-height: 96px; }
select {
  appearance: none; padding-inline-end: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F6A85' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand); outline: 2px solid var(--brand-tint); outline-offset: 0;
}
label { font-size: 13px; font-weight: 500; color: var(--ink-2); }

/* --- Vinkje met label ---------------------------------------------------
 * Een vinkje is geen veld dat de volle breedte vult; zonder deze regel erft
 * het de `width:100%` en `min-height` van de invoervelden hierboven en wordt
 * het een vlak van 44px breed.
 */
.osav-check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.osav-check input[type='checkbox'] { width: auto; min-height: auto; margin: 0; }

/* --- Knoppen ----------------------------------------------------------- */
.osav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 9px 18px;
  border-radius: var(--radius-control); border: 1px solid transparent;
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.osav-btn--primary { background: var(--brand); color: var(--ink-on-brand); }
.osav-btn--primary:hover { background: var(--brand-hover); color: var(--ink-on-brand); }
.osav-btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.osav-btn--ghost:hover { background: var(--brand-tint); border-color: var(--line-strong); color: var(--ink); }
.osav-btn--danger { background: var(--accent); color: #FFFFFF; }
.osav-btn--danger:hover { background: var(--accent-hover); color: #FFFFFF; }
.osav-btn--block { width: 100%; }

/* --- Meldingen ---------------------------------------------------------- */
.osav-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-control);
  border: 1px solid transparent; font-size: 13.5px; margin-bottom: 16px;
}
.osav-alert svg { flex: 0 0 auto; margin-top: 2px; }
.osav-alert--ok     { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok); }
.osav-alert--warn   { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn); }
.osav-alert--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
/* De foutenbalk boven een formulier loopt met het formulier mee. Over de
   volle breedte stak zij eronder uit, en dan lijkt zij bij de pagina te horen
   in plaats van bij de velden waar zij over gaat. */
.osav-alert--form { max-width: var(--form-max); }
.osav-alert--info   { background: var(--info-bg);   color: var(--info);   border-color: var(--info); }

/* --- Leegte -------------------------------------------------------------- */
.osav-empty {
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius-card); padding: 34px 20px;
  text-align: center; color: var(--ink-3);
}

/* --- Etiketten ----------------------------------------------------------- */
.osav-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-chip);
  font-size: 11.5px; font-weight: 500;
  background: var(--neutral-bg); color: var(--neutral);
}
.osav-tag--ok     { background: var(--ok-bg);     color: var(--ok); }
.osav-tag--warn   { background: var(--warn-bg);   color: var(--warn); }
.osav-tag--danger { background: var(--danger-bg); color: var(--danger); }

/* --- Kruimelpad ---------------------------------------------------------
 * Waar sta ik, en hoe kom ik terug. Een module is drie tot vier schermen
 * diep; zonder dit spoor is de enige weg terug de terugknop van de browser,
 * en die brengt je bij een formulier op een herverzendwaarschuwing.
 */
.osav-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px;
}
.osav-crumb a { color: var(--ink-3); text-decoration: none; }
.osav-crumb a:hover { color: var(--brand); text-decoration: underline; }
.osav-crumb__sep { opacity: .55; }
.osav-crumb b { color: var(--ink-2); font-weight: 600; }

/* --- Knoppen in de paginakop -------------------------------------------- */
.osav-pagehead__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --- Twee kolommen --------------------------------------------------------
 * Niet `.osav-grid`: die vult automatisch en zet bij drie kaarten de derde
 * naast de tweede. Hier is de linkerkolom de inhoud en de rechter een
 * zijpaneel, en die verhouding moet blijven staan.
 */
.osav-cols { display: grid; gap: 16px; grid-template-columns: 3fr 2fr; align-items: start; }
.osav-cols--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .osav-cols, .osav-cols--even { grid-template-columns: 1fr; } }

/* --- Formulier -----------------------------------------------------------
 * Eén opmaak voor elk formulier in het systeem. Een tweede variant is meteen
 * een derde; zie CLAUDE.md § Werkafspraken.
 */
/*
 * EEN FORMULIER IS EEN KOLOM EN GEEN VLAKTE. Zonder bovengrens rekt een
 * formulier mee met het venster: op een breed scherm staat er dan een veld voor
 * een voornaam van 550px, en het oog moet van het etiket linksboven naar de
 * rechterrand en terug. De grens hieronder houdt twee kolommen op ongeveer
 * 440px en drie op 290px -- de maat van het gegeven dat erin staat.
 */
.osav-form { display: flex; flex-direction: column; gap: 20px; max-width: var(--form-max); }
.osav-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.osav-fieldset > legend {
  padding: 0; margin-bottom: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
/* Een streep tussen twee blokken. De legenda alleen is te licht om een sectie
   te beginnen: op een lang formulier (het contract heeft er vier) liepen de
   blokken in elkaar over en stond "TARİHLER" ergens midden in een kolom
   velden. */
.osav-form > .osav-fieldset + .osav-fieldset {
  border-top: 1px solid var(--line-subtle); padding-top: 20px;
}
.osav-formrow { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.osav-formrow--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .osav-formrow, .osav-formrow--3 { grid-template-columns: 1fr; } }
/*
 * De knoppenbalk. RECHTS UITGELIJND, en staat er links een uitweg (annuleren,
 * terug), dan duwt die zichzelf naar de linkerrand. Dat stond hier eerst als
 * `space-between`, en een balk met alleen een opslaan-knop zette die dan links
 * -- waarna elf formulieren een `<span></span>` als vulling hadden staan om dat
 * te herstellen. Een component die een truc nodig heeft, is niet af.
 */
.osav-form__actions {
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--line-subtle); padding-top: 16px;
}
.osav-form__actions > *:first-child:not(:last-child) { margin-inline-end: auto; }

/* Een verplicht veld. Het sterretje is DECORATIE; de eis staat in de
   `required` op het veld zelf, want daar leest een schermlezer haar. */
.osav-req { color: var(--accent); }

/* De hulpzin onder een veld. Niet `.osav-field__label` in het klein: die is
   een kop, deze is een zin. */
.osav-hint { font-size: 12px; color: var(--ink-3); margin: 0; }

/* --- Een afgekeurd veld ---------------------------------------------------
 * DE MELDING STAAT BIJ HET VELD, niet alleen bovenaan het formulier. De balk
 * bovenin blijft staan -- die somt alles op en wordt als `alert` voorgelezen --
 * maar op een formulier met twintig velden is "Sözleşme tarihi zorunludur"
 * bovenin een aanwijzing zonder adres: je weet wát er mis is en niet wáár.
 *
 * De rand kleurt mee, maar de melding staat er ook: kleur alleen is geen
 * boodschap voor wie haar niet ziet.
 */
.osav-field.has-error > input,
.osav-field.has-error > select,
.osav-field.has-error > textarea { border-color: var(--danger); }
.osav-field.has-error > input:focus,
.osav-field.has-error > select:focus,
.osav-field.has-error > textarea:focus {
  border-color: var(--danger); outline-color: var(--danger-bg);
}
.osav-field__error { font-size: 12px; font-weight: 500; color: var(--danger); margin: 0; }

/* Bestandskeuze. Erft zonder deze regel de `min-height` van de invoervelden
   en krijgt dan een knop die halverwege een leeg vak zweeft. */
input[type='file'] {
  font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface);
  border: 1px dashed var(--line); border-radius: var(--radius-control);
  padding: 10px 11px; width: 100%;
}

/* --- Kleine knop ---------------------------------------------------------
 * In een tabelrij past geen knop van 44px hoog. Dit is de ENIGE plek waar het
 * aanraakvlak kleiner mag zijn, en dan nog blijft er 32px over.
 */
.osav-btn--sm { min-height: 32px; padding: 5px 11px; font-size: 12.5px; }

/* Knoppen in de laatste tabelkolom. Rechts uitgelijnd zodat zij een kolom
   vormen in plaats van te schuiven met de breedte van de tekst ervoor. */
.osav-table td.osav-rowact { text-align: end; white-space: nowrap; }
.osav-rowact form { display: inline; }
.osav-rowact > * + * { margin-inline-start: 6px; }

/* --- Getallen in een tabel ----------------------------------------------
 * Tabelcijfers, zodat een kolom jaartallen of aantallen recht onder elkaar
 * staat in plaats van te dansen op de breedte van de 1.
 */
.osav-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Gedempte tekst ------------------------------------------------------ */
.osav-muted { color: var(--ink-3); font-size: 12.5px; }

/* --- Lijst in een kaart --------------------------------------------------
 * Voor een opsomming die geen tabel verdient: een handvol leden, een handvol
 * regels aanwezigheid.
 */
.osav-list { display: flex; flex-direction: column; }
.osav-list__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-subtle);
}
.osav-list__row:last-child { border-bottom: 0; }
.osav-list__row > div { min-width: 0; }

/* --- Feitenblad: een dossier als etiket BOVEN waarde ----------------------
 * Voor een scherm dat een DOSSIER toont: een vast handvol velden waarvan de
 * waarde bijna altijd langer is dan haar etiket — een adres, een e-mailadres,
 * de naam van een universiteit.
 *
 * WAAROM NIET `.osav-list`. Die zet etiket links en waarde rechts, en dat werkt
 * voor korte waarden: een bedrag, een datum, een aantal. Zet er een adres in
 * een kaart van 320px in en het etiket breekt over twee regels ("E-posta" over twee regels)
 * terwijl de waarde tegen de rechterrand kruipt; het gat ertussen is per rij
 * anders en de kaart leest als een ingeklemde tabel. Hier staat het etiket
 * BOVEN de waarde: beide beginnen op dezelfde lijn, de waarde krijgt de hele
 * breedte, en de kolommen lopen over de rijen heen door.
 *
 * De kolommen vullen zichzelf: op een brede kaart staan er twee of drie naast
 * elkaar, op een telefoon één. Een veld met een lange waarde krijgt
 * `--wide` en neemt de hele rij.
 *
 * 220px EN NIET SMALLER. Een e-mailadres is ongeveer dertig tekens en past
 * daar net in; in een kolom van 165px brak het middenin het woord af
 * ("necmettin.sahinoglu@orn / ek.test"), en dat leest als een fout.
 */
.osav-facts {
  display: grid; gap: 14px 22px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.osav-fact { min-width: 0; }
.osav-fact--wide { grid-column: 1 / -1; }
.osav-fact__label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
/* `anywhere` en niet `break-word`: een e-mailadres zonder spaties zou anders
   de kaart oprekken en de hele rij kaarten mee. */
.osav-fact__value {
  margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--ink);
  overflow-wrap: anywhere;
}
/* Een leeg veld is grijs: het oog slaat het over in plaats van het te lezen. */
.osav-fact__value.is-empty { color: var(--ink-3); }

/* Een telefoonnummer of e-mailadres in een feitenblad IS de waarde; het is
   geen verwijzing naar een ander scherm. Het houdt daarom de inktkleur en
   draagt alleen een ingehouden streep -- anders staan er in één kaart drie
   blauwe regels die om aandacht vragen terwijl ze alleen maar gegevens zijn.
   Bij aanwijzen kleurt hij wel: dan is het een handeling. */
.osav-fact__value a {
  color: inherit; text-decoration-color: var(--line-strong);
}
.osav-fact__value a:hover { color: var(--brand); text-decoration-color: currentColor; }

/* --- Voetregel onder een kaart -------------------------------------------
 * Voor herkomst: wie heeft dit vastgelegd, en wanneer. Het hoort bij de kaart
 * maar niet tussen haar velden.
 */
.osav-card__foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-subtle);
  font-size: 12px; color: var(--ink-3);
}

/* --- Ingetypte tekst terugtonen ------------------------------------------
 * `pre-wrap` houdt de regelovergangen die de gebruiker zelf heeft getypt.
 * Zonder deze regel wordt een notulen van tien alinea's één blok tekst.
 */
.osav-prose { white-space: pre-wrap; margin: 0; }

/* --- Kop boven een tabelkaart -------------------------------------------- */
.osav-tablecard__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-subtle);
}
.osav-tablecard__hd h2 { font-size: 14px; font-weight: 600; margin: 0; }
.osav-tablecard__note {
  padding: 10px 16px; font-size: 12.5px; color: var(--ink-3);
  border-bottom: 1px solid var(--line-subtle);
}

/* --- Bladeren ------------------------------------------------------------
 * Laravel rendert hier zijn eigen paginering in; deze regels zorgen dat die
 * niet over de volle breedte uitwaaiert.
 */
.osav-pager { margin-top: 16px; font-size: 13px; }
.osav-pager svg { width: 16px; height: 16px; }

/* --- Losse knoppenrij onder een scherm -----------------------------------
 * Voor handelingen die NIET in de paginakop horen: verwijderen, annuleren.
 * Een andere handeling dan bewerken hoort ook op een andere plek te staan.
 */
.osav-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* --- Flitsmelding: een melding die zelf een link is -----------------------
 * `.osav-alert` is een blok tekst; deze variant is klikbaar. Zonder de
 * expliciete kleur erft hij de linkkleur van <a> en verliest hij precies het
 * contrast dat de melding leesbaar maakt.
 */
a.osav-flash { text-decoration: none; color: inherit; }
a.osav-flash:hover { border-color: currentColor; }

/* --- Vinkjes met een eigen invulveld --------------------------------------
 * De vraag "welke vergaderruimte" hoort BIJ het vinkje Vergaderruimte, niet in
 * een losse rij onderaan het formulier. Daarom is elk vinkje een kaartje met
 * ruimte voor zijn eigen veld; dat veld verschijnt zodra het vinkje aan staat
 * en blijft zonder JavaScript gewoon zichtbaar.
 */
.osav-facilities {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.osav-facility {
  border: 1px solid var(--line-subtle); border-radius: var(--radius-control);
  background: var(--surface-2); padding: 11px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.osav-facility.is-on { border-color: var(--brand); background: var(--brand-soft); }
.osav-facility .osav-field { min-width: 0; }
.osav-facility:not(.is-on) .osav-field { display: none; }

/* Zonder JavaScript blijft elk veld gewoon staan: het formulier moet ook dan
   te gebruiken zijn, en de server bepaalt toch wat er wordt bewaard. */
html.no-js .osav-facility .osav-field { display: flex; }

/* --- Een tweede kop binnen dezelfde kaart --------------------------------
 * Een kaart die twee lijstjes draagt heeft ruimte nodig tussen het eerste en
 * de kop van het tweede; zonder die ruimte lezen ze als één lijst.
 */
.osav-card__hd--spaced { margin-top: 18px; }

/* --- Uitklapbaar blok binnen een kaart ------------------------------------
 * Voor NASLAG, nooit voor een handeling. Een <details> om een formulier
 * verstopt de handeling, en wat niet vindbaar is bestaat niet — dat was de
 * klacht die in IUASR-SIS het afrondformulier uit een dichtgeklapt paneel
 * heeft gehaald.
 */
.osav-details { border-top: 1px solid var(--line-subtle); margin-top: 14px; padding-top: 12px; }
.osav-details > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);
  list-style: none; padding: 4px 0;
}
.osav-details > summary::-webkit-details-marker { display: none; }
.osav-details > summary::before { content: '▸ '; color: var(--ink-3); }
.osav-details[open] > summary::before { content: '▾ '; }
.osav-details > .osav-form { margin-top: 12px; }
.osav-details > .osav-form + .osav-form {
  border-top: 1px solid var(--line-subtle); margin-top: 14px; padding-top: 14px;
}

/* =====================================================================
   8. INLOGSCHERM
   ===================================================================== */

.osav-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--canvas); }
.osav-login__card {
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--line-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
  padding: 32px 30px;
}
.osav-login__mark {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--brand); color: var(--ink-on-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; margin-bottom: 16px;
}
.osav-login__title { font-size: 1.3rem; margin-bottom: 4px; }
.osav-login__intro { color: var(--ink-3); font-size: 13px; margin-bottom: 22px; }
.osav-login__row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.osav-login__foot { margin-top: 20px; text-align: center; font-size: 11.5px; color: var(--ink-3); }

/* =====================================================================
   9. RESPONSIEF
   ---------------------------------------------------------------------
   Onder 900px schuift de zijbalk over de inhoud met een achtergrondlaag.
   Boven die grens staat hij vast; een open stand die blijft hangen bij
   het draaien van een tablet is expliciet afgevangen in osav-shell.js.
   ===================================================================== */

.osav-backdrop { display: none; }

@media (max-width: 900px) {
  .osav-menubtn { display: inline-flex; }

  .osav-sidebar {
    position: fixed; inset-block-start: var(--header-height); inset-inline-start: 0;
    z-index: 90; height: calc(100vh - var(--header-height));
    transform: translateX(-100%);
    transition: transform .18s ease;
  }
  .osav-sidebar.is-open { transform: translateX(0); }

  .osav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 85;
    background: rgba(15, 10, 35, .45);
  }
  .osav-backdrop[hidden] { display: none; }

  .osav-main__inner { padding: 16px 14px 32px; }
  .osav-user__name { display: none; }
  .osav-weekcal-pop { width: min(322px, calc(100vw - 24px)); }
}

@media (max-width: 640px) {
  .osav-header { padding: 0 12px; gap: 8px; }
  .osav-pill { display: none; }
}

/* =====================================================================
   10. AFDRUKKEN
   ===================================================================== */

@media print {
  .osav-header, .osav-sidebar, .osav-backdrop, .osav-foot, .osav-btn { display: none !important; }
  body { background: #FFFFFF; }
  .osav-card, .osav-tablecard { box-shadow: none; border-color: #CCCCCC; }
}

/* =====================================================================
   11. VOORTGANGSBALK
   ---------------------------------------------------------------------
   Één component, voor de back-up. Hij staat hier en niet bij het scherm,
   want een tweede voortgangsbalk elders wordt onvermijdelijk een derde
   variant — dat is precies de fout die het designsysteem voorkomt.

   ONDOORZICHTIGE VLAKKEN, geen rgba() met alpha: anders schijnt in de
   donkere modus de achtergrond erdoorheen. Zie CLAUDE.md § Werkafspraken.

   De breedte staat als `style` op het balkje zelf en niet in een klasse:
   het is een MEETWAARDE die per verzoek verandert, geen vormgeving. Dat
   is de ene plek waar een inline stijl het juiste antwoord is.
   ===================================================================== */

.osav-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-subtle);
  overflow: hidden;
  margin: 4px 0 8px;
}
.osav-progress__bar {
  height: 100%;
  /* `--brand` draait in donker mee van diep indigo naar licht lavendel, dus
     de vulling leest in beide standen tegen `--surface-2`. Vandaar geen
     eigen regel in osav-dark.css: de token doet het werk al. */
  background: var(--brand);
  /* De overgang maakt een sprong van 12% naar 40% leesbaar in plaats van
     schokkerig. Animatie is hier decoratie, nooit informatie. */
  transition: width .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .osav-progress__bar { transition: none; }
}

/* =====================================================================
   12. AFGESCHERMDE WAARDE
   ---------------------------------------------------------------------
   De bolletjes plus de knop die de echte waarde ophaalt, uit Kurum
   Bilgileri. Één component en geen tweede variant per scherm.

   De waarde en de knop staan op ÉÉN regel en breken samen af: bij een
   IBAN van 26 tekens naast een knop is dat het verschil tussen een nette
   kolom en een tabel die uit haar voegen loopt.
   ===================================================================== */

.osav-reveal { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.osav-reveal__value { letter-spacing: .02em; }