/* Beheeromgeving VerwarmingCentrale — eigen stylesheet, geen enkele regel van de website.
   Dit is een werkscherm: compacte koppen, tabel eerst, geen kleurbanden, geen marketingritme.
   Alleen de huisstijlkleuren en de twee merkletters zijn hetzelfde. */

@font-face{font-family:DM Sans;src:url(fonts/dmsans-var-latin.woff2)format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-var-latin.woff2)format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

:root{
  --vc-blue:#1B7FA8; --vc-blue-deep:#10556F; --vc-green:#4E8F6E;
  --vc-orange:#F5A200; --vc-yellow:#FFC800;
  --ink:#14181B; --muted:#5B6770; --line:#E4E8EA; --bg:#FFFFFF; --sand:#F6F8F9;
  --r:8px; --r-pill:999px;
  --bar:56px;           /* hoogte van de bovenbalk */
  --wrap:1280px;
  --sp:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sand); color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--vc-blue); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
h1,h2,h3{font-family:Archivo,"DM Sans",system-ui,sans-serif; margin:0; font-variation-settings:"wdth" 104,"wght" 600; letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--vc-orange); outline-offset:2px; border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- bovenbalk */
.bar{
  position:sticky; top:0; z-index:40;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.bar__in{
  max-width:var(--wrap); margin:0 auto; min-height:var(--bar);
  display:flex; align-items:center; gap:20px; padding:0 20px;
}
.bar__logo{display:flex; align-items:center; gap:10px; flex:none}
.bar__logo img{display:block; width:104px; height:auto}
.bar__merk{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border-left:1px solid var(--line); padding-left:10px;
}
/* overflow voor smalle schermen, maar zonder zichtbare balk — die tekende zich op sommige
   systemen als een pijltjesbalk midden in de menubalk. */
.nav{display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  position:relative; display:inline-flex; align-items:center; height:var(--bar);
  padding:0 12px; color:var(--muted); font-weight:500; white-space:nowrap; text-decoration:none;
}
.nav a:hover{color:var(--ink); background:var(--sand)}
.nav a[aria-current]{color:var(--ink); font-weight:700}
/* Actieve pagina: streep onder het item, niet een gekleurd blok — rustiger bij lang kijken. */
.nav a[aria-current]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--vc-orange);
}
.badge{
  display:inline-block; min-width:18px; margin-left:6px; padding:0 5px; border-radius:var(--r-pill);
  background:var(--vc-orange); color:var(--ink); font-size:11px; font-weight:700; text-align:center;
}
.bar__eind{display:flex; align-items:center; gap:12px; flex:none; margin-left:auto}
.wie{display:flex; flex-direction:column; line-height:1.2; text-align:right}
.wie b{font-size:13px}
.wie span{font-size:11px; color:var(--muted)}
.uit{
  background:none; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:7px 14px; font:inherit; font-size:13px; font-weight:700; color:var(--ink); cursor:pointer;
}
.uit:hover{border-color:var(--ink)}

@media (max-width:720px){
  .bar__in{flex-wrap:wrap; padding:8px 16px; gap:8px 14px}
  .nav{order:3; width:100%; border-top:1px solid var(--line)}
  .nav a{height:44px}
  .nav a[aria-current]::after{bottom:0}
  .wie{display:none}
}

/* ---------------------------------------------------------------- pagina */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.kop{
  background:var(--bg); border-bottom:1px solid var(--line);
}
.kop__in{
  max-width:var(--wrap); margin:0 auto; padding:20px;
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 24px;
}
.kop h1{font-size:21px; line-height:1.25}
.kop p{margin:4px 0 0; color:var(--muted); font-size:14px; max-width:70ch}
.kop__acties{margin-left:auto; display:flex; flex-wrap:wrap; gap:8px}
.blok{padding:20px 0}
.blok + .blok{padding-top:0}
h2.sectie{font-size:15px; margin:0 0 12px; letter-spacing:0}

/* ---------------------------------------------------------------- knoppen */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:38px; padding:0 16px; border-radius:var(--r-pill);
  font:inherit; font-size:14px; font-weight:700; cursor:pointer; border:1px solid transparent;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn--p{background:var(--vc-orange); color:var(--ink)}
.btn--p:hover{background:#e09600}
.btn--s{background:var(--bg); color:var(--ink); border-color:var(--line)}
.btn--s:hover{border-color:var(--ink)}
.btn--groot{min-height:44px; padding:0 22px}

/* ---------------------------------------------------------------- kaart, tabel */
.kaart{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.kaart + .kaart{margin-top:10px}

.tabelbox{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); overflow:auto}
table.lijst{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
table.lijst th{
  position:sticky; top:0; background:var(--sand); text-align:left; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.lijst td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
table.lijst tr:last-child td{border-bottom:0}
table.lijst tbody tr:hover{background:var(--sand)}
table.lijst .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.leeg{padding:24px 14px; color:var(--muted)}

.chip{
  display:inline-block; padding:2px 9px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700; letter-spacing:.03em; background:var(--sand); color:var(--muted);
  border:1px solid var(--line); white-space:nowrap;
}
.chip--ok{background:#EAF4EE; color:#2F6B4C; border-color:#CFE4D8}
.chip--wacht{background:#FFF6E3; color:#8A5D00; border-color:#F6E3B8}
.chip--basis{background:#FFF1D6; color:#8A5D00; border-color:#F6DCAE}

/* ---------------------------------------------------------------- formulier */
.velden{display:grid; gap:14px 16px; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px}
.veld--breed{grid-column:1/-1}
@media (max-width:640px){ .velden{grid-template-columns:1fr} }
label.lbl{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px}
.inv{
  width:100%; min-height:38px; padding:7px 11px; font:inherit; font-size:14px;
  color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
}
.inv:focus{border-color:var(--vc-blue); outline:2px solid rgba(27,127,168,.18); outline-offset:0}
select.inv{appearance:auto}
.hint{display:block; margin-top:5px; font-size:12px; color:var(--muted)}
.fout{
  display:block; margin-top:5px; font-size:12px; font-weight:700; color:#A33;
}
[aria-invalid="true"]{border-color:#A33}

.melding{border-radius:var(--r); padding:11px 14px; font-size:14px; font-weight:700; margin-bottom:16px}
.melding--ok{background:#EAF4EE; color:#2F6B4C}
.melding--fout{background:#FBECEC; color:#A33}
.melding--let{background:#FFF6E3; color:#8A5D00}

/* Toestelregel op het contractformulier: aantal rechts, prijs erboven. */
.toestel{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px}
.toestel__tekst{flex:1 1 260px; min-width:0}
.toestel__tekst b{display:block; font-size:14px}
.toestel__tekst > span{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.toestel__prijs{flex:none; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.toestel input{width:76px; text-align:center}
.toestel[data-gekozen="1"]{border-color:var(--vc-orange)}
.totaal{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin-top:14px; padding-top:14px; border-top:2px solid var(--ink); max-width:760px;
}
.totaal b{font-size:15px}
.totaal span{font-family:Archivo,sans-serif; font-size:24px; font-variation-settings:"wght" 600; font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- inloggen */
.login{min-height:100dvh; display:grid; place-items:center; padding:24px}
.login__kaart{width:100%; max-width:380px}
.login__kaart img{display:block; margin:0 auto 22px; width:150px; height:auto}
.login__doos{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:24px}
.login h1{font-size:19px}
.login .velden{grid-template-columns:1fr; margin-top:18px}

/* ---------------------------------------------------------------- contract */
.doc{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:24px; overflow-x:auto}
.doc h1{font-size:19px}
.doc h2{font-size:15px; margin-top:22px}
.doc p,.doc li{font-size:14px; line-height:1.6; margin-top:8px; max-width:78ch; color:var(--ink)}
.doc ul{padding-left:18px; margin:0}
.doc table{width:100%; border-collapse:collapse; margin-top:10px; font-size:14px}
.doc td{border-bottom:1px solid var(--line); padding:6px 8px; text-align:left}
.doc td:first-child{color:var(--muted)}
.doc text-field,.doc date-field,.doc signature-field{display:inline-block; border-bottom:1px dashed var(--muted)}

/* Wijzigen gebeurt in een venster boven de lijst: het formulier onderaan de pagina was niet
   te zien vanaf de rij waar je op klikte. :target doet het openen en sluiten — geen JavaScript,
   en de knop blijft een gewoon anker dat ook met toetsenbord en in een nieuw tabblad werkt. */
.modal{
  display:none; position:fixed; inset:0; z-index:60;
  background:rgba(20,24,27,.45); padding:24px; overflow-y:auto;
}
.modal:target{display:grid; place-items:start center}
.modal__doos{
  background:var(--bg); border-radius:12px; padding:20px; width:100%; max-width:720px;
  margin:24px 0; box-shadow:0 10px 40px rgba(20,24,27,.18);
}
.modal__kop{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px}
.modal__kop h2{font-size:17px; margin:0}
.modal__sluit{font-size:13px; font-weight:700}
/* Klikken naast het venster sluit het: een link over het hele scherm, ónder de doos. */
.modal__weg{position:absolute; inset:0; z-index:-1}

.kaartvlak{
  position:relative; height:min(70vh, 640px); border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg); overflow:hidden;
}
/* De opgeslagen afbeelding vult het kaartvlak tot de echte kaart er is (of als die uitblijft). */
.kaartstil__plaatje{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.kaartstil__knop{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:8px 14px; font-size:13px; font-weight:700; color:var(--ink);
  box-shadow:0 2px 10px rgba(20,24,27,.15); max-width:calc(100% - 32px);
}
.kaartstil__knop:empty{display:none}
.kaartstil__leeg{
  position:absolute; inset:0; display:grid; place-items:center;
  background:var(--sand); color:var(--muted); font-size:15px;
}
[x-cloak]{display:none !important}

/* ---------------------------------------------------------------- detail */
.dl{margin:0; font-size:14px}
.dl div{display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--line)}
.dl div:last-child{border-bottom:0}
.dl dt{color:var(--muted)}
.dl dd{margin:0; font-weight:700; text-align:right}
.docs{list-style:none; margin:10px 0 0; padding:0}
.docs li{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px}
.docs li:last-child{border-bottom:0}
.docs span{color:var(--muted); font-size:12px}
.paginering{display:flex; gap:8px; margin-top:14px}
.zoek{display:flex; gap:8px; max-width:520px; margin-bottom:14px}
.zoek .inv{flex:1}
.telling{font-size:13px; color:var(--muted); margin:0 0 10px}