/* NED Personeel, dagplanning.
   Zwart als ondergrond, oranje als accent, zoals ned-personeel.nl. De koppen
   staan in hoofdletters met een oranje punt erachter; dat is hun handtekening.
   Alle lettertypen staan lokaal: de pc van NED kan zonder internet zitten.
   Montserrat staat het dichtst bij de Gotham die hun website gebruikt. */

@font-face {
  font-family: "Kop";
  src: url("/statisch/fonts/Montserrat-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Tekst";
  src: url("/statisch/fonts/PlusJakartaSans-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Cijfer";
  src: url("/statisch/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --oranje: #FF8700;
  --oranje-diep: #D97300;
  --zwart: #000000;
  --paneel: #101010;
  --paneel-op: #323232;
  --lijn: #3A3A3A;
  --wit: #FFFFFF;
  --gedempt: #A5A5A5;
  --rood: #FF5A47;
  --rond: 6px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Tekst", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--wit);
  background: var(--zwart);
}

/* ---------------------------------------------------------------- kopbalk */

header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.75rem;
  background: var(--paneel);
  border-bottom: 1px solid var(--lijn);
  position: sticky;
  top: 0;
  z-index: 5;
}
header img { height: 2rem; width: auto; display: block; }
header .plek {
  margin-left: auto;
  font-family: "Kop", sans-serif;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--gedempt);
}

/* ------------------------------------------------------------------ raster */

/* Eén kolom over de volle breedte. Een smalle strook links dwingt tot turen
   en scrollen; een werkscherm mag het hele scherm gebruiken. */
main {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2rem 1.75rem 4rem;
}
main.smal { max-width: 44rem; }

.verzoek, .uitkomst { padding: 0; }
.verzoek[hidden] { display: none; }

/* Het formulier eindigt op een oranje knop over de volle breedte. Zonder lucht
   erna plakt de volgende kop eraan vast en lijkt hij bij de knop te horen. */
.verzoek + .uitkomst { margin-top: 3.5rem; }

/* Velden naast elkaar zolang er ruimte is, in plaats van een lange kolom. */
.velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.5rem;
  align-items: start;
}
.velden .breed { grid-column: 1 / -1; }
.velden .veld { min-width: 0; }
.velden .veld label:first-child { margin-top: 1.4rem; }

/* De schuifbalk voor de vaste auto-indeling is weg; die indeling bestaat niet
   meer en de planner rekent altijd op de kortste route. */

/* --------------------------------------------------------------- typografie */

h1, h2, legend {
  font-family: "Kop", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.05rem; margin: 2.5rem 0 .9rem; }

/* De oranje punt achter een kop: het merkteken van NED. */
h1::after, h2::after { content: "."; color: var(--oranje); }

label {
  display: block;
  font-family: "Kop", sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin: 1.4rem 0 .35rem;
}
.hint { font-size: .82rem; color: var(--gedempt); margin: .4rem 0 0; }

/* --------------------------------------------------------------- invulvelden */

input, select {
  font: inherit;
  width: 100%;
  padding: .6rem .75rem;
  color: var(--wit);
  background: var(--zwart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
}
input::placeholder { color: #6E6E6E; }
input:focus, select:focus, button:focus-visible, .knop:focus-visible {
  outline: 2px solid var(--oranje);
  outline-offset: 2px;
  border-color: var(--oranje);
}
input[type="number"], input[type="time"] { font-family: "Cijfer", monospace; }
input[type="range"] { accent-color: var(--oranje); padding: 0; }

.schuif { display: flex; align-items: center; gap: .9rem; }
.schuif output {
  font-family: "Cijfer", monospace;
  font-size: .95rem;
  color: var(--oranje);
  min-width: 1.4rem;
  text-align: right;
}

fieldset { border: 0; margin: 2.5rem 0 0; padding: 0; }
legend { font-size: 1.05rem; padding: 0; margin-bottom: .7rem; }
legend::after { content: "."; color: var(--oranje); }

.starttijd {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .5rem;
  margin-bottom: .5rem;
  align-items: stretch;
}
.starttijd .weg {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 2.6rem;
  /* Het maalteken hangt in zijn eigen letterblok iets te laag; die paar pixels
     duwen we terug zodat het kruisje midden in het vakje staat. */
  padding: 0 0 3px;
  margin: 0;
  font-family: "Tekst", sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--gedempt);
  background: none;
  border: 1px solid var(--lijn);
  letter-spacing: normal;
}
.starttijd .weg:hover { color: var(--zwart); background: var(--oranje); border-color: var(--oranje); }
.starttijd:only-child .weg { visibility: hidden; }

button.klein { font-size: .72rem; padding: .5rem .9rem; margin-top: .2rem; }

.totaal-mensen {
  font-family: "Cijfer", monospace;
  font-size: .85rem;
  color: var(--gedempt);
  margin: .7rem 0 0;
}

/* Het vraagteken achter een label, met de uitleg eronder. */
.vraag {
  font-family: "Kop", sans-serif;
  font-size: .68rem;
  line-height: 1;
  padding: .15rem .4rem;
  margin: 0 0 0 .4rem;
  color: var(--gedempt);
  background: none;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  letter-spacing: normal;
  vertical-align: middle;
}
.vraag:hover, .vraag[aria-expanded="true"] {
  color: var(--zwart);
  background: var(--oranje);
  border-color: var(--oranje);
}
.uitleg {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--gedempt);
  background: var(--paneel-op);
  border-left: 3px solid var(--oranje);
  border-radius: 0 var(--rond) var(--rond) 0;
  padding: .7rem .85rem;
  margin: .5rem 0 0;
}

/* ----------------------------------------------------------- keuzelijsten */

/* Een gewone select opent een systeemvenster in wit; dat valt uit de stijl en
   ziet er op Windows anders uit dan op de Mac. Deze doen hetzelfde werk. */

.keuze, .namen { position: relative; }

.keuze-knop {
  font-family: "Tekst", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
  width: 100%;
  text-align: left;
  padding: .6rem .75rem;
  color: var(--wit);
  background: var(--zwart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.keuze-knop:hover { background: var(--zwart); border-color: var(--oranje); }
.keuze-knop::after {
  content: "";
  margin-left: auto;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--oranje);
  border-bottom: 2px solid var(--oranje);
  transform: rotate(45deg) translate(-2px, -2px);
}
.keuze.open .keuze-knop { border-color: var(--oranje); }

.keuze-lijst, .namen-lijst {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin: .3rem 0 0;
  padding: .25rem;
  list-style: none;
  background: var(--paneel-op);
  border: 1px solid var(--oranje);
  border-radius: var(--rond);
  max-height: 15rem;
  overflow-y: auto;
}
.keuze:not(.open) .keuze-lijst, .namen:not(.open) .namen-lijst { display: none; }

.keuze-lijst li, .namen-lijst li {
  padding: .5rem .6rem;
  border-radius: 4px;
  cursor: pointer;
}
/* De gekozen regel herken je aan het vinkje, niet aan een kleur: een oranje
   letter op een oranje balk leest niemand. */
.keuze-lijst li[aria-selected="true"] { font-weight: 700; }
.keuze-lijst li[aria-selected="true"]::before {
  content: "✓";
  color: var(--oranje);
  margin-right: .5rem;
}

.keuze-lijst li:hover, .namen-lijst li:hover,
.keuze-lijst li:focus, .namen-lijst li:focus {
  background: var(--oranje);
  color: var(--zwart);
  outline: none;
}
.keuze-lijst li:hover::before, .keuze-lijst li:focus::before { color: var(--zwart); }

.namen-gekozen { display: flex; flex-wrap: wrap; gap: .3rem; }
.namen-gekozen:not(:empty) { margin-bottom: .45rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  font-size: .82rem;
  line-height: 1.3;
  padding: .2rem .25rem .2rem .55rem;
  background: var(--paneel-op);
  border: 1px solid var(--lijn);
  border-radius: 4px;
  white-space: nowrap;
}
/* Lange namen mogen de rij niet uit elkaar trekken. */
.chip > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip button {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .3rem;
  margin: 0;
  color: var(--gedempt);
  background: none;
  border: 0;
  border-radius: 999px;
  letter-spacing: normal;
}
.chip button:hover { background: none; color: var(--oranje); }

/* Op welke tijd moet deze persoon beginnen? Klik door de ingevulde tijden. */
.chip-tijd {
  font-family: "Cijfer", monospace;
  font-size: .74rem;
  text-transform: none;
  letter-spacing: normal;
  padding: .1rem .4rem;
  margin: 0 0 0 .15rem;
  color: var(--gedempt);
  background: none;
  border: 1px dashed var(--gedempt);
  border-radius: 4px;
}
.chip-tijd:hover { background: var(--lijn); color: var(--wit); border-style: solid; }
.chip-tijd.aan { color: var(--zwart); background: var(--oranje); border-color: var(--oranje); }
.chip-tijd.aan:hover { background: var(--oranje-diep); border-color: var(--oranje-diep); color: var(--zwart); }

/* -------------------------------------------------------------------- knop */

button, .knop, .weg-knop {
  font-family: "Kop", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
  padding: .85rem 1.5rem;
  color: var(--zwart);
  background: var(--oranje);
  border: 2px solid var(--oranje);
  border-radius: var(--rond);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
button:hover, .knop:hover { background: var(--oranje-diep); border-color: var(--oranje-diep); }

button.stil, .knop.stil { background: transparent; color: var(--wit); border-color: var(--wit); }
button.stil:hover, .knop.stil:hover { background: var(--wit); color: var(--zwart); }

button.plan { width: 100%; margin-top: 2.2rem; font-size: .95rem; padding: 1.05rem; }

.bezig {
  font-family: "Cijfer", monospace;
  font-size: .8rem;
  color: var(--gedempt);
  opacity: 0;
  display: block;
  margin-top: .7rem;
}
.htmx-request .bezig { opacity: 1; }

/* ------------------------------------------------------------------ getallen */

.getallen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  overflow: hidden;
}
.stat { background: var(--paneel); padding: 1.1rem 1.2rem; }
.stat b {
  display: block;
  font-family: "Kop", sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  font-family: "Kop", sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin-top: .45rem;
}
.stat.accent b { color: var(--oranje); }

/* --------------------------------------------------------------------- auto */

.auto {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  margin: 1rem 0;
  overflow: hidden;
  animation: opkomen .3s ease both;
}
@keyframes opkomen {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.auto-kop {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
  background: var(--paneel-op);
}
.auto-nr {
  font-family: "Kop", sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
  background: var(--oranje);
  color: var(--zwart);
  padding: .35rem .6rem;
  border-radius: 4px;
  min-width: 2.1rem;
  text-align: center;
}
.auto-kop .chauffeur { font-weight: 700; }
.auto-kop .cijfers {
  margin-left: auto;
  font-family: "Cijfer", monospace;
  font-size: .8rem;
  color: var(--gedempt);
}

.route { list-style: none; margin: 0; padding: .7rem 0; counter-reset: stop; }

.route li.stop {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  gap: .6rem;
  align-items: baseline;
  padding: .3rem 1rem;
}
.route li.stop::before {
  counter-increment: stop;
  content: counter(stop);
  font-family: "Cijfer", monospace;
  font-size: .76rem;
  color: var(--gedempt);
  border-left: 2px solid var(--oranje);
  padding-left: .7rem;
}
.route li.rijdt .naam { font-weight: 700; }

/* Naam boven, adres eronder: op één regel lopen ze in elkaar over. */
.route .wie { display: flex; flex-direction: column; min-width: 0; }
.route .adres { font-size: .78rem; color: var(--gedempt); line-height: 1.35; }

/* De afstand hoort bij het stuk weg tussen twee stops: op een eigen regel
   ertussen, maar rechts uitgelijnd zodat de kolom met kilometers klopt. */
.route li.tussen {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: center;
  padding: .1rem 1rem;
  font-family: "Cijfer", monospace;
  font-size: .74rem;
  color: var(--gedempt);
  text-align: right;
}
.route li.tussen::before {
  content: "";        /* alleen ruimte, geen streepje: dat hoort bij een stop */
}

.route li.einde::before { content: "→"; border-left-color: transparent; color: var(--oranje); }
.route li.einde .naam { color: var(--oranje); font-weight: 700; }

.route li.stop .haal-weg {
  font-family: "Tekst", sans-serif;
  font-weight: 400;
  font-size: .74rem;
  text-transform: none;
  letter-spacing: normal;
  padding: .15rem .5rem;
  margin: 0;
  color: var(--gedempt);
  background: none;
  border: 1px solid transparent;
  opacity: 0;
}
.route li.stop:hover .haal-weg, .route li.stop .haal-weg:focus { opacity: 1; }
.route li.stop .haal-weg:hover {
  color: var(--zwart);
  background: var(--oranje);
  border-color: var(--oranje);
}
.route li.einde .haal-weg { display: none; }

/* --------------------------------------------------------------- meldingen */

.melding, .fout {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--oranje);
  border-radius: var(--rond);
  padding: .8rem 1rem;
  margin: .7rem 0;
  font-size: .92rem;
}
.fout { border-left-color: var(--rood); }
.melding.klaar { border-left-color: #4CAF50; }
.melding b, .fout b {
  font-family: "Kop", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .78rem;
  display: block;
  margin-bottom: .25rem;
}

.leeg { color: var(--gedempt); font-size: .95rem; max-width: 28rem; }

.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ------------------------------------------------- twee wegen, en de lijst */

.wegen { display: flex; gap: .5rem; margin: 1.5rem 0 1rem; }
.weg-knop {
  flex: 1;
  background: none;
  color: var(--gedempt);
  border: 1px solid var(--lijn);
  margin: 0;
  text-align: center;
}
.weg-knop:hover { background: var(--paneel-op); color: var(--wit); border-color: var(--lijn); }
.weg-knop.aan {
  background: var(--oranje);
  color: var(--zwart);
  border-color: var(--oranje);
}

.vinkje { width: auto; margin-right: .5rem; accent-color: var(--oranje); }

table.lijst { width: 100%; border-collapse: collapse; margin-top: .5rem; }
table.lijst th, table.lijst td {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--lijn);
  font-size: .92rem;
}
table.lijst th {
  font-family: "Kop", sans-serif;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gedempt);
}
table.lijst form { display: inline; }
table.lijst .klein { margin: 0; }

.afwezig-regel { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.afwezig-regel > span { flex: 1 1 9rem; }
.afwezig-regel label { margin-top: 0; }
.afwezig button { margin-top: 1rem; }

.merk {
  display: inline-block;
  font-size: .76rem;
  padding: .1rem .45rem;
  margin: 0 .25rem .2rem 0;
  color: var(--oranje);
  border: 1px solid var(--oranje);
  border-radius: 999px;
  white-space: nowrap;
}

table.lijst a { color: var(--wit); text-decoration: none; border-bottom: 1px solid var(--oranje); }
table.lijst a:hover { color: var(--oranje); }

header nav { margin-left: auto; display: flex; gap: .25rem; flex-wrap: wrap; }
header nav a {
  font-family: "Kop", sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gedempt);
  text-decoration: none;
  padding: .45rem .7rem;
  border-radius: var(--rond);
}
header nav a:hover { color: var(--zwart); background: var(--oranje); }

.regelvorm { margin: .6rem 0 0; }
.regelvorm input { flex: 1 1 12rem; }
.regelvorm button { margin: 0; }

/* Elke rij is een regel op zich; het kruisje haalt hem weer weg. */
.regelrij { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.regelrij .weg {
  display: grid;
  place-items: center;
  width: 2.6rem;
  padding: 0 0 3px;
  margin: 0;
  font-family: "Tekst", sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--gedempt);
  background: transparent;
  border: 1px solid var(--lijn);
}
.regelrij .weg:hover { color: var(--zwart); background: var(--oranje); border-color: var(--oranje); }
.regelrijen .regelrij:only-child .weg { visibility: hidden; }

.regelknoppen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.regelknoppen button { margin: 0; }

.naamkeuze { position: relative; flex: 1 1 12rem; }
.naamkeuze:not(.open) .namen-lijst { display: none; }

/* Een rij weghalen is zeldzaam werk; die knop hoeft niet te schreeuwen. */
table.lijst .stil.klein {
  font-family: "Tekst", sans-serif;
  font-weight: 400;
  font-size: .78rem;
  text-transform: none;
  letter-spacing: normal;
  padding: .25rem .5rem;
  color: var(--gedempt);
  border-color: transparent;
}
table.lijst .stil.klein:hover {
  color: var(--zwart);
  background: var(--oranje);
  border-color: var(--oranje);
}

.zoekbalk { display: flex; gap: .75rem; align-items: center; margin: .5rem 0 1rem; }
.zoekbalk input { flex: 1; }
.zoekbalk .telling {
  font-family: "Cijfer", monospace;
  font-size: .82rem;
  color: var(--gedempt);
  white-space: nowrap;
}
tr[hidden] { display: none; }

/* Kiezen in plaats van typen: bij twee of drie mogelijkheden. */
.keuzeknoppen { display: flex; flex-wrap: wrap; gap: .4rem; }
.keuzeknoppen button {
  flex: 1 1 auto;
  margin: 0;
  padding: .55rem .8rem;
  font-size: .74rem;
  color: var(--gedempt);
  background: none;
  border: 1px solid var(--lijn);
}
.keuzeknoppen button:hover { color: var(--wit); background: var(--paneel-op); border-color: var(--lijn); }
.keuzeknoppen button.aan {
  color: var(--zwart);
  background: var(--oranje);
  border-color: var(--oranje);
}
.keuzeknoppen + input[type="text"] { margin-top: .5rem; }

.route li .haal-weg {
  font-family: "Tekst", sans-serif;
  font-weight: 400;
  font-size: .74rem;
  text-transform: none;
  letter-spacing: normal;
  padding: .15rem .5rem;
  margin: 0 0 0 auto;
  color: var(--gedempt);
  background: none;
  border: 1px solid transparent;
  opacity: 0;
}
.route li:hover .haal-weg, .route li .haal-weg:focus { opacity: 1; }
.route li .haal-weg:hover { color: var(--zwart); background: var(--oranje); border-color: var(--oranje); }

.erbij {
  display: flex;
  gap: .5rem;
  padding: .6rem 1rem .9rem;
  border-top: 1px solid var(--lijn);
}
.erbij .naamkeuze { flex: 1 1 auto; }
.erbij input { font-size: .88rem; padding: .45rem .6rem; }
.erbij button { margin: 0; }

.route .etappe {
  font-family: "Cijfer", monospace;
  font-size: .78rem;
  color: var(--gedempt);
  white-space: nowrap;
}
.route li.einde::before { content: "→"; border-left-color: transparent; color: var(--oranje); }
.route li.einde .naam { color: var(--oranje); font-weight: 700; }

.auto-voet { padding: .6rem 1rem .8rem; border-top: 1px solid var(--lijn); }
.auto-voet .kopieer { margin: 0; }

/* De namenkiezers krijgen meer ruimte dan een gewoon veld: daar komen chips in. */
/* Moet werken en Kan niet staan op dezelfde kolommen als de starttijden
   erboven: twee gelijke vakken plus de smalle kolom van het kruisje. Vakken
   die net niet uitlijnen, blijven de hele dag storen. */
.namenrij {
  display: grid;
  grid-template-columns: 1fr 1fr 2.6rem;
  gap: 0 .5rem;
  align-items: start;
}
@media (max-width: 900px) { .namenrij { grid-template-columns: 1fr; } }

.adreskeuze { position: relative; }
.adreskeuze:not(.open) .namen-lijst { display: none; }

/* Elke knop die iets moet uitrekenen laat dat zien: de knop wordt bleek en
   krijgt een draaiend rondje. Zonder dat lijkt het alsof er niets gebeurt. */
button.htmx-request, .knop.htmx-request {
  opacity: .55;
  cursor: progress;
  pointer-events: none;
}
button.htmx-request::after, .knop.htmx-request::after {
  content: "";
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-left: .6em;
  vertical-align: -.05em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: draaien .7s linear infinite;
}
@keyframes draaien { to { transform: rotate(360deg); } }

.bezig.htmx-request { opacity: 1; }
form.htmx-request .bezig { opacity: 1; }

/* --------------------------------------------------------------- inloggen */
/* Eén kaart midden op een zwart vlak, met een oranje gloed die langzaam
   ademt. Geen kopbalk en geen menu: wie hier staat, is nog nergens. */

body.inlogpagina {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(255, 135, 0, .16), transparent 70%),
    radial-gradient(40rem 30rem at 90% 110%, rgba(255, 135, 0, .07), transparent 70%),
    var(--zwart);
}

.inlogvak { width: min(24rem, calc(100vw - 2.5rem)); }

.inlogkaart {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem 2rem;
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: calc(var(--rond) * 2);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .6);
  animation: inlog-op .5s cubic-bezier(.2, .7, .3, 1) both;
}

/* De kaart heeft bovenaan een oranje streep, net als de knoppen elders. */
.inlogkaart::before {
  content: "";
  height: 3px;
  margin: -2.5rem -2rem 2rem;
  border-radius: calc(var(--rond) * 2) calc(var(--rond) * 2) 0 0;
  background: linear-gradient(90deg, var(--oranje), var(--oranje-diep));
}

.inlog-logo {
  height: 1.75rem;
  width: auto;
  align-self: flex-start;
  margin-bottom: 1.75rem;
  animation: inlog-op .5s .06s cubic-bezier(.2, .7, .3, 1) both;
}

.inlogkaart h1 {
  margin: 0 0 .35rem;
  font-family: "Kop", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  animation: inlog-op .5s .12s cubic-bezier(.2, .7, .3, 1) both;
}

.inlog-uitleg {
  margin: 0 0 1.75rem;
  color: var(--gedempt);
  font-size: .95rem;
  animation: inlog-op .5s .18s cubic-bezier(.2, .7, .3, 1) both;
}

.inlog-fout {
  margin: 0 0 1.25rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--rood);
  border-radius: 0 var(--rond) var(--rond) 0;
  background: rgba(255, 90, 71, .12);
  color: var(--rood);
  font-size: .92rem;
  animation: inlog-schud .4s both;
}

.inlog-label {
  margin-bottom: .5rem;
  font-family: "Kop", sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gedempt);
  animation: inlog-op .5s .24s cubic-bezier(.2, .7, .3, 1) both;
}

.inlog-veld {
  padding: .85rem .9rem;
  font-family: "Tekst", system-ui, sans-serif;
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--wit);
  background: var(--zwart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  transition: border-color .18s, box-shadow .18s;
  animation: inlog-op .5s .24s cubic-bezier(.2, .7, .3, 1) both;
}
.inlog-veld:focus {
  outline: none;
  border-color: var(--oranje);
  box-shadow: 0 0 0 3px rgba(255, 135, 0, .18);
}

.inlog-knop {
  margin-top: 1.5rem;
  padding: .9rem 1rem;
  font-family: "Kop", sans-serif;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zwart);
  background: var(--oranje);
  border: none;
  border-radius: var(--rond);
  cursor: pointer;
  transition: transform .12s, background .18s;
  animation: inlog-op .5s .3s cubic-bezier(.2, .7, .3, 1) both;
}
.inlog-knop:hover { background: #FF9A26; }
.inlog-knop:active { transform: translateY(1px); }

.inlog-voet {
  margin: 1.5rem 0 0;
  color: var(--gedempt);
  font-size: .82rem;
  text-align: center;
  animation: inlog-op .5s .36s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes inlog-op {
  from { opacity: 0; transform: translateY(.6rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes inlog-schud {
  0%, 100% { transform: none; }
  20%      { transform: translateX(-.35rem); }
  40%      { transform: translateX(.35rem); }
  60%      { transform: translateX(-.2rem); }
  80%      { transform: translateX(.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .inlogkaart, .inlogkaart *, .inlog-fout { animation: none !important; }
}

/* De uitlogknop hoort rechts in de kopbalk, naast de plaatsnaam. */
header .uitloggen {
  margin-left: auto;
  font-family: "Kop", sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gedempt);
  text-decoration: none;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: .4rem .75rem;
  transition: color .18s, border-color .18s;
}
header .uitloggen:hover { color: var(--oranje); border-color: var(--oranje); }

/* ------------------------------------------------------- een dag bewerken */
/* Een balk boven het formulier die duidelijk maakt dat je iets aanpast wat er
   al ligt, en niet iets nieuws maakt. */

.bewerkbalk {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  margin: 0 0 1.25rem;
  padding: .9rem 1.1rem;
  background: linear-gradient(90deg, rgba(255, 135, 0, .16), rgba(255, 135, 0, .04));
  border-left: 4px solid var(--oranje);
  border-radius: 0 var(--rond) var(--rond) 0;
}
.bewerkbalk b {
  display: block;
  font-family: "Kop", sans-serif;
  letter-spacing: .02em;
}
.bewerkbalk span { color: var(--gedempt); font-size: .92rem; }
.bewerkbalk a { margin-left: auto; white-space: nowrap; }

td.acties { display: flex; gap: .4rem; align-items: center; }
td.acties form { margin: 0; }
a.bewerk {
  display: inline-block;
  text-decoration: none;
  color: var(--oranje);
  border-color: var(--oranje);
}
a.bewerk:hover { background: rgba(255, 135, 0, .12); }

/* ------------------------------------------------ wegwijzer door de app */
/* Drie dingen die iemand die dit voor het eerst opent nodig heeft: waar sta
   ik, wat doe ik hier, en wat is de volgende stap. */

header nav { align-items: center; }

/* Het scherm waar je staat, licht op als een tab die voorstaat. */
header nav a.hier {
  color: var(--zwart);
  background: var(--oranje);
}

.wegwijzer {
  padding: .85rem 1.75rem;
  background: var(--paneel);
  border-bottom: 1px solid var(--lijn);
  font-size: .95rem;
  color: var(--gedempt);
}
.wegwijzer b {
  color: var(--wit);
  font-family: "Kop", sans-serif;
  letter-spacing: .02em;
}
.wegwijzer .daarna {
  display: inline-block;
  margin-left: .5rem;
  padding-left: .75rem;
  border-left: 2px solid var(--oranje);
  color: var(--wit);
}
.wegwijzer .daarna a { color: var(--oranje); }

/* --------------------------------------------------- wat doe je nu, stappen */

.watnu {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--paneel-op);
  border-radius: calc(var(--rond) * 1.5);
}
.watnu h2 { margin-top: 0; }
.watnu-stappen { list-style: none; margin: 0; padding: 0; }
.watnu-stappen > li {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--lijn);
}
.watnu-stappen > li:first-of-type { border-top: none; padding-top: .25rem; }
.watnu-nr {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--oranje);
  color: var(--zwart);
  font-family: "Kop", sans-serif;
  font-weight: 800;
  font-size: .9rem;
}
.watnu-tekst { flex: 1 1 auto; }
.watnu-tekst b {
  display: block;
  font-family: "Kop", sans-serif;
  font-size: 1.02rem;
  letter-spacing: .02em;
}
.watnu-tekst p { margin: .25rem 0 .8rem; color: var(--gedempt); font-size: .93rem; }
.watnu-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.watnu-knoppen button, .watnu-knoppen .knop { margin: 0; }
button.groot {
  padding: .8rem 2rem;
  font-size: .95rem;
}
.watnu-anders {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--lijn);
  color: var(--gedempt);
  font-size: .9rem;
}
.watnu-anders button { margin: 0 .25rem; vertical-align: baseline; }
.watnu-tip { display: block; margin-top: .5rem; }

/* ---------------------------------------------------- klaar om te plannen */

.klaarlijst { list-style: none; margin: .5rem 0 0; padding: 0; }
.klaarlijst li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .4rem 0;
}
.klaarlijst .vink { color: #5FD08A; font-weight: 700; }
.klaarlijst .kruis { color: var(--oranje); font-weight: 700; }
.klaarlijst .nogniet { color: var(--gedempt); }
.klaarlijst a { color: var(--oranje); }

.klaarvak {
  grid-column: 1 / -1;
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.3rem 1.2rem;
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--oranje);
  border-radius: 0 var(--rond) var(--rond) 0;
}
.klaarvak h2 { margin: 0 0 .3rem; font-size: 1rem; }
.klaarvak .hint { margin: 0 0 .5rem; }

/* --------------------------------------------------- inleiding en keuzes */

/* Een inleiding boven een scherm loopt over de volle breedte. De smalle .leeg
   is bedoeld voor een kort zinnetje naast een formulier, niet voor een alinea
   die het hele scherm uitlegt. */
.intro {
  max-width: none;
  margin: .25rem 0 0;
  color: var(--gedempt);
  font-size: 1rem;
}

/* Twee wegen naar hetzelfde doel, naast elkaar en allebei even zichtbaar.
   Een keuze die in kleine letters onder een formulier staat, ziet niemand. */
.keuzepaar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0 0;
  align-items: start;
}
.keuzekaart {
  padding: 1.25rem 1.4rem 1.5rem;
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: calc(var(--rond) * 1.5);
}
.keuzekaart h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.keuzekaart > p { margin: 0; color: var(--gedempt); font-size: .93rem; }
.keuzekaart .knop { display: inline-block; margin-top: 1.1rem; }
.keuzekaart form { margin-top: 1.1rem; }
.keuzekaart form button { margin-bottom: 0; }

/* ------------------------------------------------------- een bestand kiezen */
/* Een kaal bestandsveld ziet er op elk systeem anders uit en valt uit de toon.
   De knop krijgt dezelfde vorm als de andere knoppen. */

input[type="file"] {
  width: 100%;
  padding: .7rem .9rem;
  color: var(--gedempt);
  background: var(--zwart);
  border: 1px dashed var(--lijn);
  border-radius: var(--rond);
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
input[type="file"]:hover { border-color: var(--oranje); color: var(--wit); }
input[type="file"]::file-selector-button {
  margin-right: .9rem;
  padding: .45rem .9rem;
  font-family: "Kop", sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zwart);
  background: var(--oranje);
  border: none;
  border-radius: var(--rond);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #FF9A26; }