/* ══════════════════════════════════════════════════════════════════════════════
   Verhuurkalender op de PUBLIEKE site — het beschikbaarheidsblok op de
   detailpagina van een vakantiewoning. Gedeeld door alle templates; elke
   template laadt dit bestand in zijn _Styles.cshtml, net als _shared/fq-nav.css.

   Ontwerp goedgekeurd door Jenny op 31-08-2026 (proefbestand
   verhuur-kalender.html in de hoofdmap). De beheerkant in het dashboard is
   dezelfde kalender met hetzelfde rekenmodel; die staat in
   wwwroot/assets/css/wf-verhuur.css met voorvoegsel wf-vk-. Hier is het
   voorvoegsel wf-vh-, zodat de twee elkaar nooit kunnen raken.

   Twee dingen die je niet moet weghalen:

   1. GEEN column-gap op het dagraster. De bezet-balk loopt door van dag naar
      dag omdat hij halverwege de aankomstdag begint en halverwege de vertrekdag
      eindigt; met een gat tussen de kolommen breekt hij bij elke dag.
   2. GEEN rood en groen. Elke Webfix-site kleurt mee met de huisstijl van de
      klant; rood leest bovendien als een fout. Bezet is daarom een neutrale
      tint van de tekstkleur, en alleen de gekozen periode krijgt kleur.
   ══════════════════════════════════════════════════════════════════════════ */

.wf-vh {
  --wf-vh-bezet: color-mix(in srgb, currentColor 16%, transparent);
  --wf-vh-baan: color-mix(in srgb, var(--brand-primary) 16%, transparent);
  --wf-vh-cijfer: inherit;
  --wf-vh-zacht: .6;
}

/* ── Donkere modus ───────────────────────────────────────────────────────────
   In het donker is de lopende tekstkleur zelf al gedempt grijs; 16% daarvan op
   een bijna-zwarte achtergrond is niet meer te zien, en dan lijkt een volgeboekte
   maand gewoon leeg. Daarom hier een lichte sluier in plaats van een tint van de
   tekst, en steviger cijfers. Wit met doorzichtigheid mag: het is geen kleur die
   met de huisstijl kan botsen.
   Let op: business1-dark en business1-onepage-dark hebben GEEN eigen view-map —
   die delen deze bestanden met business1 (TemplateCatalog.ResolvedViewKey). Wat
   je hier stukmaakt, maakt je bij alle varianten stuk. */
[data-bs-theme="dark"] .wf-vh {
  --wf-vh-bezet: rgba(255, 255, 255, .14);
  --wf-vh-baan: color-mix(in srgb, var(--brand-primary) 34%, transparent);
  --wf-vh-cijfer: rgba(255, 255, 255, .88);
  --wf-vh-zacht: .75;
}

/* ── Kop en maandnavigatie ───────────────────────────────────────────────── */
.wf-vh-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.wf-vh-namen {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center;
}
@media (min-width: 720px) { .wf-vh-namen { grid-template-columns: 1fr 1fr; } }

.wf-vh-naam { font-size: 15px; font-weight: 600; text-align: center; text-transform: capitalize; }

/* inline-flex + justify-self, zodat het pijltje tegen de maandnaam aan blijft
   staan in plaats van tegen de rand van de kolom. */
.wf-vh-jump-wrap { position: relative; display: inline-flex; justify-self: center; max-width: 100%; }

.wf-vh-jump {
  font: inherit; font-size: 15px; font-weight: 600; text-transform: capitalize; color: inherit;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  appearance: none; -webkit-appearance: none; max-width: 100%;
  padding: 5px 26px 5px 10px; border-radius: var(--wf-radius-input, 6px);
  text-align: center; text-align-last: center;
  transition: background .35s, border-color .35s;
}
.wf-vh-jump:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.wf-vh-jump:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.wf-vh-chev {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; pointer-events: none; opacity: .55;
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

.wf-vh-pijl {
  flex: 0 0 auto; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: transparent; color: inherit;
  border-radius: var(--wf-radius-button, 6px); cursor: pointer;
  transition: border-color .35s, color .35s;
}
.wf-vh-pijl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wf-vh-pijl:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-ink, var(--brand-primary)); }
.wf-vh-pijl:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.wf-vh-pijl:disabled { opacity: .3; cursor: default; }

/* ── Het maandraster ─────────────────────────────────────────────────────── */
.wf-vh-maanden { display: grid; grid-template-columns: 1fr; gap: 8px 30px; }
@media (min-width: 720px) { .wf-vh-maanden { grid-template-columns: 1fr 1fr; } }

.wf-vh-weekdagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 2px; }
.wf-vh-weekdagen span {
  text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  opacity: var(--wf-vh-zacht); text-transform: uppercase; color: var(--wf-vh-cijfer);
}

/* GEEN column-gap — zie de koptekst. */
.wf-vh-dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; column-gap: 0; }

.wf-vh-dag {
  position: relative; border: 0; background: transparent; font: inherit; padding: 0; min-width: 0;
  aspect-ratio: 1 / .92; min-height: 40px; cursor: pointer; color: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.wf-vh-dag.is-leeg { visibility: hidden; pointer-events: none; }
.wf-vh-num { position: relative; z-index: 4; font-size: 14px; font-weight: 500; line-height: 1.1; color: var(--wf-vh-cijfer); }
.wf-vh-prijs { position: relative; z-index: 4; font-size: 10px; opacity: var(--wf-vh-zacht); margin-top: 1px; letter-spacing: -.02em; color: var(--wf-vh-cijfer); }

/* ── De bezet-balk, in halve vakjes ──────────────────────────────────────── */
/* De linkerhelft toont de nacht ervóór, de rechterhelft de nacht erná. Daardoor
   is een vertrekdag vanzelf 's middags weer vrij. */
.wf-vh-h { position: absolute; top: 4px; bottom: 4px; z-index: 1; pointer-events: none; background: var(--wf-vh-bezet); }
.wf-vh-h--l { left: 0; right: 50%; }
.wf-vh-h--r { left: 50%; right: 0; }
.wf-vh-h--kap-l { border-top-left-radius: var(--wf-radius-button, 30px); border-bottom-left-radius: var(--wf-radius-button, 30px); }
.wf-vh-h--kap-r { border-top-right-radius: var(--wf-radius-button, 30px); border-bottom-right-radius: var(--wf-radius-button, 30px); }

/* ── De gekozen periode ──────────────────────────────────────────────────── */
.wf-vh-baan { position: absolute; top: 4px; bottom: 4px; z-index: 2; background: var(--wf-vh-baan); pointer-events: none; }
.wf-vh-baan--l { left: 0; right: 50%; }
.wf-vh-baan--r { left: 50%; right: 0; }
.wf-vh-baan--vol { left: 0; right: 0; }
.wf-vh-baan--kap-l { border-top-left-radius: var(--wf-radius-button, 30px); border-bottom-left-radius: var(--wf-radius-button, 30px); }
.wf-vh-baan--kap-r { border-top-right-radius: var(--wf-radius-button, 30px); border-bottom-right-radius: var(--wf-radius-button, 30px); }

/* Aankomst en vertrek als dicht vlak: een half gekleurd vakje geeft wit-op-wit
   en dan valt het dagcijfer weg. */
.wf-vh-eind {
  position: absolute; inset: 3px 2px; z-index: 3;
  background: var(--brand-primary); border-radius: var(--wf-radius-input, 6px); pointer-events: none;
  transition: opacity .35s;
}
.wf-vh-eind--voorbeeld { opacity: .5; }
.wf-vh-dag.is-eind .wf-vh-num { color: var(--brand-on-primary, #fff); font-weight: 700; }
.wf-vh-dag.is-eind .wf-vh-prijs { color: var(--brand-on-primary, #fff); opacity: .85; }

/* ── Toestanden ──────────────────────────────────────────────────────────── */
.wf-vh-dag.is-bezet { cursor: default; }
.wf-vh-dag.is-bezet .wf-vh-num { opacity: .45; text-decoration: line-through; text-decoration-thickness: 1px; }
.wf-vh-dag.is-bezet .wf-vh-prijs { visibility: hidden; }
.wf-vh-dag.is-verleden, .wf-vh-dag.is-dicht { cursor: default; }
.wf-vh-dag.is-verleden .wf-vh-num, .wf-vh-dag.is-dicht .wf-vh-num { opacity: .3; }
.wf-vh-dag.is-verleden .wf-vh-prijs, .wf-vh-dag.is-dicht .wf-vh-prijs { visibility: hidden; }

.wf-vh-dag.is-kiesbaar::after {
  content: ""; position: absolute; inset: 3px 2px; border-radius: var(--wf-radius-input, 6px);
  border: 1.5px solid transparent; transition: border-color .35s; z-index: 5; pointer-events: none;
}
.wf-vh-dag.is-kiesbaar:hover::after { border-color: var(--brand-primary); }
.wf-vh-dag:focus-visible { outline: none; }
.wf-vh-dag:focus-visible::after {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 28%, transparent);
}

/* ── De rekening onder de kalender ───────────────────────────────────────── */
.wf-vh-uitkomst { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); margin-top: 18px; padding-top: 18px; }
.wf-vh-periode { font-size: 17px; font-weight: 600; margin: 0 0 2px; }
.wf-vh-nachten { font-size: 14px; opacity: .65; margin: 0 0 14px; }
.wf-vh-regel { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 5px 0; }
.wf-vh-regel span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-vh-totaal {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-size: 18px; font-weight: 700;
}
.wf-vh-totaal span:last-child { font-variant-numeric: tabular-nums; }
.wf-vh-hint { font-size: 13.5px; opacity: .65; margin: 14px 0 0; }
.wf-vh-wis {
  background: none; border: 0; font: inherit; font-size: 14px; opacity: .7;
  cursor: pointer; padding: 6px 0; text-decoration: underline;
}
.wf-vh-wis:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .wf-vh-dag, .wf-vh-dag::after, .wf-vh-pijl, .wf-vh-jump, .wf-vh-eind { transition: none !important; }
}