/* Huisstijl van de salon, afgeleid van het interieur: mokka muren, walnoot panelen,
   brons/metaal, travertin en lichte greige kasten. Het logo blijft wit op mokka. */
:root {
  --black: #2f2925;       /* mokka: de donkere muurkleur (kop, menu, knoppen) */
  --black-2: #3a332e;     /* mokka iets lichter (hover) */
  --black-3: #4a423b;     /* mokka actief */
  --taupe: #a87b4f;       /* brons: fijne lijnen en accenten */
  --sand: #e6ddd1;        /* travertin: lichte knop op donker */
  --walnut: #6b4532;      /* walnoot sfeerpanelen */
  --band: #fbf7f1;        /* ivoor: lichte blokken op de steen */
  --peach: #eecfbc;

  --bg: #f3ece3;          /* travertin, crème */
  --surface: #fffdf9;
  --surface-2: #ece5db;
  --ink: #221d1a;
  --ink-2: #675e57;       /* muurtaupe, leesbaar op licht */
  --line: #e2d9cd;
  --accent: #2f2925;      /* knoppen en selecties */
  --accent-ink: #ffffff;
  --brand-ink: #6b4532;   /* walnoot: koppen-accent en links */
  --brand-soft: #f0e7dc;
  --ok: #3f7d58;
  --ok-soft: #e1f0e6;
  --warn: #a5492f;
  --warn-soft: #f8e2db;
  --radius: 10px;
  --btn-radius: 4px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .05);
  --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --tabbar-h: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1714;
    --surface: #252019;
    --surface-2: #2f2925;
    --ink: #f4efe8;
    --ink-2: #bcb1a5;
    --line: #3a332e;
    --accent: #e6ddd1;
    --accent-ink: #2f2925;
    --brand-ink: #d1a77c;
    --brand-soft: #33291f;
    --band: #3a332e;
    --ok: #7cc196;
    --ok-soft: #1f3327;
    --warn: #e88c70;
    --warn-soft: #3a231c;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--font);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.6rem, 5.5vw, 2.3rem); letter-spacing: -.01em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
a { color: var(--brand-ink); }
main { max-width: 760px; margin: 0 auto; padding: 16px; outline: none; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 6px; }

/* Topbar: altijd zwart, zoals de header van de site */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--black);
  border-bottom: 1px solid var(--black-2);
}
.brand { display: flex; align-items: center; }
.brand img { height: 52px; width: auto; display: block; }
.mode-switch { display: flex; background: var(--black-2); border-radius: var(--btn-radius); padding: 3px; margin-left: 6px; }
.topbar .brand { margin-right: auto; }
.mode-switch a { padding: 6px 14px; border-radius: 8px; font-size: .85rem; font-weight: 500; color: #b5ada4; text-decoration: none; }
.mode-switch a.active { background: var(--sand); color: var(--black); }

/* Tabbar */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: center;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--line);
}
.tabbar a {
  position: relative; flex: 1; max-width: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ink-2); text-decoration: none; font-size: .72rem; font-weight: 500;
}
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.active { color: var(--ink); }
.tabbar a.active::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--taupe); }

/* Zijmenu (kapperskant): hoofdonderdelen die openklappen met een submenu */
body.salon { --tabbar-h: 0px; padding-bottom: 16px; }
.top-btn.menu-btn { display: none; margin-left: -8px; }
.sidemenu, .menu-backdrop { display: none; }
body.has-menu .sidemenu {
  display: block; position: fixed; z-index: 20; left: 0; bottom: 0; top: calc(69px + env(safe-area-inset-top)); width: 250px;
  overflow-y: auto; padding: 8px 0 calc(16px + env(safe-area-inset-bottom)); background: var(--black); color: #cfc7be;
}
.sm-head {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; background: none; font: inherit;
  color: inherit; text-decoration: none; text-align: left; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; font-weight: 500; cursor: pointer;
}
.sm-head svg { width: 24px; height: 24px; flex: none; }
.sm-head span { flex: 1; }
.sm-head svg:last-child:not(:first-child) { width: 16px; height: 16px; transition: transform .2s; opacity: .7; }
.sm-head:hover, .sm-head:focus-visible { background: var(--black-2); color: #fff; outline: none; }
.sm-head.active, .sm-group.open > .sm-head { background: var(--black-3); color: #fff; }
.sm-group.open > .sm-head svg:last-child { transform: rotate(180deg); }
.sm-sub { display: none; padding: 4px 0 8px; }
.sm-group.open .sm-sub { display: block; }
.sm-sub a {
  display: block; padding: 12px 18px 12px 56px; border-left: 4px solid transparent;
  color: #cfc7be; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem;
}
.sm-sub a:hover, .sm-sub a:focus-visible { color: #fff; background: var(--black-2); outline: none; }
.sm-sub a.active { background: var(--black-3); color: #fff; border-left-color: var(--taupe); font-weight: 600; }
@media (min-width: 900px) {
  body.has-menu { padding-left: 250px; }
}
@media (max-width: 899px) {
  /* Telefoon/kleine tablet: menu schuift in via de knop linksboven */
  body.has-menu .top-btn.menu-btn { display: grid; }
  body.has-menu .sidemenu { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 4px 0 24px rgba(0, 0, 0, .3); width: min(280px, 85vw); }
  body.menu-open .sidemenu { transform: none; }
  body.has-menu.menu-open .menu-backdrop { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(0, 0, 0, .4); }
}

/* Cards & lists */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.section { margin: 24px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.price { font-weight: 700; white-space: nowrap; }

/* Hero: zwart met taupe golf, als op de site */
.hero {
  position: relative; overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  padding: 28px 20px 72px;
  background: var(--black);
  color: #fff;
  border: 1px solid var(--black-2);
}
.hero h1 { color: #fff; }
.hero p { color: #d9d2cb; max-width: 36ch; }
.hero .status { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; background: var(--black-2); color: #eee6dc; padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.hero .btn { background: var(--sand); color: var(--black); text-transform: uppercase; letter-spacing: .04em; }
.hero .wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 56px; display: block; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #7cc196; display: inline-block; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--btn-radius);
  border: 1px solid transparent; background: var(--accent); color: var(--accent-ink);
  font: 600 .95rem var(--font); text-decoration: none; cursor: pointer;
}
.btn:hover { opacity: .88; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: .85rem; }
.btn.danger { background: transparent; color: var(--warn); border-color: var(--line); }
.btn.block { width: 100%; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.icon-btn { width: 40px; height: 40px; border-radius: var(--btn-radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1.1rem; display: grid; place-items: center; text-decoration: none; }

/* Chips & pills */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 8px 14px; border-radius: var(--btn-radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 500 .9rem var(--font); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pill { display: inline-block; font-size: .75rem; font-weight: 500; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.accent { background: var(--brand-soft); color: var(--brand-ink); }

/* Booking */
.steps { display: flex; gap: 6px; margin: 4px 0 20px; }
.steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.steps span.done { background: var(--taupe); }
.option {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 8px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; cursor: pointer;
}
.option:hover { border-color: var(--taupe); }
.option .grow { flex: 1; min-width: 0; }
.option:disabled { opacity: .45; cursor: not-allowed; background: var(--surface-2); }
.option:disabled:hover { border-color: var(--line); }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.day {
  display: flex; flex-direction: column; align-items: center; padding: 10px 4px;
  border-radius: var(--btn-radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; cursor: pointer;
}
.day b { font-size: 1.2rem; }
.day small { color: var(--ink-2); font-size: .72rem; text-transform: capitalize; }
.day:disabled { opacity: .3; cursor: not-allowed; }
.day[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.day[aria-pressed="true"] small { color: inherit; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.slot { padding: 10px 0; border-radius: var(--btn-radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 .95rem var(--font); cursor: pointer; }
.slot:hover { border-color: var(--taupe); }
.summary { background: var(--brand-soft); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.summary .total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.check { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 16px; cursor: pointer; font-weight: 400; }
.check input[type="checkbox"] { flex: none; width: 20px; height: 20px; accent-color: var(--accent); }
.notice { font-size: .85rem; color: var(--ink-2); border-left: 3px solid var(--taupe); padding: 4px 0 4px 12px; margin: 0 0 16px; }

/* Forms */
label { display: block; font-weight: 500; font-size: .9rem; margin-bottom: 4px; }
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
input, textarea, select {
  width: 100%; padding: 11px 12px; border-radius: var(--btn-radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--taupe); outline-offset: 1px; border-color: transparent; }
textarea { min-height: 80px; resize: vertical; }
.search { margin-bottom: 12px; }

/* Agenda */
.agenda-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.agenda-head h2 { margin: 0; text-align: center; flex: 1; text-transform: capitalize; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.stats-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .stats-4 { grid-template-columns: repeat(4, 1fr); } }
.stats-3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px) { .stats-3 { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stat b { display: block; font-size: 1.3rem; overflow-wrap: anywhere; }
.stat > span { font-size: .78rem; color: var(--ink-2); }
.stat .delta { font-size: .75rem; font-weight: 500; color: var(--ink-2); }
.stat .delta.up { color: var(--ok); }
.stat .delta.down { color: var(--warn); }
.stat .delta .muted { font-weight: 400; }
.stat-alert { border-color: var(--warn); }
.appt { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--taupe); margin-bottom: 8px; }
.appt.done { border-left-color: var(--ok); opacity: .75; }
.appt.cancelled { border-left-color: var(--line); opacity: .5; }
.appt.cancelled .appt-title { text-decoration: line-through; }
.appt time { font-weight: 700; font-variant-numeric: tabular-nums; }
.appt time small { display: block; color: var(--ink-2); font-weight: 400; }
.appt-title { font-weight: 700; }
.appt .row { margin-top: 8px; }
.empty { text-align: center; padding: 32px 16px; color: var(--ink-2); }

/* Clients */
.avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--black); color: var(--sand); border: 1px solid var(--line); }
.client-link { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; width: 100%; }
.recipe { background: var(--brand-soft); border-radius: 12px; padding: 12px 14px; white-space: pre-wrap; font-size: .95rem; }

/* Info */
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.today td { font-weight: 700; }
.band { background: var(--band); color: var(--ink); border-color: var(--band); }
.band .muted { color: color-mix(in srgb, var(--ink) 72%, var(--band)); }
.band .list > li { border-color: rgba(0, 0, 0, .12); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--black); color: #fff; padding: 10px 18px; border-radius: var(--btn-radius);
  border: 1px solid #2b2723;
  font-size: .9rem; transition: .25s; z-index: 20; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; color: var(--ink-2); text-decoration: none; font-size: .9rem; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.confirm-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--black); color: var(--sand); display: grid; place-items: center; font-size: 2rem; margin: 16px auto; }

@media (min-width: 640px) {
  main { padding: 24px; }
  .hero { padding: 44px 36px 88px; }
  .hero .wave { height: 72px; }
}

/* ==========================================================================
   Administratie, voorraad en cijfers
   ========================================================================== */

:root {
  --chart-1: #8a7763;     /* taupe, de reeks */
  --chart-hl: #111111;    /* nadruk: huidige periode */
  --chart-muted: #d3cbc2; /* vergelijkingsgroep */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chart-1: #b9aa97; --chart-hl: #ffffff; --chart-muted: #4a433d; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plain { color: inherit; text-decoration: none; }
.tight { padding-top: 4px; padding-bottom: 4px; }
.month-head { margin: 18px 0 8px; color: var(--ink-2); font-size: .85rem; font-weight: 500; }
.month-head::first-letter { text-transform: uppercase; }
.grid-2 { display: grid; gap: 12px; margin-bottom: 12px; }
.grid-2 > .card { margin-bottom: 0; min-width: 0; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 16px; overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { padding: 8px 14px; color: var(--ink-2); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subnav a.active { color: var(--ink); border-color: var(--taupe); }

.card-link { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.card-link:hover { border-color: var(--taupe); }
.card.attention { border-color: var(--taupe); background: var(--brand-soft); }
.card.alert { border-color: var(--warn); background: var(--warn-soft); }
.card.ok-card { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }

.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th { text-align: left; font-weight: 500; color: var(--ink-2); font-size: .8rem; padding: 6px 0; border-bottom: 1px solid var(--line); }
.data-table td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.data-table tr.sum td { font-weight: 600; }
.data-table tr.total td { font-size: 1.05rem; border-bottom: 0; padding-top: 10px; }

.fill-list code { font: 600 1.05rem var(--font); font-variant-numeric: tabular-nums; }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
legend { font-weight: 500; font-size: .9rem; padding: 0 4px; }
.stock-line { display: grid; grid-template-columns: 1fr 72px 40px; gap: 8px; margin-bottom: 8px; }
label.inline { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin-left: 10px; }
label.inline input { width: auto; }
.inline-date { width: auto; padding: 4px 8px; margin-left: 6px; }
.field-row.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field-row input { min-width: 0; width: 100%; }

.stock-count { flex: none; min-width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.stock-count.low { background: var(--warn-soft); color: var(--warn); }
.qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.qty.plus { color: var(--ok); }
.ranked { counter-reset: rank; }
.ranked > li::before { counter-increment: rank; content: counter(rank); width: 22px; color: var(--ink-2); font-weight: 500; }

/* Grafieken */
.chart { margin: 8px 0 0; }
.col-plot { position: relative; height: 180px; margin-top: 18px; }
.col-plot .grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.col-plot .tick { position: relative; border-top: 1px solid var(--line); height: 0; }
.col-plot .tick span { position: absolute; left: 0; top: -9px; font-size: .7rem; color: var(--ink-2); font-variant-numeric: tabular-nums; background: var(--surface); padding-right: 4px; }
.col-plot .cols { position: absolute; inset: 0 0 0 48px; display: flex; align-items: flex-end; gap: 2px; }
.col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; cursor: default; outline: none; }
.col .bar { width: 100%; max-width: 24px; background: var(--chart-1); border-radius: 4px 4px 0 0; min-height: 1px; transition: opacity .15s; }
.col.hl .bar { background: var(--chart-hl); }
.col .cap { font-size: .7rem; font-weight: 600; margin-bottom: 3px; white-space: nowrap; }
.col:hover .bar, .col:focus-visible .bar { opacity: .75; }
.col:focus-visible { box-shadow: 0 0 0 2px var(--taupe); border-radius: 4px; }
.xlabels { display: flex; gap: 2px; padding-left: 48px; margin-top: 4px; }
.xlabels span { flex: 1; text-align: center; font-size: .7rem; color: var(--ink-2); overflow: hidden; white-space: nowrap; }

.bar-list { list-style: none; margin: 0; padding: 0; }
.bar-list li { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 10px; padding: 6px 0; outline: none; }
.bar-list li:focus-visible { box-shadow: 0 0 0 2px var(--taupe); border-radius: 6px; }
.bl-label { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-track { height: 14px; display: flex; }
.bl-bar { height: 100%; background: var(--chart-1); border-radius: 0 4px 4px 0; }
.bar-list li:hover .bl-bar { opacity: .75; }
.bl-value { font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.legend { display: flex; gap: 16px; font-size: .8rem; color: var(--ink-2); margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.key.mine { background: var(--chart-1); }
.key.theirs { background: var(--chart-muted); }
.cmp-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; margin-bottom: 6px; }
.cmp-bar { display: flex; align-items: center; gap: 8px; height: 16px; margin-bottom: 4px; outline: none; }
.cmp-bar span { height: 12px; border-radius: 0 4px 4px 0; }
.cmp-bar .mine { background: var(--chart-1); }
.cmp-bar .theirs { background: var(--chart-muted); }
.cmp-bar b { font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-bar:focus-visible { box-shadow: 0 0 0 2px var(--taupe); border-radius: 4px; }

.table-view { margin-top: 10px; font-size: .85rem; }
.table-view summary { cursor: pointer; color: var(--ink-2); }
.table-view .data-table { margin-top: 6px; }

.tip {
  position: fixed; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--black); color: #fff; border: 1px solid #2b2723; border-radius: 8px;
  padding: 6px 10px; font-size: .8rem; max-width: 260px;
}
.tip.show { opacity: 1; }

/* ==========================================================================
   Foto's
   ========================================================================== */

.photo-buttons label.btn { cursor: pointer; }
.photo-add { padding-bottom: 4px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.photo-tile {
  position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: var(--surface-2); cursor: zoom-in;
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }
.photo-tile.mini { width: 56px; height: 56px; flex: none; border-radius: 8px; }
.photo-tile.current { outline: 2px solid var(--accent); outline-offset: 1px; }
.photo-tile.missing::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-2); }
.tile-badge { position: absolute; right: 4px; bottom: 4px; font-size: .7rem; background: rgba(0, 0, 0, .55); border-radius: 6px; padding: 1px 4px; }
.thumb-strip { display: flex; gap: 6px; align-items: center; margin-top: 6px; overflow-x: auto; }
.share-box { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.share-box h3 { margin-bottom: 4px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand-ink); text-decoration: underline; cursor: pointer; font: inherit; }

.product-photo {
  flex: none; width: 42px; height: 42px; border-radius: 10px; overflow: hidden; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2);
}
.product-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-photo svg { width: 20px; height: 20px; }
.product-photo.small { width: 40px; height: 40px; }
.product-photo.big { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; }
.product-photo.big svg { width: 36px; height: 36px; }
.product-hero { display: flex; flex-direction: column; gap: 10px; }
.product-main { display: block; width: 100%; max-height: 360px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.product-main img { width: 100%; max-height: 360px; object-fit: contain; display: block; }
.product-main.empty-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: var(--ink-2); cursor: default; }
.product-main.empty-photo svg { width: 40px; height: 40px; }

.sell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.sell-tile {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; text-align: left;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
}
.sell-tile:hover { border-color: var(--taupe); }
.sell-tile.selected { border-color: var(--accent); }
.sell-name { font-weight: 500; font-size: .92rem; line-height: 1.25; }
.sell-meta { display: flex; justify-content: space-between; gap: 6px; font-size: .78rem; align-items: baseline; flex-wrap: wrap; }
.sell-meta b { font-size: .92rem; }
.cart-badge { position: absolute; top: 4px; right: 4px; min-width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 0 6px; }
.warn-text { color: var(--warn); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper b { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.cart { position: sticky; bottom: calc(var(--tabbar-h) + 8px); box-shadow: 0 -4px 24px rgba(0, 0, 0, .12); }

/* Grote fotoweergave */
.lightbox {
  width: min(720px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); overflow: auto;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .75); }
.lb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; }
.lb-image { position: relative; background: #000; display: grid; place-items: center; min-height: 200px; }
.lb-image img { max-width: 100%; max-height: 62vh; display: block; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.6rem; cursor: pointer; }
.lb-nav.prev { left: 8px; }
.lb-nav.next { right: 8px; }
.lb-body { padding: 14px; }

/* ==========================================================================
   Kassa en bon
   ========================================================================== */

a.pill { text-decoration: none; }
.check.bare { border: 0; padding: 0; margin: 0; background: none; flex: 1; }
.pay-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.option.pay { flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; }
.option.pay.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sell-grid.compact { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin: 12px 0 0; }
.total-box { margin: 14px 0 0; }
.total-box .total { border-top: 0; margin: 0; padding: 0; font-size: 1.1rem; }
.big-amount { font-size: 1.5rem; }

.receipt {
  max-width: 360px; margin: 0 auto; padding: 20px 18px; background: #fff; color: #111;
  border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow);
  font-size: .9rem; font-variant-numeric: tabular-nums;
}
.receipt .num { text-align: right; white-space: nowrap; }
.r-logo {
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin: -20px -18px 0; padding: 16px 12px 12px;
  background: var(--black); border-radius: 6px 6px 0 0; color: #d9d2cb; font-size: .72rem;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.r-logo img { height: 64px; width: auto; display: block; }
.r-tagline { display: flex; align-items: center; gap: 10px; margin-top: 4px; font: italic 500 1.2rem/1.2 var(--serif); color: #e8cfa9; }
.r-tagline::before, .r-tagline::after { content: ''; width: 26px; height: 1px; background: #a87b4f; }
.r-city { font-size: .6rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: #b59a7c; }
.r-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding-bottom: 12px; border-bottom: 1px dashed #bbb; margin-bottom: 10px; color: #545454; font-size: .8rem; }
.r-head b { font-size: 1.15rem; color: #111; margin-bottom: 2px; }
.r-meta { display: flex; justify-content: space-between; gap: 12px; color: #545454; font-size: .82rem; }
.r-lines { width: 100%; border-collapse: collapse; margin: 10px 0; }
.r-lines td { padding: 3px 0; vertical-align: top; }
.r-lines td:first-child { width: 28px; color: #545454; }
.r-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; padding: 8px 0; border-top: 1px dashed #bbb; border-bottom: 1px dashed #bbb; }
.r-vat { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .8rem; color: #545454; }
.r-vat th { text-align: left; font-weight: 500; }
.r-vat th.num { text-align: right; }
.r-pay { margin-top: 10px; text-align: center; font-weight: 500; }
.r-foot { margin-top: 10px; text-align: center; color: #545454; font-size: .8rem; }

@media print {
  .topbar, .tabbar, .sidemenu, .menu-backdrop, .toast, .tip, .no-print { display: none !important; }
  body.has-menu { padding-left: 0; }
  body, body.salon { padding: 0 !important; background: #fff; }
  main { padding: 0; max-width: none; }
  .receipt { border: 0; box-shadow: none; max-width: 80mm; margin: 0; }
}

/* ==========================================================================
   Behandelkaart en kleurrecepten
   ========================================================================== */

.note-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 4px; }
.note-form textarea { min-height: 56px; }
.entries { list-style: none; margin: 12px 0 0; padding: 0; }
.entry { padding: 12px 0; border-top: 1px solid var(--line); }
.entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entry-head .link-btn { margin-left: auto; }
.bowls { margin: 6px 0 0; padding-left: 18px; font-size: .92rem; }
.bowls li { margin: 2px 0; }
.last-recipe { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.bowl { margin-bottom: 12px; }
.bowl legend { font-weight: 600; }
.comp-row { display: grid; grid-template-columns: 1fr 84px 40px; gap: 8px; margin-bottom: 8px; }
.bowl-calc { margin: 0 0 6px; min-height: 1em; }
.link-btn.small { font-size: .82rem; }

/* Afspraak samenstellen */
.compose .list > li.compose-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.compose-row .grow { min-width: 0; }
.compose-row .stepper { gap: 4px; }
.compose-row .icon-btn { width: 34px; height: 34px; }
.minutes { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; font-size: .85rem; color: var(--ink-2); }
.minutes input { width: 62px; padding: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.compose-total { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); font-weight: 600; }
.compose-total.bad { background: var(--warn-soft); color: var(--warn); }
.compose-total.bad b { font-weight: 500; font-size: .88rem; }
.add-mark { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; color: var(--ink-2); }
.option:not(:disabled):hover .add-mark { background: var(--accent); color: var(--accent-ink); }
.stepper.wide input { width: 80px; text-align: center; }
@media (max-width: 480px) {
  .tabbar a { font-size: .62rem; }
  .tabbar a svg { width: 22px; height: 22px; }
}

/* Inloggen en instellingen */
.top-actions { display: flex; gap: 2px; margin-left: auto; }
.top-actions[hidden], .tabbar[hidden] { display: none; }
.top-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--btn-radius); background: none; color: #d9d2cb; cursor: pointer; }
.top-btn:hover { background: var(--black-2); color: #fff; }
.top-btn svg { width: 22px; height: 22px; }
.lock { max-width: 420px; margin: 24px auto; text-align: center; }
.lock .card { text-align: left; margin-top: 16px; }
.lock-icon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; background: var(--brand-soft); }
.form-error { color: var(--warn); font-size: .9rem; margin: 0 0 10px; }
.recovery-code {
  font: 700 1.15rem ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .06em; word-break: break-all;
  background: var(--surface); border: 2px dashed var(--taupe); border-radius: var(--radius); padding: 16px; margin-top: 12px; user-select: all;
}
.account-list { text-align: left; margin: 16px 0; }
.account-list .option { margin-bottom: 8px; }
.steps-list { text-align: left; padding-left: 20px; margin: 16px 0 0; }
.steps-list li { margin-bottom: 12px; }
.secret-box { display: grid; gap: 2px; margin-top: 8px; padding: 12px; border: 1px dashed var(--taupe); border-radius: var(--radius); background: var(--surface); }
.secret-box code { font: 700 1.05rem ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .05em; word-break: break-all; user-select: all; margin-bottom: 6px; }
.secret-box .btn { justify-self: start; }
.ok-text { color: var(--ok); }
.reserved-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); font-size: .75rem; font-weight: 600; vertical-align: middle; }
.qr { display: block; width: 220px; max-width: 100%; height: auto; margin: 10px 0; border-radius: 8px; }
.code-input { font: 700 1.6rem ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .3em; text-align: center; }
.hours-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hours-row input[type="time"] { width: auto; padding: 6px 8px; }
.hours-row input:disabled { opacity: .4; }
body:not(.salon) .tabbar[hidden] + .toast { bottom: 16px; }

/* "Weet je het zeker?" */
.ask {
  width: min(380px, calc(100% - 32px)); padding: 24px 20px 20px; border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.ask::backdrop { background: rgba(0, 0, 0, .55); }
.ask h2 { margin: 0 0 6px; }
.ask p { margin: 0 0 18px; white-space: pre-line; }
.ask-buttons:has(> :only-child) { justify-content: center; }
.ask-icon { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font: 700 1.6rem var(--font); background: var(--warn-soft); color: var(--warn); }
.ask-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn.btn-danger { background: var(--warn); color: #fff; }

/* ==========================================================================
   Weekrooster
   ========================================================================== */

.mode-tabs a { padding: 7px 16px; border-radius: 8px; font: 500 .9rem var(--font); color: var(--ink-2); text-decoration: none; }
.mode-tabs a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.agenda-head + .row .mode-tabs { margin: 0; }

.wk-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; -webkit-overflow-scrolling: touch; }
.wk {
  display: grid; grid-template-columns: 40px repeat(var(--cols), minmax(84px, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 560px) {
  /* Telefoon: alle werkdagen naast elkaar, kortere teksten */
  .wk { grid-template-columns: 34px repeat(var(--cols), minmax(56px, 1fr)); }
  .wk-appt { padding: 2px 3px; font-size: .64rem; border-left-width: 3px; }
  .wk-times span { right: 3px; font-size: .62rem; }
}
.wk-corner { border-bottom: 1px solid var(--line); }
.wk-dayhead {
  display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: .75rem; text-transform: capitalize;
}
.wk-dayhead b { font-size: 1.1rem; }
.wk-dayhead.today b { background: var(--accent); color: var(--accent-ink); border-radius: 999px; min-width: 30px; text-align: center; }
.wk-times { position: relative; }
.wk-times span { position: absolute; right: 6px; transform: translateY(-50%); font-size: .68rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wk-times span:first-child { transform: none; }
.wk-col { position: relative; border-left: 1px solid var(--line); cursor: copy; }
.wk-col.today { background: color-mix(in srgb, var(--taupe) 7%, transparent); }
.wk-hour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); pointer-events: none; }
.wk-closed { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--surface-2) 6px, var(--surface-2) 12px); pointer-events: none; }
.wk-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--warn); z-index: 3; pointer-events: none; }
.wk-now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.wk-appt {
  position: absolute; left: 3px; right: 3px; z-index: 2; overflow: hidden; padding: 3px 5px; border-radius: 6px;
  background: color-mix(in srgb, var(--c) 22%, var(--surface)); border-left: 4px solid var(--c);
  color: var(--ink); text-decoration: none; font-size: .7rem; line-height: 1.25; cursor: pointer;
}
.wk-appt:hover, .wk-appt:focus-visible { background: color-mix(in srgb, var(--c) 34%, var(--surface)); outline: none; }
.wk-appt:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
.wk-time, .wk-line, .wk-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-time { font-size: .92em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wk-sub { color: var(--ink-2); }
.wk-appt.short .wk-sub { display: none; }
.wk-appt.short { display: flex; gap: 4px; align-items: baseline; }
.wk-appt.short .wk-time { flex: none; }
.wk-appt.done { opacity: .7; }
.wk-appt.cancelled { opacity: .45; z-index: 1; background: var(--surface); border-left-style: dashed; }
.wk-appt.cancelled .wk-line { text-decoration: line-through; }
.wk-appt.blok { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, var(--surface-2) 6px, var(--surface-2) 12px); border-left-color: var(--ink-2); }
/* Vrije dagen en vrije uren */
.wk-dayhead.off { color: var(--ink-2); }
.wk-absent {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; padding-top: 14px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sand) 35%, var(--surface)), color-mix(in srgb, var(--sand) 35%, var(--surface)) 8px, var(--surface) 8px, var(--surface) 16px);
  color: var(--ink-2); text-decoration: none; font-size: .72rem; cursor: pointer;
}
.wk-absent span { writing-mode: vertical-rl; white-space: nowrap; }
.wk-appt.absent { --c: var(--sand); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sand) 35%, var(--surface)), color-mix(in srgb, var(--sand) 35%, var(--surface)) 6px, var(--surface) 6px, var(--surface) 12px); border-left-style: dotted; }
.absence-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-size: 1.15rem; border-radius: 50%; background: var(--surface-2); }
.warn-text { color: var(--warn); }
.legend.wrap { flex-wrap: wrap; row-gap: 6px; }
.appt { border-left-color: var(--c, var(--taupe)); }
.appt.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 3px var(--c, var(--taupe)); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Maandkalender */
.calendar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; max-width: 420px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { text-transform: capitalize; }
.cal-head .icon-btn:disabled { opacity: .3; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; font-size: .72rem; color: var(--ink-2); padding: 2px 0 4px; }
.cal-grid.with-weeks { grid-template-columns: 26px repeat(7, minmax(0, 1fr)); }
.cal-wk { display: grid; place-items: center; font-size: .7rem; color: var(--taupe); font-variant-numeric: tabular-nums; }
.cal-cell {
  width: 100%; min-width: 0; padding: 0; aspect-ratio: 1; border: 0; border-radius: 10px; background: none; color: var(--ink-2); opacity: .45;
  font: 500 .95rem var(--font); cursor: not-allowed; display: grid; place-items: center;
}
.cal-cell.free { opacity: 1; color: var(--ink); background: var(--surface-2); cursor: pointer; font-weight: 600; }
.cal-cell.free:hover { background: color-mix(in srgb, var(--taupe) 35%, var(--surface)); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--taupe); }
.cal-cell.selected { background: var(--accent); color: var(--accent-ink); opacity: 1; }
.cal-cell.empty { visibility: hidden; }

/* Kleuren kiezen */
.color-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.color-row.group { padding-top: 0; }
.dot { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.palette { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0 12px 32px; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.swatch.custom { display: grid; place-items: center; background: var(--surface-2); font-weight: 700; color: var(--ink-2); position: relative; overflow: hidden; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: 0; }

/* Producten */
.mode-tabs { display: inline-flex; background: var(--surface-2); border-radius: var(--btn-radius); padding: 3px; margin-bottom: 12px; }
.mode-tabs button { border: 0; background: none; padding: 7px 16px; border-radius: 8px; font: 500 .9rem var(--font); color: var(--ink-2); cursor: pointer; }
.mode-tabs button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.sizes { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .9rem; }
.stock-count.none { background: none; color: var(--ink-2); font-weight: 400; }
.compact .sell-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

/* Prijslijst en agendablokken */
.cat-head { margin: 22px 0 8px; font-size: 1.05rem; }
.chips.wrap { flex-wrap: wrap; overflow: visible; gap: 6px; }
.extras .chip { padding: 6px 10px; font-size: .82rem; }
.extras select { margin-top: 4px; }
.appt.block { border-left-color: var(--line); background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 8px, var(--surface-2) 8px, var(--surface-2) 16px); }

/* Kapperskant op een groot scherm: menu links in plaats van onderaan */
@media (min-width: 1000px) {
  body.salon { padding-bottom: 0; padding-left: 220px; }
  body.salon .topbar { margin-left: -220px; }
  body.salon main { max-width: 960px; }
  body.salon .tabbar {
    top: 61px; bottom: 0; right: auto; width: 220px; height: auto;
    flex-direction: column; justify-content: flex-start; gap: 2px; padding: 12px 10px;
    border-top: 0; border-right: 1px solid var(--line);
  }
  body.salon .tabbar a { flex: none; max-width: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 12px; font-size: .95rem; border-radius: var(--btn-radius); }
  body.salon .tabbar a.active { background: var(--surface-2); }
  body.salon .tabbar a.active::before { display: none; }
  body.salon .toast { bottom: 24px; }
  body.salon .cart { bottom: 16px; }
}

/* ==========================================================================
   Uitstraling: boutique kapsalon. Sierlijke koppen, ruime letterspatiëring,
   rustige vormen en taupe als verfijnd accent.
   ========================================================================== */
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: .005em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 6.5vw, 2.8rem); }
h2 { font-size: 1.45rem; }
.cat-head { font-size: 1.3rem; }
.eyebrow { font-weight: 500; letter-spacing: .24em; font-size: .7rem; }
.btn { font-weight: 500; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.btn.small { font-size: .72rem; letter-spacing: .1em; }
.card { box-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 8px 28px rgba(60, 45, 30, .06); }

.hero { text-align: center; padding: 40px 22px 92px; border-radius: var(--radius); }
.hero-logo { display: block; width: 150px; height: auto; margin: 0 auto 18px; }
.hero .status { background: transparent; border: 1px solid #3a332c; color: #d2a978; letter-spacing: .18em; text-transform: uppercase; font-size: .66rem; padding: 6px 14px; }
.hero h1 { max-width: 18ch; margin: 0 auto 14px; font-weight: 500; }
.hero p { margin: 0 auto 22px; max-width: 42ch; font-weight: 300; line-height: 1.7; }
.hero .row { justify-content: center; }
.hero .btn.ghost { color: #eee6dc; border-color: #4a423a; }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: center; }
.pillars > div { padding: 18px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.pillars h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin: 4px 0 6px; }
.pillars p { margin: 0; }
.pillar-mark { color: var(--taupe); font-size: .9rem; }
@media (max-width: 560px) { .pillars { grid-template-columns: minmax(0, 1fr); } }

/* Testmodus (zonder inloggen): geen vergrendelknop, wel een duidelijke melding. */
body.test-mode [data-action="lock-now"], body.test-mode .backup-reminder { display: none !important; }
body.test-mode.salon main::before {
  content: 'Demo · neppe gegevens, zonder inloggen, alleen op dit apparaat'; display: block; margin: 0 0 12px; padding: 6px 12px; text-align: center;
  border: 1px dashed var(--taupe); border-radius: var(--btn-radius); color: var(--brand-ink); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
}

/* Walnoot sfeerpanelen: verticale ribbels als decoratieve strook */
/* Het grasweefsel-ruitpatroon (ook gebruikt in de brede mokka band op de website). */
:root { --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3Cpattern id='a' width='2.4' height='2.4' patternUnits='userSpaceOnUse' patternTransform='rotate(90)'%3E%3Crect width='2.4' height='2.4' fill='%2338302a'/%3E%3Crect width='1' height='2.4' fill='%23544538'/%3E%3C/pattern%3E%3Cpattern id='b' width='2.4' height='2.4' patternUnits='userSpaceOnUse' patternTransform='rotate(90)'%3E%3Crect width='2.4' height='2.4' fill='%232c2520'/%3E%3Crect width='1' height='2.4' fill='%2346392e'/%3E%3C/pattern%3E%3Cpattern id='c' width='2.4' height='2.4' patternUnits='userSpaceOnUse'%3E%3Crect width='2.4' height='2.4' fill='%233e342d'/%3E%3Crect width='1' height='2.4' fill='%235c4a3b'/%3E%3C/pattern%3E%3Cpattern id='d' width='2.4' height='2.4' patternUnits='userSpaceOnUse'%3E%3Crect width='2.4' height='2.4' fill='%23302822'/%3E%3Crect width='1' height='2.4' fill='%234c3e33'/%3E%3C/pattern%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.10'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%23000' stop-opacity='.10'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.06'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='60,60 60,0 120,60' fill='url(%23c)'/%3E%3Cpolygon points='60,60 120,60 60,120' fill='url(%23a)'/%3E%3Cpolygon points='60,60 60,120 0,60' fill='url(%23d)'/%3E%3Cpolygon points='60,60 0,60 60,0' fill='url(%23b)'/%3E%3Cpolygon points='0,0 60,0 0,60' fill='url(%23a)'/%3E%3Cpolygon points='120,0 120,60 60,0' fill='url(%23d)'/%3E%3Cpolygon points='120,120 60,120 120,60' fill='url(%23b)'/%3E%3Cpolygon points='0,120 0,60 60,120' fill='url(%23c)'/%3E%3Cpath d='M60 0L120 60L60 120L0 60Z M60 0V120 M0 60H120' fill='none' stroke='%23c79a6c' stroke-opacity='.22' stroke-width='.8'/%3E%3Crect width='120' height='120' fill='url(%23g)'/%3E%3C/svg%3E"); }
/* Smalle strook met de ruiten bovenaan de lichte blokken: een kleine, elegante touch.
   De strook is een deel van de achtergrond van het blok zelf (bovenste 18px), zodat hij
   naadloos tot over de rand en de afgeronde hoeken loopt. .ribs houdt alleen de ruimte vrij. */
.ribs { height: 17px; margin: -16px -16px 14px; border-bottom: 1px solid rgba(199, 154, 108, .35); }
body:not(.salon) .card.band:has(.ribs) {
  background:
    linear-gradient(to bottom, transparent 0 18px, var(--band) 18px),
    linear-gradient(115deg, rgba(255, 236, 214, .12) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, .22) 100%) 0 0 / 100% 18px no-repeat,
    var(--weave) 0 -9px / 36px 36px repeat-x,
    #2f2925;
  background-origin: border-box; /* gemeten vanaf de buitenrand, dus ook onder de rand door */
}
.card.band { overflow: hidden; }
.salon-card { overflow: hidden; }
.price .from { font-weight: 400; font-size: .78em; color: var(--ink-2); margin-right: 2px; }
.sub-head { padding: 12px 0 2px; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--brand-ink); border-bottom: 1px solid var(--line); }

/* Merkblokken bij de producten: logo als kop van de kaart */
.brand-card { padding: 0; overflow: hidden; }
/* De logo-afbeeldingen hebben veel ruimte rondom: groot tonen en de randen wegsnijden. */
.brand-logo { height: 140px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.brand-logo img { width: auto; flex: none; display: block; }
.brand-logo.eleven { background: #f8e2d1; } /* zelfde kleur als de achtergrond van het logo */
.brand-logo.eleven img { height: 330px; }
.brand-logo.gaijess { background: #efe5d8; border-bottom: 1px solid var(--line); } /* warm ivoor */
.brand-logo.gaijess img { height: 250px; mix-blend-mode: multiply; } /* het wit van het logo neemt de warme tint aan */
.brand-body { padding: 16px; }
.brand-body h2 { margin-bottom: 2px; }
.brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.brands .brand-card { margin: 0; }
@media (max-width: 560px) { .brands { grid-template-columns: minmax(0, 1fr); } }
.brand-about { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.brand-about .eyebrow { margin-bottom: 4px; }
.brand-about p { margin: 0; line-height: 1.6; }

/* Instagram-sfeerimpressie */
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.ig-grid[aria-busy="true"] { min-height: 120px; }
.ig-grid[aria-busy="true"]::before { content: ''; grid-column: 1 / -1; height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: ig-load 1.4s ease-in-out infinite; }
@keyframes ig-load { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ig-tile { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--surface-2); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, filter .4s ease; filter: saturate(.92); }
.ig-tile:hover img, .ig-tile:focus-visible img { transform: scale(1.04); filter: none; }
.ig-btn svg { width: 18px; height: 18px; }

/* ==========================================================================
   Website voor klanten: avondsalon in twee tinten. Bovenaan een brede band in
   mokka (de muren), daaronder een rustig vlak in muurtaupe met lichte kaarten.
   Het bovenste blok en de eerste kaart liggen over de overgang heen.
   Alleen de klantkant; de kapperskant blijft licht.
   ========================================================================== */
body:not(.salon) {
  --page: #2f2925;          /* mokka */
  --page-deep: #241f1b;     /* iets dieper: hero, tabbalk */
  --page-ink: #f1e9df;      /* tekst op mokka */
  --page-muted: #c8b9a9;
  --page-accent: #d2a978;   /* brons, leesbaar op mokka */
  --page-line: rgba(210, 169, 120, .28);
  --lower: #cdbfb0;         /* muurtaupe, licht */
  --lower-ink: #2b2420;
  --lower-muted: #4f463f;
  --lower-accent: #6b4532;  /* walnoot */
  --band-h: 208px;          /* hoogte van de mokka band */
  background: var(--lower);
  position: relative;
}
body:not(.salon):has(.hero) { --band-h: 388px; }
/* Prijslijst: de band stopt net onder de tabs, de inhoud begint op het taupe vlak. */
body:not(.salon):has(.mode-tabs) { --band-h: 202px; }
body:not(.salon) .mode-tabs { margin-bottom: 30px; }
body:not(.salon)::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--band-h); z-index: -1;
  /* Grasweefsel-ruiten: driehoeken met fijne streepjes in twee richtingen (licht en schaduw), met een
     zachte glans per ruit en een brede lichtval over de hele band, zoals glanzend grasbehang. */
  background:
    linear-gradient(115deg, rgba(255, 236, 214, .10) 0%, transparent 38%, transparent 62%, rgba(0, 0, 0, .22) 100%),
    var(--weave) 0 0 / 104px 104px,
    var(--page);
  border-bottom: 1px solid var(--page-line);
}
body:not(.salon) main { color: var(--lower-ink); }
/* In de mokka band: titel, kopje en tabs licht. */
body:not(.salon) main > h1 { color: var(--page-ink); }
body:not(.salon) main > .eyebrow { color: var(--page-accent); }
body:not(.salon) .mode-tabs { background: var(--page-deep); }
body:not(.salon) .mode-tabs button { color: var(--page-muted); }
body:not(.salon) .mode-tabs button.active { background: var(--sand); color: var(--black); box-shadow: none; } /* zoals de Klant/Kapper-knop */
/* Op het taupe vlak: donker, met walnoot als accent. */
body:not(.salon) .cat-head,
body:not(.salon) .section-head h2 { color: var(--lower-ink); }
body:not(.salon) main > p.muted,
body:not(.salon) main > p .muted,
body:not(.salon) main > .muted { color: var(--lower-muted); }
body:not(.salon) .section-head a,
body:not(.salon) main > p a { color: var(--lower-accent); }
/* Kaarten licht, zonder rand, met een zachte schaduw. */
body:not(.salon) .card,
body:not(.salon) .pillars > div { color: var(--ink); border-color: transparent; box-shadow: 0 1px 2px rgba(47, 41, 37, .08), 0 10px 30px rgba(47, 41, 37, .10); }
body:not(.salon) .card .muted { color: var(--ink-2); }
/* Het grote blok bovenaan: dieper mokka met een bronzen rand. */
body:not(.salon) .hero { background: var(--page-deep); border-color: var(--page-line); box-shadow: 0 18px 40px rgba(36, 31, 27, .25); }
/* Bovenbalk en tabbalk in dezelfde avondsfeer. */
body:not(.salon) .topbar { background: var(--page); border-bottom-color: var(--page-line); }
body:not(.salon) .tabbar { background: var(--page-deep); border-top-color: var(--page-line); }
body:not(.salon) .tabbar a { color: var(--page-muted); }
body:not(.salon) .tabbar a.active { color: var(--page-ink); }
/* Instagram-knop op het taupe vlak. */
body:not(.salon) .btn.ghost.ig-btn { background: var(--surface); color: var(--ink); border-color: transparent; }
body:not(.salon) .btn.ghost.ig-btn:hover { background: var(--band); }
@media print { body, body:not(.salon) { background: #fff; } }
.btn.ghost.ig-btn { background: var(--surface); }
.surcharge-note { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 0 12px; border-top: 1px solid var(--line); font-size: .85rem; font-style: italic; color: var(--ink-2); }

/* Contactblok op de infopagina: formulier met lijnvelden links, gegevens rechts. */
.contact-grid { margin-top: 8px; }
.field.line label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.field.line input, .field.line textarea {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 8px 0; box-shadow: none;
}
.field.line input:focus, .field.line textarea:focus { outline: none; border-bottom-color: var(--taupe); box-shadow: 0 1px 0 var(--taupe); }
.field.line textarea { resize: vertical; min-height: 96px; }

/* Voettekst op de klantkant: mokka met het ruitenpatroon, lichte tekst, brons als accent. */
.site-footer[hidden] { display: none; }
.site-footer {
  margin-top: 40px; color: #e9dfd3; font-size: .9rem;
  background:
    linear-gradient(to bottom, rgba(36, 31, 27, .55), rgba(36, 31, 27, .80)),
    var(--weave) 0 0 / 104px 104px,
    #2f2925;
  border-top: 1px solid rgba(210, 169, 120, .35);
}
.footer-inner { max-width: 760px; margin: 0 auto; padding: 36px 16px 20px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); gap: 32px; }
@media (max-width: 760px) { .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.site-footer h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: #f6efe6; margin: 0 0 10px; }
.site-footer p { margin: 0 0 12px; line-height: 1.75; color: #d9ccbd; }
.site-footer .footer-intro { color: #c8b9a9; }
.site-footer a { color: #d2a978; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-hours { border-collapse: collapse; width: 100%; max-width: 280px; }
.footer-hours th, .footer-hours td { padding: 3px 0; text-align: left; font-weight: 400; color: #d9ccbd; }
.footer-hours th { width: 50%; color: #f1e9df; font-weight: 500; }
.footer-hours tr.today th, .footer-hours tr.today td { color: #d2a978; }
.footer-social { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.footer-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(210, 169, 120, .5); color: #d2a978; flex: none; }
.footer-icon svg { width: 17px; height: 17px; }
.footer-bottom { border-top: 1px solid rgba(210, 169, 120, .18); padding: 14px 20px; text-align: center; font-size: .75rem; letter-spacing: .08em; color: #a8998a; }
@media print { .site-footer { display: none !important; } }
/* Portretfoto bij "Hoi, ik ben Marieke": rond, met een mokka rand en een dun bronzen lijntje. */
.portrait { width: 88px; height: 88px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 3px solid #2f2925; box-shadow: 0 0 0 1px rgba(199, 154, 108, .6), 0 6px 16px rgba(47, 41, 37, .18); }
@media (max-width: 480px) { .portrait { width: 68px; height: 68px; } }
/* "Alleen op afspraak" bij de openingstijden. */
.by-appointment { display: inline-block; margin: 0; padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-ink); background: var(--brand-soft); }
.site-footer .by-appointment { margin: -4px 0 10px; color: #d2a978; background: rgba(210, 169, 120, .12); border: 1px solid rgba(210, 169, 120, .35); }

/* Vaste knop "Afspraak aanvragen" (klantkant) en het venster voor het verzoek. */
.book-fab[hidden] { display: none; }
.book-fab {
  position: fixed; z-index: 12; right: 16px; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
  background: #2f2925; color: #f1e9df; border: 1px solid rgba(210, 169, 120, .6);
  font: 500 .78rem var(--font); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 10px 28px rgba(36, 31, 27, .35);
}
.book-fab svg { width: 18px; height: 18px; color: #d2a978; }
.book-fab:hover { background: #241f1b; }
.request {
  width: min(460px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow: auto; padding: 24px 22px 20px;
  border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.request::backdrop { background: rgba(36, 31, 27, .6); }
.request form { position: relative; }
.request-close { position: absolute; top: -8px; right: -6px; border: 0; background: none; font-size: 1.4rem; }
.request h2 { margin-bottom: 4px; }
/* Melding vooraf (SALON.notice). */
.site-notice { padding-top: 0; text-align: center; overflow: hidden; }
.site-notice .r-weave { margin: 0 -22px 20px; }
.site-notice h2 { font-size: 1.7rem; margin: 4px 0 10px; }
.site-notice p { color: var(--ink-2); line-height: 1.6; margin: 0 0 20px; }
.site-notice .row { justify-content: center; }
.site-notice .notice-img { display: block; width: calc(100% + 44px); max-height: 260px; object-fit: cover; margin: -20px -22px 18px; }
/* Website › Pop-up (kapperskant). */
.nt-status .nt-state { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.nt-dot { width: 12px; height: 12px; border-radius: 50%; background: #9a9088; flex: none; }
.nt-status.on { border-color: #5d8a5b; background: #eef4ec; }
.nt-status.on .nt-dot { background: #4f8a4c; box-shadow: 0 0 0 4px rgba(79, 138, 76, .18); }
.nt-status.wait .nt-dot { background: var(--taupe); }
.nt-changed { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink); font-size: .85rem; }
.check.nt-onoff { align-items: flex-start; }
.check.nt-onoff input { margin-top: 2px; }
.nt-emojis { display: flex; flex-wrap: wrap; gap: 4px; }
.nt-emoji { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.nt-emoji:hover { border-color: var(--taupe); }
.nt-photo img { display: block; max-width: 220px; max-height: 160px; border-radius: 8px; margin-bottom: 8px; object-fit: cover; }
.nt-preview { padding: 20px 12px; border-radius: var(--radius); background: rgba(36, 31, 27, .75); }
.nt-preview .site-notice { margin: 0 auto; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.nt-preview .btn { pointer-events: none; }
.nt-link { margin-top: 16px; }
.nt-link summary { cursor: pointer; font-weight: 500; }
.nt-link ol { padding-left: 20px; line-height: 1.6; }
.field.line select { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 8px 0; }
.disc-custom { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--ink-2); }
.disc-custom input { width: 72px; padding: 6px 8px; }
.r-discount td { color: var(--brand-ink); font-style: italic; }

/* ==========================================================================
   Cadeaubon: kaart in de huisstijl (mokka met ruitenpatroon, brons, ivoor).
   Op het scherm als voorbeeld; bij afdrukken op A6-formaat (148 × 105 mm).
   ========================================================================== */
.giftcard {
  display: grid; grid-template-columns: 40% 60%; max-width: 560px; aspect-ratio: 148 / 105; margin: 0 auto;
  border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(36, 31, 27, .28);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gc-left {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 12px; text-align: center; color: #f1e9df;
  background: linear-gradient(160deg, rgba(255, 236, 214, .10), rgba(0, 0, 0, .25)), var(--weave) 0 0 / 70px 70px, #2f2925;
  border-right: 3px solid #a87b4f;
}
.gc-left img { width: 70%; max-width: 150px; height: auto; }
.gc-title { font-family: var(--serif); font-size: 1.3rem; letter-spacing: .32em; text-transform: uppercase; color: #d2a978; margin-top: 6px; }
.gc-worth { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: #6b4532; }
.gc-amount { font-family: var(--serif); font-size: 2.6rem; font-weight: 600; line-height: 1; color: #2b2420; margin-bottom: 4px; }
.gc-right { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px 20px; background: #fbf7f1; color: #2b2420; }
.gc-msg { margin: 2px 0; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: #4f463f; }
.gc-code-box { margin-top: 4px; padding: 6px 10px; border: 1px dashed #a87b4f; border-radius: 6px; display: flex; align-items: baseline; gap: 10px; }
.gc-code-box span { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: #6b4532; }
.gc-code-box b, .gc-code { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .08em; }
.gc-code-box b { font-size: 1.05rem; }
.gc-small { font-size: .62rem; line-height: 1.45; color: #675e57; }
@media (max-width: 480px) { .giftcard { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; } .gc-left { border-right: 0; border-bottom: 3px solid #a87b4f; } }

/* Verzilveren bij het afrekenen */
.voucher input { text-transform: uppercase; font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.voucher-on { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--btn-radius); background: var(--brand-soft); }

.r-novat { margin: 8px 0 0; font-size: .8rem; color: #545454; }
/* Ruitenstrook op de bon, tussen de donkere kop en het witte deel (zoals boven "Goed om te weten"). */
.r-weave {
  height: 14px; margin: 0 -18px 14px;
  background:
    linear-gradient(115deg, rgba(255, 236, 214, .12) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, .22) 100%),
    var(--weave) 0 -11px / 36px 36px repeat-x,
    #2f2925;
  border-bottom: 1px solid rgba(199, 154, 108, .35);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ==========================================================================
   Kapperskant: subtiele touches met het ruitenpatroon.
   ========================================================================== */
/* Zijmenu: het patroon heel gedempt in de achtergrond. */
body.has-menu .sidemenu {
  background:
    linear-gradient(to bottom, rgba(36, 31, 27, .84), rgba(36, 31, 27, .93)),
    var(--weave) 0 0 / 104px 104px,
    #2f2925;
}
/* Smalle ruitenstrook onder de bovenbalk. */
body.salon .topbar { position: sticky; }
body.salon .topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 236, 214, .12) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, .22) 100%),
    var(--weave) 0 -14px / 36px 36px repeat-x,
    #2f2925;
  border-bottom: 1px solid rgba(199, 154, 108, .35);
}
@media print { body.salon .topbar::after { display: none; } }
/* Bovenbalk over de volle breedte (ook boven het zijmenu), en boven het menu zodat de strook doorloopt. */
body.salon .topbar { z-index: 25; }
@media (min-width: 900px) {
  body.has-menu .topbar { margin-left: -250px; padding-left: 16px; }
}

/* Nieuwe afspraak: snel kiezen over 1 t/m 10 weken. */
.quick-weeks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
@media (max-width: 480px) { .quick-weeks { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } }
.quick-weeks .chip { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; line-height: 1.2; text-align: center; }
.quick-weeks .chip b { font-size: .8rem; font-weight: 600; }
.quick-weeks .chip span { font-size: .68rem; color: var(--ink-2); white-space: nowrap; }
.quick-weeks .chip[aria-pressed="true"] span { color: inherit; }

/* Ga naar datum: compacte maandkalender in week- en dagoverzicht. */
.jump-panel { max-width: 300px; margin: -4px auto 14px; }
.jump-panel .calendar { max-width: none; padding: 10px; box-shadow: var(--shadow); }
.jump-panel .cal-cell { font-size: .82rem; min-height: 32px; }
.jump-panel .cal-cell:not(:disabled) { background: transparent; }
.jump-panel .cal-cell:not(:disabled):hover { background: var(--brand-soft); }
.jump-panel .cal-cell.selected { background: var(--accent); color: var(--accent-ink); }

/* Inplannen buiten de werktijden (uitzondering) */
.check.anytime { margin: 0 0 12px; align-items: flex-start; }
.check.anytime input { margin-top: 3px; }
.slot.off-hours { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 5px, var(--surface-2) 5px, var(--surface-2) 10px); color: var(--ink-2); }
/* Welkomstregel in het blok bovenaan de startpagina */
.hero .hero-welcome { margin: 0 auto 8px; font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.3; color: #e6ddd1; max-width: none; }
/* Contactblok: het kopje "Contact" iets groter */
.card.contact > .eyebrow { font-size: .9rem; letter-spacing: .2em; margin-bottom: 8px; }

/* Sfeerfoto's van de salon: eerste foto groot, de rest eromheen. */
.salon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 130px; gap: 8px; }
.salon-grid > :first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 560px) { .salon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 110px; } }
.salon-tile { display: block; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); cursor: zoom-in; box-shadow: 0 1px 2px rgba(47, 41, 37, .08), 0 10px 30px rgba(47, 41, 37, .10); }
.salon-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.salon-tile:hover img, .salon-tile:focus-visible img { transform: scale(1.04); }
.salon-tile.placeholder {
  cursor: default; display: grid; place-items: center; text-align: center; color: #e6ddd1;
  background: linear-gradient(160deg, rgba(255, 236, 214, .10), rgba(0, 0, 0, .28)), var(--weave) 0 0 / 70px 70px, #2f2925;
}
.salon-tile.placeholder span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #d2a978; }
.salon-tile.placeholder b { display: block; margin-top: 6px; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #f1e9df; }
.salon-photo { padding: 0; border: 0; background: transparent; max-width: min(960px, 94vw); max-height: 92vh; }
.salon-photo::backdrop { background: rgba(20, 16, 14, .82); }
.salon-photo img { display: block; max-width: 100%; max-height: 84vh; border-radius: 8px; margin: 0 auto; }
.salon-photo p { margin: 10px 0 0; text-align: center; color: #e6ddd1; font-family: var(--serif); font-size: 1.1rem; }
.salon-photo:focus, .salon-photo:focus-visible { outline: none; }

/* "Zet je afspraak in je agenda" (link uit de bevestigingsmail). */
.addcal { max-width: 520px; }
.addcal-when { display: flex; gap: 14px; align-items: flex-start; font-size: 1.05rem; line-height: 1.5; }
.addcal-icon { font-size: 1.8rem; line-height: 1; }
.addcal-buttons { display: grid; gap: 10px; }

/* E-mail: voorbeeld van een mail zoals de klant hem ziet (kapperskant). */
.mail-preview { max-width: 680px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 6px 20px rgba(36, 31, 27, .08); overflow: hidden; margin-bottom: 14px; }
.mail-head { padding: 14px 18px; border-bottom: 1px solid var(--line); background: #faf7f3; font-size: .88rem; display: grid; gap: 4px; }
.mail-head span { display: inline-block; width: 82px; color: var(--ink-2); }
.mail-subject b { font-weight: 600; }
.mail-body { padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; font: .95rem/1.55 var(--font); color: #222; }
.mail-body a { color: #1a5fb4; }
@media (max-width: 480px) { .mail-head span { width: 70px; } }
.mail-attach { padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--ink-2); }
.mail-attach img { display: block; max-width: 240px; margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; }
.mail-html { display: block; width: 100%; height: 900px; border: 0; background: #f3ece3; }
/* Annuleringskosten bij het afrekenen. */
.cancel-fee { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--brand-soft); }
.cancel-amount { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .9rem; }
.cancel-amount input { width: 96px; padding: 6px 8px; }
/* Wachtlijst. */
.wait-head { display: flex; gap: 12px; align-items: flex-start; }
.wait-contact { flex: none; }
.wait-entry.has-spot { border-color: var(--taupe); }
.wait-spots { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--brand-soft); }
.wait-spots .chips { margin-top: 6px; padding-bottom: 4px; }
.wait-spots a.chip { text-decoration: none; color: inherit; }
@media (max-width: 480px) { .wait-head { flex-direction: column; } }
/* Bolletje met een aantal in het zijmenu (bijv. recepturen die nog ingevuld moeten worden). */
.sm-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: #c0533a; color: #fff; font: 600 .7rem/1 var(--font); letter-spacing: 0; }
.sm-head .sm-badge { flex: none; margin: 0 8px 0 0; }
.sm-group.open > .sm-head .sm-badge { display: none; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #c0533a; color: #fff; font: 600 .75rem/1 var(--font); vertical-align: middle; }
/* Recepturen. */
.rec-actions { flex: none; align-items: center; }
.copy-prev { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.copy-prev .grow { min-width: 200px; }

/* Prijslijst › Behandelingen: tabel in de huisstijl (kapperskant). */
/* De tabel mag de volle breedte gebruiken. */
body.salon main:has(.pl-table) { max-width: 1320px; }
/* Met het zijmenu (250 px) altijd genoeg ruimte links, ook op een breed scherm. */
@media (min-width: 1000px) { body.salon.has-menu { padding-left: 250px; } }
.pl-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.pl-toolbar select, .pl-toolbar input[type="search"] { width: auto; min-width: 0; flex: 1 1 180px; max-width: 260px; }
.pl-toolbar .pl-spacer { flex: 1 1 0; }
.pl-toolbar .btn svg { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.pl-tool { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--black); cursor: pointer; }
.pl-tool:hover { border-color: var(--taupe); color: var(--walnut); }
.pl-tool svg { width: 18px; height: 18px; }
.pl-unsaved { margin: -4px 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink); font-size: .85rem; }
.pl-table { padding: 6px 0; overflow: hidden; container-type: inline-size; }
.pl-row { display: grid; grid-template-columns: 34px minmax(180px, 1fr) 72px 120px 82px 52px 76px 56px 52px; gap: 10px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.pl-row.changed { background: #fbf3e8; box-shadow: inset 3px 0 0 var(--taupe); }
.pl-headrow { font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-bottom: 0; padding-top: 10px; padding-bottom: 10px; }
.pl-headrow span:nth-child(n+3) { text-align: center; }
.pl-cat { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 12px 16px; border: 0; background: var(--brand-soft); color: var(--black); font: 500 1.15rem var(--serif); cursor: pointer; text-align: left; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pl-cat svg { width: 18px; height: 18px; transform: rotate(180deg); transition: transform .2s; color: var(--walnut); }
.pl-group.closed .pl-cat svg { transform: none; }
.pl-count { font: 500 .75rem var(--font); color: var(--brand-ink); background: var(--surface); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }
.pl-check input { width: 18px; height: 18px; accent-color: var(--black); }
.pl-name input { width: 100%; padding: 6px 10px; }
.pl-kind { display: inline-block; margin-top: 3px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.pl-dur, .pl-pm, .pl-vat { text-align: center; font-size: .9rem; white-space: nowrap; }
.pl-dur { color: var(--ink-2); }
.pl-price { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.pl-price .pl-euro { display: flex; align-items: center; padding: 0 9px; background: var(--brand-soft); color: var(--walnut); border-right: 1px solid var(--line); }
.pl-price input { border: 0; border-radius: 0; padding: 6px 8px; text-align: right; width: 100%; min-width: 0; background: transparent; }
.pl-price input.invalid { background: #fbe7e3; }
.pl-row > .pl-price:has(.muted) { border: 0; justify-content: center; background: none; }
.pl-vis, .pl-color, .pl-edit { display: flex; justify-content: center; }
.pl-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.pl-icon.on { border-color: var(--taupe); color: var(--walnut); background: var(--brand-soft); }
.pl-icon:hover { border-color: var(--taupe); color: var(--walnut); }
.pl-icon svg { width: 18px; height: 18px; }
.pl-swatch { position: relative; display: block; width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.pl-swatch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
/* Smal scherm (telefoon): per behandeling twee regels, minder kolommen. */
@container (max-width: 820px) {
  .pl-headrow { display: none; }
  .pl-row { grid-template-columns: 22px minmax(0, 1fr) 40px 32px 40px 112px; grid-template-areas: "check name name name name price" ". dur vis color edit pm"; row-gap: 6px; column-gap: 8px; padding: 10px 12px; }
  .pl-check { grid-area: check; } .pl-name { grid-area: name; } .pl-price { grid-area: price; }
  .pl-dur { grid-area: dur; text-align: left; font-size: .82rem; }
  .pl-pm { grid-area: pm; text-align: right; font-size: .78rem; color: var(--ink-2); }
  .pl-pm::after { content: " p/m"; }
  .pl-vat { display: none; }
  .pl-vis { grid-area: vis; } .pl-color { grid-area: color; } .pl-edit { grid-area: edit; }
  .pl-icon { width: 36px; height: 30px; } .pl-swatch { width: 28px; height: 28px; }
}

/* Inwerktijd (posetijd) in de agenda: je bent dan vrij voor een andere klant. */
.pause-line { margin-top: 4px; color: var(--brand-ink); }
.co-price { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; }
.co-price input { width: 84px; padding: 6px 8px; text-align: right; }

/* Behandeling instellen: stappen Basis · Kassa · Afsprakenboek (kapperskant, huisstijl). */
.sv-form { max-width: 900px; }
.sv-summary { text-align: center; margin: 4px 0 14px; font-size: .95rem; color: var(--ink-2); }
.sv-summary b { font: 500 1.4rem var(--serif); color: var(--black); }
.sv-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 18px; padding: 0; position: relative; }
.sv-steps::before { content: ''; position: absolute; top: 20px; left: 16.6%; right: 16.6%; height: 3px; background: var(--sand); }
.sv-steps li { position: relative; display: flex; justify-content: center; }
.sv-steps button { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font: 600 .95rem var(--font); color: var(--ink-2); }
.sv-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #b9aa97; color: #fff; font-weight: 600; box-shadow: 0 0 0 4px var(--bg); }
.sv-dot svg { width: 18px; height: 18px; }
.sv-steps button.on { color: var(--black); }
.sv-steps button.on .sv-dot { background: var(--taupe); }
.sv-parts { margin: 4px 0 10px; }
.sv-parts-head, .sv-part, .sv-parts-total { display: grid; grid-template-columns: minmax(0, 1fr) 110px 36px; gap: 8px; align-items: center; }
.sv-parts-head { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.sv-part { margin-bottom: 6px; }
.sv-part input { padding: 7px 10px; }
.sv-min { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--ink-2); }
.sv-min input { width: 70px; text-align: right; }
.sv-part input.invalid, .sv-min input.invalid { border-color: #c0533a; background: #fbe7e3; }
.sv-parts-total { margin-top: 2px; font-size: .9rem; color: var(--ink-2); }
.sv-parts-total b { color: var(--black); }
.sv-palette { padding-left: 0; }
.sv-own { position: relative; overflow: hidden; outline: 2px dashed rgba(0, 0, 0, .25); outline-offset: -4px; }
.sv-own input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sv-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 4px; }
.sv-block { padding: 14px 16px 16px; border-radius: 10px; color: #f1e9df;
  background: linear-gradient(to bottom, rgba(36, 31, 27, .86), rgba(36, 31, 27, .95)), var(--weave) 0 0 / 104px 104px, #2f2925; }
.sv-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sv-block-head b { font: 500 1.15rem var(--serif); color: #fff; }
.sv-x { border: 0; background: none; color: #f1e9df; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.sv-label { display: block; font-size: .85rem; color: #e6ddd1; margin: 8px 0 4px; }
.sv-label > input, .sv-label .sv-min input { display: block; width: 100%; margin-top: 4px; background: #fbf7f1; }
.sv-label .sv-min { display: flex; color: #e6ddd1; } .sv-label .sv-min input { width: 90px; display: inline-block; }
.sv-block-parts { list-style: none; margin: 10px 0 0; padding: 0; }
.sv-block-parts label { display: grid; grid-template-columns: minmax(0, 1fr) 46px 20px; gap: 8px; align-items: center; padding: 5px 0; cursor: pointer; font-size: .9rem; }
.sv-pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-pt { color: #d2a978; font-variant-numeric: tabular-nums; }
.sv-block-parts input { width: 18px; height: 18px; accent-color: var(--taupe); }
.sv-block-sum { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(210, 169, 120, .45); font-size: .9rem; }
.sv-block-sum b { color: #d2a978; }
.sv-note { display: block; font-size: .75rem; color: #cfc3b6; margin-top: 4px; }
.sv-timeline { display: flex; height: 38px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.sv-timeline span { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: .75rem; }
.sv-timeline .work { background: var(--black); color: #f1e9df; }
.sv-timeline .work + .work { border-left: 2px solid var(--bg); }
.sv-timeline .pause { background: repeating-linear-gradient(135deg, var(--brand-soft), var(--brand-soft) 6px, #fff 6px, #fff 12px); color: var(--brand-ink); }
.sv-timeline b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sv-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.sv-nav .pl-spacer { flex: 1; }
.sv-nav [hidden], .sv-form [hidden] { display: none !important; }

/* Fysieke cadeaubon: voorkant en achterkant (A6 liggend). */
.gc-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
.gc-sides figure { margin: 0; text-align: center; }
.gc-side { display: block; width: 100%; aspect-ratio: 148 / 105; border-radius: 8px; background: #2f2925; box-shadow: 0 12px 32px rgba(36, 31, 27, .25); }
.gc-sides figcaption { margin-top: 8px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
/* Afdrukken: alleen de twee kanten, elk op een eigen A6-pagina (dubbelzijdig afdrukken). */
@media print {
  @page giftcard { size: 148mm 105mm; margin: 0; }
  body.print-giftcard main > *:not(.gc-sides):not(.card:has(.gc-sides)) { display: none !important; }
  body.print-giftcard main .card:has(.gc-sides) > *:not(.gc-sides) { display: none !important; }
  body.print-giftcard main .card:has(.gc-sides) { border: 0; padding: 0; margin: 0; box-shadow: none; background: none; }
  body.print-giftcard .gc-sides { display: block; max-width: none; margin: 0; }
  body.print-giftcard .gc-sides figure { page: giftcard; width: 148mm; height: 105mm; break-after: page; }
  body.print-giftcard .gc-sides figure:last-child { break-after: auto; }
  body.print-giftcard .gc-side { width: 148mm; height: 105mm; border-radius: 0; box-shadow: none; }
  body.print-giftcard .gc-sides figcaption { display: none; }
}
/* Voorraad: een kopje per merk (Eleven Australia, Gaijess, verbruik). */
.brand-section { margin-top: 22px; }
.brand-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--taupe); font: 500 1.5rem var(--serif); color: var(--black); }
#sv-cat-error { margin: 6px 0 0; }
/* Behandeling instellen › Basis: per gekozen behandeling een blok met de onderdelen. */
.sv-group { margin-bottom: 14px; }
.sv-group-head, .sv-group-add { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 10px; align-items: center; }
.sv-group-add { grid-template-columns: minmax(0, 1fr); }
.sv-group-x { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--taupe); border-radius: 8px; background: var(--surface); color: var(--walnut); cursor: pointer; }
.sv-group-x svg { width: 20px; height: 20px; }
.sv-group-x:hover { background: var(--brand-soft); }
.sv-group-parts { margin: 8px 50px 0 18%; }
.sv-group-parts .sv-parts-head { margin-top: 2px; }
.sv-pname { color: var(--black); }
.sv-group-parts .sv-parts-total { margin-top: 2px; }
.sv-grand { display: flex; justify-content: space-between; margin: 4px 50px 0 18%; padding-top: 8px; border-top: 1px solid var(--line); font-size: .95rem; }
@media (max-width: 600px) { .sv-group-parts, .sv-grand { margin-left: 0; margin-right: 0; } }
/* Nieuwe afspraak: zoeken bij Toevoegen. De groep staat er alleen bij tijdens het zoeken. */
.book-search { margin-bottom: 10px; }
.opt-cat { display: none; }
main.book-searching .opt-cat { display: inline; }
.option[hidden], #book-cats[hidden], #book-none[hidden] { display: none !important; }

/* Weekagenda: afspraken verslepen en langer/korter maken. */
.wk-appt.movable { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.wk-resize { position: absolute; left: 0; right: 0; bottom: -3px; height: 10px; cursor: ns-resize; touch-action: none; }
.wk-resize::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: color-mix(in srgb, var(--c, #8d99ae) 70%, #000); opacity: 0; transition: opacity .15s; }
.wk-appt:hover .wk-resize::after, .wk-appt:focus-visible .wk-resize::after { opacity: .7; }
@media (hover: none) { .wk-resize { height: 16px; bottom: -6px; } .wk-resize::after { opacity: .5; } }
.wk-appt.drag-source { opacity: .35; }
.wk-ghost { position: absolute; left: 2px; right: 2px; z-index: 6; padding: 3px 6px; border-radius: 6px; border: 2px dashed var(--black); background: color-mix(in srgb, var(--taupe) 25%, var(--surface)); font: 600 .72rem var(--font); color: var(--black); pointer-events: none; box-shadow: 0 6px 16px rgba(36, 31, 27, .25); }
body.wk-dragging, body.wk-dragging * { cursor: grabbing !important; }
.appt-edit { width: min(440px, calc(100% - 32px)); }
.appt-edit h2 { margin: 2px 0 4px; }
/* Weekagenda: halve uren als lichtere stippellijn, met een kleine tijd ernaast. */
.wk-hour.half { border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.wk-times span.half { font-size: .58rem; opacity: .6; }
.ae-pause { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; font-size: .92rem; }

/* ---------- Nieuwe afrekening: compact voor telefoon en tablet ---------- */
.sell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sell-head h1 { margin-bottom: 8px; }
.sell-bon { padding-top: 12px; }
.sell-bon > select { width: 100%; }
.bon-lines { margin-top: 8px; }
.bon-lines li { gap: 8px; padding: 8px 0; }
.bon-lines .grow b { line-height: 1.25; }
.bon-lines .grow .muted { margin-left: 6px; white-space: nowrap; }
.bon-lines .stepper { gap: 4px; }
.bon-lines .stepper .icon-btn { width: 34px; height: 34px; }
.bon-lines .price { min-width: 64px; text-align: right; }
.sell-add { display: flex; gap: 8px; margin-top: 10px; }
.sell-add select { flex: 1; min-width: 0; }
.sell-add .btn { flex: none; }
.sell-picker { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.sell-picker .btn.block { margin-top: 8px; }
.sell-extras { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.sell-extras summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
.paybar {
  position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
}
.paybar .chips { padding: 0; }
.paybar .btn { flex: 1 1 140px; padding-left: 10px; padding-right: 10px; }
.paybar .chip { padding: 6px 12px; }
@media (max-width: 420px) {
  .bon-lines li { flex-wrap: wrap; }
  .bon-lines .grow { flex: 1 1 100%; }
  .bon-lines .stepper { margin-right: auto; }
}
.ae-products { margin-top: 12px; }
.ae-products select { width: 100%; margin-top: 6px; }
.ae-more { justify-content: space-between; margin-top: 10px; font-size: .9rem; }
.danger-text { color: var(--warn); }

/* ---------- Uitklapknoppen bij het afrekenen: + is dicht, − is open ---------- */
.toggle-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.toggle-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .88rem var(--font); cursor: pointer;
}
.toggle-btn .toggle-icon {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 1rem; line-height: 1;
}
.toggle-btn[aria-expanded="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.toggle-btn[aria-expanded="true"] .toggle-icon { background: var(--accent-ink); color: var(--accent); }
.toggle-note { font-weight: 500; font-size: .75rem; opacity: .75; }
.add-panel { margin-top: 10px; padding: 10px; border-radius: var(--radius); background: var(--band); }
.add-panel select { width: 100%; }
.add-panel .chips { padding-bottom: 0; }
.add-panel .discount > .small.muted:first-child, .add-panel .voucher > .small.muted:first-child { margin-top: 0 !important; }

/* ---------- Wachtrij: afrekeningen van de dag ---------- */
.queue-day { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.queue-day .grow { flex: 1; text-align: center; }
.queue-item { padding: 12px 14px; }
.queue-item.ready { border-left: 4px solid var(--ok); }
.q-main { display: flex; align-items: flex-start; gap: 10px; color: inherit; text-decoration: none; }
.q-main .grow { min-width: 0; }
.q-main .grow b { display: inline; }
.q-lines { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.q-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--brand-ink); min-width: 44px; }
.q-ready { font-size: .75rem; font-weight: 600; color: var(--ok); white-space: nowrap; }
.q-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.q-actions .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
.queue-item.card-link { display: flex; align-items: center; gap: 10px; }
.queue-item.card-link .grow b, .queue-item.card-link .grow span { display: block; }

/* ==========================================================================
   Agenda in een rustige opzet (zoals Salonized), met de eigen huisstijl:
   één werkbalk, wit rooster met dunne lijnen, weeknummer linksboven,
   een rij voor hele dagen en zachte pastelblokken per behandeling.
   ========================================================================== */
.cal-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 12px; }
/* Werkbalk: allemaal dezelfde rustige witte knoppen (gewone letters, dunne rand),
   alleen "Afspraak toevoegen" is gevuld. */
.cal-toolbar .btn, .cal-toolbar .icon-btn, .cal-range, .cal-select select {
  height: 40px; min-height: 40px; padding: 0 14px; border: 1px solid #d9d2c8; border-radius: 6px;
  background: var(--surface); color: var(--ink); font: 400 .9rem var(--font);
  letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; gap: 0;
}
.cal-toolbar .btn:not(.ghost) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 500; padding: 0 18px; }
.cal-toolbar .btn:hover { opacity: 1; }
.cal-toolbar .btn.ghost:hover, .cal-toolbar .icon-btn:hover, .cal-range:hover, .cal-select select:hover { background: var(--band); }
.cal-toolbar .btn:not(.ghost):hover { background: var(--black-2); }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav .icon-btn { width: 40px; height: 40px; padding: 0; font-size: 1.15rem; color: var(--ink-2); }
/* Dun pijltje omlaag, zoals in een keuzelijst. */
.cal-range { display: inline-flex; align-items: center; gap: 12px; }
.cal-range::after, .cal-select::after {
  content: ''; width: 6px; height: 6px; border: solid var(--ink-2); border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg); flex: none;
}
.cal-select { position: relative; display: inline-flex; }
.cal-select select { appearance: none; -webkit-appearance: none; padding-right: 38px; }
.cal-select::after { position: absolute; right: 16px; top: 50%; margin-top: -3px; pointer-events: none; }
.cal-actions { display: flex; gap: 10px; margin-left: auto; }
@media (max-width: 560px) {
  .cal-nav { order: -1; flex: 1 1 100%; justify-content: space-between; }
  .cal-range { flex: 1; justify-content: center; }
  .hide-sm, .cal-toolbar .btn.is-current { display: none; }
  .cal-toolbar { gap: 6px; }
}

.wk { border-color: color-mix(in srgb, var(--line) 80%, transparent); box-shadow: none; }
.wk-corner {
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  font: 600 .66rem var(--font); color: var(--ink-2); letter-spacing: .02em;
}
.wk-dayhead { align-items: flex-start; padding: 8px 8px 6px; font-size: .78rem; text-transform: none; }
.wk-dayhead span { text-transform: capitalize; font-weight: 600; color: var(--ink); white-space: nowrap; }
.wk-dayhead.today span { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 1px 8px; margin-left: -4px; }
.wk-dayhead.off span { color: var(--ink-2); }
.wk-allday-label { font-size: .58rem; color: var(--ink-2); text-align: right; padding: 4px 4px 0 0; border-bottom: 1px solid var(--line); }
.wk-allday { display: flex; flex-direction: column; gap: 2px; min-height: 22px; padding: 2px 3px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wk-chip {
  display: block; padding: 1px 6px; border-radius: 4px; font-size: .66rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--brand-soft); color: var(--ink); text-decoration: none; border-left: 3px solid var(--taupe);
}
.wk-chip b { float: right; margin-left: 4px; }
.wk-chip.off { background: color-mix(in srgb, var(--sand) 45%, var(--surface)); border-left-color: var(--ink-2); }

.wk-times span { color: var(--ink); font-size: .66rem; }
.wk-times span.q { font-size: .54rem; color: var(--ink-2); opacity: .55; }
.wk-hour { border-top-color: color-mix(in srgb, var(--line) 85%, transparent); }
.wk-hour.half { border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.wk-hour.q { border-top: 1px solid color-mix(in srgb, var(--line) 25%, transparent); }
.wk-col.today { background: color-mix(in srgb, var(--taupe) 5%, transparent); }
.wk-closed { background: repeating-linear-gradient(135deg, transparent, transparent 7px, color-mix(in srgb, var(--surface-2) 70%, transparent) 7px, color-mix(in srgb, var(--surface-2) 70%, transparent) 14px); }

/* Pastelblokken: hele blok zacht gekleurd, een dun randje in de eigen kleur, donkere tekst. */
.wk-appt {
  left: 2px; right: 2px; padding: 3px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--c) 30%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c) 55%, var(--surface)); border-left-width: 1px;
  box-shadow: none; font-size: .7rem; line-height: 1.3;
}
.wk-appt:hover, .wk-appt:focus-visible { background: color-mix(in srgb, var(--c) 42%, var(--surface)); }
.wk-line { color: var(--ink); }
.wk-line .wk-time { display: inline; color: var(--ink); font-weight: 400; font-size: 1em; margin-right: 2px; }
.wk-line b { font-weight: 700; }
.wk-sub { color: color-mix(in srgb, var(--ink) 78%, transparent); }
.wk-marks { position: absolute; right: 4px; bottom: 2px; display: flex; gap: 2px; font-size: .62rem; line-height: 1; opacity: .8; }
.wk-appt.short .wk-marks { display: none; }
.wk-appt.done { opacity: .75; }
.wk-appt.cancelled { border-style: dashed; }
.wk-appt.blok { border-color: var(--line); }
@media (max-width: 560px) {
  .wk-appt { padding: 2px 3px; font-size: .62rem; border-left-width: 1px; }
  .wk-times span.q { display: none; }
  .wk-dayhead { padding: 6px 3px; font-size: .68rem; }
  .wk-chip { font-size: .58rem; padding: 1px 3px; }
}

.cal-help { margin-top: 10px; font-size: .9rem; }
.cal-help summary { cursor: pointer; color: var(--ink-2); font-size: .85rem; }
.cal-help .legend { margin: 10px 0 6px; }

/* ---------- Dagoverzicht in dezelfde rustige opzet ---------- */
.day-sheet { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--radius); padding: 4px 14px 10px; }
.day-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.day-head b { text-transform: capitalize; }
.day-allday { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.day-allday .wk-chip { display: inline-block; }
.day-empty { margin: 14px 0; }
.day-sheet .appt {
  grid-template-columns: 52px 1fr; gap: 10px; margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 0; background: none;
}
.day-sheet .appt time { font-size: .88rem; padding-top: 6px; }
.day-sheet .appt time small { font-size: .75rem; opacity: .7; }
.appt-body { min-width: 0; }
.appt-top { padding: 6px 10px; border-radius: 4px; background: color-mix(in srgb, var(--c, var(--taupe)) 24%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c, var(--taupe)) 50%, var(--surface)); }
.appt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.appt-title { color: var(--ink); font-weight: 700; text-decoration: none; }
.appt-what { font-size: .82rem; color: color-mix(in srgb, var(--ink) 78%, transparent); margin-top: 1px; }
.appt-facts { display: grid; gap: 3px; margin: 8px 0 0 2px; }
.appt-facts .followup-line, .appt-facts .pause-line { margin: 0; }
.appt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.appt-actions .link-btn { margin-left: auto; }
.day-sheet .appt.done .appt-top { opacity: .8; }
.day-sheet .appt.cancelled { opacity: .55; }
.day-sheet .appt.block .appt-body { padding: 6px 10px; border-radius: 4px; background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 7px, var(--surface-2) 7px, var(--surface-2) 14px); }
.day-gap {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); color: var(--ink-2); text-decoration: none; font-size: .82rem;
}
.day-gap time { font-variant-numeric: tabular-nums; opacity: .8; }
.day-gap span { font-style: italic; }
.day-gap b { font-weight: 600; color: var(--brand-ink); font-size: .78rem; opacity: 0; transition: opacity .15s; }
.day-gap:hover b, .day-gap:focus-visible b { opacity: 1; }
@media (hover: none) { .day-gap b { opacity: .8; } }

/* ---------- Herinneren met één tik (WhatsApp of mail) ---------- */
.remind-box { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-left: 4px solid var(--ok); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; }
.remind-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.remind-box .list li { gap: 10px; padding: 8px 0; }
.remind-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.wa-icon { width: 18px; height: 18px; flex: none; }
.remind-head .wa-icon { vertical-align: -4px; margin-right: 4px; }
.remind-btn:hover { border-color: #25D366; }

/* ---------- Dagoverzicht: rustige lijst (zoals Salonized) ----------
   Per afspraak één witte regel: tijd, kleurstip, naam, behandeling. Tik voor details. */
.day-sheet { padding: 0; overflow: hidden; }
.day-head { padding: 12px 18px; }
.day-allday { padding: 8px 18px; }
.day-empty { margin: 14px 18px; }
.appt-row { border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.appt-row:last-child { border-bottom: 0; }
.appt-line {
  display: grid; grid-template-columns: 52px 14px 1fr auto; align-items: center; gap: 12px; width: 100%;
  padding: 14px 18px; background: none; border: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
}
.appt-line:hover { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.appt-row.open { background: color-mix(in srgb, var(--c, var(--taupe)) 7%, var(--surface)); }
.appt-row.open .appt-line:hover { background: none; }
.appt-line time { font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.appt-line time small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-2); }
.appt-line .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--taupe)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--taupe)) 25%, transparent); }
.appt-row.block .dot { background: repeating-linear-gradient(135deg, var(--ink-2), var(--ink-2) 2px, transparent 2px, transparent 4px); box-shadow: none; border: 1px solid var(--ink-2); }
.appt-main { min-width: 0; display: grid; gap: 2px; }
.appt-main b { font-weight: 600; font-size: .98rem; }
.appt-sub { color: var(--ink-2); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-meta { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: .85rem; }
.appt-meta .hints { display: flex; gap: 6px; }
.appt-meta svg, .cake svg { width: 15px; height: 15px; }
.cake { color: var(--taupe); vertical-align: -2px; }
.amount { font-variant-numeric: tabular-nums; }
.appt-status { padding: 0 18px 10px calc(18px + 52px + 12px + 14px + 12px); margin-top: -6px; }
.appt-status .pill { font-size: .72rem; }
.appt-row.done .appt-main b, .appt-row.done time { color: var(--ink-2); }
.appt-row.cancelled .appt-main b { text-decoration: line-through; color: var(--ink-2); }
.appt-row.cancelled .dot { background: transparent; border: 1px solid var(--ink-2); box-shadow: none; }
.appt-more { padding: 2px 18px 16px calc(18px + 52px + 12px + 14px + 12px); }
.appt-facts { display: grid; gap: 6px; font-size: .86rem; }
.fact { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; }
.fact svg { width: 15px; height: 15px; margin-top: 2px; color: var(--ink-2); }
.fact.recipe { margin-top: 6px; font-size: .86rem; }
.appt-more .thumb-strip { margin-top: 8px; }
.appt-actions { margin-top: 12px; gap: 8px; }
.day-sheet .btn, .remind-box .btn, .cal-toolbar .btn { text-transform: none; letter-spacing: 0; font-weight: 500; }
.day-sheet .btn svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.appt-links { display: flex; gap: 16px; margin-top: 10px; font-size: .84rem; }
.appt-links a { color: var(--ink-2); }
.day-gap { padding: 8px 18px; grid-template-columns: 52px 1fr auto; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.day-gap span { font-style: normal; color: var(--ink-2); }
@media (max-width: 560px) {
  .appt-line { grid-template-columns: 44px 10px 1fr auto; gap: 10px; padding: 12px 14px; }
  .appt-status, .appt-more { padding-left: 14px; padding-right: 14px; }
  .appt-meta .amount { display: none; }
  .day-head, .day-allday { padding-left: 14px; padding-right: 14px; }
  .day-gap { padding: 8px 14px; grid-template-columns: 44px 1fr auto; }
}

/* Lijn-icoontjes in knoppen */
.btn > svg:not(.wa-icon) { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* ---------- Dagnotities (met belletje) ---------- */
.day-head { display: flex; align-items: baseline; gap: 8px; }
.day-head-note { margin-left: auto; font-size: .82rem; color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.day-head-note svg, .note-bell svg, .wk-chip.note svg { width: 14px; height: 14px; }
.day-gap { grid-template-columns: 52px 1fr auto; }
.gap-actions { display: flex; gap: 14px; font-size: .78rem; opacity: 0; transition: opacity .15s; }
.gap-actions a, .gap-actions .link-btn { color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.day-gap:hover .gap-actions, .day-gap:focus-within .gap-actions { opacity: 1; }
@media (hover: none) { .gap-actions { opacity: .85; } }
.day-note {
  display: grid; grid-template-columns: 52px 14px 1fr auto; align-items: center; gap: 12px; padding: 10px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: color-mix(in srgb, var(--taupe) 7%, var(--surface));
}
.day-note time { font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.note-bell { color: var(--taupe); display: grid; place-items: center; }
.day-note.due .note-bell { color: var(--warn); animation: bell 1.2s ease-in-out 2; }
.day-note.due .note-text { font-weight: 600; }
.note-text { font-size: .92rem; }
.day-note.done { background: none; }
.day-note.done .note-text { text-decoration: line-through; color: var(--ink-2); }
.day-note.done .note-bell { opacity: .4; }
.note-actions { display: flex; gap: 2px; }
.note-actions .icon-btn { width: 30px; height: 30px; font-size: .9rem; }
.day-note-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--taupe) 7%, var(--surface)); }
.day-note-form input[name="time"] { width: 110px; }
.day-note-form input[name="text"] { flex: 1 1 200px; }
.wk-chip.note { border-left-color: var(--taupe); display: flex; align-items: center; gap: 3px; }
@keyframes bell { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@media (max-width: 560px) {
  .day-note { grid-template-columns: 44px 12px 1fr auto; gap: 10px; padding: 10px 14px; }
  .day-note-form { padding: 10px 14px; }
}

/* Herinneringsblok: per afspraak tijd, kleurstip, naam, behandeling en nummer */
.remind-list { list-style: none; margin: 8px 0 0; padding: 0; }
.remind-list li { display: grid; grid-template-columns: 52px 14px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.remind-list time { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.remind-list time small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-2); }
.remind-list .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--taupe)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--taupe)) 25%, transparent); }
.remind-who { min-width: 0; display: grid; gap: 2px; }
.remind-who b { font-weight: 600; }
.remind-sub { color: var(--ink-2); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .remind-list li { grid-template-columns: 44px 10px 1fr; gap: 10px; }
  .remind-list .remind-btn { grid-column: 3; justify-self: start; }
}
/* Vrij blok is één knop: tikken = notitie. Op de telefoon staat "+ Notitie" altijd in beeld. */
button.day-gap { width: 100%; background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); text-align: left; font: inherit; font-size: .82rem; color: var(--ink-2); cursor: pointer; }
button.day-gap:hover { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.gap-actions { color: var(--brand-ink); font-weight: 600; }
.gap-actions { font-size: .78rem; }
.nl-time { font-variant-numeric: tabular-nums; }

/* Receptuur bij een kleurbehandeling: ✓ ingevuld of ! nog invullen (wachtrij en afrekenen) */
.recipe-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: .88rem; border: 1px solid var(--line); }
.recipe-row.todo { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.recipe-row.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.recipe-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; font-size: .8rem; color: #fff; background: var(--ok); flex: none; }
.recipe-row.todo .recipe-mark { background: var(--warn); }
.recipe-go { color: var(--ink-2); font-size: 1.1rem; }
.recipe-row.big { margin: 0 0 12px; padding: 10px 12px; font-size: .95rem; }
body.test-mode.test-sync.salon main::before { content: 'Demo · neppe gegevens, gedeeld tussen je apparaten'; }

/* ---------- Klant zoeken in het afsprakenboek ---------- */
.finder-panel { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.finder-input { width: 100%; }
.finder-list { list-style: none; margin: 8px 0 0; padding: 0; }
.finder-list li + li { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.finder-hit, .finder-appt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 4px; background: none; border: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.finder-hit:hover, .finder-appt:hover { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.finder-hit .grow, .finder-appt .grow { display: grid; gap: 1px; min-width: 0; }
.finder-hit b, .finder-appt b { font-weight: 600; }
.finder-count { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.finder-count.has { color: var(--ok); font-weight: 600; }
.finder-appt .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--taupe)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--taupe)) 25%, transparent); flex: none; }
.finder-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.finder-links { display: flex; gap: 16px; margin-top: 10px; font-size: .86rem; }
/* Vrij blok: drie kleine knoppen (op de telefoon altijd zichtbaar, op de computer bij aanwijzen). */
div.day-gap { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 8px 18px; font-size: .82rem; color: var(--ink-2); border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
div.day-gap .gap-actions { display: flex; gap: 14px; }
div.day-gap .gap-actions a, div.day-gap .gap-actions .link-btn { color: var(--brand-ink); text-decoration: none; font-weight: 600; font-size: .78rem; }
@media (max-width: 560px) { div.day-gap { grid-template-columns: 44px 1fr; padding: 8px 14px; } div.day-gap .gap-actions { grid-column: 1 / -1; justify-content: flex-end; gap: 18px; } }

/* ---------- Behandeling kiezen (zoals Salonized): één kaart, zoeken, groepen, rustige lijst ---------- */
.svc-pick { padding: 14px 0 6px; overflow: hidden; }
.svc-pick h2 { margin: 0 16px 10px; }
.svc-search { display: flex; align-items: center; gap: 8px; margin: 0 16px 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.svc-search svg { width: 18px; height: 18px; color: var(--taupe); flex: none; }
.svc-search input { border: 0; background: none; box-shadow: none; padding: 10px 0; flex: 1; min-width: 0; outline: none; }
.svc-cats { padding: 0 16px 10px; border-bottom: 1px solid var(--line); }
.svc-cats .chip { border-radius: 999px; }
.svc-pick #book-none { margin: 12px 16px; }
.svc-list { max-height: 60vh; overflow-y: auto; }
.svc-row {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 14px 16px; border: 0; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: none; box-shadow: none; text-align: left;
}
.svc-row:hover { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.svc-row:last-child { border-bottom: 0; }
.svc-row[disabled] { opacity: .45; }
.svc-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--taupe); flex: none; }
.svc-row:hover .svc-radio { background: color-mix(in srgb, var(--taupe) 18%, transparent); }
.svc-row .grow { display: grid; gap: 3px; min-width: 0; }
.svc-row b { font-weight: 600; line-height: 1.3; }
.svc-meta { color: var(--ink-2); font-size: .82rem; }
.svc-long { color: var(--warn); }
.svc-price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Telefoon: compact en overzichtelijk, zo min mogelijk scrollen.
   - balk onderin met Week, Dag, + Afspraak, Klanten en Kassa (de rest via het menu);
   - lage bovenbalk, één regel werkbalk, minder witruimte;
   - weekoverzicht past in één scherm (zie pageWeek), dagoverzicht met vrije blokken op één regel.
   ========================================================================== */
.tabbar.salon-tabs { display: none; }
.gap-plus { display: none; }
.remind-box > summary { list-style: none; cursor: pointer; }
.remind-box > summary::-webkit-details-marker { display: none; }
.remind-box.all-sent { border-left-color: var(--line); }
.remind-box.all-sent:not([open]) { padding-top: 8px; padding-bottom: 8px; }
.paybar { bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom)); }

@media (max-width: 899px), (pointer: coarse), (any-pointer: coarse), (hover: none) {
  body.salon.has-menu { --tabbar-h: 60px; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }
  body.has-menu .tabbar.salon-tabs:not([hidden]) { display: flex; z-index: 12; box-shadow: 0 -2px 12px rgba(0, 0, 0, .06); }
  .salon-tabs a { font-size: .68rem; gap: 1px; }
  .salon-tabs a svg { width: 22px; height: 22px; }
  .salon-tabs a.active { color: var(--ink); font-weight: 600; }
  .salon-tabs a.tab-add svg { width: 38px; height: 38px; padding: 8px; margin-top: -6px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
  .salon-tabs a.tab-add.active::before { display: none; }
}

@media (max-width: 560px) {
  /* Bovenbalk lager */
  body.salon .topbar { padding: 4px 12px; padding-top: calc(4px + env(safe-area-inset-top)); }
  body.salon .topbar .brand img { height: 38px; }
  body.has-menu .sidemenu { top: calc(47px + env(safe-area-inset-top)); }
  main { padding: 12px 10px; }
  body.test-mode.salon main::before, body.test-mode.test-sync.salon main::before { content: 'Demo · neppe gegevens'; margin: -4px 0 8px; padding: 2px 8px; font-size: .58rem; letter-spacing: .08em; }

  /* Minder witruimte op elke pagina */
  h1 { font-size: 1.45rem; }
  .card { padding: 12px; margin-bottom: 10px; }
  .list > li { padding: 9px 0; gap: 10px; }
  .section { margin: 16px 0; }
  .back { margin-bottom: 8px; }

  /* Werkbalk van de agenda op één regel: ‹ datum ›, Week/Dag, zoeken. Afspraak en Vandaag zitten in de balk onderin. */
  .cal-toolbar { flex-wrap: nowrap; gap: 6px; margin-bottom: 8px; }
  .cal-nav { order: -1; flex: 1 1 auto; min-width: 0; gap: 4px; }
  .cal-nav .icon-btn { width: 34px; height: 38px; min-height: 38px; }
  .cal-range { flex: 1 1 auto; min-width: 0; height: 38px; min-height: 38px; padding: 0 6px; justify-content: center; font-size: .86rem; }
  .cal-range::after { display: none; }
  .cal-select select { height: 38px; min-height: 38px; padding: 0 26px 0 10px; }
  .cal-select::after { right: 11px; }
  .cal-actions { margin-left: 0; gap: 6px; }
  .cal-actions > a { display: none; }
  .cal-actions .btn { width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; }
  .cal-toolbar > a.btn.ghost:first-child { display: none; }
  .cal-help { display: none; }

  /* Weekoverzicht: smal en laag, voornaam met de tijd eronder */
  .wk-scroll { margin: 0 -10px; padding: 0 4px; }
  .wk { grid-template-columns: 30px repeat(var(--cols), minmax(0, 1fr)); border-radius: 6px; }
  .wk-corner { font-size: .58rem; padding-bottom: 4px; }
  .wk-dayhead { padding: 5px 2px 4px; font-size: .7rem; align-items: center; }
  .wk-dayhead.today span { margin-left: 0; padding: 1px 6px; }
  .wk-times span { right: 3px; font-size: .58rem; }
  .wk-appt { left: 1px; right: 1px; padding: 1px 3px; font-size: .64rem; line-height: 1.2; border-radius: 3px; }
  .wk-appt .wk-sub { font-size: .92em; }
  .wk-appt.short { display: block; }
  .wk-appt.short .wk-sub { display: none; }

  /* Dagoverzicht */
  .day-head { padding: 8px 12px; }
  .day-allday { padding: 6px 12px; }
  .appt-line { grid-template-columns: 42px 8px 1fr auto; gap: 9px; padding: 9px 12px; }
  .appt-line time { font-size: .9rem; }
  .appt-line time small { font-size: .72rem; }
  .appt-main b { font-size: .94rem; }
  .appt-sub { font-size: .8rem; }
  .appt-line .dot { width: 8px; height: 8px; }
  .appt-status, .appt-more { padding-left: 12px; padding-right: 12px; }
  .appt-status { margin-top: -4px; padding-bottom: 8px; }
  .appt-actions { gap: 6px; margin-top: 8px; }
  .appt-links { margin-top: 8px; }
  /* Vrij blok: één regel met een +, de knoppen pas na een tik */
  div.day-gap { grid-template-columns: 42px 1fr auto; gap: 9px; padding: 3px 6px 3px 12px; min-height: 34px; }
  div.day-gap .gap-actions { display: none; }
  div.day-gap.open { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
  div.day-gap.open .gap-actions { display: flex; grid-column: 1 / -1; justify-content: flex-start; gap: 8px; padding: 2px 0 6px; }
  div.day-gap.open .gap-actions > * { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
  .gap-plus { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--brand-ink); cursor: pointer; }
  .gap-plus svg { width: 18px; height: 18px; transition: transform .15s; }
  .day-gap.open .gap-plus svg { transform: rotate(45deg); }
  .day-note { grid-template-columns: 42px 12px 1fr auto; gap: 9px; padding: 6px 12px; }

  /* Herinneren: per klant één regel met het WhatsApp-knopje rechts */
  .remind-box { padding: 8px 12px; margin-bottom: 8px; }
  .remind-list li { grid-template-columns: 42px 8px 1fr auto; gap: 9px; padding: 7px 0; }
  .remind-list .dot { width: 8px; height: 8px; }
  .remind-list .remind-btn { grid-column: auto; justify-self: end; }
  .remind-list .remind-label { display: none; }
  .remind-list .remind-btn { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .remind-list .remind-btn .wa-icon { width: 22px; height: 22px; }
  .remind-sub { font-size: .78rem; }
}
@media (max-width: 560px) {
  .check.anytime { padding: 8px 12px; }
  .check.anytime br { display: none; }
  .quick-weeks { margin-bottom: 8px; }
}
/* Nieuwe afspraak op de telefoon: datum en tijd op één regel, uitleg weg, de lijst met behandelingen strakker. */
@media (max-width: 560px) {
  main > h1 { margin-bottom: 4px; }
  .steps { margin: 4px 0 10px; }
  .summary { padding: 10px 12px; margin-bottom: 10px; }
  .summary.dt-only { display: flex; gap: 6px; font-size: .95rem; }
  .summary.dt-only > div { padding: 0; }
  .summary.dt-only .muted { display: none; }
  .summary.dt-only > div + div::before { content: '·'; margin-right: 6px; color: var(--ink-2); }
  .free-note { margin: -4px 0 8px; }
  .card.compose.empty { display: none; }
  .svc-pick { padding-top: 10px; }
  .svc-pick h2 { margin: 0 12px 8px; font-size: 1.1rem; }
  .svc-search { margin: 0 12px 8px; }
  .svc-search input { padding: 7px 0; }
  .svc-cats { padding: 0 12px 8px; }
  .svc-list { max-height: none; }
  .svc-row { gap: 10px; padding: 8px 12px; }
  .svc-row b { font-size: .92rem; line-height: 1.25; }
  .svc-meta { font-size: .76rem; }
  .svc-radio { width: 16px; height: 16px; }
  .svc-price { font-size: .9rem; }
}
/* Bovenkant van een pagina op de telefoon: kleinere titel, terug-link en voortgang dichter op elkaar. */
@media (max-width: 560px) {
  main > h1 { font-size: 1.25rem; margin-bottom: 4px; }
  main > .back { margin-bottom: 2px; font-size: .8rem; }
  .steps { margin: 2px 0 8px; gap: 4px; }
  .steps span { height: 3px; }
  .summary.dt-only { padding: 6px 10px; font-size: .86rem; border-radius: 8px; }
  .free-note { font-size: .76rem; }
}
/* Telefoon: één rustige letterlijn.
   - paginatitel: de sierletter, klein;
   - kopjes in kaarten: kleine hoofdletters (zoals de knoppen en "Afspraak aanpassen");
   - tekst: overal dezelfde maat, namen halfvet, bijzaken kleiner en grijs. */
@media (max-width: 560px) {
  .card h2, .svc-pick h2 { font: 600 .72rem/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 8px; }
  .summary.dt-only { font-size: .9rem; }
  .summary.dt-only b { font-weight: 600; }
  .free-note { font-size: .78rem; }
  .compose .list > li.compose-row { padding: 6px 0; gap: 6px; align-items: center; }
  .compose-row b { font-size: .92rem; font-weight: 600; line-height: 1.3; }
  .compose-row .muted.small { font-size: .78rem; }
  .compose-row .icon-btn { width: 32px; height: 32px; }
  .minutes { font-size: .78rem; }
  .minutes input { width: 48px; padding: 5px 4px; font-size: .9rem; }
  .compose-total { padding: 8px 10px; font-size: .9rem; font-weight: 600; border-radius: 8px; }
  .compose .btn.block { margin-top: 8px !important; }
  .svc-row b { font-size: .92rem; font-weight: 600; }
  .svc-price { font-size: .92rem; font-weight: 600; }
  .svc-meta { font-size: .78rem; }
}
/* Telefoon, weekoverzicht: hele naam (hooguit twee regels) en ook de halve uren in de tijdkolom. */
@media (max-width: 560px) {
  .wk-appt .wk-line { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.15; word-break: break-word; }
  .wk-appt.short { padding-top: 0; padding-bottom: 0; }
  .wk-appt.short .wk-line { line-height: 1.1; }
  .wk-times span.q.half { display: block; font-size: .5rem; color: var(--ink-2); opacity: .8; }
}
/* Tablet liggend: het zijmenu staat links, de balk onderin begint ernaast. */
@media (min-width: 900px) and (pointer: coarse), (min-width: 900px) and (any-pointer: coarse), (min-width: 900px) and (hover: none) {
  body.has-menu .tabbar.salon-tabs { left: 250px; }
}

/* ---------- Wisselgeld bij contant (alleen rekenen, boekt niets) ---------- */
.cash-help { flex: 1 1 100%; display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); }
.cash-row { display: grid; gap: 6px; }
.cash-label { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); }
.cash-opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.cash-opts .chip { padding: 7px 12px; background: var(--surface); font-variant-numeric: tabular-nums; }
.cash-opts .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cash-other { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: .9rem; color: var(--ink-2); }
.cash-other input { width: 84px; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.cash-back { font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cash-back b { font-size: 1.35rem; color: var(--ok); }
.cash-back.short b { color: var(--warn); }
.q-cash { display: grid; gap: 8px; margin-top: 10px; }
.q-cash .q-actions { justify-content: flex-end; }
.co-delete { margin: 14px 0 0; text-align: center; font-size: .82rem; }

/* ---------- Meerdere zaken ---------- */
.lock-salon { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin: -4px 0 10px; }
.lock-salon .link-btn { font-size: .85rem; }
.salon-list { padding: 4px 12px; text-align: left; }
.salon-list .option { width: 100%; margin: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 0; box-shadow: none; background: none; }
.salon-list .option:last-child { border-bottom: 0; }
.salon-list .option.current .avatar { background: var(--accent); color: var(--accent-ink); }
.lock form[data-form="zaak-add"] { text-align: left; }
.brand-name { color: #f1e9df; font: 600 1.15rem var(--serif); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.brand-name:empty { display: none; }
.check input[type="radio"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.check .grow { text-align: left; }
form[data-form="zaak-add"] .check { margin-bottom: 8px; align-items: flex-start; }
.brand img[hidden] { display: none; }

/* ==========================================================================
   Inlogschermen in de huisstijl (security.js, lockShell): volledig scherm op het ruitenpatroon,
   één kaart met links mokka en het logo, rechts het formulier. Op de telefoon het logo bovenaan.
   ========================================================================== */
body.salon.locked { background: #2f2925 var(--weave) 0 0 / 120px 120px; }
body.salon.locked .topbar { display: none; }
body.salon.locked main { max-width: none; padding: 0; }
body.salon.locked main::before { display: none; }
.auth {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 30% 20%, rgba(210, 169, 120, .10), transparent 60%), linear-gradient(160deg, rgba(36, 31, 27, .55), rgba(28, 24, 21, .88));
}
.auth-card {
  width: min(940px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
  animation: auth-in .45s ease-out both;
}
@keyframes auth-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.auth-brand {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 56px 32px; text-align: center; color: #f1e9df;
  background: linear-gradient(to bottom, rgba(36, 31, 27, .25), rgba(36, 31, 27, .8)), var(--weave) 0 0 / 104px 104px, #2f2925;
  border-right: 1px solid rgba(199, 154, 108, .35);
}
.auth-mark img { display: block; width: 168px; height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
.auth-name { display: block; font: 600 2.1rem/1.15 var(--serif); color: #f6efe6; }
.auth-tag { margin: 22px 0 0; font: 500 .72rem var(--font); letter-spacing: .34em; text-transform: uppercase; color: #d2a978; }
.auth-tag::before, .auth-tag::after { content: ''; display: inline-block; width: 22px; height: 1px; margin: 0 10px; vertical-align: middle; background: rgba(210, 169, 120, .55); }
.auth-sub { margin: 10px 0 0; max-width: 250px; font: italic 500 1.12rem/1.4 var(--serif); color: #e6ddd1; }

.auth-main { padding: 40px 46px 26px; text-align: left; min-width: 0; }
.auth-main h1 { margin: 22px 0 4px; font: 600 2.15rem/1.12 var(--serif); letter-spacing: 0; }
.auth-main > h1 + .muted { margin: 0 0 20px; }
.auth .card { margin: 0 0 12px; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; }
.auth .field { margin-bottom: 14px; }
.auth .field label, .auth .field > .label-row label { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.auth input:not([type="checkbox"]):not([type="radio"]) {
  height: 50px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth input:not([type="checkbox"]):not([type="radio"]):focus { background: var(--surface); border-color: var(--taupe); box-shadow: 0 0 0 4px color-mix(in srgb, var(--taupe) 18%, transparent); outline: none; }
.auth .code-input { height: 62px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.label-row .link-btn { font-size: .82rem; color: var(--brand-ink); }
.input-icon { position: relative; }
.input-icon > svg { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--taupe); pointer-events: none; }
.auth .input-icon input { padding-left: 46px; }
.auth .input-icon input[name="pw"] { padding-right: 52px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; }
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--ink); background: var(--surface-2); }
.pw-eye svg { width: 18px; height: 18px; }
.auth .btn.block { min-height: 52px; margin-top: 8px; border-radius: 12px; letter-spacing: .16em; }
.auth .btn.block:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.auth .form-error { padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); }

.auth-salon {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s;
}
.auth-salon:hover, .auth-salon:focus-visible { border-color: var(--taupe); outline: none; }
.auth-salon .avatar { width: 38px; height: 38px; }
.auth-salon .grow { display: grid; min-width: 0; line-height: 1.25; }
.auth-salon .grow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-switch { display: inline-flex; align-items: center; gap: 2px; font-size: .82rem; font-weight: 600; color: var(--brand-ink); white-space: nowrap; }
.auth-switch svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.auth-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-2); text-align: center; }
.auth-secure svg { flex: none; width: 16px; height: 16px; color: var(--ok); }
.auth-main > .link-btn { display: block; margin: 8px auto 0; }
.auth .salon-list { margin-top: 14px; padding: 0; }
.auth form[data-form="zaak-add"] { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .auth { place-items: start center; padding-top: calc(32px + env(safe-area-inset-top)); }
  .auth-card { grid-template-columns: minmax(0, 1fr); background: none; box-shadow: none; overflow: visible; border-radius: 0; }
  .auth-brand { padding: 0 0 22px; background: none; border: 0; }
  .auth-mark img { width: 118px; }
  .auth-name { font-size: 1.7rem; }
  .auth-tag { margin-top: 12px; }
  .auth-sub { display: none; }
  .auth-main { padding: 22px 20px 16px; border-radius: 20px; background: var(--surface); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
  .auth-main h1 { margin-top: 18px; font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }
/* Achtergrond rond de kaart wat lichter (warm taupe), zodat het donkere paneel met het logo en "Kapperskant" eruit springt. */
.auth { background: radial-gradient(ellipse at 30% 15%, rgba(255, 244, 228, .22), transparent 60%), linear-gradient(160deg, rgba(168, 142, 118, .78), rgba(122, 101, 84, .84)); }
.auth-tag { font-size: .86rem; font-weight: 600; letter-spacing: .38em; color: #e2bd8c; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.auth-tag::before, .auth-tag::after { width: 30px; background: rgba(226, 189, 140, .8); }
@media (max-width: 760px) {
  .auth-tag { color: #fff4e4; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
  .auth-tag::before, .auth-tag::after { background: rgba(255, 244, 228, .75); }
}
body.salon.locked { padding-left: 0 !important; padding-bottom: 0; }

/* Inlogscherm met de golf van de website (klant.padelmaat.eu): lichte muurtaupe, bovenaan een mokka band die in een
   zwaai overloopt in het taupe vlak, onderaan dezelfde zwaai omhoog (zoals de voettekst), en in het donkere
   logopaneel de walnoot golf van het grote blok bovenaan de site. Zelfde golfvorm als --wave-mask van de klantkant. */
:root {
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C70,62 150,66 230,52 C320,36 380,4 460,4 C570,4 640,82 770,96 C870,106 950,84 1000,66 L1000,100 L0,100 Z'/%3E%3C/svg%3E");
  --wave-mask-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C70,62 150,66 230,52 C320,36 380,4 460,4 C570,4 640,82 770,96 C870,106 950,84 1000,66 L1000,0 L0,0 Z'/%3E%3C/svg%3E");
}
body.salon.locked { background: #cdbfb0; }
.auth { position: relative; isolation: isolate; overflow: hidden; background: #cdbfb0; --auth-wave: clamp(44px, 8vw, 96px); }
.auth::before, .auth::after {
  content: ''; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 236, 214, .10) 0%, transparent 38%, transparent 62%, rgba(0, 0, 0, .22) 100%), var(--weave) 0 0 / 104px 104px, #2f2925;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Bovenaan: de band, onderaan een zwaai naar het taupe vlak. */
.auth::before {
  top: 0; height: calc(44% + var(--auth-wave));
  -webkit-mask-image: linear-gradient(#000, #000), var(--wave-mask-top); mask-image: linear-gradient(#000, #000), var(--wave-mask-top);
  -webkit-mask-size: 100% calc(100% - var(--auth-wave) + 1px), 100% var(--auth-wave); mask-size: 100% calc(100% - var(--auth-wave) + 1px), 100% var(--auth-wave);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
}
/* Onderaan: dezelfde zwaai omhoog, zoals boven de voettekst van de site. */
.auth::after {
  bottom: 0; height: calc(12% + var(--auth-wave));
  -webkit-mask-image: var(--wave-mask), linear-gradient(#000, #000); mask-image: var(--wave-mask), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--auth-wave), 100% 100%; mask-size: 100% var(--auth-wave), 100% 100%;
  -webkit-mask-position: 0 0, 0 var(--auth-wave); mask-position: 0 0, 0 var(--auth-wave);
}
.auth-card { position: relative; z-index: 1; box-shadow: 0 30px 80px rgba(36, 31, 27, .45); }
/* Walnoot golf onderin het donkere logopaneel (zoals het grote blok bovenaan de site). */
.auth-brand { position: relative; padding-bottom: 92px; }
.auth-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 76px; display: block; fill: var(--walnut); }
@media (max-width: 760px) {
  .auth::before { height: calc(230px + var(--auth-wave)); }
  .auth::after { height: calc(40px + var(--auth-wave)); }
  .auth-brand { padding-bottom: 22px; }
  .auth-wave { display: none; }
  .auth-main { box-shadow: 0 20px 60px rgba(36, 31, 27, .4); }
}
/* De band iets hoger, zodat het donkere logopaneel vooral op het lichte vlak staat; een fijn bronzen randje om de kaart. */
.auth::before { height: calc(26% + var(--auth-wave)); }
.auth-card { box-shadow: 0 0 0 1px rgba(210, 169, 120, .45), 0 30px 80px rgba(36, 31, 27, .45); }
@media (max-width: 760px) { .auth::before { height: calc(230px + var(--auth-wave)); } .auth-card { box-shadow: none; } }
/* De golvende banden niet achter de kaart: boven en onder de kaart, en kleiner (vooral boven).
   De banden staan nu in de rij (flex), zodat ze nooit over het inlogscherm heen komen. */
.auth { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 16px; --auth-wave: clamp(22px, 3.6vw, 46px); }
.auth::before, .auth::after { position: static; flex: none; align-self: stretch; margin: 0 -16px; }
.auth::before { height: calc(clamp(18px, 4vh, 44px) + var(--auth-wave)); }
.auth::after { height: calc(clamp(14px, 3vh, 34px) + var(--auth-wave)); margin-top: auto; }
.auth-card { margin-top: auto; }
@media (max-width: 760px) {
  /* Telefoon: het logo staat bovenaan op de band, de witte kaart begint pas onder de golf. */
  .auth { gap: 0; --auth-wave: 26px; }
  .auth::before { height: calc(120px + var(--auth-wave)); }
  .auth::after { height: calc(12px + var(--auth-wave)); }
  .auth-card { margin-top: calc(32px - 120px - var(--auth-wave)); margin-bottom: 24px; }
  .auth-brand { padding: 0 0 26px; }
  .auth-main { margin-top: 18px; }
}
@media (max-width: 760px) {
  .auth::before { height: calc(160px + var(--auth-wave)); }
  .auth-card { margin-top: calc(32px - 160px - var(--auth-wave)); }
}
/* Golven iets groter (blijven boven en onder de kaart). */
.auth { --auth-wave: clamp(32px, 5.2vw, 68px); }
.auth::before { height: calc(clamp(26px, 6vh, 64px) + var(--auth-wave)); }
.auth::after { height: calc(clamp(20px, 4.5vh, 48px) + var(--auth-wave)); }
@media (max-width: 760px) {
  .auth { --auth-wave: 34px; }
  .auth::before { height: calc(156px + var(--auth-wave)); }
  .auth::after { height: calc(18px + var(--auth-wave)); }
  .auth-card { margin-top: calc(32px - 156px - var(--auth-wave)); }
}
/* Nog een klein beetje groter. */
.auth { --auth-wave: clamp(36px, 6vw, 78px); }
.auth::before { height: calc(clamp(30px, 7vh, 72px) + var(--auth-wave)); }
.auth::after { height: calc(clamp(22px, 5vh, 54px) + var(--auth-wave)); }
@media (max-width: 760px) {
  .auth { --auth-wave: 38px; }
  .auth::before { height: calc(156px + var(--auth-wave)); }
  .auth::after { height: calc(20px + var(--auth-wave)); }
  .auth-card { margin-top: calc(36px - 156px - var(--auth-wave)); }
}
/* Telefoon: de golf komt in het midden (onder "Kapperskant") het hoogst; de band zo hoog dat ook daar
   de tekst nog op het donker staat, en de witte kaart een stukje lager zodat de golf er niet overheen komt. */
@media (max-width: 760px) {
  .auth::before { height: calc(182px + var(--auth-wave)); }
  .auth-card { margin-top: calc(36px - 182px - var(--auth-wave)); }
  .auth-main { margin-top: 38px; }
}

/* Strook onder de bovenbalk: breder, en onderaan dezelfde golf als op het inlogscherm (in verhouding kleiner). */
body.salon { --strip: 12px; --strip-wave: clamp(10px, 1.3vw, 18px); }
body.salon .topbar::after {
  bottom: calc(-1 * (var(--strip) + var(--strip-wave))); height: calc(var(--strip) + var(--strip-wave)); border-bottom: 0;
  background:
    linear-gradient(115deg, rgba(255, 236, 214, .12) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, .22) 100%),
    var(--weave) 0 -14px / 52px 52px,
    #2f2925;
  -webkit-mask-image: linear-gradient(#000, #000), var(--wave-mask-top); mask-image: linear-gradient(#000, #000), var(--wave-mask-top);
  -webkit-mask-size: 100% calc(var(--strip) + 1px), 100% var(--strip-wave); mask-size: 100% calc(var(--strip) + 1px), 100% var(--strip-wave);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(36, 31, 27, .18));
}
/* Zodat de golf niet over het begin van de pagina valt. */
body.salon:not(.locked) main { padding-top: calc(16px + var(--strip) + var(--strip-wave) - 6px); }
@media (max-width: 560px) {
  body.salon { --strip: 8px; --strip-wave: 10px; }
  body.salon:not(.locked) main { padding-top: calc(12px + var(--strip) + var(--strip-wave) - 6px); }
}

/* ---------- Tablet en breed scherm ----------
   - De balk onderin (Week, Dag, Afspraak, Klanten, Kassa) blijft altijd onderin: een oude regel maakte er op een
     scherm vanaf 1000 px een kolom aan de zijkant van.
   - Tablet (aanraakscherm zonder muis, body.touch, zie main.js): zoals op de telefoon het menu achter de knop
     linksboven, zodat de pagina de hele breedte heeft.
   - Het weekoverzicht gebruikt de volle breedte. */
@media (min-width: 1000px) {
  body.salon .tabbar.salon-tabs {
    top: auto; bottom: 0; right: 0; width: auto; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    flex-direction: row; justify-content: center; gap: 0; padding: 0 0 env(safe-area-inset-bottom);
    border-top: 1px solid var(--line); border-right: 0;
  }
  body.salon .tabbar.salon-tabs a { flex: 1; max-width: 160px; flex-direction: column; justify-content: center; gap: 1px; padding: 0; font-size: .68rem; border-radius: 0; }
  body.salon .tabbar.salon-tabs a.active { background: none; }
  body.salon .tabbar.salon-tabs a.active::before { display: block; }
}
body.salon.touch.has-menu { padding-left: 0 !important; }
body.salon.touch .topbar { margin-left: 0 !important; padding-left: 16px; }
body.salon.touch.has-menu .top-btn.menu-btn { display: grid; }
body.salon.touch.has-menu .sidemenu { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 4px 0 24px rgba(0, 0, 0, .3); width: min(300px, 85vw); }
body.salon.touch.menu-open .sidemenu { transform: none; }
body.salon.touch.has-menu.menu-open .menu-backdrop { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(0, 0, 0, .4); }
body.salon.touch.has-menu .tabbar.salon-tabs { left: 0; }
body.salon main:has(.wk) { max-width: none; }
body.salon.touch.has-menu { --tabbar-h: 60px; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }
body.salon.touch.has-menu .tabbar.salon-tabs:not([hidden]) { display: flex; z-index: 12; box-shadow: 0 -2px 12px rgba(0, 0, 0, .06); }
body.salon.touch .salon-tabs a { font-size: .68rem; gap: 1px; }
body.salon.touch .salon-tabs a svg { width: 22px; height: 22px; }
body.salon.touch .salon-tabs a.active { color: var(--ink); font-weight: 600; }
body.salon.touch .salon-tabs a.tab-add svg { width: 38px; height: 38px; padding: 8px; margin-top: -6px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
body.salon.touch .salon-tabs a.tab-add.active::before { display: none; }

/* Tablet liggend: open zijbalk duwt de inhoud opzij (weekoverzicht krimpt mee) en dimt maar licht */
body.salon.touch.has-menu.menu-open .menu-backdrop { background: rgba(0, 0, 0, .18); }
@media (min-width: 900px) {
  /* Zelfde snelheid voor alles, zodat de bovenbalk met het logo stil blijft staan */
  body.salon.touch.has-menu { transition: padding-left .22s ease; }
  body.salon.touch.has-menu .topbar { transition: margin-left .22s ease; }
  body.salon.touch.has-menu .tabbar.salon-tabs { transition: left .22s ease; }
  body.salon.touch.has-menu.menu-open { padding-left: 300px !important; }
  body.salon.touch.has-menu .sidemenu { width: 300px; }
  body.salon.touch.has-menu.menu-open .sidemenu { box-shadow: none; }
  body.salon.touch.has-menu.menu-open .menu-backdrop { left: 300px; background: rgba(0, 0, 0, .06); }
  body.salon.touch.has-menu.menu-open .tabbar.salon-tabs { left: 300px; }
  body.salon.touch.has-menu.menu-open .topbar { margin-left: -300px !important; }
}

/* Vegen in het weekoverzicht: de wegschuivende week geeft geen horizontale schuifbalk */
body.salon main:has(.wk-scroll) { overflow-x: clip; }

/* Klanten: sorteren, aantal bezoeken en afspraak vergeten */
.client-sort { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.client-sort p { margin: 0; }
.client-sort select { margin-left: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; }
.visit-count { flex: none; min-width: 32px; padding: 4px 8px; border-radius: 999px; background: var(--bg, #f3eee8); text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.forgot-card { border-color: #e4b4a8; background: #fdf3f0; }
.forgot-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; cursor: pointer; }
.forgot-toggle input { width: 20px; height: 20px; accent-color: #c4553f; }
.missed-badge, .hint-missed {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #c4553f; color: #fff; font-weight: 700; line-height: 1;
}
.hint-missed { width: 18px; height: 18px; font-size: .75rem; }

/* Contacten importeren */
.steps { margin: 0 0 16px; padding-left: 22px; line-height: 1.7; }
.contact-pick label { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; }
.contact-pick input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.contact-pick .is-dup { opacity: .55; }
.import-bar {
  position: sticky; bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom) + 8px); z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}

/* Waarschuwing en geblokkeerd (klantkaart, inplannen, agenda) */
.alert-card { border-color: #e4b4a8; background: #fdf3f0; }
.alert-card .missed-badge { background: none; color: inherit; font-size: 1.2rem; }
.client-flag { font-size: .85rem; }
.hint-warn { font-size: .85rem; line-height: 1; }
.alert-notice { border-left-color: #c4553f; background: #fdf3f0; border-radius: 0 8px 8px 0; padding: 8px 12px; }
.alert-notice p { margin: 0; }
.alert-notice p + p { margin-top: 4px; }
.forgot-actions { align-items: center; gap: 12px; }

/* Logboek berichten op de klantkaart */
.msg-log li { padding-top: 8px; padding-bottom: 8px; }

/* Volgorde van groepen en behandelingen slepen */
.sort-list { list-style: none; margin: 0; padding: 0; }
.sort-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); background: var(--surface); }
.sort-item:last-child { border-bottom: 0; }
.sort-item.dragging { position: relative; z-index: 2; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); border-radius: 8px; }
.drag-handle { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; margin: -6px 0; font-size: 1.2rem; color: var(--ink-2); cursor: grab; touch-action: none; user-select: none; border-radius: 8px; }
.drag-handle:hover { background: rgba(0, 0, 0, .05); }
.sort-item.dragging .drag-handle { cursor: grabbing; }
.sort-group > summary { cursor: pointer; list-style: none; }
.sort-group > summary::-webkit-details-marker { display: none; }
.sort-group > summary h2 { display: inline; margin: 0; }
.sort-group > summary::after { content: '+'; float: right; font-size: 1.2rem; color: var(--ink-2); }
.sort-group[open] > summary::after { content: '−'; }
.sort-group[open] > summary { margin-bottom: 8px; }
.tx-preview { margin-top: 4px; }
.tx-preview summary { cursor: pointer; font-size: .9rem; color: var(--ink-2); }
.tx-preview .mail-body { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.sort-item .grow { flex: 1; min-width: 0; }