/* ============================================================
   Gladde Barber | Styles (Fase 1)
   Palet: donkergroen + crème + subtiel goud (WCAG-proof).
   ============================================================ */

:root {
  --ink: #1a1c19;          /* warm bijna-zwart, tekst op crème (contrast > 12:1) */
  --ink-soft: #55584f;     /* zachte tekst op crème (contrast ~ 6.5:1) */
  --line: #e2dccb;         /* lijn/rand op crème */
  --bg: #f5f1e8;           /* crème / warm wit, hoofdachtergrond */
  --bg-alt: #efe9da;       /* iets diepere crème voor alt-secties */
  --card: #fffdf8;         /* bijna wit voor kaarten (contrast met crème) */
  --accent: #1b4332;       /* diep bosgroen, primair */
  --accent-dark: #123024;  /* donkerder groen voor hover */
  --accent-soft: #e5ede8;  /* lichtgroene tint voor selecties */
  --gold: #b8862f;         /* goud, subtiel en donker genoeg voor tekst op crème (~4.7:1) */
  --gold-bright: #d8b357;  /* helder goud voor vlakken/badges (met donkere tekst) */
  --danger: #a13636;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 40px rgba(27, 67, 50, 0.10);
  --shadow-sm: 0 4px 16px rgba(27, 67, 50, 0.08);
  --maxw: 1120px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
/* Waar een link naartoe springt.
   De menubalk staat vast bovenaan (72px), dus 80px lucht houdt de landingsplek
   vrij. De ankers #diensten, #boeken en #contact zitten bewust op de KOP van een
   sectie en niet op de sectie zelf: een sectie begint met 96px witruimte, en daar
   landde je dan middenin. Je zag dan een lege band en de inhoud werd omlaag
   geduwd. Nu kom je direct op "Reserveren / Maak een afspraak" uit.
   De 24px hieronder is alleen wat lucht tussen de balk en de kop. */
#diensten, #boeken, #contact { scroll-margin-top: 24px; }
/* Oude link naar /#booking (de module zelf) blijft netjes onder de balk uitkomen. */
#booking { scroll-margin-top: 8px; }

body {
  overflow-x: clip; /* voorkomt horizontale verspringing op mobiel */
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
.btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn--ghost:hover { background: var(--accent-soft); }
.btn--sm { padding: 10px 18px; font-size: 0.9rem; }

/* ---------- Navbar ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(245, 241, 232, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav__logo {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);          /* standaard: donkergroen woordmerk op licht */
}
/* Woordmerk is één consistente kleur; het goud zit alleen in het icoon.
   (Geen span-kleur meer, de tekst is nu gewoon "Gladde Barber".) */
.nav__logo--light { color: #fff; }  /* op donkere achtergrond: heel wit */
.nav__links { display: flex; gap: 28px; }
.nav__links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--ink); }
.nav__cta { flex-shrink: 0; }

/* Homepage-nav staat over de donkere hero: licht totdat je scrolt,
   daarna donker zodra de balk crème wordt (.is-scrolled). */
.nav .nav__logo { color: #fff; }                       /* heel wit op de hero */
.nav .nav__links a { color: rgba(255, 255, 255, 0.82); }
.nav .nav__links a:hover { color: #fff; }
.nav .nav__login { color: #fff; }
.nav .nav__login:hover { color: var(--gold-bright); }
.nav.is-scrolled .nav__logo { color: var(--accent); }  /* donkergroen zodra crème */
.nav.is-scrolled .nav__links a { color: var(--ink-soft); }
.nav.is-scrolled .nav__links a:hover { color: var(--ink); }
.nav.is-scrolled .nav__login { color: var(--accent); }
.nav.is-scrolled .nav__login:hover { color: var(--accent-dark); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(160deg, rgba(10, 25, 16, 0.92), rgba(14, 61, 33, 0.86)),
    radial-gradient(circle at 80% 20%, rgba(184, 137, 79, 0.25), transparent 45%),
    #0e1a12;
  overflow: hidden;
}
.hero::after {
  /* subtiele diagonale textuur */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 22px);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 760px; }
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 18px;
}
.hero__title {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 1.02;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}
.hero__tagline {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 540px;
  margin: 0 0 36px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__actions .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.hero__actions .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.hero__scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.4rem;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, 8px);} }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section--alt { background: var(--bg-alt); }
.section__head { max-width: 640px; margin: 0 0 48px; }
.section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 12px;
}
.section__title {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.section__sub { color: var(--ink-soft); font-size: 1.08rem; margin: 0; }

/* ---------- Diensten ---------- */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.service-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  background: var(--card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
  display: flex;
  flex-direction: column;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }

/* Lege kaarten die de server alvast neerzet. Ze houden de plek vast tot de echte
   gegevens binnen zijn, zodat de pagina niet groeit en er niets verspringt.
   Bewust rustig: een zacht kloppend vlak, geen opvallende animatie. */
.skelet {
  display: block; background: var(--line); border-radius: 4px;
  opacity: 0.55; animation: skelet-adem 1.6s ease-in-out infinite;
}
@keyframes skelet-adem { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }
.skelet--titel { height: 1.35rem; width: 55%; }
.skelet--prijs { height: 1.1rem; width: 3.2rem; flex: 0 0 auto; }
.skelet--regel { height: 0.9rem; width: 100%; margin-top: 14px; }
.skelet--kort  { width: 72%; margin-top: 8px; }
.skelet--meta  { height: 0.8rem; width: 5.5rem; margin-top: 18px; }
.skelet--knop  { height: 2.4rem; width: 8.5rem; margin-top: 22px; border-radius: var(--radius-sm); }
.service-card--skelet:hover { transform: none; box-shadow: none; border-color: var(--line); }
.choice--skelet { cursor: default; }
.choice--skelet .skelet--titel { width: 60%; }
.choice--skelet .skelet--regel { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .skelet { animation: none; } }
.service-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.service-card__top h3 { font-size: 1.35rem; margin: 0; font-family: var(--display); }
.service-card__price {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--accent);
  white-space: nowrap;
}
.service-card p { color: var(--ink-soft); margin: 14px 0 0; }
.service-card__meta { font-size: 0.85rem; color: var(--gold); font-weight: 600; margin-top: 8px !important; }
.service-card .btn { margin-top: 22px; align-self: flex-start; }

/* Uitgelichte dienst (abonnement) */
.service-card--featured {
  position: relative;
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: var(--shadow);
}
.service-card__badge {
  position: absolute;
  top: -13px;
  left: 30px;
  background: var(--gold-bright);
  color: #3a2a06;              /* donkerbruin op goud, hoog contrast */
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.choice__badge {
  display: inline-block;
  background: var(--gold-bright);
  color: #3a2a06;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}

/* ---------- Openingstijden ---------- */
.hours {
  max-width: 520px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.hours__row {
  display: flex;
  justify-content: space-between;
  padding: 20px 26px;
  font-size: 1.1rem;
}
.hours__row + .hours__row { border-top: 1px solid var(--line); }
.hours__day { font-weight: 600; }
.hours__time { color: var(--accent); font-weight: 600; }

/* ---------- Boekingsmodule ---------- */
.booking {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}
.stepper {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  counter-reset: step;
}
.stepper li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}
.stepper li span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.stepper li.is-active { color: var(--accent); border-color: var(--accent); }
.stepper li.is-active span { background: var(--accent); color: #fff; }
.stepper li.is-done span { background: var(--gold); color: #fff; }

/* De stappen zijn knoppen geworden: klik je op een stap die je al hebt gehad,
   dan ga je daarheen. Voorheen kon dat alleen via "Terug" in de samenvatting,
   en die vond niet iedereen. De knop erft de opmaak van de <li>, zodat er
   visueel niets verandert. */
.stepper li button {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  color: inherit;
  font: inherit;
}
/* Alleen wat je al gehad hebt voelt klikbaar. Vooruit springen kan niet: zonder
   gekozen dienst valt er geen datum te kiezen. */
.stepper li.is-done button { cursor: pointer; }
.stepper li.is-done:hover { border-color: var(--gold); }
.stepper li.is-done:hover span { background: var(--accent); }
.stepper li button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }

.booking__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--card);
}
.booking__h { margin: 0 0 20px; font-size: 1.15rem; }
.booking__day { font-weight: 600; color: var(--accent); margin: -8px 0 18px; }

/* keuzeknoppen (dienst) */
.choice-grid { display: grid; gap: 14px; }
.choice {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  font-family: inherit;
  color: var(--ink); /* expliciet: voorkomt iOS-blauwe knoptekst op de dienstnaam */
}
.choice:hover { border-color: var(--accent); transform: translateY(-2px); }
.choice.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.choice__name { font-weight: 700; font-size: 1.1rem; }
.choice__price { font-weight: 700; color: var(--accent); font-size: 1.1rem; }
.choice__desc { grid-column: 1 / -1; color: var(--ink-soft); font-size: 0.92rem; }

/* kalender */
.calendar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px;
}
.daycell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s, transform 0.15s, background 0.2s;
}
.daycell:hover:not([disabled]) { border-color: var(--accent); transform: translateY(-2px); }
.daycell.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.daycell[disabled] { opacity: 0.4; cursor: not-allowed; }
.daycell__dow { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--ink-soft); }
.daycell__num { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.daycell__mon { font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; }
.daycell__free { font-size: 0.7rem; color: var(--accent); font-weight: 600; margin-top: 4px; }
.daycell[disabled] .daycell__free { color: var(--danger); }

.svc-edit__hint { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; }

/* tijdsloten */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.slot {
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.slot:hover:not(.is-booked) { border-color: var(--accent); transform: translateY(-2px); }
.slot.is-selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.slot.is-booked { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }

/* formulier */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field span { font-weight: 600; font-size: 0.92rem; }
.field input {
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form__submit { margin-top: 6px; }

/* samenvatting */
.summary {
  position: sticky;
  top: 92px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  background: var(--bg-alt);
}
.summary h4 { margin: 0 0 16px; font-size: 1.05rem; }
.summary__list { margin: 0; display: grid; gap: 12px; }
.summary__list > div { display: flex; justify-content: space-between; gap: 12px; }
.summary__list dt { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }
.summary__list dd { margin: 0; font-weight: 600; text-align: right; }
.booking__nav { margin-top: 20px; }
.summary__note { font-size: 0.78rem; color: var(--ink-soft); margin: 14px 0 0; font-style: italic; }

/* bevestiging */
.confirm {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 44px 34px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.confirm__check {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 2rem;
  display: grid;
  place-items: center;
  animation: pop 0.35s ease;
}
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm h3 { font-family: var(--display); font-size: 1.8rem; margin: 0 0 8px; }
.confirm__lead { color: var(--ink-soft); margin: 0 0 24px; }
.confirm__list {
  display: grid;
  gap: 12px;
  text-align: left;
  max-width: 340px;
  margin: 0 auto 24px;
  padding: 22px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
}
.confirm__list > div { display: flex; justify-content: space-between; gap: 12px; }
.confirm__list dt { color: var(--ink-soft); margin: 0; }
.confirm__list dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; word-break: break-word; }
.confirm__ingang {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--ink);
}
.confirm__mail { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 26px; }
.confirm__mail small { color: var(--gold); }

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: stretch;
}
.contact__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.contact__row {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.contact__label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 4px;
}
/* Pictogram vóór elke contactregel. Het vakje eromheen houdt de regels netjes op
   één lijn, ook als de tekst over twee regels loopt (zoals het adres). */
.contact__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-top: 2px;
}
.contact__icon svg { width: 19px; height: 19px; }
/* De merktekens van Instagram en TikTok in de tekstkleur in plaats van in het
   groen. Hun eigen kleuren zijn ook toegestaan, maar zouden het felste op de
   pagina zijn en de aandacht wegtrekken bij "Afspraak maken". */
.contact__icon--merk { color: var(--ink); }
.contact__waarde { min-width: 0; word-break: break-word; }
/* Het adres alleen brengt mensen bij de voordeur, en die is niet de ingang. Deze
   regel staat er los onder, niet als losse contactrij: hij hoort bij het adres. */
.contact__ingang {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.contact__cta { margin-top: 24px; align-self: flex-start; }
/* Het kaartvlak is een link (naar de route), maar mag er niet uitzien als tekst
   met een streepje eronder. Vandaar display:block en de eigen kleur. */
.contact__map {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact__map:hover { border-color: var(--accent); box-shadow: 0 4px 18px rgba(27, 67, 50, 0.12); }
.contact__map:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* De kaart vult het hele vlak. De kleuren zijn bewust teruggedraaid: een kaart in
   volle kleur is het felste vlak op de pagina en trekt de aandacht weg bij het
   groene speldje, dat juist moet opvallen. */
.kaart__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.55) contrast(0.94) brightness(1.03);
}
/* Het speldje staat precies in het midden van de afbeelding, want daar is de
   kaart omheen gesneden. Wordt kaart-locatie.jpg ooit vervangen, snijd hem dan
   weer rond de zaak, anders wijst het speldje de verkeerde plek aan. */
.kaart__speld {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
/* Verplichte bronvermelding bij OpenStreetMap. Niet weghalen: zonder deze regel
   gebruik je de kaart zonder toestemming. Wel zo onopvallend mogelijk gehouden.
   Het witte blokje eromheen is vervangen door een witte gloed achter de letters:
   die houdt de tekst leesbaar boven zowel de lichte straten als de donkere
   daken, zonder dat er een vlak op de kaart ligt. Kleiner dan dit niet maken,
   dan is hij op een telefoon niet meer te lezen. */
.kaart__bron {
  position: absolute;
  right: 8px;
  top: 7px;
  font-size: 10px;
  line-height: 1;
  color: #5b6058;
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.95),
    0 0 6px rgba(255, 255, 255, 0.75);
}
.kaart__kaartje {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: rgba(255, 253, 248, 0.94);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.kaart__naam { display: block; font-weight: 700; color: var(--ink); }
.kaart__adres { display: block; font-size: 0.92rem; color: var(--ink-soft); margin-top: 2px; }
.kaart__ingang { display: block; font-size: 0.92rem; font-weight: 600; color: var(--accent); margin-top: 4px; }

/* ---------- Footer ---------- */
.footer { background: #0e1a12; color: rgba(255, 255, 255, 0.8); padding-top: 64px; }
.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer__brand p { margin: 12px 0 0; color: rgba(255, 255, 255, 0.55); max-width: 260px; }
.footer__col h5 {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--gold);
  margin: 0 0 16px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a:hover { color: #fff; }
.footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Helpers ---------- */
.is-hidden { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .booking { grid-template-columns: 1fr; }
  .summary { position: static; }
  .contact { grid-template-columns: 1fr; }
  .section { padding: 72px 0; }
}
@media (max-width: 520px) {
  .container { padding: 0 18px; }
  .hero { min-height: 88vh; }
  .booking__panel { padding: 20px; }
  .stepper li { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Mobiel menu (hamburger) op de homepage-nav ---------- */
.nav__menu { display: flex; align-items: center; gap: 28px; }
.nav__burger { display: none; }
@media (max-width: 860px) {
  .nav__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #fff;               /* over de donkere hero */
    padding: 0;
  }
  .nav__burger span {
    display: block;
    width: 24px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.2s;
  }
  .nav.is-scrolled .nav__burger { color: var(--ink); }

  /* Uitklapmenu */
  .nav__menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    padding: 8px 24px 20px;
    display: none;
  }
  .nav--open .nav__menu { display: flex; }

  /* Balk wordt crème zodra het menu open is (leesbaar logo/burger) */
  .nav--open { background: var(--card); border-bottom-color: var(--line); }
  .nav--open .nav__logo { color: var(--accent); }
  .nav--open .nav__burger { color: var(--ink); }
  .nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav--open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Donkere, leesbare menu-items (overschrijft de hero-lichte kleuren) */
  .nav__menu .nav__links { flex-direction: column; gap: 0; }
  .nav .nav__menu .nav__links a { color: var(--ink); padding: 14px 2px; border-bottom: 1px solid var(--line); }
  .nav .nav__menu .nav__links a:hover { color: var(--accent); }
  .nav__menu .nav__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; }
  .nav .nav__menu .nav__login { color: var(--accent); padding: 4px 2px; }
  .nav__menu .nav__cta { width: 100%; }
}

/* ============================================================
   Fase 1: aanvulling: nav-acties, subpagina's, account, admin
   ============================================================ */

/* ---------- Nav-acties + login-link ---------- */
.nav__actions { display: flex; align-items: center; gap: 20px; }
.nav__login {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  transition: color 0.2s;
  cursor: pointer;
}
.nav__login:hover { color: var(--accent-dark); }
.nav__login--light { color: rgba(255, 255, 255, 0.85); }
.nav__login--light:hover { color: #fff; }

/* ---------- Footer-balk met admin-link ---------- */
.footer__bar-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer__admin { color: rgba(255, 255, 255, 0.5); }
.footer__admin:hover { color: var(--gold-bright); }

/* ---------- Subpagina-header ---------- */
.subnav {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.subnav--admin { background: #0e1a12; border-bottom-color: rgba(255,255,255,0.08); }
.subnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.admin-tag {
  font-family: var(--font);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--gold-bright);
  color: #3a2a06;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  margin-left: 12px;         /* ruimte t.o.v. het woordmerk (flex-item) */
  align-self: center;
  flex: 0 0 auto;
  line-height: 1;
}

/* ---------- Portaal-header op smartphone ----------
   Zonder deze regel liep de header op smalle schermen buiten beeld:
   het woordmerk brak in tweeën, de naam overlapte de tag en de
   Uitloggen-knop viel deels buiten het scherm (horizontale overflow). */
@media (max-width: 560px) {
  .subnav__inner { height: 60px; gap: 14px; }
  .subnav .nav__logo { font-size: 1.05rem; white-space: nowrap; min-width: 0; }
  .admin-tag { font-size: 0.56rem; padding: 3px 6px; margin-left: 8px; letter-spacing: 0.06em; white-space: nowrap; }
  .nav__actions { gap: 10px; min-width: 0; }
  .subnav .nav__login { font-size: 0.85rem; }
  /* Naam (medewerker) en "Naar site" (admin) dragen beide nav__login--light.
     Op de telefoon weglaten: de naam staat ook onder 'Mijn account' en het
     logo linkt zelf al naar de site. Zo houdt 'Uitloggen' genoeg ruimte. */
  .subnav--admin .nav__login--light { display: none; }
  .subnav--admin .admin-tag { display: none; } /* op smal scherm weg: geeft de 👤-knop lucht */
}
/* Heel smalle telefoons: de secundaire snelkoppeling naast 'Uitloggen'
   (bv. "Nieuwe afspraak" op het klant-account) inklappen, zodat de
   Uitloggen-knop altijd volledig in beeld blijft. */
@media (max-width: 400px) {
  .subnav .nav__actions .nav__login { display: none; }
}

/* ---------- Auth (login/registratie) ---------- */
.auth {
  min-height: calc(100vh - 73px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}
.auth__card {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
}
.auth__head { text-align: center; margin-bottom: 26px; }
.auth__title { font-family: var(--display); font-size: 1.8rem; margin: 0 0 8px; }
.auth__sub { color: var(--ink-soft); margin: 0; font-size: 0.98rem; }
.auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--bg-alt);
  padding: 5px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.auth__tab {
  border: none;
  background: transparent;
  padding: 10px;
  border-radius: 999px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.auth__tab.is-active { background: var(--accent); color: #fff; }
.auth__note { font-size: 0.8rem; color: var(--ink-soft); text-align: center; margin: 4px 0 0; font-style: italic; }

/* ---------- Account ---------- */
.account { padding: 40px 24px 80px; max-width: 980px; }
.account__head { margin-bottom: 34px; }
.account__name { font-family: var(--display); font-size: 2.2rem; margin: 6px 0 6px; }
.account__meta { color: var(--ink-soft); margin: 0; }
.account__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: start; }

/* ---------- Panels (account + admin) ---------- */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.panel__title { font-size: 1.15rem; margin: 0 0 18px; font-family: var(--display); }
.panel__head .panel__title { margin-bottom: 0; }

/* ---------- Abonnement-status ---------- */
.sub-plan { font-weight: 600; margin: 14px 0 6px; }
.sub-count { margin: 0 0 12px; color: var(--ink-soft); }
.sub-count strong { color: var(--accent); font-size: 1.15rem; }
.sub-renew { font-size: 0.85rem; color: var(--ink-soft); margin: 10px 0 0; }
.progress { height: 10px; background: var(--bg-alt); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.sub-none p { color: var(--ink-soft); margin: 0 0 16px; }

/* ---------- Pills / statuslabels ---------- */
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.pill--ok { background: var(--accent-soft); color: var(--accent-dark); }
.pill--muted { background: var(--bg-alt); color: var(--ink-soft); }
.pill--warn { background: #f7ecd2; color: #86601a; }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 14px; border-bottom: 1px solid var(--line); }
.table tr:last-child td { border-bottom: none; }
.table__empty { text-align: center; color: var(--ink-soft); font-style: italic; }

/* ---------- Admin ---------- */
.admin-body { background: var(--bg); }
.admin { padding: 40px 24px 80px; max-width: var(--maxw); }
.admin__head { margin-bottom: 28px; }
.admin__title { font-family: var(--display); font-size: 2.2rem; margin: 0 0 6px; }
.admin__sub { color: var(--ink-soft); margin: 0; }
.admin__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.admin__filter { font-size: 0.9rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.admin__filter select {
  font-family: inherit;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}

/* ---------- Statistieken (admin) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat__value { font-size: 2rem; font-weight: 700; color: var(--accent); font-family: var(--display); line-height: 1; }
.stat__label { font-weight: 600; margin-top: 6px; }
.stat__sub { font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- Periode-filter (Overzicht) ---------- */
.period-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-bottom: 22px;
}
.period-presets { display: inline-flex; flex-wrap: wrap; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.period-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 7px 15px; border-radius: 999px; font: inherit; font-size: 0.9rem;
  font-weight: 600; color: var(--ink-soft); transition: background .15s, color .15s;
}
.period-btn:hover { color: var(--ink); }
.period-btn.is-active { background: var(--accent); color: #fff; }
.period-custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.period-custom label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--ink-soft); }
.period-custom input[type=date] { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.period-range { font-size: 0.9rem; color: var(--ink-soft); font-weight: 600; margin-left: auto; }

/* ---------- Omzet-blok: eigen filter + type-schakelaar ---------- */
.panel__head--wrap { flex-wrap: wrap; gap: 12px; }
.rev-controls { display: inline-flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.period-presets--sm .period-btn { padding: 5px 11px; font-size: 0.84rem; }
.rev-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 14px; }
.rev-custom label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--ink-soft); }
.rev-custom input[type=month] { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.chart .dot { cursor: pointer; transition: r .1s; }
.chart .dot:hover { r: 6; }

/* ---------- Tabel: getallen, sorteren, accenten ---------- */
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table--sortable th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.table--sortable th[data-sort]:hover { color: var(--accent); }
.table--sortable th.is-sorted { color: var(--accent); }
.table--sortable th.is-sorted::after { content: " ▾"; font-size: 0.7em; }
.table--sortable th.is-sorted[data-dir="asc"]::after { content: " ▴"; }
.table td.cell-warn { color: #b26a00; font-weight: 600; }
.table td.cell-bad { color: var(--danger, #c0392b); font-weight: 700; }
.table tr.row-muted td { color: var(--ink-soft); background: color-mix(in srgb, var(--line) 25%, transparent); }
.table-note { font-size: 0.82rem; color: var(--ink-soft); margin: 12px 2px 0; }
.table tfoot .row-total td { border-top: 2px solid var(--line); background: color-mix(in srgb, var(--line) 20%, transparent); }

/* ---------- Diensteneditor: volgorde + medewerkerkeuze ---------- */
.svc-edit__top { display: flex; align-items: flex-start; gap: 12px; }
.svc-edit__top .svc-edit__grid { flex: 1; }
.svc-order { display: inline-flex; flex-direction: column; gap: 4px; padding-top: 26px; }
.iconbtn {
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  width: 30px; height: 26px; border-radius: 7px; font-size: 0.8rem; line-height: 1;
  color: var(--ink-soft); display: flex; align-items: center; justify-content: center;
}
.iconbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.iconbtn:disabled { opacity: 0.35; cursor: default; }
.svc-emps { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin: 6px 0 12px; }
.svc-emps legend { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); padding: 0 6px; }
.svc-emp { display: inline-flex; align-items: center; gap: 6px; margin: 4px 14px 4px 0; font-size: 0.92rem; cursor: pointer; }
.svc-emp input { width: 16px; height: 16px; cursor: pointer; }
.svc-emp--all { display: flex; margin: 2px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-weight: 600; }
.svc-emps__list { display: flex; flex-wrap: wrap; align-items: center; }
#emp-add-services, #emp-edit-services { margin: 6px 0 14px; }
.part-eur { color: var(--ink-soft); }
.svc-edit__name { font-size: 1.05rem; }
.svc-edit__price { color: var(--accent); font-weight: 700; margin-left: 6px; }
.inline-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.inline-add input { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.inline-add input[type=number] { width: 100px; }
.inline-input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.inline-input--num { width: 90px; text-align: right; }

/* Aan/uit-schakelaar per dienst of abonnement (tijdelijk uitzetten i.p.v. verwijderen) */
.svc-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: 0 0 auto; user-select: none; }
.svc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.svc-switch__track {
  width: 44px; height: 25px; border-radius: 999px; background: var(--line);
  position: relative; transition: background 0.15s ease; flex: 0 0 auto;
}
.svc-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease;
}
.svc-switch input:checked + .svc-switch__track { background: var(--accent); }
.svc-switch input:checked + .svc-switch__track::after { transform: translateX(19px); }
.svc-switch input:focus-visible + .svc-switch__track { box-shadow: 0 0 0 3px var(--accent-soft); }
.svc-switch input:disabled + .svc-switch__track { opacity: 0.5; }
.svc-switch__text { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); min-width: 26px; }
.svc-off-tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--line) 55%, transparent);
  color: var(--ink-soft); font-size: 0.75rem; font-weight: 600; vertical-align: middle;
}
/* Uitgeschakeld: duidelijk gedimd, maar alle instellingen blijven bewerkbaar. */
.svc-edit.is-off { border-style: dashed; background: color-mix(in srgb, var(--line) 12%, transparent); }
.svc-edit.is-off .svc-edit__name,
.svc-edit.is-off .svc-edit__price { opacity: 0.6; }

/* Diensten-tab: compacte onderdeel-regels + inklapbare toevoeg-formulieren */
.row-list { display: flex; flex-direction: column; }
.part-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.part-row:last-child { border-bottom: none; }
.part-row .inline-input { flex: 1 1 150px; width: auto; min-width: 0; padding: 8px 10px; }
.part-row .inline-input--num { flex: 0 0 88px; }
/* Pijltjes om de volgorde te bepalen. Die volgorde bepaalt ook hoe de naam van een
   samengestelde dienst wordt opgebouwd ("Knippen + Baard" of "Baard + Knippen"). */
.part-order { display: inline-flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.part-order .iconbtn { width: 26px; height: 20px; font-size: 0.65rem; }
.row-list .table__empty { color: var(--ink-soft); padding: 14px 0; }
.add-form { margin-top: 16px; padding-top: 18px; border-top: 1px dashed var(--line); }
.add-form.is-collapsed { display: none; }
.add-form__title { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.add-form__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.add-form__row input { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.add-form__row input[name=name] { flex: 1 1 170px; min-width: 0; }
.add-form__row input[type=number] { width: 120px; }
/* Compacte "+"-knop om een toevoeg-formulier open/dicht te klappen (goede tap-grootte op mobiel) */
.add-toggle { min-width: 40px; min-height: 40px; padding: 0 10px; font-size: 1.4rem; line-height: 1; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
/* Website-slot: opvallende rand als de onderhoudsmodus aan staat */
.maint-card--on { border-color: #c0392b; background: color-mix(in srgb, #c0392b 6%, var(--card)); }
.maint-card--on .btn { background: #c0392b; border-color: #c0392b; }

/* ---------- Plankeuze (abonnementspagina) ---------- */
.plan-choice { margin: 0 0 24px; }
.plan-choice__title { font-size: 1.1rem; margin: 0 0 12px; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  border: 2px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--card); transition: border-color .15s, box-shadow .15s; }
.plan-card:hover { border-color: var(--accent); }
.plan-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.plan-card__name { font-weight: 700; font-size: 1.05rem; }
.plan-card__price { font-family: var(--display); font-size: 1.5rem; color: var(--accent); font-weight: 700; }
.plan-card__price small { font-size: 0.8rem; color: var(--ink-soft); font-weight: 500; }
.plan-card__desc { font-size: 0.88rem; color: var(--ink-soft); }

/* "Geen voorkeur"-kapperkeuze subtiel onderscheiden */
.choice--any { border-style: dashed; }
.choice--any .choice__name::before { content: "🎲 "; }

/* ---------- Taartdiagram (boekingen per onderdeel + dekking) ---------- */
.pie-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 34px; }
.pie-block { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; flex: 1 1 340px; }
.pie-block--coverage { flex: 0 1 320px; border-left: 1px solid var(--line); padding-left: 28px; }
/* Op smal scherm staan de twee taarten onder elkaar: linkerrand -> bovenrand. */
@media (max-width: 700px) {
  .pie-block--coverage { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; width: 100%; }
}
.pie-subtitle { flex-basis: 100%; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 2px; }
.chart--pie { flex: 0 0 240px; max-width: 260px; }
.chart--pie-sm { flex: 0 0 170px; max-width: 190px; }
.chart--pie svg { width: 100%; height: auto; display: block; }
.legend--pie { flex: 1 1 160px; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 0; }
.legend--pie .legend__item { font-size: 0.95rem; }
.pie-label { fill: #fff; font-size: 12px; font-weight: 700; pointer-events: none; }
.pie-center-num { fill: var(--ink); font-size: 30px; font-weight: 700; font-family: var(--display); }
.pie-center-lbl { fill: var(--ink-soft); font-size: 12px; }
.slice { cursor: pointer; transition: opacity .12s; }
.slice:hover { opacity: 0.85; }
/* "Alles" op één lijn met de dienst-vinkjes, met een subtiel scheidingsstreepje. */
.svc-emp--toggle { font-weight: 600; margin-right: 14px; padding-right: 14px; border-right: 1px solid var(--line); }

/* ---------- Responsive (nieuwe onderdelen) ---------- */
@media (max-width: 860px) {
  .account__grid { grid-template-columns: 1fr; }
  .admin__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Tabellen -> nette gestapelde kaarten op mobiel: label klein bovenaan,
     waarde/dropdown eronder op volle breedte (geen grote lege gaten meer). */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; padding: 4px 6px; }
  .table td {
    border: none; border-bottom: 1px solid var(--line);
    padding: 10px 12px; text-align: left;
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  }
  .table tr td:last-child { border-bottom: none; }
  .table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--ink-soft);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .table td.num { text-align: left; }
  /* Bedieningselementen op volle breedte -> makkelijk aan te tikken op de telefoon */
  .table td select,
  .table td input,
  .table td .field__select { width: 100%; max-width: 100%; }
  .table td .dienst-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
}

/* ============================================================
   Fase 1: Abonnement afsluiten (subpagina)
   ============================================================ */
.subpage { padding: 108px 24px 80px; max-width: var(--maxw); }
.subpage__title { font-family: var(--display); font-size: clamp(2rem, 4.5vw, 2.9rem); margin: 0 0 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pay__intro { color: var(--ink-soft); margin: 0 0 20px; }
.acct-ok { margin: 0 0 6px; }

/* Betaalmethodes (mock) */
.pay-methods { border: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.pay-method {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.pay-method:hover { border-color: var(--accent); }
.pay-method input { accent-color: var(--accent); width: 18px; height: 18px; }
.pay-method:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pay-method__body { display: flex; flex-direction: column; }
.pay-method__body strong { font-size: 1rem; }
.pay-method__body small { color: var(--ink-soft); }

/* Bevestiging binnen de flow (geen extra rand/schaduw) */
.confirm--inline { max-width: none; margin: 0; border: none; box-shadow: none; padding: 20px 0; text-align: center; }
.confirm__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ============================================================
   Fase 1: Admin: grafieken, legenda, tooltip, zoeken
   ============================================================ */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.chart-card__hint { font-size: 0.82rem; color: var(--ink-soft); }
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }

/* SVG-onderdelen */
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .bar { transition: opacity 0.15s; }
.chart .bar:hover { opacity: 0.82; cursor: pointer; }
.chart .axis-x { font-size: 12px; fill: var(--ink-soft); text-anchor: middle; }
.chart .axis-y { font-size: 11px; fill: var(--ink-soft); text-anchor: end; }
.chart .axis-label { font-size: 13px; fill: var(--ink); font-weight: 500; }
.chart .bar-val { font-size: 12px; fill: var(--ink-soft); text-anchor: middle; font-weight: 600; }
.chart .bar-val--h { text-anchor: start; }

/* Legenda */
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; color: var(--ink); }
.legend__dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Tooltip (gedeeld) */
.chart-tip {
  position: fixed;
  z-index: 100;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--ink);
  color: #fff;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 0.82rem;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.chart-tip strong { font-weight: 700; }

/* Annulering-status */
.pill--crit { background: #f6dcdc; color: #8f2a2a; }

/* Klanten zoeken */
.admin__search { flex: 1; max-width: 340px; }
.admin__search input {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}
.admin__search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.admin__count { color: var(--ink-soft); font-size: 0.85rem; margin: 0 0 12px; }

@media (max-width: 860px) {
  .charts { grid-template-columns: 1fr; }
}

.auth__forgot { text-align: center; margin: 2px 0 0; }
.auth__forgot a { color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.auth__forgot a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ============================================================
   Fase 1: Admin extra's: omzet, agenda, modal, klantdetail
   ============================================================ */
.chart-card--wide { margin-bottom: 28px; }

/* No-show status */
.pill--noshow { background: #e7e3f5; color: #4a3aa7; }

/* Klikbare tabelrijen */
.row-click { cursor: pointer; transition: background 0.15s; }
.row-click:hover { background: var(--bg-alt); }
.row-click:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Dagagenda */
.agenda__day { font-weight: 600; color: var(--accent); margin: 0 0 16px; text-transform: capitalize; }
.agenda__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.agenda__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.agenda__item--geannuleerd { border-left-color: #d03b3b; opacity: 0.7; }
.agenda__item--no-show { border-left-color: #4a3aa7; }
.agenda__item--in-afwachting { border-left-color: var(--gold); }
.agenda__time { font-weight: 700; color: var(--accent); font-size: 1.05rem; }
.agenda__info { display: flex; flex-direction: column; }
.agenda__info small { color: var(--ink-soft); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal.is-hidden { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(14, 26, 18, 0.5); backdrop-filter: blur(2px); }
.modal__box {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 620px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  animation: pop 0.2s ease;
}
.modal__close {
  position: absolute; top: 14px; right: 16px;
  border: none; background: transparent; font-size: 1.6rem; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
}
.modal__close:hover { color: var(--ink); }

/* Klantdetail */
.cd__name { font-family: var(--display); font-size: 1.5rem; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd__meta { color: var(--ink-soft); margin: 0 0 20px; }
.cd__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.cd__stats > div { background: var(--bg-alt); border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 3px; }
.cd__num { font-weight: 700; color: var(--accent); font-size: 1.1rem; }
.cd__lbl { font-size: 0.78rem; color: var(--ink-soft); }
.cd__notes { background: #fbf3df; border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 18px; font-size: 0.92rem; }
.cd__sub { font-size: 1rem; margin: 0 0 12px; }

@media (max-width: 520px) {
  .cd__stats { grid-template-columns: 1fr; }
  .agenda__item { grid-template-columns: 54px 1fr; }
  .agenda__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ============================================================
   Fase 1: Admin: status bewerken, verplaatsen, diensten
   ============================================================ */
.status-select {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.status-select.is-bevestigd { background: var(--accent-soft); color: var(--accent-dark); }
.status-select.is-voltooid { background: var(--bg-alt); color: var(--ink-soft); }
.status-select.is-geannuleerd { background: #f6dcdc; color: #8f2a2a; }
.status-select.is-noshow { background: #e7e3f5; color: #4a3aa7; }

.agenda__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.linkbtn {
  border: none; background: transparent;
  color: var(--accent); font-family: inherit; font-weight: 600; font-size: 0.85rem;
  cursor: pointer; padding: 4px 2px; text-decoration: underline;
}
.linkbtn:hover { color: var(--accent-dark); }

/* Diensten-editor */
.svc-edit { margin-bottom: 16px; }
.svc-edit__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.svc-edit textarea {
  font-family: inherit; font-size: 1rem;
  padding: 10px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); resize: vertical; width: 100%;
}
.svc-edit textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.svc-edit__note { font-size: 0.82rem; color: var(--ink-soft); margin: 8px 0 0; }
.cd__profile { margin-bottom: 18px; }

@media (max-width: 520px) { .svc-edit__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Fase 1: Admin portaal: topmenu (tabs) + periode-filters
   ============================================================ */
.admin-tabs {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.admin-tabs__inner {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.admin-tabs__inner::-webkit-scrollbar { display: none; }
.admin-tab {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 16px 20px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.tabpanel__head { margin-bottom: 22px; }

/* Periode-balk */
.period {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.seg { display: inline-flex; background: var(--bg-alt); border-radius: 999px; padding: 4px; gap: 2px; }
.seg__btn {
  border: none;
  background: transparent;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.seg__btn.is-active { background: var(--accent); color: #fff; }
.period__nav { display: inline-flex; align-items: center; gap: 10px; }
.period__nav input[type="date"] {
  font-family: inherit;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}
.navbtn {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 50%;
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  color: var(--accent);
  transition: border-color 0.2s, background 0.2s;
}
.navbtn:hover { border-color: var(--accent); background: var(--accent-soft); }
.period__label { font-weight: 600; min-width: 170px; text-align: center; text-transform: capitalize; }
.period__count { color: var(--ink-soft); font-size: 0.9rem; }

/* Toolbar (filters + export) */
.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.admin__filter { flex-wrap: wrap; }

/* Mobiel: stapelen en knoppen op volle breedte */
@media (max-width: 620px) {
  .period, .toolbar { flex-direction: column; align-items: stretch; }
  .seg { justify-content: space-between; }
  .seg__btn { flex: 1; text-align: center; padding: 10px 6px; }
  .period__nav { justify-content: space-between; }
  .period__nav input[type="date"] { flex: 1; }
  .period__label { min-width: 0; flex: 1; }
  .admin__search { max-width: none; }
  .toolbar .btn { width: 100%; }
  .admin-tab { padding: 14px 16px; }
}

/* Abonnee-ster in agenda & boekingen */
.star { color: var(--gold-bright); font-size: 0.95em; text-shadow: 0 0 1px rgba(184,134,47,0.6); }
.star-legend { font-size: 0.8rem; color: var(--ink-soft); margin: -6px 0 14px; }
.star-legend .star { margin-right: 2px; }

/* ============================================================
   Fase 1: Klantportaal: overzicht, afspraken, profiel
   ============================================================ */
.account__subhead { font-family: var(--display); font-size: 1.25rem; margin: 28px 0 14px; }
.account__subhead:first-of-type { margin-top: 0; }
.link { color: var(--accent); font-weight: 600; text-decoration: underline; }

/* Overzicht */
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.next-card { display: flex; flex-direction: column; gap: 4px; }
.next-card__date { font-weight: 700; font-size: 1.15rem; text-transform: capitalize; }
.next-card__time { color: var(--accent); font-weight: 600; }
.next-card__svc { color: var(--ink-soft); margin-bottom: 8px; }
.next-card .btn { align-self: flex-start; margin-top: 6px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Aankomende afspraken (kaarten) */
.appt-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 12px;
}
.appt-card__main { display: flex; flex-direction: column; gap: 3px; }
.appt-card__date { font-weight: 700; text-transform: capitalize; }
.appt-card__svc { color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.appt-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn--danger { color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: #f6dcdc; }

/* Profiel */
.profile-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.panel--muted { background: var(--bg-alt); }
.field__lock { font-style: normal; color: var(--ink-soft); font-weight: 400; font-size: 0.85em; }
.field__hint { color: var(--ink-soft); font-size: 0.8rem; }
.field input[readonly] { background: var(--bg-alt); color: var(--ink-soft); cursor: not-allowed; }
.field__label { font-weight: 600; font-size: 0.92rem; margin: 4px 0 8px; }
.form__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form__saved { color: var(--accent); font-weight: 600; }

/* Account verwijderen (AVG): over de volle breedte, onderaan en duidelijk apart. */
.danger-zone { grid-column: 1 / -1; }
.panel--danger { border-color: #e6c9c9; background: #fdf7f6; }
.panel--danger .panel__title { color: var(--danger); }
.danger-zone__list { margin: 0 0 16px; padding-left: 20px; color: var(--ink-soft); font-size: 0.92rem; }
.danger-zone__list li { margin-bottom: 4px; }
.danger-zone__confirm { margin-top: 16px; border-top: 1px solid #e6c9c9; padding-top: 16px; }

@media (max-width: 760px) {
  .overview-grid, .profile-grid { grid-template-columns: 1fr; }
  .appt-card__actions { width: 100%; }
  .appt-card__actions .btn { flex: 1; }
}
@media (max-width: 520px) {
  /* Onomkeerbare knoppen op mobiel volle breedte: makkelijker raken, minder missers. */
  .danger-zone .btn { width: 100%; }
  .danger-zone .form__row { gap: 10px; }
}

/* ============================================================
   Fase 1: Abonnementsdekking (boeken) + account-ID (admin)
   ============================================================ */
/* Abonnee-banner boven de boekingsmodule */
.sub-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.95rem;
}
.sub-banner .star { margin-right: 4px; }
.sub-banner--warn { background: #f7ecd2; border-color: var(--gold); color: #7a5a12; }

/* Notitie in samenvatting + bevestiging */
.summary__sub {
  background: var(--card);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--accent-dark);
  margin: 0 0 14px;
}
.confirm__sub { color: var(--accent-dark); font-weight: 600; margin: -8px 0 20px; }

/* Account-ID weergave */
.acct-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--bg-alt);
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--ink);
}

/* ============================================================
   Fase 1: Logo (schaar-merk) van Gladde Barber
   ============================================================ */
.nav__logo { display: inline-flex; align-items: center; }
.logo-mark {
  width: 1.5em; height: 1.5em;
  margin-right: 0.5em;
  flex: 0 0 auto;
  transform: rotate(0deg);
}
.logo-mark line,
.logo-mark circle { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.logo-mark .pivot { fill: var(--gold-bright); stroke: none; }

/* Dienst-keuze in boekingentabel */
.svc-select {
  font-family: inherit; font-size: 0.85rem;
  padding: 6px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); color: var(--ink); cursor: pointer;
}
.svc-select:focus, .status-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Klant bewerken in detailvenster */
.cd__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field textarea {
  font-family: inherit; font-size: 1rem;
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); resize: vertical; width: 100%;
}
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cd__danger { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--danger); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--danger) 5%, transparent); }
.cd__danger .cd__sub { margin-top: 0; color: var(--danger); }
.cd__msg { font-size: 0.88rem; margin: 8px 0 0; color: var(--accent-dark); font-weight: 600; }
.cd__msg--err { color: var(--danger); }

@media (max-width: 520px) { .cd__form-grid { grid-template-columns: 1fr; } }

.linkbtn--danger { color: var(--danger); }
.svc-add { margin-top: 8px; }

/* ---------- Dagrooster (agenda per kapper) ---------- */
.rooster {
  display: grid;
  grid-template-columns: 56px repeat(var(--cols), minmax(150px, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow-x: auto; background: var(--card);
}
.ros-corner, .ros-head { position: sticky; top: 0; z-index: 2; background: var(--card); }
.ros-head {
  padding: 10px 12px; font-weight: 700; font-size: 0.9rem;
  border-left: 1px solid var(--line); border-bottom: 2px solid var(--line); white-space: nowrap;
}
.ros-corner { border-bottom: 2px solid var(--line); }
.ros-time {
  padding: 8px 8px; font-size: 0.78rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); text-align: right;
}
.ros-cell { border-left: 1px solid var(--line); border-top: 1px solid var(--line); min-height: 46px; }
.ros-cell--closed {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; color: var(--ink-soft);
  background: repeating-linear-gradient(45deg, transparent, transparent 5px, color-mix(in srgb, var(--line) 40%, transparent) 5px, color-mix(in srgb, var(--line) 40%, transparent) 10px);
}
.appt {
  border-left: 4px solid var(--accent); border-top: 1px solid var(--line);
  padding: 5px 7px 6px; display: flex; flex-direction: column; gap: 2px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}
.appt--voltooid { border-left-color: #6b7280; background: color-mix(in srgb, #6b7280 8%, var(--card)); }
.appt--no-show { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--card)); }
.appt__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.appt__time { font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.appt__top .status-select { font-size: 0.68rem; padding: 2px 4px; }
.appt__name { font-size: 0.88rem; line-height: 1.2; }
.appt__svc { font-size: 0.75rem; color: var(--ink-soft); }
.appt__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.appt__move { font-size: 0.72rem; }

/* Kosten-tag (abonnement / los bedrag) in agenda, boekingen, klantdetail */
.cost-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; margin-left: 4px;
  background: var(--bg-alt); color: var(--ink-soft); vertical-align: middle;
  white-space: nowrap;                 /* "abonnement · €10" nooit halverwege afbreken */
}
/* Dropdown met de kosten-tag er consistent ONDER (overal hetzelfde, geen verspringen). */
.dienst-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.dienst-cell .cost-tag { margin-left: 0; }
.cost-tag--sub { background: var(--accent-soft); color: var(--accent-dark); }
/* Meerdere kosten-labels naast elkaar (abonnement + te-betalen bedrag) op één regel. */
.cost-tags { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cd__plan { background: var(--accent-soft); color: var(--accent-dark); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 16px; font-size: 0.9rem; }

/* Wachtwoord-blok in klantdetail + nette scheiding van de rest */
.cd__pw { margin: 22px 0 6px; padding-top: 20px; border-top: 1px solid var(--line); }
.cd__pw .cd__sub { margin-top: 0; }
.cd__pw-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cd__pw-input {
  flex: 1 1 200px; min-width: 0;
  font-family: inherit; font-size: 1rem;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.cd__pw-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cd__stats { margin-top: 22px; }

/* Demo-reset blok in Overzicht */
.demo-reset { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.demo-reset .admin__sub { max-width: 620px; margin: 6px 0 14px; }

/* Uitlog-knop in de donkere admin-balk: wit i.p.v. groen (leesbaar) */
.subnav--admin #admin-logout {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.subnav--admin #admin-logout:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* Afwezigheid / sluitingen */
.closure-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--danger);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px;
}
.closure-who {
  display: inline-block; font-size: 0.72rem; font-weight: 700; margin-right: 8px;
  padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark);
}
/* Nette dropdown in een formulierveld (o.a. "Voor wie?"), past bij .field input. */
.field__select {
  width: 100%; padding: 13px 42px 13px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1rem; font-family: inherit; color: var(--ink); background-color: var(--card);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2355584f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.field__select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.closure-note {
  background: #f6dcdc; color: #8f2a2a; border-radius: var(--radius-sm);
  padding: 12px 16px; margin: 0 0 16px; font-weight: 600;
}
.daycell.is-closed .daycell__free { color: var(--danger); }

/* ============================================================
   Fase 2: laadstatus, meldingen
   ============================================================ */
.loading { color: var(--ink-soft); font-style: italic; padding: 12px 0; margin: 0; }
.loading--error { color: var(--danger); font-style: normal; font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--accent); color: #fff; padding: 14px 22px; border-radius: 999px;
  box-shadow: var(--shadow); font-weight: 600; font-size: 0.95rem; z-index: 300;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: var(--danger); }

.confirm__invite { background: var(--accent-soft); color: var(--accent-dark);
  border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 20px; font-size: .92rem; }

/* ============================================================
   Fase 2: juridische pagina (privacybeleid) + privacy-notitie
   ============================================================ */
.legal { padding: 108px 24px 80px; max-width: 760px; }
.legal__title { font-family: var(--display); font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 6px; }
.legal__updated { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 28px; }
/* Artikelen tellen zichzelf. Valt er een artikel weg (bijvoorbeeld het abonnement
   als dat uitstaat), dan schuift de nummering vanzelf door en klopt hij nog steeds. */
.legal { counter-reset: artikel; }
.legal h2 { font-family: var(--display); font-size: 1.3rem; margin: 32px 0 10px; }
.legal h2::before { counter-increment: artikel; content: counter(artikel) ". "; }
.legal p, .legal li { color: var(--ink); line-height: 1.7; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent); text-decoration: underline; }
.legal a.btn { text-decoration: none; } /* knoppen (bv. "Terug naar de site") niet onderstrepen */
.legal__note {
  background: #fbf3df; border: 1px solid var(--gold-bright); border-radius: var(--radius-sm);
  padding: 16px 18px; margin: 0 0 28px; font-size: 0.92rem; color: #6b5312;
}
.legal__note a { color: var(--accent-dark); }
.legal [data-fill] { background: var(--accent-soft); color: var(--accent-dark); padding: 0 4px; border-radius: 4px; font-weight: 600; }
.legal__back { margin-top: 36px; }

.form__privacy { font-size: 0.8rem; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.5; }
.form__privacy a { color: var(--accent); }

/* Footer-links (voorwaarden + privacy) naast elkaar */
.footer__links { display: inline-flex; gap: 18px; flex-wrap: wrap; }

/* Abonnement opzeggen in het klantportaal */
.sub-cancel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.sub-cancel .summary__note { margin-top: 8px; }

/* Inline foutmelding onder een invoerveld (bijv. telefoonnummer) */
.field__error { color: var(--danger); font-size: 0.82rem; margin: 6px 0 0; font-weight: 600; }
.field__error.is-hidden { display: none; }
.input--error, input.input--error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(161, 54, 54, 0.12) !important;
}

/* Live wachtwoord-checklist onder het invoerveld */
.pw-check { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pw-check__item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--ink-soft); transition: color 0.15s;
}
.pw-check__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  font-size: 0.65rem; font-weight: 700; line-height: 1; text-align: center;
  background: var(--bg-alt); color: var(--ink-soft);
}
.pw-check__item.is-ok { color: #1b7a3d; }
.pw-check__item.is-ok .pw-check__icon { background: #d9efdf; color: #1b7a3d; }
.pw-check__item.is-bad { color: var(--danger); }
.pw-check__item.is-bad .pw-check__icon { background: #f6dcdc; color: var(--danger); }

/* Oogje om wachtwoord te tonen/verbergen */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
  border-radius: 8px; padding: 0;
}
.pw-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Klant-wachtwoordveld (admin): oogje binnen de flex-rij + hint */
.cd__pw-row .pw-wrap { flex: 1 1 200px; min-width: 0; }
.cd__pw-hint { font-size: 0.8rem; color: var(--ink-soft); margin: 8px 0 0; }

/* Medewerker-toewijzing + abonnee-info voor personeel */
.emp-select {
  font-family: inherit; font-size: 0.85rem; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); cursor: pointer;
}
.emp-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.emp-subinfo { color: var(--accent-dark); font-weight: 600; }

/* €-teken vóór het prijsveld in de onderdelenlijst */
.part-row .part-price { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.part-row .part-price .inline-input--num { flex: 0 0 88px; }
.part-row .part-price .part-eur-sign { color: var(--muted); }

/* ===== Mobiel: footer stapelen (geen horizontale overloop) ===== */
@media (max-width: 640px) {
  .footer__inner { grid-template-columns: 1fr; gap: 30px; padding-bottom: 40px; }
  .footer__brand p { max-width: none; }
  .footer__bar { padding: 26px 0; }
}

/* ===== Anti-flits: beheer-inhoud pas tonen na de inlogcheck ===== */
.admin-body:not(.auth-ok) .admin-tabs,
.admin-body:not(.auth-ok) main.admin { visibility: hidden; }
.account-body:not(.auth-ok) main.account { visibility: hidden; }

/* ===== Mobiel: nettere onderdelen-rijen en periode-kiezer ===== */
@media (max-width: 560px) {
  /* Onderdelen (Diensten-tab): naam op eigen regel, dan prijs links + knoppen rechts. */
  .part-row { gap: 8px 12px; padding: 12px 0; }
  .part-row > .inline-input { flex: 1 1 100%; }
  .part-row .part-price { margin-right: auto; }

  /* Periode-kiezer (Overzicht): net raster i.p.v. een scheve pil met omlopende knoppen. */
  .period-bar { gap: 10px; }
  .period-presets {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 6px; width: 100%; border-radius: 16px;
  }
  .period-presets .period-btn { text-align: center; padding: 9px 6px; font-size: 0.85rem; }
  .period-range { margin-left: 0; }
}

/* ===== Verticale ademruimte in beheer-formulieren (knop niet tegen het veld) ===== */
.tabpanel .field + .form__row { margin-top: 14px; }
.tabpanel .form__row + .field { margin-top: 22px; }
.tabpanel p + .field { margin-top: 14px; }
.tabpanel .form__row + p,
.tabpanel .field + p { margin-top: 12px; }
.maint-card .panel__head { margin-bottom: 12px; }

/* ============================================================
   Mobiel: laatste correcties (smartphone)
   ============================================================ */

/* Filterbalk in beheer: uitlijnen en op een kleine telefoon over de volle breedte,
   zodat "Dienst:" en "Status:" niet half naast hun dropdown vallen. */
.admin__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin__filter label { font-weight: 600; font-size: 0.92rem; color: var(--ink-soft); }
.admin__filter select {
  font-family: inherit; padding: 9px 34px 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background-color: var(--card); color: var(--ink); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2355584f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
.admin__filter select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

@media (max-width: 620px) {
  .admin__filter { width: 100%; }
  .admin__filter select { flex: 1 1 140px; min-width: 0; }
}

/* iOS Safari zoomt de hele pagina in zodra je een invoerveld met tekst kleiner
   dan 16px aantikt, en zoomt daarna niet vanzelf terug. Op telefoonformaat
   krijgen alle aantikbare velden daarom minstens 16px. */
@media (max-width: 640px) {
  .status-select, .svc-select, .emp-select, .admin__filter select,
  .period-custom input[type=date], .rev-custom input[type=month],
  .period__nav input[type="date"], .inline-input, .add-form__row input,
  .add-form__row select { font-size: 1rem; }
  .appt__top .status-select { font-size: 0.9rem; padding: 4px 10px; }

  /* Aantikbaar houden: een dropdown of knop van 20px hoog is op een telefoon
     lastig te raken. 44px is de richtlijn van Apple én Google. */
  .status-select, .svc-select, .emp-select, .admin__filter select { min-height: 44px; }
  .iconbtn { min-width: 40px; min-height: 40px; }
}

/* Niets mag horizontaal buiten het scherm vallen. */
@media (max-width: 640px) {
  .panel, .tabpanel, .add-form, .svc-edit { max-width: 100%; }
  .field input, .field textarea, .field select, .field__select { max-width: 100%; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}