/* Boek — de mobiele omgeving. Titelbalk boven, scherm eronder. Laadt na
   basis.css en gebruikt dezelfde kleuren; alles staat onder .boek, zodat de
   desktopschermen niets van dit blad merken. */

.boek {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
}

/* Boek bepaalt de tussenruimte met .boek-veld en .boek-rij; de marge die
   basis.css onder elk invoerveld zet, hoort daar niet bij. */
.boek input,
.boek select,
.boek textarea { margin-bottom: 0; }
/* Omdat die marge hier wegvalt, staat een knop onder een formulier zonder eigen
   marge stijf tegen het laatste invoerveld aan. */
.boek .form > .btn { margin-top: .9rem; }

/* ---------- titelbalk ---------- */
.boek-titelbalk {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: calc(.5rem + env(safe-area-inset-top)) .9rem .55rem;
  background: linear-gradient(120deg, #14213d, #1d4ed8);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
}
.boek-titeltekst { min-width: 0; flex: 1; }
/* Drie plaatsen naast elkaar: de naam links, de gebruiker in het midden, de
   versie rechts. De twee zijkolommen zijn even breed (1fr), want anders staat het
   midden niet in het midden van de regel maar tussen de twee buren in. De
   gebruiker kapt af met een beletselteken en duwt de andere twee dus niet weg. */
.boek-meta {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: baseline;
  gap: .5rem;
  font-size: .7rem;
  letter-spacing: .3px;
  color: #b9cbf5;
}
/* Regel 1: de naam van de app, daarachter de versie en wie er ingelogd is.
   De naam staat in dezelfde letter en hoogte als het call sign eronder, zodat de
   twee regels één kop vormen; de versie en de naam blijven ondergeschikt. */
.boek-merknaam {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .2px;
}
/* Het uitroepteken in het rood, zoals in het beeldmerk. Niet --danger: dat rood
   is te donker om op de blauwe balk nog rood te heten. */
.boek-uitroep { color: #ef4444; }
.boek-versie { justify-self: end; }
.boek-gebruiker {
  justify-self: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boek-titel {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .2px;
}

/* De terugknop links en de uitlogknop rechts zijn even groot en zien er
   hetzelfde uit: het zijn de twee vaste plaatsen van de titelbalk, en alleen de
   richting verschilt. De terugknop staat er niet altijd — op het eerste scherm
   is er niets boven — en dan schuift de tekst gewoon naar links op.
   Niet .boek-terug: zo heten de tekstlinkjes ín een scherm al. */
.boek-terugknop,
.boek-uitloggen button {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
}
.boek-terugknop:active,
.boek-uitloggen button:active { background: rgba(255, 255, 255, .28); }
.boek-terugknop svg { width: 1.25rem; height: 1.25rem; }
.boek-uitloggen { margin: 0; flex: none; }
.boek-uitloggen button {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
}
.boek-uitloggen button:active { background: rgba(255, 255, 255, .28); }
.boek-uitloggen svg { width: 1.25rem; height: 1.25rem; }

/* ---------- scherm ---------- */
.boek-scherm {
  padding: 1rem .9rem 1.5rem;
  min-width: 0;
}
.boek-scherm .messages { list-style: none; margin: 0 0 .9rem; padding: 0; }
.boek-kop { font-size: 1rem; margin: 0 0 .75rem; }
/* Een tweede kop op hetzelfde scherm krijgt lucht boven zich, anders plakt hij
   tegen de lijst erboven. */
.boek-kop-vervolg { margin-top: 1.5rem; }
.boek-hint { color: var(--ink-soft); font-size: .8rem; margin: .9rem 0 0; }

.boek-welkom {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.boek-welkom h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
.boek-welkomtekst { color: var(--ink-soft); margin: 0 0 1.25rem; }
.boek-actie {
  display: block;
  text-align: center;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.boek-actie:active { background: var(--primary-dark); }

/* ---------- keuzelijst (hoofdmenu) ---------- */
.boek-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.boek-regel {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}
.boek-regel:active { border-color: var(--primary); }
.boek-regel-actief { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(29, 78, 216, .18); }
/* Een geannuleerde of verstreken regel blijft leesbaar, maar treedt terug. */
.boek-regel-vervallen { opacity: .6; }
/* Een regel die de app uit gaat, naar het beheer: extra lucht erboven zet hem los
   van de schermen van Boek zelf. */
.boek-regel-uit { margin-top: 1.4rem; }
.boek-stip { width: .85rem; height: .85rem; border-radius: 50%; flex: none; }
.boek-regel-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.boek-regel-tekst strong { font-size: 1rem; }
.boek-regel-tekst small { color: var(--ink-soft); font-size: .8rem; }
.boek-pijl { color: var(--ink-soft); font-size: 1.4rem; line-height: 1; }

/* ---------- kalender ---------- */
.boek-maandbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}
.boek-maand { font-size: 1.05rem; margin: 0; }
/* Alleen de eerste letter groot: 'augustus 2026' en 'vr 28 augustus 2026'. */
.boek-maand::first-letter { text-transform: uppercase; }
.boek-maandknop {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
}
.boek-maandknop:active { background: #e8effd; }

.boek-kalender {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .5rem;
  box-shadow: var(--shadow);
}
.boek-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.boek-weeknamen { margin-bottom: 3px; }
.boek-weeknaam {
  text-align: center;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-soft);
  padding: .2rem 0;
}
.boek-dag {
  min-height: 3.1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .2rem .25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}
.boek-dagnummer { font-size: .85rem; font-weight: 600; }
.boek-dag-buiten { opacity: .35; }
.boek-dag-verleden { background: #f7f8fc; }
/* Vandaag krijgt een eigen kleur, duidelijk anders dan het blauw van de knoppen. */
.boek-dag-vandaag {
  background: #fff3d4;
  border-color: #d97706;
  box-shadow: inset 0 0 0 1px #d97706;
}
.boek-dag-vandaag .boek-dagnummer { color: #92400e; }
.boek-dag-vandaag.boek-dag-verleden { background: #fff3d4; }
.boek-bezetting {
  display: block;
  width: 80%;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.boek-bezetting > span { display: block; height: 100%; }
.boek-aantal { font-size: .65rem; color: var(--ink-soft); }

/* Een knop die er wel staat maar niet kan: de maandpijl aan het eind van de
   reeks, een actie die nu niet mag. Hij blijft staan, want een plaats die
   verspringt is lastiger dan een knop die grijs is. */
.boek-knop-uit { color: var(--line); }

/* De pictogrammen zijn lijntekeningen; ze nemen de kleur van de knop over. */
.boek svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Het inlogscherm draait op dezelfde titelbalk, maar zonder knoppen. */
.boek .card-narrow { margin: 0; max-width: none; }
.boek .btn { width: 100%; padding: .8rem 1rem; }

/* ---------- dagindeling en reserveren ---------- */
.boek-terug {
  display: inline-block;
  margin: 0 0 .6rem;
  color: var(--primary);
  font-size: .85rem;
  text-decoration: none;
}
.boek-kop-tussen { margin-top: 1.5rem; }
.boek-dag[href] { color: inherit; text-decoration: none; }
.boek-dag[href]:active { background: #e8effd; }

.boek-blokken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.boek-blokken li { display: flex; }
.boek-blok {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1;
  min-width: 0;
  padding: .45rem .7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.boek-bloktijd {
  flex: none;
  width: 6.4rem;
  font-variant-numeric: tabular-nums;
  font-size: .85rem;
  color: var(--ink-soft);
}
/* Naam en toelichting staan achter elkaar op één regel, zodat het blok laag blijft. */
.boek-blokinhoud {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
/* Bij een reservering staat de naam boven en de toelichting eronder, zodat de
   lichtkrant de volle breedte van de regel heeft. */
.boek-blokinhoud-gestapeld { flex-direction: column; align-items: stretch; gap: 0; }
.boek-blokinhoud-gestapeld > strong,
.boek-blokinhoud-gestapeld > small { display: block; width: 100%; }
.boek-blokinhoud strong { font-size: .95rem; }
.boek-blokinhoud small { color: var(--ink-soft); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }

/* Een scherm dat in zijn geheel past: de blokken verdelen de vrije hoogte.
   Zijn er zoveel blokken dat ze te laag worden, dan scrolt alleen de lijst;
   de titelbalk blijft staan. */
.boek-vast { height: 100dvh; }
.boek-vast .boek-scherm {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: .75rem;
}
.boek-vast .boek-blokken { flex: 1; min-height: 0; overflow-y: auto; }
/* Regels houden hun eigen hoogte: het zijn er nu een paar per dag, geen 10. */
.boek-vast .boek-blokken li { min-height: 3rem; }

/* De kalender vult de vrije hoogte: de weekrijen verdelen wat er over is. */
.boek-vast .boek-kalender { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.boek-vast .boek-kalender .boek-week { flex: 1 1 0; min-height: 0; }
.boek-vast .boek-kalender .boek-weeknamen { flex: none; }
.boek-vast .boek-dag { min-height: 2.2rem; justify-content: flex-start; }
.boek-blok-vrij { border-left-color: var(--ok); }
.boek-blok-vrij:active { background: #eefaf1; }
.boek-blok-bezet { border-left-color: var(--ink-soft); background: #f7f8fc; }
.boek-blok-mijn { border-left-color: var(--primary); background: #eef3fe; }
.boek-blok-verstreken { opacity: .55; }

.boek-annuleer {
  flex: none;
  padding: .5rem .8rem;
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: transparent;
  color: var(--danger);
  font-size: .85rem;
  cursor: pointer;
}
.boek-annuleer:active { background: #fdeaea; }

.boek-formulier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}
/* De datum van de boeking; het toestel staat al in de titelbalk. */
.boek-formulierdag { margin: 0 0 1rem; color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.boek-tijden { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.boek-veld { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .9rem; }
.boek-veld label { font-size: .85rem; font-weight: 600; }
.boek-veld select,
.boek-veld input[type="text"],
.boek-veld input[type="date"],
.boek-veld textarea {
  width: 100%;
  padding: .7rem .6rem;
  font: inherit;
  font-size: 1rem;   /* onder 1rem zoomt iOS het scherm in bij het invullen */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.boek-veld-vink { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .5rem; }
.boek-veld-vink input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; }
.boek-veld-vink label { font-weight: 600; }
.boek-help { width: 100%; color: var(--ink-soft); font-size: .78rem; }
.boek-fout { color: var(--danger); font-size: .8rem; }
/* Een waarschuwing in de onderregel van een menuregel — een verlopen medical.
   `.boek-regel-tekst small` is specifieker dan `.boek-fout` en zou het grijs
   anders gewoon terugzetten. */
.boek-regel-tekst small.boek-fout { color: var(--danger); }
.boek-actie-gevaar { background: var(--danger); }
.boek-actie-tweede {
  margin-top: .5rem;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--line);
}
button.boek-actie { width: 100%; border: 0; font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- reserveringsdetail ---------- */
.boek-kaart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.boek-gegevens { margin: 0; display: grid; grid-template-columns: 8rem 1fr; gap: .45rem .75rem; }
.boek-gegevens dt { color: var(--ink-soft); font-size: .85rem; }
.boek-gegevens dd { margin: 0; font-size: .9rem; }

/* Terug naar vandaag; staat achter de maand- of dagtekst en alleen als je
   naar een andere maand of dag bent gebladerd. */
.boek-maandmidden {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex: 1;
  min-width: 0;
}
/* Alleen het pictogram, net als de knoppen onderin. */
.boek-vandaag {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  padding: 0;
}
.boek-vandaag svg { width: 1.25rem; height: 1.25rem; }

/* Sta je op de huidige maand of op vandaag, dan licht de kop op in dezelfde
   kleur als de dag van vandaag in de kalender. */
.boek-maand-nu {
  color: #92400e;
  background: #fff3d4;
  border: 1px solid #f0c674;
  border-radius: 999px;
  padding: .1rem .8rem;
}

/* ---------- lichtkrant ---------- */
.boek-lichtkrant { overflow: hidden; white-space: nowrap; }
.boek-lichtkrant > span { display: inline-block; will-change: transform; }
.boek-lichtkrant-loopt > span {
  animation: boek-schuif var(--duur, 6s) ease-in-out infinite alternate;
}
/* Even stilstaan aan het begin en aan het eind, zodat je kunt meelezen. */
@keyframes boek-schuif {
  0%, 15% { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--eind, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .boek-lichtkrant-loopt > span { animation: none; }
  .boek-lichtkrant { text-overflow: ellipsis; }
}

/* ---------- logboek ---------- */
/* De onderhoudsstand staat achter de kop; de overige totalen staan op de desktop. */
.boek-onderhoud {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* De onderhoudstermijn is verstreken. */
.boek-onderhoud-rood { border-color: var(--danger); background: #fdeaea; color: var(--danger); font-weight: 600; }

.boek-loglijst { margin-top: .9rem; }
.boek-logregel { align-items: center; }
.boek-logregel .boek-regel-tekst strong { font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Datum en route links, de zuivere vliegtijd achteraan op dezelfde regel. */
.boek-logkop { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.boek-logtijd {
  flex: none;
  white-space: nowrap;
  font-style: normal;
  font-weight: 600;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--primary-dark);
}

.boek-blader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .9rem;
}
.boek-blader .boek-hint { margin: 0; font-variant-numeric: tabular-nums; }

/* Twee tijdvelden naast elkaar met de uitkomst erachter, zonder eigen label:
   motor aan/motor uit geeft de vliegtijd, take-off/landing de zuivere vliegtijd. */
.boek-tijdrij { display: flex; align-items: flex-end; gap: .35rem; }
.boek-tijdrij .boek-veld { flex: 1; min-width: 0; margin-bottom: .3rem; }
.boek-tijdrij .boek-veld label { font-size: .8rem; }
.boek-tijdrij input[type="time"] { padding: .5rem .3rem; }
.boek-uitkomst {
  flex: none;
  width: 3.6rem;
  /* Zelfde marge, padding en rand als een tijdveld, zodat de uitkomst precies
     naast het veld staat in plaats van eronder. */
  margin-bottom: .3rem;
  padding: .7rem 0;
  border: 1px solid transparent;
  line-height: 1.6rem;
  text-align: center;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Vier tijdvelden vullen het raster met twee kolommen vanzelf in twee rijen. */
.boek-tijden .boek-veld { margin-bottom: .9rem; }
.boek-veld input[type="time"],
.boek-veld input[type="number"] {
  width: 100%;
  padding: .7rem .6rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Label links, veld rechts: zo past een logboekregel op één regel per gegeven. */
.boek-rij { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.boek-rij > label { flex: none; width: 4.2rem; font-size: .85rem; font-weight: 600; }
.boek-invoer { flex: 1; display: flex; gap: .35rem; min-width: 0; }
.boek-invoer input,
.boek-invoer select {
  flex: 1;
  min-width: 0;
  padding: .5rem .45rem;
  font: inherit;
  font-size: 1rem;   /* onder 1rem zoomt iOS het scherm in bij het invullen */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* De datum en het aantal landingen hebben maar weinig ruimte nodig. */
.boek-datum { flex: none; width: 11rem; }
.boek-landingen { flex: none; width: 6rem; }
/* De functie staat achter de naam en toont alleen de code (PIC, DUAL, ...);
   daar hoeven maar een paar letters in, de naam ernaast krijgt de rest. */
.boek-invoer select[name="function"],
.boek-invoer select[name="function_2"] { flex: none; width: 4.8rem; padding-right: .2rem; }

/* De vraag naar de naam van een nog naamloos vliegveld. */
.boek-naamvraag[hidden] { display: none; }
.boek-naamvraag > label { width: 6.5rem; }
.boek-naamvraag b { font-variant-numeric: tabular-nums; }
/* Een ICAO-code staat altijd in hoofdletters. */
.boek [data-icao] { text-transform: uppercase; }

/* Opslaan en terug staan naast elkaar en dragen alleen een pictogram. */
/* De paraaf links, de knoppen rechts: eerst terug, uiterst rechts opslaan. */
.boek-knoprij { display: flex; align-items: flex-end; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }
.boek-paraaf { margin-right: auto; margin-bottom: .3rem; }
.boek-paraaflabel { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .25rem; }
.boek-paraafvak {
  display: grid;
  place-items: center;
  width: 8.5rem;
  height: 3.2rem;
  padding: .2rem;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.boek-paraafvak img { max-width: 100%; max-height: 100%; }

/* Tekenvenster voor de paraaf. */
.boek-venster {
  width: min(92vw, 30rem);
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.boek-venster::backdrop { background: rgba(20, 33, 61, .45); }
.boek-paraafuitleg { margin: 0 0 .6rem; color: var(--ink-soft); font-size: .85rem; }
#paraaf-doek {
  width: 100%;
  height: 11rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  touch-action: none;   /* vegen tekent, het scherm scrolt niet mee */
}
/* Wint van de volle breedte die een knop in een formulier normaal krijgt. */
.boek-knoprij .boek-actie-icoon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  margin: 0;
}
.boek-actie-icoon svg { width: 1.4rem; height: 1.4rem; }

/* Eigen zoeklijst onder een invoerveld: waarde met omschrijving, meefilterend
   tijdens het typen. Beide dragers krijgen een positioneringspunt, anders hangt
   de lijst aan een voorouder verderop in de pagina. */
.boek-veld,
.boek-invoer { position: relative; }
.boek-suggesties {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 13rem;
  max-width: calc(100vw - 2rem);
  max-height: 12rem;
  overflow-y: auto;
  margin: .2rem 0 0;
  padding: .2rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.boek-suggesties-rechts { left: auto; right: 0; }
.boek-suggesties[hidden] { display: none; }
.boek-suggesties li {
  padding: .5rem .6rem;
  border-radius: 8px;
  font-size: .9rem;
  white-space: nowrap;
  cursor: pointer;
}
.boek-suggesties li:hover { background: #e8effd; }
.boek-suggesties b { font-variant-numeric: tabular-nums; }
/* Geen treffer: dan is het een nieuw veld en vraagt het scherm om de naam. */
.boek-suggesties .boek-nieuw {
  color: var(--ink-soft);
  font-size: .78rem;
  white-space: normal;
  cursor: default;
}
.boek-suggesties .boek-nieuw:hover { background: none; }

/* Naar links vegen legt de verwijderknop bloot; alleen bij een eigen, verse vlucht. */
.boek-swipe { position: relative; overflow: hidden; border-radius: var(--radius); }
.boek-swipe-actie {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4.6rem;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--danger);
  border-radius: var(--radius);
}
.boek-swipe-actie button {
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.boek-swipe-actie svg { width: 1.4rem; height: 1.4rem; }
.boek-swipe-inhoud {
  position: relative;
  background: var(--bg);
  /* Zelf geen ronde hoeken: anders piept de rode knop erachter door de hoek. */
  transition: transform .18s ease-out;
  touch-action: pan-y;
}
.boek-swipe-open .boek-swipe-inhoud { transform: translateX(-4.6rem); }

/* Vertrek, aankomst en het aantal landingen op één regel. */
.boek-veldrij { display: flex; align-items: flex-end; gap: .4rem; }
.boek-veldrij .boek-veld { flex: 1; min-width: 0; margin-bottom: .3rem; }
.boek-veldrij .boek-veld label { font-size: .8rem; }
.boek-veldrij .boek-veld input { width: 100%; padding: .7rem .4rem; }
.boek-veld-smal { flex: none; width: 5.2rem; }
/* Een aantal lees je van rechts af. */
.boek-veld-smal input { text-align: right; }

/* Geen op-/neerknopjes bij het aantal landingen; je typt het getal gewoon. */
.boek input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.boek input[type="number"]::-webkit-outer-spin-button,
.boek input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- pilotenlogboek ---------- */
/* De vliegtijd per kolom, zoals boven een papieren logboek. */
.boek-kolommen { display: flex; gap: .3rem; margin-bottom: .6rem; }
.boek-kolom {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .35rem .2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.boek-kolom b { font-size: .62rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .5px; }
.boek-kolom-totaal { border-color: var(--primary); color: var(--primary-dark); }

/* Een dag waarop gevlogen is, met het toestel en met wie. */
.boek-dag-gevlogen { border-color: var(--primary); background: #eef3fe; }
.boek-vlucht { font-size: .6rem; font-weight: 600; color: var(--primary-dark); line-height: 1.1; }
.boek-metwie {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .58rem;
  color: var(--ink-soft);
  line-height: 1.1;
}

/* De vier kolommen van het pilotenlogboek naast elkaar. */
.boek-kolomkop { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.boek-kolomrij { display: flex; gap: .3rem; }
.boek-kolomrij .boek-veld { flex: 1; min-width: 0; margin-bottom: .5rem; }
/* De kolomnaam is een knop: aantikken zet de vliegtijd erin, nog een keer wist hem. */
.boek-kolomknop {
  width: 100%;
  padding: .65rem 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
}
.boek-kolomknop[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
/* Het vinkje zelf staat verborgen; de knop erboven bedient het. */
.boek-kolomrij input[type="checkbox"] { display: none; }

/* Call sign en type staan achter elkaar op een regel; het type volgt de keuze. */
/* Een call sign is nagenoeg altijd zes of zeven tekens, en staat in hoofdletters. */
.boek-invoer input[name="call_sign"] { flex: none; width: 5.4rem; text-transform: uppercase; }

/* Het type hoort bij het call sign; overschrijven gaat via een venster. */
.boek-invoer input[name="aircraft_type"][readonly] { background: #f7f8fc; color: var(--ink-soft); }
.boek-vensterknoppen { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; }

/* Kop boven de kalender; de kalender eronder krijgt wat hij overhoudt en blijft
   in beeld passen, ook op een kort scherm. */
/* Kop met de naam van de piloot; op een formulier staat er nog een kop onder. */
.boek-kop-smal { font-size: .95rem; margin-bottom: .2rem; }
.boek-kop-smal + .boek-kop { margin-bottom: .45rem; }
.boek-vast .boek-maandbalk { margin-bottom: .5rem; }
.boek-vast .boek-dag { min-height: 1.8rem; }
.boek-vast .boek-weeknaam { padding: 0; font-size: .65rem; }
.boek-vast .boek-kalender { padding: .35rem; }

/* Een regel in het ADS-B-logboek die een venster opent. */
.boek-aantikbaar { cursor: pointer; }
.boek-aantikbaar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.boek-vensterkop { margin: 0 0 .8rem; }
/* Dezelfde letters als de regel in de lijst waar dit venster bij hoort. */
.boek-vensterkop strong { font-size: .85rem; font-variant-numeric: tabular-nums; }
/* Alle knoppen in het venster zien er hetzelfde uit; alleen de ruimte ertussen. */
.boek-venster .boek-actie + .boek-actie { margin-top: .5rem; }
/* Een actieknop die niet kan; hij blijft staan zodat de plek herkenbaar blijft. */
.boek-actie.boek-knop-uit { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }

/* ---------- landkaart met het spoor van een vlucht ---------- */
/* Niet .boek-kaart: dat is in Boek al de naam van een kaartje op het scherm. */
/* Vult de hoogte die onder de titelbalk overblijft. */
.boek-vast .boek-spoorkaart { flex: 1; min-height: 12rem; }
.boek-spoorkaart {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
/* Een vliegveld uit de database: een stip met de ICAO-code ernaast. De code
   krijgt een lichte rand, anders leest hij niet over satellietbeeld. */
.boek-veldmerk { pointer-events: auto; }
.boek-veldstip {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--primary);
  box-shadow: 0 1px 3px rgba(20, 33, 61, .5);
}
.boek-veldcode {
  position: absolute;
  left: 14px;
  top: -3px;
  white-space: nowrap;
  font-size: .7rem;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

/* De stip voor vertrek en aankomst; de kleur komt uit het sjabloon. */
.boek-kaartstip span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(20, 33, 61, .5);
}
.boek-vast .boek-terug { flex: none; }

/* ---------- kaart of log: twee tabbladen boven het spoor ---------- */
/* De knop van het tabblad dat je ziet staat uit; dat is meteen de aanwijzing
   waar je bent, zonder er een apart kleurtje voor te verzinnen. */
.boek-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: .5rem;
  flex: none;
}
.boek-tab {
  flex: 1;
  padding: .5rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--primary);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.boek-tab:disabled {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  cursor: default;
}

.boek-spoorlog {
  min-height: 0;
  /* Het paneel is zelf de schuiflade: dan blijft de tabelkop eraan plakken, en
     schuift een te brede tabel binnen het paneel in plaats van de hele pagina. */
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: .6rem;
}
.boek-vast .boek-spoorlog { flex: 1; }
/* Een verborgen paneel mag geen hoogte meer opeisen in de kolom. */
.boek-spoorkaart[hidden], .boek-spoorlog[hidden] { display: none; }

.boek-grafiek-svg { display: block; width: 100%; height: auto; }
/* De grafiek is geen lijntekening. Zonder deze regel erft de tekst de omlijning
   van de pictogrammen hierboven, en dan staat er overal een dikke rand in de
   kleur van de tekst omheen: vet, en niet in de kleur van de eigen lijn. */
.boek .boek-grafiek-svg text { stroke: none; font-weight: 400; }

.boek-grafiekknoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin: .4rem 0 .7rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.boek-lijnknop {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.boek-lijnknop input { margin: 0; }
.boek-lijnkleur { width: .9rem; height: .2rem; border-radius: 2px; }

.boek-spoortabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.boek-spoortabel th, .boek-spoortabel td {
  padding: .3rem .45rem;
  text-align: right;
  border-bottom: 1px solid var(--line);
}
.boek-spoortabel th:first-child, .boek-spoortabel td:first-child { text-align: left; }
.boek-spoortabel th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 600;
  white-space: normal;
  vertical-align: bottom;
}
/* De eenheid onder de kolomnaam, kleiner en lichter. */
.boek-spoortabel th span {
  display: block;
  font-weight: 400;
  font-size: .65rem;
  opacity: .75;
}
.boek-spoortabel tr:last-child td { border-bottom: 0; }

/* ---------- meldingen ---------- */
/* De regel onder de vloot in het hoofdmenu: dezelfde vorm als een toestel, maar
   zonder gekleurde stip, want er hoort geen kist bij. */
.boek-regel-bij { margin-top: .6rem; }

.boek-meldingpaneel {
  margin: 1rem 0 1.25rem;
  padding: .9rem 1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.boek-meldingpaneel .boek-kop { margin-bottom: .35rem; }
.boek-meldingpaneel .boek-actie { margin-top: .6rem; }
.boek-meldingpaneel .boek-hint { margin-top: .75rem; }
/* .boek-actie zet display: block, en dat wint van het hidden-attribuut zelf.
   De knoppen voor uitzetten en proefmelden staan verborgen tot er iets aanstaat. */
.boek-meldingpaneel [hidden] { display: none; }
/* Een knop die niets kan doen hoort er ook niet uit te zien alsof hij dat wel kan;
   de tekst erboven zegt waarom hij uitstaat. */
.boek-meldingpaneel .boek-actie:disabled { opacity: .45; }

/* De stand van dit apparaat: een bolletje ervoor zegt in één oogopslag of het
   aanstaat, zodat de tekst niet gelezen hoeft te worden om het te zien. */
.boek-melding-stand {
  margin: 0;
  font-size: .85rem;
  color: var(--ink-soft);
}
.boek-melding-aan, .boek-melding-uit { display: flex; gap: .5rem; align-items: baseline; }
.boek-melding-aan::before, .boek-melding-uit::before {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  transform: translateY(-.05rem);
}
.boek-melding-aan { color: var(--ok); }
.boek-melding-aan::before { background: var(--ok); }
.boek-melding-uit::before { background: var(--line); }

.boek-meldingregel {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.boek-meldingen .boek-actie { margin-top: .9rem; }
/* De twee vinkjes rechts, onder elkaar: naast elkaar wordt het op een smalle
   telefoon te krap om ernaast te mikken. */
.boek-vinkjes { display: flex; flex-direction: column; gap: .3rem; flex: none; }
.boek-vinkjes label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--ink-soft);
}
.boek-vinkjes input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: 0; }
.boek-vinkjes label:has(input:disabled) { opacity: .45; }

/* De stand van de facturatie staat achter de regel, en alleen voor het beheer. */
.boek-factuur { font-weight: 600; }
.boek-factuur-te_factureren { color: #b45309; }
.boek-factuur-gefactureerd { color: var(--ok); }
.boek-factuur-coulance { color: var(--ink-soft); }

/* ---------- totalen onder het logboek ---------- */
/* Vier getallen naast elkaar, over alle vluchten van het toestel gerekend.
   Alleen in de brede weergave; op een telefoon is de hoogte te kostbaar. */
.boek-totalen {
  margin: .9rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .45rem .9rem;
  padding: .8rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.boek-totalen dt { color: var(--ink-soft); font-size: .78rem; }
.boek-totalen dd { margin: .1rem 0 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* De vier paren staan onder elkaar in de bron (dt, dd, dt, dd, ...); in het
   raster horen de labels op de eerste rij en de getallen op de tweede. */
.boek-totalen dt { grid-row: 1; }
.boek-totalen dd { grid-row: 2; }

/* ---------- breed: dezelfde schermen op een pc ---------- */
/* Eén app, twee breedtes. De schermen, hun volgorde en de terugknop zijn op een
   pc precies die van de telefoon; er is alleen meer ruimte. De kolom wordt daarom
   breder gemaakt met de zijkanten van de titelbalk en het scherm, en niet met een
   extra omhulsel in de opmaak — dan zou het sjabloon twee vormen krijgen. */
.boek-breed .boek-titelbalk,
.boek-breed .boek-scherm {
  padding-inline: max(1.25rem, calc((100% - 60rem) / 2));
}
.boek-breed .boek-scherm { padding-top: 1.5rem; }

/* Geen klokje en geen kalendertje in de tijdvelden: op een pc wordt een tijd
   ingetikt, en het symbool van de browser eet de ruimte op van een veld waar
   "14:05" in moet. Basis.css doet dit al voor een muis, maar een laptop met een
   aanraakscherm meldt zich als aanraakapparaat en kreeg het symbool dus toch.
   Op een telefoon blijft het staan: daar opent het de tijdkiezer van het toestel. */
.boek-breed input[type="time"]::-webkit-calendar-picker-indicator { display: none; }

/* Er is een muis: de regel waar hij boven hangt licht op. Op een telefoon
   gebeurt dat pas bij aanraken (:active), en dat blijft zo. */
.boek-breed .boek-regel:hover,
.boek-breed .boek-blok[href]:hover { border-color: var(--primary); }
.boek-breed .boek-dag[href]:hover { background: #e8effd; }
.boek-breed .boek-terugknop:hover,
.boek-breed .boek-uitloggen button:hover { background: rgba(255, 255, 255, .28); }
.boek-breed .boek-maandknop:hover { border-color: var(--primary); }

/* Wat op een telefoon per se op één scherm moest passen, mag hier meeademen:
   een dag met veel periodes hoeft op een pc niet in een eigen schuifvenster. */
.boek-breed.boek-vast { height: auto; min-height: 100dvh; }
.boek-breed.boek-vast .boek-blokken { overflow-y: visible; }