/* PlanBnb design tokens — zie docs/huisstijl.md.
   Kleur-tokens komen 1-op-1 overeen met tenant_branding-kolommen; de widget
   krijgt ze serverside geïnjecteerd als inline :root-override. Layout-tokens
   (--pb-space, --pb-font-size, ...) zijn context-afhankelijk: body.pb-dashboard
   vs body.pb-widget zet de juiste schaal. Geen framework, geen inline styles
   in views — alles loopt via de klassen en variabelen hieronder. */

:root {
  /* Kleur (= tenant_branding-defaults) */
  --pb-primary: #1F2933;
  --pb-primary-text: #FFFFFF;
  --pb-accent: #2F6F5E;
  --pb-text: #222222;
  --pb-muted: #717171;
  --pb-border: #DDDDDD;
  --pb-surface: #FFFFFF;
  --pb-error: #B3261E;
  --pb-bg: #FAFAF9;

  /* Vorm */
  --pb-radius: 12px;
  --pb-radius-sm: 8px;
  --pb-space-grid: 8px;

  /* Typografie */
  --pb-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pb-weight-regular: 400;
  --pb-weight-medium: 500;

  /* Schaal: standaard op de widget-maten, .pb-dashboard zet ze strakker. */
  --pb-space: 24px;
  --pb-font-size: 16px;
  --pb-line-height: 1.6;
  --pb-control-height: 48px;
  --pb-row-height: 44px;
}

body.pb-dashboard {
  --pb-space: 16px;
  --pb-font-size: 14px;
  --pb-line-height: 1.4;
  --pb-control-height: 36px;
}

* {
  box-sizing: border-box;
}

/* Sommige klassen zetten zelf display (bv. .pb-form-group, .pb-row, .pb-summary-row),
   wat als auteursregel zwaarder weegt dan de standaard [hidden]{display:none} van de
   browser en het element dus alsnog zichtbaar houdt. Dit wint altijd. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--pb-bg);
  color: var(--pb-text);
  font-family: var(--pb-font-family);
  font-size: var(--pb-font-size);
  font-weight: var(--pb-weight-regular);
  line-height: var(--pb-line-height);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--pb-space-grid);
  font-weight: var(--pb-weight-medium);
  line-height: 1.25;
}

/* Een kop die niet het eerste element is, krijgt lucht erboven. Zonder dit plakt een
   kop tegen de tabel of de knop die eraan voorafgaat, en lijkt hij bij het verkeerde
   stuk te horen. De :first-child-uitzondering voorkomt een extra witrand bovenin een
   kaart, die zijn eigen padding al heeft. */
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child) {
  margin-top: calc(var(--pb-space) * 1.5);
}

p {
  margin: 0 0 var(--pb-space-grid);
}

/* Wat na een tabel, een lijst met gegevens, een formulier of een grafiek komt, hoort
   niet tegen de laatste regel te plakken. Dat was te zien bij de knop "Nieuwe
   uitnodiging", die strak onder de gegevens van de eigenaar stond. */
.pb-table + *,
.pb-table-scroll + *,
.pb-dl + *,
.pb-detail-grid + *,
form + *,
.pb-chart-columns + * {
  margin-top: var(--pb-space);
}

/* Maar niet waar knoppen naast elkaar staan. Een knop zit daar vaak in een eigen
   <form>, en dan kreeg de knop erna die ruimte boven zich — waardoor twee knoppen
   schuin onder elkaar kwamen te staan in plaats van naast elkaar. */
.pb-cell-actions form + *,
.pb-row form + * {
  margin-top: 0;
}

a {
  color: var(--pb-accent);
}

/* Zichtbare focus-ring overal — nooit outline:none zonder alternatief. */
:focus-visible {
  outline: 2px solid var(--pb-accent);
  outline-offset: 2px;
}

/* ---- Layout -------------------------------------------------------- */

.pb-container {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--pb-space);
}

/* Het dashboard en het platformbeheer mogen de breedte van het scherm gebruiken.
   960px is de leesbreedte van een tekstpagina, maar hier staan tabellen met acht
   kolommen en grafieken in; die werden daardoor samengeknepen tot de breedte van
   het menu erboven, met witruimte links en rechts. Niet onbeperkt: voorbij ~1600px
   lopen tabelrijen zo ver uiteen dat je met je ogen de regel kwijtraakt. */
body.pb-dashboard .pb-container {
  max-width: 1600px;
}

/* ---- Tegels -------------------------------------------------------------
   Een rij kaarten met een getal erin. Als raster en niet als flexrij: flexitems
   krijgen de breedte van hun inhoud en de hoogte van hun eigen tekst, waardoor
   "Klanten" smal en laag werd en "Vastgelegd per jaar" breed en hoog. Rasteritems
   rekken standaard mee, dus alle tegels in een rij zijn even breed en even hoog.

   auto-fit met minmax: bij een breed scherm staan ze naast elkaar, bij een smal
   scherm vallen ze vanzelf onder elkaar zonder media query. */
.pb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--pb-space);
  align-items: stretch;
}

.pb-tiles > * {
  margin: 0;
}

/* Het getal in een tegel: groter dan een gewone h2, want dat is waar je naar kijkt. */
.pb-tiles h2 {
  font-size: 1.6em;
  margin-bottom: 0;
}

.pb-tiles .pb-hint + h2 {
  margin-top: var(--pb-space-grid);
}

.pb-container-narrow {
  max-width: 360px;
  margin: calc(var(--pb-space) * 2) auto 0;
}

.pb-container-widget {
  max-width: 480px;
  margin: calc(var(--pb-space) * 2) auto 0;
  /* Zijmarge zoals .pb-container die ook heeft. Zonder deze liep de inhoud op een
     telefoon tot tegen de schermrand: max-width bindt daar niet, dus de rand van een
     kaart raakte links en rechts het glas. */
  padding-left: var(--pb-space);
  padding-right: var(--pb-space);
}

/* Alleen de boekingswidget: breder zodat de prijsopgave naast het formulier
   past i.p.v. eronder als aparte stap. */
.pb-container-wide {
  max-width: 960px;
}

.pb-booking-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--pb-space);
  align-items: start;
}

@media (max-width: 640px) {
  .pb-booking-layout {
    grid-template-columns: 1fr;
  }
}

.pb-quote-panel {
  position: sticky;
  top: var(--pb-space);
}

.pb-quote-panel > .pb-btn {
  margin-top: var(--pb-space-grid);
}

/* Compacte gastentellers naast elkaar i.p.v. elk op een eigen volle-breedte regel.
   min-height op het label: als één label (bv. "Volwassene (12+ jaar)") naar een
   tweede regel omslaat terwijl de buren op één regel passen, zou het invoerveld
   daaronder anders niet meer gelijk staan met de rest van de rij. */
.pb-guest-input-item {
  flex: 1 1 110px;
  min-width: 100px;
  margin-bottom: 0;
}

.pb-guest-input-item .pb-label {
  min-height: 2.4em;
}

.pb-ageband-row {
  align-items: flex-end;
  padding-bottom: var(--pb-space-grid);
  border-bottom: 1px solid var(--pb-border);
}

/* Eén gast in het nachtregister: meerdere regels velden die bij elkaar horen, dus een
   zichtbaar blok in plaats van een rij — anders is niet te zien waar de ene gast
   ophoudt en de volgende begint. */
.pb-register-row {
  padding: var(--pb-space-grid);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
}

.pb-stack > * + * {
  margin-top: var(--pb-space);
}

.pb-row {
  display: flex;
  gap: var(--pb-space-grid);
  align-items: center;
}

/* Velden in een rij, zoals een filterbalk: uitlijnen op de onderkant in plaats van op
   het midden. Een label dat over twee regels loopt maakte het hele groepje hoger, en
   dan stond dat invoerveld lager dan zijn buren. Ook de ondermarge eraf: die hoort bij
   velden onder elkaar, niet naast elkaar. */
.pb-row > .pb-form-group {
  align-self: flex-end;
  margin-bottom: 0;
}

.pb-row-wrap {
  flex-wrap: wrap;
}

.pb-row-center {
  justify-content: center;
}

.pb-spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pb-space-grid);
}

/* ---- Koptekst dashboard ------------------------------------------------ */

/* Niet zelf sticky meer: koptekst en de balk voor het meekijken zitten samen in
   .pb-topbar, zodat ze als geheel blijven staan en de balk niet over het uitgeklapte
   submenu heen valt. */
.pb-header {
  background: var(--pb-surface);
  border-bottom: 1px solid var(--pb-border);
}

.pb-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Platformbeheer moet er anders uitzien dan het dashboard van een eigenaar. Vanuit
   hier wijzig je gegevens van klanten; dat hoort niet te voelen als je eigen B&B. */
.pb-header-admin {
  border-bottom-width: 3px;
  border-bottom-color: var(--pb-primary);
}

.pb-header-inner {
  display: flex;
  align-items: center;
  gap: var(--pb-space);
  padding-top: var(--pb-space-grid);
  padding-bottom: var(--pb-space-grid);
}

.pb-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--pb-space-grid);
  color: var(--pb-text);
  text-decoration: none;
  font-weight: var(--pb-weight-medium);
}

.pb-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--pb-radius-sm);
  background: var(--pb-primary);
  color: var(--pb-primary-text);
  font-size: 0.8em;
  letter-spacing: 0.02em;
}

/* Het menu duwt de uitlog-knop naar rechts; marge-op-maat zou bij een extra
   menu-item weer handmatig bijgesteld moeten worden. */
.pb-nav {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.pb-nav a,
.pb-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--pb-radius-sm);
  color: var(--pb-muted);
  text-decoration: none;
  font-weight: var(--pb-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.pb-nav a svg,
.pb-menu > summary svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.pb-nav a:hover,
.pb-menu > summary:hover {
  background: var(--pb-bg);
  color: var(--pb-text);
}

/* De actieve sectie krijgt kleur én een streep: alleen kleur valt weg voor wie
   kleuren slecht onderscheidt. */
.pb-nav a[aria-current],
.pb-menu > summary[aria-current] {
  color: var(--pb-text);
  background: var(--pb-bg);
  box-shadow: inset 0 -2px 0 var(--pb-accent);
}

/* ---- Uitklapmenu -------------------------------------------------------
   <details>/<summary> i.p.v. eigen script: open/dicht en toetsenbediening
   zitten al in de browser, inclusief Esc en focusvolgorde. */

.pb-menu {
  position: relative;
}

.pb-menu > summary {
  list-style: none;
}

.pb-menu > summary::-webkit-details-marker {
  display: none;
}

.pb-menu-caret {
  transform: rotate(90deg);
  transition: transform 120ms ease;
  font-size: 1.1em;
  line-height: 1;
}

.pb-menu[open] .pb-menu-caret {
  transform: rotate(-90deg);
}

.pb-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 4px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pb-menu-panel a {
  color: var(--pb-text);
}

/* Op een smal scherm is er geen ruimte om een paneel over de inhoud te leggen:
   dan klapt het gewoon in de rij open. */
@media (max-width: 640px) {
  .pb-brand-name {
    display: none;
  }

  .pb-menu-panel {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

/* ---- Kaart ----------------------------------------------------------
   Alleen voor afgebakende objecten (één reservering, één accommodatie).
   Geen schaduw, behalve een subtiele lift bij hover als de kaart klikbaar is. */

.pb-card {
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: var(--pb-space);
}

.pb-card-clickable {
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.pb-card-clickable:hover {
  border-color: var(--pb-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Een hele kaart die één link is. Als <a> zou hij anders de kleur en onderstreping
   van een link krijgen, en dan leest de kop als een losse verwijzing in plaats van
   als een getal dat je kunt aanklikken. */
.pb-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.pb-card-link:hover,
.pb-card-link:focus-visible {
  border-color: var(--pb-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pb-card-success {
  border-color: var(--pb-accent);
}

.pb-card-danger {
  border-color: var(--pb-error);
}

/* Zoals .pb-container-narrow, maar zonder auto-centrering: voor een kaart die links
   onder een linksuitgelijnde <h1> moet blijven staan i.p.v. los in het midden te
   zweven. */
.pb-card-narrow {
  max-width: 360px;
}

/* ---- Knop ------------------------------------------------------------ */

.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pb-space-grid);
  min-height: var(--pb-control-height);
  padding: 0 calc(var(--pb-space-grid) * 2);
  border: 1px solid transparent;
  border-radius: var(--pb-radius-sm);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--pb-weight-medium);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

.pb-btn-primary {
  background: var(--pb-primary);
  color: var(--pb-primary-text);
}

.pb-btn-primary:hover {
  opacity: 0.92;
}

.pb-btn-secondary {
  background: var(--pb-surface);
  border-color: var(--pb-border);
  color: var(--pb-text);
}

.pb-btn-secondary:hover {
  border-color: var(--pb-accent);
}

.pb-btn-danger {
  background: var(--pb-surface);
  border-color: var(--pb-error);
  color: var(--pb-error);
}

.pb-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pb-btn-block {
  width: 100%;
}

/* Voor een losse knop die niet in een .pb-stack zit (bv. na een for-loop), zodat hij
   niet plakt tegen wat erna komt. */
.pb-btn-spaced {
  margin-bottom: var(--pb-space);
}

/* ---- Icoonknop ---------------------------------------------------------
   Voor rij-acties in tabellen/lijsten (bewerken, verwijderen): compacter
   dan een tekstknop, overal in het dashboard hetzelfde. */
.pb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface);
  color: var(--pb-muted);
  cursor: pointer;
  text-decoration: none;
}

.pb-icon-btn:hover {
  border-color: var(--pb-accent);
  color: var(--pb-text);
}

.pb-icon-btn svg {
  width: 16px;
  height: 16px;
}

.pb-icon-btn-danger {
  color: var(--pb-error);
}

.pb-icon-btn-danger:hover {
  border-color: var(--pb-error);
  color: var(--pb-error);
}

/* ---- Bevestigingsdialoog ------------------------------------------------ */

.pb-dialog {
  border: none;
  border-radius: var(--pb-radius);
  padding: var(--pb-space);
  background: var(--pb-surface);
  color: var(--pb-text);
  max-width: 360px;
  width: calc(100% - 32px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.pb-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

/* ---- Formulier en invoerveld ------------------------------------------
   Foutmeldingen horen bij het veld, niet alleen bovenaan het formulier. */

.pb-form-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pb-space-grid) / 2);
  margin-bottom: var(--pb-space);
}

/* Twee (of meer) velden naast elkaar, bv. Voornaam/Achternaam. Elk kind behoudt zijn
   eigen .pb-form-group-marge, dus geen dubbele gap.

   flex-wrap met een minimumbreedte per veld in plaats van alles-of-niets omklappen
   onder 480px: met vijf velden naast elkaar (adres, postcode, plaats, land) werd
   ieder veld op een laptop al een paar tekens breed, terwijl er pas op een telefoon
   gestapeld werd. Nu springt er een veld naar de volgende regel zodra het anders te
   smal wordt, op elke schermbreedte. */
.pb-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--pb-space);
  align-items: flex-start;
}

.pb-form-row > .pb-form-group {
  flex: 1 1 220px;
  min-width: 0;
}

.pb-form-row > .pb-form-group-narrow {
  flex: 0 0 90px;
}

/* Op een telefoon altijd één veld per regel: daar is 220px nog te breed om er twee
   naast elkaar te krijgen, en dan geeft flex-basis een rommelige halve kolom. */
@media (max-width: 480px) {
  .pb-form-row > .pb-form-group {
    flex-basis: 100%;
  }
}

.pb-label {
  font-weight: var(--pb-weight-medium);
}

.pb-hint {
  color: var(--pb-muted);
  font-size: 0.9em;
}

/* Een keuzelijst krijgt een vaste hoogte in plaats van een minimum: browsers geven een
   <select> zijn eigen hoogte op basis van het lettertype en trekken zich van een
   min-height weinig aan, waardoor hij lager uitviel dan het invoerveld ernaast. */
select.pb-input,
.pb-select {
  height: var(--pb-control-height);
}

.pb-input,
.pb-select,
.pb-textarea {
  min-height: var(--pb-control-height);
  padding: 0 calc(var(--pb-space-grid) * 1.5);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface);
  color: var(--pb-text);
  font-family: inherit;
  font-size: inherit;
}

.pb-textarea {
  min-height: calc(var(--pb-control-height) * 2);
  padding-top: var(--pb-space-grid);
  padding-bottom: var(--pb-space-grid);
  resize: vertical;
}

.pb-input:focus,
.pb-select:focus,
.pb-textarea:focus {
  border-color: var(--pb-accent);
}

.pb-field-error .pb-input,
.pb-field-error .pb-select,
.pb-field-error .pb-textarea {
  border-color: var(--pb-error);
}

.pb-error-text {
  color: var(--pb-error);
  font-size: 0.9em;
}

/* ---- Toggle-switch ------------------------------------------------------
   Voor aan/uit-instellingen: duidelijker dan een kale checkbox. */
.pb-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--pb-space-grid);
  cursor: pointer;
}

.pb-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pb-toggle-track {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  background: var(--pb-border);
  border-radius: 999px;
  transition: background 120ms ease;
}

.pb-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--pb-surface);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 120ms ease;
}

.pb-toggle input:checked + .pb-toggle-track {
  background: var(--pb-accent);
}

.pb-toggle input:checked + .pb-toggle-track .pb-toggle-thumb {
  transform: translateX(18px);
}

.pb-toggle input:focus-visible + .pb-toggle-track {
  outline: 2px solid var(--pb-accent);
  outline-offset: 2px;
}

/* ---- Tabel ------------------------------------------------------------
   Reserveringenlijsten zijn rijen met hairline-scheiding, geen kaartjes. */

.pb-table {
  width: 100%;
  border-collapse: collapse;
}

/* Een brede tabel mag zijwaarts schuiven in plaats van de kolommen plat te drukken.
   Op een laptop paste een tabel met acht kolommen niet, en dan werd elke kolom zo
   smal dat de inhoud over drie regels brak. */
.pb-table-scroll {
  overflow-x: auto;
}

.pb-table th {
  text-align: left;
  font-weight: var(--pb-weight-medium);
  color: var(--pb-muted);
  font-size: 0.9em;
  padding: calc(var(--pb-space-grid) / 2) var(--pb-space-grid);
  border-bottom: 1px solid var(--pb-border);
}

.pb-table td {
  height: var(--pb-row-height);
  padding: 0 var(--pb-space-grid);
  border-bottom: 1px solid var(--pb-border);
}

.pb-table tbody tr:hover {
  background: var(--pb-bg);
}

.pb-table a {
  color: var(--pb-text);
  text-decoration: none;
}

/* ---- Badge --------------------------------------------------------------
   Zachte tinten, geen felle kleuren. */

.pb-badge {
  display: inline-block;
  padding: 2px calc(var(--pb-space-grid) * 1.25);
  border-radius: var(--pb-radius-sm);
  font-size: 0.85em;
  font-weight: var(--pb-weight-medium);
  background: var(--pb-bg);
  color: var(--pb-muted);
}

.pb-badge-success {
  background: #E7F3EF;
  color: #1F6E52;
}

.pb-badge-warning {
  background: #FBF1E1;
  color: #8A5A00;
}

.pb-badge-danger {
  background: #FBEAE8;
  color: var(--pb-error);
}

/* ---- Kalender (widget) -------------------------------------------------
   Vervangt losse datumvelden: laat bezette/gesloten dagen direct zien
   i.p.v. pas bij het opvragen van de prijs. */

.pb-calendar {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: var(--pb-space-grid);
}

.pb-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--pb-space-grid) / 2) var(--pb-space-grid);
}

.pb-cal-nav {
  min-height: var(--pb-space-grid);
  padding: var(--pb-space-grid);
  border: none;
  background: transparent;
  color: var(--pb-text);
  font-size: 1.1em;
  font-weight: var(--pb-weight-medium);
  cursor: pointer;
  border-radius: var(--pb-radius-sm);
}

.pb-cal-nav:hover:not(:disabled) {
  background: var(--pb-bg);
}

.pb-cal-nav:disabled {
  color: var(--pb-border);
  cursor: default;
}

.pb-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.pb-cal-day-label {
  text-align: center;
  color: var(--pb-muted);
  font-size: 0.8em;
  padding: var(--pb-space-grid) 0;
}

.pb-cal-day {
  aspect-ratio: 1;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface);
  color: var(--pb-text);
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
}

.pb-cal-day:hover:not(:disabled) {
  border-color: var(--pb-accent);
}

.pb-cal-day:disabled {
  color: var(--pb-border);
  cursor: default;
  text-decoration: line-through;
}

.pb-cal-day-empty {
  visibility: hidden;
}

.pb-cal-day-in-range {
  background: var(--pb-bg);
}

.pb-cal-day-edge {
  background: var(--pb-primary);
  color: var(--pb-primary-text);
}

/* ---- Accommodatiekeuze (widget, meerdere accommodaties) ----------------- */

.pb-picker-item {
  display: flex;
  align-items: center;
  gap: var(--pb-space-grid);
  width: 100%;
  text-align: left;
  padding: var(--pb-space-grid);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  background: var(--pb-surface);
  color: var(--pb-text);
  font: inherit;
  cursor: pointer;
}

.pb-picker-item:hover {
  border-color: var(--pb-accent);
}

.pb-picker-photo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--pb-radius-sm);
  flex-shrink: 0;
}

/* ---- Marketingpagina (Home) --------------------------------------------- */

.pb-hero {
  text-align: center;
  padding: calc(var(--pb-space) * 2) 0;
}

.pb-hero p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  color: var(--pb-muted);
}

.pb-footer {
  margin-top: calc(var(--pb-space) * 3);
  padding-top: var(--pb-space);
  border-top: 1px solid var(--pb-border);
  color: var(--pb-muted);
  font-size: 0.85em;
}

.pb-footer p {
  margin: 0 0 4px;
}

/* ---- Overzicht/samenvatting (widget review-stap) ------------------------ */

.pb-summary {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
}

.pb-summary-section {
  padding: var(--pb-space);
  border-bottom: 1px solid var(--pb-border);
}

.pb-summary-section h3 {
  margin: 0 0 var(--pb-space-grid);
  font-size: 0.85em;
  color: var(--pb-muted);
  font-weight: var(--pb-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pb-summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--pb-space);
  padding: 4px 0;
}

.pb-summary-row > span:first-child {
  color: var(--pb-muted);
}

.pb-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--pb-space);
  font-size: 1.15em;
}

/* ---- Live prijsvak in de widget (zoekstap) -------------------------------
   Nachten + periode op twee regels met een duidelijk stijlverschil i.p.v.
   samengeperst op één regel (brak de datum af in het smalle vak). Subtotaal
   en borg zijn ondergeschikt aan het bedrag dat nu echt wordt afgerekend. */
.pb-quote-body {
  margin-top: var(--pb-space-grid);
}

.pb-quote-stay-row > span:first-child {
  color: var(--pb-text);
}

.pb-quote-subline {
  display: block;
  margin-top: 2px;
}

.pb-quote-subtotal-row {
  color: var(--pb-muted);
  font-size: 0.9em;
}

.pb-quote-subtotal-row > span:first-child {
  color: var(--pb-muted);
}

.pb-summary-total.pb-quote-payable-row {
  margin-top: var(--pb-space-grid);
  padding: var(--pb-space-grid) 0 0;
  border-top: 1px solid var(--pb-border);
}

/* ---- Detailpagina: twee kolommen die onder elkaar vallen op smal scherm --- */

.pb-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--pb-space);
}

/* Definitielijst voor "label: waarde"-paren. Een tabel is hier misleidend
   (het zijn geen rijen van hetzelfde soort) en losse <p>'s lijnen niet uit. */
.pb-dl {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 4px var(--pb-space-grid);
  margin: 0;
}

.pb-dl dt {
  color: var(--pb-muted);
}

.pb-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.pb-code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* Een stukje code om te kopiëren. Monospace en geen regelafbreking: in html maakt
   het verschil of iets op één regel staat, en een afgebroken regel plakt verkeerd. */
.pb-snippet {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.85em;
  white-space: pre;
  overflow-x: auto;
  resize: vertical;
}

/* Een blok dat letterlijk over te typen is, bijvoorbeeld een stuk configuratie.
   Scrollt zijwaarts in plaats van af te breken: een afgebroken regel configuratie
   is niet meer te vertrouwen. */
.pb-code-block {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.85em;
  padding: var(--pb-space-grid);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-bg);
  overflow-x: auto;
}

/* ---- Kleine knop in een tabelrij ---------------------------------------- */

.pb-btn-small {
  min-height: 28px;
  padding: 2px 12px;
  font-size: 0.9em;
}

/* De actiekolom van een tabel. Een knop zit hier vaak in een <form>, en dat is een
   blokelement: twee acties naast elkaar vielen daardoor onder elkaar en liepen buiten
   de rij. Inline-block zet ze weer op één regel, zonder van de cel een flexcontainer
   te maken — dat laatste haalt een <td> uit de tabelopmaak en laat kolommen verspringen. */
.pb-cell-actions {
  white-space: nowrap;
  text-align: right;
}

/* Alleen het formulier een display meegeven. De knop zelf is al inline-flex en
   centreert daarmee zijn eigen tekst; die op inline-block zetten haalde dat weg,
   waardoor het opschrift in de knop scheef kwam te staan. */
.pb-cell-actions > form {
  display: inline-flex;
}

.pb-cell-actions > form,
.pb-cell-actions > .pb-btn,
.pb-cell-actions > .pb-icon-btn,
.pb-cell-actions > a {
  vertical-align: middle;
}

.pb-cell-actions > * + * {
  margin-left: var(--pb-space-grid);
}

/* ---- Info-knopje met uitleg in een dialoog ------------------------------
   Staat naast een label waarvan de betekenis niet uit de naam volgt. Nooit
   een title-attribuut: dat is op touch onbereikbaar. */

.pb-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--pb-border);
  border-radius: 50%;
  background: var(--pb-surface);
  color: var(--pb-muted);
  font-size: 11px;
  font-weight: var(--pb-weight-medium);
  font-style: normal;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.pb-info-btn:hover {
  border-color: var(--pb-accent);
  color: var(--pb-accent);
}

.pb-dialog-wide {
  max-width: 520px;
}

.pb-dialog h2 {
  margin-bottom: var(--pb-space-grid);
}

.pb-dialog-body p {
  margin-bottom: var(--pb-space-grid);
}

.pb-dialog-body ul {
  margin: 0 0 var(--pb-space-grid);
  padding-left: 20px;
}

/* ---- Toelichtingsvlak bij een formulier --------------------------------
   Zwaarder dan .pb-hint: dit is informatie die je gelezen moet hebben voordat
   je een bedrag invult, niet iets terzijde. */

.pb-notice {
  padding: var(--pb-space-grid) var(--pb-space);
  border: 1px solid var(--pb-border);
  border-left: 3px solid var(--pb-accent);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-bg);
}

.pb-notice p:last-child {
  margin-bottom: 0;
}

/* ---- Kopieerbaar veld (iCal-URL's) -------------------------------------- */

.pb-copy-row {
  display: flex;
  gap: var(--pb-space-grid);
  align-items: stretch;
}

/* De knop naast een meerregelig veld hoort bovenaan te blijven staan en niet mee
   uit te rekken tot de volle hoogte van het codefragment. */
.pb-copy-row textarea + .pb-btn {
  align-self: flex-start;
}

.pb-copy-row .pb-input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em;
}

/* Geruststelling onder de doorgaan-knop: "Doorgaan" mag niet lezen als "afrekenen". */
.pb-quote-reassurance {
  margin-top: var(--pb-space-grid);
  margin-bottom: 0;
  text-align: center;
}

/* ---- Blok binnen een kaart ---------------------------------------------
   Eén koppeling met eigen kop, status en formulier. Zonder eigen omkadering
   lopen meerdere koppelingen in elkaar over. */

.pb-subcard {
  margin-top: var(--pb-space);
  padding: var(--pb-space);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
}

.pb-subcard > .pb-spread > h3,
.pb-subcard > .pb-spread > h4 {
  margin-top: 0;
}

.pb-subcard h4 {
  margin-top: var(--pb-space);
}

/* ---- Bezettingskalender -------------------------------------------------
   Eén rij per accommodatie, één cel per dag. Aaneengesloten cellen vormen
   samen een balk: alleen zo zie je in één oogopslag dat twee accommodaties
   op dezelfde dagen bezet zijn. Horizontaal scrollen op smalle schermen,
   want 31 leesbare dagcellen passen daar nooit naast elkaar.

   De enige inline stijlen in dit project staan in de kalender en de grafieken
   hieronder: een balkhoogte of kolombreedte volgt uit de cijfers en is dus
   niet in een klasse te vangen. */

.pb-occupancy {
  overflow-x: auto;
  padding-bottom: var(--pb-space-grid);
}

.pb-occupancy-head,
.pb-occupancy-row {
  display: grid;
  grid-template-columns: 130px repeat(var(--pb-days), minmax(22px, 1fr));
  min-width: 720px;
  align-items: center;
}

.pb-occupancy-row + .pb-occupancy-row {
  margin-top: 4px;
}

.pb-occupancy-name {
  padding-right: var(--pb-space-grid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-occupancy-daylabel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 4px;
  color: var(--pb-muted);
  font-size: 0.75em;
  line-height: 1.1;
}

.pb-occupancy-weekend {
  color: var(--pb-text);
  font-weight: var(--pb-weight-medium);
}

.pb-occupancy-dow {
  text-transform: lowercase;
}

.pb-occupancy-daylabel.pb-occupancy-today {
  color: var(--pb-accent);
  font-weight: var(--pb-weight-medium);
}

.pb-occupancy-cell {
  display: block;
  position: relative;
  height: 26px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

/* Alleen de uiteinden afronden, zodat de tussenliggende dagen één doorlopende
   balk vormen in plaats van losse blokjes. */
.pb-occupancy-start {
  border-top-left-radius: var(--pb-radius-sm);
  border-bottom-left-radius: var(--pb-radius-sm);
  margin-left: 2px;
}

.pb-occupancy-end {
  border-top-right-radius: var(--pb-radius-sm);
  border-bottom-right-radius: var(--pb-radius-sm);
  margin-right: 2px;
}

.pb-occupancy-free {
  background: var(--pb-bg);
  border-color: var(--pb-border);
}

.pb-occupancy-booked {
  background: var(--pb-accent);
}

.pb-occupancy-option {
  background: repeating-linear-gradient(
    45deg, var(--pb-accent), var(--pb-accent) 4px,
    var(--pb-surface) 4px, var(--pb-surface) 8px);
}

.pb-occupancy-external {
  background: var(--pb-primary);
}

.pb-occupancy-cell.pb-occupancy-today {
  outline: 2px solid var(--pb-accent);
  outline-offset: -2px;
}

a.pb-occupancy-cell:hover {
  filter: brightness(1.15);
}

/* ---- Legenda ------------------------------------------------------------ */

.pb-legend {
  margin-top: var(--pb-space-grid);
  color: var(--pb-muted);
  font-size: 0.9em;
}

.pb-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pb-legend-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--pb-border);
}

/* ---- Grafieken ----------------------------------------------------------
   Met opzet in CSS en niet met een grafiekbibliotheek: het gaat om drie
   eenvoudige vormen, en een extra script van een CDN erbij halen maakt het
   dashboard afhankelijk van een partij buiten deze server. */

.pb-chart-columns {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  overflow-x: auto;
}

.pb-chart-column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
  gap: 4px;
}

.pb-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 160px;
}

.pb-chart-bar {
  flex: 1 1 0;
  /* Zonder ondergrens verdwijnt een kleine maar echte omzet helemaal; dan lijkt
     het of er niets was. */
  min-height: 2px;
  border-radius: 3px 3px 0 0;
}

.pb-chart-bar-current {
  background: var(--pb-accent);
}

.pb-chart-bar-previous {
  background: var(--pb-border);
}

.pb-chart-label {
  color: var(--pb-muted);
  font-size: 0.8em;
}

.pb-chart-rowbar + .pb-chart-rowbar {
  margin-top: var(--pb-space-grid);
}

.pb-chart-track {
  height: 10px;
  margin-top: 4px;
  border-radius: 5px;
  background: var(--pb-bg);
  border: 1px solid var(--pb-border);
  overflow: hidden;
}

.pb-chart-fill {
  height: 100%;
  background: var(--pb-accent);
}

.pb-chart-pair > .pb-card {
  flex: 1 1 300px;
}

.pb-period-form {
  align-items: flex-end;
}

.pb-delta-up {
  color: var(--pb-accent);
}

.pb-delta-down {
  color: var(--pb-error);
}

/* Uitsplitsing van de verblijfsprijs: ingesprongen en gedempt, zodat zichtbaar is
   dat deze regels het bedrag erboven verklaren en er niet nog bij komen. */
.pb-quote-breakdown .pb-summary-row {
  padding-top: 0;
  padding-bottom: 2px;
  padding-left: var(--pb-space);
  color: var(--pb-muted);
  font-size: 0.9em;
}

.pb-quote-breakdown .pb-summary-row > span:first-child {
  color: var(--pb-muted);
}

/* ---- Kaarten naast elkaar even hoog ------------------------------------
   .pb-row centreert standaard verticaal, waardoor twee kaarten naast elkaar
   verschillend hoog werden en de een zweefde ten opzichte van de ander. */

.pb-cards-equal {
  align-items: stretch;
}

.pb-cards-equal > .pb-card {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
}

/* Toelichting onder een grafiek hoort onderaan te staan, niet tegen de laatste
   balk aan: het gaat over het hele blok, niet over die ene regel. */
.pb-cards-equal > .pb-card > .pb-hint:last-child {
  margin-top: auto;
  padding-top: var(--pb-space);
  margin-bottom: 0;
}

/* ---- Verhuurartikel in de widget ---------------------------------------
   Naam en prijs links, aantalkiezer rechts. Een kiezer onder de naam zou bij
   drie artikelen onder elkaar een lange sliert worden. */

.pb-rental-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pb-space-grid);
  padding: var(--pb-space-grid) 0;
  border-bottom: 1px solid var(--pb-border);
}

.pb-rental-item:last-child {
  border-bottom: none;
}

.pb-rental-price {
  display: block;
}

.pb-rental-count {
  width: auto;
  min-width: 72px;
  flex: none;
}

/* Btw-specificatie onder het totaal: een uitsplitsing, geen bedrag dat erbij komt. */
.pb-quote-vat {
  margin-top: var(--pb-space-grid);
  text-align: right;
}

/* Opschrift in een bezettingsbalk: de gastnaam, of bij een geïmporteerde blokkade de
   naam van het kanaal. Zonder dat is een zwarte balk alleen "ergens anders geboekt"
   en moet je per balk gaan hoveren om te zien waar hij vandaan komt.

   Absoluut gepositioneerd zodat de tekst over de volgende dagcellen heen mag lopen:
   één dagcel is te smal voor een naam, de balk als geheel niet. */
.pb-occupancy-bartext {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.7em;
  line-height: 1;
  color: var(--pb-primary-text);
  pointer-events: none;
}

/* Bij de gestreepte optie-balk is de achtergrond deels licht; daar leest donker beter. */
.pb-occupancy-option .pb-occupancy-bartext {
  color: var(--pb-text);
}

/* ---- Fotobeheer ---------------------------------------------------------
   Vaste verhouding per tegel zodat de rij niet gaat golven bij foto's van
   verschillende afmetingen; object-fit snijdt bij in plaats van te vervormen. */

.pb-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--pb-space-grid);
  margin-top: var(--pb-space-grid);
}

.pb-photo-item {
  position: relative;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  overflow: hidden;
  background: var(--pb-bg);
}

.pb-photo-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pb-photo-cover {
  position: absolute;
  top: 6px;
  left: 6px;
}

.pb-photo-actions {
  justify-content: center;
  gap: 2px;
  padding: 4px;
}

/* ---- Maandkalender voor dagbeheer ---------------------------------------
   Zeven kolommen met maandag voorop. Elke dag toont de prijs die de gast zou
   krijgen, zodat je ziet wat een handmatige prijs vervangt. */

.pb-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: var(--pb-space-grid);
}

.pb-month-weekday {
  padding-bottom: 4px;
  color: var(--pb-muted);
  font-size: 0.8em;
  text-align: center;
}

.pb-month-empty {
  min-height: 1px;
}

.pb-month-day {
  min-height: 78px;
  padding: 4px 6px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface);
  font-size: 0.8em;
  overflow: hidden;
}

.pb-month-number {
  font-weight: var(--pb-weight-medium);
}

.pb-month-price {
  color: var(--pb-muted);
}

/* Vet = handmatig gezet; zo zie je in één oogopslag welke dagen afwijken van de
   tariefperiode. */
.pb-month-price-override {
  color: var(--pb-text);
  font-weight: var(--pb-weight-medium);
}

.pb-month-flags {
  display: flex;
  flex-direction: column;
  color: var(--pb-muted);
  font-size: 0.9em;
}

.pb-month-note {
  margin-top: 2px;
  color: var(--pb-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-month-booked {
  background: var(--pb-accent);
  border-color: var(--pb-accent);
  color: var(--pb-primary-text);
}

.pb-month-booked .pb-month-price,
.pb-month-booked .pb-month-flags,
.pb-month-booked .pb-month-note {
  color: var(--pb-primary-text);
}

.pb-month-blocked {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
  color: var(--pb-primary-text);
}

.pb-month-blocked .pb-month-price,
.pb-month-blocked .pb-month-flags,
.pb-month-blocked .pb-month-note {
  color: var(--pb-primary-text);
}

.pb-month-closed {
  background: var(--pb-bg);
  border-style: dashed;
}

/* Deels bezet: bij meerdere eenheden is één boeking nog geen volle dag. Zelfde
   kleur als de oorzaak, maar doorzichtig, zodat in één oogopslag te zien is dat
   er nog iets te verkopen valt. */
.pb-month-partial {
  /* Eerst een effen terugval: kan een browser color-mix niet mengen, dan staat de
     dag licht met donkere tekst — minder sprekend, maar nooit misleidend. */
  background-color: var(--pb-surface);
  background-color: color-mix(in srgb, var(--pb-accent) 35%, var(--pb-surface));
  color: var(--pb-text);
}

.pb-month-partial.pb-month-blocked {
  background-color: var(--pb-surface);
  background-color: color-mix(in srgb, var(--pb-primary) 35%, var(--pb-surface));
}

.pb-month-partial .pb-month-price,
.pb-month-partial .pb-month-flags,
.pb-month-partial .pb-month-note {
  color: var(--pb-text);
}

.pb-month-today {
  outline: 2px solid var(--pb-accent);
  outline-offset: -2px;
}

/* ---- HTML-editor voor e-mailsjablonen -----------------------------------
   Zelfgebouwd, zonder bibliotheek van een CDN. Zie wwwroot/js/htmleditor.js. */

.pb-editor {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  overflow: hidden;
}

.pb-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-bottom: 1px solid var(--pb-border);
  background: var(--pb-bg);
}

.pb-editor-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--pb-radius-sm);
  background: transparent;
  color: var(--pb-text);
  font-size: 0.9em;
  cursor: pointer;
}

.pb-editor-btn:hover {
  background: var(--pb-surface);
  border-color: var(--pb-border);
}

.pb-editor-btn-active {
  background: var(--pb-surface);
  border-color: var(--pb-accent);
}

.pb-editor-source-toggle {
  margin-left: auto;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.pb-editor-area {
  min-height: 260px;
  padding: var(--pb-space);
  background: var(--pb-surface);
  overflow-y: auto;
}

.pb-editor-area:focus-visible {
  outline: 2px solid var(--pb-accent);
  outline-offset: -2px;
}

/* De sjabloontekst gaat naar een e-mail, dus hier geen dashboard-schaal maar
   iets dat lijkt op hoe het bij de ontvanger aankomt. */
.pb-editor-area p {
  margin: 0 0 1em;
}

.pb-editor-source {
  min-height: 260px;
  border: none;
  border-radius: 0;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.85em;
}

/* ---- Invoegbare velden --------------------------------------------------- */

.pb-token-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px;
  margin-top: var(--pb-space-grid);
}

.pb-token {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface);
  text-align: left;
  cursor: pointer;
}

.pb-token:hover {
  border-color: var(--pb-accent);
}

.pb-token code {
  font-size: 0.85em;
}

.pb-preview {
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: #fff;
}

/* ---- Kleurkiezer in het huisstijlscherm --------------------------------- */

.pb-color {
  width: 100%;
  height: var(--pb-control-height);
  padding: 2px;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface);
  cursor: pointer;
}

.pb-logo-preview {
  max-width: 280px;
  max-height: 90px;
  object-fit: contain;
}

/* ---- Logo boven het boekingsformulier -----------------------------------
   Op hoogte geschaald: een eigenaar levert zelden een logo in de afmeting die
   hier toevallig past, en breedte vastzetten vervormt een liggend logo. */

.pb-widget-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--pb-space);
}

.pb-widget-brand img {
  max-height: 64px;
  max-width: 100%;
  object-fit: contain;
}

/* ---- Voorzieningen aanvinken en tonen ----------------------------------- */

.pb-amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px var(--pb-space-grid);
}

/* In het boekingsformulier: een opsomming zonder bolletjes, met een vinkje per
   voorziening. Een tabel zou suggereren dat er kolommen te vergelijken zijn. */
.pb-amenity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px var(--pb-space-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pb-amenity-list li::before {
  content: "✓";
  margin-right: 6px;
  color: var(--pb-accent);
}

/* ---- Meekijken bij een klant -------------------------------------------
   Opvallend en altijd in beeld: zonder deze balk is niet te zien dat je in het
   account van iemand anders zit, en dan verander je daar iets in de veronder-
   stelling dat het je eigen omgeving is. */

.pb-impersonation-bar {
  background: var(--pb-error);
  color: #FFFFFF;
  font-size: 0.95em;
}

.pb-impersonation-bar .pb-container {
  padding-top: var(--pb-space-grid);
  padding-bottom: var(--pb-space-grid);
}

.pb-impersonation-bar .pb-btn {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .pb-impersonation-bar .pb-spread {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Een getalsveld hoeft niet de volle breedte: een invoervak van 100% voor "aantal
   dagen" of "afronding in pixels" suggereert dat er een lange waarde in hoort. */
.pb-input-narrow {
  max-width: 10ch;
}

.pb-input-short {
  max-width: 18ch;
}

/* Een knop die als link leest: voor "terug" in het boekingsformulier, waar een volle
   knop de aandacht zou wegnemen van waar de gast heen moet. Wel een echte knop, want
   hij doet iets op de pagina en navigeert niet. */
.pb-btn-text {
  align-self: flex-start;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pb-accent);
  text-decoration: underline;
}

.pb-btn-text:hover {
  background: none;
  text-decoration: none;
}

/* Lopende tekst die de eigenaar zelf heeft geschreven: voorwaarden, huisregels. De
   opmaak hier is bewust karig — het gaat om leesbaarheid van een lap tekst, niet om
   een vormgegeven pagina. */
.pb-prose {
  line-height: 1.6;
}

.pb-prose h2,
.pb-prose h3 {
  margin-top: var(--pb-space);
}

.pb-prose ul,
.pb-prose ol {
  padding-left: 1.4em;
}

.pb-prose li + li {
  margin-top: calc(var(--pb-space-grid) / 2);
}

/* Het wachtlijstformulier in de widget: duidelijk een ander aanbod dan de
   prijsopgave eromheen, zonder de aandacht ervan weg te nemen. */
.pb-waitlist {
  border-style: dashed;
  margin-top: var(--pb-space);
}

/* Een volle dag in de widgetkalender. Niet te kiezen, maar wel aan te klikken: dat
   opent de wachtlijst met die datum erin. Doorgestreept en gedempt, zodat het verschil
   met een vrije dag duidelijk is zonder dat de knop dood lijkt. */
.pb-cal-day-full {
  color: var(--pb-muted);
  text-decoration: line-through;
  cursor: pointer;
}

.pb-cal-day-full:hover {
  border-color: var(--pb-accent);
  text-decoration: none;
}

/* ---- Verborgen voor het oog, niet voor de voorleessoftware --------------
   Voor een bedieningselement dat vervangen is door iets anders (het kale
   bestandsveld onder een dropzone), maar wel bereikbaar moet blijven. */
.pb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Bijlagen slepen of bladeren ---------------------------------------
   Een gestippeld vak dat laat zien dat je erin kunt slepen. De knop erin doet
   hetzelfde als het bestandsveld, dat verborgen wordt zodra het script draait:
   twee manieren om hetzelfde te doen naast elkaar is verwarrend. */
.pb-dropzone {
  padding: var(--pb-space);
  border: 2px dashed var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-bg);
  text-align: center;
}

.pb-dropzone-over {
  border-color: var(--pb-accent);
  background: var(--pb-surface);
}

.pb-dropzone p {
  margin: 0 0 var(--pb-space-grid);
}

.pb-dropzone-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--pb-space-grid) / 2) var(--pb-space);
  padding: calc(var(--pb-space-grid) / 2) 0;
  text-align: left;
}

/* Een bestandsnaam van een telefoon is zo 40 tekens; die mag afbreken in plaats van
   de knop ernaast van het scherm te duwen. */
.pb-dropzone-file > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pb-dropzone-file + .pb-dropzone-file {
  border-top: 1px solid var(--pb-border);
}

/* ---- Gesprek in een ticket ---------------------------------------------
   Vraag en antwoord onder elkaar in de tijd. Het verschil tussen "wij" en "de
   ander" moet uit meer blijken dan de uitlijning alleen: een naam en een
   tijdstip boven elke bijdrage, want bij een vraag van een maand terug is dat
   wat je wil weten. */
.pb-thread > * + * {
  margin-top: var(--pb-space);
}

.pb-post {
  padding: var(--pb-space);
  border: 1px solid var(--pb-border);
  border-left: 3px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface);
}

.pb-post-platform {
  border-left-color: var(--pb-accent);
  background: var(--pb-bg);
}

/* Een interne aantekening is geen antwoord aan de klant. Hij ziet hem nooit, maar
   wie hem schrijft moet in één blik zien dat hij niet verstuurd wordt. */
.pb-post-internal {
  border-style: dashed;
  border-left-style: solid;
  border-left-color: var(--pb-error);
  background: var(--pb-bg);
}

.pb-post-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pb-space-grid);
  margin-bottom: var(--pb-space-grid);
}

.pb-post-author {
  font-weight: var(--pb-weight-medium);
}

/* De tekst zoals hij getypt is: regelovergangen in een bericht zijn betekenisvol
   (een opsomming, een adres) en gaan in gewone HTML verloren. */
.pb-post-body {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: var(--pb-line-height);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pb-post-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-grid);
  margin-top: var(--pb-space);
  padding-top: var(--pb-space-grid);
  border-top: 1px solid var(--pb-border);
}

/* Een bijlage draagt zijn eigen bestandsnaam als label. Die kan lang zijn, dus mag
   de knop afbreken in plaats van buiten de kaart uit te steken.

   De hoogte komt van .pb-btn-small en blijft dus staan; alleen line-height moet mee,
   want die staat op 1 en dan plakken twee regels tekst tegen elkaar. */
.pb-post-files > .pb-btn {
  max-width: 100%;
  padding-top: calc(var(--pb-space-grid) / 2);
  padding-bottom: calc(var(--pb-space-grid) / 2);
  line-height: var(--pb-line-height);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---- Keuze uit een handvol opties ---------------------------------------
   Radio's naast elkaar, elk met zijn label in één aanklikbaar vlak. Voor een
   cijfer van 1 tot 5: vijf opties horen in één blik zichtbaar te zijn, en een
   sterrenwidget zou zonder JavaScript niet werken. */
.pb-radio {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pb-space-grid) / 2);
  min-height: var(--pb-control-height);
  padding: 0 calc(var(--pb-space-grid) * 1.5);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface);
  cursor: pointer;
}

.pb-radio:has(input:checked) {
  border-color: var(--pb-accent);
  box-shadow: inset 0 0 0 1px var(--pb-accent);
}

.pb-radio:has(input:focus-visible) {
  outline: 2px solid var(--pb-accent);
  outline-offset: 2px;
}

/* ---- Velden die bij een keuze horen -------------------------------------
   Twee mogelijkheden naast elkaar (bv. lokale mailserver of Amazon SES), elk met eigen
   velden. De velden van de andere keuze verdwijnen, zonder script: alleen CSS, met :has.
   Ondersteunt een browser :has niet, dan staan ze allemaal in beeld -- minder mooi, maar
   niets wat je nodig hebt is weg. Andersom (standaard verborgen) zou in zo'n browser
   juist alle velden weghalen. */
.pb-choice-group:has(input[type="radio"][value="aws"]:checked) [data-choice="localhost"],
.pb-choice-group:has(input[type="radio"][value="localhost"]:checked) [data-choice="aws"] {
  display: none;
}

/* Een lange lijst (bv. tientallen back-ups) scrolt in een vak in plaats van de pagina
   eindeloos te rekken. De kop blijft staan, zodat de kolommen herkenbaar blijven. */
.pb-table-tall {
  max-height: 360px;
  overflow-y: auto;
}

.pb-table-tall thead th {
  position: sticky;
  top: 0;
  background: var(--pb-surface);
}