/* FeestCollege admin */

@font-face {
  font-family: "College";
  src: url("fonts/collegeb.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "College Condensed";
  src: url("fonts/collegec.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Brandbook */
  --red: #ba0804;
  --maroon: #631614;
  --gold: #e6a416;
  --ink: #231717;
  --paper: #ebe6e5;

  /* Afgeleid */
  --bg: #f5f1f0;
  --vlak: #ffffff;
  --lijn: #ddd5d3;
  --tekst: var(--ink);
  --gedempt: #6f6160;
  --gold-zacht: #fbefd0;
  --red-zacht: #fbe4e3;
  --groen: #1f7a45;
  --groen-zacht: #dff3e6;

  --font-display: "College", "Arial Black", Impact, sans-serif;
  --font-label: "College Condensed", "College", "Arial Narrow", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 10px;
  --balk-h: 56px;
  --gutter: clamp(1rem, 3vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 16px/1.5 var(--font-body);
}

h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font: 700 clamp(1.5rem, 4vw, 2rem)/1.1 var(--font-display); letter-spacing: 0.01em; text-wrap: balance; }
h2 { font-size: 1.05rem; margin-bottom: 0.75rem; }
h3 { font-size: 0.95rem; margin: 1rem 0 0.25rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--red); }
a:hover { color: var(--maroon); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

[hidden] { display: none !important; }

.gedempt { color: var(--gedempt); font-weight: 400; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- Bovenbalk ---------------------------------------------------------- */

.balk {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.25rem;
  min-height: var(--balk-h);
  padding: 0 var(--gutter);
  background: var(--ink);
  color: var(--paper);
}
.balk__logo {
  font: 700 1.25rem/1 var(--font-display);
  color: var(--paper); text-decoration: none; letter-spacing: 0.02em;
}
.balk__logo:hover { color: var(--gold); }
.menu { display: flex; gap: 0.25rem; flex: 1; }
.menu__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.8rem; border-radius: 6px;
  color: #cfc4c2; text-decoration: none; font-weight: 500;
}
.menu__link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.menu__link.is-actief { color: var(--ink); background: var(--paper); }
.balk__rechts { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; }
.balk__link { color: #cfc4c2; }
.balk__link:hover, .balk__link.is-actief { color: #fff; }
.teller {
  min-width: 1.25rem; padding: 0 0.35rem; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center;
}

/* ---- Pagina ------------------------------------------------------------- */

.inhoud { max-width: 1180px; margin: 0 auto; padding: 1.5rem var(--gutter) 4rem; }
.inhoud--breed { max-width: none; }

.paginakop {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 0.75rem 1rem; margin-bottom: 1.25rem;
}
.paginakop__acties { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.terug { display: inline-block; margin-bottom: 0.25rem; font-size: 0.9rem; color: var(--gedempt); text-decoration: none; }
.terug:hover { color: var(--red); }

.kaart {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}

.tweekolom { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1rem; align-items: start; }

.melding {
  padding: 0.7rem 1rem; margin-bottom: 1rem; border-radius: var(--radius);
  border: 1px solid transparent; background: var(--groen-zacht); border-color: #b5dfc4; color: #14532d;
}
.melding--fout { background: var(--red-zacht); border-color: #f1b9b7; color: #7a0c09; }
.melding--letop { background: var(--gold-zacht); border-color: #ecd391; color: #6b4a00; }
.melding ul { margin: 0; padding-left: 1.1rem; }
.melding a { color: inherit; font-weight: 600; }
.leeg { padding: 2rem 1rem; text-align: center; color: var(--gedempt); }

/* ---- Knoppen en labels -------------------------------------------------- */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 40px; padding: 0.45rem 0.95rem;
  border: 1px solid var(--lijn); border-radius: 8px;
  background: var(--vlak); color: var(--tekst);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knop:hover { border-color: var(--ink); color: var(--tekst); }
.knop--rood { background: var(--red); border-color: var(--red); color: #fff; }
.knop--rood:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.knop--goud { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.knop--goud:hover { background: #f5b82e; border-color: #f5b82e; }
.knop--vol { width: 100%; }

.linkknop {
  padding: 0; border: 0; background: none; color: var(--red);
  font: inherit; text-decoration: underline; cursor: pointer;
}
.linkknop--rood { color: var(--red); }
.linkknop--klein { font-size: 0.8rem; color: var(--gedempt); }
.inline { display: inline; margin-left: 0.5rem; }

.filter {
  padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--lijn);
  background: var(--vlak); color: var(--tekst); text-decoration: none; font-size: 0.9rem; font-weight: 500;
}
.filter.is-actief { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.label {
  display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px;
  background: var(--paper); color: var(--ink); font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.label--rood, .label--afgevallen { background: var(--red-zacht); color: #7a0c09; }
.label--goud, .label--optie { background: var(--gold-zacht); color: #6b4a00; }
.label--boeking, .label--geweest, .label--betaald { background: var(--groen-zacht); color: #14532d; }
.label--koud { background: #e3ecf5; color: #1d3b5a; }
.label--warm { background: #fde6d3; color: #7a3a06; }

.avatar {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: 0.65rem; font-weight: 700;
}
.bol { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--lijn); }
.bol--telaat { background: var(--red); }
.bol--vandaag { background: var(--groen); }
.bol--later { background: #9b8f8d; }

/* ---- Pipeline ----------------------------------------------------------- */

.bord {
  display: grid; grid-template-columns: repeat(6, minmax(210px, 1fr)); gap: 0.75rem;
  overflow-x: auto; padding-bottom: 0.75rem; align-items: start;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.kolom {
  background: #ebe5e3; border-radius: var(--radius); padding: 0.6rem;
  border-top: 4px solid var(--lijn); scroll-snap-align: start; min-height: 8rem;
}
.kolom--koud { border-top-color: #7da0c4; }
.kolom--warm { border-top-color: #e58a3a; }
.kolom--optie { border-top-color: var(--gold); }
.kolom--boeking { border-top-color: var(--red); }
.kolom--geweest { border-top-color: var(--maroon); }
.kolom--betaald { border-top-color: var(--groen); }
.kolom.is-doel { outline: 3px dashed var(--ink); outline-offset: -3px; background: #e0d8d5; }
.kolom__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0.3rem 0.55rem; }
.kolom__kop h2 { margin: 0; font: 400 1.15rem/1 var(--font-label); letter-spacing: 0.04em; text-transform: uppercase; }
.kolom__aantal { font: 600 0.8rem var(--font-body); color: var(--gedempt); letter-spacing: 0; }
.kolom__totaal { font-size: 0.8rem; color: var(--gedempt); font-variant-numeric: tabular-nums; }
.kolom__kaarten { display: grid; gap: 0.5rem; min-height: 3rem; }
.kolom__meer { font-size: 0.85rem; padding: 0.25rem 0.3rem; }

.kaartje {
  display: grid; gap: 0.15rem;
  padding: 0.6rem 0.7rem; border-radius: 8px;
  background: var(--vlak); border: 1px solid var(--lijn);
  color: var(--tekst); text-decoration: none; font-size: 0.9rem; cursor: grab;
}
.kaartje:hover { border-color: var(--ink); color: var(--tekst); }
.kaartje.is-sleep { opacity: 0.4; }
.kaartje__titel { font-size: 0.95rem; line-height: 1.25; overflow-wrap: anywhere; }
.kaartje__regel { overflow-wrap: anywhere; }
.kaartje__voet { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.3rem; min-height: 1.6rem; }
.kaartje__gage { font-weight: 700; font-variant-numeric: tabular-nums; }
.kaartje__rechts { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; }

.afvalzone {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 30;
  padding: 0.9rem 2rem; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 700;
  border: 2px dashed var(--paper); box-shadow: 0 8px 24px rgba(35, 23, 23, 0.35);
}
.afvalzone.is-doel { background: var(--red); }
.bord__hulp { margin-top: 0.75rem; font-size: 0.85rem; }

/* ---- Lead --------------------------------------------------------------- */

.fasebalk { display: flex; gap: 3px; margin-bottom: 1rem; overflow-x: auto; }
.fasebalk__stap {
  flex: 1 0 auto; min-height: 40px; padding: 0.4rem 0.8rem;
  border: 0; background: #e2dad8; color: var(--ink);
  font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.fasebalk__stap:first-of-type { border-radius: 8px 0 0 8px; }
.fasebalk__stap:last-of-type { border-radius: 0 8px 8px 0; }
.fasebalk__stap:hover { background: #d3c9c6; }
.fasebalk__stap.is-actief { background: var(--red); color: #fff; }

.details { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.4rem 0.75rem; margin: 0; }
.details dt { color: var(--gedempt); font-size: 0.9rem; }
.details dd { margin: 0; overflow-wrap: anywhere; }
.vrije-tekst { overflow-wrap: anywhere; margin: 0; }
.contactknoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.contactknoppen .knop { white-space: normal; overflow-wrap: anywhere; }

.afvallen summary, .uitklap summary { cursor: pointer; font-weight: 600; color: var(--gedempt); }
.afvallen[open] summary, .uitklap[open] summary { margin-bottom: 0.75rem; color: var(--tekst); }
.uitklap { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--lijn); }
.uitklap--kaart { margin-top: 0; padding-top: 1.1rem; border-top: 1px solid var(--lijn); }
.gevaar { margin: 0 0 1.5rem; }

.tijdlijn { list-style: none; margin: 1rem 0 0; padding: 0; }
.tijdlijn__item { position: relative; padding: 0 0 1rem 1.25rem; border-left: 2px solid var(--lijn); }
.tijdlijn__item:last-child { padding-bottom: 0; }
.tijdlijn__item::before {
  content: ""; position: absolute; left: -6px; top: 0.4rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--red);
}
.tijdlijn__item--systeem::before { background: var(--lijn); }
.tijdlijn__item--systeem .vrije-tekst { color: var(--gedempt); font-size: 0.9rem; }
.tijdlijn__kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; font-size: 0.8rem; color: var(--gedempt); }
.notitieformulier__onder { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.notitieformulier__onder select { flex: 1; }

/* ---- Activiteiten ------------------------------------------------------- */

.actlijst { list-style: none; margin: 0; padding: 0; }
.act { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.6rem 0; border-top: 1px solid var(--lijn); }
.actlijst > .act:first-child { border-top: 0; }
.act__vink {
  width: 1.6rem; height: 1.6rem; margin-top: 0.1rem; border-radius: 50%;
  border: 2px solid var(--gedempt); background: var(--vlak); cursor: pointer;
}
.act__vink:hover { border-color: var(--groen); background: var(--groen-zacht); }
.act__tekst { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.act__meta { font-size: 0.85rem; color: var(--gedempt); }
.act--telaat .act__datum { color: var(--red); font-weight: 700; }
.act--vandaag .act__datum { color: var(--groen); font-weight: 700; }
.act__extra { padding: 0 0 0.5rem 2.3rem; font-size: 0.85rem; }
.act__extra summary { cursor: pointer; color: var(--gedempt); }
.inline-formulier { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.actlijst--klaar li { padding: 0.25rem 0; text-decoration: line-through; text-decoration-color: var(--lijn); }
.groepkop--telaat { color: var(--red); }

/* ---- Formulieren -------------------------------------------------------- */

.velden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem 1rem; margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.velden > legend { padding: 0; margin-bottom: 0.6rem; font: 400 1.1rem/1 var(--font-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--maroon); }
.velden--compact { margin-bottom: 0; }
.velden__sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem 1rem; padding: 0.85rem; background: var(--bg); border-radius: 8px; }
.veld { grid-column: span 2; display: grid; gap: 0.25rem; align-content: start; min-width: 0; }
.velden__sub .veld { grid-column: auto; }
.veld--smal { grid-column: span 1; }
.veld--breed { grid-column: 1 / -1; }
.veld__hulp { margin: -0.4rem 0 0; font-size: 0.8rem; color: var(--gedempt); }
label { font-size: 0.9rem; font-weight: 600; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; min-height: 42px; padding: 0.5rem 0.65rem;
  border: 1px solid #b9adab; border-radius: 8px; background: #fff; color: var(--tekst);
  font: inherit;
}
textarea { resize: vertical; min-height: 5rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 0; border-color: var(--ink); }

.vinkje { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.vinkje input { width: 1.15rem; height: 1.15rem; accent-color: var(--red); }
.formulier__acties { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.veld > .knop { justify-self: start; }

.zoekbalk { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.zoekbalk input[type="search"] { flex: 1 1 14rem; }
.zoekbalk select { flex: 0 1 12rem; }

.login { max-width: 24rem; margin: 8vh auto 0; display: grid; gap: 0.9rem; }
.login h1 { color: var(--red); }
.login p { margin: -0.6rem 0 0; }
.login .veld { grid-column: auto; }

/* ---- Instellingen ------------------------------------------------------- */

code { padding: 0.1rem 0.35rem; border-radius: 4px; background: var(--paper); font-size: 0.88em; overflow-wrap: anywhere; }
.instellingen__ander { margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--lijn); }
.instellingen__actie { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--lijn); }
.instellingen__actie .veld__hulp { margin-top: 0.4rem; }

/* ---- Tabellen en lijsten ------------------------------------------------ */

.tabelwrap { overflow-x: auto; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); }
.kaart .tabelwrap { border: 0; border-radius: 0; margin: 0 -1.25rem -1.1rem; }
.tabel { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabel th, .tabel td { padding: 0.6rem 0.9rem; text-align: left; vertical-align: top; border-top: 1px solid var(--lijn); }
.tabel th.rechts, .tabel td.rechts { text-align: right; font-variant-numeric: tabular-nums; }
.tabel thead th { border-top: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gedempt); white-space: nowrap; }
.tabel tbody tr:hover { background: #faf7f6; }
.lijst { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.lijst li { padding: 0.45rem 0; border-top: 1px solid var(--lijn); overflow-wrap: anywhere; }
.lijst li:first-child { border-top: 0; }

/* ---- Telefoon ----------------------------------------------------------- */

.alleen-breed { display: inline; }

@media (max-width: 820px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .alleen-breed { display: none; }
  .tweekolom { grid-template-columns: minmax(0, 1fr); }
  .menu {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    justify-content: space-around; gap: 0;
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
    background: var(--ink);
  }
  .menu__link { flex: 1; justify-content: center; min-height: 48px; padding: 0.3rem; font-size: 0.85rem; }
  .bord { grid-template-columns: repeat(6, 82vw); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.75rem; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); }
  .kaartje { cursor: pointer; }
  .velden, .velden__sub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .velden__sub .veld { grid-column: 1 / -1; }
  .details { grid-template-columns: 6rem minmax(0, 1fr); }
  .fasebalk { flex-wrap: wrap; overflow: visible; }
  .fasebalk .fasebalk__stap { flex: 1 0 30%; border-radius: 0; }
  .afvalzone { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .veld { grid-column: 1 / -1; }
  .veld--smal { grid-column: span 1; }
  .kaart { padding: 1rem; }
  .kaart .tabelwrap { margin: 0 -1rem -1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .knop, .kaartje, .menu__link, .fasebalk__stap { transition: background-color 120ms, border-color 120ms, color 120ms; }
}