/* De opmaak van de app. Alle kleuren staan in css/merk.css, zodat een
   klantversie niets aan dit bestand hoeft te veranderen. */

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --radius: 16px;

  /* Ruimte voor de systeembalken op een telefoon. */
  --veilig-boven: env(safe-area-inset-top, 0px);
  --veilig-onder: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--inkt);
  background: var(--grond);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Het zachte verloop van de hero op de website. */
#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(60% 40% at 75% 8%, var(--gloed-warm), transparent 70%),
    radial-gradient(70% 45% at 15% 45%, var(--gloed-accent), transparent 70%),
    linear-gradient(170deg, var(--grond) 0%, var(--verloop-midden) 55%, var(--verloop-onder) 100%);
  background-attachment: fixed;
}

h1, h2, h3 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 0;
}

/* --- Indeling ------------------------------------------------------------ */

.scherm {
  flex: 1;
  /* Onderaan de hoogte van de balk plus wat lucht: die zweeft eroverheen. */
  padding: calc(16px + var(--veilig-boven)) 20px calc(92px + var(--veilig-onder));
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  animation: opkomen 0.22s ease-out;
}

@keyframes opkomen {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scherm { animation: none; }
}

.scherm h1 {
  font-size: 30px;
  margin-bottom: 18px;
}

.kop-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.kop-rij h1 { margin: 0; font-size: 26px; }

/* --- Kaarten ------------------------------------------------------------- */

.kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 16px;
  margin-bottom: 14px;
}

.kaart.strak { padding: 0; overflow: hidden; }

.kaart h2 {
  font-size: 19px;
  margin-bottom: 12px;
}

/* --- Klokscherm ---------------------------------------------------------- */

.scherm.klok { display: flex; flex-direction: column; }
/* De kaart heeft standaard een marge eronder; hier zou die bovenop de rekbare
   ruimte komen en de verdeling scheeftrekken. */
.scherm.klok .kaart { margin-bottom: 0; }
/* De vrije hoogte wordt tussen álle onderdelen verdeeld in plaats van opgehoopt
   in twee grote gaten. Elk stuk krijgt lucht, en het scherm past zich vanzelf
   aan een kleine of grote telefoon aan.
   De min-height houdt er ook op een kort scherm nog iets tussen. */
.vulling { flex-grow: 1; min-height: 10px; }
/* Boven de knoppen iets meer, zodat die onderaan verankerd blijven staan. */
.vulling.ruim { flex-grow: 1.4; }

/* In het donker het woordmerk met lichte letters. Het rapport houdt het
   donkere: dat blad blijft wit. */
:root[data-thema='donker'] .klok-logo { content: url('../img/logo-licht.png'); }

.klok-logo {
  display: block;
  width: min(72%, 320px);
  margin: 0 auto;
}

.klok-tijd {
  font-size: clamp(44px, 15vw, 64px);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* De datum is het onderschrift van de klok en blijft er dus tegenaan staan. */
.klok-datum {
  text-align: center;
  color: var(--dim);
  font-size: 16px;
  margin-top: 4px;
}

.status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--vlak);
  color: var(--dim);
  font-size: 15px;
}
.status .icoon { color: inherit; }
.icoon.klein { width: 17px; height: 17px; }
.status.werkt { background: var(--accent-zacht); color: var(--accent-tekst); font-weight: 500; }
.status.pauze { background: var(--pauze-zacht); color: var(--pauze-diep); font-weight: 500; }

.mini-stats {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  text-align: center;
}
.mini-stats > div { flex: 1; min-width: 0; }
.mini-stats .label { font-size: 13px; color: var(--dim); }
.mini-stats .waarde { font-size: 18px; font-weight: 600; margin-top: 2px; }

.klok-onder { padding-bottom: 4px; }

/* --- Knoppen ------------------------------------------------------------- */

button { font: inherit; cursor: pointer; }

.knop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--op-accent);
  font-size: 18px;
  font-weight: 600;
  box-shadow: var(--schaduw);
  transition: transform 0.08s ease, background 0.15s ease;
}
.knop:active { transform: scale(0.985); background: var(--accent-diep); }

/* Op een gevulde knop staat het icoon in de tekstkleur, niet in het groen. */
.knop .icoon, .tekstknop .icoon { color: inherit; }
.icoon.op-knop { width: 20px; height: 20px; stroke-width: 2; }

.knop.rand {
  background: transparent;
  color: var(--accent-tekst);
  border: 1px solid var(--lijn);
  box-shadow: none;
  font-size: 16px;
  font-weight: 500;
  padding: 13px;
}
.knop.rand:active { background: var(--tik); }

.knop.pauze { background: var(--pauze); color: var(--op-pauze); }
.knop.pauze:active { filter: brightness(0.94); }

.knop.gevaar { background: transparent; color: var(--rood); border: 1px solid var(--rood-rand); box-shadow: none; }
.knop.gevaar:active { background: var(--rood-vlak); }

.knop-rij { display: flex; gap: 12px; margin-top: 12px; }
.knop-rij > * { flex: 1; }

.tekstknop {
  border: 0;
  background: none;
  color: var(--accent-tekst);
  font-weight: 600;
  font-size: 15px;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.terug {
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--vlak);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--inkt);
}

/* --- Lijsten ------------------------------------------------------------- */

.rij {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid var(--lijn);
  background: none;
  text-align: left;
  color: inherit;
}
.rij:last-child { border-bottom: 0; }
.rij:active { background: var(--tik); }

.rij .inhoud { flex: 1; min-width: 0; }
.rij .titel { font-weight: 500; }
.rij .onder { font-size: 14px; color: var(--dim); margin-top: 2px; }
.rij .rechts { font-weight: 600; white-space: nowrap; }
.rij .pijl { color: var(--dim); font-size: 18px; }

/* Lijntekeningen die de kleur van hun omgeving overnemen. */
.icoon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Vlakken binnen een icoon, zoals de stip en het driehoekje van hervatten. */
.icoon .vul { fill: currentColor; stroke: none; }
.icoon.groot { width: 24px; height: 24px; }

/* Waarop je nu klokt, onder de statusbalk. Klein en rustig: het is bevestiging,
   geen mededeling. */
.klok-werksoort {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-tekst);
}

/* Keuzevenster, bv. bij het inklokken met meerdere werksoorten. */
.keuzelijst {
  display: grid;
  gap: 8px;
  margin: 4px 0 8px;
  /* Bij veel werksoorten mag de lijst schuiven in plaats van het venster
     buiten het scherm te duwen. */
  max-height: 52vh;
  overflow-y: auto;
}
.keuze {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  font: inherit;
  color: var(--inkt);
  background: var(--grond);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  cursor: pointer;
}
.keuze:active { background: var(--accent-zacht); }
.keuze .inhoud { flex: 1; min-width: 0; }
.keuze .titel { font-weight: 600; }
.keuze .onder { font-size: 13px; color: var(--dim); }
.keuze .pijl { color: var(--dim); font-size: 20px; }

/* Veelgestelde vragen: dichtgeklapt zodat de instellingen kort blijven voor
   wie niets zoekt. */
.vraag {
  border-top: 1px solid var(--lijn);
  padding: 2px 0;
}
.vraag:first-of-type { border-top: 0; }
.vraag summary {
  padding: 11px 24px 11px 0;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.vraag summary::-webkit-details-marker { display: none; }
/* Een chevron die meedraait bij het openklappen. */
.vraag summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--dim);
  border-bottom: 2px solid var(--dim);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s ease;
}
.vraag[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.vraag p {
  margin: 0 0 12px;
  padding-right: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
}

/* Waar je terechtkan als de app het antwoord niet geeft. */
.hulplijn {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--lijn);
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
}

/* --- Foto's bij een dag --------------------------------------------------- */

.kaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kaart-kop h2 { margin: 0; }

/* Vierkante miniaturen die zich naar de schermbreedte voegen. */
.fotorij {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.fotovak { position: relative; }
/* De miniatuur is een knop, zodat vergroten ook met het toetsenbord kan. */
.fotoknop {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}
.fotovak img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--lijn);
  display: block;
}

.fotoweg {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--foto-knop);
  display: grid;
  place-items: center;
  padding: 0;
}
.fotoweg .icoon { width: 15px; height: 15px; color: #fff; }

/* Een foto schermvullend bekijken. Het venster vult het scherm en is zelf
   doorzichtig; de foto zweeft er in het midden in. */
.fotovenster {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fotovenster::backdrop { background: var(--waas-diep); }

.fotovenster img {
  max-width: 100vw;
  /* Ruimte laten voor de sluitknop en de teller. */
  max-height: calc(100dvh - 120px);
  object-fit: contain;
  display: block;
}

.fotosluit,
.fotopijl {
  position: absolute;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
}

.fotosluit {
  top: calc(14px + var(--veilig-boven));
  right: 14px;
  width: 42px;
  height: 42px;
  font-size: 20px;
}

.fotopijl {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  font-size: 30px;
  line-height: 1;
  /* Het teken staat optisch te laag in zijn regel. */
  padding-bottom: 4px;
}
.fotopijl.links { left: 10px; }
.fotopijl.rechts { right: 10px; }

.fototeller {
  position: absolute;
  bottom: calc(20px + var(--veilig-onder));
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
}

/* Het rapport nakijken vóór verzending: de bladen als afbeelding onder elkaar,
   met een randje eromheen zodat ze als papier lezen. */
.bladen { display: grid; gap: 12px; }
.bladen .blad {
  width: 100%;
  height: auto;
  display: block;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  box-shadow: var(--schaduw);
}


/* Uitleg onderaan een bewerkscherm. */
.voetnoot {
  margin: 16px 2px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}

/* De installatie-uitleg op iPhone: per stap een nummer en het icoon dat op
   dat moment op het scherm staat, zodat je niet hoeft te zoeken. */
.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.stappen li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--inkt);
}
.stap-nummer {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-zacht);
  color: var(--accent-tekst);
  font-size: 13px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
/* Het Safari-icoon in een eigen vakje, zodat het als knop leest en niet als
   versiering bij de tekst. */
.stap-icoon {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid var(--lijn);
  border-radius: 9px;
  background: var(--invoer);
  color: var(--inkt);
}
.icoon.dun { stroke-width: 1.5; }

/* --- Statistiekvakjes ---------------------------------------------------- */

.stat-rooster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.stat {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 14px 16px;
}
.stat .icoon { margin-bottom: 8px; display: block; }
.stat .waarde { font-size: 22px; font-weight: 700; }
.stat .label { font-size: 13px; color: var(--dim); margin-top: 2px; }

/* --- Voortgangsbalk ------------------------------------------------------ */

.balk {
  height: 8px;
  border-radius: 999px;
  background: var(--vlak);
  overflow: hidden;
  margin-top: 10px;
}
.balk > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* --- Formulieren --------------------------------------------------------- */

label { display: block; font-size: 14px; color: var(--dim); margin-bottom: 6px; }

input[type='text'],
input[type='number'],
input[type='time'],
input[type='date'],
input[type='email'],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--invoer);
  color: var(--inkt);
  font: inherit;
  /* Zonder dit tekent iOS datum-, tijd- en keuzevelden zelf: smal, met
     vierkante hoeken, en zonder zich iets van het bovenstaande aan te trekken. */
  -webkit-appearance: none;
  appearance: none;
}

/* Een leeg datumveld krimpt op iOS naar zijn inhoud; zo houdt het dezelfde
   hoogte als de andere velden. */
input[type='time'],
input[type='date'] { min-height: 48px; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--accent);
}
textarea { resize: vertical; min-height: 90px; }

.veld { margin-bottom: 14px; }

/* --- Navigatiebalk onderaan ---------------------------------------------- */

.nav {
  display: flex;
  border-top: 1px solid var(--glas-rand);
  background: var(--glas);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--glas-schaduw), inset 0 1px 0 var(--glas-glans);
  padding-bottom: var(--veilig-onder);
  /* Zwevend, niet meelopend in de bladspiegel. Als vaste rij onderaan hield de
     balk zijn eigen ruimte en schoof er niets onder door; dan valt er ook niets
     te vervagen en blijft matglas een grijs vlak. De schermen houden onderaan
     ruimte vrij, zodat er niets achter de balk verdwijnt. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
}

.nav button {
  flex: 1;
  border: 0;
  background: none;
  padding: 9px 0 11px;
  color: var(--dim);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.nav button .bol {
  width: 56px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 19px;
  transition: background 0.18s ease;
}
.nav button.actief { color: var(--inkt); font-weight: 600; }
.nav button.actief .bol { background: var(--accent-zacht); color: var(--accent-tekst); }
/* In de balk volgt het icoon de kleur van het tabblad, niet het huisstijlgroen. */
.nav .icoon { color: inherit; }

/* --- Leegte en meldingen ------------------------------------------------- */

.leeg {
  text-align: center;
  color: var(--dim);
  padding: 32px 16px;
}

.melding {
  position: fixed;
  left: 50%;
  bottom: calc(84px + var(--veilig-onder));
  transform: translateX(-50%);
  background: var(--inkt);
  color: var(--grond);
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: var(--schaduw-diep);
  font-size: 15px;
  z-index: 50;
  max-width: calc(100% - 40px);
  text-align: center;
  animation: opkomen 0.2s ease-out;
}

/* Welke dag de totalen op het klokscherm beslaan. Verschijnt alleen bij een
   dienst die over middernacht loopt. */
.dienst-noot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--lijn);
  text-align: center;
  font-size: 13px;
  color: var(--dim);
}

/* --- Installatiebalk ----------------------------------------------------- */

/* Bovenaan, niet onderaan: daar staat de Inklokken-knop, en die mag nooit
   afgedekt worden door een voorstel dat je ook kan wegklikken. */
/* Zolang de balk zweeft, schuift de inhoud eronder vandaan. Zonder dit lag
   ze over de titel van elk scherm heen. De hoogte wordt gemeten in
   installeren.js; het getal hier is enkel een terugval. */
body.met-installeerbalk .scherm { padding-top: var(--balk-ruimte, 92px); }

.installeer-balk {
  position: fixed;
  left: 12px;
  right: 12px;
  top: calc(12px + var(--veilig-boven));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--lijn);
  background: var(--glas);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--schaduw-diep);
  z-index: 40;
  max-width: 640px;
  margin: 0 auto;
  animation: opkomen 0.25s ease-out;
}

.installeer-icoon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--lijn);
}

.installeer-tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.installeer-tekst strong { font-size: 15px; font-weight: 600; }
.installeer-tekst span { font-size: 13px; color: var(--dim); }

.installeer-knop {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--op-accent);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 16px;
}
.installeer-knop:active { background: var(--accent-diep); }

.installeer-sluit {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--vlak);
  color: var(--dim);
  font-size: 13px;
  display: grid;
  place-items: center;
}

/* --- Dialoogvenster ------------------------------------------------------ */

dialog {
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  padding: 0;
  background: var(--glas);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  color: var(--inkt);
  /* De glans bovenaan geeft de rand dikte; zonder dat blijft het een plat
     vlak met een lijntje eromheen. */
  box-shadow: var(--schaduw-diep), inset 0 1px 0 var(--glas-glans);
  width: min(92vw, 420px);
}
/* Een vleugje blur op wat erachter ligt: dan leest het venster als glas dat
   boven het scherm zweeft in plaats van als een vlak dat erop geplakt is. */
dialog::backdrop {
  background: var(--waas);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.dialoog-inhoud { padding: 20px; }
.dialoog-inhoud h2 { margin-bottom: 14px; }
.dialoog-knoppen { display: flex; gap: 10px; margin-top: 18px; }
.dialoog-knoppen > * { flex: 1; }