/* =========================================================
   Iselmar — gedeelde UI widgets
   calendar · custom select · modal
   Gebruikt de --iselmar-* variabelen uit reserveringen/style.css
   ========================================================= */

/* ─────────────────────────────────────────
   Calendar
   ───────────────────────────────────────── */
.iselcal-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--iselmar-text);
  margin-bottom: 6px;
}

.iselcal-root {
  position: relative;
}

.iselcal-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--iselmar-border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  color: var(--iselmar-text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}
.iselcal-trigger:hover {
  border-color: var(--iselmar-primary);
}
.iselcal-root.is-open .iselcal-trigger {
  border-color: var(--iselmar-primary);
  box-shadow: 0 0 0 4px rgba(26, 90, 115, 0.12);
}
.iselcal-trigger svg {
  width: 18px;
  height: 18px;
  color: var(--iselmar-text-light);
  flex-shrink: 0;
}
.iselcal-value {
  flex: 1;
  color: var(--iselmar-muted);
}
.iselcal-value.has-value {
  color: var(--iselmar-text);
  font-weight: 500;
}
.iselcal-value-click {
  cursor: text;
}
.iselcal-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--iselmar-text);
  padding: 0;
  min-width: 0;
}
.iselcal-caret-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-left: auto;
}
.iselcal-caret {
  width: 16px !important;
  height: 16px !important;
  transition: transform 0.2s ease;
}
.iselcal-root.is-open .iselcal-caret {
  transform: rotate(180deg);
}

.iselcal-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  /* Panel volgt de breedte van de trigger-input; een harde min-width wordt
     vermeden zodat de kalender geen brede flyout wordt bij een smal invulveld.
     Voor usability blijft er een ondergrens van 260px voor de grid. */
  min-width: 260px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--iselmar-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  z-index: 50;
  box-sizing: border-box;
}
.iselcal-panel.iselcal-inline {
  position: static;
  box-shadow: var(--shadow-sm);
}

.iselcal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.iselcal-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--iselmar-text);
}
.iselcal-nav {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--iselmar-text-light);
  transition: background 0.15s ease, color 0.15s ease;
}
.iselcal-nav:hover {
  background: var(--iselmar-cream);
  color: var(--iselmar-primary);
}
.iselcal-nav svg {
  width: 16px;
  height: 16px;
}

.iselcal-daynames {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.iselcal-daynames > div {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--iselmar-muted);
  padding: 2px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.iselcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.iselcal-empty {
  height: 26px;
}
.iselcal-day {
  height: 26px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  color: var(--iselmar-text);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.iselcal-day:hover:not(:disabled):not(.is-selected) {
  background: var(--iselmar-cream);
}
.iselcal-day.is-selected {
  background: var(--iselmar-primary);
  color: #fff;
  font-weight: 700;
}
.iselcal-day.is-today:not(.is-selected) {
  border-color: var(--iselmar-primary);
  color: var(--iselmar-primary);
  font-weight: 600;
}
.iselcal-day.is-disabled,
.iselcal-day:disabled {
  color: var(--iselmar-muted);
  cursor: not-allowed;
  opacity: 0.45;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DAGMARKERING IN DE MAANDWEERGAVE — FB-1008
   Receptie: "kan er bij de datum ook een kleurtje op de dagen dat er iets
   geboekt is? Dan is makkelijker te zien waar al een reservering op staat."

   Inert zolang de aanroeper geen `dagMarkers` meegeeft: zonder .mkv-* op het
   grid en zonder .has-mark op een dag verandert er niets aan de kalender.

   SAMENHANG met de bezettingsstrip in de zijbalk (klus 8, "overnemen"-bak van
   site/voorstel-redesign-activiteiten.html → .mr-strip): dezelfde taal.
     bezetting  = gevuld vlak in var(--accent)      (.mr-strip i)
     blokkade   = 45°-arcering in var(--warning)    (.mr-strip i.blk)
     spoor      = var(--surface) op var(--border)   (.mr-strip zelf)
   De arcering is bewust een TEXTUUR en niet alleen een kleur: blokkade blijft
   zo te onderscheiden van bezetting zonder kleurwaarneming. De exacte aantallen
   staan in het title-attribuut van de dagknop.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Markering nodig? Dan iets meer hoogte, zodat het dagnummer leesbaar blijft. */
.iselcal-grid[class*="mkv-"] .iselcal-day,
.iselcal-grid[class*="mkv-"] .iselcal-empty {
  height: 30px;
}
.iselcal-grid[class*="mkv-"] .iselcal-day {
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
.iselcal-daynr {
  position: relative;
  z-index: 1;
  line-height: 1;
}
.iselcal-mark {
  display: none;
  pointer-events: none;
}
.iselcal-day.has-mark .iselcal-mark {
  display: block;
}
/* De arcering van .mr-strip i.blk, één op één. */
.iselcal-day.mk-blok .iselcal-mark {
  background-image: repeating-linear-gradient(
    45deg,
    var(--warning-soft, rgba(217, 119, 6, .16)),
    var(--warning-soft, rgba(217, 119, 6, .16)) 3px,
    var(--warning, #d97706) 3px,
    var(--warning, #d97706) 4px
  );
}

/* ── De ministrip: de zijbalkstrip, één maat kleiner ──
   Vastgezet door Nick op 2 augustus 2026 (variant B van de drie voorstellen).
   De klassenaam blijft .mkv-b: calendar.js kent `markerVariant`, en het
   voorstel receptiev2/voorstel-kalendermarkering.html toont de afgewezen
   varianten A (stip) en C (achtergrond) nog — met een eigen kopie van hun CSS,
   want die staat hier niet meer. */
.mkv-b .iselcal-mark {
  width: 76%;
  height: 4px;
  border-radius: 2px;
  background-color: var(--border, #ececea);
  overflow: hidden;
  margin-bottom: 1px;
}
.mkv-b .iselcal-mark i {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 2px;
  background: var(--accent, #577C8E);
}
.mkv-b .iselcal-day.mk-alleen-blok .iselcal-mark i { display: none; }

/* Gekozen dag: de markering moet leesbaar blijven op het accent-vlak. */
.iselcal-day.is-selected .iselcal-mark { background-color: rgba(255, 255, 255, .45); }
.iselcal-day.is-selected .iselcal-mark i { background: #fff; }

.iselcal-footer {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--iselmar-border-soft);
  display: flex;
  justify-content: center;
}
.iselcal-today {
  background: transparent;
  border: none;
  color: var(--iselmar-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.iselcal-today:hover {
  text-decoration: underline;
}

/* ── Range mode ───────────────────────────────────────────── */
.iselcal-grid.is-range {
  gap: 0;
}
.iselcal-grid.is-range .iselcal-day {
  border-radius: 0;
}
.iselcal-day.is-in-range {
  background: var(--iselmar-cream);
  color: var(--iselmar-text);
  border-radius: 0;
}
.iselcal-day.is-range-start {
  background: var(--iselmar-primary);
  color: #fff;
  font-weight: 700;
  border-radius: 999px 0 0 999px;
}
.iselcal-day.is-range-end {
  background: var(--iselmar-primary);
  color: #fff;
  font-weight: 700;
  border-radius: 0 999px 999px 0;
}
.iselcal-day.is-range-start.is-range-end {
  border-radius: 999px;
}
.iselcal-footer-range {
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.iselcal-quick {
  background: var(--iselmar-bg-soft, #f5f5f4);
  border: 1px solid var(--iselmar-border);
  color: var(--iselmar-text);
  padding: 6px 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.iselcal-quick:hover {
  background: var(--iselmar-cream);
  border-color: var(--iselmar-primary);
  color: var(--iselmar-primary);
}

/* ─────────────────────────────────────────
   Custom select
   ───────────────────────────────────────── */
.iselsel-root {
  position: relative;
}
.iselsel-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--iselmar-border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  color: var(--iselmar-text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}
.iselsel-trigger:hover {
  border-color: var(--iselmar-primary);
}
.iselsel-root.is-open .iselsel-trigger {
  border-color: var(--iselmar-primary);
  box-shadow: 0 0 0 4px rgba(26, 90, 115, 0.12);
}
.iselsel-trigger.is-placeholder .iselsel-label {
  color: var(--iselmar-muted);
}
.iselsel-value {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.iselsel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: var(--iselmar-cream);
  color: var(--iselmar-primary);
  flex-shrink: 0;
}
.iselsel-icon svg {
  width: 16px;
  height: 16px;
}
.iselsel-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iselsel-caret {
  width: 16px;
  height: 16px;
  color: var(--iselmar-text-light);
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.2s ease;
}
.iselsel-root.is-open .iselsel-caret {
  transform: rotate(180deg);
}

.iselsel-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--iselmar-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  z-index: 50;
}
.iselsel-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--iselmar-text);
  cursor: pointer;
  transition: background 0.12s ease;
}
.iselsel-option:hover {
  background: var(--iselmar-cream);
}
.iselsel-option.is-selected {
  background: rgba(26, 90, 115, 0.08);
  color: var(--iselmar-primary);
  font-weight: 500;
}
.iselsel-option .iselsel-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--iselmar-text-light);
  font-weight: 500;
}
.iselsel-option .iselsel-check {
  width: 16px;
  height: 16px;
  color: var(--iselmar-primary);
  margin-left: auto;
  flex-shrink: 0;
}
.iselsel-option .iselsel-meta + .iselsel-check {
  margin-left: 8px;
}

/* ─────────────────────────────────────────
   Modal / Dialog
   ───────────────────────────────────────── */
.iselmodal-root {
  position: relative;
  z-index: 100;
}
.iselmodal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 36, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease, backdrop-filter 0.18s ease;
  pointer-events: none;
}
.iselmodal-overlay.is-open {
  background: rgba(15, 23, 36, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  pointer-events: auto;
}
.iselmodal-dialog {
  background: #fff;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 440px;
  padding: 28px;
  box-shadow: var(--shadow-lg);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.iselmodal-dialog.is-lg {
  max-width: 560px;
}
.iselmodal-overlay.is-open .iselmodal-dialog {
  transform: translateY(0) scale(1);
}
.iselmodal-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.iselmodal-icon.warn {
  background: rgba(192, 57, 43, 0.1);
  color: var(--iselmar-accent);
}
.iselmodal-icon.info {
  background: rgba(26, 90, 115, 0.1);
  color: var(--iselmar-primary);
}
.iselmodal-icon svg {
  width: 28px;
  height: 28px;
}
.iselmodal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--iselmar-text);
  margin: 0 0 10px;
}
.iselmodal-title.center {
  text-align: center;
}
.iselmodal-message {
  color: var(--iselmar-text-light);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 18px;
  text-align: center;
}
.iselmodal-message p {
  margin: 0 0 8px;
}
.iselmodal-message p:last-child {
  margin-bottom: 0;
}
.iselmodal-body {
  margin-bottom: 4px;
}
.iselmodal-field {
  margin-top: 14px;
  margin-bottom: 20px;
}
.iselmodal-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--iselmar-text);
  margin-bottom: 6px;
}
.iselmodal-field input,
.iselmodal-field textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 14px;
  border: 1.5px solid var(--iselmar-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--iselmar-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  resize: vertical;
  font-family: inherit;
}
.iselmodal-field input:focus,
.iselmodal-field textarea:focus {
  outline: none;
  border-color: var(--iselmar-primary);
  box-shadow: 0 0 0 4px rgba(26, 90, 115, 0.12);
}
.iselmodal-field input.is-invalid,
.iselmodal-field textarea.is-invalid {
  border-color: var(--iselmar-accent);
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.12);
}
.iselmodal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}
.iselmodal-actions .btn {
  min-width: 100px;
}

/* Danger button (voor destructieve acties) */
.btn.btn-danger {
  background: var(--iselmar-accent);
  color: #fff;
  border: 1px solid var(--iselmar-accent);
}
.btn.btn-danger:hover {
  background: #a12e22;
  border-color: #a12e22;
}

/* ─────────────────────────────────────────
   Borg check card (in modal body)
   ───────────────────────────────────────── */
.iselborg {
  border: 1px solid var(--iselmar-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 12px;
  background: var(--iselmar-cream);
}
.iselborg.ok {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.06);
}
.iselborg.fail {
  border-color: rgba(192, 57, 43, 0.35);
  background: rgba(192, 57, 43, 0.06);
}
.iselborg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 14px;
}
.iselborg.ok .iselborg-head { color: #16a34a; }
.iselborg.fail .iselborg-head { color: var(--iselmar-accent); }
.iselborg-head svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.iselborg-rows {
  font-size: 13px;
  color: var(--iselmar-text);
}
.iselborg-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.iselborg-row strong {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.iselborg-bar {
  margin-top: 10px;
  height: 8px;
  background: rgba(15, 23, 36, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.iselborg-bar-fill {
  height: 100%;
  background: #16a34a;
  transition: width 0.3s ease;
}
.iselborg.fail .iselborg-bar-fill {
  background: var(--iselmar-accent);
}
.iselborg-msg {
  margin-top: 10px;
  font-size: 13px;
  color: var(--iselmar-text-light);
  line-height: 1.5;
}