/* ── Valerius ledenadministratie — huisstijl brassbandvalerius.nl: donker + goud, Playfair-koppen ── */
:root {
  --blauw: #141417;          /* topbar (site: --colorDark) */
  --blauw-donker: #1d1c21;   /* (site: --colorDarkGrey) */
  --goud: #ffd700;           /* site: --colorMain */
  --goud-donker: #e0bd00;
  --goud-tekst: #8a6d00;     /* goud met voldoende contrast op wit (links) */
  --accent: #8a6d00;
  --accent-hover: #6e5700;
  --font-kop: "Playfair Display", Georgia, "Times New Roman", serif;
  --tekst: #1f2933;
  --gedempt: #6b7280;
  --lijn: #e5e7eb;
  --vlak: #ffffff;
  --achtergrond: #f5f6f8;
  --ok-bg: #e6f4ea; --ok-tekst: #1e7e34;
  --fout-bg: #fdecea; --fout-tekst: #b02a1d;
  --waarschuw-bg: #fff4e5; --waarschuw-tekst: #92400e;
  --radius: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--tekst); background: var(--achtergrond); }
a { color: var(--blauw-donker); text-decoration: underline; text-decoration-color: rgba(20,20,23,.22); text-underline-offset: 2px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
.topbar a, .knop, .terug, .knop-link, h1 a, h2 a, h3 a { text-decoration: none; }
h1 { font-family: var(--font-kop); font-size: 1.6rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: .01em; }
h2 { font-family: var(--font-kop); font-size: 1.2rem; margin: 0 0 .6rem; }
.gedempt { color: var(--gedempt); }
.klein { font-size: .85rem; }

/* Topbar: regel 1 = logo · zoekbalk · gebruiker; regel 2 = hoofdmenu (scrollt horizontaal als het niet past) */
.topbar { background: var(--blauw); color: #fff; border-bottom: 3px solid var(--goud); }
.topbar-inner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; gap: 1rem; min-height: 56px; }
.merk { color: #fff; font-weight: 700; font-size: 1.05rem; white-space: nowrap; display: flex; align-items: center; }
.merk img { height: 38px; width: auto; display: block; }
.merk:hover { text-decoration: none; }
.zoekbalk { flex: 1; display: flex; justify-content: center; margin: 0; }
.zoekbalk input { width: 100%; max-width: 24rem; padding: .4rem .7rem; font: inherit; font-size: .9rem; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
.zoekbalk input::placeholder { color: rgba(255,255,255,.6); }
.zoekbalk input:focus { outline: none; background: rgba(255,255,255,.16); border-color: var(--goud); }
.uitloggen { display: flex; align-items: center; gap: .6rem; margin: 0; white-space: nowrap; }
.gebruikersnaam { color: rgba(255,255,255,.85); font-size: .9rem; }
.topbar .knop-link { color: #fff; }
.hoofdnav { background: var(--blauw-donker); }
.hoofdnav-inner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; display: flex; flex-wrap: nowrap; gap: .1rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hoofdnav-inner::-webkit-scrollbar { display: none; }
.hoofdnav a { color: rgba(255,255,255,.85); padding: .6rem .65rem .55rem; font-size: .92rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.hoofdnav a:hover { color: var(--goud); text-decoration: none; }
.hoofdnav a.actief { color: var(--goud); border-bottom-color: var(--goud); }

/* Inhoud */
.inhoud { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.kop-rij h1 { margin: 0; }
.acties { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.terug { display: inline-block; margin-bottom: .5rem; color: var(--gedempt); }

/* Kaarten / secties */
.kaart, .sectie { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; overflow-x: auto; }
.sectie-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.sectie-kop h2 { margin: 0; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.kaart h2 { display: flex; justify-content: space-between; align-items: baseline; }
.kaart h2 .getal { font-size: 1.4rem; font-weight: 700; color: var(--blauw); font-family: var(--font-kop); }

/* Tabellen */
.tabel-wrap { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; background: var(--vlak); }
.tabel th, .tabel td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel th { font-weight: 600; font-size: .85rem; color: var(--gedempt); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.tabel tr:hover td { background: #fafbfc; }
.tabel td.getal, .tabel th.getal { text-align: right; white-space: nowrap; }
.tabel td.acties-cel { white-space: nowrap; text-align: right; }
.tabel .inactief td { color: var(--gedempt); }
.tabel-in-sectie { margin: .25rem 0 .5rem; }
.leeg { color: var(--gedempt); font-style: italic; padding: .5rem 0; }

/* Formulieren */
.formulier label { display: block; margin-bottom: .8rem; font-size: .9rem; color: var(--gedempt); }
.formulier input, .formulier select, .formulier textarea,
.inline-form input, .inline-form select, .filterbalk input, .filterbalk select {
  display: block; width: 100%; margin-top: .2rem; padding: .45rem .55rem; font: inherit; color: var(--tekst);
  border: 1px solid #cbd2d9; border-radius: var(--radius); background: #fff;
}
.formulier textarea { min-height: 80px; resize: vertical; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus,
.inline-form input:focus, .inline-form select:focus, .filterbalk input:focus, .filterbalk select:focus { outline: 2px solid var(--goud-donker); outline-offset: 0; border-color: var(--goud-donker); }
.formulier .rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
.formulier fieldset { border: 1px solid var(--lijn); border-radius: var(--radius); padding: .5rem 1rem .2rem; margin: 0 0 1rem; }
.formulier legend { color: var(--gedempt); font-size: .85rem; padding: 0 .3rem; }
.formulier .checkbox { display: flex; align-items: center; gap: .5rem; }
.formulier .checkbox input { width: auto; margin: 0; }
.veldfout { display: block; color: var(--fout-tekst); font-size: .85rem; margin-top: .15rem; }
.heeft-fout input, .heeft-fout select { border-color: var(--fout-tekst); }
.formulier-acties { display: flex; gap: .6rem; align-items: center; margin-top: .5rem; }
.inline-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; margin-top: .5rem; padding-top: .6rem; border-top: 1px dashed var(--lijn); }
.inline-form label { font-size: .8rem; color: var(--gedempt); }
.inline-form input, .inline-form select { width: auto; min-width: 8rem; }
.inline-form input[type=date] { min-width: 10rem; }
form.inline { display: inline; }

/* Filterbalk */
.filterbalk { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .8rem; }
.filterbalk label { font-size: .8rem; color: var(--gedempt); }
.filterbalk input, .filterbalk select { width: auto; min-width: 9rem; }
.filterbalk input[type=search] { min-width: 14rem; }

/* Knoppen */
.knop { display: inline-block; padding: .45rem .9rem; font: inherit; font-size: .9rem; border-radius: var(--radius); border: 1px solid #cbd2d9; background: #fff; color: var(--tekst); cursor: pointer; line-height: 1.2; }
.knop:hover { background: #f3f4f6; text-decoration: none; }
.knop-primair { background: var(--goud); border-color: var(--goud-donker); color: var(--blauw); font-weight: 600; }
.knop-primair:hover { background: #f3cd00; }
.knop-klein { padding: .25rem .55rem; font-size: .8rem; }
.knop-gevaar { color: var(--fout-tekst); border-color: #f1b7b0; }
.knop-gevaar:hover { background: var(--fout-bg); }
.knop-link { background: none; border: none; padding: .2rem .3rem; color: var(--accent); cursor: pointer; font: inherit; }
.knop-link:hover { text-decoration: underline; }

/* Meldingen */
.flash { padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; }
.flash-ok { background: var(--ok-bg); color: var(--ok-tekst); }
.flash-fout { background: var(--fout-bg); color: var(--fout-tekst); }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; background: #eef1f5; color: var(--gedempt); }
.badge-ok { background: var(--ok-bg); color: var(--ok-tekst); }
.badge-open { background: var(--waarschuw-bg); color: var(--waarschuw-tekst); }
.badge-inactief { background: #eef1f5; color: var(--gedempt); }

/* Detailkop */
.detail-kop { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.detail-kop h1 { margin-bottom: .3rem; }
.detail-meta { color: var(--gedempt); font-size: .92rem; }
.detail-meta span + span::before { content: " · "; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .5rem 0 0; }
.dl dt { color: var(--gedempt); }
.dl dd { margin: 0; }

/* Vergaderingen */
.vinkraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .2rem .8rem; margin-bottom: .4rem; }
.vinkraster .checkbox { margin: 0; color: var(--tekst); }
.agendapunt { border-top: 1px solid var(--lijn); padding: .8rem 0 .4rem; }
.agendapunt:first-of-type { border-top: none; padding-top: .2rem; }
.agendapunt-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.agendapunt h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.agendapunt .toelichting { margin: .2rem 0 .5rem; }
.subblok { margin: .4rem 0 .4rem 1.2rem; }
.subblok h4 { margin: .4rem 0 .2rem; font-size: .8rem; color: var(--gedempt); text-transform: uppercase; letter-spacing: .02em; }
.sublijst { margin: 0; padding-left: 1.1rem; }
.sublijst li { margin: .15rem 0; }
.sublijst li.afgerond > span:first-child { text-decoration: line-through; color: var(--gedempt); }
.regel-acties { margin-left: .4rem; white-space: nowrap; }
.regel-acties .knop-link { padding: 0 .25rem; }
.inline-bewerk { margin: .3rem 0 .6rem; padding: .6rem .8rem; background: var(--achtergrond); border-radius: var(--radius); }
.inline-bewerk label { margin-bottom: .5rem; }
.toevoegen > summary { cursor: pointer; color: var(--accent); font-size: .85rem; list-style: none; padding: .15rem 0; }
.toevoegen > summary::-webkit-details-marker { display: none; }
.toevoegen > summary:hover { text-decoration: underline; }
.toevoegen[open] > summary { color: var(--gedempt); }
.toevoegen .inline-form { margin-top: .3rem; }
.einddatum { display: inline-flex; gap: .3rem; align-items: center; }
.einddatum input[type=date] { padding: .2rem .35rem; font: inherit; font-size: .85rem; border: 1px solid #cbd2d9; border-radius: var(--radius); background: #fff; }
.acties-cel input[type=date] { padding: .2rem .35rem; font: inherit; font-size: .85rem; border: 1px solid #cbd2d9; border-radius: var(--radius); }
.zoek-sub { margin: .7rem 0 .2rem; font-size: .8rem; color: var(--gedempt); text-transform: uppercase; letter-spacing: .02em; }
.zoek-sub a { text-transform: none; letter-spacing: 0; margin-left: .4rem; }
.nieuw-punt { margin-top: 1rem; padding-top: .8rem; border-top: 2px solid var(--lijn); }
.nieuw-punt h3 { margin: 0 0 .5rem; font-size: .95rem; color: var(--gedempt); }
.verlopen { color: var(--fout-tekst); font-weight: 600; }
.knop[disabled] { opacity: .4; cursor: default; }

/* Login / fout */
.login-kaart, .fout-kaart { max-width: 380px; margin: 3rem auto; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.5rem; }
.login-kaart .knop { width: 100%; margin-top: .3rem; }

@media (max-width: 720px) {
  .topbar-inner { padding: 0 .75rem; gap: .6rem; }
  .zoekbalk input { max-width: none; }
  .gebruikersnaam { display: none; }
  .hoofdnav-inner { padding: 0 .5rem; }
  .hoofdnav a { padding: .55rem .5rem .5rem; font-size: .9rem; }
  .tabel td, .tabel th { white-space: nowrap; }
  .inhoud { padding: 1rem .75rem 2rem; }
  .dl { grid-template-columns: 1fr; }
}