/* Mobiel eerst. Het brede raster verschijnt pas vanaf 900 pixels. */

:root {
    /* Wit, met structuur uit belijning in plaats van grijze vlakken.
       De interface heeft één kleur: diep petrol. Blauw en roze betekenen
       uitsluitend een team, want dat is informatie en geen versiering.
       Eerder was de interfacekleur bijna hetzelfde blauw als team Blauw, en
       dan vecht "klik hier" met "team Blauw" om dezelfde kleur. */
    /* Het nieuwe blauw uit de kopbalk is nu de interfacekleur zelf, in
       plaats van alleen de kopbalk. Blauw en roze blijven uitsluitend
       teamkleuren; --blauw (#1a56c4) is bewust een ander blauw dan dit,
       anders loopt "dit is de interface" en "dit is team Blauw" weer
       door elkaar. */
    --ink: #5b7a9c;
    --ink-donker: #46617e;  /* voor een hover op een gevuld vlak */
    --tekst: #12232a;
    --zacht: #5c7078;
    --rand: rgba(18, 35, 42, .20);          /* de gewone haarlijn */
    --lijn-sterk: rgba(18, 35, 42, .42);    /* onder een kop, of om iets af te bakenen */
    --vlak: rgba(91, 122, 156, .07);        /* alleen voor arceren, zoals een weekendkolom */
    --inktvlak: rgba(91, 122, 156, .12);    /* aangetikt of geselecteerd */
    --wit: #ffffff;

    /* Teams */
    --blauw: #1a56c4;
    --blauwbg: #e8f0fe;
    --roze: #b01858;
    --rozebg: #fce4ec;

    /* Statussen */
    --groen: #146c2e;
    --oranje: #96560a;
    --oranjebg: #fff6e0;
    --groenbg: #e6f4ea;

    --r: 14px;        /* blokken, knoppen en velden */
    --r-klein: 10px;  /* merkjes */

}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 0 84px;
    font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--tekst);
    background: var(--wit);
    -webkit-text-size-adjust: 100%;
}

main { padding: 0 16px; max-width: 1600px; margin: 0 auto; }

/* ---------------------------------------------------------------- kopbalk */
.balk {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--lijn-sterk);
    /* De kopbalk is nu gewoon de interfacekleur: er is nog maar één blauw om
       bij te houden, in plaats van een apart variabelenpaar voor de balk. */
    background: var(--ink); color: var(--wit);
}
.merk { font-weight: 650; letter-spacing: -.01em; color: var(--wit); }
.wie { font-size: 14px; color: var(--wit); opacity: .85; }

/* Met opzet fel en buiten het gewone kleurgebruik: dit hoort niet rustig te
   ogen. Een balk die verdwijnt in de rest van het scherm mist zijn doel, en
   dat doel is precies dat iemand hem niet per ongeluk over het hoofd ziet
   tot lang nadat de bèta een echte omgeving is geworden. */
.ontwikkelbalk {
    background: #a32319; color: var(--wit); text-align: center;
    padding: 10px 16px; font-size: 14px; font-weight: 600;
}
.wie a { color: var(--wit); margin-left: 8px; text-decoration: underline; }

h1 { font-size: 26px; margin: 22px 0 4px; letter-spacing: -.02em; font-weight: 650; }

/* Een klein, rond "+"-knopje naast een kop, zoals bij Personen: een nieuw
   item toevoegen hoeft geen aparte, brede knop eronder te zijn als de kop
   er zelf al staat. 34px is kleiner dan het gewone tikformaat, maar dit zit
   dicht bij andere tekst; ruimte eromheen (padding op de link) vangt dat op. */
.knop-plus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-left: 8px; vertical-align: middle;
    border: 1.5px solid var(--ink); border-radius: 999px;
    color: var(--ink); text-decoration: none; font-size: 22px; font-weight: 600;
    line-height: 1;
}
.knop-plus:hover { background: var(--inktvlak); }
h2 {
    font-size: 17px; margin: 30px 0 10px; font-weight: 650;
    padding-bottom: 8px; border-bottom: 1px solid var(--lijn-sterk);
}

/* Een onderdeel van een scherm, zoals de drie blokken van Mijn voorkeuren.
   Waar hier eerder een grijs vlak stond, doet nu de lijn onder de kop het
   werk: die zegt net zo goed waar iets begint, en laat het scherm rustig.
   Twee lagen vlak (grijs blok met witte kaarten erin) om één ding te zeggen
   was de reden dat dit niet meer van deze tijd aanvoelde. */
.sectie { margin: 30px 0; }
.sectie h2 { margin: 0 0 14px; }
.sectie > .uitleg:first-of-type,
.sectie > .uitleg.klein:first-of-type { margin: 0 0 16px; }
.uitleg { color: var(--zacht); margin: 0 0 16px; }
.uitleg.klein { font-size: 14px; }
.tussenkop {
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--zacht); font-weight: 700; margin: 20px 0 8px;
}

/* -------------------------------------------------------------- meldingen */
/* Een melding is wit met een streep in de kleur van wat hij zegt. Een gevuld
   pasteltintje over de hele breedte trok meer aandacht dan de tekst zelf. */
.melding {
    padding: 12px 16px; border-radius: var(--r); margin: 12px 0; font-size: 15px;
    background: var(--wit); border: 1px solid var(--rand);
    border-left: 4px solid var(--lijn-sterk);
}
.melding.ok { border-left-color: var(--groen); color: var(--groen); }
.melding.waarschuwing { border-left-color: var(--oranje); color: var(--oranje); }
.melding.fout { border-left-color: #a32319; color: #a32319; }
.melding .waar, .melding.ok .waar, .melding.waarschuwing .waar { color: var(--zacht); }
.melding .waar { display: block; margin-top: 4px; }

/* Opklapbare mededeling, zoals de "nog te bevestigen"-voorkeuren bovenaan
   Mijn rooster. Gebruikt het native <details>-element: geen JavaScript
   nodig, en toetsenbord- en schermlezervriendelijk vanzelf. */
.melding.opklapbaar summary {
    cursor: pointer; font-weight: 700; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.melding.opklapbaar summary::-webkit-details-marker { display: none; }
.melding.opklapbaar .chevron { transition: transform .15s ease; flex-shrink: 0; }
.melding.opklapbaar[open] .chevron { transform: rotate(180deg); }
.melding.opklapbaar .opklap-inhoud { margin-top: 12px; }
.melding.opklapbaar .lijstje li { border-bottom-color: var(--rand); }

/* ------------------------------------------------------ regels en kaarten */
.regel {
    display: flex; align-items: stretch; gap: 14px;
    border: 1px solid var(--rand); border-left-width: 4px; border-radius: var(--r);
    padding: 12px 14px; margin-bottom: 10px;
}
.regel.groen  { border-left-color: var(--groen); }
.regel.oranje { border-left-color: var(--oranje); }
.regel.grijs  { border-left-color: var(--zacht); }

.dag { min-width: 42px; text-align: center; }
.dagnaam { display: block; font-size: 12px; color: var(--zacht); }
.dagnummer { display: block; font-size: 21px; font-weight: 700; line-height: 1.1; }
.maandnaam { display: block; font-size: 11px; color: var(--zacht); margin-top: 1px; }
.wat { flex: 1; }
.waar { display: block; font-size: 14px; color: var(--zacht); }
.tijd { font-size: 14px; color: var(--zacht); white-space: nowrap; align-self: center; }

.kaart {
    border: 1px solid var(--rand); border-radius: var(--r); padding: 16px; margin: 12px 0;
    display: flex; flex-direction: column; gap: 8px;
}
.kaartje {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--rand); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px;
    color: inherit; text-decoration: none; background: var(--wit);
    transition: border-color .12s ease, background .12s ease;
}

/* Het opmaakveld (assets/rijketekst.js). De textarea zelf verdwijnt zodra
   JavaScript het overneemt, dezelfde aanpak als bij de kieslijst hierboven:
   zonder JavaScript blijft de kale textarea gewoon werken. */
html.js textarea[data-rijke-tekst] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.rijke-tekst {
    border: 1px solid var(--lijn-sterk); border-radius: var(--r); overflow: hidden;
    background: var(--wit);
}
.rijke-tekst-werkbalk {
    display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--rand);
    background: var(--vlak);
}
.rijke-tekst-knop {
    min-height: 32px; min-width: 32px; padding: 4px 8px; border: 1px solid transparent;
    border-radius: 8px; background: transparent; color: var(--tekst);
    font-weight: 700; font-size: 14px; cursor: pointer;
}
.rijke-tekst-knop:hover { background: var(--inktvlak); border-color: var(--lijn-sterk); }
.rijke-tekst-vak {
    min-height: 160px; max-height: 400px; overflow-y: auto; padding: 12px 14px;
    font: inherit; font-size: 15px; line-height: 1.5;
}
.rijke-tekst-vak:focus { outline: none; }
.rijke-tekst-vak ul, .rijke-tekst-vak ol { padding-left: 22px; margin: 8px 0; }
.rijke-tekst-vak p { margin: 0 0 10px; }
.rijke-tekst-vak a { color: var(--ink); }
.rijke-tekst-vak img { max-width: 100%; height: auto; }
a.kaartje:hover  { border-color: var(--lijn-sterk); }
a.kaartje:active { background: var(--inktvlak); }
.kaartje .groei { flex: 1; }
.kaartje strong { font-size: 16px; }
.inline { margin: 0; }

.merkje {
    display: inline-block; font-size: 12.5px; padding: 3px 9px;
    border-radius: var(--r-klein); margin-left: 6px;
    background: var(--wit); color: var(--ink);
    border: 1px solid currentColor;
}
.merkje.grijs { color: var(--zacht); }
.merkje.blauw { color: var(--blauw); }
.merkje.roze  { color: var(--roze); }
.merkje.maat  { border-style: dashed; }
.merkje.status-voorbereiding { color: var(--zacht); }
.merkje.status-gepubliceerd  { color: var(--oranje); }
.merkje.status-vastgesteld   { color: var(--groen); }
.merkje.status-lopend        { color: var(--ink); font-weight: 650; }
.merkje.status-afgerond      { color: var(--zacht); text-decoration: line-through; }
.merkje.status-ziek          { color: #a32319; }
.merkje.status-vervallen     { color: var(--zacht); text-decoration: line-through; }

.lijstje { list-style: none; padding: 0; }
.lijstje li { border-bottom: 1px solid var(--rand); padding: 10px 0; }

/* ---------------------------------------------------------- bedieningen */
label { display: block; margin-bottom: 4px; font-size: 14px; color: var(--zacht); font-weight: 500; }
input, select, button, textarea {
    font: inherit; padding: 9px 12px; border: 1px solid var(--lijn-sterk);
    border-radius: var(--r); background: var(--wit); color: var(--tekst);
    /* Compacter op verzoek, voor meer overzicht op een scherm met veel
       velden. 38px is krapper dan het aanbevolen tikformaat van 44px; op
       een telefoon met dikke vingers is dat een bewuste afruil tussen
       overzicht en gemak, geen toegankelijkheidsnorm die hier verplicht is. */
    min-height: 38px;
}
textarea { resize: vertical; }
/* Eén invoerveld en een knop ernaast, zoals "Ga naar" met "Vandaag", moeten
   precies even hoog ogen. Met alleen min-height bepaalt de browser zelf hoe
   groot bijvoorbeeld een datumveld wordt, inclusief zijn eigen
   kalenderpictogram, en dat komt niet vanzelf overeen met een knop ernaast.
   Een echte, gedeelde hoogte (in plaats van een minimum) en dezelfde
   randdikte maken ze overal gelijk, niet alleen bij "Ga naar". textarea
   blijft hierbuiten: die moet juist wél kunnen groeien.
   */
.knop:not(.klein), select,
input[type=text], input[type=date], input[type=number],
input[type=email], input[type=tel], input[type=search] {
    height: 40px; border-width: 1.5px;
}
input:focus-visible, select:focus-visible, button:focus-visible,
a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--ink); outline-offset: 2px;
}

/* Compacte velden, overal in de applicatie: een tekst-, datum- of getalveld
   hoeft niet de volle breedte van zijn kaart te vullen om leesbaar te zijn.
   Zonder dit rekte een `.kaart` (die zijn velden als flexkolom laat
   meestrekken) elk veld op tot de breedte van het scherm, en dat oogde vooral
   op een breed bureaubladscherm log. Een los `style="max-width:…"` bij
   losse velden zoals dagwaarde blijft gewoon voorrang houden. */
input[type=text], input[type=date], input[type=number],
input[type=email], input[type=tel], input[type=search] { max-width: 260px; }
select { max-width: 320px; }
/* Een enkel, opvallend veld zoals bij het inloggen: dat mag net zo breed
   worden als de knop eronder in plaats van door de algemene begrenzing
   hierboven smaller te blijven dan de rest van de kaart. */
.kaart-strak input { max-width: none; }

/* Het pijltje van de browser zelf past niet bij onze eigen kleuren en
   uitlijning. Dit vervangt alleen dat pijltje op het gesloten vakje; de
   opengeklapte lijst zelf blijft van het besturingssysteem, dat is met CSS
   niet aan te passen. Dat is precies waarom assets/kieslijst.js bestaat: waar
   dat script actief is (select[data-aangepast]) wordt deze kale select
   onzichtbaar en vervangen door een eigen knop en lijst. Zonder JavaScript
   blijft dit de zichtbare, werkende select. */
select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 8l5 5 5-5' fill='none' stroke='%236b6b70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}
select::-ms-expand { display: none; }
html.js select[data-aangepast] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* De eigen kieslijst die assets/kieslijst.js erachter zet. Dezelfde maten en
   ronding as een gewone select, zodat er geen sprong in de pagina ontstaat
   op het moment dat het script hem vervangt. */
.kieslijst { position: relative; display: inline-block; max-width: 320px; }
.kieslijst-knop {
    width: 100%; text-align: left; max-width: 320px;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 8l5 5 5-5' fill='none' stroke='%236b6b70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}
.kieslijst-knop[aria-expanded="true"] { border-color: var(--ink); }
.kieslijst-opties {
    position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
    min-width: 100%; max-width: 320px; max-height: 260px; overflow-y: auto;
    margin: 0; padding: 6px; list-style: none;
    background: var(--wit); border: 1px solid var(--lijn-sterk); border-radius: var(--r);
    box-shadow: 0 8px 24px rgba(18, 35, 42, .16);
}
.kieslijst-optie {
    padding: 9px 10px; border-radius: 8px; font-size: 15px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kieslijst-optie.actief, .kieslijst-optie:hover { background: var(--inktvlak); }
.kieslijst-optie.gekozen { color: var(--ink); font-weight: 650; }
.kieslijst-optie.uit { color: var(--zacht); cursor: default; }
.kieslijst-optie.uit.actief, .kieslijst-optie.uit:hover { background: transparent; }
.knop {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 18px; border-radius: var(--r); border: 1.5px solid var(--ink);
    background: var(--wit); color: var(--ink); text-decoration: none;
    font-weight: 600; font-size: 15px; cursor: pointer;
    transition: background .12s ease, transform .04s ease;
}
.knop:hover  { background: var(--inktvlak); }
.knop:active { transform: scale(0.98); }
.knop.primair { background: var(--ink); border-color: var(--ink); color: var(--wit); }
.knop.primair:hover { background: var(--ink-donker); border-color: var(--ink-donker); }
.knop[disabled] { opacity: .4; cursor: default; }
.knop.breed { display: flex; width: 100%; margin: 16px 0 4px; }
.knop.klein { padding: 8px 14px; min-height: 36px; font-size: 14px; }

.kiezer { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; }
.veldje { display: flex; flex-direction: column; gap: 2px; }
.dagkiezer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 2px; margin-bottom: 14px; font-weight: 600;
    border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
}
.dagknoppen { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.dagknop {
    flex: 1; min-width: 64px; text-align: center; padding: 10px 12px;
    border: 1.5px solid var(--rand); border-radius: var(--r); cursor: pointer;
    line-height: 1.3; transition: background .12s ease, border-color .12s ease;
}
.dagknop:hover { border-color: var(--lijn-sterk); }
/* Directe visuele terugkoppeling zodra je klikt, nog voordat er iets is
   opgeslagen. Zonder dit lijkt een vakje niet te reageren op een klik. */
.dagknop:has(input:checked) {
    border-color: var(--ink); background: var(--ink);
    color: var(--wit); font-weight: 650;
}
.dagknop input { position: absolute; opacity: 0; width: 0; height: 0; }
.dagknop.klein { flex: 0 0 auto; min-width: auto; padding: 8px 12px; font-size: 13px; }
/* Eén los aan/uit-blokje, zoals "Staat in het rooster". Zonder deze regel
   trekt zo'n label over de volle breedte, omdat een label sinds kort
   standaard block-breed is voor de gewone formuliervelden. */
.dagknoppen.enkel { display: inline-flex; }
.dagknoppen.enkel .dagknop { flex: 0 0 auto; text-align: left; }

/* ------------------------------------------------------- praktijk per dag */
.teamkop {
    font-weight: 650; font-size: 16px; padding: 10px 0 8px 12px;
    margin: 26px 0 2px; line-height: 1.3;
    border-bottom: 1px solid var(--lijn-sterk);
    border-left: 4px solid var(--lijn-sterk);
}
/* De teamkleur zit in de streep, niet in een gevuld vlak: even duidelijk,
   en het scherm blijft wit. */
.teamkop.blauw { border-left-color: var(--blauw); color: var(--blauw); }
.teamkop.roze  { border-left-color: var(--roze);  color: var(--roze); }
.teamkop.grijs { border-left-color: var(--lijn-sterk); color: var(--zacht); }

.dagregel { border-bottom: 1px solid var(--rand); padding: 10px 4px; }
.dagregel .soort { display: block; font-size: 16px; font-weight: 700; color: var(--tekst); }
.dagregel .naam { font-size: 15px; font-weight: 400; color: var(--zacht); }
.dagregel .detail { float: right; font-size: 14px; color: var(--zacht); }

/* Voor de roosterplanner is elke regel een ingang naar die ene dienst, om
   ziek te melden, om te wisselen of om een lege plek te vullen. Voor de rest
   blijft het gewoon een regel. */
a.dagregel.klikbaar { display: block; text-decoration: none; color: inherit; }
a.dagregel.klikbaar:active { background: var(--inktvlak); }
a.dagregel.klikbaar .soort::after { content: ' ›'; color: var(--zacht); font-weight: 400; }

/* ------------------------------------------------------------- tabbalk */
.tabbalk {
    position: fixed; left: 0; right: 0; bottom: 0; display: flex;
    background: var(--wit); border-top: 1px solid var(--lijn-sterk);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
.tabbalk a {
    flex: 1; text-align: center; text-decoration: none; color: var(--zacht); font-size: 14px;
}
.tabbalk a.actief { color: var(--ink); font-weight: 650; }

/* --------------------------------------------------------------- tabellen */
.rasterhouder { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
.raster th, .raster td { border: 1px solid var(--rand); padding: 4px; text-align: center; }
.raster thead th { background: var(--vlak); font-weight: 600; white-space: nowrap; }
.raster .rolkop { text-align: left; white-space: nowrap; padding: 6px 10px; min-width: 130px; }
.raster .weekend { background: var(--vlak); }
.raster .dagnaam { font-size: 11px; color: var(--zacht); font-weight: 400; }
/* De weeknummerrij is een eigen, lichtere kop boven de dagnamen: kleiner en
   zachter, want de dagnamen zelf zijn de belangrijkere oriëntatie. */
.raster .weekkop th { font-size: 11px; color: var(--zacht); font-weight: 500; padding: 3px 4px; }
.raster .weekkop .rolkop { background: transparent; border: none; }
.pil {
    display: inline-block; min-width: 30px; padding: 3px 6px; margin: 1px;
    border-radius: 6px; font-weight: 600; font-size: 13px;
    /* Deze pil heeft geen link en geen klik, alleen een title-tooltip met de
       volledige naam bij het hooveren. Zonder cursor:pointer laat de muis
       niets zien dat er iets te ontdekken valt, en dan mist iemand die
       tooltip juist het vaakst. */
    cursor: pointer;
}
.pil.blauw { background: var(--blauwbg); color: var(--blauw); }
.pil.roze  { background: var(--rozebg); color: var(--roze); }
.pil.grijs { background: var(--vlak); color: var(--zacht); }
/* Getallen op vaste breedte, zodat tijden en dagwaarden onder elkaar
   uitlijnen in het raster en in de standen. */
table, .tijd, .dagnummer, .detail { font-variant-numeric: tabular-nums; }

.standen th, .standen td { border-bottom: 1px solid var(--rand); padding: 10px 8px; text-align: left; }
.standen thead th { background: var(--vlak); }
.standen tbody tr.klikbare-rij { cursor: pointer; }
.standen tbody tr.klikbare-rij:hover { background: var(--inktvlak); }
.standen .rijlink { color: var(--tekst); text-decoration: none; font-weight: 600; }
.standen .rijlink:hover { color: var(--ink); text-decoration: underline; }
.pijltje { color: var(--zacht); font-size: 20px; line-height: 1; }
.standen .pijltje { text-align: right; width: 20px; }

/* Op smalle schermen is het raster onleesbaar; verwijs dan naar de dagweergave. */
@media (max-width: 899px) {
    .rasterhouder { font-size: 12px; }
    .raster .rolkop { min-width: 96px; }
}

/* Een rij knoppen als bij Aard of Bereik verdeelt de breedte gelijk over elke
   knop, ongeacht hoeveel tekst erin moet. Bij een korte tekst als "Taak" is
   dat geen probleem; bij een langere zin als "eindigt de volgende dag" werd
   de knop op een smal scherm zo krap dat elk woord op zijn eigen regel viel.
   Op een telefoon is er domweg minder breedte per knop dan op een groter
   scherm, dus daar krijgt de tekst zelf iets minder ruimte nodig: kleiner
   lettertype en iets minder opvulling, overal waar deze knoppenrij
   voorkomt. */
@media (max-width: 480px) {
    .dagknop { font-size: 12px; padding: 7px 5px; }
}

.tekort { color: var(--oranje); font-weight: 600; }

/* --------------------------------------------------------- breed scherm */
/* Op een telefoon staat de navigatie onderaan, waar je duim is. Op een
   breed scherm hoort hij bovenin; daar is een vaste balk onderaan alleen maar
   in de weg. */
@media (min-width: 900px) {
    body { padding-bottom: 24px; }
    .tabbalk {
        position: static; border-top: none; border-bottom: 1px solid var(--lijn-sterk);
        padding: 0 16px; max-width: 1600px; margin: 0 auto; gap: 4px;
        order: -1;
    }
    .tabbalk a {
        flex: 0 0 auto; padding: 14px 20px; font-size: 15px;
        border-bottom: 3px solid transparent;
    }
    .tabbalk a.actief { border-bottom-color: var(--ink); }
    body { display: flex; flex-direction: column; }
    .balk { order: -2; }
    main { order: 0; width: 100%; }
    .regel .tijd { min-width: 150px; text-align: right; }
    .kaart { max-width: 720px; }
}

/* --------------------------------------------------- afsluitbalk van een formulier */
/* Voor een formulier dat over meerdere blokken loopt, zoals een persoon met
   naam, teams, contract en rollen. Zonder deze balk hangt de Opslaan-knop
   onderaan in het niets en lijkt hij bij het laatste blok te horen. */
.formulierbalk {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--wit); border: 1.5px solid var(--ink);
    border-radius: var(--r); padding: 16px 20px; margin: 0 0 24px;
}
.formulierbalk .groei { flex: 1; min-width: 180px; }
.formulierbalk strong { display: block; }

/* ------------------------------------------------------- automatisch opslaan */
/* Waar het formulier zichzelf opslaat, heeft een Opslaan-knop niets meer te
   doen. De knop blijft wel in de pagina staan, want zonder javascript is hij
   de enige manier om iets te bewaren; hij wordt alleen verborgen zodra we
   weten dat javascript het overneemt. */
html.js form[data-opslaan] .knop-opslaan { display: none; }
/* Lukte het opslaan op de achtergrond niet, dan komt de knop terug. */
html.js form[data-opslaan].opslaan-mislukt .knop-opslaan { display: inline-flex; }

form[data-opslaan].bezig { opacity: .55; }

/* Korte terugkoppeling na het opslaan. Onderaan het scherm, want daar zit op
   een telefoon de duim en niet de aandacht van het formulier zelf. */
.opslagmelding {
    position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 8px);
    z-index: 40; max-width: calc(100% - 32px);
    padding: 10px 18px; border-radius: var(--r);
    background: var(--ink); color: var(--wit);
    border: 1.5px solid var(--ink);
    font-size: 14px; font-weight: 600; text-align: center;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.opslagmelding.zichtbaar { opacity: 1; transform: translate(-50%, 0); }
.opslagmelding.fout {
    background: var(--wit); color: var(--oranje); border-color: var(--oranje);
}
@media (min-width: 900px) {
    .opslagmelding { bottom: 24px; }
}