/* ============================================================================
   ICT Empowered - klantportaal
   Vormgeving volgens ECT-Monitoring-Styleguide (12-08-2026).

   UITGANGSPUNT BIJ DEZE HERSCHRIJVING
     Alle bestaande selectors zijn behouden. Geen enkel sjabloon is gewijzigd;
     dit bestand bepaalt alleen hoe het eruitziet. Klassen die de gids toevoegt
     (.tile, .ndbar, .dot, .rbadge, .dbar ...) staan onderaan en zijn puur
     aanvullend - bestaande pagina's raken ze niet.

     Het donkere thema van hiervoor is vervangen door de lichte opzet uit de
     gids. De klassen body.report-light en body.theme-light bestaan nog steeds
     en zetten dezelfde lichte stijl, zodat sjablonen die die klasse zetten
     precies hetzelfde blijven doen.
   ============================================================================ */

:root{
  /* De variabelen houden hun NAAM, want sjablonen en losse regels verwijzen
     ernaar met var(). Alleen de waarden komen nu uit de gids. */
  --navy:#16324f;          /* chrome en primaire acties */
  --navy-hover:#234a70;
  --navy-line:#2b4f74;
  --ict:#16649f;           /* accentblauw: links, focus, actieve staat */
  --emp:#cfe3f5;           /* tekst op navy */
  --tag:#16649f;           /* hyperlinks */
  --bg0:#f4f6f8; --bg1:#f4f6f8;
  --card:#ffffff; --card2:#f7fafc;
  --ink:#1c2733; --muted:#77828c; --line:#dde4ea;
  --label:#4a5561;
  --ok:#2e7d32; --err:#c62828; --warn:#f9a825;
  --tint:#eef4fa;          /* selectie/hover */
  --veld:#c3ccd4;          /* randen van invoervelden */
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,sans-serif;color:var(--ink);
  background:var(--bg0);min-height:100vh;font-size:14px;overflow-x:hidden}
a{color:var(--tag);text-decoration:none} a:hover{text-decoration:underline}

/* ---- kopbalk: navy, rustig, herkenbaar boven een lichte pagina ---- */
header.top{display:flex;align-items:center;gap:14px;padding:10px 20px;
  background:var(--navy);color:#fff;position:sticky;top:0;z-index:60;flex-wrap:wrap}
header.top img{width:30px;height:30px}
header.top .brand{font-size:18px;font-weight:700;letter-spacing:.5px}
header.top .brand .i{color:#7cc0f5} header.top .brand .e{color:var(--emp);font-weight:400}
header.top nav{display:flex;align-items:center;gap:14px;margin-left:22px;font-weight:600;font-size:14px;flex-wrap:wrap}
header.top nav a{color:var(--emp);padding:4px 6px;border-radius:4px;line-height:1.5;display:inline-block}
header.top nav a:hover{background:var(--navy-hover);color:#fff;text-decoration:none}
header.top nav .navgroep{position:relative;display:inline-flex;align-items:center}
header.top nav .navkop{cursor:default;user-select:none;color:var(--emp);padding:4px 6px;border-radius:4px;line-height:1.5;display:inline-block}
header.top nav .navkop:hover{background:var(--navy-hover);color:#fff}
header.top nav .navmenu{display:none;position:absolute;left:0;top:100%;padding:6px 0;
  min-width:180px;background:var(--navy);border:1px solid var(--navy-line);border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.27);z-index:70}
header.top nav .navgroep:hover .navmenu,
header.top nav .navgroep:focus-within .navmenu{display:block}
header.top nav .navmenu a{display:block;padding:6px 14px;white-space:nowrap;font-weight:600}
header.top nav .navmenu a:hover{background:var(--navy-hover)}
header.top .right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14px;color:var(--emp)}
header.top a{color:var(--emp)}

/* ---- pagina-indeling ---- */
.wrap{max-width:1300px;margin:0 auto;padding:20px}
.wrap.breed{max-width:1500px}
.auth-wrap{max-width:440px;margin:6vh auto;padding:0 20px}
h1{font-size:22px;margin:0 0 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
h2{font-size:17px;margin:28px 0 12px;border-left:3px solid var(--ict);padding-left:9px}

/* ---- kaarten ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;margin-bottom:18px;box-shadow:0 1px 3px rgba(22,50,79,.08)}
section{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:14px 18px;margin-bottom:18px}
.logo-lg{width:64px;height:64px;display:block;margin:0 auto 14px}

/* ---- formulieren ---- */
label{display:block;font-size:13px;color:var(--label);margin:12px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%;padding:7px 9px;border-radius:5px;border:1px solid var(--veld);
  background:#fff;color:var(--ink);font-size:14px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ict);
  box-shadow:0 0 0 2px rgba(22,100,159,.18)}
select option{background:#fff;color:var(--ink)}

/* ---- knoppen ---- */
.btn{display:inline-block;background:var(--navy);color:#fff;border:none;
  padding:5px 14px;border-radius:5px;font-weight:600;font-size:14px;cursor:pointer;
  font-family:inherit;text-decoration:none}
.btn:hover{background:var(--navy-hover);text-decoration:none}
.btn.sec{background:#78909c;color:#fff;border:none}
.btn.sec:hover{background:#6b8290}
.btn.danger{background:var(--err);color:#fff}
.btn.danger:hover{background:#a92020}
.btn.small{padding:4px 11px;font-size:13px}
button{background:var(--navy);color:#fff;border:0;padding:6px 16px;border-radius:5px;
  cursor:pointer;font-size:14px;font-family:inherit}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- meldingen ---- */
.flash{padding:10px 14px;border-radius:8px;margin:10px 0;font-size:14px;border:1px solid}
.flash.ok{background:#e3f3e4;border-color:#b6ddb8;color:var(--ok)}
.flash.error{background:#fdecea;border-color:#f5c6c4;color:#b71c1c}

/* ---- tabellen ---- */
table{width:100%;max-width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;background:#eef2f6;padding:6px 10px;border-bottom:2px solid #d7dee5;
  color:#33475b;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
td{text-align:left;padding:6px 10px;border-bottom:1px solid #e8edf2;vertical-align:top}
tr:hover td{background:#f7fafc}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- badges ---- */
.badge{font-size:11px;padding:1px 8px;border-radius:10px;font-weight:700;vertical-align:middle}
.badge.on{background:#e3f3e4;color:var(--ok)}
.badge.off{background:#fdecea;color:var(--err)}
.badge.role{background:var(--tint);color:var(--navy);border:1px solid #d3e2ef}

/* ---- kengetallen ---- */
.muted{color:var(--muted)}
.kpis{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.kpi{flex:1;min-width:130px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:14px;box-shadow:0 1px 3px rgba(22,50,79,.08)}
.kpi .n{font-size:26px;font-weight:700} .kpi .l{font-size:12px;color:var(--muted)}

/* ---- overig bestaand ---- */
.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 16px;margin-top:8px}
.checklist label{display:flex;gap:8px;align-items:center;color:var(--ink);margin:2px 0;font-size:14px}
.checklist input{width:auto}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  font-family:Consolas,monospace;margin:14px 0}
.codes div{background:#eef2f6;border:1px solid #d7dee5;border-radius:5px;padding:8px 12px;
  text-align:center;letter-spacing:.05em;color:var(--ink)}
.qr{background:#fff;padding:12px;border-radius:8px;width:220px;margin:14px auto;display:block}
.mono{font-family:Consolas,monospace;font-size:12px;background:#eef2f6;padding:2px 6px;
  border-radius:4px;color:var(--ink)}

/* ---- klanttegels op het dashboard: klikbare kaarten ---- */
a.card{display:block;color:var(--ink);text-decoration:none;background:var(--tint);
  border-color:#d3e2ef}
a.card:hover{background:#e2eaf1;border-color:#9fb8cd;text-decoration:none}
a.card .muted{color:#55677a}
a.card.statusbalk{background:var(--tint)}
a.card.statusbalk:hover{background:#e2eaf1}

/* ---- afdrukken ---- */
@media print{
  header.top,.no-print{display:none !important}
  body{background:#fff !important;color:#111 !important}
  .wrap{max-width:100%}
  .card,table,th,td,.kpi{background:#fff !important;color:#111 !important;border-color:#cbd5e1 !important}
  th{color:#334 !important} .kpi .n{color:#111 !important} .muted{color:#556 !important}
  h1,h2{color:#0b2e4f !important} a{color:#1e76ae !important}
}

/* ============================================================================
   body.report-light / body.theme-light
   Deze klassen bestaan nog omdat sjablonen ze zetten. De lichte stijl IS nu de
   standaard, dus ze bevestigen alleen wat er al staat. Ze weghalen uit de
   sjablonen kan later; zolang ze er zijn, verandert er niets.
   ============================================================================ */
body.report-light, body.theme-light{background:var(--bg0);color:var(--ink)}
body.report-light header.top, body.theme-light header.top{background:var(--navy)}
body.report-light .card,body.report-light .kpi,
body.theme-light .card,body.theme-light .kpi{box-shadow:0 1px 3px rgba(22,50,79,.08)}
body.report-light .badge.role,body.theme-light .badge.role{background:var(--tint);color:var(--navy)}
body.report-light .badge.on,body.theme-light .badge.on{background:#e3f3e4;color:var(--ok)}
body.report-light .badge.off,body.theme-light .badge.off{background:#fdecea;color:var(--err)}
body.report-light .mono,body.theme-light .mono{background:#eef2f6;color:var(--ink)}
body.report-light .flash.ok,body.theme-light .flash.ok{color:var(--ok)}
body.report-light .flash.error,body.theme-light .flash.error{color:#b71c1c}
body.report-light .codes div,body.theme-light .codes div{background:#eef2f6;border-color:#d7dee5;color:var(--ink)}
body.report-light input[type=text],body.report-light input[type=email],
body.report-light input[type=password],body.report-light input[type=tel],
body.report-light input[type=number],body.report-light select,body.report-light textarea,
body.theme-light input[type=text],body.theme-light input[type=email],
body.theme-light input[type=password],body.theme-light input[type=tel],
body.theme-light input[type=number],body.theme-light select,body.theme-light textarea{
  background:#fff;color:var(--ink);border:1px solid var(--veld)}
body.report-light select option,body.theme-light select option{background:#fff;color:var(--ink)}
body.report-light input:focus,body.report-light select:focus,body.report-light textarea:focus,
body.theme-light input:focus,body.theme-light select:focus,body.theme-light textarea:focus{
  border-color:var(--ict);box-shadow:0 0 0 2px rgba(22,100,159,.18)}
body.report-light label,body.theme-light label{color:var(--label)}
body.report-light .btn.sec,body.theme-light .btn.sec{color:#fff;border-color:#78909c}
body.report-light table th,body.theme-light table th{color:#33475b}
body.report-light a,body.theme-light a{color:var(--tag)}
body.report-light header.top a,body.theme-light header.top a{color:var(--emp)}
/* Het uitklapmenu had in het lichte thema een eigen kleur. Die regel blijft
   staan - hij zet nu dezelfde navy als de balk zelf, zodat er niets verandert
   maar ook geen selector verdwijnt. */
body.report-light header.top nav .navmenu,
body.theme-light header.top nav .navmenu{background:var(--navy);border-color:var(--navy-line)}
body.report-light a.card, body.theme-light a.card{background:var(--tint);border-color:#d3e2ef}
body.report-light a.card .muted, body.theme-light a.card .muted{color:#55677a}
body.report-light a.card:hover, body.theme-light a.card:hover{background:#e2eaf1}
body.report-light a.card.statusbalk, body.theme-light a.card.statusbalk{background:var(--tint)}

/* --- werkstromen (sleur-en-pleur) --- */
.wf-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
@media (max-width:900px){.wf-grid{grid-template-columns:1fr}}
.wf-block{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;
  cursor:grab;background:var(--card2)}
body.report-light .wf-block,body.theme-light .wf-block{background:var(--card2)}
.wf-block-kop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wf-plus{border:1px solid var(--veld);background:#f1f5f9;color:var(--ict);border-radius:5px;
  width:26px;height:26px;font-size:16px;cursor:pointer;line-height:1;padding:0}
.wf-plus:hover{border-color:var(--ict);background:var(--tint)}
.wf-seq{list-style:none;margin:0;padding:0;min-height:60px}
.wf-item{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;
  background:var(--card2)}
body.report-light .wf-item,body.theme-light .wf-item{background:var(--card2)}
.wf-item-kop{display:flex;align-items:center;gap:8px}
.wf-greep{cursor:grab;color:var(--muted);letter-spacing:-2px}
.wf-knoppen{margin-left:auto;display:flex;gap:4px}
.wf-mini{border:1px solid var(--veld);background:#f1f5f9;color:var(--label);border-radius:5px;
  width:24px;height:24px;cursor:pointer;font-size:12px;line-height:1;padding:0}
.wf-mini:hover{color:var(--ink);border-color:var(--ict);background:var(--tint)}
.wf-velden{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.wf-veld{display:block;font-size:12px;color:var(--muted);margin:0}
.wf-veld input,.wf-veld select{margin-top:3px;width:190px;padding:7px 9px;font-size:13px}
.wf-drop-hint{list-style:none;height:4px;border-radius:2px;background:var(--ict);margin:4px 0}
#wf-palet{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#wf-palet .wf-block{margin-bottom:0}
.wf-tip{list-style:none;padding:14px 12px;color:var(--muted);font-size:13px;
  border:1px dashed var(--line);border-radius:8px}
#wf-doek{min-height:340px}
#wf-doek svg{cursor:default}

/* ============================================================================
   AANVULLEND uit de stijlgids. Puur toevoegend: geen bestaande pagina gebruikt
   deze klassen, dus ze kunnen niets breken. Nieuwe schermen kunnen ze meteen
   gebruiken.
   ============================================================================ */
.small{font-size:12px;font-weight:400}
.nowrap{white-space:nowrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}

.tiles{display:flex;gap:14px;flex-wrap:wrap}
.tile{background:var(--tint);border:1px solid #d3e2ef;padding:14px 22px;border-radius:8px;
  text-decoration:none;color:var(--navy);font-size:15px}
.tile b{font-size:22px;margin-right:6px}
.ibxcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 20px;
  min-width:230px;box-shadow:0 1px 3px rgba(22,50,79,.08)}

/* knoppenbalk met reliëf, voor subnavigatie op een detailpagina */
.ndbar{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 22px}
.ndbar a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--navy);
  background:linear-gradient(180deg,#ffffff,#e9eef4);border:1px solid #c2cfda;
  border-bottom-color:#a9bac8;padding:9px 22px;border-radius:8px;font-size:14px;font-weight:600;
  box-shadow:0 1px 2px rgba(22,50,79,.14),inset 0 1px 0 #fff;
  transition:transform .08s ease,box-shadow .08s ease,background .12s ease}
.ndbar a:hover{background:linear-gradient(180deg,#ffffff,#dbe6ef);border-color:#9fb8cd;
  transform:translateY(-1px);box-shadow:0 3px 7px rgba(22,50,79,.20),inset 0 1px 0 #fff}
.ndbar a:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(22,50,79,.20)}
.ndbar a.on{background:linear-gradient(180deg,#1e4a75,#16324f);color:#fff;border-color:#12293f;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.30);transform:none}
.ndcount{background:var(--err);color:#fff;border-radius:10px;padding:0 7px;font-size:12px}

/* filterbalk met afgeronde tabs */
.vlanbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.vlanbar a{text-decoration:none;color:var(--navy);background:#eef2f6;border:1px solid #c9d4de;
  padding:7px 15px;border-radius:18px;font-size:13.5px;font-weight:600;display:inline-flex;
  align-items:center;gap:7px}
.vlanbar a:hover{background:#e2eaf1;border-color:#9fb8cd}
.vlanbar a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.vcount{background:#d7dee5;color:#33475b;border-radius:9px;padding:0 7px;font-size:12px}
.vlanbar a.on .vcount{background:#ffffff2e;color:#fff}

/* status: stippen, lampjes, chips */
.ok{color:var(--ok);font-weight:600}
.crit,.bad{color:var(--err);font-weight:600}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%}
.dotok{background:var(--ok);box-shadow:0 0 4px #2e7d3288}
.dotbad{background:var(--err);box-shadow:0 0 4px #c6282888}
.dotna{background:#b0bec5}
.light{display:inline-block;width:15px;height:15px;border-radius:4px;vertical-align:middle}
.l-green{background:var(--ok);box-shadow:0 0 5px #2e7d3288}
.l-yellow{background:var(--warn);box-shadow:0 0 5px #f9a82588}
.l-red{background:var(--err);box-shadow:0 0 5px #c6282888}
.l-none{background:#cfd8dc;border:1px solid #b0bec5}
.bok{background:#e3f3e4;color:var(--ok)}
.bbad{background:#fdecea;color:var(--err)}
.rbadge{display:inline-block;padding:1px 9px;border-radius:10px;font-size:12px;font-weight:600;
  white-space:nowrap}
.rbadge.ok{background:#e2f4e8;color:#1a7f3c}
.rbadge.fail{background:#fbe3e3;color:#b03030}
.rbadge.na{background:#eee;color:#777}
.rolechip{display:inline-block;background:var(--tint);border:1px solid #d3e2ef;color:var(--navy);
  font-size:11px;padding:1px 7px;border-radius:9px;margin:1px 2px;white-space:nowrap}
.sev{display:inline-block;padding:1px 9px;border-radius:10px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px}
.sev-alarm{background:#fdecea;color:#b71c1c;border:1px solid #f5c6c4}
.sev-warning{background:#fff4e5;color:#a34700;border:1px solid #ffd8a8}
.sev-info{background:#eef2f6;color:#55677a;border:1px solid #d7dee5}

/* voortgangsbalk met het percentage IN de balk */
.dbar{position:relative;display:inline-block;width:150px;height:16px;background:#e3e9ef;
  border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:6px}
.dbar i{display:block;height:100%;background:#43a047}
.dbar.warn i{background:var(--warn)}
.dbar.crit i{background:var(--err)}
.dbar em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:11px;color:var(--ink);white-space:nowrap;
  text-shadow:0 0 2px #fff,0 0 2px #fff}

.clickrow{cursor:pointer}
.clickrow:hover td{background:var(--tint)}
.inactive td{opacity:.5}
.alert{background:#fdecea;color:#b71c1c;border:1px solid #f5c6c4;padding:8px 12px;
  border-radius:6px;margin-bottom:12px}
.okalert{background:#e3f3e4;border:1px solid #b6ddb8;color:var(--ok);border-radius:8px;
  padding:10px 14px;margin:14px 0}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:14px}
.configbox{background:#1c2733;color:#dfe7ee;padding:12px 14px;border-radius:6px;max-height:460px;
  overflow:auto;font-family:Consolas,monospace;font-size:12px;line-height:1.45;white-space:pre}
pre.log{background:#0f1f2e;color:#d7e3ee;padding:14px 16px;border-radius:8px;overflow-x:auto;
  font-size:13px;line-height:1.5;white-space:pre-wrap}