/* ============================================================
   Account · inloggen, tweestaps, slotscherm en collega's.

   Bouwt op beheer.css (.kaart, .knop, .veld, .invoer, .tabel,
   .merk, .tabs, .leeg); hier staat alleen wat echt nieuw is:
   het telefoon-kaartje, het slotscherm, de bekijk-als-banner en
   de regels binnen de accountkaarten. Geen child-combinators
   (een hook maakt daar lege bestanden van).
   ============================================================ */

/* ---------- foutregels en uitleg ---------- */
.acc-fout{margin:10px 0 0;font-size:12.5px;color:#A33B2A}
.acc-uitleg{margin:0 0 14px;font-size:13px;color:var(--grijs);line-height:1.55}

/* ---------- twee kolommen: formulier naast het telefoon-kaartje ---------- */
.acc-duo{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.acc-duo__kolom{flex:1 1 260px;min-width:0}
/* Bij het inloggen staat het duo op het donkere doek en hoort het gecentreerd. */
.acc-duo--inlog{justify-content:center;width:100%;max-width:640px}
.acc-duo--inlog .inlog__kaart{flex:0 1 380px}

/* ---------- telefoon-kaartje (demo-rekwisiet) ---------- */
/* Donker en afgerond als een telefoonscherm: het contrast zegt meteen
   "dit is een ander apparaat", geen formulierveld. */
.acc-telefoon{width:216px;flex:none;background:var(--navy);color:#F6F5F3;border-radius:20px;
  padding:18px 18px 16px;box-shadow:var(--schaduw)}
.acc-telefoon__kop{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#9BA5BF}
.acc-telefoon__code{font-family:var(--mono);font-size:27px;letter-spacing:.1em;margin:12px 0 10px}
.acc-telefoon__balk{height:4px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
/* Aftellen via transform, niet width: geen layoutwerk vijf keer per seconde. */
.acc-telefoon__vulling{display:block;height:100%;width:100%;background:var(--terra);border-radius:2px;
  transform-origin:left;transition:transform .5s linear}
.acc-telefoon__uitleg{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:#9BA5BF}

/* ---------- cijferinvoer, geheim en herstelcodes ---------- */
.acc-cijfers{font-family:var(--mono);font-size:19px;letter-spacing:.3em;text-align:center}
.acc-cijfers::placeholder{color:var(--zacht);letter-spacing:.3em}
/* user-select:all: één klik selecteert het hele geheim, klaar om te kopiëren. */
.acc-geheim{font-family:var(--mono);font-size:17px;letter-spacing:.12em;text-align:center;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  padding:13px 14px;margin:0 0 16px;user-select:all}
.acc-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.acc-codes__code{font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-align:center;
  background:var(--wit);border:1px solid var(--lijn);border-radius:8px;padding:10px 8px;user-select:all}

/* ---------- slotscherm ---------- */
/* Boven álles (meldingen zitten op 80): wie wegloopt, laat niets leesbaar achter. */
.acc-slot{position:fixed;inset:0;z-index:120;background:rgba(11,20,32,.96);
  display:grid;place-items:center;padding:24px}
.acc-slot__kaart{width:100%;max-width:380px;background:var(--wit);border-radius:var(--r-groot);
  padding:30px 32px}
.acc-slot__zegel{width:44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;
  display:grid;place-items:center;margin-bottom:14px}
.acc-slot__kaart h2{font-family:var(--display);font-size:22px;margin-bottom:6px}
.acc-slot__uitleg{margin:0 0 18px;font-size:13px;color:var(--grijs);line-height:1.55}
.acc-slot__knoppen{display:flex;gap:8px;margin-top:16px}
.acc-slot__demo{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--lijn);
  font-size:12px;color:var(--zacht)}

/* ---------- bekijk-als banner ---------- */
/* Terra-zacht: dezelfde "let op"-tint als elders, fel genoeg om nooit te vergeten. */
.acc-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--terra-zacht);border:1px solid #F0D6C7;color:#9C4522;
  border-radius:var(--r);padding:11px 14px;margin-bottom:18px;font-size:13px}
.acc-banner svg{flex:none}
.acc-banner__terug{border:0;background:transparent;padding:0;margin-left:auto;color:var(--terra);
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.acc-banner__terug:hover{text-decoration:underline}
.acc-banner__terug:focus-visible{outline:2px solid var(--terra);outline-offset:2px;border-radius:4px}

/* ---------- regels binnen kaarten (beveiliging, apparaten, demo) ---------- */
.acc-regel{display:flex;align-items:center;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--lijn-2)}
.acc-regel:last-child{border-bottom:0;padding-bottom:2px}
.acc-regel__tekst{flex:1;min-width:0}
.acc-regel__tekst b{display:block;font-weight:500;font-size:13.5px}
.acc-regel__tekst span{display:block;font-size:12.5px;color:var(--zacht);margin-top:1px;line-height:1.45}
.acc-regel__acties{display:flex;align-items:center;gap:8px;flex:none}
.acc-regel .knop{flex:none}
.acc-regel .merk{flex:none}

/* ---------- bekijk-als keuzeknopjes ---------- */
.acc-rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.acc-rol{border:1px solid var(--lijn);background:var(--wit);border-radius:var(--r);
  padding:12px 14px;cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s,box-shadow .15s}
.acc-rol:hover{background:var(--lijn-2)}
.acc-rol.aan{border-color:var(--navy);box-shadow:0 0 0 2px rgba(11,20,32,.12)}
.acc-rol.aan:hover{background:var(--wit)} /* gekozen blijft rustig wit */
.acc-rol b{display:block;font-size:13.5px;font-weight:500;margin-bottom:3px}
.acc-rol span{display:block;font-size:12px;color:var(--zacht);line-height:1.45}

/* ---------- collega's ---------- */
.acc-naam{font-weight:500;margin-right:8px}
/* Compacter dan een gewoon invoerveld; de pijl van select.invoer blijft staan. */
.acc-rolkeuze{width:auto;min-width:130px;padding:6px 30px 6px 10px;font-size:13px}

/* ---------- auditlog ---------- */
.acc-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.acc-filter .invoer{flex:1 1 220px;max-width:340px}
.acc-filter .knop{margin-left:auto;flex:none}
.acc-tijd{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--grijs);
  white-space:nowrap}

/* ---------- uitgeschakelde invoer (kijker) ---------- */
/* beheer.css kent alleen .knop[disabled]; hier ook de velden en selects. */
.acc-scherm .invoer[disabled]{background:var(--lijn-2);color:var(--zacht);cursor:not-allowed}

/* ---------- klein scherm ---------- */
@media (max-width:820px){
  .acc-telefoon{width:100%}
  .acc-banner__terug{margin-left:0}
  .acc-filter .knop{margin-left:0}
  .acc-slot__kaart{padding:24px 22px}
  .acc-slot__knoppen{flex-wrap:wrap}
  .acc-regel{flex-wrap:wrap}
  .acc-regel__tekst{flex:1 1 100%}
}