/* techsolv-portaal: de schil om de documenten heen, in de stijl van de nieuwe
   website (techsolv-site): donker antraciet, goud als enige accent, Sora voor
   koppen, Instrument Sans voor tekst, pilvormige knoppen, kaarten met een dunne
   lichte rand. Het document zelf is licht (eigen stijl in het frame): papier op
   een donker bureau. Basisgrootte 14.5px; het document volgt zijn eigen maat. */
@font-face { font-family: 'Sora'; src: url('/static/merk/sora.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/static/merk/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
:root {
  --waas: 22 27 23;
  --grond: #161b17; --vlak: rgb(255 255 255 / .04); --vlak-licht: rgb(255 255 255 / .07); --vlak-diep: rgb(255 255 255 / .11);
  --veld: #1c2220; --kaart-rand: rgb(255 255 255 / .1); --rand: rgb(255 255 255 / .1); --rand-sterk: rgb(255 255 255 / .22);
  --tekst: #ffffff; --tekst-body: rgb(255 255 255 / .72); --zacht: rgb(255 255 255 / .55); --inkt: #0a0b09;
  --accent: #dbb032; --accent-zacht: rgb(219 176 50 / .16); --teal: #4fb3a6;
  --goed: #6fd3a0; --goed-tint: rgb(79 179 166 / .16); --let: #e6c45a; --let-tint: rgb(219 176 50 / .14); --over: #ff8a7a; --over-tint: rgb(255 120 100 / .14);
  --kop: 'Sora', system-ui, sans-serif; --font: 'Instrument Sans', system-ui, sans-serif;
  --rond-pil: 999px; --rond-veld: 4px; --rond-kaart: 6px; --rond-formulier: 8px; --soepel: cubic-bezier(.2, .7, .3, 1);
}
* { box-sizing: border-box; }
html { font-size: 14.5px; color-scheme: dark; }
body { margin: 0; background: var(--grond); color: var(--tekst-body); font: 1rem/1.6 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--tekst); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* kop en voet */
.kop { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.4rem; background: rgb(var(--waas) / .85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rand); }
.merk { display: inline-flex; align-items: center; gap: .7rem; color: var(--tekst); text-decoration: none; }
.merk .logo { height: 20px; width: auto; display: block; }
.merk .sub { color: var(--zacht); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--kop); }
.kopnav { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
.kopnav a { color: var(--tekst); text-decoration: none; font-weight: 500; padding: .4rem .85rem; border-radius: var(--rond-pil); }
.kopnav a:hover { background: var(--vlak-licht); }
.kopnav .sub { color: var(--zacht); padding: 0 .4rem; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 1.4rem 1.4rem 4rem; }
.voet { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.4rem; color: var(--zacht); font-size: .82rem; border-top: 1px solid var(--rand); }

/* typografie */
h1, h2, h3 { font-family: var(--kop); font-weight: 600; letter-spacing: -.02em; margin: 0 0 .5rem; line-height: 1.15; color: var(--tekst); text-wrap: balance; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.1rem; } h3 { font-size: .95rem; }
p { margin: 0 0 .75rem; }
.sub { color: var(--zacht); font-size: .9rem; } .klein { font-size: .8rem; }
.mono { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: .78rem; word-break: break-all; color: var(--tekst-body); }
.eyebrow { font-family: var(--kop); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 .5rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* kaarten en raster */
.kaart { background: var(--vlak); border: 1px solid var(--kaart-rand); border-radius: var(--rond-kaart); padding: 1.2rem 1.35rem 1.3rem; margin-bottom: .9rem; }
.kaart.smal { max-width: 440px; margin: 4rem auto; padding: 1.7rem 1.8rem; }
.tweeluik { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.zijkolom { position: sticky; top: 4.2rem; }
@media (max-width: 960px) { .tweeluik { grid-template-columns: 1fr; } .zijkolom { position: static; } }
/* het document scrolt in zijn eigen kader van schermhoogte; de zijkolom blijft in beeld */
.documentframe { width: 100%; border: 0; display: block; height: calc(100vh - 7.5rem); min-height: 480px; background: #E9E6DF; border-radius: var(--rond-kaart); }
.document { position: sticky; top: 4.2rem; }
.zijkolom { max-height: calc(100vh - 4.6rem); overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
@media (max-width: 960px) { .document { position: static; } .documentframe { height: 70vh; } .zijkolom { max-height: none; overflow: visible; } }
.document .eyebrow { margin-bottom: .7rem; }
.kernpunten { background: var(--accent-zacht); border: 1px solid rgb(219 176 50 / .3); border-radius: var(--rond-kaart); padding: .7rem .9rem; margin: .2rem 0 .9rem; font-size: .9rem; color: var(--tekst); }
.kernpunten b { font-family: var(--kop); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.kernpunten ul { margin: .35rem 0 0; padding-left: 1.1rem; } .kernpunten li { margin: .15rem 0; }

/* knoppen: pil, goud is de primaire actie (zoals op de website) */
.knop { font: 600 .9rem/1.2 var(--kop); cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: var(--inkt);
  border-radius: var(--rond-pil); padding: .65rem 1.2rem; min-height: 42px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background .18s var(--soepel), border-color .18s var(--soepel), transform .12s var(--soepel), box-shadow .18s var(--soepel); }
.knop:hover { background: #e6bf4a; border-color: #e6bf4a; } .knop:active { transform: scale(.97); } .knop:disabled { opacity: .5; cursor: wait; }
.knop:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(219 176 50 / .4); }
.knop.primair { background: var(--accent); border-color: var(--accent); color: var(--inkt); }
.knop.stil { background: var(--vlak-licht); color: var(--tekst); border-color: var(--rand-sterk); } .knop.stil:hover { background: var(--vlak-diep); border-color: var(--tekst); }
.knop.klein { padding: .4rem .9rem; min-height: 32px; font-size: .8rem; }

/* formulieren */
.formulier { display: flex; flex-direction: column; gap: .45rem; }
.formulier label, .rij2 label { font-family: var(--font); font-size: .85rem; font-weight: 500; color: var(--tekst-body); margin-top: .4rem; display: block; letter-spacing: 0; text-transform: none; }
input, select, textarea { font: inherit; color: var(--tekst); background: var(--veld); border: 1px solid var(--rand-sterk); border-radius: var(--rond-veld); padding: .6rem .8rem; min-height: 42px; width: 100%;
  transition: border-color .18s var(--soepel), box-shadow .18s var(--soepel); }
input::placeholder, textarea::placeholder { color: var(--zacht); }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(219 176 50 / .25); }
.rij { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .rij.tussen { justify-content: space-between; }
.rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } @media (max-width: 520px) { .rij2 { grid-template-columns: 1fr; } }
.melding { color: var(--over); font-size: .88rem; min-height: 1.2em; margin: .3rem 0 0; } .melding.goed { color: var(--goed); }

/* labels en status */
.pil { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--kop); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .32rem .65rem; border-radius: var(--rond-pil); background: var(--vlak-diep); color: var(--tekst); white-space: nowrap; }
.pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pil.s-klaar, .pil.s-wacht_klant, .pil.s-open { background: var(--let-tint); color: var(--let); }
.pil.s-getekend, .pil.s-beantwoord, .pil.s-goedgekeurd { background: var(--goed-tint); color: var(--goed); }
.pil.s-vervallen { color: var(--zacht); } .pil.s-opm { background: var(--over-tint); color: var(--over); }

/* tabellen */
.tabelwrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-family: var(--kop); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); font-weight: 600; padding: .5rem .6rem; border-bottom: 1px solid var(--rand-sterk); }
td { padding: .7rem .6rem; border-bottom: 1px solid var(--rand); vertical-align: middle; color: var(--tekst-body); }
tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--vlak); }
td.acties { white-space: nowrap; text-align: right; } td.acties .knop { margin: 0 0 0 .3rem; }
td a { font-weight: 600; text-decoration: none; color: var(--tekst); } td a:hover { color: var(--accent); }

/* stappen in de zijkolom */
.stappen { list-style: none; padding: 0; margin: .2rem 0 1rem; position: relative; }
.stappen::before { content: ""; position: absolute; left: 7px; top: .8rem; bottom: .8rem; width: 2px; background: var(--rand); }
.stappen li { padding: .3rem 0 .3rem 1.5rem; position: relative; color: var(--zacht); font-size: .9rem; }
.stappen li::before { content: ""; position: absolute; left: 2px; top: .62rem; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rand-sterk); background: var(--grond); }
.stappen li.af { color: var(--tekst); } .stappen li.af::before { background: var(--accent); border-color: var(--accent); }
.zijkolom .knop { width: 100%; margin: .25rem 0; }

/* opmerkingen */
.draad { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; }
.opmerking { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--rond-kaart); padding: .65rem .85rem; font-size: .9rem; }
.opmerking.van-klant { border-left: 3px solid var(--accent); } .opmerking.van-techsolv { border-left: 3px solid var(--teal); }
.opm-kop { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .85rem; } .opm-kop b { color: var(--tekst); }
.opmerking p { margin: .3rem 0; white-space: pre-wrap; }
.antwoord { background: var(--vlak-licht); border-radius: var(--rond-kaart); padding: .5rem .75rem; margin-top: .45rem; } .antwoord b { color: var(--tekst); }

/* tekenen */
.bevestigingen { display: flex; flex-direction: column; gap: .4rem; margin: .2rem 0 .5rem; }
.bevestigingen label { display: flex; gap: .6rem; align-items: flex-start; font: inherit; color: var(--tekst-body); font-size: .92rem; margin: 0; }
.bevestigingen input { width: 18px; height: 18px; min-height: 0; margin-top: .2rem; flex: 0 0 auto; accent-color: var(--accent); }
.tekenvak { position: relative; border: 1px dashed var(--rand-sterk); border-radius: var(--rond-formulier); background: #fff; }
.tekenvak canvas { width: 100%; height: auto; display: block; touch-action: none; border-radius: var(--rond-formulier); cursor: crosshair; }
.tekenvak .tekenhint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #8a9199; font-size: .85rem; pointer-events: none; text-align: center; width: 80%; }
.tekenvak canvas.getekend + .tekenhint { display: none; }
.tekenvak .knop { position: absolute; right: .4rem; bottom: .4rem; width: auto !important; margin: 0; background: #fff; color: var(--inkt); border-color: #cfccc3; }
.uploadknop { cursor: pointer; width: 100%; margin: .3rem 0 0; font-size: .8rem; }
.codeblok { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; } .codeblok .knop { width: 100%; margin: 0; }
.codeblok input { max-width: 180px; letter-spacing: .25em; font-size: 1.1rem; text-align: center; }
.klaar { background: var(--goed-tint); border: 1px solid rgb(79 179 166 / .35); border-radius: var(--rond-kaart); padding: .9rem 1rem; color: var(--tekst); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* telefoon en tablet */
@media (max-width: 720px) {
  html { font-size: 15px; }
  .kop { padding: .6rem .9rem; } .merk .sub { display: none; } .kopnav { gap: .3rem; font-size: .85rem; } .kopnav .sub { display: none; }
  .wrap { padding: .9rem .8rem 3rem; } .kaart { padding: .95rem 1rem 1.05rem; border-radius: var(--rond-kaart); }
  .documentframe { height: 62vh; min-height: 360px; }
  .knop { min-height: 46px; } .knop.klein { min-height: 36px; }
  td.acties { white-space: normal; text-align: left; } td.acties .knop { margin: .2rem .3rem .2rem 0; }
  .voet { flex-direction: column; gap: .3rem; }
}