/* ============================================================================
 * portal.css — gedeeld ontwerpsysteem voor het klantportaal (Mijn WebOké).
 * Eén consistente stijl voor dashboard, domeinen, producten, facturen,
 * gegevens, inloggegevens, 2FA, incasso: kleuren, kaarten, tabbladen,
 * statistiek-tegels, gekleurde info-boxen en klikbare rijen — in de WebOké-
 * huisstijl (blauw/accent). Bouwt voort op de tokens uit site.css.
 * ========================================================================== */

:root {
  --p-merk:#0c4a6e; --p-merk-2:#14608f; --p-accent:#1062fe; --p-accent-2:#38bdf8;
  --p-inkt:#1e293b; --p-dim:#64748b; --p-rand:#e2e8f0; --p-vlak:#f1f5f9;
  --p-groen:#15803d; --p-groen-bg:#dcfce7; --p-oranje:#b45309; --p-oranje-bg:#fff7ed;
  --p-rood:#b91c1c; --p-rood-bg:#fef2f2; --p-blauw:#075985; --p-blauw-bg:#eff6ff;
  --p-radius:14px; --p-schaduw:0 1px 3px rgba(23,25,28,.05),0 8px 24px rgba(23,25,28,.05);
  --p-grad:linear-gradient(120deg,#152a80,#1d65af);
}

.wok-portal{padding:30px 0 60px}
.wok-portal .s-wrap{max-width:1080px}

/* ---- Kop ---- */
.wok-phead{display:flex;align-items:flex-start;gap:16px;margin:0 0 22px}
.wok-phead-ico{flex:none;width:52px;height:52px;border-radius:14px;background:var(--p-grad);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 8px 20px rgba(16,98,254,.22)}
.wok-phead h1{margin:0;font-size:26px;color:var(--p-merk);line-height:1.2}
.wok-phead p{margin:4px 0 0;color:var(--p-dim);font-size:14.5px}

/* ---- Tabbladen ---- */
.wok-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--p-rand);margin:0 0 22px}
.wok-tabs a{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;margin-bottom:-2px;
  border-bottom:2px solid transparent;color:var(--p-dim);text-decoration:none;font-weight:600;font-size:14.5px;border-radius:8px 8px 0 0}
.wok-tabs a:hover{color:var(--p-merk);background:var(--p-vlak)}
.wok-tabs a.actief{color:var(--p-accent);border-bottom-color:var(--p-accent)}
.wok-tabs a .badge{background:var(--p-vlak);color:var(--p-dim);font-size:11px}
.wok-tabs a.actief .badge{background:var(--p-accent);color:#fff}
/* Mobiel: tabbladen op één scrollbare regel i.p.v. wrappen (kleine tikdoelen
   dicht op elkaar); de onderrand scrolt mee met de rij. */
@media(max-width:640px){
  .wok-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wok-tabs a{white-space:nowrap}
}

/* ---- Statistiek-tegels ---- */
.wok-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:0 0 24px}
.wok-tile{position:relative;background:#fff;border:1px solid var(--p-rand);border-radius:var(--p-radius);
  padding:18px 20px;box-shadow:var(--p-schaduw);overflow:hidden}
.wok-tile:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--p-accent)}
.wok-tile.groen:before{background:var(--p-groen)} .wok-tile.oranje:before{background:#f59e0b}
.wok-tile.paars:before{background:#7c3aed} .wok-tile.rood:before{background:var(--p-rood)}
.wok-tile-k{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--p-dim)}
.wok-tile-v{margin-top:8px;font-size:28px;font-weight:800;color:var(--p-merk);line-height:1.1}
.wok-tile-sub{margin-top:3px;font-size:12.5px;color:var(--p-dim)}
.wok-tile .ico{width:34px;height:34px;border-radius:10px;background:var(--p-vlak);color:var(--p-accent);
  display:flex;align-items:center;justify-content:center;position:absolute;right:16px;top:16px}

/* ---- Kaarten ---- */
.wok-card{background:#fff;border:1px solid var(--p-rand);border-radius:var(--p-radius);
  box-shadow:var(--p-schaduw);margin-bottom:20px;overflow:hidden}
.wok-card-kop{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--p-rand);
  font-weight:700;font-size:15.5px;color:var(--p-merk);background:linear-gradient(180deg,#fafcff,#fff)}
.wok-card-kop .ico{color:var(--p-accent)}
.wok-card-kop .rechts{margin-left:auto;font-weight:600;font-size:13px}
.wok-card-body{padding:20px 22px}
.wok-card-body.plat{padding:0}

/* ---- Kolommen ---- */
.wok-grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.wok-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.wok-grid2,.wok-grid3{grid-template-columns:1fr}}

/* ---- Tabellen met klikbare rijen ---- */
.wok-tabel{width:100%;border-collapse:collapse;font-size:14.5px}
/* Mobiel: de tabel zelf wordt de scrollcontainer (display:block); thead+tbody
   worden samen in één anonieme tabel gewikkeld, dus de kolommen blijven
   uitgelijnd. Zo loopt een brede rij nooit buiten het scherm. */
@media(max-width:700px){
  .wok-tabel{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .wok-tabel th,.wok-tabel td{padding:12px 12px}
}
.wok-tabel th{text-align:left;padding:12px 18px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--p-dim);background:var(--p-vlak);border-bottom:1px solid var(--p-rand)}
.wok-tabel td{padding:14px 18px;border-bottom:1px solid var(--p-rand);vertical-align:middle;color:var(--p-inkt)}
.wok-tabel tbody tr:last-child td,.wok-tabel tr:last-child td{border-bottom:0}
.wok-rij-klik{cursor:pointer;transition:background .12s}
.wok-rij-klik:hover td{background:#f5f9ff}
.wok-rij-klik td:first-child{font-weight:600;color:var(--p-merk)}
.wok-rij-klik .wok-chev{color:var(--p-dim);text-align:right}
.wok-rij-klik:hover .wok-chev{color:var(--p-accent)}

/* ---- Statuslabels ---- */
.wok-status{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700}
.wok-status:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.wok-status.ok{background:var(--p-groen-bg);color:var(--p-groen)}
.wok-status.wacht{background:#fef9c3;color:#a16207}
.wok-status.uit{background:var(--p-rood-bg);color:var(--p-rood)}
.wok-status.grijs{background:var(--p-vlak);color:var(--p-dim)}

/* ---- Gekleurde info-boxen ---- */
.wok-box{display:flex;gap:12px;border:1px solid;border-left-width:4px;border-radius:10px;padding:14px 18px;margin:0 0 16px;line-height:1.55;font-size:14.5px}
.wok-box .ico{flex:none;margin-top:2px}
.wok-box.info{background:var(--p-blauw-bg);border-color:#bfdbfe;color:var(--p-blauw)}
.wok-box.ok{background:var(--p-groen-bg);border-color:#a7f3d0;color:var(--p-groen)}
.wok-box.waarschuw{background:#fffbeb;border-color:#fde68a;color:var(--p-oranje)}
.wok-box.fout{background:var(--p-rood-bg);border-color:#fecaca;color:var(--p-rood)}

/* ---- Verbruiksring (voor producten) ---- */
.wok-ring{--pct:0;width:52px;height:52px;border-radius:50%;flex:none;
  background:conic-gradient(var(--p-accent) calc(var(--pct)*1%),var(--p-vlak) 0);display:grid;place-items:center}
.wok-ring>span{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--p-merk)}

/* ---- Definitielijst (gegevens) ---- */
.wok-dl{display:grid;grid-template-columns:200px 1fr;gap:0}
.wok-dl dt{padding:11px 0;color:var(--p-dim);font-weight:600;font-size:14px;border-bottom:1px solid var(--p-rand)}
.wok-dl dd{padding:11px 0;margin:0;font-weight:600;color:var(--p-inkt);border-bottom:1px solid var(--p-rand)}
@media(max-width:640px){.wok-dl{grid-template-columns:1fr}.wok-dl dt{border-bottom:0;padding-bottom:2px}}

/* ---- Knoppen (aanvulling op site-compat) ---- */
.wok-da-login{font-size:13px}
.wok-actiebalk{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
/* Compacte DA-login-knop voor lijstrijen (klein, net vóór de status) */
.wok-da-mini{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;
  background:var(--p-vlak);color:var(--p-merk);border:1px solid var(--p-rand);text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;line-height:1.4;transition:background .12s,border-color .12s}
.wok-da-mini:hover{background:#e6f0ff;border-color:var(--p-accent);color:var(--p-accent)}
.wok-da-mini i{font-size:11px}
/* Mobiel: tikdoel van de mini-knop naar minstens 36px hoog. */
@media(max-width:700px){.wok-da-mini{padding:8px 12px;min-height:36px}}

/* ---- Lege staat ---- */
.wok-leeg{text-align:center;padding:44px 20px;color:var(--p-dim)}
.wok-leeg .ico{font-size:44px;opacity:.3;margin-bottom:12px}
.wok-leeg h3{margin:0 0 6px;color:var(--p-inkt);font-size:17px}