/* ============================================================
   ZwChaniqUren - stijl

   Uitgangspunt: een telefoon in de hand, buiten, mogelijk met
   handschoenen aan. Dus: grote raakvlakken (minimaal 44px), hoog
   contrast, en geen dunne lijntjes of kleine tekst. Geen webfonts -
   die halen op een slechte verbinding niets uit en het systeemlettertype
   van de telefoon leest op elk toestel goed.

   OPGESCHOOND. Dit bestand eindigde met drie blokken die er in
   opeenvolgende rondes achteraan geplakt waren ("TOEVOEGINGEN",
   "AANPASSINGEN VAN DEZE RONDE"). Daardoor stond een deel van de opmaak
   twee keer in het bestand en de rest onvindbaar onderaan. Alles staat
   nu op zijn onderwerp.

   WEGGEHAALD, want verhuisd naar het component zelf:
     .veld-met-oog, .veld-knoppen, .veldknop, .wisknop, .oogknop
        -> naar het <style>-blok in Pages/Inloggen.razor
     .uitgang, .uitgang-teken, .uitgang-woord, .uitgang-uitleg
        -> naar het <style>-blok in Components/Uitgang.razor

   Dat is met opzet. Precies die twee blokken zorgden voor het verminkte
   inlogscherm: de razor was nieuw, deze stylesheet stond nog als oude
   versie in de cache van de telefoon, en dan is een inline-svg zonder
   maat zo breed als het scherm. Opmaak die een scherm kán slopen, hoort
   in hetzelfde bestand als de opmaak die hij hoort te sturen.

   WEGGEHAALD, want vervangen:
     .verzendstatus, .verzendtekst, .vlag-ingediend
        -> .statusteken, met drie standen. Zie Models/Urenstatus.cs.
   ============================================================ */

:root {
    --papier: #F7F6F2;
    --inkt: #16201C;
    --grijs: #6B7280;
    --lijn: #DDD9D0;
    --wit: #FFFFFF;

    /* De kleur van de onderbalk met de twee tijdrollen
       (Components/Weekraster.razor.css, .onderbalk). Hier ook nodig voor de
       systeemstrook eronder; zie html:has(.onderbalk) verderop. */
    --onderbalk: #F4F3F0;

    --tekort: #B4531F;
    --over: #2F6B4F;

    /* Hoogte van EEN RIJ in de dagbalk. De naam klopt niet meer sinds de stap
       een half uur is; hij staat overal in de css, dus hij blijft zoals hij is.
       Van 14 naar 22 px: half zoveel rijen, dus dat past nog steeds op een
       telefoonscherm, en het tikvlak wordt er flink beter van. */
    --hoogte-kwartier: 22px;
    --raakvlak: 44px;

    /* DE WITTE RAND LINKS EN RECHTS VAN ELK SCHERM. Staat hier omdat er iets
       is dat er juist NIET binnen hoort te blijven: het urenraster loopt van
       rand tot rand en trekt deze marge weer van zichzelf af. Zie .rasterblok
       in Components/Weekraster.razor.css.

       VERANDER HEM HIER EN NERGENS ANDERS. Zetten de twee verschillende
       waarden neer, dan steekt het raster net iets buiten het scherm en
       verschijnt er onderaan een schuifbalk voor die paar pixels. */
    --paginarand: 16px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--papier);
    color: var(--inkt);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}

.app {
    max-width: 640px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--papier);

    /* EEN KOLOM: bovenbalk, wachtbalk, main. Zonder dit kan main de hoogte die
       overblijft niet opeisen, en daar hangt het vastzetten hieronder aan. */
    display: flex;
    flex-direction: column;
}

main {
    padding: 0 var(--paginarand) calc(48px + env(safe-area-inset-bottom));

    /* Vult wat er onder de balken overblijft. min-height: 0 hoort erbij: zonder
       die regel weigert een flexkind kleiner te worden dan zijn inhoud. */
    flex: 1 1 auto;
    min-height: 0;
}

/* ============================================================
   SCHERMEN DIE DE VOLLE HOOGTE VULLEN
   ============================================================

   WAT DIT OPLOST: op het ingavescherm en de overzichten plakt van alles vast -
   de zwarte balk met jaar, week en 'nu', de keuzeregel tussen de overzichten,
   de kolomkop, en onderaan Dagtotaal, Weektotaal, Norm en Saldo. Die plakken
   aan de SCHUIFBAAN van het raster, en dat ging goed zolang je binnen het
   raster schoof. Maar de pagina zelf schoof ook, en dan gaat de hele baan mee
   omhoog: precies wat je op het scherm ziet als de balk "op een bepaald moment
   meegaat naar beneden". Vastgeplakt aan iets dat zelf wegschuift, is niet
   vastgeplakt.

   DE OPLOSSING: op die schermen scrollt de PAGINA niet meer. Het scherm is
   precies zo hoog als het venster, het raster krijgt de hoogte die overblijft,
   en wat eronder hoort (weekvoet, indienen, dagtotalen, toelichtingen) schuift
   in zijn eigen strookje - .bladvoet hieronder.

   :has() DOET HET WERK, en dat is met opzet: de indeling weet niet welk scherm
   erin staat, maar kan er wél naar kijken. Kent de browser :has() niet (Safari
   ouder dan 15.4), dan valt alles terug op het oude gedrag: de pagina scrollt
   en de baan houdt zijn eigen max-height. Lelijker, maar alles blijft
   bereikbaar.

   EEN SCHERM DOET MEE door de klasse 'vastblad' op zijn buitenste div te zetten.
   Zie Pages/Dag.razor, Loonoverzicht.razor, Kwartaaloverzicht.razor en
   Jaaroverzicht.razor. */

/* VAST AAN DE RANDEN VAN HET SCHERM, EN NIET 100dvh HOOG.

   WAT ER MISGING: de knop "… vastleggen" stond op de iPhone half onder een
   lichte strook. Als app op het beginscherm, met de doorzichtige statusbalk
   (black-translucent + viewport-fit=cover), rekent Safari 100vh én 100dvh als
   de schermhoogte MIN de statusbalk - zo'n 59 punten op een iPhone met
   Dynamic Island. De pagina begint wél bovenaan het glas, onder de statusbalk.
   .app was dus precies een statusbalk te kort, overflow: hidden knipte de
   onderkant af, en wat je onderin zag was de achtergrond van de pagina. De
   strook was even hoog als de statusbalk; daaraan herken je deze fout.

   position: fixed MET inset: 0 meet niet, maar hangt aan de vier randen van
   het venster. Dat is op de iPhone als app het hele glas, in Safari met
   adresbalk het zichtbare deel, en op een pc het browservenster - altijd de
   juiste maat, zonder te rekenen. De home-balk blijft vrij door de opvulling
   onderin .onderbalk (env(safe-area-inset-bottom)) in Weekraster.razor.css.

   max-width en margin: 0 auto van .app blijven werken: een vast element met
   left en right op 0 en een maximale breedte wordt door auto-marges in het
   midden gezet.

   ZET HIER GEEN height: 100dvh TERUG. Op een pc zie je geen verschil, op de
   iPhone valt de knop dan weer half weg. */
.app:has(.vastblad) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
}

/* DE HOOGTE UIT HET SCHERM, ALS iOS HET VENSTER TE KORT OPGEEFT.

   WAT ER NA position: fixed NOG STEEDS MISGING: onderin bleef een lege strook
   en de knop Vastleggen viel half weg. Als app met de doorzichtige statusbalk
   geeft iOS niet alleen 100vh en 100dvh een statusbalk te kort op, maar ook
   het venster zelf - en bottom: 0 hangt aan dat venster. Ook een vast element
   hield dus een statusbalk boven de onderrand van het glas op.

   wwwroot/index.html (zwchaniqVenster) meet de echte schermhoogte en zet die in
   --vensterhoogte, MET data-venster="scherm" op <html>. Alleen als de app als
   app op iOS draait, het venster de volle breedte heeft en korter is dan het
   scherm. Dan hangt .app aan de bovenkant en krijgt het die hoogte; de
   onderbalk houdt de home-balk vrij met env(safe-area-inset-bottom).

   TOT app.css VERSIE 15 EISTE HET SCRIPT dat het verschil PRECIES de
   statusbalk was, en dat navigator.standalone true was. Via een Web Clip uit
   een configuratieprofiel is dat laatste niet gegarandeerd - en dan gebeurde
   er niets, zonder melding. Zie de toelichting bij zwchaniqVenster.

   ZONDER data-venster GEBEURT HIER NIETS: op een pc, in Safari met adresbalk,
   op Android en met een oude index.html uit de cache geldt de regel
   hierboven gewoon.

   Klopt het daarna nog steeds niet, dan zet het urenraster de gemeten maten
   in een melding onder het raster - zie stap 4 in OnAfterRenderAsync van
   Components/Weekraster.razor. */
html[data-venster="scherm"] .app:has(.vastblad) {
    bottom: auto;
    height: var(--vensterhoogte, 100%);
}

/* IN SAFARI OP DE IPHONE: ALLEEN HET STUK BOVEN DE WERKBALK.

   WAT ER MISGING: in Safari (niet als app) zweeft de werkbalk met het adres
   onderaan óver de pagina, en de pagina loopt eronder door. bottom: 0 hierboven
   hangt dan aan de onderrand van het glas. Gemeten: venster 714 px, .app tot
   754 px - de knop Vastleggen viel 40 pixels achter de werkbalk.

   zwchaniqVenster in wwwroot/index.html zet dan data-venster="browser" en in
   --vensterhoogte de hoogte van het zichtbare deel (innerHeight). Alleen op iOS
   en alleen buiten de app; pc en Android merken hier niets van.

   DE STROOK ONDER DE WERKBALK BLIJFT VAN SAFARI. Daar kan een webpagina niets
   in kwijt dat je kunt aantikken. Als app op het beginscherm is er geen
   werkbalk en geldt de regel hierboven, met de volle schermhoogte. */
/* NU OOK ALS APP (data-venster="zichtbaar" in plaats van "browser"): het
   uitrekken naar de schermhoogte met data-venster="scherm" hierboven werkte
   niet - iOS tekende met de doorzichtige statusbalk niets onder innerHeight.
   index.html gebruikt daarom de statusbalk "black" en zet ook als app de
   zichtbare hoogte. De regels voor "scherm" worden niet meer gebruikt. */
html[data-venster="zichtbaar"] .app:has(.vastblad) {
    bottom: auto;
    height: var(--vensterhoogte, 100%);

    /* min-height UIT .app MOET HIER WEG.

       WAT DE RANDENTEST LIET ZIEN (app.css 17, als app, statusbalk "black"):
       data-venster zichtbaar, --vensterhoogte 812px - en tóch .app eind 874.
       .app heeft min-height: 100vh, en als app is 100vh op iOS de hoogte van
       het HELE scherm, statusbalk inbegrepen: 874. min-height wint altijd van
       height, dus .app werd 874 hoog in een venster van 812, en de onderste 62
       pixels - met de knop Vastleggen - vielen onder de onderrand van het glas.

       ZET HIER GEEN min-height MET vh TERUG. */
    min-height: 0;
}

/* EN VOOR DE SCHERMEN ZONDER VASTBLAD: dezelfde zichtbare hoogte als minimum
   in plaats van 100vh, anders lopen die als app 62 pixels te ver door. */
html[data-venster="zichtbaar"] .app {
    min-height: var(--vensterhoogte, 100vh);
}

/* DEZELFDE HOOGTE VOOR DE SCHERMEN ZONDER VASTBLAD.

   De regel hierboven gold alleen voor schermen met een vastblad. Het
   inlogscherm, het periodescherm en het weekscherm hielden min-height: 100vh
   uit .app - en dat is als app precies dezelfde te korte maat. Ook daar bleef
   onderin een strook over waar de pagina niet kwam.

   min-height EN GEEN height: deze schermen lopen door en moeten kunnen
   scrollen als er meer op staat dan past.

   Alleen met data-venster="scherm", net als hierboven: zonder dat (pc,
   Safari met adresbalk, Android, oude index.html) verandert er niets. */
html[data-venster="scherm"] .app {
    min-height: var(--vensterhoogte, 100vh);
}

/* DE PAGINA ZELF LIGT STIL - OOK ONDER DE VINGER.

   WAT ER MISGING OP DE IPHONE: .app hierboven kon niet meer scrollen, maar iOS
   laat de hele pagina tóch meeveren als je omlaag of omhoog trekt. Dat is het
   elastische terugveren van Safari, en dat doet hij ook op een pagina die
   precies past. Dan schuift alles tegelijk een stuk mee - bovenbalk, kopregel,
   raster - en staat er even een leeg vlak boven of onder.

   overscroll-behavior: none ZET DAT VEREN UIT, en alleen op html en body werkt
   het voor de pagina als geheel. overflow: hidden en de hoogte erbij zorgen dat
   er ook echt niets te schuiven valt.

   ALLEEN OP SCHERMEN MET EEN VASTBLAD. Het inlogscherm en de gewone schermen
   lopen door en moeten gewoon blijven scrollen. Kent de browser :has() niet,
   dan gebeurt hier niets en blijft het oude gedrag. */
html:has(.vastblad),
html:has(.vastblad) body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* DE SYSTEEMSTROOK ONDERIN IN DE KLEUR VAN DE ONDERBALK.

   Onderin, bij de home-balk van de iPhone, staat niets van de app; daar zie
   je de achtergrond van de pagina. Tijdens de randentest was dat een magenta
   strook. Nu die test weg is, krijgt hij dezelfde kleur als het blok met de
   twee tijdrollen (.onderbalk in Components/Weekraster.razor.css), zodat die
   balk doorloopt tot de onderrand van het glas in plaats van op een ander
   tintje te eindigen.

   ALLEEN OP SCHERMEN MET DIE ONDERBALK. Op de andere schermen eindigt de
   pagina met --papier, en daar hoort de strook ook --papier te zijn.

   VERANDER JE DE KLEUR VAN .onderbalk, VERANDER HEM DAN HIER MEE (--onderbalk
   in :root). Weekraster.razor.css gebruikt de variabele niet zelf: dat
   bestand heeft een eigen versiecontrole (--rasterstijl / StijlVersie) en
   daar hoeft niets aan te veranderen voor een achtergrondkleur. */
html:has(.onderbalk),
html:has(.onderbalk) body {
    background: var(--onderbalk);
}

main:has(.vastblad) {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* De opvulling onderaan is voor schermen die dóórlopen; hier is de
       onderkant van het scherm ook de onderkant van het venster. */
    padding-bottom: 0;
}

.vastblad {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* De schuifbaan van het raster mag hier de volle hoogte pakken. Zijn eigen
   max-height (70dvh op de overzichten, 100dvh min --buitenruimte op het
   ingavescherm) is een SCHATTING voor een pagina die scrollt; hier is de maat
   exact en zou die schatting alleen maar een strook leegte overlaten.

   DE main ERVOOR IS GEEN SIERSEL: die verhoogt het gewicht van deze regel net
   genoeg om te winnen van de regel in het stijlbestand van de component zelf,
   dat ná app.css wordt ingeladen. Haal je 'main' weg, dan doet deze regel
   niets - zonder dat er ergens een fout verschijnt. */
main .vastblad .urenscherm {
    max-height: none;
}

/* WAT ONDER HET RASTER STAAT, SCHUIFT IN ZIJN EIGEN STROOKJE: de totalen, de
   knop indienen, de meldingen en de toelichtingen. Het raster erboven blijft
   dus staan waar het staat.

   HIJ GROEIT NIET (flex-grow 0): past alles, dan staat het gewoon onder het
   raster en blijft er onderaan ruimte over. Is er te veel, dan krimpt dit blok
   en scrollt het - en niet de pagina. */
.bladvoet {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;

    /* none EN NIET contain. contain hield het vegen binnen dit strookje, maar
       iOS liet de inhoud dan nog steeds verend doorschieten en terugveren. none
       zet ook dat uit: aan het eind is het eind. */
    overscroll-behavior: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Het blok met de drie getallen sluit hier dichter op het raster aan dan op een
   pagina die doorloopt: elke millimeter die hier weggaat, gaat naar het raster
   erboven. */
.bladvoet .weekvoet {
    margin-top: 10px;
}

/* OP HET INGAVESCHERM KRIJGT HET RASTER VOORRANG.

   WAT ER MISGING: het raster (.rasterblok) en dit strookje (.bladvoet) mochten
   allebei krimpen, en een browser verdeelt dat krimpen naar verhouding van hun
   natuurlijke hoogte. De bladvoet - het blok met week/norm/saldo, de knop
   indienen en de dagtotalen - hield daardoor een flink stuk van het scherm, en
   de regels Dagtotaal t/m Saldo met de onderbalk eronder stonden halverwege.
   Van de dag zag je maar een uur of vier.

   NU KRIMPT DE BLADVOET EERST (flex-shrink 1000 tegen 1 voor het raster) tot
   aan zijn ondergrens. Alles wat daaronder niet past - de knop indienen, de
   dagtotalen - blijft in dit strookje te bereiken door erin te vegen, precies
   zoals het al werkte. Het raster krijgt de rest, dus Dagtotaal en de
   onderbalk zakken naar beneden en er staan meer uren in beeld.

   --voetminimum IS DE KNOP WAAR JE AAN DRAAIT. 5.6rem is net het blok met de
   drie getallen (week, norm, saldo). Lager: meer uren, maar dan valt dat blok
   half weg. Hoger: het raster levert weer in. */
.dagscherm .bladvoet {
    --voetminimum: 5.6rem;

    flex: 0 1000 auto;
    min-height: var(--voetminimum);
}

.dagscherm .bladvoet .weekvoet {
    margin-top: 6px;
}

/* RUIMTE VOOR DE MELDINGSBALK, ALLEEN ALS ER EEN MELDING STAAT.

   De meldingsbalk (Components/Meldingsbalk.razor) hangt vast aan de onderkant
   van het venster en ligt óver de pagina heen. Zonder deze opvulling dekt hij
   de onderste regels af - de knop indienen of de dagtotalen.

   DIT WAS EEN VASTE MARGE, ALTIJD, in Pages/Dag.razor.css. De gedachte was dat
   het raster anders zou verspringen zodra er een melding verschijnt. Maar de
   balk staat onderaan, dus er verspringt alleen de ONDERKANT van het raster -
   de uren, de kop en de dagen blijven staan waar ze staan. En die melding hangt
   af van de stand van de week (ingediend, verwerkt, afgekeurd), niet van iets
   wat je aan het invullen bent: binnen één week wisselt hij niet.

   5rem IS RUIM GENOEG voor een melding van twee regels op een telefoon.

   KENT DE BROWSER :has() NIET, dan is er geen opvulling en valt een melding
   over de onderste regel van de bladvoet. Het vastblad zelf werkt in zo'n
   browser ook niet (zie hierboven), dus daar schuift dan de hele pagina en kun
   je er alsnog bij. */
.dagscherm:has(.meldingsbalk) {
    padding-bottom: 5rem;
}

@media (hover: none) and (pointer: coarse) {
    .dagscherm:has(.meldingsbalk) {
        padding-bottom: 5.75rem;
    }
}

/* ---------- vangnet voor tekeningen ----------

   Een inline-svg zonder width en height is standaard zo breed als zijn
   houder. Elk icoontje in deze app krijgt die maten als ATTRIBUUT mee,
   want dat is de enige maat die altijd aankomt. Deze regel is het
   vangnet daaronder: vergeet iemand het ooit, dan wordt het icoon 20px
   in plaats van beeldvullend.

   Zo kan één vergeten attribuut nooit meer een heel scherm onbruikbaar
   maken - wat op het inlogscherm precies is gebeurd. */

svg:not([width]) {
    width: 20px;
    height: 20px;
}

/* ---------- bovenbalk ---------- */

.bovenbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Als webapp op iOS loopt de pagina onder de statusbalk door - dat is
       wat black-translucent doet, samen met viewport-fit=cover. Zonder deze
       opvulling verdwijnt de bovenbalk deels achter de klok en het
       batterijpictogram, en zijn knoppen als het menu niet meer te raken.

       env(safe-area-inset-top) is de hoogte van die statusbalk. Op een
       toestel zonder notch en in een gewone browser is die nul, dus dit is
       overal veilig. */
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    background: var(--inkt);
    color: var(--wit);
    position: sticky;
    top: 0;
    z-index: 10;
}

.bovenbalk .naam {
    font-weight: 600;
}

.balkknoppen {
    display: flex;
    align-items: center;
    gap: 4px;
}

.balkknop {
    background: none;
    border: none;
    color: var(--wit);
    width: var(--raakvlak);
    height: var(--raakvlak);
    padding: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.balkknop svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Even indrukken geeft een lichte terugkoppeling, zodat "Einde" voelt
   als een echte knop en niet als een plaatje. */
.balkknop:active {
    opacity: .6;
}

.menuknop {
    background: none;
    border: none;
    color: var(--wit);
    font-size: 24px;
    width: var(--raakvlak);
    height: var(--raakvlak);
    cursor: pointer;
}

/* Meldt dat er uren op de telefoon staan. Bewust opvallend: dit is de
   ene melding die iemand niet mag missen. */
.wachtbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #FFF3D6;
    border-bottom: 1px solid #E8D9A8;
    font-size: 14px;
}

/* ---------- koppen ---------- */

.schermkop, .periodekop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 0 4px;
}

.schermkop h1, .periodekop h1 {
    font-size: 20px;
    margin: 0;
    text-align: center;
    flex: 1;
}

.pijl {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 8px;
    width: var(--raakvlak);
    height: var(--raakvlak);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--inkt);
}

.pijl.klein {
    width: 36px;
    height: 36px;
    font-size: 18px;
}

.kopruimte {
    width: var(--raakvlak);
}

/* Van wanneer tot wanneer. Staat onder de kop van het periodescherm, het
   weekscherm en het jaarscherm - een nummer alleen zegt niemand iets. */
.periodedatums {
    text-align: center;
    color: var(--grijs);
    font-size: 14px;
    margin: 0 0 16px;
    font-variant-numeric: tabular-nums;
}

/* ---------- periodescherm en jaarscherm ---------- */

.weeklijst, .daglijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.weekregel, .dagregel {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 12px;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* De weekregel is twee regels hoog: bovenin een KOPREGEL met het
   weeknummer en het datumbereik, eronder de regel zoals hij altijd was
   (strook, cijfers, status).

   Waarom niet alles op één regel: er moest een datumbereik bij ("31-08
   t/m 06-09"), en dat past er in de breedte niet meer naast. In de hoogte
   is wel ruimte - een periode is maar vier of vijf regels. */
.weekregel {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

/* De onderste regel: precies de indeling van vóór deze ronde. Alleen het
   weeknummer is eruit, want dat staat nu in de kop erboven. */
.weekdetail {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* De periode waar vandaag in valt, iets zwaarder omrand. Geen kleur: dat
   zou concurreren met de kleuren van de urensoorten. */
.regel-nu {
    border-color: var(--inkt);
    box-shadow: inset 0 0 0 1px var(--inkt);
}

.weekkop {
    display: flex;
    align-items: center;
    gap: 8px;
}

.weeknummer, .periodenaam {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.weekdatums {
    flex: 1;
    min-width: 0;
    color: var(--grijs);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* Zeven dagen naast elkaar als miniatuur; geen tijdlabels, want dit is
   een overzicht en geen invoerscherm. */
.weekstrook {
    display: flex;
    gap: 2px;
    flex: 1;
    height: 28px;
}

.strookdag {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #EFEDE7;
    border-radius: 2px;
    overflow: hidden;
}

.strookdeel {
    background: var(--kleur);
    min-height: 3px;
}

/* Onderregel van een periode in het jaaroverzicht. */
.periodevoet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--grijs);
}

.weekcijfers {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
    width: 56px;
    flex-shrink: 0;
}

.weektotaal {
    font-weight: 600;
}

.weeksaldo {
    font-size: 13px;
    color: var(--grijs);
}

.weeksaldo.tekort { color: var(--tekort); }
.weeksaldo.over { color: var(--over); }

/* Afgekeurd krijgt bewust geen icoontje maar een woord: het is voor de
   medewerker gewoon 'weer van jou' (dus: op telefoon), maar hij moet wél
   weten dát het is teruggegeven. */
.vlag {
    align-self: flex-start;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    background: #E8E5DE;
    color: var(--grijs);
}

.vlag-afgekeurd {
    background: #F6DCD0;
    color: var(--tekort);
}

/* ---------- weekscherm ---------- */

.dagnaam {
    width: 48px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.dagnaam span {
    color: var(--grijs);
    font-size: 13px;
}

/* Eén dag over de volle breedte: hier ligt de tijdas horizontaal, in het
   dagscherm verticaal. Dat wisselt bewust - hier kijk je naar hoeveel en
   welke kleur, daar naar hoe laat. */
.dagstrook {
    display: flex;
    flex: 1;
    height: 22px;
    background: #EFEDE7;
    border-radius: 3px;
    overflow: hidden;
    align-items: stretch;
}

.dagstrook .strookdeel {
    background: var(--kleur);
}

.dagstrook .leeg {
    font-size: 13px;
    color: var(--grijs);
    padding-left: 8px;
    align-self: center;
}

.dagtotaal {
    width: 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    flex-shrink: 0;
}

.weekvoet {
    display: flex;
    justify-content: space-around;
    margin: 20px 0 12px;
    padding: 14px 0;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 10px;
}

.weekcijfer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weekcijfer .etiket {
    font-size: 12px;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.weekcijfer .getal {
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.getal.tekort { color: var(--tekort); }
.getal.over { color: var(--over); }

.soortentotalen, .dagtotalen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
    font-size: 14px;
}

.soorttotaal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--grijs);
}

.stip {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--kleur);
    display: inline-block;
    flex-shrink: 0;
}

.telt-niet {
    font-size: 12px;
    font-style: italic;
}

/* ---------- dagscherm ---------- */

/* EEN kopregel, waar er drie waren (terug + datum, de urenteller met eigen
   pijltjes, en het statusteken). Volgorde van links naar rechts: een niveau
   terug, welke dag, hoeveel uur, hoe ver die dag is. */
.dagkop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 10px;
}

/* De datum met de dagpijltjes eromheen. Neemt de ruimte die overblijft, zodat
   de teller rechts blijft staan. */
.dagtitel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dagnaam {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dagcijfer {
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* De hele-dag-knoppen staan nu in een paneel, niet meer permanent op het
   scherm. Daar staan ze onder elkaar en mogen ze de volle breedte hebben. */
.paneel-knoppen.kolom {
    flex-direction: column;
    align-items: stretch;
}

.heledagknop {
    border: 1px solid var(--kleur);
    color: var(--kleur);
    background: var(--wit);
    border-radius: 8px;
    padding: 10px 14px;
    min-height: var(--raakvlak);
    font: inherit;
    cursor: pointer;
}

/* ---------- de dagbalk ---------- */

.soortkiezer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

/* SMALLER GEMAAKT, en de losse kleurstip is eruit. Die stip kostte per knop
   zo'n 20 px terwijl de knop zijn kleur nu zelf draagt: rand en tekst in de
   kleur van de soort, en gevuld zodra hij gekozen is.

   De hoogte blijft var(--raakvlak): kleiner tikt niet meer prettig, en dat is
   nu juist waar dit scherm om draait. */
.soortknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: var(--raakvlak);
    padding: 6px 10px;
    border: 2px solid var(--kleur);
    border-radius: 8px;
    background: var(--wit);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    color: var(--kleur);
    white-space: nowrap;
}

.soortknop.gekozen {
    border-color: var(--kleur);
    background: var(--kleur);
    color: var(--wit);
}

/* "Tijden…" en "Hele dag…" horen niet bij de soorten: geen kleur, wel dezelfde
   maat en dezelfde regel. Grijs, zodat het duidelijk een andere soort knop is. */
.soortknop-extra {
    border-color: var(--lijn);
    color: var(--grijs);
    flex: 0 0 auto;
}

/* ---------- de tijdrollen ---------- */

/* Het blok tussen de soortknoppen en de balk, zolang er een reeks onderhanden
   is. Licht afwijkende achtergrond: dit is iets wat NOG NIET vastligt. */
.tijdreeks {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 10px;
}

.rollen {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.reeksduur {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding-bottom: 10px;
    margin-left: auto;
}

.tijdrol {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rollabel {
    font-size: 12px;
    color: var(--grijs);
}

.rolregel {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* De keuzelijst wordt op een iPhone de systeemrol; op een pc een gewone
   keuzelijst. Vaste breedte en tabelcijfers, anders springt de knop ernaast
   heen en weer bij het wisselen tussen 09:00 en 11:30. */
.rolkeuze {
    font: inherit;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    min-height: var(--raakvlak);
    padding: 4px 6px;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    background: var(--wit);
    color: var(--inkt);
}

.rolknop {
    width: 36px;
    height: 36px;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    background: var(--wit);
    color: var(--inkt);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.rolknop:disabled {
    opacity: 0.35;
    cursor: default;
}

/* De vergrendelde stand van een tijdrol (Tijdrol.razor, Vergrendeld="true"):
   alleen de tijd met een slotje ervoor, op een gestreepte grijze ondergrond
   met een stippelrand. Even hoog als de gewone keuzelijst, zodat er niets
   verspringt. cursor: not-allowed zegt op een pc wat de strepen op de
   telefoon zeggen. */
.rolslotvak {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: var(--raakvlak);
    padding: 4px 6px;

    border: 1px dashed #B4B2A9;
    border-radius: 8px;
    background: repeating-linear-gradient(
        135deg,
        #F1EFEA 0 6px,
        #E8E5DE 6px 12px);

    font-size: 17px;
    font-variant-numeric: tabular-nums;
    color: #55606B;
    cursor: not-allowed;
}

.rolslot {
    flex: 0 0 auto;
    color: #6B7280;
}

.roltijd {
    white-space: nowrap;
}

/* De overlapmelding. Rood genoeg om te zien dat er iets niet kan, rustig
   genoeg om niet als storing te lezen - het is een keuze die niet mag, geen
   fout in de app. */
.reeksmelding {
    margin: 10px 0 0;
    padding: 8px 10px;
    background: #FBE9E4;
    border: 1px solid #E8C4B8;
    border-radius: 8px;
    font-size: 14px;
    color: #7A3418;
}

.reeksknoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.reeksknoppen .knop:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Alleen nog in beeld tijdens het markeren; daarbuiten kost hij geen hoogte
   meer. Vandaar ook geen min-height. */
.aanwijzing {
    font-size: 14px;
    color: var(--grijs);
    margin: 0 0 8px;
}

.dagbalk {
    position: relative;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    overflow: hidden;
    background: var(--wit);
}

/* De aanwijzing ligt over de lege balk heen in plaats van erboven. Zo kost hij
   niets zodra er iets op de dag staat - en dat is het moment waarop niemand
   hem meer leest. pointer-events uit, anders vangt de tekst de tik op die juist
   voor de balk bedoeld is. */
.balkhint {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: var(--grijs);
    pointer-events: none;
}

.kwartier {
    display: flex;
    align-items: stretch;
    height: var(--hoogte-kwartier);
    cursor: pointer;
}

.kwartier.heeluur {
    border-top: 1px solid var(--lijn);
}

.kwartier .tijdlabel {
    width: 46px;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--grijs);
    font-variant-numeric: tabular-nums;
    padding-left: 6px;
    line-height: var(--hoogte-kwartier);
}

.kwartier .vak {
    flex: 1;
    background: transparent;
    border-left: 1px solid var(--lijn);
    position: relative;
}

.kwartier .vak.gevuld {
    background: var(--kleur);
}

.kwartier.selectie .vak {
    background: repeating-linear-gradient(45deg, #D8D4CB, #D8D4CB 4px, #EFEDE7 4px, #EFEDE7 8px);
}

.bloktekst {
    position: absolute;
    left: 8px;
    top: 1px;
    color: var(--wit);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

.bloktekst .toelichting {
    font-weight: 400;
    opacity: 0.9;
    margin-left: 6px;
}

/* Vervangt de knoppen in de dagbalk als de tabel Urensoorten leeg is.
   Rustig van toon: het is geen fout van de medewerker, maar iets wat
   beheer nog moet doen. */
.geen-soorten {
    margin: 24px 0;
    padding: 20px 16px;
    background: #FFF3D6;
    border: 1px solid #E8D9A8;
    border-radius: 10px;
    text-align: center;
    color: #6B5B2E;
}

.geen-soorten p {
    margin: 0;
}

.geen-soorten .klein {
    margin-top: 8px;
    font-size: 13px;
    color: #8A7C52;
}

/* ---------- inlogscherm ----------

   LET OP - de INDELING van het inlogscherm staat niet hier maar in een
   <style>-blok bovenin Pages/Inloggen.razor, samen met het invoerveld
   met knoppen erin. Hier staat alleen wat ook op andere schermen wordt
   gebruikt. Zoek je het kruisje of het oogje: die staan daar. */

.app-leeg main {
    padding-top: 48px;
}

.onder-titel {
    color: var(--grijs);
    margin: 0 0 24px;
}

.veld {
    display: block;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--grijs);
}

.veld input {
    display: block;
    width: 100%;
    min-height: var(--raakvlak);
    margin-top: 4px;
    padding: 10px 12px;
    font-size: 16px; /* kleiner dan 16px laat iOS inzoomen bij het tikken */
    border: 1px solid var(--lijn);
    border-radius: 8px;
    background: var(--wit);
    color: var(--inkt);
}

.veld input.pincode {
    font-size: 24px;
    letter-spacing: 0.4em;
    text-align: center;
}

/* ---------- knoppen en meldingen ---------- */

.knop {
    display: inline-block;
    min-height: var(--raakvlak);
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: var(--inkt);
    color: var(--wit);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.knop-groot {
    display: block;
    width: 100%;
    margin: 8px 0;
}

.knop-weg {
    background: var(--tekort);
}

.knop:disabled {
    opacity: 0.5;
}

.tekstknop {
    background: none;
    border: none;
    color: var(--grijs);
    text-decoration: underline;
    font: inherit;
    padding: 12px 4px;
    min-height: var(--raakvlak);
    cursor: pointer;
}

.melding {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
}

.melding.fout {
    background: #F6DCD0;
    color: var(--tekort);
}

.melding.goed {
    background: #DCE8E0;
    color: var(--over);
}

.bericht {
    margin: 12px 0;
    padding: 12px;
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 8px;
    font-size: 14px;
}

.bericht-afgekeurd {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #F6DCD0;
    border-color: #E5BCA8;
    color: var(--tekort);
}

.bezig {
    color: var(--grijs);
    padding: 24px 0;
    text-align: center;
}

.verzendmelding {
    margin: 14px 0 8px;
    font-size: 14px;
    color: var(--over);
}

.verzendmelding.wacht {
    color: var(--tekort);
}

.knoptoelichting {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--grijs);
}

/* ---------- panelen en menu ---------- */

.paneel-achtergrond {
    position: fixed;
    inset: 0;
    background: rgba(22, 32, 28, 0.45);
    z-index: 20;
}

.paneel {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 640px;
    padding: 20px 16px calc(32px + env(safe-area-inset-bottom));
    background: var(--papier);
    border-radius: 16px 16px 0 0;
    z-index: 21;
}

.paneel h2 {
    font-size: 18px;
    margin: 0 0 4px;
}

.paneel .duur {
    color: var(--grijs);
    margin: 0 0 16px;
}

.paneel-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.menu {
    position: fixed;
    right: 8px;
    top: 56px;

    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    z-index: 21;
    display: flex;
    flex-direction: column;
    min-width: 216px;
    overflow: hidden;

    /* Het menu heeft er groepen bij gekregen (Uren, Overzichten, Beveiliging,
       Instellingen). Past het niet op een klein scherm, dan schuift het menu
       zelf in plaats van dat de onderste regels onbereikbaar worden.

       NA overflow: hidden, en dat is de volgorde die telt: die regel is er
       voor de ronde hoeken en zet ALLEBEI de richtingen op hidden. Zou deze
       regel ervóór staan, dan werd hij meteen weer overschreven. */
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
}

.menu button {
    background: none;
    border: none;
    border-bottom: 1px solid var(--lijn);
    padding: 14px 16px;
    min-height: var(--raakvlak);
    text-align: left;
    font: inherit;
    color: var(--inkt);
    cursor: pointer;
}

.menu button:last-child {
    border-bottom: none;
}

.menu button.weg {
    color: var(--tekort);
}

/* Een regel die naar een submenu leidt: naam links, pijltje rechts. */
.menu-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Het chevron in een menuregel. Bewust NIET .pijl: die klasse is elders
   een knop van 44px met een kader, en dan moest je hier alles weer
   terugzetten naar niets. Een eigen naam is korter en breekt niet als
   .pijl ooit verandert. */
.menupijl {
    color: var(--grijs);
    font-size: 18px;
    line-height: 1;
}

/* De terugregel bovenaan een submenu. Donker, zodat meteen te zien is dat je
   een niveau dieper zit en waar je uitkomt als je erop tikt. */
.menu-terug {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--inkt) !important;
    color: var(--wit) !important;
    font-weight: 600;
}

.menu-terug .menupijl {
    color: var(--wit);
    font-size: 20px;
    margin-right: 6px;
}

/* De laatste regel van elk menu: einde menu, dus het menu gaat dicht.
   Meer niet - afmelden en afsluiten zitten ergens anders.

   BEWUST NIET ROOD. Rood is in dit menu de kleur van 'je raakt iets kwijt'
   (Afmelden, Andere gebruiker). Een regel die alleen een paneel dichtdoet
   die kleur geven, maakt de waarschuwing van die andere twee waardeloos. */
.menu-einde {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--grijs) !important;
    font-weight: 600;
}

.menu-regeltekst {
    display: inline-flex;
    align-items: center;
}

/* Het teken achteraan een menuregel: terug bovenaan, exit onderaan. Vaste
   maat, zodat beide op exact dezelfde plek staan - dáár zit de
   herkenning in. */
.menuteken {
    display: inline-flex;
    flex: 0 0 auto;
}

.menuteken svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Melding binnen het menu, bijvoorbeeld na 'pincode uitzetten'. */
.menu-melding {
    margin: 0;
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.4;
    background: #F3F1EB;
}

.menu-melding.fout {
    background: #F6DCD0;
    color: var(--tekort);
}

.menu-melding.goed {
    background: #E4EFE7;
    color: var(--over);
}

/* WAT ER GEMAILD WORDT, ACHTER DE NAAM: "week 41", "P10 2026". Grijs en
   kleiner, zodat de naam van het overzicht het eerste is wat je leest en het
   nummer pas daarna. Zie Overzichten mailen in Layout/HoofdIndeling.razor. */
.menu-detail {
    margin-left: 6px;
    font-size: 13px;
    color: var(--grijs);
}

/* De drie keuzes onder "Loon/maand · kwartaal · jaar" bij Overzichten mailen.
   Ingesprongen, zodat te zien is dat ze bij de regel erboven horen. */
.menu button.menu-sub {
    padding-left: 36px;
    background: #FAF9F6;
}

/* Een knop in het menu die even niet kan, terwijl er gemaild of verstuurd
   wordt. Zonder dit zie je niet dat een tweede tik niets doet. */
.menu button:disabled {
    color: var(--grijs);
    cursor: default;
}

/* ---------- statusteken ----------

   DRIE STANDEN, MEER NIET: op telefoon, ingediend, verwerkt. Zie
   Models/Urenstatus.cs voor de vertaling vanuit Regelstatus, en
   Components/Statusteken.razor voor de tekens.

   De kleuren lopen mee met hoe ver het is: grijs is nog van jou, donker
   is onderweg, groen is klaar. Geen alarmkleur bij 'op telefoon' - daar
   is niets mis mee, dat is gewoon waar je aan het werk bent. Wat wél om
   aandacht vraagt (nog niet verstuurd) staat in de wachtbalk bovenaan. */

.statusteken {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.statusteken svg {
    width: 18px;
    height: 18px;
    display: block;
}

.statusteken.op-telefoon { color: var(--grijs); }
.statusteken.ingediend { color: var(--inkt); }
.statusteken.verwerkt { color: var(--over); }

.statustekst {
    font-size: 13px;
}

/* NIET MEER IN GEBRUIK sinds het statusteken in de kopregel van het dagscherm
   staat (zie Pages/Dag.razor). Blijft staan zolang je de oude indeling nog
   terug wilt kunnen halen; is dat na een tijdje niet gebeurd, weg ermee. */
.dagstatus {
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
}

/* Legenda onder de daglijst: icoon, woord, icoon, woord... */
.statuslegenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--grijs);
}

.statuslegenda .statusteken svg {
    width: 15px;
    height: 15px;
}

/* ---------- toegankelijkheid ---------- */

button:focus-visible, input:focus-visible, a:focus-visible {
    outline: 3px solid #3E6EA8;
    outline-offset: 2px;
}

/* <FocusOnNavigate> is uit App.razor gehaald, dus dit is alleen nog een
   vangnet: mocht er ooit iets anders de focus op een kop zetten, dan blijft
   die rand hier weg. Knoppen en invoervelden houden hun focusrand wel - die
   is er voor wie met een toetsenbord werkt. */
h1:focus,
h1:focus-visible,
h2:focus,
h2:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}