/* 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-y: auto; }
.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; }
.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; }
.zijbalk-voet .host { display: block; margin: 2px 0 10px 28px; color: var(--navy-dim); font-size: 12px; word-break: break-all; }
.zijbalk-voet form { margin: 0 0 0 28px; }
.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 { 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); }
.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 { color: var(--rood); }
.kl-virus { text-transform: uppercase; font-size: 12px; }
.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 { 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; }
.login-voet { padding: 12px 32px; border-top: 1px solid var(--rand); color: var(--gedempt); font-size: 12px; }

@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: 900px) {
  .app { flex-direction: column; }
  .zijbalk { width: auto; height: auto; position: static; overflow: visible; }
  .merk { padding: 16px 20px 10px; }
  .merk img { height: 32px; }
  .zijnav { display: flex; flex-wrap: wrap; padding: 0 8px; }
  .zijnav a { margin: 2px 4px; padding: 7px 10px; }
  .zijkop { margin: 10px 20px 4px; }
  .zijlijst { display: flex; overflow-x: auto; padding: 0 8px 10px; }
  .zijlijst a { margin: 0 4px; white-space: nowrap; }
  .zijbalk-voet { margin: 0; padding: 10px 20px; display: flex; align-items: center; gap: 14px; }
  .zijbalk-voet .host { display: none; }
  .zijbalk-voet form { margin: 0 0 0 auto; }
  .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(170px, 1fr)); gap: 12px; margin-bottom: 26px; }
.tegel { padding: 18px 20px 16px; }
.tegel .label { display: block; color: var(--gedempt); font-size: 13px; margin-bottom: 4px; }
.tegel b { font-size: 28px; 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; }
.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: 14px; }
.icoontegels { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 12px 16px; }
.icoontegel { width: 118px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 6px; border-radius: var(--hoek); color: var(--tekst); font-size: 12.5px; line-height: 1.3; }
.icoontegel .icoon { width: 56px; height: 56px; border-radius: 12px; background: var(--accent-zacht); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.icoontegel .icoon .ic { width: 26px; height: 26px; stroke-width: 1.8; }
.icoontegel:hover { background: var(--hover); text-decoration: none; }
.icoontegel:hover .icoon { background: var(--accent); color: #fff; }
.icoontegel .sub { color: var(--gedempt); font-size: 11.5px; margin-top: 2px; }
.icoontegel.uit { color: var(--gedempt); cursor: default; }
.icoontegel.uit .icoon, .icoontegel.uit:hover .icoon { background: var(--bg); color: #a3abbd; }
.icoontegel.uit:hover { background: none; }