/* Huisstijl Handsfree Digital. Sober, leesbaar, geen sierelementen. */
:root {
  --petrol: #14383C;
  --petrol-licht: #2A5A5F;
  --oranje: #C7492F;
  --koel-wit: #EDF0EE;
  --wit: #FFFFFF;
  --grijs: #6B7472;
  --grijs-licht: #D5DBD8;
  --rand: #C3CBC8;
  --kop: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --tekst: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--koel-wit);
  color: var(--petrol);
  font-family: var(--tekst);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--kop); font-weight: 600; color: var(--petrol); margin: 0 0 .6rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; margin-top: 1.8rem; }

a { color: var(--petrol); }
a:hover { color: var(--oranje); }

.balk {
  background: var(--petrol);
  color: var(--koel-wit);
  padding: .7rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  /* Op een smal scherm past de balk niet op een regel. Zonder wrap duwt de
     uitlogknop de pagina breder dan het venster en gaat de hele pagina
     horizontaal schuiven. */
  flex-wrap: wrap;
  row-gap: .3rem;
}
.balk .merk { font-family: var(--kop); font-weight: 600; font-size: 1.05rem; }
.balk a { color: var(--koel-wit); text-decoration: none; opacity: .85; }
.balk a:hover, .balk a.actief { opacity: 1; color: var(--wit); border-bottom: 2px solid var(--oranje); }
.balk .rechts { margin-left: auto; }
.balk form { display: inline; }
.balk button.uitloggen {
  background: none; border: none; color: var(--koel-wit);
  font-family: var(--tekst); font-size: .95rem; cursor: pointer; opacity: .85;
}
.balk button.uitloggen:hover { opacity: 1; }

main { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.4rem 4rem; }

.kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 3px;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.2rem;
}

/* Brede tabellen mogen de pagina niet oprekken; op smalle schermen schuift de
   tabel horizontaal in plaats van de layout te breken. */
.tabelomloop { overflow-x: auto; background: var(--wit); border-bottom: 1px solid var(--grijs-licht); }

table { width: 100%; border-collapse: collapse; background: var(--wit); }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--grijs-licht); vertical-align: middle; }
th {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--grijs); font-weight: 600;
  white-space: nowrap;              /* koppen als "Laatste opvolging" op een regel */
}
tbody tr:hover { background: #F6F8F7; }

/* Getallen, bedragen, data en factuurnummers horen op een regel te blijven.
   tabular-nums zet alle cijfers even breed, zodat bedragen onder elkaar uitlijnen. */
td.bedrag, td.nummer, th.bedrag, th.nummer { font-family: var(--mono); }
td.bedrag, td.nummer {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
td.bedrag, th.bedrag { text-align: right; }

/* De klantnaam is de kolom waarop je zoekt; die krijgt de ruimte die overblijft. */
td.klant, th.klant { min-width: 12rem; }

/* Secundaire informatie onder de klantnaam in plaats van in een eigen kolom.
   Scheelt een kolom breedte zonder dat er iets verdwijnt. */
.onderregel { display: block; color: var(--grijs); font-size: .8rem; margin-top: .1rem; }

/* Vervaldatum met de te-laat-melding eronder; de badge blijft op een regel. */
td.vervalcel { white-space: nowrap; }
td.vervalcel .status { display: block; width: fit-content; margin-top: .25rem; }

/* De actiekolom krijgt precies zoveel breedte als de knoppen nodig hebben,
   zodat ze niet rafelig over twee regels vallen. */
td.acties-cel, th.acties-cel { width: 1%; white-space: nowrap; }

.status { font-size: .78rem; font-weight: 600; padding: .12rem .45rem; border-radius: 2px; white-space: nowrap; }
.status-betaald { background: var(--petrol); color: var(--koel-wit); }
.status-verstuurd { background: var(--grijs-licht); color: var(--petrol); }
.status-te_laat { background: var(--oranje); color: var(--wit); }
.status-concept { background: var(--wit); color: var(--grijs); border: 1px solid var(--rand); }
.status-gecrediteerd { background: var(--wit); color: var(--oranje); border: 1px solid var(--oranje); }

label { display: block; font-size: .82rem; color: var(--grijs); margin: .7rem 0 .2rem; }
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: .45rem .55rem;
  border: 1px solid var(--rand); border-radius: 2px;
  font-family: var(--tekst); font-size: 15px; background: var(--wit); color: var(--petrol);
}
input.bedrag, input.nummer { font-family: var(--mono); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--petrol-licht); outline-offset: -1px; }

button, .knop {
  display: inline-block; padding: .45rem .75rem;
  white-space: nowrap;              /* "herinnering sturen" nooit over twee regels */
  line-height: 1.3;
  background: var(--petrol); color: var(--koel-wit);
  border: 1px solid var(--petrol); border-radius: 2px;
  font-family: var(--tekst); font-size: .88rem; cursor: pointer; text-decoration: none;
}
button:hover, .knop:hover { background: var(--petrol-licht); color: var(--wit); }

/* Toetsenbordgebruikers moeten kunnen zien waar ze zijn. Alleen :focus-visible,
   zodat een muisklik geen ring achterlaat. */
button:focus-visible, .knop:focus-visible, a:focus-visible, .balk button:focus-visible {
  outline: 2px solid var(--oranje);
  outline-offset: 2px;
  border-radius: 2px;
}
button.tweede, .knop.tweede { background: var(--wit); color: var(--petrol); }
button.tweede:hover, .knop.tweede:hover { background: var(--koel-wit); }
button.accent, .knop.accent { background: var(--oranje); border-color: var(--oranje); color: var(--wit); }

.fout { background: #FBE9E5; border: 1px solid var(--oranje); color: var(--oranje); padding: .55rem .8rem; border-radius: 2px; margin-bottom: .8rem; }
.melding { background: #E4EDEA; border: 1px solid var(--petrol); padding: .55rem .8rem; border-radius: 2px; margin-bottom: .8rem; }

.cijfers { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.cijfer { flex: 1 1 200px; background: var(--wit); border: 1px solid var(--rand); border-radius: 3px; padding: 1rem 1.1rem; }
.cijfer .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grijs); }
.cijfer .waarde { font-family: var(--mono); font-size: 1.7rem; color: var(--petrol); margin-top: .2rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.cijfer.accent .waarde { color: var(--oranje); }

.inlog { max-width: 340px; margin: 12vh auto; }
.inlog .kaart { padding: 1.6rem; }
.inlog h1 { font-size: 1.3rem; }
.inlog p.onder { color: var(--grijs); font-size: .82rem; margin: .2rem 0 1.2rem; }
.inlog button { width: 100%; margin-top: 1rem; }

/* Op een aanraakscherm moeten knoppen minstens 44px hoog zijn. Op een muis-
   scherm zou dat de tabelrijen onnodig hoog maken, dus alleen bij een grove
   aanwijzer. */
@media (pointer: coarse) {
  button, .knop { min-height: 44px; padding: .7rem 1rem; }
  td .acties { gap: .6rem; }
}

/* Wie liever geen beweging ziet, krijgt geen overgangen. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.stil { color: var(--grijs); font-size: .85rem; }
.rij { display: flex; gap: 1rem; flex-wrap: wrap; }
.rij > div { flex: 1 1 220px; }
/* In een tabelrij staan de acties op een regel (de cel is nowrap). Buiten een
   tabel, zoals onder een formulier, mogen ze wel afbreken. */
.acties { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
td .acties { flex-wrap: nowrap; gap: .5rem; }   /* 8px tussenruimte, richtlijn voor aanraken */