/* =====================================================================
   KantineTab: eigen accentkleur voor teams (groepstype "Team of club").
   html.kt wordt gezet in includes/head.php (de groep in de adresbalk is een
   team) en server-side op team.php en team-start.php.
   Alles wat var(--primary) gebruikt, kleurt zo vanzelf mee.
   ===================================================================== */

html.kt {
  --primary: #1F8A4C;
  --accent: #7CC99A;
  --bg: #F0F8F2;
  --kt-zacht: #E1F2E7;
  --kt-rand: #B9DEC6;
  --kt-tekst-zacht: #4F7A60;
}

/* ---------- Thuisscherm en teampagina's ---------- */
.kt-kop { margin-bottom: 0.2em; }
.kt-sub { color: var(--kt-tekst-zacht, #777); font-size: 0.9em; margin: -0.4em 0 1em; }

.kt-kaart {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  padding: 1em;
  margin-bottom: 1em;
}
.kt-kaart h2 { font-size: 1.05em; margin: 0 0 0.6em; }
.kt-kaart p { margin: 0.3em 0; }
.kt-uitleg { color: #777; font-size: 0.85em; line-height: 1.4; }

.kt-knoppen { display: flex; gap: 8px; margin-top: 0.8em; }
.kt-knoppen > * { flex: 1 1 0; }
.kt-knop-licht {
  background: var(--kt-zacht, #eee) !important;
  color: var(--primary) !important;
  border: 1.5px solid var(--kt-rand, #ddd) !important;
}

.kt-rij {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.55em 0; border-bottom: 1px solid #f0f0f0; gap: 0.6em;
}
.kt-rij:last-child { border-bottom: none; }
.kt-rij .kt-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-rij.is-mij .kt-naam { font-weight: 700; }
.kt-plus { color: var(--primary); font-weight: 600; }
.kt-min { color: #C0392B; font-weight: 600; }
.kt-nul { color: #999; }
.kt-label {
  display: inline-block; font-size: 0.72em; padding: 0.15em 0.5em; border-radius: 99px;
  background: var(--kt-zacht, #eee); color: var(--kt-tekst-zacht, #666); margin-left: 0.4em; vertical-align: middle;
}

.kt-melding {
  background: #FFF8E6; border: 1.5px solid #F2D27A; border-radius: 12px;
  padding: 0.7em 0.9em; margin-bottom: 0.8em; line-height: 1.45;
}
.kt-melding .kt-knoppen { margin-top: 0.6em; }
.kt-fout {
  background: #FDECEA; border: 1.5px solid #F5B7B1; color: #922B21;
  border-radius: 12px; padding: 0.7em 0.9em; margin-bottom: 1em;
}
.kt-ok {
  background: var(--kt-zacht, #eef); border: 1.5px solid var(--kt-rand, #ccd);
  border-radius: 12px; padding: 0.7em 0.9em; margin-bottom: 1em;
}

.kt-veld { margin-bottom: 0.8em; }
.kt-veld label { display: block; font-size: 0.85em; font-weight: 600; margin-bottom: 0.3em; }
.kt-veld input[type="text"], .kt-veld input[type="number"], .kt-veld select {
  width: 100%; box-sizing: border-box; font-size: 1em; padding: 0.65em 0.8em;
  border: 1.5px solid #ddd; border-radius: 10px; background: #fff;
}

.kt-tabs { display: flex; gap: 8px; margin-bottom: 0.8em; }
.kt-tabs button {
  flex: 1 1 0; min-height: var(--knop-hoogte, 55px); border-radius: 12px; font-size: 0.9em; font-weight: 600;
  border: 1.5px solid var(--kt-rand, #ddd); background: #fff; color: #555; cursor: pointer;
}
.kt-tabs button.actief { background: var(--primary); border-color: var(--primary); color: #fff; }

.kt-rondje-regel { font-size: 0.88em; }
.kt-rondje-regel .kt-wanneer { color: #999; font-size: 0.85em; }

/* ---------- Mijn groepen: blok "Je teams" ---------- */
/* Mijn groepen blijft FestiDrinkz; een team herken je aan het groene label en je stand in kleur */
.kt-blok-kop { font-size: 1em; margin: 0.6em 0 0; color: var(--text); }
.group-card .kt-type-pil { background: #E1F2E7; color: #1F6B3E; border-radius: 99px; padding: .15em .6em; font-size: .9em; font-weight: 600; }
.group-card .kt-stand { font-weight: 600; }
.group-card .kt-stand-plus { color: #1a7f37; }
.group-card .kt-stand-min { color: #c62828; }
.group-card .kt-stip {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #E67E22; margin-left: 0.35em; vertical-align: middle;
}

/* ---------- Startpagina: eerst Op pad of Team of club (zelfde knoppen als de types) ---------- */
/* Knoppen op de startpagina in het lettertype van de app (standaard pakt een knop Arial) */
body.start-page .type-keuze button { font-family: inherit; }
.type-keuze.kt-ingang button { padding: 1.3em 0.5em; font-size: 1em; }
.kt-ingang .type-emoji { font-size: 1.6em !important; margin-bottom: 0.3em !important; }
.kt-ingang .kt-type-sub { display: block; font-size: 0.78em; font-weight: 400; margin-top: 0.35em; opacity: 0.85; }
.type-keuze.kt-ingang button.kt-ingang-team { border-color: #1F8A4C; color: #1F8A4C; background: #F4FBF6; }

/* ---------- Knoppen met een tweede regel, invoer naast een knop ---------- */
.kt-knoppen .full-width-btn { flex-direction: column; line-height: 1.2; padding: 0.55em 0.6em; }
.kt-knop-sub { display: block; font-size: 0.78em; font-weight: 400; opacity: 0.85; margin-top: 0.15em; }
.kt-knop-licht.kt-gekozen { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.kt-invoer-rij { align-items: stretch; }
.kt-invoer-rij > input[type="text"] {
  flex: 1 1 60%; min-width: 0; height: var(--knop-hoogte, 55px); margin: 0; box-sizing: border-box;
  font-size: 1em; padding: 0 0.8em; border: 1.5px solid #ddd; border-radius: 12px; background: #fff;
}
.kt-invoer-rij > .full-width-btn { flex: 0 0 38%; height: var(--knop-hoogte, 55px); min-height: 0; margin: 0; box-sizing: border-box; }

/* ---------- Scannen en kaarten (css/rekening.css) in teamkleuren ---------- */
html.kt .rk-melding, html.kt .sc-anders { background: var(--kt-zacht); color: #1F6B3E; }
html.kt .np-uitleg { color: #1F6B3E; }
html.kt .rk-sugrij:hover, html.kt .rk-sugrij:active, html.kt .rk-kaartrij.is-gekozen { background: var(--kt-zacht); }

/* ---------- Rondje halen: categorieen en "Iedereen" ---------- */
.kt-cat-kop {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center;
  background: var(--card-bg); border-radius: 12px; padding: 0.8em 1em; cursor: pointer;
  font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.06); user-select: none;
}
.kt-cat-kop .kt-cat-n { color: #999; font-weight: 400; font-size: 0.85em; margin-left: 0.4em; }
.kt-cat-kop .kt-cat-pijl { color: var(--primary); transition: transform 0.2s; }
.kt-cat-kop.open .kt-cat-pijl { transform: rotate(180deg); }
.kt-cat-kop .kt-cat-gekozen { background: var(--primary); color: #fff; border-radius: 99px; font-size: 0.75em; padding: 0.1em 0.55em; margin-left: 0.4em; }
.kt-sectie-kop { grid-column: 1 / -1; font-size: 0.85em; font-weight: 600; color: var(--kt-tekst-zacht, #777); margin: 0.2em 0 -0.2em; }
.kt-iedereen {
  display: block; width: 100%; margin: 0 0 10px; min-height: 44px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--kt-rand, #ddd); background: var(--kt-zacht, #f5f5f5); color: var(--primary); font-weight: 600; font-size: 0.95em;
}

/* =====================================================================
   Teamscherm (team.php) in de opbouw van het overzicht (overzicht.php).
   Overgenomen uit de stijlen van overzicht.php, met teamkleuren.
   ===================================================================== */
.team-page .switch-group { display: flex; align-items: center; gap: 6px; color: var(--primary); cursor: pointer; text-decoration: none; }
.team-page .switch-group svg { width: 16px; height: 16px; fill: var(--primary); }
.team-page .fd-statuskaart { background: var(--card-bg); border-radius: var(--border-radius); box-shadow: 0 4px 8px rgba(0,0,0,.06); padding: .9em 1em; margin-bottom: .9em; }
.team-page .fd-statuskop { display: flex; justify-content: space-between; align-items: center; gap: .6em; }
.team-page .fd-groepsnaam { font-weight: 700; font-size: 1.12em; line-height: 1.2; min-width: 0; }
.team-page .fd-groepsnaam small { display: block; font-weight: 400; font-size: .62em; color: #777; margin-top: 2px; }
.team-page .switch-group.fd-wissel { flex-shrink: 0; background: #fff; border: 1.5px solid var(--primary); border-radius: 20px; padding: .34em .75em; font-size: .78em; font-weight: 600; white-space: nowrap; }
.team-page .fd-statusregel { display: flex; flex-wrap: wrap; gap: .5em; position: relative; margin-top: .75em; padding: .6em .7em 0; background: var(--kt-zacht); border: 1px solid var(--kt-rand); border-radius: 12px; text-decoration: none; color: var(--text); }
.team-page .fd-statusregel-voet { flex: 1 0 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; min-height: 40px; margin-top: .1em; border-top: 1px solid var(--kt-rand); color: var(--primary); font-weight: 600; font-size: .85em; }
/* Rondjes: Toon alles, rechts onder de laatste drie (zoals FestiDrinkz) */
.kt-toon-alles { display: block; margin: -.4em 0 0 auto; min-height: 44px; padding: .6em .2em; background: none; border: none; color: var(--primary); font-weight: 600; font-size: .9em; font-family: inherit; cursor: pointer; }
.team-page .fd-sv { flex: 1; min-width: 0; }
.team-page .fd-sv + .fd-sv { border-left: 1px solid var(--kt-rand); padding-left: .6em; }
.team-page .fd-sv-lbl { font-size: .66em; text-transform: uppercase; letter-spacing: .05em; color: #7c9586; font-weight: 600; margin-bottom: .15em; line-height: 1.3; }
.team-page .fd-sv-val { font-size: .95em; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-page .fd-sv-val.fd-sv-sub { font-size: .72em; font-weight: 400; color: #777; }
.team-page .fd-sv-pos { color: #1a7f37; }
.team-page .fd-sv-neg { color: #c62828; }

.team-page .fd-claim { display: flex; align-items: center; justify-content: space-between; gap: .6em; background: var(--kt-zacht); border: 1.5px solid var(--primary); border-radius: 12px; padding: .6em .8em; margin-bottom: .9em; text-decoration: none; }
.team-page .fd-claim-tekst { font-size: .82em; color: #1F6B3E; line-height: 1.35; }
.team-page .fd-claim-tekst strong { display: block; font-weight: 600; }
.team-page .fd-claim-knop { flex-shrink: 0; background: var(--primary); color: #fff; border-radius: 20px; padding: .34em .8em; font-size: .73em; font-weight: 600; white-space: nowrap; }

.team-page .fd-hoofdknop { box-sizing: border-box; display: block; background: var(--primary); color: #fff; border: 2px solid var(--primary); border-radius: var(--border-radius); text-align: center; font-weight: 600; font-size: 1em; line-height: 1.2; padding: 1em; margin-bottom: .5em; text-decoration: none; box-shadow: 0 3px 10px rgba(31,138,76,.3); }
.team-page .fd-herhaalknop { box-sizing: border-box; display: block; min-height: var(--knop-hoogte); background: #fff; border: 2px solid var(--primary); color: var(--primary); border-radius: var(--border-radius); text-align: center; font-weight: 600; font-size: .95em; line-height: 1.2; padding: .55em .4em; margin-bottom: .7em; text-decoration: none; }
.team-page .fd-herhaalknop small { display: flex; justify-content: center; gap: .3em; font-weight: 400; font-size: .8em; line-height: 1.2; color: #777; margin-top: 1px; }
.team-page .fd-herhaalknop small span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.team-page .fd-rekening { background: var(--kt-zacht); border: 1.5px solid var(--primary); border-radius: 12px; padding: .7em .8em; margin-bottom: .7em; color: #1F6B3E; }
.team-page .fd-rekening-kop { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; font-weight: 600; font-size: .95em; }
.team-page .fd-rekening-sub { font-size: .78em; margin-top: 1px; }
.team-page .fd-rekening-knoppen { display: flex; gap: .5em; margin-top: .6em; }
.team-page .fd-rekening-knoppen a { box-sizing: border-box; flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--primary); border-radius: var(--border-radius); font-weight: 600; font-size: .92em; line-height: 1.2; text-decoration: none; background: #fff; color: var(--primary); }
.team-page .kt-gasten { font-size: .82em; margin-top: .7em; }
.team-page .kt-gasten-kop { font-weight: 600; }
.team-page .kt-gasten-geen { opacity: .7; }
.team-page .kt-avondbalk .kt-invoer-rij { margin-top: .45em; }
.team-page .kt-avondbalk .kt-invoer-rij > input[type="text"], .team-page .kt-avondbalk .kt-invoer-rij > .full-width-btn { height: 44px; }
.team-page .kt-avondbalk .kt-invoer-rij > .full-width-btn { background: #fff !important; }
.kt-tekstknop { background: none; border: none; color: var(--primary); font-weight: 600; font-size: .95em; text-decoration: none; cursor: pointer; min-height: 44px; padding: .6em 1em; font-family: inherit; display: block; margin: 0 auto; }

.team-page .fd-secundair { display: flex; gap: .5em; margin-bottom: 1em; }
.team-page .fd-secknop { box-sizing: border-box; flex: 1; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--kt-rand); border-radius: 12px; text-align: center; font-size: .85em; line-height: 1.2; font-weight: 500; padding: .5em .4em; color: var(--text); text-decoration: none; }
.team-page .fd-secicon { display: block; font-size: 1.2em; margin-bottom: 1px; }

/* Tabs */
.team-page .section-title.fd-tabs { display: flex; gap: 0; margin: 10px 0 0 !important; padding: 0; border: 0; }
.team-page .section-title.fd-tabs .fd-tab { flex: 1 1 50%; min-width: 0; text-align: center; padding: 8px 10px; font: inherit; font-weight: 700; background: #e9f1ec; color: #9db3a6; cursor: pointer; border: none; border-radius: 12px 12px 0 0; }
.team-page .section-title.fd-tabs .fd-tab.is-active { background: #fff; color: var(--primary); }
.team-page .fd-panel { display: none; }
.team-page .fd-panel.is-visible { display: block; }
.team-page .kt-paneel-eerste { border-top-left-radius: 0; border-top-right-radius: 0; }
.team-page .kt-tijdlijn { background: #fff; border-radius: 0 0 var(--border-radius) var(--border-radius); padding: .6em .6em .2em; gap: .5em; }

/* Rondjeskaarten zoals het overzicht */
.team-page .round-card.fd-rondje { gap: .6em; box-shadow: none; border: 1px solid #edf2ee; padding: .75em .85em; }
.team-page .fd-rondje-info { flex: 1; min-width: 0; }
.team-page .fd-rondje-naam { font-weight: 600; font-size: 1em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-page .fd-rondje-meta { display: flex; align-items: baseline; gap: .35em; font-size: .86em; color: #777; min-width: 0; }
.team-page .fd-rondje-wat { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-page .fd-rondje-tijd { flex-shrink: 0; white-space: nowrap; }
.team-page .fd-rondje-bedrag { flex-shrink: 0; font-weight: 700; color: var(--primary); white-space: nowrap; }
.team-page .fd-rondje-pijl { flex-shrink: 0; margin-left: .15em; font-size: 1.2em; color: #ccc; line-height: 1; }
.team-page .kt-betaling { background: #fafcfb; }
.team-page .kt-betaling .fd-rondje-bedrag { color: #555; }
.team-page .fd-leegkaart { color: #999; font-size: .9em; }
.kt-blokkop { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; padding: .6em .2em .1em; font-weight: 700; font-size: .9em; color: var(--text); text-decoration: none; }
.kt-blokkop:first-child { padding-top: .2em; }
.kt-blokkop-link { flex-shrink: 0; font-weight: 600; font-size: .85em; color: var(--primary); text-decoration: none; padding: 1.05em 0 1.05em .9em; margin: -1.05em 0; }

/* Avond terugkijken (avond.php) */
.kt-tabel { width: 100%; border-collapse: collapse; font-size: .9em; }
.kt-tabel th { text-align: left; font-size: .75em; text-transform: uppercase; letter-spacing: .04em; color: #7c9586; padding: .3em .2em; }
.kt-tabel td { padding: .45em .2em; border-top: 1px solid #f0f0f0; }
.kt-tabel td.kt-getal, .kt-tabel th.kt-getal { text-align: right; white-space: nowrap; }

/* Ledenpagina en andere bestaande pagina's: vaste oranje vlakken groen maken */
html.kt #claim-hint { background: var(--kt-zacht) !important; border-color: var(--primary) !important; color: #1F6B3E !important; }
html.kt #claim-hint * { color: #1F6B3E !important; }
html.kt .kt-melding { background: var(--kt-zacht); border-color: var(--kt-rand); }

/* Scannen bij een team: hele prijslijst vervangen */
.kt-vervang { display: flex; gap: .7em; align-items: flex-start; background: var(--kt-zacht); border: 1.5px solid var(--kt-rand); border-radius: 12px; padding: .7em .8em; margin: 0 0 1em; cursor: pointer; }
.kt-vervang input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primary); }
.kt-vervang small { display: block; font-size: .82em; color: #4F7A60; margin-top: .15em; line-height: 1.35; }

/* ---------- Logo KantineTab (images/Logo/kantinetab-logo.png, zelfde hoogte als het FestiDrinkz-logo) ---------- */
.kt-logo img { height: 72px; width: auto; max-width: 100%; }
.kt-logo.kt-logo-klein img { height: 48px; }
.kt-logo.kt-logo-klein { margin-bottom: 1em; }

/* ---------- Onderkant teamscherm, zoals het overzicht ---------- */
.team-page .share-box.fd-deel { background: none; border: none; box-shadow: none; padding: 0; margin-bottom: 1em; }
.team-page .fd-deel-compact { display: flex; align-items: center; justify-content: space-between; gap: .6em; background: #fff; border: 1.5px solid var(--primary); border-radius: 12px; padding: .7em .6em .7em .9em; cursor: pointer; }
.team-page .fd-deel-tekst { flex: 1; min-width: 0; }
.team-page .fd-deel-label { display: block; font-size: .92em; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-page .fd-deel-url { display: block; font-size: .76em; color: #8fa397; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.team-page .fd-deel-ic { flex-shrink: 0; display: flex; align-items: center; color: var(--primary); padding-left: .7em; border-left: 1px solid var(--kt-rand); }
.kt-deel-optie { display: flex; align-items: center; gap: .9em; padding: .8em 1em; background: #f6f6f6; border-radius: 12px; border: none; cursor: pointer; text-align: left; color: #222; font-weight: 600; font-size: 1em; width: 100%; text-decoration: none; font-family: inherit; box-sizing: border-box; }

.team-page .section-title.fd-sectiekop { color: var(--text); font-size: .95em; margin: 1.2em 0 .5em; font-weight: 700; }
.team-page .fd-sectiekop-sub { font-weight: 400; font-size: .82em; color: #777; }
.team-page .fd-ledenblok { display: block; background: #fff; border: 1px solid var(--kt-rand); border-radius: 12px; padding: .75em .9em .6em; text-decoration: none; color: var(--text); }
.team-page .fd-ledenrij { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em 0; }
.team-page .fd-lid { font-size: .88em; line-height: 1.6; }
.team-page .fd-lid-sep { color: #b9c9be; padding: 0 .45em; font-size: .88em; }
.team-page .fd-ledenblok-actie { display: flex; align-items: center; justify-content: space-between; gap: .6em; border-top: 1px solid #edf2ee; margin-top: .6em; padding-top: .5em; font-size: .85em; font-weight: 600; color: var(--primary); }
.team-page .fd-ledenblok-pijl { font-size: 1.2em; line-height: 1; }
.team-page .fd-onderrij { display: flex; gap: .5em; margin-top: 1.6em; }
.team-page .fd-onderknop { box-sizing: border-box; flex: 1; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--kt-rand); border-radius: 12px; padding: .5em .3em; text-align: center; font-size: .85em; font-weight: 500; line-height: 1.2; color: var(--text); text-decoration: none; min-height: var(--knop-hoogte); }
.team-page .fd-inklap { border-top: 1px solid #e3ece6; margin-top: 1.2em; padding-top: .7em; text-align: center; font-size: .8em; color: #8fa397; }
.team-page .fd-voet { text-align: center; font-size: .8em; padding-top: .5em; line-height: 1.7; }
.team-page .fd-voet a { color: #8fa397; text-decoration: none; }

/* Knoppen en velden in het lettertype van de app (standaard pakt een knop Arial) */
.team-page button, .team-page input, .team-page select { font-family: inherit; }

/* Avond wijzigen (verkeerd gestart) */
.kt-wijzig-link { background: none; border: none; padding: 1.05em .4em 1.05em .5em; margin: -1.05em 0; color: var(--primary); font-weight: 600; font-size: 1em; text-decoration: none; cursor: pointer; font-family: inherit; }
.kt-wijzig { background: #fff; border-radius: 10px; padding: .8em; margin-top: .6em; color: var(--text); }

/* Gasten van vanavond, met kruisje zolang ze nog in geen rondje staan */
.kt-gast { display: inline-flex; align-items: center; gap: .2em; background: #fff; border: 1px solid var(--kt-rand); border-radius: 99px; padding: .1em .3em .1em .65em; margin: .2em .25em 0 0; }
.kt-gast-weg { display: inline; margin: 0; }
.kt-gast-weg button { background: none; border: none; color: #8fa397; cursor: pointer; font-size: .9em; padding: 0 .25em; line-height: 1; font-family: inherit; }

/* ---------- Wasschema ---------- */
.kt-was-beurt { font-weight: 700; color: #1F6B3E; background: var(--kt-zacht); border-radius: 10px; padding: .5em .7em; margin: 0 0 .6em; }
.kt-was-tel { white-space: nowrap; font-weight: 600; }
.kt-was-laatst { color: #8a9a90; font-weight: 400; font-size: .85em; }
/* "Wie neemt de was mee?": kaart op het teamscherm en venster bij Avond afsluiten */
.kt-was-vraag-kop { margin: 0 0 .2em; }
.kt-was-vraag .kt-uitleg, .kt-was-sluit .kt-uitleg { margin: 0 0 .2em; }
.kt-was-vraag .kt-knoppen, .kt-was-sluit .kt-knoppen { margin-top: .6em; }
.kt-was-vraag .kt-tekstknop, .kt-was-sluit .kt-tekstknop { margin-top: .3em; }
/* Iemand anders: grote regels met namen in een venster van onderen */
.kt-was-rij { display: block; width: 100%; min-height: 48px; padding: .7em .2em; text-align: left; background: none; border: none; border-bottom: 1px solid #f0f0f0; font-family: inherit; font-size: 1em; font-weight: 600; color: var(--text); cursor: pointer; }
.kt-was-lijstdeel { flex-direction: column; flex: 1; min-height: 0; }
/* Kruisje rechtsboven in een venster, zoals Groep delen; tikvlak 44 px */
.kt-blad-kop-x { align-items: center; }
.kt-blad-x { background: none; border: none; color: #888; font-size: 1.3em; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; margin: -.5em -.6em -.5em 0; padding: 0; font-family: inherit; }
/* Melding met Ongedaan maken */
.kt-ongedaan { display: inline; margin: 0; }
.kt-ongedaan .kt-tekstknop { display: inline; min-height: 0; padding: .7em .2em; margin: -.7em 0; }
/* Tab Was: naam openklappen met de wasbeurten */
.kt-was-klap { cursor: pointer; }
.kt-was-klap .kt-pijl { display: inline-block; margin-left: .4em; color: var(--primary); transition: transform .2s; }
.kt-was-klap.open .kt-pijl { transform: rotate(90deg); }
.kt-was-beurten { background: var(--kt-zacht, #f4f4f4); border-radius: 10px; padding: .2em .8em; margin: .2em 0 .5em; }
.kt-was-beurtrij { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .45em 0; font-size: .9em; }
.kt-was-beurtrij + .kt-was-beurtrij { border-top: 1px solid var(--kt-rand, #e5e5e5); }
.kt-was-beurtrij form { margin: 0; flex-shrink: 0; }
.kt-was-beurtrij .kt-tekstknop { margin: 0; padding: .6em 0 .6em .8em; }
#kt-was-zelf-knop { margin: .2em auto 1em; }


/* ---------- Team-instellingen: schakelaar ---------- */
.kt-instellingen { padding: .6em .9em; }
.kt-schakelrij { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin: 0; }
.kt-schakelrij > span { font-size: .9em; font-weight: 600; }
.kt-schakelrij small { display: block; font-weight: 400; color: #777; font-size: .85em; margin-top: .1em; }
.kt-schakel { flex-shrink: 0; width: 46px; height: 28px; border-radius: 99px; border: none; background: #cfd8d2; position: relative; cursor: pointer; padding: 0; transition: background .2s; }
.kt-schakel span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s; }
.kt-schakel.aan { background: var(--primary); }
.kt-schakel.aan span { left: 21px; }
.kt-instellingen > * + * { border-top: 1px solid #edf2ee; margin-top: .6em; padding-top: .6em; }
.kt-instellingen > .kt-thuis-form { border-top: 0; margin-top: .4em; padding-top: 0; }
/* Op rekening: stand van de bon in de avondbalk, knop om te openen, uitleg bij bestellen */
.kt-rekening { display: flex; align-items: center; justify-content: space-between; gap: .7em; margin-top: .6em; padding: .55em .7em; background: #fff; border: 1.5px solid var(--kt-rand, #ddd); border-radius: 12px; }
.kt-rekening small { display: block; color: var(--kt-tekst-zacht, #777); font-size: .85em; font-weight: 400; margin-top: .1em; }
.kt-rekening .full-width-btn { flex: 0 0 auto; width: auto; min-height: 44px; margin: 0; padding: .5em 1.1em; }
.kt-rekening-open { margin: .3em 0 0; }
.kt-rekening-uitleg { color: #777; font-size: .9em; margin: -.4em 0 1em; }
/* Rondmaken na een rekening: kaart bij afrekenen en afvinklijstje op het teamscherm */
.kt-rondmaken { background: var(--kt-zacht, #f4f4f4); border: 1.5px solid var(--kt-rand, #ddd); border-radius: 12px; padding: .8em .9em; margin: 0 0 1em; }
.kt-rondmaken p { margin: .3em 0 .7em; font-size: .9em; }
.kt-rondmaken .full-width-btn { margin: .4em 0 0; }
.kt-rondmaken-delen { font-weight: 600; }
.kt-rondmaken-tip { color: var(--kt-tekst-zacht, #777); font-size: .85em !important; }
.kt-rondmaken-lijst { margin: .4em 0; }
.kt-rondmaken-rij { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .35em 0; margin: 0; }
.kt-rondmaken-rij + .kt-rondmaken-rij { border-top: 1px solid var(--kt-rand, #e5e5e5); }
.kt-rondmaken-rij .full-width-btn { flex: 0 0 auto; width: auto; min-height: 44px; margin: 0; padding: .4em 1em; }
.kt-rondmaken-rij small { font-weight: 400; color: var(--kt-tekst-zacht, #777); }
.kt-rond-ontvangen { color: var(--primary) !important; font-weight: 600 !important; }
.kt-rondmaken-team > .kt-voor-betaler > strong { display: block; margin-bottom: .3em; }
/* Uit of elders: tussenkop boven de kantines en boven kroegen en restaurants */
.kt-kaart-soort { font-size: .75em; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--kt-tekst-zacht, #777); padding: .6em .2em .2em; }
.kt-instel-link { display: flex; justify-content: space-between; align-items: center; min-height: 44px; text-decoration: none; color: var(--text); font-size: .9em; font-weight: 600; }
button.kt-instel-link { width: 100%; background: none; border: none; padding: 0; font-family: inherit; text-align: left; cursor: pointer; }
.kt-instel-link small { display: block; font-weight: 400; color: #777; font-size: .85em; margin-top: .1em; }
.kt-instel-link .kt-pijl { color: var(--primary); font-size: 1.2em; transition: transform .2s; }
.kt-instel-link[aria-expanded="true"] .kt-pijl { transform: rotate(90deg); }

/* Uitleg voor teams */
.kt-uitleg-lijst { margin: 0 0 1em; padding-left: 1.2em; font-size: .9em; line-height: 1.5; }
.kt-uitleg-lijst li { margin-bottom: .45em; }
.team-page .fd-voet a.kt-hoe { color: var(--primary); }
.team-page .fd-voet span { padding: 0 .35em; color: #b9c9be; }

/* Aanwezig bij een avond (grote selectie): een regel, en een venster van onderen met de namen */
.kt-aanwezig-regel { display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; background: #fff; border: 1.5px solid var(--kt-rand); border-radius: 12px; padding: .65em .9em; cursor: pointer; font-family: inherit; text-align: left; color: var(--text); }
.kt-aanwezig-regel strong { display: block; font-size: .9em; }
.kt-aanwezig-regel small { display: block; font-size: .85em; color: #6b7d72; margin-top: .1em; }
.kt-aanwezig-regel .kt-pijl { color: var(--primary); font-size: 1.4em; line-height: 1; }
.kt-blad-achter, .kt-blad { display: none; }
.kt-aanwezig.open .kt-blad-achter, .kt-was-sluit.open .kt-blad-achter, .kt-was-kies.open .kt-blad-achter { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; }
.kt-aanwezig.open .kt-blad, .kt-was-sluit.open .kt-blad, .kt-was-kies.open .kt-blad { display: flex; flex-direction: column; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; max-height: 85vh; box-sizing: border-box; background: #fff; border-radius: 20px 20px 0 0; z-index: 1001; padding: .8em 1.2em calc(1.2em + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 24px rgba(0,0,0,.15); animation: kt-blad-in .25s ease; }
@keyframes kt-blad-in { from { transform: translateX(-50%) translateY(100%); } to { transform: translateX(-50%) translateY(0); } }
.kt-blad-trekker { width: 40px; height: 4px; background: #ddd; border-radius: 2px; margin: 0 auto .9em; flex-shrink: 0; }
.kt-blad-kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5em; flex-shrink: 0; }
.kt-blad-kop .kt-tekstknop { margin: 0; padding-right: 0; }
.kt-blad-lijst { overflow-y: auto; flex: 1; min-height: 0; margin: 0 -.3em; padding: 0 .3em; }
.kt-veld .kt-lijstrij, .kt-lijstrij { display: flex; align-items: center; gap: .8em; padding: .7em .2em; margin: 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; font-size: 1em; font-weight: 400; }
.kt-lijstrij input { width: 22px; height: 22px; accent-color: var(--primary); flex-shrink: 0; margin: 0; }
.kt-blad .kt-aanwezig-tel { margin: .6em 0; flex-shrink: 0; }
.kt-blad .full-width-btn { flex-shrink: 0; }
.kt-meer-leden { display: block; width: 100%; margin-top: 8px; min-height: 44px; border-radius: 10px; border: 1.5px dashed var(--kt-rand, #ccc); background: none; color: var(--primary); font-weight: 600; font-size: .95em; cursor: pointer; font-family: inherit; }

/* Wie zijn er: de knoppen eronder geven zelf de ruimte (geen dubbele marge) */
.kt-veld.kt-aanwezig { margin-bottom: 0; }

/* Invulvelden in teamformulieren: geen extra marge van style.css, de afstand komt van .kt-veld */
.kt-veld input[type="text"], .kt-veld input[type="number"], .kt-veld input[type="date"], .kt-veld select { margin: 0; }

/* ---------- KantineTab-contentpagina's: dezelfde opmaak als de FestiDrinkz-pagina's, in het groen ---------- */
html.kt body.lp-page .btn-primary { box-shadow: 0 3px 10px rgba(31,138,76,.3); }
html.kt body.lp-page .btn-secondary:hover { background: var(--kt-zacht); }
html.kt body.lp-page .feature-uitgelicht { border-color: var(--kt-rand); }
html.kt body.lp-page .bewijs-rij + .bewijs-rij, html.kt body.lp-page .bewijs-uit,
html.kt body.lp-page .feature-row + .feature-row, html.kt body.lp-page .faq-card details { border-color: #e3efe6; }
html.kt body.lp-page .bewijs-kop { color: #7f9688; }
html.kt body.lp-page .bewijs-rij .bedrag.kt-min { color: #c62828; }
body.lp-page .kt-hero-logo { height: 56px; }
body.lp-page .feature-text a { color: var(--primary); font-weight: 600; text-decoration: none; }

/* ---------- Homepage FestiDrinkz: blok "Voor teams en clubs" (altijd groen) ---------- */
.kt-thuisblok { display: flex; flex-direction: column; gap: .45em; margin: 1.6em 0 0; padding: 1em 1.1em; background: #F0F8F2; border: 1.5px solid #B9DEC6; border-radius: 14px; text-decoration: none; color: #333; }
.kt-thuisblok-logo { height: 34px; width: auto; align-self: flex-start; }
.kt-thuisblok-tekst { font-size: .9em; line-height: 1.55; color: #444; }
.kt-thuisblok-tekst strong { display: block; color: #1F8A4C; font-size: 1.05em; margin-bottom: .15em; }
.kt-thuisblok-link { font-weight: 600; color: #1F8A4C; font-size: .9em; }
html.kt body.lp-page .join-hint { background: var(--kt-zacht); border-color: var(--primary); color: #1F6B3E; }

/* Mijn groepen: wat ik in een team nog moet afhandelen (groep_status.php, fd_kt_te_doen) */
.group-card .kt-te-doen { display: inline-block; background: #FFF1E3; color: #B85C00; border-radius: 20px; padding: 0.05em 0.6em; font-weight: 600; }

/* ---------- Proosten op een rondje (team- en avondpagina, app-js/kantine-proost.js) ---------- */
.round-card.fd-rondje.fd-met-proost { flex-wrap: wrap; }
.fd-proost-rij { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-top: .55em; padding-top: .55em; border-top: 1px solid #edf3ef; min-width: 0; }
.fd-proost-wie { flex: 1; min-width: 0; font-size: .8em; color: #7d8a81; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-proost-wie.eigen { color: #1F6B3C; font-weight: 600; }
.fd-proost-knop { flex-shrink: 0; display: inline-flex; align-items: center; gap: .3em; border: 1.5px solid var(--primary); color: var(--primary); background: #fff; border-radius: 20px; padding: .22em .8em; font-size: .8em; font-weight: 600; cursor: pointer; }
.fd-proost-knop.gedaan { background: var(--kt-zacht, #E1F2E7); border-color: var(--kt-rand, #B9DEC6); color: #1F6B3C; }
#fd-proost-achter { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1100; }
#fd-proost-venster { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; z-index: 1101; background: #fff; border-radius: 20px 20px 0 0; padding: 1em 1.2em calc(1.3em + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 24px rgba(0,0,0,.12); transform: translateY(100%); transition: transform .25s ease; max-height: 80vh; overflow-y: auto; }
#fd-proost-venster.open { transform: translateY(0); }
.fd-proost-greep { width: 40px; height: 4px; background: #ddd; border-radius: 2px; margin: 0 auto 1em; }
.fd-proost-titel { font-weight: 600; margin: 0 0 .5em; }
.fd-proost-persoon { display: flex; justify-content: space-between; padding: .55em 0; border-top: 1px solid #eef2ef; font-size: .92em; }
.fd-proost-persoon:first-of-type { border-top: none; }
.fd-proost-persoon span { color: #93a097; font-size: .85em; }
.kt-gm-venster { margin-top: .8em; padding-top: .9em; border-top: 1px solid #eef2ef; }
.kt-gm-rij { margin-bottom: 1em; }
#fd-proost-toast { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 1200; background: #333; color: #fff; font-size: .85em; padding: .6em 1em; border-radius: 999px; max-width: 90vw; text-align: center; }