/* De opmaak van het skelet, in de Processware-huisstijl (zie docs/huisstijl.md in
   PW-processware-isms): staalblauw accent, Space Grotesk voor tekst, JetBrains Mono
   voor cijfers/codes, beide zelf geserveerd uit static/fonts/ - geen lettertypen of
   bibliotheken van buiten. Dit is het vertrekpunt: een app mag er een eigen draai
   aan geven, maar niet ver afwijken (andere accentkleur, andere letters). */

:root {
  /* De kleuren van de factuur van Valentijn Management in plaats van het staalblauw van de huisstijl: deze app is
     voor één klant en moet aanvoelen als zijn eigen papier. Lichtgroen en goud op wit, donkergrijze tekst. */
  --letter: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cijfer: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bg: #f5f8f3; --kaart: #ffffff; --rand: #dfe6db; --tekst: #2b2b2b; --zacht: #5f6a5c;
  --accent: #3f7a3a; --inkt: #96cc8c; --inkt-tekst: #23331f; --link: #3f7a3a; --goud: #c4a050; --groen-licht: #e8f3e4;
  --ok: #3e8e5a; --ok-bg: #e8f2ec; --let-op: #9a6b12; --fout: #b4453a; --fout-bg: #f7e9e7;
  /* Bewust geen donkere modus: de app ziet er altijd hetzelfde uit, ook als Windows op donker staat. */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 400 16px/1.55 var(--letter); }
h1, h2 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
p { margin: 0 0 .75rem; }
a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, .cijfer, .log-uit { font-family: var(--cijfer); }
code { background: var(--rand); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.zacht { color: var(--zacht); }
.klein { font-size: .875rem; }

.kopbalk { background: var(--inkt); color: var(--inkt-tekst); padding-top: env(safe-area-inset-top); }
.kopbalk .binnen { max-width: 860px; margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; gap: 16px; }
.kopbalk .naam { font-weight: 700; font-size: 1.1rem; color: inherit; text-decoration: none; flex: 1; }
.kopbalk nav { display: flex; align-items: center; gap: 14px; }
.kopbalk nav a, .tekstknop { color: inherit; opacity: .85; text-decoration: none; background: none; border: 0; padding: 0; }
.kopbalk nav a:hover, .tekstknop:hover { opacity: 1; text-decoration: underline; }

.pagina { max-width: 860px; margin: 0 auto; padding: 22px 18px 60px; }
.pagina.smal { max-width: 460px; }

.blok { background: var(--kaart); border: 1px solid var(--rand); border-radius: 12px; padding: 18px; margin: 18px 0; }
.stapel { display: grid; gap: 14px; }
.rij2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.acties { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }

.veld { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
.veld input, .veld select, .veld textarea { font-weight: 400; padding: 9px 11px; border: 1px solid var(--rand); border-radius: 8px; background: var(--kaart); width: 100%; }

.knop { display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--rand); background: var(--kaart); color: var(--tekst); text-decoration: none; font-weight: 600; }
.knop:hover { border-color: var(--link); }
.knop.hoofd { background: var(--link); border-color: var(--link); color: #fff; }

.berichten { display: grid; gap: 8px; margin-bottom: 16px; }
.bericht { padding: 10px 14px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); }
.bericht.fout { background: var(--fout-bg); color: var(--fout); }

.tabel-wrap { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rand); }
.tabel th { font-size: .82rem; color: var(--zacht); font-weight: 600; }

.log-uit { background: var(--bg); border: 1px solid var(--rand); border-radius: 8px; padding: 10px; font-size: .8rem; max-height: 320px; overflow: auto; white-space: pre-wrap; }

/* ---------- factuurprogramma ---------- */
/* Groot en duidelijk: de gebruiker is geen computermens. Belangrijkste knop altijd blauw en groot. */
.knop.groot { padding: 13px 22px; font-size: 1.05rem; }
.knop.klein { padding: 5px 10px; font-size: .85rem; }
.knop.gevaar { color: var(--fout); }
.kop-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kop-rij h1 { margin: 0; }
.blok.vol { padding: 0; }
.blok.uitleg { border-color: var(--link); }
.rechts { text-align: right !important; }
.jaren { display: flex; gap: 8px; flex-wrap: wrap; }
.jaren a { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rand); text-decoration: none; }
.jaren a.actief { background: var(--link); color: #fff; border-color: var(--link); }
.tabel tfoot td { font-weight: 600; border-bottom: 0; }
.tabel.facturen td { padding: 10px; }
.tabel.regels { margin-top: 16px; }
.tabel .omschrijving { white-space: pre-line; }
.tabel tr.totaal td { border-top: 2px solid var(--tekst); }
tr.verborgen td { color: var(--zacht); }
.label { border: 1px solid var(--rand); border-radius: 999px; padding: 3px 10px; font-size: .85rem; background: var(--kaart); }
.label.ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.label.open { color: var(--let-op); }
.veld.groot { font-size: 1.05rem; }
.veld.groot select { padding: 12px; font-size: 1.05rem; }
.smal-veld { max-width: 240px; }
.regels-invoer { display: grid; gap: 12px; }
.regel { display: grid; grid-template-columns: 1fr 150px 90px 28px; gap: 10px; align-items: end;
  padding: 12px; border: 1px solid var(--rand); border-radius: 10px; }
.regel .weg { font-size: 1.1rem; padding-bottom: 10px; color: var(--zacht); }
@media (max-width: 640px) { .regel { grid-template-columns: 1fr 1fr 28px; } .regel .oms { grid-column: 1 / -1; } }
.totaalvak { justify-self: end; min-width: 260px; display: grid; gap: 4px; }
.totaalvak div { display: flex; justify-content: space-between; gap: 20px; }
.totaalvak .vet { font-weight: 700; border-top: 2px solid var(--tekst); padding-top: 4px; font-size: 1.1rem; }
.tekstknop.link { color: var(--link); text-decoration: underline; opacity: 1; }
.kopbalk nav form { display: inline; }

/* ---------- kleuren van de factuur ---------- */
/* de kopbalk als de groene balk bovenaan de factuur: vol groen dat naar rechts in wit overloopt */
.kopbalk { background: linear-gradient(90deg, #96cc8c 0%, #96cc8c 35%, #f5f8f3 100%); color: var(--inkt-tekst);
  border-bottom: 1px solid var(--rand); }
.kopbalk .naam { display: flex; align-items: center; gap: 10px; letter-spacing: .02em; }
.kopbalk .naam::before { content: ""; width: 22px; height: 22px; border: 2px solid var(--goud); border-radius: 50%; flex: none; }
.kopbalk nav a, .tekstknop { opacity: 1; }
.kopbalk nav a:hover { text-decoration: underline; }
h1 { color: #23331f; }
.blok { box-shadow: 0 1px 2px rgba(35, 51, 31, .05); }
.knop.hoofd { background: var(--accent); border-color: var(--accent); color: #fff; }
.knop.hoofd:hover { background: #356a31; }
.tabel th { background: var(--groen-licht); }
.blok.vol .tabel th:first-child { border-top-left-radius: 12px; }
.blok.vol .tabel th:last-child { border-top-right-radius: 12px; }
.tabel.facturen tbody tr:hover { background: #f8fbf6; }
.jaren a.actief { background: var(--accent); border-color: var(--accent); }
.totaalvak .vet { border-top-color: var(--goud); }
.tabel tr.totaal td { border-top-color: var(--goud); }
.regel { background: #fbfdfa; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 2px solid var(--inkt); outline-offset: 0; border-color: var(--accent); }