:root { --accent: #d6177f; --tekst: #1d1d1f; --zacht: #6b6b70; --achter: #f6f5f3; --vlak: #ffffff; --rand: #dcdad6; --fout: #c0262d; --goed: #1f7a3d; --hoek: 14px; }
@media (prefers-color-scheme: dark) { :root { --tekst: #f2f2f3; --zacht: #a3a3a8; --achter: #161618; --vlak: #1f1f22; --rand: #3a3a3f; --fout: #ff6b70; --goed: #5fd38a; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--achter); color: var(--tekst); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
body.app { display: block; padding: 0 16px 48px; }
.kaart { width: 100%; max-width: 380px; padding: 28px; border: 1px solid var(--rand); border-radius: var(--hoek); }
h1 { margin: 0 0 20px; font-size: 1.4rem; }
h2 { font-size: 1.15rem; margin: 28px 0 8px; }
h3 { font-size: 1rem; margin: 20px 0 8px; }
form, section { display: grid; gap: 10px; }
#beheer section { display: block; }
label { font-weight: 600; font-size: .9rem; }
input, textarea, select { padding: 10px 12px; font: inherit; color: inherit; background: transparent; border: 1px solid var(--rand); border-radius: 10px; }
input:focus-visible, select:focus-visible, button:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[aria-invalid="true"] { border-color: var(--fout); background: color-mix(in srgb, var(--fout) 8%, transparent); }
button { padding: 11px 14px; font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 10px; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .6; cursor: progress; }
button.tweede { color: var(--accent); background: transparent; }
button.tweede:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); filter: none; }
button.link { color: var(--accent); background: none; border-color: transparent; padding: 4px 0; font-weight: 500; text-align: left; }
button.link:hover { text-decoration: underline; filter: none; }
.zacht { color: var(--zacht); }
.klein { font-size: .875rem; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#melding { min-height: 1.5em; margin: 14px 0 0; color: var(--zacht); }
#melding.fout { color: var(--fout); }

/* Beheer */
#beheer { max-width: 1100px; margin: 0 auto; }
.kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 0 12px; }
.kop h1 { margin: 0; }
.kop p { margin: 2px 0 0; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rand); }
.tabs.onder { margin-top: 4px; }
.tab { color: var(--zacht); background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 12px; font-weight: 600; }
.tab:hover { color: var(--tekst); filter: none; }
.tab[aria-pressed="true"] { color: var(--tekst); border-bottom-color: var(--accent); }
.balk-melding { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--goed) 12%, transparent); }
.balk-melding.fout { background: color-mix(in srgb, var(--fout) 12%, transparent); color: var(--fout); }
.actiebalk { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 -16px; padding: 12px 16px; background: var(--achter); border-bottom: 1px solid var(--rand); }
.stand { margin: 0; font-size: .9rem; }
.stand strong { font-weight: 600; }
.stand .vies { color: var(--accent); font-weight: 600; }
.knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.knoppen.eind { justify-content: flex-end; margin-top: 20px; }
.knoppen button { padding: 8px 12px; font-size: .9rem; }
.paneel { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--rand); border-radius: var(--hoek); background: var(--vlak); }
.paneel h3 { margin-top: 0; }
.paneel ul { margin: 6px 0 0; padding-left: 20px; }
.fout-paneel { border-color: var(--fout); }
.fout-paneel h3 { color: var(--fout); }
.leeg { padding: 32px 0; color: var(--zacht); text-align: center; }
.ok { color: var(--goed); font-weight: 600; }

.blok { margin-top: 8px; }
.blok > p { margin: 0 0 8px; }
.scroll { max-width: calc(100vw - 32px); overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--hoek); background: var(--vlak); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--rand); white-space: nowrap; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font-weight: 600; color: var(--zacht); font-size: .8rem; }
tbody th { font-weight: 600; }
td input { width: 6.5em; padding: 6px 8px; text-align: right; border-radius: 8px; font-variant-numeric: tabular-nums; }
td input.tekstveld { width: 100%; min-width: 14em; text-align: left; }
.euro { position: relative; display: inline-block; }
.euro::before { content: "€"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--zacht); font-size: .85em; pointer-events: none; }
.euro input { padding-left: 22px; }
td.uitleg { white-space: normal; color: var(--zacht); font-size: .8rem; min-width: 10em; }
td.aanvraag label { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; }
input.gewijzigd { border-color: var(--accent); }
input.gewijzigd[aria-invalid="true"], input[aria-invalid="true"] { border-color: var(--fout); border-width: 2px; }
button:disabled { opacity: .4; cursor: not-allowed; filter: none; }

.lijst { display: grid; gap: 10px; margin-top: 12px; }
.regel { padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--hoek); background: var(--vlak); }
.regel-kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; }
.regel-kop .knoppen button { padding: 6px 10px; }
.regel p { margin: 4px 0 0; }
.label { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #fff; background: var(--accent); vertical-align: 2px; }
details { margin-top: 6px; }
summary { cursor: pointer; color: var(--accent); font-size: .875rem; }
.wijz { margin: 6px 0 0; padding-left: 18px; font-size: .875rem; }
.wijz del { color: var(--zacht); }
#logboek-meer { margin-top: 12px; }

dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 24px; color: var(--tekst); background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--hoek); }
dialog::backdrop { background: rgb(0 0 0 / .4); }
dialog h2 { margin-top: 0; }
dialog textarea { width: 100%; min-height: 4.5em; resize: vertical; }
dialog form { display: block; }

@media (max-width: 600px) {
  .kop { flex-wrap: wrap; }
  .actiebalk { position: static; }
  .knoppen button { flex: 1 1 auto; }
}
td input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--accent); }

.procent { position: relative; display: inline-block; width: fit-content; justify-self: start; }
.procent::after { content: "%"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--zacht); font-size: .85em; pointer-events: none; }
input.marge { width: 7em; padding: 6px 22px 6px 8px; text-align: right; border-radius: 8px; font-variant-numeric: tabular-nums; }
.instellingen { display: grid; gap: 14px; margin-top: 8px; }
.schakel { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.schakel input { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--accent); }
.marges { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.marges label { display: grid; gap: 4px; font-weight: 500; font-size: .875rem; }
.marge-regel { margin: 0 0 8px; }
.marge-regel label { font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
/* Proefberekening (C3c) */
.berekening { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rand); }
.berekening h4 { margin: 0 0 4px; }
.berekening-regels td { white-space: normal; vertical-align: top; }
.berekening-regels td.bedrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.berekening-regels tfoot td { border-bottom: 0; }
.berekening-regels tr.totaal td { font-weight: 700; border-top: 2px solid var(--rand); }
.berekening .fout { color: var(--fout); }

/* BG Digital: hostnamen (C5) */
.kaart.breed { max-width: 640px; }
.hostlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hostlijst li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--vlak); }
.hostlijst .naam { font-weight: 600; overflow-wrap: anywhere; }
.hostlijst .status { flex-basis: 100%; margin: 0; font-size: .875rem; }
.hostlijst button { padding: 6px 10px; font-size: .875rem; }
.keuze { display: flex; gap: 16px; margin: 0; padding: 0; border: 0; }
.keuze legend { font-weight: 600; font-size: .9rem; margin-bottom: 4px; padding: 0; }
.keuze label { font-weight: 400; display: flex; gap: 6px; align-items: center; }
#host-melding { min-height: 1.5em; margin: 0; }
#host-melding.fout { color: var(--fout); }