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

/* ── Design tokens ────────────────────────────────────────────────────────────
   Public app token layer. Mirrors the CEG Mini Brandbook (and admin
   base.css) — currently a deliberate copy of the brand primitives; share via a
   common file if admin + public are ever unified. Components reference the
   semantic tokens (ui / avail / warn), not raw hex. */
:root {
  /* Brand primitives (CEG Mini Brandbook). */
  --ceg-green: #009336; /* Pantone 347C */
  --ceg-green-ring: rgba(0, 147, 54, 0.12); /* focus halo */
  --ceg-navy: #2b325e; /* Pantone 534C */

  /* Semantic — neutrals + brand. */
  --ui-accent: var(--ceg-green);
  --ui-ink: var(--ceg-navy); /* headings, badges, active states */
  --ui-text: #222; /* body text */
  --ui-soft: #4b5563; /* secondary text */
  --ui-muted: #6b7280;
  --ui-faint: #9ca3af;
  --ui-line: #e5e7eb;
  --ui-line-soft: #eef0f3; /* card hairline */
  --ui-control-border: #d1d5db;
  --ui-fill: #f3f4f6; /* neutral chip / button bg */
  --ui-fill-soft: #f9fafb; /* panel bg */
  --ui-fill-hover: #e9eaf0;
  --ui-hatch-a: #f7f8fa; /* "intentionally unavailable" hatch */

  /* Availability scale — semantic, the one place colour is the message. */
  --avail-bg: #d9e5d7;
  --avail-fg: #005a2b;
  --avail-accent: #2f6b46;

  /* Warning (pilot badge) — informational amber, not alarming. */
  --warn-fg: #92400e;
  --warn-bg: #fef3c7;
  --warn-border: #fcd34d;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: #fff;
  color: var(--ui-text);
  min-height: 100vh;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

h1 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ui-ink);
}

.search-wrap {
  position: relative;
  margin-bottom: 1rem;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ui-faint);
  pointer-events: none;
  font-size: 1.1rem;
}

#search {
  width: 100%;
  max-width: 400px;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  font-size: 1.05rem;
  font-family: inherit;
  border: 2px solid var(--ui-line);
  border-radius: 12px;
  outline: none;
  background: white;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  letter-spacing: 0.08em;
}

#search:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 4px var(--ceg-green-ring);
}

#search::placeholder {
  color: var(--ui-faint);
  letter-spacing: 0;
}

/* Results */
#results {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.hint {
  text-align: center;
  color: var(--ui-faint);
  font-size: 0.95rem;
  padding: 3rem 0;
}

.result-card {
  background: white;
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--ui-line-soft);
}

.postcode-badge {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ui-ink);
  letter-spacing: 0.06em;
}

.city-name {
  font-size: 1.05rem;
  color: var(--ui-soft);
}

.gemeente-badge {
  font-size: 0.78rem;
  color: var(--ui-muted);
  font-style: italic;
}

/* Calendar */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-day {
  border-radius: 8px;
  padding: 6px 2px;
  text-align: center;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

/* Layout "wo / 6 / mei" — day-abbr top, large day number middle, optional
   month label bottom. Size ratio ~2× between number and labels so the number
   dominates visually while context stays readable. */
.cal-day .day-abbr {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--ui-muted);
  line-height: 1;
}

.cal-day .day-num {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
}

.cal-day .month-marker {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--ui-muted);
  line-height: 1;
}

.cal-day.available .day-abbr,
.cal-day.available .month-marker {
  color: var(--avail-accent);
}
.cal-day.unavailable .day-abbr,
.cal-day.unavailable .month-marker,
.cal-day.delayed .day-abbr,
.cal-day.delayed .month-marker,
.cal-day.closure .day-abbr,
.cal-day.closure .month-marker {
  color: var(--ui-faint);
}

/* States */
.cal-day.available {
  background: var(--avail-bg);
  color: var(--avail-fg);
}

.cal-day.unavailable {
  background: var(--ui-fill);
  color: var(--ui-faint);
}

/* Delayed = within lead time, not yet bookable — zelfde look als unavailable */
.cal-day.delayed {
  background: var(--ui-fill);
  color: var(--ui-faint);
}

/* Closure = sluitingsdag (feestdag of custom). Subtiel gearceerd zodat
       gebruikers begrijpen dat het bewust gesloten is, zonder de alarmerende
       lading van rood. Pattern gedeeld met .result-card.pilot-excluded. */
.cal-day.closure {
  background: repeating-linear-gradient(
    135deg,
    var(--ui-hatch-a) 0,
    var(--ui-hatch-a) 6px,
    var(--ui-line-soft) 6px,
    var(--ui-line-soft) 12px
  );
  color: var(--ui-faint);
  cursor: help;
}
.cal-day.past {
  opacity: 0;
  pointer-events: none;
}

.cal-day.empty {
  opacity: 0;
  pointer-events: none;
}

/* Today = just a dark outline on top of whatever state. No background/color
   override — otherwise "today + available" looks identical to "unavailable"
   and agents assume today is not bookable. */
.cal-day.today {
  outline: 2px solid var(--ui-ink);
  outline-offset: -2px;
}

/* First available day — same look as available (no separate emphasis) */
.cal-day.first-available {
  background: var(--avail-bg);
  color: var(--avail-fg);
}
.cal-day.first-available .day-abbr,
.cal-day.first-available .month-marker {
  color: var(--avail-accent);
}

/* Tooltip wrapper */
.cal-day[data-tip] {
  position: relative;
}
.cal-day[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ui-ink);
  color: #fff;
  font-size: 0.68rem;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}
.cal-day[data-tip]:hover::after {
  opacity: 1;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* "Eerste vrije dag" in the top-right of the card — label is neutral, only
   the date itself is green-bold so the agent's eye goes straight to it. */
.bookable-from {
  margin-left: auto;
  font-size: 1.05rem;
  color: var(--ui-soft);
  white-space: nowrap;
}
.bookable-from strong {
  color: var(--ui-accent);
  font-weight: 700;
}

/* Pilot: record that the public API is (temporarily) hiding from customers.
       Shown only in the internal SSC frontend via audience=internal. */
.pilot-badge {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warn-fg);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Shared hatch with .cal-day.closure — both states are "opzettelijk
       niet-beschikbaar" en gebruiken daarom hetzelfde visuele patroon. */
.result-card.pilot-excluded {
  background: repeating-linear-gradient(
    135deg,
    var(--ui-hatch-a) 0,
    var(--ui-hatch-a) 6px,
    var(--ui-line-soft) 6px,
    var(--ui-line-soft) 12px
  );
  border-color: var(--ui-line);
}
.result-card.pilot-excluded .postcode-badge {
  color: var(--ui-muted);
}
.result-card.pilot-excluded .city-name {
  color: var(--ui-muted);
}
.result-card.pilot-excluded .cal-day.available {
  background: var(--ui-control-border);
  color: var(--ui-muted);
  cursor: default;
}
.result-card.pilot-excluded .cal-day.first-available {
  background: var(--ui-control-border);
  color: var(--ui-muted);
  cursor: default;
}
/* No calendar below → drop the header's bottom margin so the card has
       balanced vertical padding instead of a phantom empty row underneath. */
.result-card.pilot-excluded .result-header {
  margin-bottom: 0;
}

/* Loading */
.loading {
  text-align: center;
  padding: 3rem 0;
  color: var(--ui-faint);
  font-size: 0.95rem;
}
.loading::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--ui-control-border);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-left: 0.5rem;
  vertical-align: middle;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Help toggle — discrete vraagteken, zit rechts in de week-selector rij
   zodat hij horizontaal uitgelijnd staat met de Periode-knoppen. */
.help-toggle {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--ui-line);
  background: var(--ui-fill-soft);
  color: var(--ui-muted);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.help-toggle:hover {
  background: var(--ui-fill-hover);
  color: var(--ui-ink);
  border-color: var(--ui-control-border);
}
.help-toggle[aria-expanded="true"] {
  background: var(--ui-ink);
  color: white;
  border-color: var(--ui-ink);
}

.help-panel {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--ui-fill-soft);
  border: 1px solid var(--ui-line-soft);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.help-panel[hidden] {
  display: none;
}
.help-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-muted);
  margin-bottom: 0.4rem;
}
.help-params {
  list-style: none;
  font-size: 0.85rem;
  color: var(--ui-soft);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.help-params code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  background: #fff;
  border: 1px solid var(--ui-line);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  color: var(--ui-ink);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.8rem;
  color: var(--ui-soft);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.legend-box {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
  flex-shrink: 0;
}
.legend-box-available {
  background: var(--avail-bg);
}
.legend-box-unavailable {
  background: var(--ui-fill);
  border: 1px solid var(--ui-line);
}
.legend-box-closure {
  background: repeating-linear-gradient(
    135deg,
    var(--ui-fill) 0,
    var(--ui-fill) 4px,
    var(--ui-line) 4px,
    var(--ui-line) 8px
  );
  border: 1px solid var(--ui-line);
}

/* Week selector */
.week-selector {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.week-selector-label {
  font-size: 0.74rem;
  color: var(--ui-faint);
  margin-right: 0.15rem;
}
.week-btn {
  padding: 0.22rem 0.6rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: var(--ui-fill);
  color: var(--ui-muted);
  border: 1.5px solid var(--ui-line);
  transition: all 0.12s;
  letter-spacing: 0.02em;
}
.week-btn.active {
  background: var(--ui-ink);
  color: white;
  border-color: var(--ui-ink);
}
.week-btn:hover:not(.active) {
  background: var(--ui-fill-hover);
}

/* Embed mode: when loaded as ?embed=1 in an iframe (callcenter tool),
       hide chrome that the parent already provides and tighten spacing. */
.embed .page-header {
  display: none;
}
.embed .container {
  padding: 0.75rem 1rem 1.25rem;
}

/* Mobile */
@media (max-width: 480px) {
  .result-card {
    padding: 1rem;
  }
  .cal-day {
    min-height: 48px;
    padding: 4px 2px;
  }
  .cal-day .day-num {
    font-size: 1rem;
  }
  .cal-day .day-abbr,
  .cal-day .month-marker {
    font-size: 0.55rem;
  }
  .bookable-from {
    font-size: 0.95rem;
  }
  .calendar {
    gap: 2px;
  }
}