/*
  Rehber — het beheerportaal.

  De kleuren komen uit src/theme/tokens.ts, zodat het portaal en de app
  familie van elkaar zijn. Ze staan hier als vaste waarden en niet als import:
  dit is een losse pagina zonder bouwstap, en één plek waar ze staan is beter
  dan een bouwstap erbij om ze te delen. Wijzigt het palet, dan wijzigt dit
  bestand mee — dat is de prijs, en hij staat hier opgeschreven.

  Licht en donker volgen het toestel. Geen schakelaar: wie hier komt, komt om
  iets in te voeren en niet om aan de weergave te draaien.
*/

:root {
  --bg: #f7f1e8;
  --vlak: #fefaef;
  --vlakAlt: #efe6db;
  --tekst: #1c1b1a;
  --dim: #838280;
  --stil: #a8a5a0;
  --rand: #eadccf;
  --primair: #2f2fc1;
  --accent: #af751b;
  --cta: #1e2427;
  --opCta: #f7f1e8;
  /* De kleuren per bestandsformaat; zie `formaten` in src/theme/tokens.ts.
     Deze twee lijsten moeten gelijk blijven — een pdf hoort er in de app en in
     het portaal hetzelfde uit te zien. */
  --pdf: #c0341d;
  --pdfZacht: #fbe4de;
  --word: #1f4fb0;
  --wordZacht: #e0e8f7;
  --tekst: #4f5a45;
  --tekstZacht: #e7ebe1;
  --notitie: #2f7d6b;
  --notitieZacht: #dcece7;
  --onbekend: #6b6560;
  --onbekendZacht: #eae4dc;
  --straalKaart: 24px;
  --straalChroom: 12px;
  --raster: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pdf: #ff7a5c;
    --pdfZacht: #3a1c16;
    --word: #84a8ff;
    --wordZacht: #17233c;
    --tekst: #a9bb98;
    --tekstZacht: #232a1e;
    --notitie: #79d3bd;
    --notitieZacht: #122b26;
    --onbekend: #b0a89f;
    --onbekendZacht: #2b2723;
    --bg: #0c0c14;
    --vlak: #15151f;
    --vlakAlt: #1e1e2a;
    --tekst: #f7f1e8;
    --dim: #a8a5a0;
    --stil: #838280;
    --rand: #262633;
    --primair: #a8a9fc;
    --accent: #ffb648;
    --cta: #f7f1e8;
    --opCta: #1e2427;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 28px; font-weight: 400; margin: 4px 0 0; }
h2 { font-size: 20px; font-weight: 400; margin: 0; }
h3 { font-size: 16px; font-weight: 700; margin: 0; }

.kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dim);
}

.stil { color: var(--dim); }
.klein { font-size: 13px; }
.verborgen { display: none !important; }
.duw { flex: 1; }

.midden {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--straalKaart);
  padding: 28px;
}
.smal { width: 100%; max-width: 420px; }

.stap { display: grid; gap: 12px; margin-top: 20px; }

label { font-size: 13px; color: var(--dim); }

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--tekst);
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: var(--straalChroom);
  padding: 11px 14px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--primair);
  outline-offset: 2px;
}
textarea { min-height: 74px; resize: vertical; }

.cijfers {
  font-size: 26px;
  letter-spacing: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/*
  De knop volgt de vorm die Anwar voor de app koos: een afgerond vlak, geen pil.
  Zie src/components/Knop.tsx voor waar die vorm vandaan komt.
*/
.knop {
  font: inherit;
  font-weight: 700;
  color: var(--tekst);
  background: var(--vlakAlt);
  border: 1px solid transparent;
  border-radius: var(--straalChroom);
  padding: 11px 18px;
  cursor: pointer;
  min-height: 44px;
}
.knop:hover { filter: brightness(1.06); }
.knop.vol { background: var(--cta); color: var(--opCta); }
.knop.plat { background: transparent; border-color: var(--rand); }
.knop.gevaar { background: transparent; border-color: var(--rand); color: var(--accent); }
.bestandKnop { display: inline-flex; align-items: center; }

.fout {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--straalChroom);
  border: 1px solid var(--accent);
  color: var(--tekst);
  font-size: 14px;
}

.balk {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 16px;
  max-width: 900px;
  margin: 0 auto;
}
.balkRechts { display: flex; align-items: center; gap: 12px; }

.tabs {
  display: flex;
  gap: var(--raster);
  padding: 0 24px;
  max-width: 900px;
  margin: 0 auto;
  border-bottom: 1px solid var(--rand);
}
.tab {
  font: inherit;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  padding: 10px 4px 12px;
  cursor: pointer;
}
.tab.actief { color: var(--tekst); border-bottom-color: var(--primair); }

.inhoud { max-width: 900px; margin: 0 auto; padding: 24px; }

.rijTussen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 12px;
}
.rijTussen:first-child { margin-top: 0; }

.lijst { display: grid; gap: var(--raster); }

.regel {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--vlakAlt);
  border-radius: var(--straalKaart);
  padding: 16px 20px;
  text-align: left;
  width: 100%;
  border: 0;
  font: inherit;
  color: var(--tekst);
  cursor: pointer;
}
.regel:hover { filter: brightness(1.06); }
.regel .op { flex: 1; min-width: 0; }
.regel .naam { font-weight: 700; }
.regel .onder { font-size: 13px; color: var(--dim); }
.regel .eigen { font-size: 17px; color: var(--dim); }

.venster {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: start center;
  padding: 24px;
  overflow: auto;
}
.vensterKaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--straalKaart);
  padding: 24px;
  width: 100%;
  max-width: 760px;
}
.vensterVoet { display: flex; gap: 12px; align-items: center; margin-top: 24px; }

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.veld { display: grid; gap: 6px; }
.veld.breed { grid-column: 1 / -1; }

/*
  Een aanvinkhokje is geen invoerveld over de volle breedte. Zonder deze regel
  pakt het de `input { width: 100% }` hierboven en staat er een vak van 600
  punten met een vinkje ergens in het midden.
*/
.aanvink {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tekst);
  font-size: 15px;
}
.aanvink input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
  flex: none;
  accent-color: var(--primair);
}

.blok {
  background: var(--vlakAlt);
  border-radius: var(--straalChroom);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.blokKop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

@media (max-width: 560px) {
  .balk { flex-direction: column; align-items: flex-start; }
  .rijTussen { flex-direction: column; align-items: stretch; }
}

/* De QR-code voor de authenticator. Wit vlak eronder, want een QR op een
   donkere ondergrond is voor veel camera's niet te lezen. */
.qrVak {
  background: #ffffff;
  border-radius: var(--straalChroom);
  padding: 16px;
  display: grid;
  place-items: center;
  min-height: 200px;
}
.qrVak img { width: 100%; max-width: 220px; height: auto; display: block; }
.geheim {
  display: block;
  background: var(--vlakAlt);
  border-radius: var(--straalChroom);
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  word-break: break-all;
}
details { margin: 4px 0; }
summary { cursor: pointer; }


/* ── Account ─────────────────────────────────────────────────────
   Een beschrijvingslijst en geen tabel: het zijn drie feiten over één ding,
   geen rijen die je met elkaar vergelijkt. */
.gegevens {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  margin: 4px 0 26px;
  align-items: baseline;
}
.gegevens dt {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.gegevens dd {
  margin: 0;
  font-size: 15px;
}
.kopje {
  font-size: 15px;
  margin: 0 0 12px;
}


/* ── Het bestandsformaat ─────────────────────────────────────────
   Anwar op 3 september 2026: "voeg de icon van het type bestand ook in de
   portal... ook de kleuren icon." Zelfde vorm en zelfde kleur als in de app,
   zodat een pdf er op beide plekken hetzelfde uitziet.

   Het woord blijft naast de kleur staan: kleur alleen is nooit genoeg. */
.formaat {
  flex: none;
  width: 46px;
  height: 52px;
  border-radius: var(--straalChroom);
  /* De kleur komt van de klasse die `formaatVlak()` erbij zet. */
  background: var(--onbekendZacht);
  color: var(--onbekend);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.formaat.pdf { background: var(--pdfZacht); color: var(--pdf); }
.formaat.word { background: var(--wordZacht); color: var(--word); }
.formaat.tekst { background: var(--tekstZacht); color: var(--tekst); }
.formaat svg { width: 20px; height: 20px; }
.formaat span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}


/* ── De accountknop in de kopbalk ────────────────────────────────
   Het adres is geen etiket maar een ingang, dus hij ziet eruit als iets waar
   je op drukt: een rond vlak om het pictogram en de tekst ernaast. */
.accountKnop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--vlak);
  color: var(--dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  max-width: 46vw;
}
.accountKnop:hover { filter: brightness(1.06); }
.accountKnop svg {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 4px;
  border-radius: 999px;
  background: var(--vlakAlt);
  color: var(--primair);
  box-sizing: content-box;
}
.accountKnop span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Het tekstvak van een notitie ────────────────────────────────
   Onder de regel en niet ernaast: een notitie is doorlopende tekst en die
   hoort de volle breedte te krijgen. Naast de knoppen zou hij een kolom van
   een centimeter zijn. */
.notitieVeld {
  width: 100%;
  margin: calc(var(--raster) * -1) 0 var(--raster);
  min-height: 140px;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}