/* MailPort Protection - beheerpanel.
   Opzet naar het aangeleverde ontwerp: donkerblauwe zijbalk met navigatie en snelfilters, lichte werkvlakte,
   witte kaarten met een zachte schaduw, lijstrijen als losse kaarten, ronde paginering en een donker codeblok
   voor logregels en SMTP-gesprekken. Geen verlopen, geen pilletjes; status als gekleurde tekst met een stip. */
:root {
  --navy: #1b2d59;           /* zijbalk */
  --navy-actief: #56699e;    /* actieve regel in de zijbalk */
  --navy-tekst: #c6cde6;     /* tekst in de zijbalk */
  --navy-dim: #8b98c0;       /* kopjes en tellingen in de zijbalk */
  --accent: #4b5bda;         /* knoppen, links, vinkjes */
  --accent-hover: #3d4cc4;
  --accent-zacht: #ededfb;
  --accent-tekst: #3341b3;
  --bg: #eef1f7;
  --rand: #e3e7f0;
  --rand-sterk: #cfd6e4;
  --tekst: #1c2030;
  --gedempt: #707a8f;
  --selectie: #d2d8eb;
  --hover: #f6f8fc;
  --code-bg: #101d32;
  --groen: #1e8a4c;
  --rood: #c93b24;
  --oranje: #b26a0b;
  --hoek: 4px;
  --schaduw: 0 1px 2px rgba(27, 45, 89, .06), 0 1px 6px rgba(27, 45, 89, .05);
  --schaduw-op: 0 8px 22px rgba(27, 45, 89, .16);
  --zijbalk: 240px;
  --knop-hoogte: 40px;      /* knoppen, knopgroepen en het zoekveld even hoog */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tekst); background: var(--bg); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 600; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.gedempt { color: var(--gedempt); }
.klein { font-size: 12px; }
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* Raamwerk: zijbalk links, werkvlakte rechts */
.app { display: flex; min-height: 100vh; }
.zijbalk { width: var(--zijbalk); flex: none; background: var(--navy); color: var(--navy-tekst); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; }
.zijbalk-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }   /* alleen het middenstuk schuift; logo en voet blijven staan */
.merk { display: block; padding: 24px 24px 20px; }
.merk img { height: 40px; display: block; }
.zijnav a, .zijlijst a { display: flex; align-items: center; gap: 12px; margin: 2px 12px; padding: 9px 12px; border-radius: var(--hoek); color: var(--navy-tekst); font-weight: 500; }
.zijnav a:hover, .zijlijst a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.zijnav a.actief, .zijlijst a.actief { background: var(--navy-actief); color: #fff; }
.zijnav .ic { width: 20px; height: 20px; opacity: .9; }
/* Secties in de zijbalk (details/summary): kopje met pijl, in- en uitklapbaar */
.sectie { margin-top: 6px; }
.sectie > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; margin: 2px 12px; padding: 7px 12px; border-radius: var(--hoek); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--navy-dim); cursor: pointer; user-select: none; }
.sectie > summary::-webkit-details-marker { display: none; }
.sectie > summary:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sectie > summary .ic { width: 14px; height: 14px; opacity: .8; transition: transform .15s; }
.sectie[open] > summary .ic { transform: rotate(90deg); }
.sectie[open] { padding-bottom: 4px; }
/* Menuknop: alleen op een smal scherm */
.menuknop { display: none; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--hoek); background: transparent; color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.menuknop .ic { width: 18px; height: 18px; }
.zijbalk.open .menuknop { background: rgba(255, 255, 255, .14); }
/* Telbadge (06-11-2026, besluit 21): aantal meldingen van klanten dat nog beoordeeld moet worden, achter "Spam leren"
   en op klein scherm ook op de menuknop. Accentkleur; op de actieve regel wit, anders valt hij weg tegen navy-actief. */
.badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.zijnav a .badge { margin-left: auto; }
.zijnav a.actief .badge { background: #fff; color: var(--navy); }
.menuknop .badge { min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; font-size: 11.5px; }
.zijkop { margin: 26px 24px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--navy-dim); }
.zijlijst a { padding: 7px 12px; gap: 11px; font-weight: 400; }
.zijlijst a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.zijlijst a b { margin-left: auto; font-weight: 500; font-size: 12.5px; color: var(--navy-dim); font-variant-numeric: tabular-nums; }
.zijlijst a.actief b { color: #e2e7f7; }
.zijbalk-voet { margin-top: auto; padding: 18px 24px 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; }
.zijbalk-voet .gebruiker { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 500; word-break: break-all; }
.zijbalk-voet a.gebruiker:hover, .zijbalk-voet a.gebruiker.actief { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.zijbalk-voet .host { display: block; margin: 2px 0 10px 0; color: var(--navy-dim); font-size: 12px; word-break: break-all; }
.zijbalk-voet form { margin: 0; }
.zijbalk-voet button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--navy-tekst); font: inherit; cursor: pointer; }
.zijbalk-voet button:hover { color: #fff; }
.zijbalk-voet .ic { width: 16px; height: 16px; }

.werk { flex: 1; min-width: 0; padding: 28px 28px 48px; }

/* Kopbalk: titel, aantal, en rechts de knoppen en het zoekveld */
.kopbalk { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.kopbalk h1 { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.kopbalk .aantal { color: var(--gedempt); font-size: 15px; }
.kopbalk .rechts { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
h1.titel { font-size: 26px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.uitleg { color: var(--gedempt); margin: 0 0 18px; }

/* Knoppen en velden */
.knop {
  display: inline-flex; align-items: center; gap: 8px; height: var(--knop-hoogte); padding: 0 16px; border: 1px solid var(--rand);
  border-radius: var(--hoek); background: #fff; color: var(--tekst); font: inherit; font-weight: 500; cursor: pointer; box-shadow: var(--schaduw); white-space: nowrap;
}
.knop:hover { background: var(--hover); text-decoration: none; }
.knop:active { transform: translateY(1px); }
.knop.primair { background: var(--accent); border-color: var(--accent); color: #fff; }
.knop.primair:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.knop.zacht { background: var(--accent-zacht); border-color: transparent; color: var(--accent-tekst); box-shadow: none; }
.knop.zacht:hover { background: #e2e4f8; }
.knop.actief { color: var(--accent); border-color: var(--accent); }
.knop .ic { width: 17px; height: 17px; }
.knopgroep { display: inline-flex; background: #fff; border: 1px solid var(--rand); border-radius: var(--hoek); box-shadow: var(--schaduw); }
.knopgroep > * { display: inline-flex; align-items: center; gap: 7px; height: calc(var(--knop-hoogte) - 2px); padding: 0 13px; border: 0; border-right: 1px solid var(--rand); background: none; color: var(--gedempt); font: inherit; font-weight: 500; cursor: pointer; }
.knopgroep > *:last-child { border-right: 0; }
.knopgroep > *:hover { color: var(--tekst); background: var(--hover); text-decoration: none; }
.knopgroep > .actief { color: var(--accent); }
.zoekveld { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--rand); border-radius: var(--hoek); padding: 0 14px; height: var(--knop-hoogte); width: 360px; max-width: 100%; color: var(--gedempt); box-shadow: var(--schaduw); }
.zoekveld:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(75, 91, 218, .15); }
.zoekveld input[type=text] { border: 0; outline: 0; height: 100%; width: 100%; min-width: 0; margin: 0; padding: 0; font: inherit; font-size: 14px; background: none; color: var(--tekst); box-shadow: none; border-radius: 0; }
.zoekveld input[type=text]:focus { border: 0; box-shadow: none; }
.zoekveld input::placeholder { color: #a3abbd; }
input[type=text], input[type=password], input[type=datetime-local], select {
  width: 100%; height: 36px; padding: 4px 10px; border: 1px solid var(--rand-sterk); border-radius: var(--hoek);
  font: inherit; color: var(--tekst); background: #fff;
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(75, 91, 218, .15); }
label { font-weight: 500; }

/* Kaarten */
.kaart { background: #fff; border-radius: var(--hoek); box-shadow: var(--schaduw); }
.kaart-kop { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--rand); }
.kaart-kop h2 { margin: 0; font-size: 15px; font-weight: 600; }
.kaart-inhoud { padding: 18px 20px; }

/* Uitgebreid zoeken: inklapbaar paneel onder de kopbalk */
.filters-kaart { display: none; margin-bottom: 20px; }
.filters-kaart.open { display: block; }
.filters { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px 16px; }
.filters label { display: block; font-size: 12.5px; color: var(--gedempt); margin-bottom: 4px; }
.acties { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.acties .rechts { margin-left: auto; }

/* Lijsten: elke rij een witte kaart; de kop ook */
.lijst { display: flex; flex-direction: column; gap: 7px; }
.rij { display: grid; grid-template-columns: var(--kolommen); align-items: center; background: #fff; border-radius: var(--hoek); box-shadow: var(--schaduw); padding: 0 10px; position: relative; transition: box-shadow .12s, transform .12s; }
.rij > div { padding: 11px 10px; min-width: 0; font-size: 13.5px; }
.rij.kop > div { padding: 13px 10px; font-size: 13.5px; font-weight: 500; }
.rij.kop a { color: var(--tekst); display: inline-flex; align-items: center; gap: 5px; }
.rij.kop a:hover { text-decoration: none; color: var(--accent); }
.rij.kop a .ic { width: 14px; height: 14px; color: #9aa3b8; stroke-width: 2.2; }
.rij.kop a.actief .ic { color: var(--accent); }
.rij:not(.kop):hover { box-shadow: var(--schaduw-op); transform: translateY(-1px); z-index: 2; }
.rij:has(.menu.open) { z-index: 5; }
.rij .adres { word-break: break-all; }
.rij .onderwerp a { color: var(--tekst); font-weight: 500; }
.rij .onderwerp a:hover { color: var(--accent); }
.rij .sub { display: block; font-size: 12px; color: var(--gedempt); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rij .cel-menu { padding: 0; display: flex; justify-content: flex-end; }
.lijst-log { --kolommen: 148px 134px 1.15fr 1fr 140px 1.5fr 104px 40px; }
.rij .mono { font-size: 12px; }
.rij .tijd { white-space: nowrap; }
.leeg { padding: 28px; text-align: center; color: var(--gedempt); background: #fff; border-radius: var(--hoek); box-shadow: var(--schaduw); }

/* Klasse en status: gekleurde tekst, status met een stip */
.st { font-weight: 500; }
.st.stip::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; }
.st-delivered, .kl-not-spam { color: var(--groen); }
.st-rejected, .st-bounced, .st-expired, .kl-spam, .kl-virus, .kl-vervalst { color: var(--rood); }
.kl-virus, .kl-vervalst { text-transform: uppercase; font-size: 12px; }   /* vervalst: DMARC-reject (besluit 17) */
.st-deferred, .kl-banned, .kl-invalid-recipient, .kl-relay-denied, .kl-policy, .kl-unsure { color: var(--oranje); }
.st-greylisted, .kl-greylisted { color: var(--gedempt); }
.st-queued { color: var(--accent); }

/* Voet onder een lijst: aantal links, ronde paginaknoppen rechts */
.voet { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; flex-wrap: wrap; color: var(--gedempt); }
.voet .per { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.voet .per select { width: auto; height: 34px; }
.paginas { display: flex; gap: 8px; align-items: center; }
.paginas a, .paginas span { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rand-sterk); display: inline-flex; align-items: center; justify-content: center; color: var(--tekst); background: #fff; font-size: 13.5px; }
.paginas a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.paginas span.actief { border: 2px solid var(--navy); font-weight: 600; }
.paginas span.uit { color: #b9c0d0; }
.paginas span.gat { border: 0; background: none; width: auto; }
.paginas .ic { width: 16px; height: 16px; }

/* Rij-menu (drie puntjes, rechts in de rij) */
.menu { position: relative; display: inline-block; }
.menu > button { appearance: none; -webkit-appearance: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--hoek); background: none; color: var(--gedempt); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.menu > button:hover, .menu.open > button { background: var(--bg); color: var(--tekst); }
.menu-lijst { display: none; position: absolute; right: 0; top: 36px; z-index: 30; min-width: 290px; background: #fff; border-radius: 6px; box-shadow: var(--schaduw-op), 0 0 0 1px var(--rand); padding: 6px 0; text-align: left; }
.menu.open .menu-lijst { display: block; }
.menu-kop { padding: 8px 16px 4px; font-size: 11px; font-weight: 600; color: var(--gedempt); text-transform: uppercase; letter-spacing: .08em; }
.menu-lijst a, .menu-lijst button.item { display: block; width: 100%; text-align: left; padding: 7px 16px; color: var(--tekst); background: none; border: 0; font: inherit; cursor: pointer; }
.menu-lijst a:hover, .menu-lijst button.item:hover { background: var(--accent-zacht); color: var(--accent-tekst); text-decoration: none; }
.menu-lijst .uit { display: block; padding: 7px 16px; color: #b3bac9; cursor: default; }
.menu-lijst hr { border: 0; border-top: 1px solid var(--rand); margin: 6px 0; }
.menu-lijst form { margin: 0; }

/* Detailpagina: kruimelpad, titel en secties in één brede kaart */
.kruimel { color: var(--gedempt); font-size: 15px; margin-bottom: 16px; }
.kruimel a { color: var(--gedempt); }
.kruimel a:hover { color: var(--accent); }
.doc { padding: 32px 40px 36px; max-width: 1100px; }
.doc h1 { font-size: 30px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.015em; line-height: 1.25; word-break: break-word; }
.doc .meta { margin: 0 0 18px; color: var(--gedempt); font-size: 15px; }
.doc .meta b { color: var(--tekst); font-weight: 500; }
.doc h2 { font-size: 17px; font-weight: 600; margin: 30px 0 12px; display: flex; align-items: baseline; gap: 10px; }
.doc h2 .klein { font-weight: 400; }
.doc .acties { margin-top: 0; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
table.velden { width: 100%; border-collapse: collapse; }
.velden th { width: 165px; text-align: left; font-weight: 400; color: var(--gedempt); padding: 6px 12px 6px 0; vertical-align: top; }
.velden td { padding: 6px 0; word-break: break-word; }
.velden tr + tr th, .velden tr + tr td { border-top: 1px solid var(--rand); }
table.regels { width: 100%; border-collapse: collapse; }
.regels th { text-align: left; font-weight: 500; color: var(--gedempt); padding: 6px 12px 8px 0; border-bottom: 1px solid var(--rand); }
.regels td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rand); vertical-align: top; }
.regels tr:last-child td { border-bottom: 0; }
pre.code { margin: 0; background: var(--code-bg); color: #e6ebf5; border-radius: var(--hoek); padding: 20px 24px; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; max-height: 560px; overflow: auto; }
pre.code .uit { color: #8fb8ff; }
pre.code .in { color: #e6ebf5; }
pre.code .melding { color: #f58a5a; }
pre.code .tijd { color: #8b98c0; }
pre.code .proces { color: #5ac88a; }
pre.code .proces.rood { color: #ff7a59; }

/* Venster (dialog) voor callout- en SMTP-tests */
dialog.modal { border: 0; border-radius: 6px; padding: 0; width: min(780px, 92vw); color: var(--tekst); box-shadow: 0 24px 70px rgba(17, 30, 62, .4); }
dialog.modal::backdrop { background: rgba(17, 30, 62, .55); }
.modal-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 30px 36px 10px; }
.modal-kop h2 { margin: 0; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 12px; word-break: break-word; }
.modal-kop h2 .ic { width: 24px; height: 24px; color: var(--gedempt); }
.modal-kop .tijd { text-align: right; color: var(--gedempt); font-size: 13px; white-space: nowrap; }
.modal-kop .tijd b { display: block; font-size: 15px; font-weight: 500; }
.modal-inhoud { padding: 10px 36px 6px; }
.modal-voet { display: flex; justify-content: flex-end; gap: 12px; padding: 22px 36px 30px; margin: 0; }
.modal-voet .knop { height: 42px; padding: 0 28px; }

/* Inloggen */
.login-pagina { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 16px; }
.login { width: 380px; background: #fff; border-radius: 6px; box-shadow: var(--schaduw-op); overflow: hidden; }
.login-kop { background: var(--navy); padding: 30px 32px; }
.login-kop img { height: 44px; display: block; }
.login-inhoud { padding: 26px 32px 30px; }
.login label { display: block; font-size: 13px; color: var(--gedempt); margin: 14px 0 5px; }
.login label:first-child { margin-top: 0; }
.login .knop { width: 100%; justify-content: center; margin-top: 22px; height: 42px; }
.fout { color: var(--rood); margin-top: 10px; }

@media (max-width: 1250px) {
  .lijst-log { --kolommen: 136px 126px 1.1fr 1fr 120px 1.3fr 96px 36px; }
  .rij > div { padding-left: 6px; padding-right: 6px; }
  .filters { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}
@media (max-width: 560px) {
  .zijbalk-voet .gebruiker .naam { display: none; }
}
@media (max-width: 900px) {
  .app { flex-direction: column; }
  /* Smal scherm: één vaste balk bovenaan (logo, gebruiker, Uitloggen, Menu); het menu klapt eronder open */
  .zijbalk { width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; overflow: visible; z-index: 40; padding-right: 10px; box-shadow: 0 2px 10px rgba(27, 45, 89, .25); }
  .merk { order: 1; flex: 1; min-width: 0; padding: 12px 16px; }
  .merk img { height: 28px; }
  .zijbalk-voet { order: 2; margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: 12px; }
  .zijbalk-voet .host { display: none; }
  .zijbalk-voet form { margin: 0; }
  .menuknop { order: 3; display: inline-flex; margin-left: 4px; }
  .zijbalk-menu { order: 4; position: absolute; top: 100%; left: 0; right: 0; display: none; background: var(--navy); max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; padding: 8px 0 14px; border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 16px 28px rgba(0, 0, 0, .3); }
  .zijbalk.open .zijbalk-menu { display: block; }
  .zijbalk-menu .domeinkeuze { margin: 6px 12px 14px; }
  .zijkop { margin: 10px 20px 4px; }
  .zijlijst { display: flex; overflow-x: auto; padding: 0 8px 10px; }
  .zijlijst a { margin: 0 4px; white-space: nowrap; }
  .werk { padding: 18px 16px 32px; }
  .kopbalk h1 { font-size: 22px; }
  .zoekveld { width: 100%; }
  .filters { grid-template-columns: 1fr 1fr; }
  .rij { display: block; padding: 8px 14px 10px; }
  .rij.kop { display: none; }
  .rij > div { display: flex; gap: 10px; padding: 3px 0; }
  .rij .sub { white-space: normal; }
  .rij > div::before { content: attr(data-l); color: var(--gedempt); min-width: 88px; flex: none; font-size: 12px; padding-top: 1px; }
  .rij > div[data-l=""]::before { content: none; }
  .rij .cel-menu { position: absolute; top: 6px; right: 6px; padding: 0; }
  .rij .cel-menu::before { content: none; }
  .twee { grid-template-columns: 1fr; }
  .doc { padding: 22px 20px 26px; }
  .doc h1 { font-size: 24px; }
  .velden th { width: 130px; }
  .modal-kop, .modal-inhoud, .modal-voet { padding-left: 20px; padding-right: 20px; }
}

/* Domeinniveau in de zijbalk: gekozen domein met weg terug */
.niveau { margin: 4px 12px 10px; padding: 12px 12px 12px; border-radius: var(--hoek); background: rgba(255, 255, 255, .06); }
.niveau .zijkop { margin: 0 0 4px; }
.niveau .domeinnaam { display: block; color: #fff; font-size: 15px; font-weight: 600; word-break: break-all; }
.niveau a { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; font-size: 12.5px; color: var(--navy-dim); }
.niveau a:hover { color: #fff; text-decoration: none; }
.niveau a .ic { width: 14px; height: 14px; }
.domeinlink { font-weight: 600; }
.knop.klein-knop { height: 30px; padding: 0 10px 0 12px; font-size: 12.5px; box-shadow: none; }
.knop.klein-knop .ic { width: 14px; height: 14px; }

/* Overzicht: tegels met aantallen */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }   /* 150: zes tegels (Statistieken) op één rij naast de zijbalk */
.tegel { padding: 14px 18px 12px; }
.tegel .label { display: block; color: var(--gedempt); font-size: 13px; margin-bottom: 4px; }
.tegel b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--accent-tekst); font-variant-numeric: tabular-nums; }
.tegel.groen b { color: var(--groen); }
.tegel.rood b { color: var(--rood); }
.tegel.oranje b { color: var(--oranje); }
.tegel.grijs b { color: var(--gedempt); }
h2.sectie { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.lijst-overzicht { --kolommen: 1.5fr 1fr 1fr 1fr 1fr 1fr 150px; }
.lijst-overzicht .rij > div:not(:first-child) { font-variant-numeric: tabular-nums; }

/* Clusterstatus: één kaart per node met meters en balken */
.node { margin-bottom: 16px; }
.node-kop { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--rand); flex-wrap: wrap; }
.node-kop h2 { margin: 0; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.node-kop h2 .ic { width: 20px; height: 20px; color: var(--gedempt); }
.node-kop .rechts { margin-left: auto; display: flex; gap: 18px; align-items: center; color: var(--gedempt); font-size: 13px; }
.node-inhoud { padding: 22px 24px 24px; }
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 28px; }
.meter .label { display: flex; justify-content: space-between; gap: 8px; color: var(--gedempt); font-size: 13px; margin-bottom: 4px; }
.meter b { display: block; font-size: 22px; font-weight: 600; margin-bottom: 8px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.meter b small { font-size: 13px; font-weight: 400; color: var(--gedempt); }
.balk { height: 8px; background: #e0e2e4; border-radius: 4px; overflow: hidden; }
.balk i { display: block; height: 100%; min-width: 2px; background: #5ac88a; border-radius: 4px; }
.balk i.oranje { background: #f0b429; }
.balk i.rood { background: #e5533d; }
.meter .sub { display: block; color: var(--gedempt); font-size: 12px; margin-top: 6px; }
/* Spam leren: verwijskaarten "Meldingen van klanten" (besluit 21) en "Herkenning". Links een groot getal of een icoon;
   met open meldingen krijgt de kaart de zachte accentkleur, zodat ze opvalt tussen de witte kaarten. */
.kaart.verwijzing { margin-top: 14px; }
.kaart.verwijzing .kaart-inhoud { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kaart.verwijzing .teller { flex: none; min-width: 52px; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--gedempt); text-align: center; font-variant-numeric: tabular-nums; }
.kaart.verwijzing .icoon { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: var(--accent-zacht); color: var(--accent-tekst); }
.kaart.verwijzing .icoon .ic { width: 26px; height: 26px; }
.kaart.verwijzing .tekst { flex: 1 1 240px; }
.kaart.verwijzing .tekst b { display: block; font-size: 15px; font-weight: 600; }
.kaart.verwijzing .tekst .sub { display: block; color: var(--gedempt); font-size: 13px; margin-top: 3px; }
.kaart.verwijzing.open { background: var(--accent-zacht); box-shadow: inset 0 0 0 1px #d8dbf5, var(--schaduw); }
.kaart.verwijzing.open .teller { color: var(--accent-tekst); }
.node h3 { font-size: 15px; font-weight: 600; margin: 26px 0 10px; }
.node .velden th { width: auto; }
.node .velden td { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .lijst-domeinen .cel-menu { position: static; display: block; padding-top: 6px; }
}
@media (max-width: 900px) {
  .kopbalk .rechts { margin-left: 0; width: 100%; }
  .kopbalk .rechts .zoekveld { flex: 1; width: auto; min-width: 180px; }
  .niveau { margin: 4px 12px 8px; }
}

/* Melding na een actie (toevoegen, opslaan) */
.melding { background: #e6f6ec; border-left: 4px solid var(--groen); color: #14532d; padding: 12px 16px; border-radius: var(--hoek); margin-bottom: 18px; }

/* Formulieren: instellingen en het venster "Domein toevoegen" */
.formulier { max-width: 640px; }
.formulier .veld { margin-bottom: 16px; }
.formulier label { display: block; font-size: 13px; color: var(--gedempt); margin-bottom: 5px; }
.formulier .hulp { display: block; font-size: 12.5px; color: var(--gedempt); margin-top: 5px; }
.formulier input.smal { width: 140px; }
.formulier .acties { margin-top: 4px; }
.fout-veld { color: var(--rood); font-size: 12.5px; margin-top: 5px; }
dialog .formulier { max-width: none; }
dialog .modal-inhoud .veld:last-child { margin-bottom: 4px; }

/* Domeinenlijst met status */
.lijst-domeinen { --kolommen: 1.3fr 1.5fr 80px 170px 110px; }

/* Domeinoverzicht: groepen met icoontegels, naar het configuratiescherm van SpamExperts */
.tegels a.tegel { color: inherit; }
.tegels a.tegel:hover { text-decoration: none; box-shadow: var(--schaduw-op); }
.groepen { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.kaart.groep .kaart-kop { padding: 11px 18px; }
.icoontegels { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 10px 12px; }
.icoontegel { width: 112px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 4px; border-radius: var(--hoek); color: var(--tekst); font-size: 12.5px; line-height: 1.3; }
.icoontegel .icoon { width: 50px; height: 50px; border-radius: 11px; background: var(--accent-zacht); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.icoontegel .icoon .ic { width: 24px; height: 24px; stroke-width: 1.8; }
.icoontegel:hover { background: var(--hover); text-decoration: none; }
.icoontegel:hover .icoon { background: var(--accent); color: #fff; }
.icoontegel .aantal { color: var(--gedempt); font-size: 11.5px; }   /* telling achter Quarantaine en Twijfel */
/* Kleinere schermen (laptop tot 1250 px, en smal): tegels en groepen compacter, zodat meer in beeld past */
@media (max-width: 1250px) {
  .werk { padding: 20px 20px 36px; }
  .kopbalk { margin-bottom: 14px; }
  .tegels { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin-bottom: 14px; }   /* vijf tellingen op één rij vanaf ~1000 px */
  .tegel { padding: 10px 12px 9px; }
  .tegel .label { font-size: 12.5px; margin-bottom: 2px; }
  .tegel b { font-size: 22px; }
  .groepen { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
  .kaart.groep .kaart-kop { padding: 9px 16px; }
  .icoontegels { gap: 2px; padding: 8px 8px 10px; }
  .icoontegel { width: 104px; padding: 6px 4px; font-size: 12px; }
  .icoontegel .icoon { width: 44px; height: 44px; border-radius: 10px; margin-bottom: 5px; }
  .icoontegel .icoon .ic { width: 22px; height: 22px; }
}
@media (max-width: 900px) {
  .werk { padding: 14px 12px 28px; }
  .tegels { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
  .tegel { padding: 9px 12px 8px; }
  .groepen { grid-template-columns: 1fr; gap: 8px; }
  .icoontegels { justify-content: flex-start; }
}

/* Snelfilters: pills boven de loglijst */
.snelfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.snelfilters a { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 16px; background: #fff; border: 1px solid var(--rand); color: var(--tekst); font-weight: 500; box-shadow: var(--schaduw); }
.snelfilters a:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.snelfilters a b { font-weight: 600; color: var(--gedempt); font-variant-numeric: tabular-nums; }
.snelfilters a.actief { background: var(--accent); border-color: var(--accent); color: #fff; }
.snelfilters a.actief b { color: rgba(255, 255, 255, .85); }

/* Gevaarlijke actie: domein verwijderen */
.knop.gevaar { color: var(--rood); border-color: #edc6bf; }
.knop.gevaar:hover { background: #fdf2f0; }
.knop.gevaar.primair { background: var(--rood); border-color: var(--rood); color: #fff; }
.knop.gevaar.primair:hover { background: #a9301d; border-color: #a9301d; }
.kaart.gevaar .kaart-kop h2 { color: var(--rood); }

/* Bestemmingen met prioriteit (Instellingen) en hun weergave in lijsten */
.bestemmingen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bestemming-kop, .bestemming-rij { display: grid; grid-template-columns: 96px 1fr 110px 36px; gap: 8px; align-items: center; }
.bestemming-kop { font-size: 12.5px; color: var(--gedempt); }
.bestemming-rij .weg { width: 36px; height: 36px; border: 1px solid var(--rand); border-radius: var(--hoek); background: #fff; color: var(--gedempt); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bestemming-rij .weg:hover { color: var(--rood); border-color: #edc6bf; }
.bestemming-rij .weg .ic { width: 16px; height: 16px; }
.formulier .hulp + .acties { margin-top: 16px; }
ul.fouten { margin: 0 0 16px; padding: 10px 14px 10px 30px; background: #fdf2f0; border-left: 4px solid var(--rood); border-radius: var(--hoek); color: #7a2416; }
.bestemming-regel { display: block; }
.bestemming-regel .prio { display: inline-block; min-width: 26px; color: var(--gedempt); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lijst-domeinen { --kolommen: 1.3fr 1.8fr 170px 110px; }
@media (max-width: 900px) {
  .bestemming-kop { display: none; }
  .bestemming-rij { grid-template-columns: 64px 1fr 76px 36px; }
}

/* Domeinkeuze bovenin de zijbalk: knop met het gekozen domein, dropdown met zoekveld en alle domeinen */
.domeinkeuze { display: block; margin: 4px 12px 40px; border-radius: var(--hoek); background: rgba(255, 255, 255, .06); }
.domeinkeuze:hover, .domeinkeuze.open { background: rgba(255, 255, 255, .11); }
.domeinkeuze > button { appearance: none; -webkit-appearance: none; width: 100%; height: auto; display: block; text-align: left; margin: 0; padding: 10px 12px; border: 0; border-radius: var(--hoek); background: transparent; color: #fff; font: inherit; line-height: 1.4; }
.domeinkeuze > button:hover, .domeinkeuze.open > button { background: transparent; color: #fff; }
.domeinkeuze .zijkop { display: block; margin: 0 0 3px; }
.domeinkeuze .naam { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 600; word-break: break-all; }
.domeinkeuze .naam .ic { width: 16px; height: 16px; color: var(--navy-dim); flex: none; }
.domeinkeuze .menu-lijst { left: 0; right: 0; top: calc(100% + 4px); min-width: 0; padding: 8px 0 4px; }
.domeinlijst .klein-zoek { margin: 0 8px 6px; height: 34px; width: auto; box-shadow: none; padding-left: 10px; }
.domeinlijst .klein-zoek .ic { width: 16px; height: 16px; }
.domeinopties { max-height: 280px; overflow-y: auto; }
.domeinopties a[hidden] { display: none; }
.domeinopties a.actief { color: var(--accent-tekst); font-weight: 600; background: var(--accent-zacht); }

/* Ververs-icoon naast het aantal in de kopbalk */
.kopbalk .ververs { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: -4px; border-radius: var(--hoek); color: var(--gedempt); }
.kopbalk .ververs:hover { background: #fff; color: var(--accent); text-decoration: none; box-shadow: var(--schaduw); }
.kopbalk .ververs .ic { width: 16px; height: 16px; }

/* Acceptatielijst: lijst met vinkjes, selectiebalk, en de keuze "controleren op" als knopgroep */
.lijst-afzenders { --kolommen: 40px minmax(220px, 1.8fr) minmax(160px, 1.1fr) 160px 110px 40px; }
.rij .cel-vink { display: flex; align-items: center; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.selectiebalk { display: none; align-items: center; gap: 14px; margin: -6px 0 12px; padding: 8px 10px 8px 16px; background: var(--accent-zacht); border-radius: var(--hoek); color: var(--accent-tekst); }
.selectiebalk.open { display: flex; }
.selectiebalk .knop { margin-left: auto; background: #fff; }
.rij:has(input[name="ids[]"]:checked) { box-shadow: 0 0 0 2px var(--accent), var(--schaduw); }
.menu-lijst.menu-smal { min-width: 170px; }
.menu-lijst button.item.gevaar { color: var(--rood); }
.menu-lijst button.item.gevaar:hover { background: #fdf2f0; color: var(--rood); }
.formulier .veldlabel { display: block; font-size: 13px; color: var(--gedempt); margin-bottom: 5px; font-weight: 500; }
.keuzes { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rand-sterk); border-radius: var(--hoek); overflow: hidden; }
.formulier .keuzes label { display: inline-flex; align-items: center; height: 36px; margin: 0; padding: 0 16px; border-right: 1px solid var(--rand-sterk); color: var(--tekst); font-size: 13.5px; cursor: pointer; background: #fff; }
.formulier .keuzes label:last-child { border-right: 0; }
.formulier .keuzes label:hover { background: var(--hover); }
.keuzes input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.formulier .keuzes label:has(input:checked) { background: var(--accent); color: #fff; }
.formulier .keuzes label:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent-hover); }
.achtervoegsel { display: flex; }
.achtervoegsel input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.achtervoegsel span { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--rand-sterk); border-left: 0; border-radius: 0 var(--hoek) var(--hoek) 0; background: var(--bg); color: var(--gedempt); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
input[type=file] { font: inherit; font-size: 13.5px; max-width: 100%; }
dialog.modal.modal-smal { width: min(520px, 92vw); }
.kl-toegestaan { color: var(--groen); }
.kl-roladres { color: var(--groen); }   /* abuse@/postmaster@: afgeleverd zonder oordeel (besluit 20) */
.kl-geblokkeerd { color: var(--rood); }
@media (max-width: 900px) {
  .lijst-afzenders .rij > .cel-vink { position: absolute; top: 12px; left: 12px; }
  .lijst-afzenders .rij:not(.kop) { padding-left: 40px; }
}

/* Quarantaine: lijst (met selectie en bulkacties), detail met HTML-voorbeeld, instelling per domein */
.lijst-quarantaine { --kolommen: 40px 96px minmax(170px, 1.2fr) minmax(150px, 1fr) minmax(200px, 1.6fr) 120px 40px; }
.lijst-herkenning { --kolommen: 40px 124px minmax(170px, 1.2fr) minmax(130px, .9fr) minmax(200px, 1.6fr) 140px 40px; }   /* Spam leren > Herkenning */
.selectie-knoppen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.selectiebalk .selectie-knoppen .knop { margin-left: 0; background: #fff; }
.st-quarantined { color: var(--oranje); }
.kl-vrijgegeven { color: var(--groen); }
iframe.voorbeeld { display: block; width: 100%; height: 520px; border: 1px solid var(--rand); border-radius: var(--hoek); background: #fff; }
details.uitklap { margin-top: 22px; }
details.uitklap summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }
.formulier .vinkregel { display: flex; align-items: center; gap: 10px; color: var(--tekst); font-size: 14px; margin-bottom: 4px; }
.doc .acties .rechts { margin-left: auto; }
@media (max-width: 900px) {
  .lijst-quarantaine .rij > .cel-vink, .lijst-herkenning .rij > .cel-vink { position: absolute; top: 12px; left: 12px; }
  .lijst-quarantaine .rij:not(.kop), .lijst-herkenning .rij:not(.kop) { padding-left: 40px; }
  iframe.voorbeeld { height: 380px; }
}

/* Quarantaine: afzendernaam op de regel, adres eronder; ingeklapte secties op de detailpagina */
.rij .naam { display: block; font-weight: 500; }
details.uitklap summary .klein { font-weight: 400; margin-left: 6px; }
details.uitklap .regels { margin-top: 4px; }

/* Waarschuwing (bijv. logs even niet bereikbaar): oranje variant van de melding */
.melding.waarschuwing { background: #fdf4e3; border-left-color: var(--oranje); color: #6b4300; }

/* Spam leren (beheerniveau): lijst met uploads */
.lijst-leren { --kolommen: 150px minmax(220px, 1.6fr) 110px 130px minmax(240px, 1.8fr); }
.kaart + h2.sectie { margin-top: 26px; }

/* Statistieken (06-11-2026): staafgrafiek als SVG vanuit de server (geen JS), legenda, tabellen met cijfers rechts,
   voetnoten en tussenkoppen in kaarten. Het kleurvlakje in de legenda krijgt zijn kleur uit Statistiek::SERIES. */
.grafiek { display: block; width: 100%; height: auto; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--gedempt); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.kaart-inhoud .niets { margin: 0; color: var(--gedempt); }
.kaart-inhoud .voetnoot { margin: 10px 0 0; font-size: 12px; color: var(--gedempt); }
.kaart-inhoud .tussenkop { margin: 20px 0 6px; font-size: 14px; font-weight: 600; }
.tegel .sub { display: block; font-size: 12px; color: var(--gedempt); margin-top: 2px; }
.regels .sub { display: block; font-size: 12px; color: var(--gedempt); }
.regels.cijfers th:not(:first-child), .regels.cijfers td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kopbalk .rechts select { width: auto; max-width: 260px; }
.kaart + .twee, .twee + h2.sectie { margin-top: 26px; }
@media (max-width: 900px) {
  .twee > div + div { margin-top: 26px; }
  .kaart-inhoud:has(> table.regels) { overflow-x: auto; }
}
.lijst-leerberichten { --kolommen: 50px minmax(180px, 1.1fr) minmax(220px, 1.7fr) 130px minmax(200px, 1.1fr) minmax(150px, .9fr); }
.lijst-leerberichten .rij-detail { grid-column: 1 / -1; margin: 0 0 10px; }

/* Gebruikers: lijst, rol, domeinkeuze met vinkjes en het wachtwoordveld in het venster */
.lijst-gebruikers { --kolommen: minmax(170px, 1.3fr) 140px minmax(180px, 2fr) 150px 40px; }
.rol-beheerder { color: var(--accent-tekst); font-weight: 600; }
.domeinregel { display: inline-block; margin-right: 12px; }
.formulier .hulp[hidden], .formulier .veld[hidden] { display: none; }
.domeinvinkjes { border: 1px solid var(--rand-sterk); border-radius: var(--hoek); background: #fff; }
.domeinvinkjes-kop { padding: 8px; border-bottom: 1px solid var(--rand); }
.domeinvinkjes-kop input[type=text] { height: 32px; }
.domeinvinkjes-lijst { max-height: 216px; overflow-y: auto; padding: 4px 0; }
.formulier .domeinvinkjes-lijst label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 12px; color: var(--tekst); font-size: 13.5px; font-weight: 400; cursor: pointer; word-break: break-all; }
.formulier .domeinvinkjes-lijst label:hover { background: var(--hover); }
.formulier .domeinvinkjes-lijst label:has(input:checked) { background: var(--accent-zacht); color: var(--accent-tekst); }
.formulier .domeinvinkjes-lijst label[hidden] { display: none; }
.domeinvinkjes-lijst > span { display: block; padding: 8px 12px; }
.wachtwoordveld { display: flex; gap: 8px; }
.wachtwoordveld input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wachtwoordveld .knop { height: 36px; white-space: nowrap; }

/* Domeinaliassen: lijst met vinkjes en het invoerveld voor meerdere domeinen */
.lijst-aliassen { --kolommen: 40px minmax(220px, 2fr) 170px 110px 40px; }
.formulier textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--rand-sterk); border-radius: var(--hoek); font: inherit; color: var(--tekst); background: #fff; resize: vertical; }
.formulier textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(75, 91, 218, .15); }
@media (max-width: 900px) {
  .lijst-aliassen .rij > .cel-vink { position: absolute; top: 12px; left: 12px; }
  .lijst-aliassen .rij:not(.kop) { padding-left: 40px; }
}
.formulier input.smal-breed { width: 260px; max-width: 100%; }

/* Filterinstellingen: label links, instelling rechts (naar het filterscherm van SpamExperts) */
.instelformulier { max-width: 980px; padding: 6px 28px 10px; }
.instelformulier > .fouten { margin-top: 18px; }
.instelregel { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 28px; padding: 18px 0; border-top: 1px solid var(--rand); }
.instelregel:first-of-type, .instelformulier > .fouten + .instelregel { border-top: 0; }
.formulier .instellabel, .formulier .instellabel label { font-size: 14px; font-weight: 500; color: var(--tekst); text-align: right; padding-top: 2px; margin: 0; }
.instelregel .acties { margin-top: 0; }
.checklijst { border: 1px solid var(--rand-sterk); border-radius: var(--hoek); max-width: 560px; }
.formulier .checklijst label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 11px 16px; color: var(--tekst); font-size: 13.5px; font-weight: 400; cursor: pointer; }
.formulier .checklijst label ~ input + label { border-top: 1px solid var(--rand); }   /* tussen de checks; vóór elke vink een verborgen 0 */
.checklijst label b { font-size: 15px; margin-right: 4px; }
@media (max-width: 900px) {
  .instelformulier { padding: 4px 16px 8px; }
  .instelregel { grid-template-columns: 1fr; }
  .formulier .instellabel { text-align: left; }
}

/* Bijlagebeperkingen: de basislijst als lijst met extensies */
.extensies { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 10px; }
.extensies code { font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--rand); border-radius: 3px; padding: 0 6px; color: var(--tekst); }
.instelregel .klein-kop { display: block; font-size: 12.5px; color: var(--gedempt); margin-top: 6px; }

/* Domeinentabel met vinkjes (beheerders: selecteren en verwijderen) */
.lijst-domeinen.met-vinkjes { --kolommen: 40px 1.3fr 1.8fr 170px 110px; }
@media (max-width: 900px) {
  .lijst-domeinen.met-vinkjes .rij > .cel-vink { position: absolute; top: 12px; left: 12px; }
  .lijst-domeinen.met-vinkjes .rij:not(.kop) { padding-left: 40px; }
}

/* Bezorgingswachtrij en callout-cache */
.lijst-wachtrij { --kolommen: 40px 120px minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1.2fr) minmax(200px, 1.6fr); }
.lijst-callout { --kolommen: minmax(220px, 1.2fr) 140px minmax(220px, 2fr) 120px; }
.rij .reden { font-size: 12.5px; color: var(--gedempt); word-break: break-word; }
.callout-regel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.callout-regel input[type=text] { max-width: 360px; }
.callout-regel:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .lijst-wachtrij .rij > .cel-vink { position: absolute; top: 12px; left: 12px; }
  .lijst-wachtrij .rij:not(.kop) { padding-left: 40px; }
}