/* Robédih Booking Service — één stylesheet voor publiek en beheer.
   Mobiel eerst; functionaliteit boven verfijning. */

/* Rustig wit met één warme goud/brons-accentkleur. Alles wat de klant kan
   aanklikken is goud; verder blijft het scherm leeg en licht. */
:root {
  --brand: #9a7434;          /* goud/brons — knoppen, selectie, links */
  --brand-dark: #7d5c26;     /* hover en focus */
  --brand-light: #f6efe2;    /* zachte vulling achter een keuze */
  --ink: #1d1a15;            /* warm bijna-zwart */
  --muted: #6d665b;
  --line: #e4ded2;
  --bg: #ffffff;
  --bg-soft: #faf8f4;        /* achtergrond achter de kaarten */
  --card: #ffffff;
  --ok: #1b7f4b;
  --ok-bg: #e8f3ec;
  --warn: #a86a00;
  --warn-bg: #fdf3e0;
  --err: #b3261e;
  --err-bg: #fdeceb;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(29, 26, 21, .05), 0 1px 3px rgba(29, 26, 21, .08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--brand); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); font-size: .9rem; }
.small { font-size: .85rem; }
.center { text-align: center; }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }
.nowrap { white-space: nowrap; }

/* ── Layout ────────────────────────────────────────────────────────────── */

.wrap { max-width: 720px; margin: 0 auto; padding: 1rem; }
.wrap-wide { max-width: 1400px; margin: 0 auto; padding: 1rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.card h2:first-child, .card h1:first-child { margin-top: 0; }

.topbar {
  background: var(--brand);
  color: #fff;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar .brand { font-weight: 700; letter-spacing: .02em; }
.topbar .spacer { flex: 1; }

/* Klantkant: witte balk met het woordmerk, geen gekleurd vlak. Het beheer
   houdt de gevulde balk, zodat je in één oogopslag ziet waar je bent. */
.topbar-light {
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: .9rem 1rem;
}
.topbar-light a { color: var(--brand); }
.topbar-light .brand {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.topbar-light .brand small {
  display: block;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--muted);
  margin-top: .1rem;
}
body { background: var(--bg-soft); }

.page-error { display: grid; place-items: center; min-height: 80vh; padding: 1rem; }

/* ── Admin-navigatie ───────────────────────────────────────────────────── */

.admin-shell { display: flex; min-height: 100vh; flex-direction: column; }
.admin-body { display: flex; flex: 1; align-items: stretch; }
.sidebar {
  width: 220px;
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 1rem .5rem;
  flex-shrink: 0;
}
.sidebar a {
  display: block;
  padding: .5rem .75rem;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
}
.sidebar a:hover { background: var(--brand-light); }
.sidebar a.active { background: var(--brand); color: #fff; }
.sidebar .group { margin-top: 1rem; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); padding: 0 .75rem .25rem; }
.admin-main { flex: 1; padding: 1.25rem; min-width: 0; }

@media (max-width: 860px) {
  .admin-body { flex-direction: column; }
  .sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: .25rem; }
  .sidebar .group { width: 100%; }
  .admin-main { padding: .75rem; }
}

/* ── Formulieren ───────────────────────────────────────────────────────── */

label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
/* input:not([type]) hoort er expliciet bij: een <input> zonder type-attribuut
   gedraagt zich als tekstveld, maar wordt NIET geraakt door input[type=text].
   Zonder deze regel staan zulke velden ongestileerd en te breed op de pagina. */
input:not([type]),
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], input[type=time], input[type=search],
select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}
textarea { min-height: 5rem; resize: vertical; }
.field { margin-bottom: .9rem; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .82rem; margin-top: .2rem; }
.field .error { color: var(--err); font-size: .85rem; margin-top: .25rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }

.checkline { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; }
.checkline input { width: auto; margin-top: .25rem; }

fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .75rem; margin: 0 0 1rem; }
legend { font-weight: 600; font-size: .9rem; padding: 0 .35rem; }

/* ── Knoppen ───────────────────────────────────────────────────────────── */

.btn, button.btn, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .6rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, button.btn:hover, a.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--brand); border-color: var(--brand); }

/* De varianten moeten net zo specifiek zijn als `button.btn` hierboven,
   anders wint de gevulde hoofdknop en ziet "Terug" eruit als de actie die de
   klant moet nemen. */
.btn-secondary, button.btn-secondary, a.btn-secondary {
  background: #fff; color: var(--brand); border-color: var(--line);
}
.btn-secondary:hover, button.btn-secondary:hover, a.btn-secondary:hover {
  background: var(--brand-light); border-color: var(--brand); color: var(--brand);
}
.btn-danger, button.btn-danger, a.btn-danger {
  background: var(--err); border-color: var(--err); color: #fff;
}
.btn-danger:hover, button.btn-danger:hover, a.btn-danger:hover {
  background: #8f1e17; border-color: #8f1e17;
}
.btn-ghost, button.btn-ghost, a.btn-ghost {
  background: transparent; border-color: transparent; color: var(--brand);
}
.btn-ghost:hover, button.btn-ghost:hover, a.btn-ghost:hover {
  background: var(--brand-light); border-color: var(--brand-light); color: var(--brand-dark);
}
.btn-sm { min-height: 34px; padding: .3rem .7rem; font-size: .875rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Meldingen ─────────────────────────────────────────────────────────── */

.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.alert-ok { background: var(--ok-bg); border-color: #b7e0c8; color: #12452c; }
.alert-warn { background: var(--warn-bg); border-color: #f0d9a8; color: #6b4400; }
.alert-err { background: var(--err-bg); border-color: #f3c3bf; color: #7a1a15; }
.alert-info { background: var(--brand-light); border-color: #c5d3ec; color: #1a2c4d; }

/* ── Tabellen ──────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tbody tr:hover { background: #fafbfd; }

/* ── Statusbadges ──────────────────────────────────────────────────────── */

.badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; border: 1px solid;
}
.badge-REQUESTED { background: var(--warn-bg); border-color: #f0d9a8; color: #6b4400; }
.badge-CONFIRMED { background: var(--brand-light); border-color: #d9c69c; color: #5e451c; }
.badge-CANCELLED { background: #f1f2f5; border-color: var(--line); color: var(--muted); }
.badge-EXPIRED { background: #f1f2f5; border-color: var(--line); color: var(--muted); }
.badge-COMPLETED { background: var(--ok-bg); border-color: #b7e0c8; color: #12452c; }
.badge-NO_SHOW { background: var(--err-bg); border-color: #f3c3bf; color: #7a1a15; }

/* ── Bookingflow ───────────────────────────────────────────────────────── */

/* Voortgang: een bolletje per stap met het label eronder, zodat de klant
   ziet waar hij is én wat er nog komt. Op smalle schermen verdwijnen de
   labels van de stappen die niet aan de beurt zijn — anders wordt het een
   muur van tekst boven het formulier. */
.steps {
  display: flex;
  align-items: flex-start;
  margin: .25rem 0 1.25rem;
  padding: 0 .25rem;
}
.steps .step {
  flex: 1;
  position: relative;
  text-align: center;
  font-size: .72rem;
  color: var(--muted);
  padding-top: 1.15rem;
  min-width: 0;
}
.steps .step::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 11px; height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--line);
}
/* De verbindingslijn loopt van bolletje naar bolletje, niet erdoorheen. */
.steps .step::after {
  content: '';
  position: absolute;
  top: 5px;
  left: calc(50% + 9px);
  right: calc(-50% + 9px);
  height: 1px;
  background: var(--line);
}
.steps .step:last-child::after { display: none; }
.steps .step.done::before,
.steps .step.current::before { background: var(--brand); }
.steps .step.done::after { background: var(--brand); }
.steps .step.current { color: var(--brand); font-weight: 700; }
.steps .step .step-label { display: block; padding: 0 .15rem; }

@media (max-width: 560px) {
  .steps .step:not(.current) .step-label { display: none; }
  .steps .step { padding-top: 1rem; }
}

.choice {
  display: block; width: 100%; text-align: left; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem 1rem; margin-bottom: .6rem; cursor: pointer; font: inherit;
}
.choice:hover { border-color: var(--brand); background: var(--brand-light); }
.choice.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light) inset; }
/* Titel, korte samenvatting en omschrijving horen onder elkaar; als spans
   inline blijven plakt "…aan huis" tegen "Bij u thuis · 60 minuten" aan. */
.choice .title { display: block; font-weight: 700; margin-bottom: .1rem; }
.choice .meta { display: block; color: var(--muted); font-size: .87rem; }
.choice .desc { display: block; color: var(--muted); font-size: .87rem; margin-top: .3rem; }
/* Pijltje rechts, zoals bij een keuzelijst: dit is een stap vooruit. */
.choice { position: relative; padding-right: 2.4rem; }
.choice::after {
  content: '›';
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-55%);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--brand);
  opacity: .55;
}

/* Datum en tijd naast elkaar zodra er ruimte voor is: de klant ziet dan in
   één blik welke dag hij kiest én welke tijden daarbij horen. Daaronder
   stapelen ze, wat op een telefoon prettiger leest dan twee smalle kolommen. */
.datetime-split { display: grid; gap: 1.25rem; }
@media (min-width: 760px) {
  .datetime-split { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 1.75rem; }
  .datetime-slots { border-left: 1px solid var(--line); padding-left: 1.75rem; }
  .datetime-slots h2 { margin-top: 0; }
}
.datetime-slots h2 { font-size: 1rem; }

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.calendar .dow { text-align: center; font-size: .72rem; color: var(--muted); padding: .25rem 0; }
.calendar button {
  aspect-ratio: 1; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  font: inherit; cursor: pointer; position: relative; min-height: 40px;
}
.calendar button[disabled] { color: #c3c7d1; background: #fafbfd; cursor: default; }
.calendar button.has-slots { border-color: var(--brand); font-weight: 700; }
.calendar button.selected { background: var(--brand); color: #fff; border-color: var(--brand); }
.calendar .other-month { visibility: hidden; }

.slot-group { margin-bottom: .9rem; }
.slot-group h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-bottom: .4rem; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .45rem; }
.slots button {
  min-height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.slots button:hover { border-color: var(--brand); }
.slots button.selected { background: var(--brand); color: #fff; border-color: var(--brand); }

.samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; }
.sample {
  border: 1px solid var(--line); border-radius: 8px; padding: .4rem; text-align: center;
  font-size: .78rem; background: #fff; position: relative;
}
.sample img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #eee; }
.sample .rm { position: absolute; top: -6px; right: -6px; background: var(--err); color: #fff;
  border: 0; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; line-height: 1; }

.summary-line { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0;
  border-bottom: 1px solid var(--line); }
.summary-line:last-child { border-bottom: 0; }
.summary-line .k { color: var(--muted); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.countdown { font-variant-numeric: tabular-nums; }

/* ── Agenda ────────────────────────────────────────────────────────────── */

.agenda { display: flex; gap: .5rem; overflow-x: auto; }
.agenda-col { flex: 1; min-width: 190px; }
.agenda-col h3 { position: sticky; top: 0; background: var(--bg); padding: .35rem 0;
  font-size: .85rem; border-bottom: 2px solid var(--line); }
.appt {
  border-left: 4px solid var(--brand); background: #fff; border: 1px solid var(--line);
  border-left-width: 4px; border-radius: 6px; padding: .5rem .6rem; margin-bottom: .4rem;
  font-size: .85rem; display: block; text-decoration: none; color: inherit;
}
.appt:hover { border-color: var(--brand); }
.appt .t { font-weight: 700; }
.appt .c { font-weight: 600; }
.appt .m { color: var(--muted); font-size: .8rem; }
.appt.status-REQUESTED { border-style: dashed; }
.appt.status-CANCELLED { opacity: .55; text-decoration: line-through; }
.appt.blocked { background: repeating-linear-gradient(45deg, #f4f5f8, #f4f5f8 6px, #eceef3 6px, #eceef3 12px);
  border-left-color: #9aa1b1; color: var(--muted); }

.meenemen { background: var(--warn-bg); border: 1px solid #f0d9a8; border-radius: 8px;
  padding: .6rem .8rem; margin: .5rem 0; }
.meenemen h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: #6b4400; margin-bottom: .35rem; }
.meenemen ul { margin: 0; padding-left: 1.1rem; }
.meenemen li { margin-bottom: .15rem; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; }
.kpi .n { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.kpi .l { color: var(--muted); font-size: .82rem; margin-top: .25rem; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: .5rem 0 .5rem 1rem; border-left: 2px solid var(--line); position: relative; }
.timeline li::before { content: ''; position: absolute; left: -5px; top: .85rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.timeline .when { color: var(--muted); font-size: .8rem; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.dot-err { background: var(--err); }

.hidden { display: none !important; }

/* Programmatische focus (stapnavigatie) mag geen zichtbare rand tekenen; een
   focus-ring hoort bij toetsenbordbediening, niet bij een scriptmatige sprong. */
[tabindex="-1"]:focus { outline: none; }

/* ── Bevestiging na het boeken ──────────────────────────────────────────── */
/* Eén rustig blok bovenaan de eigen afspraakpagina, in plaats van een aparte
   doodlopende bedanktpagina: de klant staat meteen op de plek waar hij later
   ook terugkomt. */
.confirmed {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--ok);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  margin-bottom: 1rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.confirmed-mark {
  width: 48px; height: 48px;
  margin: 0 auto .75rem;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 1.6rem;
  line-height: 48px;
  font-weight: 700;
}
.confirmed h1 { font-size: 1.35rem; margin-bottom: .35rem; }
.confirmed p { margin: .3rem 0; }
.confirmed-id {
  white-space: nowrap;
  display: inline-block;
  margin-top: .6rem !important;
  padding: .35rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
}