/* Lumidee huisstijl — Winkelassistent-portaal */
:root {
  --zwart: #111111;
  --antraciet: #373736;
  --goud: #A68C5E;
  --knop: #806A45;
  --knop-hover: #6c5939;
  --wit: #ffffff;
  --lichtgrijs: #F6F6F5;
  --lijn: #e3e1dc;
  --tekst: #111111;
  --tekst-zacht: #5c5b58;
  --rood: #a33a2b;
  --groen: #3f6b3a;
  --radius: 6px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-kop: 'Saira', 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--tekst); background: var(--lichtgrijs); }
a { color: var(--knop); }
a:hover { color: var(--zwart); }
h1, h2, h3 { font-family: var(--font-kop); font-weight: 500; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; margin-top: 1.4em; }
h3 { font-size: 1.05rem; }

/* Kop en navigatie */
.kop { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.kop-binnen { max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.kop img { height: 42px; width: auto; display: block; }
.kop .titel { font-family: var(--font-kop); font-size: 1.15rem; color: var(--antraciet); letter-spacing: .02em; }
.kop .gebruiker { margin-left: auto; color: var(--tekst-zacht); font-size: .9rem; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
nav.menu { background: var(--antraciet); }
nav.menu ul { list-style: none; margin: 0 auto; padding: 0 12px; max-width: 1200px; display: flex; flex-wrap: wrap; }
nav.menu a { display: block; padding: 11px 12px; color: var(--wit); text-decoration: none; font-size: .92rem; border-bottom: 3px solid transparent; }
nav.menu a:hover { background: var(--zwart); }
nav.menu a.actief { border-bottom-color: var(--goud); }

main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cijfer { background: var(--wit); border: 1px solid var(--lijn); border-left: 4px solid var(--goud); border-radius: var(--radius); padding: 14px 16px; }
.cijfer .label { color: var(--tekst-zacht); font-size: .85rem; }
.cijfer .waarde { font-family: var(--font-kop); font-size: 1.6rem; font-weight: 500; }
.cijfer .sub { color: var(--tekst-zacht); font-size: .8rem; }

/* Tabellen */
.tabel-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--wit); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-weight: 600; font-size: .85rem; color: var(--antraciet); background: var(--lichtgrijs); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:hover td { background: #fbfaf8; }

/* Formulieren */
form.rij { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
label { display: block; font-size: .85rem; font-weight: 500; color: var(--antraciet); margin-bottom: 4px; }
.veld { margin-bottom: 14px; }
.velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #cfccc5; border-radius: var(--radius); font: inherit; background: var(--wit); color: var(--tekst);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--goud); outline-offset: 0; border-color: var(--goud); }
.hulp { color: var(--tekst-zacht); font-size: .82rem; margin-top: 3px; }
.knop, button { display: inline-block; background: var(--knop); color: var(--wit); border: 0; border-radius: var(--radius); padding: 9px 16px; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; }
.knop:hover, button:hover { background: var(--knop-hover); color: var(--wit); }
.knop.secundair, button.secundair { background: var(--wit); color: var(--antraciet); border: 1px solid #cfccc5; }
.knop.secundair:hover, button.secundair:hover { background: var(--lichtgrijs); color: var(--zwart); }
button.gevaar { background: var(--rood); }
.knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
input[type=checkbox] { accent-color: var(--knop); width: 16px; height: 16px; vertical-align: middle; }

/* Meldingen en labels */
.melding { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid var(--lijn); background: var(--wit); }
.melding.ok { border-left: 4px solid var(--groen); }
.melding.fout { border-left: 4px solid var(--rood); }
.melding.let-op { border-left: 4px solid var(--goud); }
.label-pil { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--lichtgrijs); color: var(--antraciet); border: 1px solid var(--lijn); white-space: nowrap; }
.label-pil.goud { background: #f3ede2; border-color: #e2d6bf; color: #6c5939; }
.label-pil.groen { background: #e9f0e7; border-color: #cfdccb; color: var(--groen); }
.label-pil.rood { background: #f6e6e3; border-color: #e8cbc6; color: var(--rood); }
.zacht { color: var(--tekst-zacht); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
pre { background: var(--lichtgrijs); padding: 10px; border-radius: var(--radius); overflow-x: auto; white-space: pre-wrap; }

/* Transcript */
.beurt { padding: 8px 12px; border-radius: var(--radius); margin: 6px 0; max-width: 80%; }
.beurt.medewerker { background: var(--lichtgrijs); }
.beurt.assistent { background: #f3ede2; margin-left: auto; }
.beurt.functie { background: var(--wit); border: 1px dashed var(--lijn); font-size: .8rem; color: var(--tekst-zacht); max-width: 100%; }
.beurt.systeem { background: var(--wit); border-left: 3px solid var(--goud); font-size: .8rem; color: var(--tekst-zacht); max-width: 100%; }
.beurt .meta { font-size: .75rem; color: var(--tekst-zacht); }

/* Inlog */
.inlog { max-width: 380px; margin: 8vh auto; }
.inlog img { width: 180px; display: block; margin: 0 auto 24px; }

/* Testconsole */
.console-status { display: flex; gap: 10px; align-items: center; }
.stip { width: 10px; height: 10px; border-radius: 50%; background: #c9c6bf; display: inline-block; }
.stip.aan { background: var(--groen); }
.stip.spreekt { background: var(--goud); }
#transcript { min-height: 240px; max-height: 480px; overflow-y: auto; }

@media (max-width: 640px) {
  .kop img { height: 34px; }
  .beurt { max-width: 100%; }
  main { padding: 16px 12px 40px; }
}