/* FinanciënAB — wit, zwart, bruin (#5D4037), crème (#F5F0E6), goud (#C9A227) */

:root {
  --bruin: #5D4037;
  --bruin-donker: #3E2723;
  --bruin-licht: #8D6E63;
  --creme: #F5F0E6;
  --creme-donker: #E8DFCC;
  --goud: #C9A227;
  --groen: #1B7F3B;
  --rood: #B3261E;
  --rand: #E3DACB;
  --kop-hoogte: 56px;
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #000000;
  overscroll-behavior-y: contain;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--kop-hoogte) + env(safe-area-inset-top));
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-user-select: none;
  user-select: none;
}

input, textarea, select { -webkit-user-select: text; user-select: text; }

.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  vertical-align: middle;
}

/* ---------------- Kop ---------------- */
.kop {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: #ffffff;
  border-bottom: 1px solid var(--rand);
  padding-top: env(safe-area-inset-top);
}
.kop-binnen {
  height: var(--kop-hoogte);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  max-width: 760px;
  margin: 0 auto;
}
.kop-links { justify-self: start; }
.kop-rechts { justify-self: end; }
.kop-titel {
  font-weight: 700;
  font-size: 17px;
  color: var(--bruin);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.terug-knop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--creme);
  color: var(--bruin);
  font-weight: 600;
  font-size: 14px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  text-decoration: none;
}
.terug-knop:active { background: var(--creme-donker); }

/* ---------------- Logo ---------------- */
.logo { display: inline-block; width: 36px; height: 36px; }
.logo svg { width: 100%; height: 100%; display: block; border-radius: 10px; }
.logo.groot { width: 104px; height: 104px; }
.logo.groot svg { border-radius: 26px; }

/* ---------------- Inhoud ---------------- */
.inhoud {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 14px 8px;
}

.kaart {
  background: #ffffff;
  border: 1px solid var(--rand);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
}

.blok-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bruin);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 4px 0 10px;
}
.blok-titel .material-symbols-rounded { font-size: 26px; }

.menu-blok { margin-bottom: 18px; }

.menu-knop {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--creme);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 14px 14px;
  margin-bottom: 8px;
  color: #000;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}
.menu-knop:active { background: var(--creme-donker); transform: scale(.995); }
.menu-knop .material-symbols-rounded { color: var(--bruin); font-size: 24px; }
.menu-knop .pijl { margin-left: auto; color: var(--bruin-licht); font-size: 20px; }
.menu-knop .bedrag { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.scheiding {
  width: 120px;
  height: 2px;
  background: var(--bruin);
  opacity: .35;
  border-radius: 2px;
  margin: 26px auto;
}

.waarschuwing-blok {
  background: #FBEDEB;
  border: 1px solid #E7C3BE;
  color: var(--rood);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* ---------------- Formulieren ---------------- */
.veld { margin-bottom: 14px; }
.veld-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--bruin);
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.invoer, .zoek-invoer, textarea.invoer, select.invoer {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid var(--rand);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  color: #000;
  font-family: inherit;
  outline: none;
}
.invoer:focus, .zoek-invoer:focus { border-color: var(--bruin); }
.invoer::placeholder { color: #A9A099; }
.invoer-hulp { font-size: 12px; color: var(--bruin-licht); margin-top: 5px; }

.knop-hoofd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--bruin);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  font-family: inherit;
}
.knop-hoofd:active { background: var(--bruin-donker); }
.knop-hoofd:disabled { opacity: .55; }

.knop-tweede {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--creme);
  color: var(--bruin);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.knop-tweede:active { background: var(--creme-donker); }
.knop-tweede.gevaar { color: var(--rood); border-color: #E7C3BE; background: #FBEDEB; }

.knop-rij { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Zoekselect ---------------- */
.zoekselect { position: relative; }
.zoekselect .zoek-doos {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--rand);
  border-radius: 12px;
  background: #fff;
  padding: 0 12px;
}
.zoekselect .zoek-doos .material-symbols-rounded { color: var(--bruin-licht); font-size: 20px; }
.zoekselect .zoek-invoer { border: none; padding: 12px 0; }
.zoekselect.open .zoek-doos { border-color: var(--bruin); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.zoeklijst {
  position: absolute;
  z-index: 30;
  left: 0; right: 0; top: 100%;
  background: #fff;
  border: 1.5px solid var(--bruin);
  border-top: none;
  border-radius: 0 0 12px 12px;
  max-height: 240px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}
.zoekselect.open .zoeklijst { display: block; }
.zoekrij {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid #F1EBE0;
  cursor: pointer;
  font-size: 15px;
}
.zoekrij:last-child { border-bottom: none; }
.zoekrij:active { background: var(--creme); }
.zoekrij .code { font-size: 12px; color: var(--bruin-licht); font-weight: 700; min-width: 40px; }
.zoekrij.goud .naam { color: var(--goud); font-weight: 700; }
.zoekrij.leeg { color: var(--bruin-licht); font-style: italic; cursor: default; }
.gekozen-vlag {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--groen);
  font-weight: 600;
}
.gekozen-vlag.zichtbaar { display: flex; }

/* ---------------- Lijsten ---------------- */
.lijst-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  margin-bottom: 8px;
  background: #fff;
  text-decoration: none;
  color: #000;
}
.lijst-rij .code { font-size: 12px; font-weight: 700; color: var(--bruin-licht); min-width: 42px; }
.lijst-rij .naam { font-weight: 600; }
.lijst-rij .naam.goud { color: var(--goud); font-weight: 800; }
.lijst-rij .bedrag { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.totaalbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--creme);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 14px;
  font-weight: 800;
  margin-top: 10px;
}
.groen { color: var(--groen); }
.rood { color: var(--rood); }
.bruin { color: var(--bruin); }
.goud { color: var(--goud); }

.leeg-melding {
  text-align: center;
  color: var(--bruin-licht);
  padding: 28px 10px;
  font-style: italic;
}

/* ---------------- Geschiedenis ---------------- */
.gesch-rij {
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
}
.gesch-rij.geannuleerd { background: #FAF7F4; opacity: .72; }
.gesch-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gesch-soort {
  font-weight: 800; color: var(--bruin); font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.gesch-datum { margin-left: auto; font-size: 12px; color: var(--bruin-licht); white-space: nowrap; }
.gesch-regel { font-size: 14px; margin: 2px 0; }
.gesch-regel .label { color: var(--bruin-licht); font-size: 12px; margin-right: 4px; }
.gesch-bedrag { font-weight: 800; font-variant-numeric: tabular-nums; }
.gesch-knoppen { display: flex; gap: 8px; margin-top: 10px; }
.gesch-knoppen .knop-tweede { flex: 1; }
.merk {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px;
}
.merk.rood { background: #FBEDEB; color: var(--rood); }
.merk.creme { background: var(--creme); color: var(--bruin); }

/* ---------------- Popup ---------------- */
.popup-laag {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(30, 20, 15, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.popup-laag[hidden] { display: none; }
.popup {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 26px 20px 20px;
  width: 100%;
  max-width: 420px;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  text-align: center;
  animation: popIn .16s ease-out;
}
@keyframes popIn { from { transform: scale(.94); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.popup-sluit {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--creme);
  color: var(--bruin);
  font-size: 15px; font-weight: 700;
  cursor: pointer; line-height: 1;
}
.popup-sluit:active { background: var(--creme-donker); }
.popup-icoon .material-symbols-rounded {
  font-size: 44px; color: var(--bruin);
  background: var(--creme);
  border-radius: 999px;
  padding: 10px;
}
.popup-icoon.waarschuwing .material-symbols-rounded { color: var(--rood); background: #FBEDEB; }
.popup-icoon.gelukt .material-symbols-rounded { color: var(--groen); background: #E9F5EC; }
.popup-titel { font-size: 19px; font-weight: 800; color: var(--bruin); margin: 12px 0 8px; }
.popup-titel.waarschuwing { color: var(--rood); }
.popup-tekst { font-size: 15px; line-height: 1.5; color: #000; margin: 0 0 8px; white-space: pre-line; }
.popup-knoppen { display: flex; gap: 10px; margin-top: 16px; }
.popup-knoppen button { flex: 1; }
.backup-laag { z-index: 95; }

/* ---------------- Bezig ---------------- */
.bezig-laag {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
}
.bezig-laag[hidden] { display: none; }
.bezig-draai {
  width: 40px; height: 40px;
  border: 4px solid var(--creme-donker);
  border-top-color: var(--bruin);
  border-radius: 50%;
  animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg) } }

/* ---------------- Pull to refresh ---------------- */
.ververs-balk {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 6px);
  left: 50%;
  z-index: 60;
  transform: translate(-50%, -70px);
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--bruin);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s linear;
}
.ververs-balk.draait .material-symbols-rounded { animation: draai .8s linear infinite; }

/* ---------------- Voet ---------------- */
.voet {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 14px calc(26px + env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--rand);
  margin-top: 20px;
}
.apk-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bruin);
  color: #fff;
  border-radius: 14px;
  padding: 13px 22px;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
}
.apk-knop:active { background: var(--bruin-donker); }
.meld-knop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 12px;
  max-width: 420px;
  background: #FBEDEB;
  color: var(--rood);
  border: 1px solid #E7C3BE;
  border-radius: 14px;
  padding: 12px 22px;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
}
.meld-knop:active { background: #F5DAD6; }

.voet-regel { margin-top: 10px; font-size: 13px; color: var(--bruin-licht); }
.uitlog-knop {
  background: none; border: none; padding: 0;
  color: var(--bruin); font-weight: 700; text-decoration: underline;
  cursor: pointer; font-family: inherit; font-size: 13px;
}

/* ---------------- Inloggen ---------------- */
.inlog-vlak {
  min-height: 78vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px 6px;
}
.inlog-titel { font-size: 26px; font-weight: 800; color: var(--bruin); margin: 16px 0 4px; }
.inlog-onder { color: var(--bruin-licht); font-size: 14px; margin-bottom: 24px; }
.inlog-kaart { width: 100%; max-width: 380px; }

/* ---------------- Tabellen ---------------- */
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th {
  background: var(--creme); color: var(--bruin);
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--rand);
}
.tabel td { padding: 9px 8px; border-bottom: 1px solid #F1EBE0; }
.tabel tr:last-child td { border-bottom: none; }
.tabel .rechts { text-align: right; font-variant-numeric: tabular-nums; }

.chip-rij { display: flex; gap: 8px; margin-bottom: 12px; }
.chip {
  flex: 1;
  text-align: center;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: #fff;
  color: var(--bruin);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.chip.actief { background: var(--bruin); color: #fff; border-color: var(--bruin); }

.regel-doos {
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--creme);
}
.regel-doos .weg {
  float: right; background: none; border: none; color: var(--rood);
  font-weight: 800; cursor: pointer; font-size: 16px;
}