/* 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 {
  --letter: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cijfer: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bg: #f4f4f1; --kaart: #ffffff; --rand: #e0e0da; --tekst: #1e1e1b; --zacht: #5a5a53;
  --accent: #3d5a6c; --inkt: #3d5a6c; --inkt-tekst: #ffffff; --link: #3d5a6c;
  --ok: #3e8e5a; --ok-bg: #e8f2ec; --let-op: #b5841f; --fout: #b4453a; --fout-bg: #f7e9e7;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a; --kaart: #1d2024; --rand: #2e3238; --tekst: #e6e6e1; --zacht: #9a9a93;
    --accent: #7fa3b9; --inkt: #243641; --link: #8fb3c8;
    --ok: #7cc494; --ok-bg: #1b2d22; --let-op: #d4a24a; --fout: #e07a70; --fout-bg: #3a1f1c;
    color-scheme: dark;
  }
}

* { 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; }
@media (prefers-color-scheme: dark) { .knop.hoofd { color: #0d1620; } }

.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; }

/* ---------- PW-Planning ---------- */
/* Vijf kleuren, één betekenis per kleur. Staalblauw blijft "mee bezig", zodat de huisstijl leidend is. */
:root { --c-bezig: #3d5a6c; --c-wacht-klant: #c8641e; --c-wacht-derde: #b5841f; --c-gepland: #9a9a93; --c-klaar: #3e8e5a;
        --c-wacht-klant-bg: #fbeee3; }
@media (prefers-color-scheme: dark) {
  :root { --c-bezig: #7fa3b9; --c-wacht-klant: #e8915a; --c-wacht-derde: #d4a24a; --c-gepland: #74746e; --c-klaar: #7cc494;
          --c-wacht-klant-bg: #3a261a; }
}
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h3 { margin: 0 0 .25rem; font-size: 1.02rem; line-height: 1.3; }

.stip { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--c-gepland); flex: none; }
.stip.bezig { background: var(--c-bezig); } .stip.wacht-klant { background: var(--c-wacht-klant); }
.stip.wacht-derde { background: var(--c-wacht-derde); } .stip.klaar { background: var(--c-klaar); }

/* klantpagina: groot, rustig, één kolom, goed op een telefoon */
.klantpagina { max-width: 640px; }
.legenda { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--zacht); }
.legenda li { display: flex; align-items: center; gap: 6px; }
.fase { margin: 22px 0; }
.fase > h2, .klaar-lijst summary h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); }
.project { background: var(--kaart); border: 1px solid var(--rand); border-left: 6px solid var(--c-gepland); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.project p { margin: 0 0 .35rem; }
.project.bezig { border-left-color: var(--c-bezig); } .project.wacht-klant { border-left-color: var(--c-wacht-klant); }
.project.wacht-derde { border-left-color: var(--c-wacht-derde); } .project.klaar { border-left-color: var(--c-klaar); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--zacht); margin: 0; }
.label { font-weight: 600; } .label.bezig { color: var(--c-bezig); } .label.wacht-klant { color: var(--c-wacht-klant); }
.label.wacht-derde { color: var(--c-wacht-derde); } .label.gepland { color: var(--zacht); }
.klaar-lijst summary { cursor: pointer; list-style: none; } .klaar-lijst summary::-webkit-details-marker { display: none; }
.klaar-lijst summary h2::after { content: " ▾"; } .klaar-lijst[open] summary h2::after { content: " ▴"; }
.klaar-lijst .project { opacity: .85; }
.totaal { margin-top: 28px; }

.vragen { background: var(--c-wacht-klant-bg); border: 1px solid var(--c-wacht-klant); border-radius: 12px; padding: 14px; margin: 18px 0; }
.vragen h2 { color: var(--c-wacht-klant); }
.vraag { background: var(--kaart); border-radius: 10px; padding: 12px; margin: 10px 0; }
.vraag.beantwoord { opacity: .9; }
.vraagtekst { font-weight: 600; }
.antwoord textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--rand); border-radius: 8px; background: var(--kaart); resize: vertical; }
.antwoord .acties { margin-bottom: 0; }

/* beheer */
.klantenlijst { list-style: none; padding: 0; margin: 0 0 14px; }
.klantenlijst li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.klantenlijst a { font-weight: 600; }
.teller { font-size: .78rem; padding: 1px 8px; border-radius: 99px; background: var(--rand); }
.teller.nieuw { background: var(--c-wacht-klant); color: #fff; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.inline-form input, .inline-form select, .acties select { padding: 9px 11px; border: 1px solid var(--rand); border-radius: 8px; background: var(--kaart); }
.inline-form input { flex: 1 1 200px; }
.knop.gevaar, .tekstknop.gevaar { color: var(--fout); }
.kopieer { cursor: pointer; word-break: break-all; }
.kopieer.gekopieerd { background: var(--ok-bg); color: var(--ok); }
.linkregel { margin-bottom: 4px; }

.urenform { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; align-items: end; }
.urenform .breed { grid-column: 1 / -1; }
.urenform .knopvak { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .urenform { grid-template-columns: 1.4fr .6fr 2fr .9fr auto; }
  .urenform .breed, .urenform .knopvak { grid-column: auto; }
}
.rij3 { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.projectregel { border-bottom: 1px solid var(--rand); }
.projectregel summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 0; cursor: pointer; list-style: none; }
.projectregel summary::-webkit-details-marker { display: none; }
.projectregel[open] summary { padding-bottom: 6px; }
.projectform { padding: 4px 0 14px; }

.vraagregel { border-top: 1px solid var(--rand); padding: 10px 0; }
.vraagregel p { margin: 0 0 .3rem; }
.vraagregel.nieuw { border-left: 4px solid var(--c-wacht-klant); padding-left: 10px; }
.vraagregel.gesloten { opacity: .6; }
.antwoordtekst { background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.vraagregel .acties { margin: 6px 0 0; }
.vraagregel .knop { padding: 5px 12px; }
.tabel tr.actief td { background: var(--bg); }
#regels h3 { margin-top: 16px; }