/* Huisstijl SecureBit. Kleuren uit Securebit-Eerste-installatie.pdf:
   rood #c4232e, donker #2b2f31, vlakken #f5f5f6.

   Volgorde: eerst de variabelen, dan de bestaande onderdelen, dan de nieuwe
   indeling. Die laatste moet winnen van oude main- en body-regels. */

:root{
  --rood:#c4232e; --rood-donker:#a41d26; --donker:#2b2f31; --donker-2:#3a3f42;
  --tekst:#1c2b36; --stil:#6b7280; --vlak:#f5f5f6; --wit:#fff;
  --lijn:#d8d6d7; --lijn-licht:#e8e8ea;
  --waarschuwing:#f7e6e6; --tip:#eff3ef; --groen:#4a6e52;

  /* Aliassen: de bestaande schermen gebruiken deze namen nog. */
  --fg:#1c2b36; --muted:#6b7280; --bg:#f5f5f6; --card:#fff; --line:#d8d6d7;
  --ok:#2f6337; --bad:#9d2029; --accent:#c4232e;
}

/* ===== bestaande onderdelen ===== */

*{box-sizing:border-box}
body{margin:0;font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
     color:var(--fg);background:var(--bg)}
main{max-width:1000px;margin:0 auto;padding:24px 16px 64px}
h1{font-size:1.5rem;margin:0 0 16px}
h2{font-size:1.15rem;margin:28px 0 10px}
a{color:var(--accent)}
.topbar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
        background:var(--card);border-bottom:1px solid var(--line);padding:10px 16px}
.brand{font-weight:600;text-decoration:none;color:var(--fg)}
.topbar nav{display:flex;gap:14px;flex:1}
.topbar nav a{text-decoration:none}
.who{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--muted)}
.badge{background:#eef1f6;border-radius:10px;padding:1px 8px;font-size:.75rem}
.badge.tenant{background:#e6f2ec;color:var(--ok)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
      padding:20px;margin:16px 0}
.card.narrow{max-width:440px;margin:48px auto}
.card.danger{border-color:#f3c9c6}
label{display:block;margin:12px 0}
label.check{display:flex;gap:8px;align-items:center}
input,select{width:100%;padding:9px 10px;border:1px solid var(--line);
             border-radius:7px;font:inherit;background:#fff}
label.check input{width:auto}
button,.btn{display:inline-block;background:var(--accent);color:#fff;border:0;
            border-radius:7px;padding:9px 16px;font:inherit;cursor:pointer;
            text-decoration:none;margin-top:8px}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
button.link{background:none;border:0;color:var(--accent);padding:0;
            text-decoration:underline;cursor:pointer;margin:0}
button.danger,button.link.danger{color:#fff;background:var(--bad)}
button.link.danger{background:none;color:var(--bad)}
form.inline{display:inline}
table{width:100%;border-collapse:collapse;background:var(--card);
      border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
      font-size:.92rem;vertical-align:top}
th{background:#f0f2f5;font-weight:600}
tr:last-child td{border-bottom:0}
.flash{padding:11px 14px;border-radius:8px;margin:0 0 16px}
.flash.success{background:#e6f4ee;color:var(--ok)}
.flash.error{background:#fdeceb;color:var(--bad)}
.flash.info{background:#eef1f6}
.notice{background:#eef1f6;padding:11px 14px;border-radius:8px;color:#3c4250;font-size:.9rem}
.error{color:var(--bad)}
.tiles{display:flex;gap:14px;flex-wrap:wrap}
.tile{flex:1 1 150px;background:var(--card);border:1px solid var(--line);
      border-radius:10px;padding:18px;text-align:center;color:var(--muted);font-size:.85rem}
.tile .n{display:block;font-size:1.9rem;color:var(--fg);font-weight:600}
.kv{display:grid;grid-template-columns:200px 1fr;gap:4px 16px;background:var(--card);
    border:1px solid var(--line);border-radius:10px;padding:18px}
.kv dt{color:var(--muted);font-size:.85rem}
.kv dd{margin:0;font-size:.9rem;word-break:break-all}
.summary{padding:12px 16px;border-radius:8px;margin:16px 0}
.summary.good{background:#e6f4ee;color:var(--ok)}
.summary.bad{background:#fdeceb;color:var(--bad)}
.results td.status{width:56px;font-weight:600;font-size:.78rem}
.results tr.pass td.status{color:var(--ok)}
.results tr.fail td.status{color:var(--bad)}
.results tr.skip td.status{color:var(--muted)}
.results tr.fail{background:#fff7f6}
.results td.msg{color:var(--muted);font-size:.85rem}
.results td.ms{width:80px;text-align:right;color:var(--muted);font-size:.8rem}
footer{text-align:center;color:var(--muted);padding:24px}
@media(max-width:640px){.topbar{gap:8px}.kv{grid-template-columns:1fr}
  td,th{font-size:.85rem;padding:7px 9px}}

/* Toestand van een trunk: kleur helpt bij snel scannen, maar de tekst
   staat er altijd bij zodat kleurenblindheid geen probleem is. */
.badge.status-ok      { background:#e6f4ec; color:#12805c; }
.badge.status-fout    { background:#fdeceb; color:#b3261e; }
.badge.status-bezig   { background:#fdf6e8; color:#8a5a00; }
.badge.status-neutraal{ background:#eef2f8; color:#5f6672; }

/* Compacte tabel binnen een uitklapbaar blok. */
table.klein { margin:.4rem 0; font-size:.85rem; }
table.klein td { padding:.15rem .6rem .15rem 0; border:0; }
table.klein code { background:#f2f4f7; padding:.05rem .3rem; border-radius:3px; }

/* Uitklapbare details onder een tabelrij.
   Stonden ze in een cel, dan rekte het uitklappen de hele rij op en schoven
   de kolommen door elkaar. */
tr.detailrij > td { border-top: 0; padding-top: 0; }
tr.detailrij summary { cursor: pointer; color: #274b8f; font-size: .9rem; }
tr.detailrij details[open] summary { margin-bottom: .6rem; }
.detailblok { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.detailblok > div { flex: 1 1 22rem; min-width: 18rem; }
.detailblok .notice { margin: .4rem 0; }
td.nowrap { white-space: nowrap; }


/* ===== nieuwe indeling, wint bewust ===== */

*{box-sizing:border-box}
body{margin:0;background:var(--vlak);color:var(--tekst);
     font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     font-variant-numeric:tabular-nums}
a{color:var(--rood);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:0 0 4px;font-weight:700}
h2{font-size:1.05rem;margin:0 0 12px;font-weight:700}
h3{font-size:.82rem;margin:0 0 8px;font-weight:700;color:var(--stil);
   text-transform:uppercase;letter-spacing:.06em}
code{background:#eceded;padding:.08rem .32rem;border-radius:3px;font-size:.85em}

/* ---- indeling ---- */
.app{display:flex;min-height:100vh}
.zij{width:230px;background:var(--donker);color:#cfd3d5;flex:0 0 230px;
     display:flex;flex-direction:column}
.merk{padding:18px 20px 16px;border-bottom:1px solid #3d4245}
.merk .naam{font-weight:800;font-size:1.15rem;color:#fff;letter-spacing:-.01em}
.merk .naam b{color:var(--rood);font-style:italic}
.merk .sub{font-size:.62rem;letter-spacing:.22em;color:#8b9095;margin-top:1px}
.zij nav{padding:10px 0;flex:1}
.zij nav a{display:flex;align-items:center;gap:11px;width:100%;
  color:#cfd3d5;text-decoration:none;padding:11px 20px;
  border-left:3px solid transparent}
.zij nav a:hover{background:#343a3d;color:#fff}
.zij nav a[aria-current]{background:#343a3d;color:#fff;border-left-color:var(--rood);
  font-weight:600}
.zij nav .kop{padding:14px 20px 6px;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7d8286}
.zij .voet{padding:14px 20px;border-top:1px solid #3d4245;font-size:.8rem;color:#8b9095}
.ic{width:17px;height:17px;flex:0 0 17px;opacity:.9}

.hoofd{flex:1;min-width:0;display:flex;flex-direction:column}
.balk{background:var(--wit);border-bottom:1px solid var(--lijn);padding:0 26px;
      display:flex;align-items:center;gap:16px;height:56px}
.kruimels{font-size:.86rem;color:var(--stil);display:flex;gap:9px;align-items:center}
.kruimels b{color:var(--tekst);font-weight:600}
.kruimels span{color:#b8bcbf}
.balk .rechts{margin-left:auto;display:flex;gap:18px;align-items:center;
              font-size:.86rem;color:var(--stil)}
/* margin op 0: de oude regel `margin:0 auto` maakt van main een gecentreerd
   flex-element dat naar zijn inhoud krimpt, waardoor de tegelkolommen niet
   spreiden. In een gewone blokindeling viel dat niet op. */
main{padding:24px 26px 60px;max-width:1240px;margin:0;width:100%}
.titelrij{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.titelrij .telling{color:var(--stil);font-weight:400}
.titelrij .knoppen{margin-left:auto;display:flex;gap:9px}
.intro{color:var(--stil);max-width:70ch;margin:0 0 18px}

/* ---- knoppen ---- */
.knop{background:var(--rood);color:#fff;border:0;border-radius:4px;padding:8px 16px;
      font:inherit;font-weight:600;cursor:pointer;font-size:.9rem}
.knop:hover{background:var(--rood-donker)}
.knop.stil{background:var(--wit);color:var(--tekst);border:1px solid var(--lijn);font-weight:500}
.knop.stil:hover{background:#f0f0f1}
.knop:focus-visible{outline:2px solid var(--donker);outline-offset:2px}

/* ---- kaarten en tabellen ---- */
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:5px}
.kaart > header{padding:13px 16px;border-bottom:1px solid var(--lijn);
                display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kaart > header h2{margin:0}
.kaart > header .hint{color:var(--stil);font-size:.84rem}
table{width:100%;border-collapse:collapse;font-size:.9rem}
thead th{background:var(--donker);color:#fff;text-align:left;padding:9px 14px;
         font-weight:600;font-size:.82rem}
thead th:first-child{border-radius:4px 0 0 0}
thead th:last-child{border-radius:0 4px 0 0}
tbody td{padding:11px 14px;border-bottom:1px solid var(--lijn-licht);vertical-align:top}
tbody tr:nth-child(even){background:#fafafb}
tbody tr:hover{background:#f4f6f7}
td small{color:var(--stil);display:block;font-size:.82rem}
.rechts-uit{text-align:right}
.acties{display:flex;gap:5px;justify-content:flex-end}
.iknop{background:none;border:0;padding:5px;border-radius:4px;cursor:pointer;
       color:#9aa1a6;line-height:0;display:inline-flex}
.iknop:hover{color:var(--tekst);background:#eef0f1}

/* ---- merktekens ---- */
.merkje{display:inline-block;padding:.1rem .45rem;border-radius:3px;font-size:.76rem;
        font-weight:600;white-space:nowrap}
.m-ok{background:#e4efe6;color:#2f6337}
.m-fout{background:#fbe4e4;color:#9d2029}
.m-stil{background:#eceef0;color:#5b6469}
.m-persoon{background:#e8eef6;color:#2b4e7e}
.m-plek{background:#f3ecdd;color:#7a5a1e}

.schakel{position:relative;display:inline-flex;vertical-align:middle}
.schakel input{position:absolute;opacity:0;width:38px;height:21px;margin:0;cursor:pointer}
.schakel span{width:38px;height:21px;border-radius:11px;background:#c8ccce;display:block;
              position:relative;transition:background .12s}
.schakel span::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;
                     border-radius:50%;background:#fff;transition:transform .12s}
.schakel input:checked + span{background:#2f8a4e}
.schakel input:checked + span::after{transform:translateX(17px)}
.schakel input:focus-visible + span{outline:2px solid var(--rood);outline-offset:2px}

/* ---- meldingen ---- */
.let{border-left:4px solid var(--rood);background:var(--waarschuwing);
     padding:12px 15px;border-radius:0 4px 4px 0;margin:0 0 18px;font-size:.9rem}
.let b{color:var(--rood-donker)}
.tip{border-left:4px solid var(--groen);background:var(--tip);
     padding:12px 15px;border-radius:0 4px 4px 0;margin:0 0 18px;font-size:.9rem}
/* DERDE NIVEAU, tussen tip en let in: er is iets aan de hand, maar er is
   niets stuk. Zonder dit staat een waarneming ("in de firewall staat een
   adres dat hier niet staat") even hard te schreeuwen als een storing, en
   dan leest niemand het verschil meer.

   HEETTE `.merk`, EN DAT WAS AL BEZET: het logoblok in de zijbalk
   (`layout.php`) gebruikt die naam, en omdat deze regels lager in het bestand
   staan wonnen ze. Het logo kreeg een crèmekleurige achtergrond met een oranje
   streep ernaast en de witte merknaam werd onleesbaar. Zelfde fout als
   valkuil 4.32, nu in eigen huis. */
.opletten{border-left:4px solid #a8620a;background:#fdf3e7;
          padding:12px 15px;border-radius:0 4px 4px 0;margin:0 0 18px;font-size:.9rem}
.opletten b{color:#8a5008}
.let p,.tip p,.opletten p{margin:0 0 7px}
.let p:last-child,.tip p:last-child,.opletten p:last-child{margin:0}

/* ---- tegels op het beheerscherm ---- */
.groepen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.tegels{display:flex;flex-direction:column;gap:7px}
.tegel{display:flex;align-items:center;gap:11px;background:var(--wit);
       border:1px solid var(--lijn);border-radius:5px;padding:12px 14px;
       cursor:pointer;text-align:left;font:inherit;color:var(--tekst);width:100%}
.tegel:hover{border-color:var(--rood);background:#fdf7f7}
.tegel .ic{color:var(--rood)}
.tegel .naam{font-weight:600}
.tegel .uitleg{display:block;font-size:.8rem;color:var(--stil);font-weight:400;margin-top:1px}
.tegel[disabled]{opacity:.45;cursor:default}
.tegel[disabled]:hover{border-color:var(--lijn);background:var(--wit)}

/* ---- gesprekken en statistieken ---- */
.met-zijpaneel{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start}
@media (max-width:1000px){.met-zijpaneel{grid-template-columns:1fr}}
.veld{margin-bottom:13px}
.veld label{display:block;font-size:.82rem;font-weight:600;margin-bottom:4px}
.veld input,.veld select{width:100%;padding:7px 9px;border:1px solid var(--lijn);
  border-radius:4px;font:inherit;font-size:.88rem;background:#fff}
.veld input:focus,.veld select:focus{outline:2px solid var(--rood);outline-offset:-1px;border-color:var(--rood)}

/* EEN VINKJE MET ZIJN TEKST ERNAAST.
   `.veld input{width:100%}` hierboven geldt ook voor een selectievakje. Dat
   werd dan een balk over de volle breedte met het vinkje in het MIDDEN, boven
   zijn eigen tekst -- en `.veld label{display:block}` zette die tekst op de
   regel eronder. Op het scherm ziet dat eruit als een storing.
   Gevonden door het scherm Deurbellen na te renderen; het speelde ook al op
   Voicemail en Belgroep. Daarom een algemene regel en geen eigen stijl. */
/* `hidden` MOET WINNEN VAN EEN EIGEN display-REGEL.
   `[hidden]{display:none}` is een stijl van de browser met de laagste
   specificiteit, dus elke eigen klasse met `display:block` -- `.veldhulp`
   bijvoorbeeld -- zet hem opzij. Het element blijft dan gewoon staan terwijl de
   code hem verborgen dacht te hebben. Gevonden op het deurbelscherm. */
[hidden]{display:none !important}

/* DE BESTEMMINGENLIJST OP HET DEURBELSCHERM.
   EIGEN KLASSEN, want `.lijnrij` is voor tabelrijen en `.acties` duwt naar
   rechts op een eigen regel -- hergebruikt zagen de knoppen eruit alsof ze bij
   de verkeerde regel hoorden. Zelfde soort botsing als bij `.merk`. */
.bestemrij{display:flex;align-items:center;gap:10px;padding:9px 0;
           border-bottom:1px solid var(--lijn)}
.bestemrij:last-child{border-bottom:0}
.bestemrij .volg{color:var(--stil);font-variant-numeric:tabular-nums;
                 min-width:1.5rem;text-align:right;flex-shrink:0}
.bestemrij .wat{flex:1 1 auto;min-width:0}
.bestemrij .wat .veldhulp{margin-top:2px}
.bestemrij .knoppen{display:flex;gap:4px;flex-shrink:0}
.bestemrij .knoppen .knop{padding:4px 9px;line-height:1.1}

/* `hidden` MOET WINNEN VAN EEN EIGEN display-REGEL.
   `[hidden]{display:none}` is een stijl van de BROWSER met de laagste
   specificiteit, dus elke eigen klasse met `display:block` -- `.veldhulp`
   bijvoorbeeld -- zet hem opzij. Het element blijft dan staan terwijl de code
   hem verborgen dacht te hebben, en aan de code is niets te zien. Gevonden op
   het deurbelscherm, door ernaar te kijken. */
[hidden]{display:none !important}

/* DE BESTEMMINGENLIJST OP HET DEURBELSCHERM.
   EIGEN KLASSEN, want `.lijnrij` is voor tabelrijen en `.acties` duwt naar
   rechts op een eigen regel. Hergebruikt zagen de knoppen eruit alsof ze bij
   de verkeerde regel hoorden. Zelfde soort botsing als destijds met `.merk`. */
.bestemrij{display:flex;align-items:center;gap:10px;padding:9px 0;
           border-bottom:1px solid var(--lijn)}
.bestemrij:last-child{border-bottom:0}
.bestemrij .volg{color:var(--stil);font-variant-numeric:tabular-nums;
                 min-width:1.5rem;text-align:right;flex-shrink:0}
.bestemrij .wat{flex:1 1 auto;min-width:0}
.bestemrij .wat .veldhulp{margin-top:2px}
.bestemrij .knoppen{display:flex;gap:4px;flex-shrink:0}
.bestemrij .knoppen .knop{padding:4px 10px;line-height:1.15}

.keuze,.veld label.keuze{display:flex;align-items:flex-start;gap:8px;
  font-weight:400;margin-bottom:6px;font-size:.88rem;line-height:1.45}
.keuze input,.veld label.keuze input{width:auto;flex:0 0 auto;margin-top:3px}
.keuze span,.veld label.keuze span{font-weight:400}
.richting{display:inline-flex;align-items:center;gap:6px;font-size:.85rem}
.richting .pijl{color:#2f8a4e}
.richting .pijl.uit{color:#2b4e7e}

.stat-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:22px}
.stat{background:var(--wit);border:1px solid var(--lijn);border-radius:5px;padding:15px 17px}
.stat .label{font-size:.8rem;color:var(--stil);text-transform:uppercase;letter-spacing:.05em}
.stat .waarde{font-size:1.8rem;font-weight:700;margin-top:3px}
.stat .bij{font-size:.82rem;color:var(--stil)}

.balkjes{display:flex;align-items:flex-end;gap:5px;height:130px;padding:0 4px}
.balkjes div{flex:1;background:var(--rood);border-radius:2px 2px 0 0;min-height:2px;position:relative}
/* Vaste hoogteklassen in plaats van een inline stijl.
   Het portaal stuurt Content-Security-Policy: style-src 'self', en dat blokkeert
   inline stijlen. Terecht, want daarmee voorkomt u dat ingespoten inhoud zich
   als opmaak kan voordoen. De grafiek past zich dus aan, niet de beveiliging. */
.balkjes div.h0{height:0px}
.balkjes div.h5{height:6px}
.balkjes div.h10{height:13px}
.balkjes div.h15{height:20px}
.balkjes div.h20{height:26px}
.balkjes div.h25{height:32px}
.balkjes div.h30{height:39px}
.balkjes div.h35{height:46px}
.balkjes div.h40{height:52px}
.balkjes div.h45{height:58px}
.balkjes div.h50{height:65px}
.balkjes div.h55{height:72px}
.balkjes div.h60{height:78px}
.balkjes div.h65{height:84px}
.balkjes div.h70{height:91px}
.balkjes div.h75{height:98px}
.balkjes div.h80{height:104px}
.balkjes div.h85{height:110px}
.balkjes div.h90{height:117px}
.balkjes div.h95{height:124px}
.balkjes div.h100{height:130px}

.balkjes div span{position:absolute;bottom:-19px;left:0;right:0;text-align:center;
                  font-size:.68rem;color:var(--stil)}
/* De kleine samenvattingstabel in een statistiekkaart is geen lijst om in te
   klikken, dus geen streping en geen hover. */
table.samenvat tbody tr{background:none}
table.samenvat tbody tr:hover{background:none}
table.samenvat tbody td{border-bottom:1px solid var(--lijn-licht);padding:7px 2px}

/* Op een smal scherm gaat het menu bovenaan liggen. Een kolom van 230 pixels
   naast de inhoud laat op een telefoon te weinig over voor de tabellen. */
@media (max-width:820px){
  .app{flex-direction:column}
  .zij{width:auto;flex:none}
  .merk{display:flex;align-items:baseline;gap:10px;padding:12px 16px}
  .merk .sub{margin:0}
  .zij nav{display:flex;overflow-x:auto;padding:0;flex:none;
           border-bottom:1px solid #3d4245;scrollbar-width:thin}
  .zij nav button{border-left:0;border-bottom:3px solid transparent;
                  padding:11px 15px;white-space:nowrap}
  .zij nav button[aria-current]{border-left-color:transparent;border-bottom-color:var(--rood)}
  .zij nav .kop{display:none}
  .zij .voet{display:none}
  .balk{padding:0 16px;height:auto;min-height:48px;flex-wrap:wrap;gap:8px}
  .balk .rechts{font-size:.8rem}
  main{padding:18px 16px 48px}
  table{font-size:.85rem}
  thead th,tbody td{padding:9px 10px}
}

.verborgen{display:none}

/* ---- aanvullingen voor de volledige indeling ---- */
.vlag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.05em;
      text-transform:uppercase;padding:.16rem .45rem;border-radius:3px;vertical-align:middle;
      position:relative;top:-2px}
.vlag.nieuw{background:#fbe4e4;color:#9d2029}
.vlag.later{background:#eceef0;color:#5b6469}
.leeg{background:var(--wit);border:1px dashed var(--lijn);border-radius:5px;padding:28px;
      text-align:center;color:var(--stil)}
.in{color:#2f8a4e}
.uit{color:#2b4e7e}
.stilweg{color:var(--stil)}

.formulier{padding:0}
.formblok{padding:18px 20px;border-bottom:1px solid var(--lijn)}
.formblok:last-of-type{border-bottom:0}
.formblok h3{margin-bottom:12px}
.velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.velden .veld{margin:0}
.veldhulp{display:block;font-size:.8rem;color:var(--stil);margin-top:4px}
/* Een tak in het belplanoverzicht die nooit aan de beurt komt, omdat er een
   tak boven staat die altijd geldt. Doorgestreept zoals in het belplanscherm,
   met de reden eronder in het rood: anders leest het overzicht als een plan
   dat werkt terwijl de helft ervan dood is. */
tr.onbereikbaar td{color:var(--stil);text-decoration:line-through}
tr.onbereikbaar .nooit{display:block;margin-top:3px;font-size:.8rem;
                       color:var(--rood);text-decoration:none}
.vinkje{font-weight:400;display:flex;align-items:center;gap:8px}
.vinkje input{width:auto}
.formvoet{padding:15px 20px;background:#fafafb;border-top:1px solid var(--lijn);
          display:flex;gap:9px;border-radius:0 0 5px 5px}
table.mini{font-size:.86rem;border:1px solid var(--lijn);border-radius:4px;overflow:hidden}
table.mini thead th{background:#eceef0;color:var(--tekst);font-size:.78rem;padding:6px 10px}
table.mini tbody td{padding:7px 10px}
table.mini tbody tr:nth-child(even){background:none}
table.mini input[type=time]{width:auto;padding:3px 6px;font-size:.85rem;
  border:1px solid var(--lijn);border-radius:3px}
table.dagen tbody tr:hover{background:none}
table.voorbeeldje thead th{background:#5b6469}

/* ---- belplan ---- */
.plankolommen{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;align-items:start}
@media (max-width:900px){.plankolommen{grid-template-columns:1fr}}
.tak{padding-top:10px}
.tak + .tak{border-top:1px solid var(--lijn-licht);margin-top:8px}
.pregel{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--wit);
  border:1px solid var(--lijn);border-left:4px solid #2b4e7e;border-radius:5px;font-size:.9rem}
.pregel.voorwaarde{border-left-color:#a8620a}
.pregel.eind{border-left-color:#8d2f2a}
.pregel .greep{color:#b9bfc7;cursor:grab}
.pregel .pdet{color:var(--stil)}
.pregel .pnr{margin-left:auto;color:#a6adb6;font-size:.78rem}
.pstap{margin-left:22px;padding-left:16px;border-left:2px solid var(--lijn);padding-top:8px}
.dan{margin:7px 0;padding-left:16px;color:var(--stil);font-size:.86rem}
.dan::before{content:"\2193";margin-right:7px;color:#b9bfc7}
.onderdelen ul{list-style:none;margin:0;padding:9px}
.onderdelen li{padding:8px 11px;border:1px solid var(--lijn);border-left:4px solid #2b4e7e;
  border-radius:5px;margin-bottom:6px;font-size:.89rem;cursor:grab;background:var(--wit)}
.onderdelen li.voorwaarde{border-left-color:#a8620a}
.onderdelen li.eind{border-left-color:#8d2f2a}
.onderdelen li:last-child{margin-bottom:0}
.uitlegl{margin:0;padding:14px 16px 16px 34px}
.uitlegl li{margin-bottom:8px}
.uitlegl li:last-child{margin:0}


/* Extra voor het menu met links en de fasevlaggen. */
.zij nav a{text-decoration:none}
.zij nav a:hover{text-decoration:none}
.vlagje{margin-left:auto;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;
        background:#4a4f52;color:#b9bfc4;padding:.1rem .32rem;border-radius:3px}
.zij .voet .rol{font-size:.75rem}
.zij .uitlog{margin-top:9px}
.zij .uitlog button{background:none;border:1px solid #4a4f52;color:#cfd3d5;
  border-radius:4px;padding:5px 11px;font:inherit;font-size:.82rem;cursor:pointer}
.zij .uitlog button:hover{background:#3d4245;color:#fff}
.balk .rechts a{color:var(--stil);font-size:.86rem}
.kaal{max-width:420px;margin:8vh auto;padding:0 20px}
a.tegel{text-decoration:none}
a.tegel:hover{text-decoration:none}
a.tegel.straks{opacity:.72}
a.tegel.straks .uitleg{color:var(--stil);font-style:italic}

/* Koppelingen en belregels op het gebruikersscherm: waarde met een knopje ernaast. */
.koppelrij{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.koppelrij form{display:inline}
.koppelrij small{color:var(--stil)}
.inlineform{display:flex;align-items:center;gap:5px;margin-top:5px}
.inlineform input{padding:4px 7px;border:1px solid var(--lijn);border-radius:4px;
  font:inherit;font-size:.85rem;width:auto}
.inlineform input[name=na]{width:3.6rem}
/* De algemene button-regel zet margin-top:8px. Dat klopt voor een knop ONDER
   een formulier, maar hier staat hij ERNAAST en zakt hij daardoor drie pixels
   weg ten opzichte van de invulvelden. */
/* NIET AFBREKEN. "naar UDP" viel over twee regels zodra de kolom ernaast meer
   inhoud kreeg, en een knop met twee regels tekst in een knop van 31px hoog
   loopt over zijn eigen rand heen. */
.inlineform .knop{padding:5px 11px;font-size:.82rem;margin:0;white-space:nowrap}
/* Zelfde hoogte als de velden, zodat de rij één lijn vormt. */
.inlineform .knop,
.inlineform input{height:31px;line-height:1.2}

/* Een uitklapbaar formulier zonder JavaScript. Het portaal stuurt
   Content-Security-Policy met script-src 'self'; een knop met onclick doet dus
   niets. <details> is puur HTML en werkt altijd. */
details.uitklap{margin-bottom:20px}
details.uitklap > summary{padding:13px 16px;cursor:pointer;list-style:none;
  display:flex;align-items:baseline;gap:10px;border-radius:5px}
details.uitklap > summary::-webkit-details-marker{display:none}
details.uitklap > summary::before{content:"+";font-weight:700;color:var(--rood);
  width:1rem;display:inline-block}
details.uitklap[open] > summary::before{content:"\2212"}
details.uitklap[open] > summary{border-bottom:1px solid var(--lijn)}
details.uitklap > summary:hover{background:#fafafb}

/* Weektabel bij openingstijden: compact, een rij per dag. */
.weektabel th { font-size: .78rem; color: #6b7280; font-weight: 400; text-align: left;
                padding-bottom: .3rem; }
.weektabel td { padding: .35rem .5rem .35rem 0; }
.weektabel .tijdvak { white-space: nowrap; }
.weektabel .tijdvak input[type=time] { width: 6.2rem; padding: .25rem .4rem; }
.weektabel .tijdvak span { color: #9ca3af; font-size: .8rem; margin: 0 .3rem; }

/* Belplan: takken met stappen. */
.belplanform .tak { border-left: 3px solid #e3e6ea; padding-left: .8rem; margin-bottom: .6rem; }
.belplanform .dagkeuze { display: flex; gap: .4rem; flex-wrap: wrap; }
.belplanform .dagkeuze .keuze { font-size: .8rem; }
.belplanform .stappen td { padding: .25rem .4rem .25rem 0; }
.belplanform .stappen select, .belplanform .stappen input { width: 100%; }

/* --- Openingstijden: compacte week met schuifknoppen -------------------- */
/*
 * De tabel had een kop, vinkjes en ruime regels. Zeven dagen namen daardoor
 * bijna een heel scherm. Nu: geen kop, een schuifknop per dag, en de tijden
 * direct ernaast.
 */
.weekrij {
  display: grid;
  grid-template-columns: 7.5rem 2.6rem auto 1fr;
  align-items: center;
  gap: .5rem;
  padding: .28rem 0;
}
.weekrij + .weekrij { border-top: 1px solid #f3f4f6; }
.weekrij .dagnaam { font-size: .9rem; }
.weekrij .tijden { white-space: nowrap; }
.weekrij .tijden input[type=time] { width: 6rem; padding: .22rem .35rem; }
.weekrij .tijden span { color: #9ca3af; margin: 0 .28rem; font-size: .82rem; }
.weekrij.dicht .tijden input { background: #f9fafb; color: #9ca3af; }

/* DE SCHUIFKNOP. Een vinkje dat eruitziet als een schakelaar: hetzelfde
 * element, dus toetsenbord en schermlezers blijven werken. */
.schuif { position: relative; display: inline-block; width: 2.3rem; height: 1.25rem; }
.schuif input { position: absolute; opacity: 0; width: 100%; height: 100%;
                margin: 0; cursor: pointer; }
.schuif .baan {
  position: absolute; inset: 0; background: #d1d5db; border-radius: 999px;
  transition: background .15s;
}
.schuif .baan::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 1.05rem; height: 1.05rem; background: #fff; border-radius: 50%;
  transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.schuif input:checked + .baan { background: #16a34a; }
.schuif input:checked + .baan::after { transform: translateX(1.05rem); }
/* ZICHTBARE FOCUS, anders is de schakelaar met het toetsenbord niet te vinden. */
.schuif input:focus-visible + .baan { outline: 2px solid #2563eb; outline-offset: 2px; }

.weekvoet { display: flex; gap: .75rem; align-items: center; margin-top: .5rem; }
.pauzekop { font-size: .74rem; color: #9ca3af; text-transform: uppercase;
            letter-spacing: .04em; }

/* INLINE STIJLEN WORDEN GEWEIGERD door de veiligheidsregels (`style-src
 * 'self'`), dus alles wat eerst in een `style`-attribuut stond, staat hier. */
.ruimte-onder   { margin-bottom: 16px; }
.ruimte-boven   { margin-top: .5rem; }
.ruimte-boven14 { margin-top: 14px; }
.ruimte-boven18 { margin-top: 18px; }
.kol-dag        { width: 8rem; }
.kol-breed      { width: 16rem; }
.kol-nummer     { width: 12rem; }
.kol-actie      { width: 7rem; }
.volle-breedte  { width: 100%; }
.eencode        { font-family: monospace; font-size: .82rem; }
.kol-5   { width: 5.2rem; }
.kol-10  { width: 10rem; }
.kol-46  { width: 4.6rem; }
.kol-74  { width: 74px; }
.kol-56  { width: 56px; }
.kol-20  { width: 20rem; }
.rand0   { margin: 0; }
.rand18  { margin: 18px 0; }
.onder18 { margin-bottom: 18px; }

/* KNOPPEN IN EEN FORMVOET UITLIJNEN.
 *
 * De formvoet is een flexrij, maar een knop die in een `<form>` zit maakt dat
 * FORMULIER het flexkind -- niet de knop. Het formulier krijgt dan zijn eigen
 * hoogte en marge, en de knoppen staan scheef.
 *
 * Deze regels halen die verschillen weg: het formulier neemt geen ruimte in en
 * gedraagt zich als de knop zelf.
 */
.formvoet { align-items: center; flex-wrap: wrap; }
.formvoet form { margin: 0; display: flex; align-items: center; }
.formvoet .knop { margin: 0; }
/* EEN INLINEFORM IN EEN FORMVOET heeft die marge niet nodig; buiten een
 * formvoet blijft hij staan, want daar scheidt hij losse regels. */
.formvoet .inlineform { margin-top: 0; }

/* EEN LINK EN EEN KNOP MOETEN DEZELFDE HOOGTE HEBBEN.
 *
 * `<button class="knop">` en `<a class="knop">` staan naast elkaar in de
 * schermen. Een button heeft van zichzelf een vaste regelhoogte, een link niet
 * -- dus werd de link lager en stonden ze scheef.
 *
 * `inline-flex` met een vaste regelhoogte maakt ze gelijk, ongeacht het
 * element.
 */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-decoration: none;
  box-sizing: border-box;
}
a.knop:hover { text-decoration: none; }

/* DE RIJ MET KNOPPEN onder een formulier. `.knoppen` werd in de schermen
 * gebruikt maar bestond niet als klasse, dus de uitlijning kwam van niets. */
.knoppen {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.knoppen form { margin: 0; display: flex; align-items: center; }
/* EEN BUTTON HEEFT EEN ONZICHTBARE RAND, een link niet -- dat gaf twee pixels
 * verschil. `border: 0` op de rode knop en een rand van dezelfde dikte op de
 * stille variant maken ze gelijk. */
button.knop, a.knop { border: 1px solid transparent; }
.knop.stil { border-color: var(--lijn); }

/* DE ALGEMENE `button`-REGEL ZET `margin-top: 8px`.
 *
 * Dat klopt voor een losse knop onder een formulier, maar NIET voor een knop
 * in een rij naast een link: de button zakt dan acht pixels en de twee staan
 * scheef. De hoogtes zijn gelijk, alleen de positie niet -- daarom viel het
 * niet op in een meting die alleen de hoogte bekeek.
 *
 * `.knop` regelt zijn eigen ruimte via de rij eromheen (`.knoppen`,
 * `.formvoet`), dus die marge hoort er niet op.
 */
.knop { margin-top: 0; }
.knoppen .knop, .formvoet .knop { margin: 0; }

/* --- De lijnen van een toestel, uitklapbaar per rij ---------------------- */
/*
 * Een tweede rij onder elk toestel met een `<details>`. Dichtgeklapt is het
 * een regel; open toont hij de lijnen en het formulier om er een bij te zetten.
 */
.lijnrij > td { background: #fafafb; padding: 0 0 0 20px; border-top: 0; }
.lijnblok { padding: .3rem 0 .5rem; }
.lijnblok > summary {
  cursor: pointer; font-size: .88rem; padding: .3rem 0;
  display: flex; gap: .6rem; align-items: center;
}
.lijnblok > summary::marker { color: #9ca3af; }
.lijninhoud { padding: .5rem 0 .3rem; max-width: 46rem; }
.lijninhoud table.mini { margin-bottom: .7rem; width: 100%; }

/* HET FORMULIER OP EEN REGEL: extensie, naam, knop. Dat past en het maakt
 * duidelijk dat het bij elkaar hoort. */
.lijnvorm { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.lijnvorm label { display: flex; flex-direction: column; gap: .2rem;
                  font-size: .82rem; }
.lijnvorm select, .lijnvorm input { padding: .3rem .4rem; }
.knop.klein { padding: .25rem .6rem; font-size: .8rem; }

/* DE KNOP NAAST EEN INVOERVELD OP DEZELFDE ONDERKANT.
 *
 * `.lijnvorm` gebruikte `align-items: flex-end`, maar het label is een
 * flexKOLOM: eerst de tekst, dan het veld. De onderkant van het LABEL ligt
 * daardoor lager dan die van het veld, en de knop zakte twaalf pixels mee.
 *
 * Oplossing: de knop krijgt dezelfde hoogte als een invoerveld en lijnt op de
 * onderkant van het label. Zo staan veld en knop op een lijn, ongeacht hoe
 * hoog het label is.
 */
.lijnvorm { align-items: flex-end; }
.lijnvorm > button,
.lijnvorm .knop {
  height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  align-self: flex-end;
}
/* HET LABEL MAG NIET GROEIEN: anders duwt de tekst het veld omhoog en klopt de
 * uitlijning weer niet. */
.lijnvorm label { margin: 0; }
/* EEN SELECT IS VAN ZICHZELF LAGER DAN EEN INPUT. Dezelfde hoogte als de knop
 * maakt de rij gelijk. */
.lijnvorm select, .lijnvorm input { height: 2rem; box-sizing: border-box; }

/* De laatste inline stijlen als klassen (style-src weigert `style=""`). */
.fout-tekst  { color: var(--bad); }
.omrand      { border: 1px solid #d6dfec; }
.kol-22      { width: 22rem; }
.kol-17      { width: 17rem; }
.kol-14      { width: 14rem; }
.kol-11      { width: 11rem; }
.kol-6       { width: 6rem; }
.kol-5r      { width: 5rem; }
.smal-38     { max-width: 38rem; margin: 3rem auto; }
.smal-42     { max-width: 42rem; }
.smal-44     { max-width: 44rem; }
.vulling-a   { padding: 0 18px 18px; }
.vulling-b   { padding: 20px 16px 34px; }
.vulling-c   { padding: 16px; text-align: center; }
.kol-9       { width: 9rem; }
.kol-44p     { width: 44px; text-align: center; }
.vol-boven5  { width: 100%; margin-top: 5px; }
.links-uit   { text-align: left; }
.vaag        { opacity: .45; }
.rand-klein  { margin: .2rem 0; }
.boven8-klein{ margin-top: 8px; font-size: .86rem; }
.boven20     { margin-top: 20px; }
.boven12     { margin-top: 12px; }
.onder20     { margin-bottom: 20px; }
.hoog-2      { height: 2rem; vertical-align: middle; }

/* ---- het platformscherm: wie mag er bij SSH ------------------------- */
/* EIGEN NAMEN, geen `.toestelstand` uit belplan.css: dat bestand laadt hier
   niet, en dezelfde klassenaam in twee stylesheets met elk hun eigen
   definitie is precies hoe `.let` een keer blauw werd op het ene scherm en
   rood op het andere. */
.adresstand{ display:inline-block; font-size:.82rem }
.adresstand.goed{ color:var(--ok) }
.adresstand.weg{ color:var(--bad) }

.veld.twee{ display:flex; gap:12px; flex-wrap:wrap }
.veld.twee > div{ flex:1 1 12rem }

/* Het bevestigingsvenster. `.bevestig` en niet `.venster`: die laatste is van
   belplan.css en heeft daar zijn eigen maten. */
.bevestig{ border:1px solid var(--lijn); border-radius:10px; padding:0;
           width:min(520px, calc(100vw - 32px)); color:var(--tekst);
           background:var(--card); max-height:calc(100dvh - 32px);
           overflow:auto }
.bevestig::backdrop{ background:rgba(28,43,54,.45) }
.bevestig form{ margin:0; padding:20px }
.bevestig h2{ margin:0 0 4px; font-size:1.15rem }
.bevestig > form > .veldhulp{ margin:0 0 16px; display:block }
.uitlegblok{ margin:14px 0 0; background:#eef2f8; border:1px solid #d6e0f0;
             border-radius:10px; padding:12px 14px; font-size:.9rem }
.uitlegblok p{ margin:0 0 7px }
.uitlegblok p:last-child{ margin:0 }
.bevestig .let,.bevestig .opletten{ margin-top:14px }
.bevestig .knoppen{ margin-top:18px }

/* EEN KAART DIE UITKLAPT. De kop is dan een `<summary>` en niet een `<header>`,
   dus de opmaak van `.kaart > header` slaat er niet op aan: zonder deze regels
   staat de h2 op zijn eigen regel met de standaardmarge eromheen en valt de
   hint eronder. Gebruikt op het scherm Toestellen voor de twee
   provisioningadressen, die samen een halve pagina vullen terwijl je ze maar
   nodig hebt op het moment dat je een apparaat inricht. */
details.kaart.uitklap > summary h2{margin:0;font-size:1.02rem}
details.kaart.uitklap > summary .hint{color:var(--stil);font-size:.84rem}

/* De adressenlijst van een deurstation: een kop die niet als kaartkop leest. */
.adresblok h3{margin:0 0 6px;font-size:.95rem}
.adresblok .mini{margin-bottom:10px}
.adresblok .inlineform{flex-wrap:wrap}
.adresblok .inlineform label{margin-right:2px}

/* De lijst met verschoven adressen op een deurbelkaart.
   NIET `.kaal` hergebruiken: die klasse is de smalle, gecentreerde houder van
   het inlogscherm, en een lijst daarin zou midden op de kaart komen te staan. */
.verschovenlijst{margin:6px 0 10px;padding-left:18px}
.verschovenlijst li{margin-bottom:4px}

/* ---- inspreken via het eigen toestel --------------------------------- */
/* Het nummer is het enige dat iemand hier hoeft te onthouden, dus het mag
   groot. Niet als kop: het is geen titel maar een waarde. */
.inspreeknummer{font-size:1.5rem;letter-spacing:.04em}
.inspreekstappen{margin:10px 0;padding-left:22px;line-height:1.8}
.inspreekknoppen{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.inspreekknoppen form{margin:0}

/* VERBORGEN VOOR HET OOG, NIET VOOR DE SCHERMLEZER.
   Stond alleen in belplan.css, en die wordt op de meeste schermen niet
   geladen -- waardoor op het geluidsscherm letterlijk "Naam van deze opname"
   naast elk veld stond. Dezelfde val als bij `.waarschuwblok`, en ik liep er
   dezelfde avond nog een keer in. Een hulpklasse hoort in de stijl die overal
   geldt. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap}

/* Het naamveld bij een geluidsopname. Breed genoeg voor "Ingesproken 3
   november 19:30" zonder dat de rest van de rij wegvalt. */
/* NIET AFBREKEN maar krimpen. Met `flex-wrap:wrap` viel de knop onder het veld
   zodra de tabel de kolom smal berekende -- en dan is elke rij twee regels
   hoog. Het veld geeft mee tot 7rem; daaronder scrollt de tabel al. */
.hernoemform{flex-wrap:nowrap}
.hernoemform .naamveld{flex:1 1 14rem;min-width:7rem}
.hernoemform .knop{white-space:nowrap}

/* Een rij knoppen onder elkaar op een smal scherm, naast elkaar op een breed.
   `.acties` is rechts uitgelijnd; deze rij hoort links te beginnen. */
.knoppenrij{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}

/* ---- een toestel in een belgroep dat nooit overgaat ------------------ */
/* ROOD EN NIET GRIJS, anders dan de rinkeltijd ernaast. Dit is geen
   mededeling maar een stuk van de groep dat niet werkt: het toestel begint
   later dan de groep wacht, dus een beller hoort hem nooit. In style.css en
   NIET in belplan.css: het belgroepenscherm laadt alleen dit blad. Dat is op
   3 november drie keer misgegaan met een klasse uit het verkeerde bestand. */
.nietaandebeurt{color:var(--rood);font-weight:600}

/* ---- snelkiestoetsen: wat het lampje betekent ----------------------- */
/* EEN BLAUW TERZIJDE EN GEEN WAARSCHUWING: er is niets mis, het legt uit wat
   de toets doet. In style.css en niet in belplan.css -- het toestellenscherm
   laadt alleen dit blad. */
.tiplamp{margin:14px 0 0;background:#eef2f8;border:1px solid #d6e0f0;
         border-radius:8px;padding:11px 14px;font-size:.9rem}
.tiplamp p{margin:0 0 6px}
.tiplamp p:last-child{margin:0}
.lampjes{display:flex;gap:20px;flex-wrap:wrap}
.lampje{display:inline-flex;align-items:center;gap:7px}
.bol{width:11px;height:11px;border-radius:50%;flex:0 0 11px;
     border:1px solid rgba(0,0,0,.18);display:inline-block}
.bol.uit{background:#d9d9dc}
.bol.aan{background:var(--rood)}
.bol.knip{background:#e58a2e}