/* Huisstijl FOS De Havik, uit het design system "FOS De Havik".
   Kleuren: fos-blauw (navy uit logo en hemd), das-rood voor acties, warm zand als grond. */
:root {
  --surface: #F7F3EC;
  --surface-raised: #FFFFFF;
  --ink: #1A1F2B;
  --ink-muted: #5A6172;
  --line: #E3DCCF;
  --logo-rood: #FF3A3A;
  --das-rood: #C81E1E;
  --on-rood: #FFFFFF;
  --fos-blauw: #000080;
  --on-blauw: #FFFFFF;
  --havik-bruin: #8A5A2B;
  --bos: #2F5D3A;
  /* lichte tinten voor achtergronden van selecties en statussen */
  --blauw-licht: #E6E8F5;
  --bos-licht: #E4EEE6;
  --rood-licht: #FBE7E7;
  --bruin-licht: #F3EADF;

  --font-display: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, "Segoe UI", sans-serif;
  --space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-10: 40px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px;

  font-family: var(--font-sans); color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); font-size: 16px; line-height: 1.45; }
main { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-4) 80px; }
h1, h2 { font-family: var(--font-display); letter-spacing: -.01em; }
h1 { font-size: 2rem; line-height: 1.05; font-weight: 800; margin: 0 0 var(--space-4); }
h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 12px; }

/* kopbalk: logo op wit (nooit op blauw of rood), onderaan een blauwe band */
.balk { display: flex; align-items: center; gap: var(--space-6); padding: 8px var(--space-4); background: var(--surface-raised);
  border-bottom: 4px solid var(--fos-blauw); flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.logo img { height: 64px; width: auto; display: block; }
.logo span { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; line-height: 1.05; }
.logo small { display: block; font-family: var(--font-sans); font-weight: 600; font-size: .75rem; color: var(--ink-muted); }
.balk nav { display: flex; gap: 4px; flex-wrap: wrap; }
.balk nav a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: var(--radius-md); font-weight: 600; }
.balk nav a:hover { background: var(--blauw-licht); }
.balk nav a.actief { background: var(--fos-blauw); color: var(--on-blauw); }
.balk .jaar { margin-left: auto; color: var(--ink-muted); font-size: .9rem; font-weight: 600; }
.balk .wie { color: var(--ink-muted); font-size: .85rem; }
.balk .wie a { color: var(--fos-blauw); }
a.knop { display: inline-block; text-decoration: none; }
kbd { font: .7rem/1 ui-monospace, monospace; padding: 2px 4px; border-radius: 4px; background: var(--blauw-licht); color: var(--ink-muted); }
.balk nav a.actief kbd { background: rgba(255,255,255,.2); color: var(--on-blauw); }

.kaart { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) 20px; margin-bottom: var(--space-4); }
.rij { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--ink-muted); }
input, select { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--ink); min-width: 0; }
input:hover, select:hover { border-color: #CFC6B5; }
input:focus, select:focus { outline: none; border-color: var(--fos-blauw); box-shadow: 0 0 0 2px var(--blauw-licht); }
button:focus-visible, a.knop:focus-visible, .marge:focus-within { outline: 3px solid var(--fos-blauw); outline-offset: 2px; }
button, a.knop { font: inherit; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-md); border: 0;
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; }
button:hover, a.knop:hover { box-shadow: inset 0 0 0 2px var(--ink-muted); }
button.hoofd, a.knop.hoofd { background: var(--das-rood); color: var(--on-rood); box-shadow: none; font-weight: 700; padding: 10px 18px; }
button.hoofd:hover, a.knop.hoofd:hover { background: #A81818; }
button.klein { padding: 5px 10px; font-size: .85rem; border-radius: var(--radius-sm); }
button:disabled { opacity: .5; cursor: default; }

/* keuzegroepen: schakelaar, marge, keuze na termijn */
.schakelaar, .marge { display: inline-flex; border-radius: var(--radius-md); box-shadow: inset 0 0 0 2px var(--line); overflow: hidden; background: var(--surface-raised); }
.schakelaar button, .marge button { box-shadow: none; border-radius: 0; }
.schakelaar button { padding: 9px 18px; }
.marge button { padding: 8px 12px; }
.schakelaar button:hover, .marge button:hover { background: var(--blauw-licht); }
.schakelaar button.aan, .marge button.aan { background: var(--fos-blauw); color: var(--on-blauw); }

/* eigenaar zoeken en suggesties */
.zoekvak { position: relative; flex: 1 1 320px; }
.zoekvak input { width: 100%; }
.zoekvak label { margin-bottom: 6px; }
.keuzelijst { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px; list-style: none;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(26,31,43,.10); }
.keuzelijst li { padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.keuzelijst li.gekozen, .keuzelijst li:hover { background: var(--blauw-licht); }
.keuzelijst small { color: var(--ink-muted); }
.keuzelijst.suggesties { z-index: 20; max-height: 240px; overflow: auto; }
.keuzelijst.suggesties li { padding: 6px 10px; }
.eigenaar-gekozen { display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: var(--blauw-licht); border-radius: var(--radius-md); }

/* artikelrijen */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-weight: 700; padding: 4px 6px; }
td { padding: 4px 6px; vertical-align: middle; }
.artikels input { width: 100%; }
.artikels td.nr { width: 32px; color: var(--ink-muted); text-align: right; font-weight: 600; }
.artikels td.bedrag { width: 110px; }
.artikels td.labelnr { width: 120px; }
.label .nummer.geen { font-size: 18px; }
.artikels .geen-label { display: flex; flex-direction: row; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-muted); margin-top: 2px; white-space: nowrap; }
.artikels .geen-label input { width: auto; margin: 0; }
.artikels td.prijs { width: 90px; font-weight: 700; text-align: right; white-space: nowrap; color: var(--fos-blauw); }
.artikels td.acties { width: 40px; }
.fout-veld { border-color: var(--das-rood) !important; background: var(--rood-licht) !important; }

.hulp { color: var(--ink-muted); font-size: .85rem; margin: 10px 0 0; }
.hulp kbd { margin: 0 2px; }
.acties-onder { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 12px; flex-wrap: wrap; }
.totaal { font-size: 1.05rem; font-weight: 600; }
.label-tekst { font-size: .85rem; font-weight: 600; color: var(--ink-muted); margin-bottom: 6px; }
#keuze button { padding: 8px 14px; }
button.hoofd kbd { background: rgba(255,255,255,.22); color: var(--on-rood); }

/* resultaat na opslaan */
.nummers { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.label { border: 2px dashed var(--fos-blauw); border-radius: var(--radius-md); padding: 12px; text-align: center; background: var(--surface-raised); }
.label .nummer { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: var(--fos-blauw); line-height: 1; }
.label .prijs { font-size: 1.2rem; font-weight: 700; color: var(--das-rood); }

/* lijsten en overzicht */
.lijst td, .lijst th { border-bottom: 1px solid var(--line); padding: 9px 6px; }
.status { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; background: var(--surface); color: var(--ink-muted); }
.status.Te-koop { background: var(--blauw-licht); color: var(--fos-blauw); }
.status.Verkocht { background: var(--bos-licht); color: var(--bos); }
.status.Opgehaald, .status.Gedoneerd { background: var(--bruin-licht); color: var(--havik-bruin); }
.groot-zoek { font-size: 1.4rem; padding: 12px 14px; width: 100%; border-radius: var(--radius-md); }
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: var(--space-4); }
.tegel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; }
.tegel .waarde { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--fos-blauw); }
.tegel .naam { color: var(--ink-muted); font-size: .85rem; font-weight: 600; }
.leeg { color: var(--ink-muted); padding: 12px 0; }

#melding { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--fos-blauw); color: var(--on-blauw);
  padding: 10px 18px; border-radius: var(--radius-md); font-weight: 600; opacity: 0; transition: opacity .2s; pointer-events: none; }
#melding.zichtbaar { opacity: 1; }
#melding.fout { background: var(--das-rood); color: var(--on-rood); }
.verborgen { display: none !important; }
[hidden] { display: none !important; }
/* wat enkel een beheerder ziet; static/app.js zet de klasse "beheerder" na /api/ik */
body:not(.beheerder) [data-beheerder] { display: none !important; }

/* uitleg en voorwaarden */
.uitleg summary { cursor: pointer; list-style: none; }
.uitleg summary::-webkit-details-marker { display: none; }
.uitleg summary h2 { display: inline; }
.uitleg summary::after { content: " ▾"; color: var(--ink-muted); }
.uitleg:not([open]) summary::after { content: " ▸"; }
.uitleg p { margin: 8px 0; }
.feiten { margin: 10px 0; padding-left: 20px; line-height: 1.6; }
.feiten li::marker { color: var(--das-rood); }
.vink { flex-direction: row; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 1rem; font-weight: 400;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; background: var(--surface-raised); }
.vink input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--bos); }
.vink:has(input:checked) { background: var(--bos-licht); border-color: #B8CFBE; }
.vink:focus-within { border-color: var(--fos-blauw); box-shadow: 0 0 0 2px var(--blauw-licht); }
.opslaan-balk { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); }

/* beheer */
.beheer textarea { font: inherit; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); }
.beheer textarea:focus { outline: none; border-color: var(--fos-blauw); box-shadow: 0 0 0 2px var(--blauw-licht); }

@media (max-width: 720px) {
  .logo span { display: none; }
  .artikels thead { display: none; }
  .artikels tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .artikels td { width: auto !important; padding: 0; }
  .artikels td.nr { display: none; }
}

@media print {
  .balk, .kaart:not(.afdruk), #melding, .geen-afdruk { display: none !important; }
  body { background: #fff; }
  .kaart.afdruk { border: 0; padding: 0; }
}

/* vensters voor bewerken */
dialog.venster { border: 0; border-radius: var(--radius-md); padding: 20px 22px; width: min(640px, calc(100vw - 32px));
  background: var(--surface-raised); color: var(--ink); box-shadow: 0 20px 60px rgba(26,31,43,.25); }
dialog.venster::backdrop { background: rgba(26,31,43,.45); }
dialog.venster label { margin: 0; }
dialog.venster label > input, dialog.venster label > select { width: 100%; }
.venster-acties { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
button.gevaar { color: var(--das-rood); box-shadow: inset 0 0 0 2px var(--rood-licht); }
button.gevaar:hover:not(:disabled) { background: var(--rood-licht); }
button.link { box-shadow: none; padding: 0; color: var(--fos-blauw); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
button.link:hover { box-shadow: none; color: var(--das-rood); }
input:disabled { background: var(--surface); color: var(--ink-muted); }

.knoppen { white-space: nowrap; text-align: right; }
.knoppen button { margin-left: 4px; }
.lijst a { color: var(--fos-blauw); font-weight: 600; text-underline-offset: 2px; }
.lijst a:hover { color: var(--das-rood); }

.groot-nummer { font-size: 1.3rem; font-weight: 700; color: var(--fos-blauw); }

.maten { line-height: 1.9; }
.maat-chip { display: inline-block; padding: 1px 8px; margin: 0 4px 2px 0; border-radius: var(--radius-sm); background: var(--blauw-licht); color: var(--fos-blauw); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.maat-chip b { color: var(--das-rood); }

/* ---------- foto-import ---------- */
:root { --oker: #B7791F; --oker-licht: #FDF1D8; }
.foto-kaart summary, #kolommen-kaart summary { cursor: pointer; }
.foto-kaart summary h2, #kolommen-kaart summary h2 { display: inline; }
.foto-vak { margin-top: 12px; overflow: auto; max-height: 45vh; border-radius: var(--radius-sm); }
.foto-vak img { display: block; max-width: 100%; cursor: zoom-in; }
.foto-vak.groot { max-height: 80vh; }
.foto-vak.groot img { max-width: none; width: 200%; cursor: zoom-out; }
.tabel-scroll { overflow-x: auto; }
#ruw select { width: 100%; padding: 4px 6px; font-size: .85rem; }
#ruw td { font-size: .85rem; color: var(--ink-muted); }
.nalees td { padding: 3px 2px; }
.nalees input, .nalees select { width: 100%; padding: 5px 6px; font-size: .9rem; }
.nalees .k-nr { min-width: 78px; } .nalees .k-soort { min-width: 100px; } .nalees .k-artikel { min-width: 120px; }
.nalees .k-maat { min-width: 70px; } .nalees .k-bedrag { min-width: 74px; } .nalees .k-marge { min-width: 70px; }
.nalees .k-status { min-width: 118px; } .nalees .k-uitbetaald { min-width: 72px; } .nalees .k-naam { min-width: 150px; }
.nalees .k-tel { min-width: 120px; } .nalees .k-opm { min-width: 120px; }
.nalees input.laag, .nalees select.laag { border-color: var(--oker); background: var(--oker-licht); }
.nalees input.nakijk, .nalees select.nakijk { border-color: var(--das-rood); background: var(--rood-licht); }
.nalees input.gekoppeld { border-color: var(--bos); background: var(--bos-licht); }
.nalees tr.rij-fout td { background: var(--rood-licht); }
.nalees tr.rij-fout td:first-child { box-shadow: inset 3px 0 0 var(--das-rood); }
.legende { display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm); font-size: .8rem; border: 1px solid; margin-left: 4px; }
.legende.laag { background: var(--oker-licht); border-color: var(--oker); }
.legende.fout { background: var(--rood-licht); border-color: var(--das-rood); }
.legende.gekoppeld { background: var(--bos-licht); border-color: var(--bos); }

/* verkopen: gekozen stuk en voorraad */
.gekozen-stuk { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.gekozen-stuk .nummer { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--fos-blauw); line-height: 1; }
.gekozen-stuk .info { flex: 1 1 200px; }
.gekozen-stuk .naam { font-size: 1.3rem; font-weight: 700; }
.gekozen-stuk .prijs { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--das-rood); }
.gekozen-stuk .knoppen { display: flex; gap: 8px; }
#gekozen { border: 2px solid var(--fos-blauw); }
.voorraad th { width: 160px; text-align: left; vertical-align: top; white-space: nowrap; }
.voorraad td { display: flex; flex-wrap: wrap; gap: 6px; }
.maat-chip { padding: 4px 10px; border-radius: var(--radius-sm); background: var(--blauw-licht); color: var(--fos-blauw);
  border: 1px solid transparent; font-weight: 600; cursor: pointer; }
.maat-chip strong { margin-left: 4px; }
.maat-chip:hover, .maat-chip:focus-visible { border-color: var(--fos-blauw); }
button.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--fos-blauw); cursor: pointer; }
button.link:hover { color: var(--das-rood); }

/* aangemelde gebruiker in de kop */
.aangemeld { color: var(--ink-muted); font-size: .85rem; padding: 0 6px; align-self: center; }

/* klein vinkje onder een veld (geen label) */
.vink-klein { display: flex; flex-direction: row; align-items: center; gap: 4px; margin-top: 4px;
  font-size: .8rem; color: var(--ink-muted); font-weight: 400; }
.vink-klein input, dialog.venster .vink-klein input { width: auto; flex: none; margin: 0; }

/* voorwaarden als één tekst bij Binnenbrengen */
.voorwaarden-tekst { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  padding: 10px 14px; margin-bottom: 12px; }
.voorwaarden-tekst p { margin: 4px 0; }

/* marge als invulveld */
.artikels td.marge-cel { width: 72px; }

/* waarschuwing naast een waarde, bv. een ongeldig IBAN */
.fout-tekst { color: var(--das-rood); font-size: .8rem; font-weight: 700; white-space: nowrap; }

/* verkopen: witte knop per regel, groen na verkoop */
.knop-verkoop { background: #fff; color: var(--fos-blauw); box-shadow: inset 0 0 0 1px var(--line); min-width: 110px;
  white-space: nowrap; }  /* niet afbreken: anders schuift de lijst op na een klik */
.knop-verkoop:hover { box-shadow: inset 0 0 0 2px var(--fos-blauw); }
.knop-verkoop.verkocht { background: var(--bos-licht); color: var(--bos); box-shadow: inset 0 0 0 1px var(--bos); }

/* tegel die naar een ander scherm leidt */
.tegel-link { text-decoration: none; color: inherit; }
.tegel-link:hover, .tegel-link:focus-visible { border-color: var(--fos-blauw); }

/* bedragen en datums niet afbreken */
.geld { white-space: nowrap; }

/* Uitbetalen: eigenaars die vergeten mogen worden */
.kaart-let-op { border-left: 6px solid var(--havik-bruin); background: var(--bruin-licht); }
.kaart-let-op table { background: var(--surface-raised); }
tr.net-klaar td { background: var(--bos-licht); }