/* Bconnect Facturatie — huisstijl: Bconnect Blue #141464, paars #6E4C96, magenta #AA028C (spaarzaam) */
:root {
  --blauw: #141464; --blauw-2: #1f1f7a; --paars: #6E4C96; --paars-licht: #f0ecf6; --magenta: #AA028C;
  --achter: #eef1f7; --kaart: #ffffff; --tekst: #2d3742; --mute: #64707d; --lijn: #e6ebf1; --info: #f0f1f9;
  --groen: #1f8a5b; --groen-licht: #e7f5ee; --oranje: #b45f06; --oranje-licht: #fdf1e3; --rood: #b42318; --rood-licht: #fdecea;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: var(--tekst);
       background: var(--achter); line-height: 1.45; }
a { color: var(--paars); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; color: var(--blauw); margin: 0 0 4px; font-weight: 700; }
h2 { font-size: 16px; color: var(--blauw); margin: 0 0 12px; font-weight: 650; }
h3 { font-size: 14px; color: var(--blauw); margin: 0 0 8px; font-weight: 650; }
.mute { color: var(--mute); }
.klein { font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* layout */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.zijbalk { background: var(--blauw); color: #fff; padding: 22px 14px; position: sticky; top: 0; height: 100vh;
           display: flex; flex-direction: column; border-top: 5px solid var(--paars); }
.zijbalk .logo { width: 150px; margin: 2px 8px 6px; }
.zijbalk .sub { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; margin: 0 8px 22px; }
.nav a { display: flex; align-items: center; gap: 10px; color: #dfe3f5; padding: 9px 10px; border-radius: 8px; margin-bottom: 2px; font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.nav a.actief { background: rgba(255,255,255,.13); color: #fff; box-shadow: inset 3px 0 0 var(--paars); }
.nav .kop { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .5; margin: 16px 10px 6px; }
.nav svg { width: 17px; height: 17px; flex: none; opacity: .9; }
.zijbalk .wie { margin-top: auto; font-size: 12px; padding: 10px; border-top: 1px solid rgba(255,255,255,.12); color: #c9cee8; }
.zijbalk .wie b { color: #fff; display: block; font-size: 13px; }
.rolbadge { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; background: var(--paars);
            color: #fff; padding: 1px 7px; border-radius: 10px; margin-left: 4px; }
.inhoud { padding: 28px 34px 60px; max-width: 1400px; }
.kopregel { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }

/* kaarten */
.kaart { background: var(--kaart); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 1px 2px rgba(20,20,100,.05);
         border: 1px solid var(--lijn); margin-bottom: 18px; }
.raster { display: grid; gap: 16px; }
.r4 { grid-template-columns: repeat(4, 1fr); }
.r3 { grid-template-columns: repeat(3, 1fr); }
.r2 { grid-template-columns: 2fr 1fr; }
.stat { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 16px 18px; }
.stat .w { font-size: 26px; font-weight: 700; color: var(--blauw); font-variant-numeric: tabular-nums; }
.stat .l { color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

/* tabellen */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mute);
     font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--lijn); background: #fafbfd; }
td { padding: 9px 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tbody tr.klik:hover { background: #f7f8fc; cursor: pointer; }
tr.tekst td { color: var(--mute); font-style: italic; padding-top: 6px; padding-bottom: 6px; }
.tabelkaart { padding: 0; overflow: hidden; }
.tabelkaart .kaartkop { padding: 16px 20px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* labels */
.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.tag.blauw { background: var(--info); color: var(--blauw); }
.tag.paars { background: var(--paars-licht); color: var(--paars); }
.tag.groen { background: var(--groen-licht); color: var(--groen); }
.tag.oranje { background: var(--oranje-licht); color: var(--oranje); }
.tag.rood { background: var(--rood-licht); color: var(--rood); }
.tag.grijs { background: #eef0f3; color: var(--mute); }
.melding { background: var(--oranje-licht); color: #7a4105; border-radius: 8px; padding: 8px 12px; margin: 6px 0; font-size: 13px; }
.melding.fout { background: var(--rood-licht); color: var(--rood); }
.melding.ok { background: var(--groen-licht); color: var(--groen); }
.melding.info { background: var(--info); color: var(--blauw); }

/* formulieren */
label { display: block; font-size: 12px; font-weight: 600; color: var(--mute); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #d5dbe5; border-radius: 8px; font: inherit; background: #fff; color: var(--tekst); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(110,76,150,.25); border-color: var(--paars); }
textarea { min-height: 64px; resize: vertical; }
.veld { margin-bottom: 12px; }
.velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst); font-weight: 500; }
.knop { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid transparent;
        background: var(--blauw); color: #fff; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.knop:hover { background: var(--blauw-2); text-decoration: none; }
.knop.paars { background: var(--paars); }
.knop.licht { background: #fff; color: var(--blauw); border-color: #d5dbe5; }
.knop.licht:hover { background: #f5f6fa; }
.knop.gevaar { background: #fff; color: var(--rood); border-color: #f1c2bd; }
.knop.klein { padding: 4px 10px; font-size: 12px; }
.knop[disabled] { opacity: .45; cursor: not-allowed; }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zoekbalk { display: flex; gap: 10px; flex-wrap: wrap; }
.zoekbalk input { max-width: 320px; }
.zoekbalk select { max-width: 200px; }
.filters a { padding: 6px 12px; border-radius: 20px; background: #fff; border: 1px solid var(--lijn); color: var(--tekst); font-size: 13px; }
.filters a.actief { background: var(--blauw); color: #fff; border-color: var(--blauw); }

/* klantdetail */
.groep { border: 1px solid var(--lijn); border-radius: var(--radius); background: #fff; margin-bottom: 18px; overflow: hidden; }
.groep > .gkop { background: linear-gradient(0deg, #fafbfd, #fff); padding: 14px 18px; border-bottom: 1px solid var(--lijn);
                 display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.groep .gbody { padding: 14px 18px; }
.blok { border-left: 3px solid var(--paars); background: #fcfcfe; border-radius: 0 10px 10px 0; padding: 12px 14px; margin: 12px 0; }
.blok .bkop { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.accounts { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.account { background: var(--info); color: var(--blauw); border-radius: 6px; padding: 3px 4px 3px 9px; font-size: 12px;
           display: inline-flex; align-items: center; gap: 4px; }
.account form { display: inline; }
.account button { border: 0; background: none; color: var(--mute); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; }
.prijzen td { padding: 6px 8px; font-size: 13px; }
details > summary { cursor: pointer; color: var(--paars); font-weight: 600; font-size: 13px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.lade { background: #fff; border: 1px solid var(--lijn); border-radius: 10px; padding: 14px; margin-top: 10px; }

/* run */
.factuurrij td { cursor: pointer; }
.factuurdetail td { background: #fafbfd; padding: 0; }
.factuurdetail .binnen { padding: 10px 20px 16px 44px; }
.afw-plus { color: var(--oranje); }
.afw-min { color: var(--rood); }
.stap { display: flex; gap: 10px; align-items: center; }
.stap .n { width: 26px; height: 26px; border-radius: 50%; background: var(--paars); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.dropzone { border: 2px dashed #c9cfe0; border-radius: var(--radius); padding: 34px; text-align: center; background: #fafbfd; }
.dropzone input { margin-top: 12px; }
code { background: #f1f3f8; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* login */
.loginpagina { min-height: 100vh; display: grid; place-items: center; background: var(--blauw);
               background-image: radial-gradient(circle at 80% 10%, rgba(110,76,150,.55), transparent 45%); }
.loginkaart { background: #fff; border-radius: 16px; padding: 34px; width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.loginkaart .logo { background: var(--blauw); border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; }
.loginkaart .logo img { width: 160px; display: block; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .zijbalk { position: static; height: auto; }
  .r4, .r3, .r2 { grid-template-columns: 1fr 1fr; }
  .inhoud { padding: 18px 16px; }
}
.velden { margin-bottom: 12px; }

/* accountpagina: dienst-tabs en instellingssecties */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--lijn); margin-bottom: 18px; }
.tabs a, .tabs span { padding: 10px 16px; font-weight: 600; color: var(--mute); border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0; }
.tabs a:hover { text-decoration: none; background: #fff; color: var(--blauw); }
.tabs a.actief { color: var(--blauw); border-bottom-color: var(--paars); background: #fff; }
.tabs span.uit { opacity: .55; cursor: not-allowed; }
.tabs .tag { margin-left: 6px; }
.sectie { background: var(--kaart); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(20,20,100,.06); margin-bottom: 16px; scroll-margin-top: 16px; }
.sectie > .skop { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--lijn); }
.sectie > .skop .nr { width: 26px; height: 26px; border-radius: 50%; background: var(--paars-licht); color: var(--paars); font-weight: 700; display: grid; place-items: center; font-size: 13px; flex: none; }
.sectie > .skop h2 { margin: 0; }
.sectie > .skop .rechts { margin-left: auto; }
.sectie > .sbody { padding: 16px 18px; }
.keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.keuze { position: relative; border: 1.5px solid var(--lijn); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: #fff; display: block; margin: 0; }
.keuze:hover { border-color: #c9cfe6; }
.keuze input { position: absolute; opacity: 0; pointer-events: none; }
.keuze b { display: block; color: var(--blauw); font-size: 13px; }
.keuze span { display: block; font-size: 12px; color: var(--mute); font-weight: 400; margin-top: 2px; }
.keuze:has(input:checked) { border-color: var(--paars); background: var(--paars-licht); box-shadow: 0 0 0 2px rgba(110,76,150,.12); }
.optie { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.optie > label.check { font-weight: 600; color: var(--blauw); }
.optie:has(> label.check input:checked) { border-color: var(--paars); background: #fbfaff; }
.optie .velden { margin-top: 8px; }
.prijsveld { position: relative; }
.prijsveld input { padding-left: 24px !important; }
.prijsveld::before { content: "€"; position: absolute; left: 9px; bottom: 8px; color: var(--mute); font-size: 13px; }
.notitie { font-size: 12px; color: var(--oranje); margin-top: 3px; }
.voetbalk { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-top: 1px dashed var(--lijn); margin-top: 14px; padding-top: 12px; }
.voetbalk .veld { margin: 0; max-width: 220px; }
.cattabel td { padding: 4px 6px; vertical-align: middle; }
.cattabel input[type=text] { padding: 5px 8px; font-size: 13px; }
.telling { display: flex; flex-wrap: wrap; gap: 6px; }
.voorbeeld td { padding: 5px 8px; font-size: 12.5px; }
.voorbeeld tr.tekst td { color: var(--mute); font-style: italic; }
.zijkolom .kaart h2 { display: flex; justify-content: space-between; align-items: center; }
.raster.zij { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
@media (max-width: 1100px) { .raster.zij { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }
a.accountkaart { display: block; color: inherit; }
a.accountkaart:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--paars-licht), 0 1px 2px rgba(20,20,100,.06); }
.velden .prijsveld::before { bottom: auto; top: 31px; }
.checks { display: grid; gap: 8px; }
.check-r { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--lijn); }
.check-r .ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; flex: none; }
.check-r.goed .ic { background: var(--groen); } .check-r.fout .ic { background: var(--rood); } .check-r.open .ic { background: var(--oranje); }
.check-r.goed { background: var(--groen-licht); border-color: transparent; } .check-r.fout { background: var(--rood-licht); border-color: transparent; } .check-r.open { background: var(--oranje-licht); border-color: transparent; }
.check-r .r { margin-left: auto; }
.prijspunt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-left: 3px solid var(--oranje); background: #fff; border-radius: 6px; margin-bottom: 5px; }
.prijspunt.ok { border-left-color: var(--groen); opacity: .8; }
.prijspunt .bedragen { margin-left: 8px; white-space: nowrap; }
.aansluiting { font-size: 15px; margin: 4px 0 10px; }
.aansluiting b { color: var(--blauw); }
.testband { background: repeating-linear-gradient(135deg, #fff4d6, #fff4d6 14px, #ffefc2 14px, #ffefc2 28px); border: 1px solid #f1d38a; color: #6b4a00; padding: 9px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; }
pre.xml { text-align: left; font-size: 11px; background: #f6f7fb; border: 1px solid var(--lijn); border-radius: 8px; padding: 10px; max-width: 640px; max-height: 340px; overflow: auto; white-space: pre; }
.segment { display: inline-flex; background: #e3e7f1; border-radius: 999px; padding: 3px; gap: 2px; flex: none; }
.segment label { margin: 0; cursor: pointer; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mute); transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.segment span em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--mute); background: rgba(20,20,100,.06); border-radius: 999px; padding: 1px 7px; }
.segment label:hover span { color: var(--blauw); }
.segment input:checked + span { background: #fff; color: var(--blauw); box-shadow: 0 1px 3px rgba(20,20,100,.15); }
.segment input:checked + span em { background: var(--paars-licht); color: var(--paars); }
.segment input:focus-visible + span { outline: 2px solid var(--paars); outline-offset: 1px; }
.stip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.stip.groen { background: var(--groen); } .stip.grijs { background: #a3abb8; }
.schakel-blok { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 10px 16px 10px 12px; box-shadow: 0 1px 2px rgba(20,20,100,.06); }
.schakel-blok b { color: var(--blauw); font-size: 14px; }
.schakel-blok.uit b { color: var(--mute); }
.schakel { position: relative; width: 46px; height: 26px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: #c8cfdc; transition: background .2s; flex: none; }
.schakel .knopje { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.schakel-blok.aan .schakel { background: var(--groen); }
.schakel-blok.aan .schakel .knopje { transform: translateX(20px); }
.schakel:focus-visible { outline: 2px solid var(--paars); outline-offset: 2px; }
.schakel[disabled] { cursor: not-allowed; opacity: .6; }
.concept { background: #fff; border: 1px solid var(--lijn); border-radius: 10px; padding: 14px 16px; max-width: 980px; }
.concept-kop { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn); margin-bottom: 8px; font-size: 13px; }
.concept-kop .l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); margin-bottom: 2px; }
.concept-regels td { padding: 5px 8px; font-size: 13px; }
.concept-regels tr.tekst td { color: var(--mute); font-style: italic; background: #fafbfd; }
.concept-tot { margin-left: auto; max-width: 320px; margin-top: 10px; font-size: 13px; }
.concept-tot div { display: flex; justify-content: space-between; padding: 3px 0; }
.concept-tot div:last-child { border-top: 1px solid var(--lijn); margin-top: 3px; padding-top: 6px; color: var(--blauw); }
.prullenbak { display: inline; margin: 0; }
.prullenbak button { border: 0; background: transparent; padding: 5px; border-radius: 7px; cursor: pointer; color: #a3abb8; line-height: 0; }
.prullenbak button svg { width: 17px; height: 17px; }
.prullenbak button:hover { color: var(--rood); background: var(--rood-licht); }

/* filterchips accountlijst */
.filterchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -6px 0 14px; }
.filterchips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: #fff;
  border: 1px solid var(--lijn); font-size: 13px; color: inherit; text-decoration: none; }
.filterchips .chip em { font-style: normal; font-size: 11px; background: #eef0f6; border-radius: 999px; padding: 0 7px; color: #555; }
.filterchips .chip:hover { border-color: #b9c0d6; }
.filterchips .chip.actief { background: var(--paars, #6b4fd8); border-color: var(--paars, #6b4fd8); color: #fff; }
.filterchips .chip.actief em { background: rgba(255,255,255,.25); color: #fff; }
.filterchips .chip.leeg { opacity: .55; }

/* handmatige splitsing */
.splitsblok { padding: 12px 0; border-top: 1px solid var(--lijn); }
.splitsblok:first-of-type { border-top: 0; padding-top: 4px; }
.splitstabel { width: auto; min-width: 420px; margin-top: 6px; }
.splitstabel td, .splitstabel th { padding: 4px 10px; }
.splitstabel td:first-child { min-width: 220px; }

/* factuur handmatig aanpassen */
.aanpastabel input[type=text], .aanpastabel input[type=number], .aanpastabel select { padding: 5px 7px; }
.aanpastabel tr.tekst td { background: #f7f8fb; }
.aanpastabel tr.nieuw td { background: #fbfcff; }
.aanpastabel input:disabled { opacity: .35; }
.aanpastabel select { min-width: 118px; }

/* snel opslaan */
.snel-melding { position: fixed; right: 22px; bottom: 22px; z-index: 50; background: var(--groen); color: #fff; padding: 10px 16px;
  border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: opacity .5s; max-width: 460px; }
.snel-melding.fout { background: var(--rood); }
.snel-melding.weg { opacity: 0; }
#snel-balk { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 40; display: flex; gap: 14px; align-items: center;
  background: #1f2547; color: #fff; padding: 9px 10px 9px 18px; border-radius: 12px; box-shadow: 0 8px 26px rgba(0,0,0,.25); font-size: 13px; }
/* gewijzigd blok: alleen de opslaan-knop van dat blok licht op; de balk onderin telt de blokken */
form[data-gewijzigd] .knop.paars:not(.gevaar), form[data-gewijzigd] > .knop, form[data-gewijzigd] button.knop:not(.licht):not(.gevaar) { box-shadow: 0 0 0 3px var(--oranje-licht); }