/* ═══════════════════════════════════════════════════════════
   AITOMATIE — app.css
   De ingelogde omgeving: inloggen, registreren en de klantapplicatie.

   Bewust LOS van styles.css. De marketingsite is een brochure die mag
   schitteren; dit is gereedschap dat een vakman op een telefoon in de bus
   gebruikt. Andere eisen: grotere raakvlakken, minder beweging, hogere
   informatiedichtheid, en niets dat afleidt.

   Dezelfde ontwerptaal (kleuren, ronding, typografie) zodat het één product
   blijft, maar geen enkele regel gedeeld — de site kan veranderen zonder de
   applicatie te breken en andersom.
═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0a0a0f;
  --bg-elev: #111118;
  --bg-card: #14141c;
  --bg-hover: #1a1a25;
  --border: #252535;
  --border-soft: #1c1c2a;
  --text: #f0f0f8;
  --text-2: #9090aa;
  --text-3: #55556a;
  --accent: #6c63ff;
  --accent-hover: #7c73ff;
  --accent-soft: rgba(108, 99, 255, 0.14);
  --ok: #22c55e;
  --ok-soft: rgba(34, 197, 94, 0.12);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --shadow: 0 1px 3px rgba(0,0,0,.5), 0 8px 32px rgba(0,0,0,.3);
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 .75rem; font-weight: 700; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--text-2); font-size: .8125rem; }

/* ── Formulieren ─────────────────────────────────────────── */
label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .375rem; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=time], input[type=url], input[type=color], select, textarea {
  width: 100%;
  padding: .7rem .8rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;      /* 16px: kleiner laat iOS bij focus inzoomen */
  transition: border-color 150ms ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=color] { padding: .25rem; height: 2.75rem; }
textarea { min-height: 6rem; resize: vertical; }
.veld { margin-bottom: 1rem; }
.veld-hint { display: block; margin-top: .3rem; color: var(--text-2); font-size: .8125rem; font-weight: 400; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
fieldset { border: 0; padding: 0; margin: 0; }

.keuze { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: .9375rem; }
.keuze input { width: auto; margin-top: .25rem; flex: none; }

/* ── Knoppen ─────────────────────────────────────────────── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--accent);
  color: #fff;
  font: inherit; font-weight: 600; font-size: .9375rem;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
  min-height: 2.75rem;   /* raakvlak op een telefoon */
}
.knop:hover:not(:disabled) { background: var(--accent-hover); text-decoration: none; }
.knop:disabled { opacity: .55; cursor: not-allowed; }
.knop--stil { background: transparent; border-color: var(--border); color: var(--text); }
.knop--stil:hover:not(:disabled) { background: var(--bg-hover); }
.knop--gevaar { background: transparent; border-color: var(--danger); color: var(--danger); }
.knop--gevaar:hover:not(:disabled) { background: var(--danger-soft); }
.knop--klein { padding: .4rem .7rem; min-height: 2.1rem; font-size: .8125rem; }
.knop--breed { width: 100%; }

/* ── Meldingen ───────────────────────────────────────────── */
.melding {
  padding: .8rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  font-size: .9375rem;
  margin-bottom: 1rem;
}
.melding--fout { border-color: rgba(239,68,68,.4); background: var(--danger-soft); }
.melding--ok { border-color: rgba(34,197,94,.4); background: var(--ok-soft); }
.melding--let-op { border-color: rgba(245,158,11,.4); background: var(--warn-soft); }
.melding[hidden] { display: none; }

/* ── Inlog- en registratiepagina's ───────────────────────── */
.toegang {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}
.toegang__kaart {
  width: 100%; max-width: 26rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
}
.toegang__merk {
  display: block; text-align: center; margin-bottom: 1.5rem;
  font-weight: 700; font-size: 1.125rem; color: var(--text);
}
.toegang__merk:hover { text-decoration: none; }
.toegang__voet { margin-top: 1.25rem; text-align: center; font-size: .875rem; color: var(--text-2); }
.toegang__vertrouwen {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-soft);
  font-size: .8125rem; color: var(--text-3); text-align: center;
}

/* ── Applicatieraamwerk ──────────────────────────────────── */
.app { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }

.zijbalk {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: 1.25rem 1rem;
  display: flex; flex-direction: column; gap: .25rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.zijbalk__merk { font-weight: 700; font-size: 1.0625rem; margin-bottom: 1.25rem; color: var(--text); }
.zijbalk__merk:hover { text-decoration: none; }
.zijbalk__bedrijf { font-size: .8125rem; color: var(--text-2); font-weight: 400; display: block; }
.zijbalk a.menu {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: var(--r-sm);
  color: var(--text-2); font-size: .9375rem; font-weight: 500;
}
.zijbalk a.menu:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.zijbalk a.menu[aria-current=page] { background: var(--accent-soft); color: var(--text); }
.zijbalk__scheiding { margin: .75rem 0 .25rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 700; }
.zijbalk__onder { margin-top: auto; padding-top: 1rem; }

.werkblad { padding: 1.5rem 1.75rem 4rem; max-width: 62rem; }
.werkblad__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.werkblad__kop p { color: var(--text-2); font-size: .9375rem; }

/* ── Kaarten en lijsten ──────────────────────────────────── */
.kaart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.kaart__kop h2, .kaart__kop h3 { margin: 0; }

.rooster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.cijfer { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.cijfer__label { color: var(--text-2); font-size: .8125rem; }

.lijst { list-style: none; padding: 0; margin: 0; }
.lijst > li {
  padding: .8rem 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap;
}
.lijst > li:last-child { border-bottom: 0; }
.lijst__hoofd { flex: 1 1 16rem; min-width: 0; }
.lijst__titel { font-weight: 600; }
.lijst__sub { color: var(--text-2); font-size: .8125rem; }
.lijst__acties { display: flex; gap: .4rem; flex-wrap: wrap; }

.merkje {
  display: inline-block; padding: .15rem .5rem; border-radius: var(--r-full, 9999px);
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--bg-hover); color: var(--text-2); border: 1px solid var(--border);
}
.merkje--ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.merkje--let-op { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.merkje--fout { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.merkje--test { background: var(--accent-soft); color: var(--accent-hover); border-color: transparent; }

.leeg { color: var(--text-2); text-align: center; padding: 2rem 1rem; }

/* ── Aan de slag ─────────────────────────────────────────── */
.stap { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--border-soft); }
.stap:last-child { border-bottom: 0; }
.stap__vink {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 2px solid var(--border); display: grid; place-items: center;
  font-size: .75rem; margin-top: .1rem;
}
.stap--klaar .stap__vink { background: var(--ok); border-color: var(--ok); color: #04140a; }
.stap--klaar .stap__titel { color: var(--text-2); text-decoration: line-through; }

/* ── Zandbakbalk ─────────────────────────────────────────── */
.zandbak {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
  border: 1px solid rgba(108,99,255,.35);
  border-radius: var(--r-lg);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.zandbak__tekst { flex: 1 1 20rem; }
.zandbak__titel { font-weight: 700; margin-bottom: .15rem; }
.zandbak__uitleg { color: var(--text-2); font-size: .875rem; }

/* ── Supportbalk (meekijken) ─────────────────────────────── */
.supportbalk {
  position: sticky; top: 0; z-index: 50;
  background: var(--danger); color: #fff;
  padding: .5rem 1rem; font-size: .875rem; font-weight: 600; text-align: center;
}

/* ── Diensten ────────────────────────────────────────────── */
.dienst { display: flex; flex-direction: column; height: 100%; }
.dienst__prijs { font-size: 1.5rem; font-weight: 700; }
.dienst__prijs span { font-size: .875rem; font-weight: 400; color: var(--text-2); }
.dienst__levert { list-style: none; padding: 0; margin: .75rem 0; font-size: .875rem; }
.dienst__levert li { padding-left: 1.2rem; position: relative; margin-bottom: .3rem; color: var(--text-2); }
.dienst__levert li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.dienst__voet { margin-top: auto; padding-top: .75rem; }

/* ── Tabellen (agenda, aanvragen) ────────────────────────── */
.tabelhouder { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Uitgavenoverzicht in Diensten. */
.uitgaven__tabel { width: 100%; margin: 0 0 12px; }
.uitgaven__tabel .rechts { text-align: right; white-space: nowrap; }
.uitgaven__totaal {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--rand, #e6e8ee); padding-top: 12px; margin: 0;
  font-size: 1rem;
}
.uitgaven__totaal strong { font-size: 1.35rem; }
table.net { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 34rem; }
table.net th, table.net td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.net th { color: var(--text-2); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }

/* ── Lade (detail) ───────────────────────────────────────── */
dialog.lade {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  border-radius: var(--r-lg); padding: 1.5rem; max-width: 40rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow);
}
dialog.lade::backdrop { background: rgba(0,0,0,.65); }

/* ── Laden ───────────────────────────────────────────────── */
.laden { color: var(--text-2); padding: 2rem 0; text-align: center; }
.laden::after { content: '…'; }

/* ── Toegankelijkheid ────────────────────────────────────── */
.alleen-schermlezer {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Telefoon ────────────────────────────────────────────── */
@media (max-width: 52rem) {
  .app { grid-template-columns: 1fr; }
  .zijbalk {
    position: static; height: auto; flex-direction: row; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--border); padding: .6rem .75rem; gap: .35rem;
  }
  .zijbalk__merk, .zijbalk__scheiding, .zijbalk__onder { display: none; }
  .zijbalk a.menu { white-space: nowrap; padding: .5rem .65rem; }
  .werkblad { padding: 1rem 1rem 4rem; }
  .veld-rij { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Vragenbouwer ───────────────────────────────────────────────────────────
   Hiervoor was dit één textarea waarin je "vraag | type" moest typen. Een vakman
   kent die schrijfwijze niet, en hij zag pas wat het werd als een klant het
   formulier invulde. Nu: rijen die je aanklikt, en een voorbeeld ernaast.        */

.suggesties { margin: 0 0 1rem; line-height: 2.1; }
.suggesties__kop { font-size: .85rem; color: var(--text-2); margin-right: .25rem; }

.suggestie {
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .85rem;
  cursor: pointer;
}
.suggestie:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }

.vraaglijst { display: flex; flex-direction: column; gap: .6rem; }
.vraaglijst__leeg { color: var(--text-2); font-size: .9rem; margin: .25rem 0 0; }

.vraagrij {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem;
  background: var(--bg-elev);
}
.vraagrij__hoofd { display: flex; gap: .5rem; }
.vraagrij__hoofd input { flex: 1 1 auto; min-width: 0; }
.vraagrij__hoofd select { flex: 0 0 auto; width: auto; }
.vraagrij__opties { margin-top: .5rem; width: 100%; }

.vraagrij__voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .5rem;
}
.vraagrij__vink {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: var(--text-2);
  margin: 0;
}
.vraagrij__vink input { width: auto; margin: 0; }

.vraagrij__knoppen { display: flex; gap: .3rem; }
.vraagrij__knoppen button {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  font-size: .8rem;
  padding: .25rem .5rem;
  cursor: pointer;
}
.vraagrij__knoppen button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.vraagrij__knoppen button:disabled { opacity: .35; cursor: default; }

/* Het voorbeeld. Bewust uitgeschakelde velden: het is een afbeelding van het
   resultaat, geen tweede formulier waarin je per ongeluk gaat typen.            */
.voorbeeldblok { margin-top: 1.25rem; }
.voorbeeldblok h3 { font-size: .95rem; margin: 0 0 .5rem; }

.voorbeeld {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .9rem;
  background: var(--bg);
}
.voorbeeld__leeg { color: var(--text-2); font-size: .9rem; margin: 0; }
.voorbeeld__veld { margin-bottom: .7rem; }
.voorbeeld__veld:last-child { margin-bottom: 0; }
.voorbeeld__veld label {
  display: block;
  font-size: .85rem;
  margin-bottom: .2rem;
  color: var(--text);
}
.voorbeeld__veld input,
.voorbeeld__veld select,
.voorbeeld__veld textarea {
  width: 100%;
  background: var(--bg-elev);
  color: var(--text-2);
  cursor: default;
}
.voorbeeld__ster { color: var(--danger); }

@media (max-width: 560px) {
  .vraagrij__hoofd { flex-direction: column; }
  .vraagrij__hoofd select { width: 100%; }
}