/* ============================================================
   LedenIQ  ·  stijl.css
   Opbouw en typografie in dezelfde vormtaal als de ledenkant,
   maar in de kleuren van LedenIQ.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --donker: #211E1C;
  --zand: #EFECE6;
  --licht: #FAF9F6;
  --kaart: #ffffff;

  --accent: #7E5A6C;        /* werkkleur, leesbaar op wit */
  --accent-licht: #9A6E84;   /* de zachte kleur uit het icoon */
  --accent-zacht: #F3ECF0;
  --tekst: #1C1A17;
  --tekst-zacht: #7C766C;
  --rand: #E3DFD8;
  --fout: #A8434F;
  --goed: #5C7A54;

  --radius: 16px;
  --radius-klein: 10px;
  --schaduw: 0 1px 2px rgba(28,26,23,.04), 0 14px 34px rgba(28,26,23,.06);

  --rooster: #4D6E76;   /* StockIQ-blauw */
  --leden:   #61724D;   /* PdfIQ-groen */
  --geld:    #A05A45;   /* BookIQ-terracotta */
  --beheer:  #8A847A;   /* IQ-grijs */

  --sectie: var(--accent);
  --sectie-zacht: var(--accent-zacht);

  --kop-letter: 'Fraunces', Georgia, serif;
  --tekst-letter: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--tekst-letter);
  -webkit-font-smoothing: antialiased;
  background: var(--zand);
  color: var(--tekst);
  line-height: 1.6;
  font-size: 15.5px;
}

h1, h2, h3 { font-family: var(--kop-letter); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
a { color: var(--accent); }

body.sectie-rooster { --sectie: var(--rooster); --sectie-zacht: #E8F0F5; }
body.sectie-leden   { --sectie: var(--leden);   --sectie-zacht: #EAF2EC; }
body.sectie-geld    { --sectie: var(--geld);    --sectie-zacht: var(--accent-zacht); }
body.sectie-beheer  { --sectie: var(--beheer);  --sectie-zacht: #F0EEEA; }

/* ---------- Inlogkaart ---------- */
body.inlog {
  display: flex; min-height: 100vh;
  align-items: center; justify-content: center; padding: 22px;
  background: var(--donker);
}
.kaart {
  background: var(--licht);
  width: 100%; max-width: 410px;
  padding: 44px 36px;
  border-radius: 18px;
}
.merk { font-family: var(--kop-letter); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; margin: 0; text-align: center; }
.merk .accent { color: var(--accent); }
.subtitel { text-align: center; color: var(--tekst-zacht); margin: 8px 0 28px; font-size: 15px; }

/* ---------- Bovenbalk ---------- */
.topbalk {
  background: var(--donker);
  display: flex; align-items: flex-start; gap: 30px;
  position: sticky; top: 0; z-index: 10;
  padding: 16px 24px;
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-left: calc(24px + env(safe-area-inset-left));
  padding-right: calc(24px + env(safe-area-inset-right));
}
.topbalk .merk {
  font-size: 22px; text-align: left; flex: none; line-height: 1.1;
  margin-top: 11px; color: var(--licht);
}
.topbalk a.merk { text-decoration: none; }
.uitlog {
  margin-left: auto; margin-top: 14px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--licht); opacity: .6;
}
.uitlog:hover { opacity: 1; }

.hoofdnav { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-end; }
.hoofdnav a {
  text-decoration: none;
  font-size: 14px; font-weight: 600;
  padding: 2px 0; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.hoofdnav span.straks { font-size: 14px; font-weight: 600; color: #6E6862; cursor: default; }
.navgroep { display: flex; flex-direction: column; gap: 5px; }
.groeplabel {
  font-size: 10px; text-transform: uppercase; letter-spacing: .16em; font-weight: 600;
}
.groeplinks { display: flex; gap: 16px; flex-wrap: wrap; }

/* elke groep zijn eigen kleur, feller zodra je erop staat */
.groep-rooster .groeplabel { color: #6D8790; }
.groep-rooster a           { color: #8FB0BA; }
.groep-rooster a:hover     { color: #BBDCE6; }
.groep-rooster a.actief    { color: #BBDCE6; border-bottom-color: #BBDCE6; }

.groep-leden .groeplabel { color: #7C8C68; }
.groep-leden a           { color: #A0B487; }
.groep-leden a:hover     { color: #C7DBAD; }
.groep-leden a.actief    { color: #C7DBAD; border-bottom-color: #C7DBAD; }

.groep-geld .groeplabel { color: #A2755F; }
.groep-geld a           { color: #CE977F; }
.groep-geld a:hover     { color: #EFB99E; }
.groep-geld a.actief    { color: #EFB99E; border-bottom-color: #EFB99E; }

.groep-beheer .groeplabel { color: #857F76; }
.groep-beheer a           { color: #ABA59B; }
.groep-beheer a:hover     { color: #D9D3C9; }
.groep-beheer a.actief    { color: #D9D3C9; border-bottom-color: #D9D3C9; }

/* Vandaag is het algemene overzicht, dus neutraal en niet in een groepskleur */
.hoofdnav a.solo { font-weight: 700; color: #BDB7AD; }
.hoofdnav a.solo:hover { color: #FAF9F6; }
.hoofdnav a.solo.actief { color: #FAF9F6; border-bottom-color: #FAF9F6; }

/* ---------- Inhoud ---------- */
.inhoud {
  max-width: 1080px; margin: 0 auto;
  padding: 40px 24px calc(60px + env(safe-area-inset-bottom));
}
.kop { margin-bottom: 28px; }
.kop h1 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; margin: 0 0 8px; }
.kop p { color: var(--tekst-zacht); margin: 0; font-size: 15px; max-width: 62ch; }

.blok {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 26px 28px;
  margin-bottom: 18px;
}
.blok h2 {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  font-family: var(--tekst-letter); color: var(--sectie);
  margin: 0 0 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rand);
}
.blok h3 { font-family: var(--kop-letter); font-size: 19px; }

/* ---------- Kaartjes met cijfers ---------- */
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.cijfer {
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 22px; text-decoration: none; color: inherit; display: block;
  box-shadow: var(--schaduw);
  position: relative; overflow: hidden;
}
.cijfer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sectie);
}
.cijfer .label {
  font-size: 10.5px; color: var(--tekst-zacht); font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em;
}
.cijfer .waarde {
  font-family: var(--kop-letter); font-size: 32px; font-weight: 500;
  letter-spacing: -0.02em; margin-top: 6px; line-height: 1.1;
}
.cijfer .bij { font-size: 12.5px; color: var(--tekst-zacht); margin-top: 4px; }
.cijfer.let-op::before { background: var(--fout); }
.cijfer.let-op .waarde { color: var(--fout); }

/* ---------- Formulieren ---------- */
form.stapel { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600;
        color: var(--tekst-zacht); text-transform: none; }

input, select, textarea {
  padding: 0 14px; height: 48px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  font-size: 15px; font-family: inherit; color: var(--tekst);
  background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 13px 14px; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  border-color: var(--sectie);
  box-shadow: 0 0 0 3px var(--sectie-zacht);
}
input[type="color"] { padding: 5px; }

button, .knop {
  padding: 0 24px; height: 48px;
  background: var(--sectie); color: #fff;
  border: none; border-radius: var(--radius-klein);
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter .15s, transform .05s;
}
button:hover, .knop:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }

.knop-klein {
  height: 36px; padding: 0 14px;
  background: #fff; color: var(--tekst);
  border: 1px solid var(--rand); border-radius: 8px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.knop-klein:hover { border-color: var(--sectie); color: var(--sectie); }
.knop-klein.verwijder { color: var(--fout); }
.knop-klein.verwijder:hover { border-color: var(--fout); color: var(--fout); }

.rij { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.rij > label { flex: 1 1 180px; min-width: 0; }
.acties { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

.melding {
  padding: 14px 18px; border-radius: var(--radius-klein); font-size: 14.5px;
  margin: 0 0 20px; background: var(--licht); border-left: 3px solid var(--sectie);
}
.melding.fout { background: #FBEEEF; border-left-color: var(--fout); color: var(--fout); }
.melding.goed { background: #EDF4EF; border-left-color: var(--goed); color: var(--goed); }

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--tekst-zacht); font-weight: 600; padding: 0 12px 12px 0;
}
td { padding: 14px 12px 14px 0; border-top: 1px solid var(--rand); vertical-align: middle; }
tr:first-child td { border-top: none; }
.leeg {
  color: var(--tekst-zacht); font-size: 14.5px;
  border: 1px dashed var(--rand); border-radius: var(--radius-klein);
  padding: 26px; text-align: center;
}

.tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .06em;
}
.tag.vol { background: #FBEEEF; color: var(--fout); }
.tag.ruimte { background: #EDF4EF; color: var(--goed); }

/* ---------- Smalle schermen ---------- */
@media (max-width: 780px) {
  html, body { overflow-x: hidden; }
  body { font-size: 15px; }
  .topbalk {
    flex-wrap: wrap; gap: 12px 16px; align-items: flex-start;
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-bottom: 16px;
    padding-left: calc(18px + env(safe-area-inset-left));
    padding-right: calc(18px + env(safe-area-inset-right));
  }
  .topbalk .merk { order: 1; margin-top: 0; }
  .uitlog { order: 2; margin-left: auto; margin-top: 4px; }
  .hoofdnav { order: 3; width: 100%; flex-direction: column; align-items: flex-start; gap: 14px; }
  .navgroep { width: 100%; }
  .hoofdnav a, .hoofdnav span.straks { font-size: 15px; }
  .inhoud { padding: 26px 18px calc(50px + env(safe-area-inset-bottom)); }
  .blok { padding: 20px 18px; }
  /* De velden hebben inline een flex-basis voor de breedte op een breed
     scherm. Onder elkaar wordt diezelfde waarde de hoogte, en dat geeft
     grote lege blokken. Daarom hier hard terugzetten. */
  .rij, .zoekrij { flex-direction: column; align-items: stretch; }
  .rij > label, .rij > *,
  .zoekrij > label, .zoekrij > * {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }
  .rij > label[style*="row"], .rij > label[style*="center"] {
    flex-direction: row !important;
    align-items: center !important;
  }

  .blok table, .blok tbody, .blok tr, .blok td { display: block; width: 100%; }
  .blok thead { display: none; }
  .blok tr {
    background: var(--licht); border: 1px solid var(--rand);
    border-left: 3px solid var(--sectie);
    border-radius: var(--radius-klein);
    padding: 6px 14px; margin-bottom: 12px;
  }
  .blok tr:last-child { margin-bottom: 0; }
  .blok td {
    border: none; border-bottom: 1px solid var(--rand); padding: 11px 0;
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
  }
  .blok td:last-child { border-bottom: none; }
  .blok td::before {
    content: attr(data-label);
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
    color: var(--tekst-zacht); flex: 0 0 auto;
  }
  .blok td[data-label=""]::before { display: none; }
  .acties { justify-content: flex-end; }
}

/* ---------- Merk met het IQ-teken ---------- */
.merkblok { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.merkblok .teken { width: 28px; height: 20px; flex: none; color: var(--accent-licht); }
.merkblok .teken svg { width: 100%; height: 100%; display: block; }
.topbalk .merkblok { margin-top: 9px; }
.kaart .merkblok { justify-content: center; margin-bottom: 6px; }
.kaart .merkblok .teken { width: 44px; height: 32px; }

.knop-klein:disabled {
  opacity: .38; cursor: not-allowed;
  border-color: var(--rand); color: var(--tekst-zacht);
}
.knop-klein:disabled:hover { border-color: var(--rand); color: var(--tekst-zacht); }

/* ---------- Uitklapmenu in de balk ---------- */
.navgroep { position: relative; }
.navgroep.uitklap .groeplabel {
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.navgroep.uitklap .groeplabel::after { content: '\25BE'; font-size: 10px; opacity: .7; }
.navgroep.uitklap .groeplabel.actief { color: #D9D3C9; }

.navgroep.uitklap .groeplinks {
  display: none; position: absolute; right: 0; top: calc(100% + 12px);
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--radius-klein); box-shadow: 0 14px 34px rgba(33,30,28,.16);
  padding: 6px 0; z-index: 200; min-width: 180px; white-space: nowrap;
}
.navgroep.uitklap.open .groeplinks { display: block; }

/* in het paneel staat het op wit, dus daar donkere tekst */
.navgroep.uitklap .groeplinks a,
.navgroep.uitklap .groeplinks span.straks {
  display: block; padding: 10px 18px; border-bottom: 0;
  font-size: 14px; font-weight: 500; color: var(--tekst);
}
.navgroep.uitklap .groeplinks a:hover { background: var(--sectie-zacht); color: var(--sectie); }
.navgroep.uitklap .groeplinks a.actief { color: var(--sectie); font-weight: 700; border-bottom: 0; }
.navgroep.uitklap .groeplinks span.straks { color: #B5AFA6; }

@media (max-width: 780px) {
  /* op smal klapt het menu toch al open */
  .navgroep.uitklap .groeplabel { cursor: default; }
  .navgroep.uitklap .groeplabel::after { display: none; }
  .navgroep.uitklap .groeplinks {
    display: flex; position: static; background: transparent;
    border: 0; box-shadow: none; padding: 0; min-width: 0;
    flex-wrap: wrap; gap: 16px;
  }
  .navgroep.uitklap .groeplinks a,
  .navgroep.uitklap .groeplinks span.straks {
    display: inline; padding: 2px 0; font-weight: 600; background: transparent;
  }
  .navgroep.uitklap .groeplinks a { color: #ABA59B; }
  .navgroep.uitklap .groeplinks a:hover,
  .navgroep.uitklap .groeplinks a.actief { color: #D9D3C9; background: transparent; }
  .navgroep.uitklap .groeplinks span.straks { color: #6E6862; }
}

/* ---------- Roostertabellen ----------
   Elke dag is een eigen tabel. Zonder vaste breedtes bepaalt elke tabel
   zijn kolommen op de eigen inhoud, en dan lopen de dagen niet gelijk. */
.roostertabel { table-layout: fixed; }
.roostertabel col.k-tijd        { width: 78px; }
.roostertabel col.k-waar        { width: 260px; }
.roostertabel col.k-bezet       { width: 150px; }
.roostertabel col.k-actie       { width: 130px; }
.roostertabel col.k-actie-breed { width: 380px; }
.roostertabel td { overflow-wrap: anywhere; }
.roostertabel td:last-child { text-align: right; }

@media (max-width: 980px) {
  .roostertabel col.k-waar        { width: 200px; }
  .roostertabel col.k-actie-breed { width: 300px; }
}
@media (max-width: 780px) {
  /* op smal worden de rijen kaartjes, dan gelden de breedtes niet meer */
  .roostertabel { table-layout: auto; }
  .roostertabel colgroup { display: none; }
  .roostertabel td:last-child { text-align: left; }
}

/* ---------- Ledentabel ----------
   Hier geen vaste kolombreedtes: de browser verdeelt zelf, en de knoppen
   houden hun eigen breedte zodat ze nooit onder elkaar vallen. */
.ledentabel { table-layout: auto; width: 100%; }
.ledentabel td:last-child { text-align: right; white-space: nowrap; }
.ledentabel td .acties,
.roostertabel td .acties { flex-wrap: nowrap; white-space: nowrap; }
.ledentabel .acties > *,
.ledentabel .acties form,
.roostertabel .acties > *,
.roostertabel .acties form { flex: 0 0 auto; }

/* ---------- Zoek- en filterbalk ---------- */
.zoekrij {
  display: flex; flex-wrap: wrap;
  gap: 14px; row-gap: 18px;
  align-items: flex-end;
}
.zoekrij > label { flex: 1 1 180px; min-width: 0; }
.zoekrij > label.breed { flex: 2 1 260px; }
.zoekknoppen { display: inline-flex; gap: 8px; align-items: center; flex: 0 0 auto; }

@media (max-width: 780px) {
  .zoekknoppen { width: 100%; }
  .zoekknoppen button, .zoekknoppen .knop-klein { flex: 1 1 auto; }
  .ledentabel td:last-child { text-align: left; }
}

/* Springen naar een blok mag niet onder de plakkende bovenbalk eindigen */
.blok[id], [id] > .kop { scroll-margin-top: 96px; }
@media (max-width: 780px) { .blok[id] { scroll-margin-top: 20px; } }

/* ---------- Vinkjeslijst ---------- */
.vinkjes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px 18px;
}
.vinkje {
  flex-direction: row; align-items: center; gap: 10px;
  font-weight: 500; font-size: 14px; color: var(--tekst);
}
.vinkje input { width: auto; height: auto; flex: none; }
@media (max-width: 620px) { .vinkjes { grid-template-columns: 1fr; } }