:root {
  /* Basiskleuren */
  --brand: rgb(220, 47, 59);        /* #dc2f3b */
  --brand-dark: rgb(192, 38, 49);
  --brand-light: rgb(250, 227, 229);
  --brand-soft: rgb(236, 130, 138);
  --slate: rgb(95, 112, 128);       /* #5f7080 */
  --slate-dark: rgb(72, 86, 99);
  --slate-light: rgb(216, 222, 228);
  --navy: rgb(2, 27, 41);           /* #021b29 */
  --navy-soft: #062d40;
  --navy-light: #0f4258;
  /* Rollen (wisselen in donkere modus, onderaan) */
  --ink: var(--navy);               /* tekst en koppen */
  --hover: rgb(247, 249, 250);
  --selected: rgb(240, 244, 248);
  --chip-bg: var(--navy); --chip-fg: #fff;   /* actieve filterchip */
  --float-bg: var(--navy);                   /* toast */
  /* Rollen */
  --text: var(--ink);
  --muted: var(--slate);
  --line: rgb(228, 232, 236);
  --bg: rgb(243, 245, 247);
  --panel: #ffffff;
  --green: #2e9e6b;
  --warn: #c8811a;                  /* let op: dot, rand */
  --warn-dark: #8a5a0c;             /* let op: tekst op lichte tint */
  --focus: var(--navy-light);       /* toetsenbordfocus */
  --radius: 12px;                   /* kaarten, ook de inlogkaart (was 18px, zoals in onze e-mails) */
  --radius-knop: 8px;              /* knoppen, gelijk aan onze e-mails */
  --radius-veld: 8px;              /* invoervelden, gelijk aan de knoppen */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
svg { display: block; }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 220px;
  flex: 0 0 220px;
  background: var(--navy-soft);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
.sidebar-nav {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.logo {
  display: flex; align-items: center;
  height: 56px; flex: 0 0 56px; padding: 0 20px;
  margin-bottom: 28px; /* eerste menu-item start op de bovenrand van de eerste card */
}
.logo img { height: 22px; width: auto; display: block; }


.nav-group { padding: 0; margin-bottom: 20px; }
.nav-title {
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
  padding: 0 20px 4px;
}
.nav-group a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 20px;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 1px;
}
.nav-group a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-group a.active { background: rgba(255, 255, 255, .16); color: #fff; }
.nav-count {
  font-size: 11px; font-weight: 600; line-height: 18px;
  min-width: 18px; padding: 0 6px; text-align: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .14); color: #fff;
}


/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 56px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 24px 0 0;
}
.topbar-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.icon-btn {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; color: var(--slate-dark);
}
.icon-btn:hover { background: var(--bg); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  flex: 0 0 auto;
}


/* Mededelingenbalk: standaard verborgen.
   Tonen: class "is-visible" toevoegen. Storing/urgent: ook "is-alert" (rood). */
.banner {
  display: none;
  height: 34px;
  background: var(--navy-light);
  color: #fff;
  align-items: center; justify-content: center; gap: 12px;
  font-size: 12px;
}
.banner.is-visible { display: flex; }
.banner.is-alert { background: var(--brand); }
.banner .btn-outline {
  border: 1px solid #fff; border-radius: var(--radius-knop);
  padding: 3px 10px; font-size: 11px; font-weight: 600; color: #fff;
}
.banner .btn-outline:hover { background: rgba(255,255,255,.12); }

.content { counter-reset: selected; padding: 28px 30px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- Card ---------- */
.card {
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
/* Door de ronde hoeken mag inhoud met een eigen achtergrond (hover op een
   teller of regel) niet buiten de hoek steken. Kaarten met een actiemenu
   (.row-actions) knippen we niet af, anders valt het menu weg; daar krijgt
   de laatste tabelrij zelf ronde hoeken. */
.card:not(:has(.row-actions)) { overflow: hidden; }
.card tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius) - 1px); }
.card tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--radius) - 1px); }

/* ---------- Promo ---------- */
.promo {
  display: flex; align-items: center; gap: 28px;
  padding: 18px 28px;
}
.promo-art { flex: 0 0 150px; height: 96px; }
.promo h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.promo p { color: var(--slate-dark); max-width: 520px; margin-bottom: 8px; }
.promo a { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Table block ---------- */
.block-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 14px;
}
.block-head h2 { font-size: 15px; font-weight: 600; white-space: nowrap; }

.toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 24px 16px;
}
.search {
  display: flex; align-items: center; gap: 8px;
  width: 220px; height: 30px;
  border: 1px solid var(--slate-light); border-radius: 4px;
  padding: 0 10px; color: var(--muted);
}
.search input {
  border: 0; outline: 0; width: 100%; min-width: 0; font: inherit; color: var(--text);
  background: transparent;
  -webkit-appearance: none; appearance: none; /* Safari: geen eigen zoekveld-opmaak (en geen eigen kruisje) */
}
.search input::placeholder { color: var(--slate); }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { display: none; -webkit-appearance: none; appearance: none; } /* eigen kruisje (.search-clear) i.p.v. dat van de browser */
.search-clear { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--slate); }
.search-clear:hover { background: var(--bg); color: var(--ink); }
.btn-filter {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--slate-light); border-radius: var(--radius-knop); background: var(--panel);
}
.btn-filter:hover { background: var(--bg); }
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto;
  height: 30px; padding: 0 14px;
  background: var(--brand); color: #fff;
  font-weight: 600; border-radius: var(--radius-knop);
}
.btn-primary:hover { background: var(--brand-dark); }
.toolbar .btn-primary { margin-left: auto; }
/* Knop "Opslaan" die direct na het opslaan even "Opgeslagen" met een vinkje
   toont: opslaan_knop() in includes/inloggen.php. Werkt zonder JavaScript.
   De twee teksten liggen op elkaar en er is er steeds één zichtbaar. Na
   4 seconden, of zodra je weer in een veld van het formulier klikt, staat er
   weer "Opslaan". */
.btn-swap { display: inline-grid; }
.btn-swap > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-swap .btn-swap-done { animation: swap-verberg .01s linear 4s forwards; }
.btn-swap .btn-swap-label { visibility: hidden; animation: swap-toon .01s linear 4s forwards; }
.card:has(.form:focus-within) .btn-swap .btn-swap-done { visibility: hidden; animation: none; }
.card:has(.form:focus-within) .btn-swap .btn-swap-label { visibility: visible; animation: none; }
@keyframes swap-verberg { to { visibility: hidden; } }
@keyframes swap-toon { to { visibility: visible; } }
.card > .toolbar:first-child, .card > .table-form:first-child > .toolbar, .card > .table-form:first-child > .select-bar { padding-top: 20px; } /* zonder kaartkop erboven */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 24px; }
thead th {
  font-size: 12px; font-weight: 600; color: var(--ink);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
tbody td { border-bottom: 1px solid var(--line); color: var(--slate-dark); }
tbody tr:hover td { background: var(--hover); }
td.actions, th.actions { width: 60px; text-align: right; }
td code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--slate-dark); white-space: nowrap; }
.cell-link { color: var(--ink); white-space: nowrap; }
.cell-link:hover { text-decoration: underline; }
.row-menu { width: 26px; height: 26px; border-radius: 4px; display: grid; place-items: center; color: var(--muted); }
.row-menu:hover { background: var(--bg); color: var(--text); }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--slate-dark);
}
.status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
}
.status.pending::before { background: var(--brand-soft); }
.status.off::before { background: var(--slate); }
.status.late { color: var(--brand); }
.status.late::before { background: var(--brand); }

.toggle {
  position: relative; display: inline-block;
  width: 32px; height: 18px;
  border-radius: 999px; background: var(--slate-light);
  vertical-align: middle; cursor: pointer;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: transform .15s;
}
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle:has(input:checked) { background: var(--navy-soft); }
.toggle:has(input:checked)::after { transform: translateX(14px); }
/* Het schuifje als knop (zonder JavaScript): <button class="toggle">, met
   class "is-on" als het aan staat. De knop verstuurt een formulier of opent
   een venster om te bevestigen (Automatisch verlengen op domein-detail.php).
   .toggle-text is het woord Aan of Uit ernaast. */
button.toggle { padding: 0; }
.toggle.is-on { background: var(--navy-soft); }
.toggle.is-on::after { transform: translateX(14px); }
.toggle-text { margin-left: 8px; vertical-align: middle; }

.table-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
  padding: 12px 24px; font-size: 12px; color: var(--muted);
}
.table-foot form { display: flex; align-items: center; gap: 6px; } /* rijen per pagina, met knop omdat er geen JavaScript is */
.table-foot select {
  border: 0; background: transparent; font: inherit; color: var(--text);
  margin-left: 4px;
}
.pager { display: flex; gap: 10px; }
.pager button, .pager a { color: var(--slate-dark); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; }
.pager button:hover, .pager a:hover { background: var(--bg); }
.pager button:disabled { color: var(--slate-light); cursor: default; background: none; }

/* ---------- Popovers (zoeken, meldingen) ---------- */
.icon-btn { position: relative; }
.badge {
  position: absolute; top: 3px; right: 3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--panel);
}
.pop {
  position: fixed; inset: auto;
  top: 52px; right: 30px;
  width: 380px; max-width: calc(100vw - 60px);
  margin: 0; padding: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(2, 27, 41, .12);
  color: var(--text);
  font-size: 13px;
}
.pop::backdrop { background: transparent; }

.pop-search { width: auto; height: auto; border: 0; border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; padding: 12px 14px; }
.pop-search input { font-size: 13px; }
.pop-search kbd {
  font: inherit; font-size: 10px; color: var(--slate);
  border: 1px solid var(--slate-light); border-radius: 3px; padding: 1px 5px;
}
.pop-section { padding: 8px 6px; }
.pop-section + .pop-section { border-top: 1px solid var(--line); }
.pop-title {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--slate); padding: 4px 8px 6px;
}
.result {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 4px;
}
.result:hover, .result:focus { background: var(--bg); outline: 0; }   /* :focus = gekozen met de pijltjes (js/zoeken.js) */
.search-empty { padding: 10px 10px; font-size: 13px; color: var(--slate); }
.search-page-results { padding: 0 18px 16px; }
.result-icon {
  width: 28px; height: 28px; border-radius: 4px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bg); color: var(--slate-dark);
}
.result-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.result-text strong { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-text small { font-size: 11px; color: var(--slate); }

.pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.pop-head strong { font-size: 14px; font-weight: 600; }
.pop-head a, .pop-foot a { font-size: 12px; color: var(--brand); font-weight: 500; }
.pop-head a:hover, .pop-foot a:hover { text-decoration: underline; }
.notif {
  display: flex; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.notif:hover { background: var(--bg); }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: transparent; }
.notif.unread .notif-dot { background: var(--brand); }
.notif-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; min-width: 0; }
.notif-text strong { font-weight: 600; color: var(--ink); }
.notif.unread .notif-text strong { color: var(--ink); }
.pop-head .link-button { font-size: 12px; font-weight: 500; color: var(--brand); background: none; border: 0; padding: 0; cursor: pointer; }
.pop-head .link-button:hover { text-decoration: underline; }
.notif-empty { padding: 12px 16px 16px; font-size: 13px; color: var(--slate); }
.notif-list { padding: 8px; }                                           /* meldingen.php */
.notif:not(.unread) .notif-text strong { font-weight: 500; color: var(--slate-dark); }
.notif-text small { font-size: 12px; color: var(--slate-dark); }
.notif-text time { font-size: 11px; color: var(--slate); }
.pop-foot { padding: 10px 16px; text-align: center; }

/* ---------- Account (topbar) ---------- */
.avatar-btn { display: grid; place-items: center; border-radius: 50%; margin-right: 6px; } /* cirkelrand op de kaartrand (30px) */
.avatar-btn .avatar { width: 28px; height: 28px; }
.avatar-btn:hover .avatar { background: var(--brand-dark); }
.avatar-btn:focus-visible { outline: 2px solid var(--navy-light); outline-offset: 2px; }
.pop-account { width: 240px; }
.pop-account-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pop-account-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pop-account-meta strong { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-account-meta small { font-size: 11px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-account-menu { padding: 6px; }
.pop-account-menu a { display: flex; align-items: center; min-height: 32px; padding: 6px 8px; border-radius: 4px; color: var(--ink); }
.pop-account-menu a:hover, .pop-account-menu a[aria-current="page"] { background: var(--bg); }
.pop-account-menu .is-logout { color: var(--brand); }
.pop-account-sep { border-top: 1px solid var(--line); margin: 6px 0; }

.pop-help { width: 320px; }
.pop-intro {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--line);
}
.pop-intro strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.pop-intro span { font-size: 12px; color: var(--slate); }
.help-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.help-item:last-child { border-bottom: 0; }
.help-item:hover { background: var(--bg); }
.help-item .result-icon { width: 32px; height: 32px; }
.help-item:hover .result-icon { background: var(--brand-light); color: var(--brand); }
.help-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.help-text strong { font-weight: 600; color: var(--ink); }
.help-text small { font-size: 11px; color: var(--slate); }
.help-text small.status { font-size: 11px; color: var(--slate); gap: 5px; }
.help-text small.status::before { width: 6px; height: 6px; }

/* ---------- Overzichtspagina ---------- */
.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: -8px;
}
.page-head h1 { font-size: 18px; font-weight: 600; color: var(--ink); }
.page-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--slate); }
.page-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--slate-dark); }

.block-head .link-more { font-size: 12px; font-weight: 500; color: var(--brand); }
.block-head .link-more:hover { text-decoration: underline; }

.attn { list-style: none; }
.attn-item {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px; border-top: 1px solid var(--line);
}
.attn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.4; }
.attn-title { color: var(--ink); }
.attn-title strong { font-weight: 600; }
.attn-text small { font-size: 12px; color: var(--slate-dark); }
.attn-empty {
  display: none; align-items: center; gap: 12px;
  padding: 16px 24px; border-top: 1px solid var(--line);
  color: var(--ink);
}
.attn-empty svg { color: var(--green); flex: 0 0 auto; }
.attn-empty small { font-size: 12px; color: var(--slate-dark); margin-left: 4px; }
.attn:not(:has(.attn-item)) + .attn-empty { display: flex; }  /* lijst leeg */
#aandacht:target .attn { display: none; }                      /* demo: index.html#aandacht */
#aandacht:target .attn-empty { display: flex; }
.btn-secondary {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--slate-light); border-radius: var(--radius-knop);
  font-weight: 500; color: var(--ink); background: var(--panel);
  white-space: nowrap;
}
.btn-secondary:hover { border-color: var(--slate); background: var(--bg); }

.stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } /* evenveel kolommen als tellers (2 of 3) */
.stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 24px;
}
.stat + .stat { border-left: 1px solid var(--line); }
.stat:hover { background: var(--hover); } /* niet --bg: dat is de kleur van de pagina, dan lijkt het blok uit de kaart te vallen */
.stat strong { font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.stat span { font-size: 12px; color: var(--slate); }

.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.grid-2 > * { min-width: 0; } /* anders duwt een lange regel de kaart buiten beeld */

.activity { list-style: none; border-top: 1px solid var(--line); }
.activity li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 24px; border-bottom: 1px solid var(--line);
  color: var(--slate-dark);
}
.activity li:last-child { border-bottom: 0; }
.act-icon { color: var(--slate); flex: 0 0 auto; display: grid; place-items: center; }
.act-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-text strong { font-weight: 600; color: var(--ink); }
.activity time { font-size: 12px; color: var(--slate); white-space: nowrap; }

.recent { border-top: 1px solid var(--line); }
.recent-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px 10px 24px; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.recent-row:last-child { border-bottom: 0; }
.recent-row:hover { background: var(--hover); } /* zelfde reden als bij .stat */
.recent-row svg { color: var(--slate); }

@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .page-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .stats { grid-auto-flow: row; grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .attn-item { flex-wrap: wrap; }
  .attn-text { flex-basis: 100%; }
}

/* ---------- Filterchips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--slate-light); border-radius: 13px;
  font-size: 12px; color: var(--slate-dark); background: var(--panel);
}
.chip span { color: var(--slate); }
.chip:hover { background: var(--bg); }
.chip.active { background: var(--chip-bg); border-color: var(--chip-bg); color: var(--chip-fg); }
.chip.active span { color: rgba(255, 255, 255, .7); }

/* ---------- Selectie en bulkacties ---------- */
th.check, td.check { width: 40px; padding-right: 0; }
.check input { display: block; width: 15px; height: 15px; accent-color: var(--ink); cursor: pointer; }
tbody tr:has(.row-check:checked) td { background: var(--selected); }
.row-check:checked { counter-increment: selected; }
/* Zolang er iets is aangevinkt maakt de toolbar plaats voor de selectiebalk: teller links, acties rechts. */
.table-form { display: flex; flex-direction: column; }
.select-bar { display: none; order: -1; align-items: center; gap: 8px; padding: 0 24px 16px; }
.content:has(.row-check:checked) .toolbar { display: none; }
.content:has(.row-check:checked) .select-bar { display: flex; animation: select-bar-oplichten .9s ease-out; } /* licht kort op als hij verschijnt */
@keyframes select-bar-oplichten { from { background: var(--brand-light); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .content:has(.row-check:checked) .select-bar { animation: none; } }
.select-clear { margin-left: -6px; }
.bulk-count { font-weight: 600; white-space: nowrap; color: var(--ink); }
.bulk-count::before { content: counter(selected) " geselecteerd"; }
.select-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.select-more summary { gap: 5px; }
.select-more .menu { min-width: 220px; }
.dialog-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

/* ---------- Rij-menu (details/summary; het open menu sluit door ergens te klikken) ---------- */
.row-actions { position: relative; display: inline-block; }
.row-actions summary { list-style: none; cursor: pointer; }
.row-actions summary::-webkit-details-marker { display: none; }
.row-actions[open] summary { background: var(--bg); color: var(--text); }
.row-actions[open] summary::before { content: ""; position: fixed; inset: 0; z-index: 25; cursor: default; }
.menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 26;
  min-width: 190px; padding: 6px 0; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(2, 27, 41, .12);
}
tbody tr:last-child .menu { top: auto; bottom: calc(100% + 4px); }
.menu a, .menu button { display: block; width: 100%; padding: 7px 14px; text-align: left; color: var(--ink); white-space: nowrap; }
.menu a:hover, .menu button:hover { background: var(--bg); }
.menu .is-danger { color: var(--brand); }
.menu-sep { border-top: 1px solid var(--line); margin: 6px 0; }

/* ---------- Snel wisselen bij de titel (hosting-detail.php) ----------
   De titel is zelf een uitklapmenu (details/summary, zonder JavaScript) met
   de andere pakketten van de klant. Bouwt voort op .row-actions en .menu. */
.title-switch { display: block; width: fit-content; max-width: 100%; }
.title-switch summary {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: -8px; padding: 2px 6px 2px 8px; border-radius: var(--radius-knop);
}
.title-switch summary svg { flex: 0 0 auto; color: var(--slate); }
.title-switch summary:hover { background: color-mix(in srgb, var(--panel) 55%, transparent); }
.title-switch[open] summary { background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.title-switch .menu { left: 0; right: auto; width: 300px; max-width: calc(100vw - 48px); }
.title-switch .switch-search { padding: 4px 10px 8px; }
.title-switch .switch-list { position: relative; max-height: 320px; overflow-y: auto; }   /* relative: zodat offsetTop van een regel binnen de lijst telt (js/wisselmenu.js) */   /* veel pakketten: schuiven in de lijst */
.title-switch .switch-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.title-switch .switch-list a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.title-switch .switch-list a small { flex: 0 0 auto; font-size: 12px; color: var(--slate); }
.title-switch .switch-list a.active { font-weight: 600; background: var(--selected); }
.title-switch .switch-list a:focus { outline: 0; background: var(--bg); box-shadow: inset 2px 0 0 var(--brand); }   /* gekozen met de pijltjestoetsen */
.title-switch .switch-empty { display: none; padding: 8px 12px; font-size: 13px; color: var(--slate); }   /* getoond door js/wisselmenu.js */

/* ---------- Dialoog ---------- */
.dialog {
  position: fixed; inset: 0; margin: auto;
  width: 440px; max-width: calc(100vw - 32px); height: fit-content;
  padding: 24px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--text);
  box-shadow: 0 16px 48px rgba(2, 27, 41, .25);
}
.dialog::backdrop { background: rgba(2, 27, 41, .45); }
.dialog h2 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.dialog p { color: var(--slate-dark); margin-bottom: 20px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Tweede, los formulier onder in een venster (bijv. "Onze nameservers gebruiken") */
.dialog-extra { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.dialog-extra p { margin: 0 0 8px; }

/* ---------- Toast (rechtsonder) ---------- */
.toast {
  position: fixed; inset: auto 24px 24px auto; margin: 0;
  align-items: center; gap: 10px;
  padding: 10px 8px 10px 14px; border: 0; border-radius: 6px;
  background: var(--float-bg); color: #fff;
  box-shadow: 0 8px 24px rgba(2, 27, 41, .25);
  font-size: 13px;
}
.toast:popover-open { display: flex; }
.toast > svg { color: #5fd39a; flex: 0 0 auto; }
.toast button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 4px; color: rgba(255, 255, 255, .7); margin-left: 6px; }
.toast button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
/* Toast die de server zelf toont na een geslaagde actie: toast_tonen() in
   includes/inloggen.php. Werkt zonder JavaScript: hij staat er direct en
   verdwijnt na 5 seconden vanzelf. Het kruisje is een label bij een verborgen
   vinkje; zodra dat is aangevinkt, is de toast weg. */
.toast.is-shown { display: flex; z-index: 40; animation: toast-weg .4s ease 5s forwards; }
.toast.is-shown:has(.toast-close:checked) { display: none; }
.toast .toast-close { display: none; }
.toast label { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 4px; color: rgba(255, 255, 255, .7); margin-left: 6px; cursor: pointer; }
.toast label:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@keyframes toast-weg { to { opacity: 0; visibility: hidden; } }

/* ---------- Sorteerbare kolomkoppen ---------- */
th .sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
th.num .sort { flex-direction: row-reverse; }
th .sort svg { opacity: 0; transition: opacity .1s; }
th .sort:hover svg { opacity: .45; }
th.is-sorted .sort svg { opacity: 1; }
th.is-desc .sort svg { transform: rotate(180deg); }

/* ---------- Lege tabel ---------- */
.table-empty {
  display: none; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 48px 24px 52px; border-top: 1px solid var(--line);
}
.table-empty p { font-weight: 500; color: var(--ink); }
.table-empty small { font-size: 12px; color: var(--slate-dark); margin-bottom: 14px; }
/* Lege staat bekijken: pagina.html#leeg (en domein.html#geen-toegang voor een gebruiker met beperkte toegang). */
.content:not(:has(#leeg:target)) .when-empty,
.content:has(#leeg:target) .hide-when-empty, .content:has(#geen-toegang:target) .hide-when-empty,
.content:has(#leeg:target) .has-empty > :not(.table-empty), .content:has(#geen-toegang:target) .has-empty > :not(.table-empty) { display: none; }
.content:has(#leeg:target) .has-empty > .table-empty:not(.is-limited), .content:has(#geen-toegang:target) .has-empty > .table-empty.is-limited { display: flex; border-top: 0; }
.table-empty .btn-row { justify-content: center; }
.table-empty small:last-child { margin-bottom: 0; }
.recent-row > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.recent-row strong { font-weight: 600; color: var(--ink); }
.recent-row small { font-size: 12px; color: var(--slate-dark); }

/* ---------- Broodkruimel, subregel, tabs ---------- */
/* Terug naar de lijst, boven de kop van een detailpagina. */
.back-link { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 12px -3px; font-size: 13px; color: var(--slate-dark); }
.back-link:hover { color: var(--ink); text-decoration: underline; }
.page-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--slate); margin-top: 4px; }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-top: -4px; }
.tabs input { display: none; }
.tabs label, .tabs a {
  padding: 6px 0 10px; font-weight: 500; color: var(--slate-dark);
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap;
}
.tabs label:hover, .tabs a:hover { color: var(--ink); }
.tabs input:checked + label, .tabs a.active { color: var(--ink); border-color: var(--brand); }
.panel { display: none; flex-direction: column; gap: 20px; }
.content:has(#tab-overzicht:checked) .panel-overzicht,
.content:has(#tab-dns:checked) .panel-dns,
.content:has(#tab-nameservers:checked) .panel-nameservers,
.content:has(#tab-doorsturing:checked) .panel-doorsturing,
.content:has(#tab-contacten:checked) .panel-contacten,
.content:has(#tab-notities:checked) .panel-notities,
.content:has(#tab-historie:checked) .panel-historie,
.content:has(#tab-opzeggen:checked) .panel-opzeggen { display: flex; }

/* ---------- Gegevenslijst, kaartinhoud, kaartvoet ---------- */
.kv > div {
  display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center;
  padding: 11px 24px; border-top: 1px solid var(--line);
}
.kv dt { font-size: 12px; color: var(--slate); }
.kv dd { color: var(--ink); }

/* Gegevenslijst in twee kolommen: <dl class="kv is-2col"> (Gegevens op
   domein-detail.php). De rijen staan per twee naast elkaar. Een rij met
   class "wide" loopt over beide kolommen; daarin staat de tekst bovenaan
   uitgelijnd, omdat de waarde uit meer regels kan bestaan.
   De twee kolommen staan er alleen als de kaart zelf minstens 700px breed
   is (container-type: we kijken naar de breedte van de kaart, niet van het
   scherm). Is de kaart smaller, dan is het een gewone lijst onder elkaar. */
.card:has(> .kv.is-2col) { container-type: inline-size; }
.kv.is-2col > .wide { align-items: baseline; }
@container (min-width: 700px) {
  .kv.is-2col { display: grid; grid-template-columns: 1fr 1fr; }
  .kv.is-2col > div { grid-template-columns: 160px 1fr; }
  .kv.is-2col > .wide { grid-column: 1 / -1; }
}
.card-body { padding: 0 24px 20px; color: var(--slate-dark); }
.card-body p { max-width: 560px; margin-bottom: 14px; }
.card-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); }
.table-note { padding: 12px 24px; font-size: 12px; color: var(--slate); }
.btn-secondary.is-danger { color: var(--brand); }
.btn-secondary.is-danger:hover { border-color: var(--brand); background: rgba(220, 47, 59, .06); }

/* ---------- Formulier ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; padding: 6px 24px 24px; }
.card:has(> .form) { max-width: 800px; } /* invoervelden worden anders meer dan een meter breed */
.field { display: flex; flex-direction: column; gap: 6px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 500; color: var(--ink); }
.field small { font-size: 12px; color: var(--slate); }
.input, .select {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--slate-light); border-radius: var(--radius-veld);
  font: inherit; color: var(--text); background: var(--panel);
}
.input:focus, .select:focus { outline: 0; border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(15, 66, 88, .15); }
.select {
  appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7080' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.field.is-invalid .input { border-color: var(--brand); }
.field.is-invalid .input:focus { box-shadow: 0 0 0 3px rgba(220, 47, 59, .15); }
.field.is-invalid small { color: var(--brand); }

/* ---------- Facturatie ---------- */
.summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; }
.summary span { font-size: 12px; color: var(--slate); }
.summary strong { display: block; font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.summary small { font-size: 12px; color: var(--slate-dark); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.actions-wide, td.actions-wide { width: 140px; }
.cell-actions { display: inline-flex; align-items: center; gap: 6px; }
.btn-sm { height: 26px; padding: 0 10px; font-size: 12px; }

/* ---------- Bestellingen ---------- */
/* Filterpopover in de toolbar: zelfde details-patroon als het rij-menu, opent links uitgelijnd. */
.filter .btn-filter { position: relative; }
.filter-menu { left: 0; right: auto; width: 240px; padding: 12px 14px 14px; }
.filter-menu .pop-title { padding: 0 0 4px; }
.filter-group + .filter-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.filter-opt { display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--ink); cursor: pointer; }
.filter-opt input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }
.filter-foot { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.filter-menu button { display: inline-flex; width: auto; padding: 0 10px; text-align: center; } /* niet de blokstijl van het rij-menu */
.filter-menu .pop-title.has-action { display: flex; align-items: center; justify-content: space-between; } /* kop met een link rechts, bijv. Groep · Beheren */
.filter-menu .pop-title-link { display: inline; width: auto; padding: 0; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--slate-dark); text-decoration: underline; text-underline-offset: 2px; }
.filter-menu .pop-title-link:hover { color: var(--ink); background: none; }
.filter-menu .filter-foot a { display: inline-flex; align-items: center; width: auto; padding: 0 10px; text-align: center; } /* "Wissen" is een link */
.filter-menu .btn-primary { color: #fff; background: var(--brand); }          /* .menu button maakt de tekst anders donker */
.filter-menu .btn-primary:hover { color: #fff; background: var(--brand-dark); }
/* Rood stipje op de knop zodra een filter actief is. */
.filter:has(.filter-opt input[type="checkbox"]:checked) .btn-filter::after,
.filter:has(.filter-opt input[type="radio"]:checked:not(.is-default)) .btn-filter::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--panel);
}


.status.busy::before { background: var(--navy-light); }
.kv dd small { font-size: 12px; color: var(--slate); margin-left: 4px; }
/* Kleine regel onder de waarde, bijvoorbeeld "Alleen e-mail" onder de pakketnaam */
.kv dd small.kv-onder { display: block; margin-left: 0; margin-top: 2px; font-size: 11px; }
/* Rij met zo'n extra regel: het label bovenaan, gelijk met de eerste regel van de waarde */
.kv > div:has(.kv-onder) { align-items: baseline; }
/* Voortgang: vier stappen naast elkaar, verbindingslijn loopt van bolletje naar bolletje. */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 4px 24px 22px; }
.steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding-top: 34px; }
.steps li::before { content: ""; position: absolute; top: 11px; left: 24px; right: -16px; height: 2px; background: var(--slate-light); }
.steps li:last-child::before { display: none; }
.step-dot {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--slate-light); background: var(--panel); color: #fff;
  display: grid; place-items: center;
}
.steps .is-done .step-dot { background: var(--green); border-color: var(--green); }
.steps .is-done::before { background: var(--green); }
.steps .is-current .step-dot { border-color: var(--ink); }
.steps .is-current .step-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.steps strong { font-weight: 600; color: var(--ink); }
.steps small { font-size: 12px; color: var(--slate-dark); }
.steps time { font-size: 11px; color: var(--slate); }
.steps li:not(.is-done):not(.is-current) strong { font-weight: 500; color: var(--slate); }
.steps li:not(.is-done):not(.is-current) small { color: var(--slate); }
/* Totalen onder een producttabel */
tfoot td { padding: 7px 24px; color: var(--slate-dark); }
tfoot tr:first-child td { padding-top: 14px; }
tfoot tr:last-child td { padding-bottom: 16px; }
tfoot .total td { font-weight: 600; color: var(--ink); }

/* ---------- Factuur ---------- */
.page-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 18px 24px; }
.facts > div { display: flex; flex-direction: column; gap: 2px; }
.facts span { font-size: 12px; color: var(--slate); }
.facts strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.facts small { font-size: 12px; color: var(--slate-dark); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--line); }
.setting-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setting-row span { font-size: 12px; color: var(--slate); }
.setting-row strong { font-weight: 600; color: var(--ink); }
.setting-row small { font-size: 12px; color: var(--slate-dark); }

/* ---------- Melding boven een tabel (één zin, één knop, kruisje) ---------- */
.notice-close { display: none; }
.notice { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 24px; }
.notice p { flex: 1; min-width: 0; color: var(--slate-dark); }
.notice strong { font-weight: 600; color: var(--ink); }
.content:has(.notice-close:checked) .notice { display: none; }
.kv .link-more { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--brand); }
.kv .link-more:hover { text-decoration: underline; }
/* Een kleine knop achter de waarde (bijv. Groep > Wijzigen). De negatieve
   marge boven en onder zorgt dat de rij even hoog blijft als de andere rijen. */
.kv dd .btn-sm { margin: -3px 0 -3px 8px; vertical-align: middle; }

/* ---------- Inloggen en wachtwoord (losse pagina's zonder app-schil) ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 20px; padding: clamp(40px, 18vh, 180px) 16px 40px; }
.auth-stage { display: none; width: 100%; max-width: 420px; }
.auth-foot { font-size: 12px; color: var(--slate); text-align: center; margin-top: -8px; }
/* Huisstijl van een reseller (includes/huisstijl.php) */
.auth-brand { font-size: 16px; font-weight: 600; color: #fff; }              /* naam in de kop als er geen logo is */
.auth-tagline { max-width: 420px; font-size: 15px; font-weight: 500; color: var(--ink); text-align: center; }
.auth-powered { margin-top: -14px; font-size: 11px; }
.logo .auth-brand { display: block; padding: 2px 0; }                   /* naam van de reseller in de sidebar (geen logo) */
.topbar-brand { font-size: 15px; font-weight: 600; color: var(--ink); }
.auth-foot a { color: var(--slate-dark); }
.auth-foot a:hover { color: var(--ink); text-decoration: underline; }
.auth-card { padding: 0; overflow: hidden; box-shadow: 0 12px 32px rgba(2, 27, 41, .10); }
.auth-head { display: flex; align-items: center; height: 64px; padding: 0 32px; background: var(--navy-soft); }
.auth-head img { height: 22px; display: block; }
.auth-body { display: flex; flex-direction: column; gap: 20px; padding: 28px 32px 32px; }
.auth-card .field { gap: 8px; }
.auth-card h1 { font-size: 18px; font-weight: 600; color: var(--ink); }
.auth-card h1 + .field, .auth-card h1 + .auth-text { margin-top: -4px; }
.auth-text { color: var(--slate-dark); }
.auth-text .link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.auth-card .input { height: 38px; }
.input-code { font-size: 18px; letter-spacing: 6px; font-variant-numeric: tabular-nums; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field-head a { font-size: 12px; color: var(--slate-dark); }
.field-head a:hover { color: var(--ink); text-decoration: underline; }
.check-row { display: flex; align-items: center; gap: 8px; color: var(--ink); cursor: pointer; }
.check-row input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }
.auth-card .btn-primary { justify-content: center; height: 38px; margin-top: 8px; }
.auth-card .back-link { margin: 2px 0 -6px -3px; align-self: flex-start; }
.auth-error { display: none; padding: 9px 12px; border-radius: var(--radius-veld); background: rgba(220, 47, 59, .08); color: var(--brand); font-size: 12px; }
.auth-error.is-zichtbaar { display: block; } /* foutmelding die PHP aanzet (login.php, wachtwoord-vergeten.php) */
/* Toestanden: zonder hash de eerste kaart, met hash alleen de gekozen kaart. */
.auth:not(:has(.auth-stage:target, .auth-stage :target)) .auth-stage:first-of-type { display: block; }
.auth-stage:target, .auth-stage:has(:target) { display: block; }
.auth-stage:has(#fout:target) .auth-error { display: block; }
.auth-stage:has(#fout:target) .input { border-color: var(--brand); }
/* Gekozen account in stap twee, met de mogelijkheid terug te gaan. */
.auth-account { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; height: 38px; border: 1px solid var(--line); border-radius: var(--radius-veld); background: var(--bg); color: var(--ink); font-weight: 500; }
.auth-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-account a { flex: none; font-size: 12px; color: var(--slate-dark); }
.auth-account a:hover { color: var(--ink); text-decoration: underline; }
.auth-options { display: flex; flex-direction: column; gap: 8px; }
.auth-option { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.auth-option:hover { background: var(--bg); border-color: var(--slate-light); }
.auth-option strong { display: block; font-weight: 600; }
.auth-option small { display: block; font-size: 12px; color: var(--slate); margin-top: 2px; }

/* ---------- Zoekveld in de topbar (desktop); opent het zoekvenster eroverheen ---------- */
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  width: 420px; max-width: 40vw; height: 34px; margin-left: 30px; padding: 0 10px;
  border: 1px solid var(--slate-light); border-radius: 4px;
  background: var(--panel); color: var(--slate); text-align: left;
}
.topbar-search:hover { border-color: var(--slate); }
.topbar-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-search kbd { font: inherit; font-size: 10px; color: var(--slate); border: 1px solid var(--slate-light); border-radius: 3px; padding: 1px 5px; }
.search-btn { display: none; }
#search-pop { top: 6px; left: 250px; right: auto; width: 420px; }

/* ---------- DNS-tabel: kolommen op maat van de inhoud, compactere rijen ---------- */
.dns-table { table-layout: fixed; }
.dns-table th:nth-child(1) { width: 110px; }   /* Type: A, MX, CNAME */
.dns-table th:nth-child(2) { width: 220px; }   /* Naam */
.dns-table th:nth-child(4) { width: 100px; }   /* TTL */
/* De tabel op domein-detail.php heeft vooraan een kolom met vinkjes: alles schuift één op */
#dns-records th:nth-child(1) { width: 40px; }
#dns-records th:nth-child(2) { width: 96px; }
#dns-records th:nth-child(3) { width: 220px; }
#dns-records th:nth-child(4) { width: auto; }
#dns-records th:nth-child(5) { width: 100px; }
.dns-table td.primary { font-weight: 500; color: var(--ink); }
.dns-table td code { white-space: normal; overflow-wrap: anywhere; color: var(--ink); } /* lange TXT-waarden breken af in plaats van de tabel te verbreden */
@media (min-width: 701px) {
  .dns-table th, .dns-table td { padding-top: 7px; padding-bottom: 7px; }
  .dns-table .row-menu { height: 22px; }
}

/* ================= Bouwstenen voor de overige pagina's ================= */
/* Smalle kolom voor instellingenpagina's: kaarten niet breder dan een formulier. */
.narrow { display: flex; flex-direction: column; gap: 20px; max-width: 950px; } /* accountpagina's */
.narrow .card:has(> .form) { max-width: none; } /* formulierkaart even breed als de rest */
.push-left { margin-right: auto; }
.input:disabled { background: var(--bg); color: var(--slate-dark); }
.dialog.wide { width: 520px; }
.dialog.extra-wide { width: 760px; max-width: calc(100vw - 32px); }   /* bijv. de DNS-assistent */
.dialog.extra-wide .diff { max-height: 260px; overflow-y: auto; }
.menu button { cursor: pointer; }

.push-right { margin-left: auto; }
.btn-secondary svg { margin-right: 6px; }
.log-table td.primary code, .log-table td code { color: var(--slate-dark); }
/* Rij met instelling: tekst links, status en knop rechts (bouwt voort op .setting-row). */
.setting-row > .setting-actions { display: flex; flex-direction: row; align-items: center; gap: 12px; flex: 0 0 auto; }
.setting-row > .seg { display: inline-flex; flex-direction: row; gap: 0; }
.setting-row > div > code, .kv code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.sub-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 24px 9px 40px; border-top: 1px solid var(--line); background: var(--hover); }
.sub-row strong { font-weight: 500; color: var(--ink); }
.sub-row small { display: block; font-size: 12px; color: var(--slate); }

/* Keuzeknop met twee of drie standen. */
.seg { display: inline-flex; border: 1px solid var(--slate-light); border-radius: 4px; overflow: hidden; flex: 0 0 auto; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; font-weight: 500; color: var(--slate-dark); cursor: pointer; }
.seg label ~ label { border-left: 1px solid var(--slate-light); }
.seg input:checked + label { background: var(--chip-bg); color: var(--chip-fg); }

/* Gebruiker in een tabelcel: avatar, naam en e-mailadres. */
.cell-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-user .avatar { width: 28px; height: 28px; font-size: 10px; background: var(--slate-light); color: var(--ink); }
.cell-user strong { display: block; font-weight: 500; color: var(--ink); }
.cell-user small { display: block; font-size: 12px; color: var(--slate); }
td small.sub { display: block; font-size: 12px; color: var(--slate); }

/* Vinkjes in een dialoog of formulier. */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.checks label, .check-line { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); cursor: pointer; }
.checks input, .check-line input { width: 15px; height: 15px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.check-line small { display: block; font-size: 12px; color: var(--slate); }
.field-label { font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }

/* Kopieerbare waarde (update-URL, geheime sleutel) en herstelcodes. */
.copy-field { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.copy-field code { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }
.copy-field button { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; color: var(--slate-dark); }
.copy-field button:hover { background: var(--panel); color: var(--ink); }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--ink); margin-bottom: 20px; }
.codes .is-used { color: var(--slate); text-decoration: line-through; }
.qr { width: 148px; height: 148px; margin: 0 auto 16px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: #021b29; }
.qr svg { width: 100%; height: 100%; }

/* Verbruik: label, waarde en een dunne balk. */
.meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 4px 24px 22px; }
.meter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--slate); }
.meter-head strong { font-weight: 500; color: var(--ink); white-space: nowrap; }
.meter-bar { height: 6px; border-radius: 3px; background: var(--slate-light); overflow: hidden; }
.meter-bar span { display: block; height: 100%; border-radius: 3px; background: var(--navy-light); }
.meter.is-high .meter-bar span { background: var(--brand); }

/* Verbruik per onderdeel (hosting-detail.php): grote balk met de verdeling
   (.meter-bar.is-stacked) en kleuren per onderdeel. Bij .is-high wordt de
   hele grote balk rood. */
.meter-total { padding: 4px 24px 18px; }
.meter-total .meter-head { font-size: 13px; }
.meter-total .meter-head strong { font-weight: 600; }
.meter-total .meter-bar { height: 10px; border-radius: 5px; }
.meter-bar.is-stacked { display: flex; }
.meter-bar.is-stacked span { flex: none; border-radius: 0; }
.meter-bar.is-stacked span + span { box-shadow: -1px 0 0 var(--panel); }   /* dunne scheiding tussen de delen */
.meter-bar span.is-web,  .meter-dot.is-web  { background: var(--navy-light); }
.meter-bar span.is-mail, .meter-dot.is-mail { background: #3f8fbf; }
.meter-bar span.is-db,   .meter-dot.is-db   { background: #9cc7df; }
.meter-bar span.is-rest, .meter-dot.is-rest { background: var(--slate); }
.meter.is-high .meter-bar span.is-mail { background: var(--brand); }
.meter.is-high .meter-bar.is-stacked span { background: var(--brand); }
.meter-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: baseline; }
.meter-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--slate); }
.meter-foot span:last-child:not(:first-child) { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tabbladen met genummerde panelen (t1..t11 hoort bij p1..p11). */
.content:has(#t1:checked) .p1, .content:has(#t2:checked) .p2, .content:has(#t3:checked) .p3, .content:has(#t4:checked) .p4, .content:has(#t5:checked) .p5, .content:has(#t6:checked) .p6, .content:has(#t7:checked) .p7, .content:has(#t8:checked) .p8, .content:has(#t9:checked) .p9, .content:has(#t10:checked) .p10, .content:has(#t11:checked) .p11 { display: flex; }
thead th { white-space: nowrap; }
.dialog-fields.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.dialog-fields.two .wide { grid-column: 1 / -1; }
.textarea { width: 100%; min-height: 96px; padding: 8px 10px; border: 1px solid var(--slate-light); border-radius: var(--radius-veld); font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); background: var(--panel); resize: vertical; }
.textarea:focus { outline: 0; border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(15, 66, 88, .15); }
.color-row { display: flex; align-items: center; gap: 8px; }
.color-row input[type="color"] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--slate-light); border-radius: 4px; background: var(--panel); cursor: pointer; }
.color-row .input { width: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.range { width: 100%; accent-color: var(--ink); }
/* Voorbeeld van de huisstijl: verkleind paneel in de gekozen kleur. */
.brand-preview { display: flex; height: 150px; margin: 0 24px 16px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bg); }
.bp-side { flex: 0 0 34%; display: flex; flex-direction: column; gap: 7px; padding: 12px 10px; background: var(--navy-soft); color: #fff; font-size: 10px; font-weight: 600; }
.bp-side i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.bp-side i:nth-of-type(1) { margin-top: 8px; width: 70%; } .bp-side i:nth-of-type(2) { width: 55%; } .bp-side i:nth-of-type(3) { width: 62%; }
.bp-main { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.bp-main i { display: block; height: 30px; border-radius: 3px; background: var(--panel); border: 1px solid var(--line); }
.bp-main i:first-child { height: 12px; width: 40%; border: 0; background: var(--slate-light); }
.bp-main b { display: block; width: 46px; height: 14px; margin-left: auto; border-radius: 3px; background: var(--brand); }

.check-line.wide { grid-column: 1 / -1; }
.card-body .page-sub { margin-top: -6px; }
.page-sub code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--slate-dark); }
.order-main .card:has(> .form) { max-width: none; }
/* Bestellen: stappen, hoofdkolom met samenvatting ernaast. */
.wizard { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--slate); }
.wizard li { display: inline-flex; align-items: center; gap: 8px; }
.wizard li + li::before { content: ""; width: 24px; height: 1px; background: var(--slate-light); margin-right: 2px; }
.wizard .n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--slate-light); font-size: 11px; font-weight: 600; }
.wizard .is-current { color: var(--ink); font-weight: 600; }
.wizard .is-current .n { background: var(--chip-bg); border-color: var(--chip-bg); color: var(--chip-fg); }
.wizard .is-done { color: var(--slate-dark); }
.wizard .is-done .n { background: var(--green); border-color: var(--green); color: #fff; }
.order { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.order-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.order-side { position: sticky; top: 20px; }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 24px; color: var(--slate-dark); }
.sum-row span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sum-row small { display: block; font-size: 12px; color: var(--slate); }
.sum-title { padding: 10px 24px 2px; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--slate); }
.sum-row.total { margin-top: 8px; padding-top: 12px; padding-bottom: 16px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.add-row { display: flex; gap: 8px; }
.add-row .input { flex: 1; min-width: 0; }
.add-row .btn-primary, .add-row .btn-secondary { height: 34px; }
.inline-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 24px 16px; padding: 9px 12px; border-radius: 4px; background: var(--bg); color: var(--slate-dark); }
.inline-note strong { font-weight: 600; color: var(--ink); }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--slate-light); border-radius: 14px; color: var(--ink); }
.pick small { font-size: 11px; color: var(--slate); }
.pick button { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--slate); }
.pick button:hover { background: var(--bg); color: var(--ink); }
.pick form { display: contents; }                                  /* de verwijderknop staat in een eigen formulier (bestellen.php) */
.card-foot form:has(> .push-left) { margin-right: auto; }   /* knop in een formulier: dan schuift het formulier naar links */
.inline-note form { flex: none; }
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 6px; border: 1px solid var(--slate-light); border-radius: 3px; font-size: 11px; font-weight: 500; color: var(--slate-dark); vertical-align: 1px; }

.pick-row label { display: flex; align-items: center; min-width: 0; }
.wizard .n svg { width: 11px; height: 11px; }
.page-head .wizard { flex: 0 0 auto; }
/* Pakketten als keuzekaarten; losse keuzes als rijen. */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 24px 16px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.plan input { position: absolute; top: 16px; right: 16px; width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }
.plan:hover, .choice:hover { border-color: var(--slate-light); }
.plan:has(input:checked), .choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.plan strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.plan p { font-size: 12px; color: var(--slate); min-height: 34px; }
.plan .price { font-size: 18px; font-weight: 600; color: var(--ink); }
.plan .price small { font-size: 12px; font-weight: 400; color: var(--slate); }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--slate-dark); }
.plan.is-current { background: var(--hover); cursor: default; }
.choices { display: flex; flex-direction: column; gap: 8px; padding: 0 24px 16px; }
.choice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.choice input { width: 15px; height: 15px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.choice strong { display: block; font-weight: 600; color: var(--ink); }
.choice small { display: block; font-size: 12px; color: var(--slate); margin-top: 2px; }
.choice.is-disabled { cursor: not-allowed; opacity: .55; }
.choice.is-disabled:hover { border-color: var(--line); }
.card > .tabs { margin: 0 24px 16px; }
/* ---------- Pagina's met tabs: account, hosting en (straks) domein ----------
   Opzet, van boven naar beneden:
     1. de kop (.page-head): titel met de regel eronder, rechts de knop
     2. de tabs (.tabs), zoals in het ontwerp
     3. de inhoud; bij een pakket of domein staat rechts een kaart met de
        kerngegevens (.with-aside met daarin .aside-card)

   <main class="content is-detail">: de pagina is één kolom met een vaste
   breedte. Zo zijn kop, tabs en inhoud even breed en staat de knop
   rechtsboven boven de rand van de kaarten, niet aan de schermrand.

   <div class="tab-layout">: de tabs met de inhoud eronder. */
.content.is-detail { max-width: 1188px; }
.content.is-detail.is-wide { max-width: none; }   /* bijv. domein-detail: brede DNS-tabel, op een groot scherm de volle breedte */   /* 1128px inhoud + 2 x 30px ruimte opzij */
.tab-layout { display: flex; flex-direction: column; gap: 20px; }

/* Inhoud links, kaart met kerngegevens rechts. De kaart blijft staan als je
   scrolt (net als .order-side) en is op elk tabblad hetzelfde. Op een smal
   scherm staat hij onder de inhoud. */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.aside-card { position: sticky; top: 20px; }
.aside-card .aside-meter { padding: 0 24px 18px; }
.aside-card .kv > div { grid-template-columns: 104px 1fr; }
@media (max-width: 1000px) {
  .with-aside { grid-template-columns: minmax(0, 1fr); }
  .aside-card { position: static; }
}
.plans-mail, .content:has(#pk-mail:checked) .plans-web { display: none; }
.content:has(#pk-mail:checked) .plans-mail { display: grid; }
.pick-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; border-top: 1px solid var(--line); }
.pick-row strong { font-weight: 500; color: var(--ink); }
.pick-row .select { width: 260px; flex: 0 0 auto; }

/* Openbare pagina zonder inloggen (statuslink). */
.public { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.public-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 56px; height: 56px; padding: 0 24px; background: var(--navy-soft); color: rgba(255, 255, 255, .8); font-size: 12px; }
.public-head img { height: 22px; display: block; }
.public-main { width: 100%; max-width: 808px; margin: 0 auto; padding: 32px 24px 48px; }
.public-stage { display: none; flex-direction: column; gap: 20px; }
.public:not(:has(.public-stage:target)) .public-stage:first-of-type, .public-stage:target { display: flex; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 24px; text-align: center; color: var(--slate-dark); }
.empty-state strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.auth-list { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--slate-dark); }
.auth-list li::before { content: "–"; margin-right: 8px; color: var(--slate); }
.auth-account.is-person { height: auto; padding: 9px 12px; flex-direction: column; align-items: flex-start; gap: 0; }
.auth-account.is-person small { font-size: 12px; font-weight: 400; color: var(--slate); }

/* ================= Staten: waarschuwing, fout, uitgeschakeld, bezig, focus ================= */
.status.warn::before { background: var(--warn); }
.toast.is-warn > svg { color: #f0c27a; }
.toast.is-error > svg { color: #ff9aa1; }
/* Waarschuwing of fout als melding bovenaan een pagina: een zachte tint met
   gekleurde tekst, in dezelfde stijl als .inline-note hieronder. Bewust geen
   gekleurde streep links: op een kaart met ronde hoeken oogt dat rommelig. */
.notice.is-warn { border-color: transparent; background: rgba(200, 129, 26, .12); }
.notice.is-warn p, .notice.is-warn strong { color: var(--warn-dark); }
.notice.is-error { border-color: transparent; background: rgba(220, 47, 59, .08); }
.notice.is-error p, .notice.is-error strong { color: var(--brand); }
.inline-note.is-warn { background: rgba(200, 129, 26, .12); color: var(--warn-dark); }
.inline-note.is-warn strong { color: var(--warn-dark); }
.inline-note.is-error { background: rgba(220, 47, 59, .08); color: var(--brand); }
.inline-note.is-error strong { color: var(--brand); }
.banner.is-warn { background: var(--warn); }

.btn-primary:disabled, .btn-secondary:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.is-loading { pointer-events: none; }
.is-loading::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn-secondary.is-loading::before { margin-right: 8px; border-color: var(--slate-light); border-top-color: var(--slate-dark); }
@keyframes spin { to { transform: rotate(360deg); } }
.skel { display: inline-block; height: 10px; border-radius: 5px; background: var(--slate-light); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .is-loading::before, .skel { animation: none; } }

/* Toetsenbordfocus: één ring voor alles wat klikbaar is. Invoervelden houden hun eigen rand. */
a:focus-visible, button:focus-visible, summary:focus-visible, .chip:focus-visible, .is-focus-ring { outline: 2px solid var(--focus); outline-offset: 2px; }
.sidebar a:focus-visible { outline-color: #fff; outline-offset: -2px; }
.input.is-focus { border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(15, 66, 88, .15); }

/* ---------- Stijlgids (stijlgids.html) ---------- */
.sg-nav { padding: 0; }
[id^="sg-"] { scroll-margin-top: 16px; }
.sg-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line); }
.sg-label { display: flex; flex-direction: column; gap: 2px; font-weight: 500; color: var(--ink); }
.sg-label code, .swatch code, .sg-sub code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 400; color: var(--slate); }
.sg-items { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.sg-items.is-stack { flex-direction: column; align-items: stretch; }
.sg-items .field, .sg-items .meter, .sg-items > .search, .sg-items > .select, .sg-items > .textarea { width: 260px; }
.sg-items .inline-note { margin: 0; }
.sg-items .choice { flex: 1 1 220px; }
.sg-sub { display: flex; align-items: baseline; gap: 8px; padding: 12px 24px 8px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--ink); }
.sg-dark { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 4px; background: var(--navy-soft); color: #fff; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding: 4px 24px 22px; }
.swatch { display: flex; flex-direction: column; gap: 1px; }
.swatch i { display: block; height: 48px; margin-bottom: 6px; border-radius: 4px; border: 1px solid var(--line); }
.swatch strong { font-weight: 500; color: var(--ink); }
.swatch small { font-size: 12px; color: var(--slate); }
.sw-brand { background: var(--brand); } .sw-brand-dark { background: var(--brand-dark); } .sw-navy { background: var(--navy-soft); } .sw-navy-light { background: var(--navy-light); }
.sw-ink { background: var(--ink); } .sw-slate-dark { background: var(--slate-dark); } .sw-slate { background: var(--slate); } .sw-slate-light { background: var(--slate-light); }
.sw-line { background: var(--line); } .sw-bg { background: var(--bg); } .sw-panel { background: var(--panel); } .sw-green { background: var(--green); } .sw-warn { background: var(--warn); }
.t-h1 { font-size: 18px; font-weight: 600; color: var(--ink); }
.t-h2 { font-size: 15px; font-weight: 600; color: var(--ink); }
.t-body { color: var(--slate-dark); }
.t-small { font-size: 12px; color: var(--slate); }
.t-label { font-size: 12px; font-weight: 500; color: var(--ink); }
.t-caps { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--slate); }
.t-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink); }
.tour-card.is-static { position: static; box-shadow: none; }
.table-empty.is-static { display: flex; }
.sg-switch { width: 280px; border: 1px solid var(--line); }
.toast.is-static { position: static; display: flex; width: fit-content; box-shadow: none; }
.menu.is-static { position: static; display: inline-block; }
.banner.is-static { padding: 0 16px; border-radius: 4px; }

/* ================= DNS-geschiedenis, gezondheidscheck, tijdelijke toegang ================= */
.content:has(#tab-gezondheid:checked) .panel-gezondheid { display: flex; }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
label.recent-row { cursor: pointer; }
.head-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.toolbar .push-right ~ .btn-primary { margin-left: 0; }

/* Weergaven binnen het DNS-tabblad: records, geschiedenis, gepland.
   De keuze staat in het menu van de filterknop naast het zoekveld (radio-
   knoppen #dv-records, #dv-history en #dv-planned). De blokken (.dv) staan
   onder de werkbalk in dezelfde kaart; alleen het gekozen blok is zichtbaar.
   Past niet alles op één regel, dan gaan de knoppen samen naar de volgende. */
.subnav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.panel-dns .toolbar { flex-wrap: wrap; row-gap: 10px; }
/* De knoppen rechts in een werkbalk, als één blok */
.toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.seg label span { margin-left: 6px; font-weight: 400; opacity: .7; }
.field .seg { align-self: flex-start; } /* niet uitrekken in een formulierkolom */
.dv { display: none; flex-direction: column; }
.panel-dns:has(#dv-records:checked) .dv-records, .panel-dns:has(#dv-history:checked) .dv-history, .panel-dns:has(#dv-planned:checked) .dv-planned { display: flex; }

/* Eén wijziging: wat, wie en wanneer, met de regels die weggingen en erbij kwamen. */
.change { display: flex; flex-direction: column; gap: 10px; padding: 14px 24px 16px; border-top: 1px solid var(--line); }
.change-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.change-head strong { font-weight: 600; color: var(--ink); }
.change-head small { display: block; margin-top: 2px; font-size: 12px; color: var(--slate); }
.diff { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.diff div { display: flex; gap: 10px; padding: 6px 12px; overflow-wrap: anywhere; }
.diff div::before { flex: none; width: 10px; font-weight: 600; }
.diff-del { background: rgba(220, 47, 59, .07); color: var(--brand); }
.diff-del::before { content: "\2212"; }
.diff-add { background: rgba(46, 158, 107, .10); color: #1f7a52; }
.diff-add::before { content: "+"; }
.dialog .diff { margin-bottom: 20px; }

/* Eén controle: bolletje, uitleg in gewone taal, en rechts de oplossing of "In orde". */
.check-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 24px; border-top: 1px solid var(--line); }
.check-item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.check-item.is-warn::before { background: var(--warn); }
.check-item.is-error::before { background: var(--brand); }
.check-item strong { display: block; font-weight: 600; color: var(--ink); }
.check-item small { display: block; margin-top: 2px; font-size: 12px; color: var(--slate-dark); }
.check-ok { font-size: 12px; color: var(--slate); white-space: nowrap; }
.check-form { padding-top: 20px; }
.public-head a { color: inherit; }

/* ---------- DNS-editor: hulpmiddelen zetten wijzigingen klaar, opslaan bevestigt ze ---------- */
.draft { display: none; }
label.btn-primary, label.btn-secondary { cursor: pointer; }
.tool-menu summary { gap: 5px; }
.tool-menu .menu { min-width: 220px; }
.textarea.is-text { min-height: 132px; font-family: inherit; font-size: 13px; line-height: 1.45; }
.draft-bar, .draft-done { display: none; }
.content:has(#draft-assist:checked) .bar-assist, .content:has(#draft-preset:checked) .bar-preset, .content:has(#draft-copy:checked) .bar-copy { display: flex; }
.content:has(#dns-saved:checked) .draft-bar { display: none; }
.content:has(.draft:not(#dns-saved):checked):has(#dns-saved:checked) .draft-done { display: flex; }
.content:not(:has(#draft-assist:checked)) .d-assist, .content:not(:has(#draft-preset:checked)) .d-preset, .content:not(:has(#draft-copy:checked)) .d-copy { display: none; }
/* Klaargezet: nieuwe regels groen, regels die vervallen rood en doorgestreept, net als in het verschil. */
.content:not(:has(#dns-saved:checked)) tr.is-new td { background: rgba(46, 158, 107, .08); }
.content:not(:has(#dns-saved:checked)) tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.content:has(#draft-preset:checked):not(:has(#dns-saved:checked)) tr.rm-preset td { background: rgba(220, 47, 59, .05); text-decoration: line-through; }
.content:has(#draft-preset:checked):not(:has(#dns-saved:checked)) tr.rm-preset td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.content:has(#draft-preset:checked):has(#dns-saved:checked) tr.rm-preset { display: none; }
/* Na "Toevoegen aan editor" verdwijnt de dialoog; het vinkje neemt het over. */
.content:has(.draft:checked) dialog.is-tool { display: none; }
/* weergave voor een medewerker (…#medewerker): wijzigingen worden een voorstel */
.content:not(:has(#medewerker:target)) .as-employee, .content:has(#medewerker:target) .as-approver { display: none !important; }
.content:has(#medewerker:target):has(#dns-saved:checked) tr.is-new { display: none; }
.content:has(#medewerker:target):has(#draft-preset:checked):has(#dns-saved:checked) tr.rm-preset { display: table-row; }
.dialog .textarea.is-text { min-height: 84px; }
.tag.is-warn { border-color: transparent; background: rgba(200, 129, 26, .14); color: var(--warn-dark); }
.change-why { font-size: 12px; color: var(--warn-dark); }

/* ---------- Domeinpagina: notities, historie, opzeggen ---------- */
.flag { display: none; } /* onzichtbaar vinkje dat een demostaat aan- of uitzet */
.content:not(:has(#dom-cancelled:checked)) .when-cancelled,
.content:has(#dom-cancelled:checked) .unless-cancelled,
.content:has(#dom-cancelled:checked) #dialog-cancel { display: none; }
.dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
/* tweede voorbeeld (domein-doorsturing.html): doorsturing als dienst aan of uit */
.content:has(#fwd-off:checked) .when-fwd,
.content:not(:has(#fwd-off:checked)) .unless-fwd,
.content:has(#fwd-off:checked) #confirm-fwd { display: none; }
.content:has(#fwd-off:checked):has(#tab-doorsturing:checked) .panel-doorsturing { display: none; }
.content:has(#fwd-off:checked):has(#tab-doorsturing:checked) .panel-overzicht { display: flex; }
.content:has(#fwd-off:checked) .tabs:has(#tab-doorsturing:checked) label[for="tab-overzicht"] { color: var(--ink); border-color: var(--brand); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.suffix { align-self: center; color: var(--slate-dark); white-space: nowrap; }
.note-empty { padding: 16px 24px; border-top: 1px solid var(--line); color: var(--slate); }
.notice small { margin-left: 6px; font-size: 12px; color: var(--slate); white-space: nowrap; }
.note-add { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 0 24px 18px; }
.note-add .textarea { min-height: 72px; }
.note-add + .table-note { padding-top: 0; }   /* de toelichting direct onder het formulier: geen dubbele ruimte ertussen */
.note { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--line); }
.note.is-editing { background: var(--selected); }   /* de notitie die open staat in het formulier */
.note p { color: var(--ink); }
.note small { display: block; margin-top: 4px; font-size: 12px; color: var(--slate); }
.table-note a { color: var(--slate-dark); text-decoration: underline; }
.table-note a:hover { color: var(--ink); }
.cell-sub { margin-left: 6px; font-size: 12px; color: var(--slate); }

/* ---------- Domeinlijst: filter met groepen, groepen beheren, bulkdialogen ---------- */
.sel-count::before { content: counter(selected); } /* zelfde teller als de selectiebalk */
.filter-opt span { margin-left: auto; font-size: 12px; color: var(--slate); }
.filter-foot:has(> :nth-child(2)) { justify-content: space-between; }
.filter-menu:has(.filter-group:nth-of-type(3)) { width: 260px; }
.group-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.group-row { display: flex; align-items: center; gap: 10px; }
.group-row .input { flex: 1; min-width: 0; }
.group-row span { flex: 0 0 112px; font-size: 12px; color: var(--slate); white-space: nowrap; }
.group-list .add-row { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.dialog .field-label + .diff { margin-top: 0; }
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ---------- Dialogen: genummerde uitleg, voetnoot, twee stappen ---------- */
.num-list { display: flex; flex-direction: column; gap: 4px; margin: -8px 0 16px; padding-left: 18px; color: var(--slate-dark); }
.dialog .check-line { margin-bottom: 14px; align-items: flex-start; }
.dialog .dialog-note { font-size: 12px; color: var(--slate); }
.dialog:has(.flag:checked) .step-a, .dialog:not(:has(.flag:checked)) .step-b { display: none; }
.dialog .copy-field { margin-bottom: 20px; }
.tool-menu .pop-title { padding: 6px 14px 4px; }

/* ---------- DNS-sjablonen ---------- */
.only-from { display: none; }
.dialog:has(#tpl-from:checked) .only-from { display: flex; }
.setting-row.is-first { border-top: 0; } /* enige regel in een kaart zonder kop */
.table-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--slate-dark); }
.dialog .field-head a { text-decoration: underline; }
.grid-2 .dns-table th:nth-child(2) { width: 150px; } /* smallere kolom Naam naast de zijkolom */

/* ---------- Schakelaars in de menu's van de topbar ---------- */
.pop-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 6px 8px; border-radius: 4px; color: var(--ink); cursor: pointer; }
.pop-switch:hover { background: var(--bg); }
.pop-push { padding: 10px 16px; border-top: 1px solid var(--line); border-radius: 0; font-size: 12px; color: var(--slate-dark); }

/* ---------- Rondleiding (index.html#rondleiding) ---------- */
.tour { display: none; position: fixed; inset: 0; z-index: 200; }
.tour:target { display: block; }
.tour.is-center { background: rgba(2, 27, 41, .55); }
body:has(.tour:target) [popover] { display: none; } /* een open menu hoort niet boven de rondleiding */
.tour-hole { position: fixed; border-radius: 8px; box-shadow: 0 0 0 200vmax rgba(2, 27, 41, .55); }
.tour-card { position: fixed; width: 300px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: 0 16px 48px rgba(2, 27, 41, .25); }
.tour-card small { display: block; font-size: 12px; color: var(--slate); }
.tour-card strong { display: block; margin: 2px 0 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.tour-card p { color: var(--slate-dark); }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-skip { margin-right: auto; font-size: 12px; color: var(--slate-dark); }
a.tour-skip:hover { color: var(--ink); text-decoration: underline; }
.tour.is-center .tour-card { inset: 0; margin: auto; height: fit-content; width: 340px; }
.tour-nav .tour-hole { left: 8px; top: 76px; width: 204px; height: 412px; }
.tour-nav .tour-card { left: 232px; top: 84px; }
.tour-search .tour-hole { left: 244px; top: 5px; width: 432px; height: 46px; }
.tour-search .tour-card { left: 250px; top: 64px; }
.tour-notif .tour-hole { right: 70px; top: 8px; width: 40px; height: 40px; border-radius: 50%; }
.tour-menu .tour-hole { right: 24px; top: 8px; width: 40px; height: 40px; border-radius: 50%; }
.tour-notif .tour-card, .tour-menu .tour-card { right: 24px; top: 62px; }
@media (max-width: 900px) { /* smal scherm: geen uitsnede, de kaart staat onderaan */
  .tour { background: rgba(2, 27, 41, .55); }
  .tour-hole { display: none; }
  .tour .tour-card, .tour.is-center .tour-card { inset: auto 16px 16px 16px; margin: 0; width: auto; }
}

/* ---------- Mobiele navigatie (desktop: verborgen) ---------- */
.nav-open, .nav-backdrop, .nav-toggle, .nav-close, .topbar-logo { display: none; }

/* ---------- Lijstweergave (domein-lijst.html) ---------- */
/* Lijstkolom links, detail rechts; beide scrollen zelfstandig, de topbar blijft staan. */
.split { display: flex; flex: none; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow: hidden; }
.list-hide { display: none; }
.list-pane {
  width: 250px; flex: 0 0 250px; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--line);
}
.list-head { display: flex; align-items: center; gap: 8px; padding: 13px 12px 13px 16px; border-bottom: 1px solid var(--line); }
.list-head .search { width: auto; flex: 1; }
.list-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0; }
.list-item {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 16px; color: var(--ink);
}
.list-item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item:hover { background: var(--hover); }
.list-item.active { background: var(--selected); font-weight: 600; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.dot.pending { background: var(--brand-soft); }
.dot.off { background: var(--slate); }
.list-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--slate);
}
.list-select { color: var(--slate-dark); font-weight: 500; }
.list-select:hover { text-decoration: underline; }
.btn-icon { width: 30px; padding: 0; justify-content: center; margin-left: auto; }

.detail { flex: 1; min-width: 0; overflow-y: auto; container-type: inline-size; container-name: detail; }
.page-head-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.list-show { display: none; margin: -1px 0 0 -4px; }
.split .back-link { display: none; } /* op de lijstweergave alleen onder 1200px */
.split:has(.list-hide:checked) .list-pane { display: none; }
.split:has(.list-hide:checked) .list-show { display: grid; }
/* Smal detail (lijst open op een klein scherm): kaarten in één kolom. */
@container detail (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }
/* Onder 1200px: lijst en detail na elkaar in plaats van naast elkaar. */
@media (max-width: 1200px) {
  .split .list-pane { flex: 1; width: auto; border-right: 0; }
  .split .detail { display: none; }
  .split:has(.detail:target) .list-pane { display: none; }
  .split:has(.detail:target) .detail { display: flex; }
  .list-collapse, .split:has(.list-hide:checked) .list-show { display: none; }
  .split .back-link { display: inline-flex; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; z-index: 40;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .app:has(.nav-open:checked) .sidebar { transform: none; box-shadow: 0 0 40px rgba(2, 27, 41, .35); }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: rgba(2, 27, 41, .45);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
  }
  .app:has(.nav-open:checked) .nav-backdrop { opacity: 1; visibility: visible; }
  .nav-close {
    display: grid; place-items: center; position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border-radius: 4px; color: rgba(255, 255, 255, .75); cursor: pointer;
  }
  .nav-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar-nav { gap: 12px; }
  .topbar-search { display: none; }
  .search-btn { display: grid; }
  #search-pop { top: 52px; left: auto; right: 16px; width: 380px; }
  .avatar-btn { margin-right: 0; }
  .nav-toggle {
    display: grid; place-items: center; width: 32px; height: 32px; margin-left: -6px;
    border-radius: 4px; color: var(--ink); cursor: pointer;
  }
  .nav-toggle:hover { background: var(--bg); }
  .topbar-logo { display: block; }
  .topbar-logo img { height: 22px; width: auto; display: block; }
  .content { padding: 20px 16px; }
  .promo { flex-direction: column; align-items: flex-start; }
  .banner { font-size: 11px; padding: 0 12px; text-align: center; }
  th, td { padding: 12px 16px; }
}

/* ---------- Tabellen als kaartjes (< 700px) ---------- */
@media (max-width: 700px) {
  thead { display: none; }
  table, tbody, tbody tr, tbody td { display: block; }
  tbody tr { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  tbody tr:has(td.check) { padding-left: 44px; }
  tbody tr:last-child { border-bottom: 0; }
  tbody tr:hover td, tbody tr:has(.row-check:checked) td { background: transparent; }
  tbody tr:has(.row-check:checked) { background: var(--selected); }
  tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; border: 0; }
  tbody td::before { content: attr(data-label); flex: 0 0 auto; font-size: 12px; color: var(--slate); }
  tbody td.primary { display: block; padding: 0 36px 4px 0; font-weight: 500; color: var(--ink); }
  tbody td.primary::before { content: none; }
  tbody td.check { position: absolute; left: 16px; top: 14px; width: auto; padding: 0; }
  tbody td.check::before { content: none; }
  tbody td.actions { position: absolute; right: 8px; top: 8px; width: auto; padding: 0; }
  tbody td.actions::before { content: none; }
  tbody td.actions-wide { right: 12px; }
  tbody tr:has(td.actions-wide) td.primary { padding-right: 130px; }
  .table-foot { justify-content: space-between; gap: 10px; }
  .form { grid-template-columns: 1fr; }
  .kv > div { grid-template-columns: 1fr; gap: 2px; }
  .summary { flex-wrap: wrap; }
  .tabs { gap: 18px; overflow-x: auto; }
  .toast { inset: auto 16px 16px 16px; }
  .dialog { padding: 20px; }
}

/* Bestellen en huisstijl: samenvatting onder de hoofdkolom op smallere schermen. */
@media (max-width: 1000px) { .order { grid-template-columns: minmax(0, 1fr); } .order-side { position: static; } }

/* ---------- Telefoon: overige onderdelen ---------- */
@media (max-width: 700px) {
  /* Eén linkerlijn binnen kaarten: koppen en regels op 16px, gelijk aan de tabelrijen. */
  .block-head, .toolbar, .chips, .select-bar, .attn-item, .attn-empty, .stat, .activity li, .recent-row,
  .kv > div, .card-body, .card-foot, .table-note, .table-foot, .form, .summary, .table-empty { padding-left: 16px; padding-right: 16px; }
  .toolbar .search { flex: 1 1 0; width: auto; min-width: 0; }
  .sub-row, .sum-row, .sum-title, .pick-row, .plans, .choices, .meters, .meter-total { padding-left: 16px; padding-right: 16px; }
  .inline-note, .card > .tabs { margin-left: 16px; margin-right: 16px; }
  .meters, .plans, .checks { grid-template-columns: 1fr; }
  .meters { gap: 14px; }
  .pick-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .pick-row .select { width: 100%; }
  .setting-row { flex-wrap: wrap; }
  .public-main { padding: 20px 16px 40px; }
  .change, .check-item { padding-left: 16px; padding-right: 16px; }
  .change-head { flex-wrap: wrap; }
  .block-head, .head-actions { flex-wrap: wrap; row-gap: 6px; }
  .panel-dns .toolbar-right { margin-left: 0; }   /* de knoppen staan op een smal scherm links, onder het zoekveld en de filterknop */
  .draft-bar { flex-direction: column; align-items: flex-start; }
  .block-head .head-actions { flex: 1 1 100%; }
  .check-item { grid-template-columns: 8px minmax(0, 1fr); }
  .check-item > :nth-child(2) { grid-column: 2; justify-self: start; }
  .sg-row { grid-template-columns: 1fr; gap: 8px; padding-left: 16px; padding-right: 16px; }
  .swatches, .sg-sub { padding-left: 16px; padding-right: 16px; }
  .sg-items .field, .sg-items .meter, .sg-items > .search, .sg-items > .select, .sg-items > .textarea { width: 100%; }
  .notice { padding-left: 16px; }
  .select-bar { flex-wrap: wrap; row-gap: 10px; }
  .select-actions { margin-left: 0; flex-basis: 100%; }
  .steps { grid-template-columns: 1fr; gap: 20px; padding: 4px 16px 20px; }
  .facts { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .setting-row { padding: 14px 16px; }
  .steps li { padding: 0 0 0 36px; }
  .steps li::before { top: 26px; bottom: -22px; left: 11px; right: auto; width: 2px; height: auto; }
  tfoot, tfoot tr, tfoot td { display: block; }
  tfoot tr { display: flex; justify-content: space-between; padding: 4px 16px; }
  tfoot tr:first-child { padding-top: 12px; }
  tfoot tr:last-child { padding-bottom: 14px; }
  tfoot td { padding: 0; }
}

/* ---------- Donkere modus ----------
   Volgt het systeem. De schakelaar "Donkere modus" in het accountmenu (#theme-flip) draait de keuze om.
   De twee blokken hieronder zijn gelijk: wie het ene aanpast, past ook het andere aan. */
@media (prefers-color-scheme: dark) {
  :root:not(:has(#theme-flip:checked)) {
    color-scheme: dark; /* ook vinkjes, keuzelijsten en schuifbalken van de browser */
    --warn: #e0a84a; --warn-dark: #f0c27a; --focus: #4f88a8;
    --bg: #0b1a24;
    --panel: #10232f;
    --line: #1f3340;
    --ink: #e6edf3;
    --slate: #8aa0b2;
    --slate-dark: #b7c6d2;
    --slate-light: #2c4150;
    --navy-soft: #071722;
    --hover: rgba(255, 255, 255, .03);
    --selected: rgba(255, 255, 255, .07);
    --chip-bg: #e6edf3; --chip-fg: #0b1a24;
    --float-bg: #223846;
    --green: #3fbf84;
    .topbar-logo img { filter: brightness(0) invert(1); }
    .promo-art circle[fill="rgb(2,27,41)"] { fill: #1b3b4f; }
    .dialog::backdrop, .nav-backdrop { background: rgba(0, 0, 0, .55); }
    .status.busy::before { background: #4f88a8; }
    .toggle:has(input:checked), .toggle.is-on { background: #4f88a8; } /* navy valt weg op een donkere kaart */
    .inline-note.is-error, .inline-note.is-error strong, .notice.is-error p, .notice.is-error strong, .auth-error, .diff-del { color: #ff9aa1; }
    .diff-add { color: #5fd39a; } /* merkrood is te donker op een donkere tint */
    .input:focus, .select:focus { border-color: #4f88a8; box-shadow: 0 0 0 3px rgba(79, 136, 168, .25); }
  }
  /* systeem donker: de schakelaar staat aan tot je hem omzet */
  .theme-switch .toggle { background: #4f88a8; }
  .theme-switch .toggle::after { transform: translateX(14px); }
  .theme-switch .toggle:has(input:checked) { background: var(--slate-light); }
  .theme-switch .toggle:has(input:checked)::after { transform: none; }
}
@media (prefers-color-scheme: light) {
  :root:has(#theme-flip:checked) {
    color-scheme: dark; /* ook vinkjes, keuzelijsten en schuifbalken van de browser */
    --warn: #e0a84a; --warn-dark: #f0c27a; --focus: #4f88a8;
    --bg: #0b1a24;
    --panel: #10232f;
    --line: #1f3340;
    --ink: #e6edf3;
    --slate: #8aa0b2;
    --slate-dark: #b7c6d2;
    --slate-light: #2c4150;
    --navy-soft: #071722;
    --hover: rgba(255, 255, 255, .03);
    --selected: rgba(255, 255, 255, .07);
    --chip-bg: #e6edf3; --chip-fg: #0b1a24;
    --float-bg: #223846;
    --green: #3fbf84;
    .topbar-logo img { filter: brightness(0) invert(1); }
    .promo-art circle[fill="rgb(2,27,41)"] { fill: #1b3b4f; }
    .dialog::backdrop, .nav-backdrop { background: rgba(0, 0, 0, .55); }
    .status.busy::before { background: #4f88a8; }
    .toggle:has(input:checked), .toggle.is-on { background: #4f88a8; } /* navy valt weg op een donkere kaart */
    .inline-note.is-error, .inline-note.is-error strong, .notice.is-error p, .notice.is-error strong, .auth-error, .diff-del { color: #ff9aa1; }
    .diff-add { color: #5fd39a; } /* merkrood is te donker op een donkere tint */
    .input:focus, .select:focus { border-color: #4f88a8; box-shadow: 0 0 0 3px rgba(79, 136, 168, .25); }
  }
}

/* Kieslijst met zoekveld (bijv. "DNS overnemen" op domein-detail.php).
   Elke regel is een verborgen radioknop; de gekozen regel krijgt een kleur.
   js/dns-overnemen.js filtert de lijst tijdens het typen. */
.picker-list { max-height: 220px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-veld); padding: 4px 0; }
.picker-group { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.picker-item { position: relative; display: block; padding: 7px 12px; cursor: pointer; overflow-wrap: anywhere; }
.picker-item input { position: absolute; opacity: 0; pointer-events: none; }
.picker-item:hover { background: var(--bg); }
.picker-item:has(input:checked) { background: var(--selected); font-weight: 600; }
.picker-item:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; }
.picker-empty { display: none; padding: 8px 12px; color: var(--slate); }

/* Verborgen elementen echt verbergen, ook als een class display zet
   (bijv. de foutmelding van het schuifje op domein.php) */
[hidden] { display: none !important; }

/* Schuifje dat (nu) niet gewijzigd kan worden; de reden staat in de title */
.toggle:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.toggle:has(input:focus-visible) { outline: 2px solid var(--navy-soft); outline-offset: 2px; }
/* Bevestigknop voor uitzetten (opzeggen) in rood */
.btn-primary.is-danger { background: var(--brand); border-color: var(--brand); }
/* Schuifje als <span> dat vast staat (domein-detail.php) */
.toggle.is-locked { opacity: .55; cursor: not-allowed; }
/* Grijze tekst, bijv. "Kan nu niet" in plaats van een knop */
.muted { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* Groep wijzigen (domein-detail.php): het veld voor een nieuwe groep
   alleen tonen als "Nieuwe groep maken" gekozen is */
.dialog .groep-nieuw { display: none; }
.dialog:has(option[value="nieuw"]:checked) .groep-nieuw { display: flex; }

/* ---------- DNS-records bewerken in de tabel (js/dns-bewerken.js) ---------- */
/* Twee knoppen per regel: Wijzigen en Verwijderen */
#dns-records th.actions-wide, #dns-records td.actions-wide { width: 184px; padding-right: 24px; white-space: nowrap; }
.dns-knoppen { display: inline-flex; gap: 6px; justify-content: flex-end; }
/* De bewerkregel: één cel over de hele breedte met het formulier erin.
   De kolommen lopen ongeveer gelijk met die van de tabel. */
.dns-bewerk-rij td, tbody tr.dns-bewerk-rij:hover td { background: var(--hover); padding: 12px 24px; }
.dns-form { display: grid; grid-template-columns: 96px 190px minmax(0, 1fr) 130px auto; gap: 8px; align-items: center; }
.dns-form-knoppen { display: inline-flex; gap: 6px; }
.dns-form small { grid-column: 1 / -1; font-size: 12px; color: var(--slate); }
.dns-form small.dns-form-fout { color: var(--brand); font-weight: 500; }
/* Een record dat net is opgeslagen licht even op */
@keyframes dns-nieuw { from { background: rgba(46, 158, 107, .18); } to { background: transparent; } }
tr.dns-rij.is-nieuw td { animation: dns-nieuw 2.5s ease-out; }
#dns-fout { margin: 0 24px 12px; }
#dns-voorstel .diff { max-height: 360px; overflow-y: auto; margin-bottom: 12px; }
@media (max-width: 900px) {
  .dns-form { grid-template-columns: 96px minmax(0, 1fr); }
  .dns-form input[name="waarde"], .dns-form-knoppen { grid-column: 1 / -1; }
}
/* DNS-kaart als kolom, zodat de selectiebalk (die in de HTML na de tabel
   staat) met order: -1 bovenaan komt, op de plek van de werkbalk */
.panel-dns { display: flex; flex-direction: column; }
.panel-dns > .select-bar { padding-top: 20px; }
/* DNS-geschiedenis: één regel per wijziging */
.dns-historie { table-layout: fixed; }
.dns-historie th:nth-child(1) { width: 150px; }
.dns-historie th:nth-child(2) { width: 150px; }
.dns-historie th:nth-child(4) { width: 180px; }
.dns-historie td { vertical-align: top; }
.dns-historie td.primary { white-space: nowrap; font-weight: 400; }
.dns-historie td code { white-space: normal; overflow-wrap: anywhere; color: var(--ink); }
.dns-meer summary { cursor: pointer; color: var(--ink); }
.dns-meer .diff { margin-top: 8px; max-height: 300px; overflow-y: auto; }
/* Eerdere versie terugzetten: label, keuzelijst en knop op één regel */
.dns-versie { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.dns-versie > span { display: flex; flex-direction: column; margin-right: auto; }
.dns-versie > span small { font-size: 12px; color: var(--slate); }
/* Venster Eerdere versies */
#dns-versie-inhoud { margin-bottom: 0; min-height: 80px; }
#dns-versie-inhoud .diff { max-height: 220px; overflow-y: auto; margin-bottom: 0; }
#dns-versie-inhoud .dns-versie-datum { margin: 0; }
#dns-versie-inhoud.is-bezig { opacity: .5; }
/* Venster Record toevoegen: type, naam en TTL naast elkaar, waarde eronder */
.dns-nieuw-rij { display: grid; grid-template-columns: 120px minmax(0, 1fr) 150px; gap: 12px; align-items: start; }
/* Het vak Waarde: één regel hoog, bij TXT hoger (class is-groot via js/dns-bewerken.js) */
#dn-waarde { min-height: 34px; height: 34px; padding: 8px 10px; resize: none; overflow: hidden; white-space: nowrap; }
#dn-waarde.is-groot { height: 120px; resize: vertical; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
p.dns-form-fout { margin: 0; color: var(--brand); font-weight: 500; font-size: 13px; }
@media (max-width: 600px) { .dns-nieuw-rij { grid-template-columns: 1fr; } }
/* Een regel van de DNS-tabel is aanklikbaar (bewerken in de regel zelf) */
#dns-records tr.dns-rij:has(.dns-bewerk) td:not(.check):not(.actions) { cursor: pointer; }
/* Op een smal scherm staan de knoppen Wijzigen en Verwijderen onder het record, niet rechtsboven */
@media (max-width: 700px) {
  #dns-records tbody td.actions-wide { position: static; width: auto; padding: 6px 0 0; text-align: left; }
  #dns-records tbody tr:has(td.actions-wide) td.primary { padding-right: 0; }
}

/* Verbruik per mailbox (hosting-detail.php, onderaan het blok Verbruik).
   Uitklappen met details/summary, zonder JavaScript. De knop toont
   "Bekijk" of "Verberg" via CSS. */
.mail-verbruik { padding: 4px 24px 20px; }
.mail-verbruik summary { list-style: none; cursor: pointer; display: inline-flex; }
.mail-verbruik summary::-webkit-details-marker { display: none; }
.mail-verbruik[open] summary { margin-bottom: 14px; }
.mail-verbruik-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.mail-verbruik-adres { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--ink); }
@media (max-width: 700px) {
  .mail-verbruik { padding-left: 16px; padding-right: 16px; }
  .mail-verbruik-lijst { grid-template-columns: 1fr; }
}
.mail-verbruik .als-open { display: none; }
.mail-verbruik[open] .als-open { display: inline; }
.mail-verbruik[open] .als-dicht { display: none; }

/* Filters naast het zoekveld (reselling-gebruiker-domeinen.php): twee
   keuzelijsten en een knop op één regel. Op een smal scherm onder elkaar. */
.toolbar-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-filters .select { height: 30px; width: auto; }
.toolbar:has(.toolbar-filters) { flex-wrap: wrap; }
/* Tekst alleen voor schermlezers */
.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; }
/* Rechten van een klant van de reseller (reselling-gebruikers.php): vinkjes per groep, in twee kolommen */
.rechten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; padding: 14px; border: 1px solid var(--line); border-radius: 4px; }
.rechten-groep { display: flex; flex-direction: column; gap: 8px; }
.rechten-groep > strong { font-size: 12px; font-weight: 600; color: var(--ink); }
.dialog .rechten .check-line { margin-bottom: 0; font-size: 13px; }
@media (max-width: 600px) { .rechten { grid-template-columns: 1fr; } }
/* Verzamelde DNS-wijzigingen: in de tabel zie je wat klaarstaat */
.tag.is-nieuw { border-color: transparent; background: rgba(46, 158, 107, .14); color: #1f7a52; }
.tag.is-weg { border-color: transparent; background: rgba(220, 47, 59, .10); color: var(--brand); }
tr.dns-rij.is-klaar-nieuw td { background: rgba(46, 158, 107, .06); }
tr.dns-rij.is-klaar-weg td { background: rgba(220, 47, 59, .04); }
tr.dns-rij.is-klaar-weg td code { text-decoration: line-through; color: var(--slate); }
#dns-records tr.dns-rij.is-klaar-weg td:not(.check):not(.actions) { cursor: default; }
/* Annuleren van een geplande wijziging: onder de naam */
.dns-plan-weg { margin-top: 6px; }
.dv-planned .empty-state form { margin-top: 12px; }
/* Met verzamelde wijzigingen staat achter het type soms "nieuw" of "weg":
   de kolom Type is dan breder, zodat het label op dezelfde regel past */
#dns-records[data-verzamelen] th:nth-child(2) { width: 150px; }
#dns-records td.primary { white-space: nowrap; }
/* Een label dat eruitziet als een link (schakelt een keuzerondje om, bijv. naar de weergave Gepland) */
.link-label { text-decoration: underline; cursor: pointer; color: inherit; }
/* Twee even brede kolommen (bijv. tabblad Doorsturing); .kolom stapelt kaarten onder elkaar */
.grid-2.is-gelijk { grid-template-columns: 1fr 1fr; }
.grid-2 .kolom { display: flex; flex-direction: column; gap: 20px; }
.grid-2 .card:has(> .form) { max-width: none; }
@media (max-width: 1000px) { .grid-2.is-gelijk { grid-template-columns: 1fr; } }
@container detail (max-width: 800px) { .grid-2.is-gelijk { grid-template-columns: 1fr; } }
/* Venster Nameservers wijzigen: het blok dat bij de keuze hoort (onze of eigen nameservers) */
.ns-keuze .dialog-fields { margin-bottom: 14px; }
.ns-keuze .choice:has(input:checked) { border-color: var(--navy-soft); background: var(--hover); }
.ns-blok { margin-bottom: 14px; }
.ns-keuze:has(#ns-onze:checked) .ns-blok-eigen { display: none; }
.ns-velden { display: flex; flex-direction: column; gap: 8px; }
.ns-veld { display: flex; align-items: center; gap: 10px; }
.ns-veld label { flex: none; width: 16px; text-align: right; font-size: 12px; font-weight: 500; color: var(--slate); }
.ns-veld .input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ns-meer { display: flex; flex-direction: column; }
.ns-meer summary { cursor: pointer; font-size: 12px; color: var(--slate-dark); margin: 2px 0 0 26px; }
.ns-meer[open] summary { margin-bottom: 8px; }
.ns-meer .ns-veld + .ns-veld { margin-top: 8px; }
.ns-let-op { margin: 12px 0 0; padding: 9px 12px; border-radius: 4px; background: rgba(200, 129, 26, .12); font-size: 12px; color: var(--ink); }