/**
 * Ellavia / TouchSlovakia — TsCalendar shared widget (4.5.2026)
 *
 * Štýly extrahované z hero-search.css `.hero-calendar__*` rules a premenované
 * na `.ts-calendar__*` aby boli zdieľateľné medzi frontend booking bar a admin
 * date inputmi. Ellavia accent (oranžová highlight) je zachovaná, plus nový
 * admin variant `.ts-calendar--admin` (navy border, menšia tipografia).
 *
 * Trigger button (input náhrada):
 *   .ts-calendar-field
 *     ├─ <input type="hidden">
 *     └─ <button class="ts-calendar-trigger">
 *           <span data-ts-cal-label>Štítok…</span>
 *           <svg class="ts-calendar-icon">…</svg>
 *
 * Popup (renderovaný JS-om do <body>):
 *   .ts-calendar
 *     ├─ .ts-calendar__head      (◂ ▸)
 *     ├─ .ts-calendar__months    (2 mesiace vedľa seba na desktop)
 *     │   └─ .ts-calendar__month
 *     │        ├─ .ts-calendar__month-head   ("Máj 2026")
 *     │        ├─ .ts-calendar__weekdays      (Pon Uto Str …)
 *     │        └─ .ts-calendar__grid          (.ts-calendar__day cells)
 *     └─ .ts-calendar__footer    (summary text + zatvoriť)
 */

/* === Trigger button (vyzerá ako input) ============================== */
.ts-calendar-field {
  position: relative;
  display: inline-block;
  min-width: 180px;
}

.ts-calendar-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #1f2937;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  min-height: 36px;
}
.ts-calendar-trigger:hover,
.ts-calendar-trigger:focus-visible {
  border-color: #94a3b8;
  outline: none;
}
.ts-calendar-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(172, 133, 16, 0.25);
}
.ts-calendar-trigger.is-placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.ts-calendar-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #6b7280;
  pointer-events: none;
}

/* === Popup (rendered into body / open dialog, position:fixed via JS) =
 * z-index musí byť vyšší než custom modaly v admin UI (`.hc-modal`
 * @ z-index: 1300, `.hc-bulk-panel` @ 1200, `.hc-toast` @ 1100). Pre native
 * `<dialog>` v top-layer JS popup appenduje DOVNÚTRA `<dialog>` elementu
 * (top-layer pravidlá by inak schovali popup pod backdrop) — tento z-index
 * je fallback pre non-native modaly a zaisťuje stabilný stacking aj keď
 * popup zostane v body. */
.ts-calendar {
  position: fixed;
  z-index: 2147483646;
  min-width: 640px;
  max-width: calc(100vw - 16px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(7, 21, 50, 0.28), 0 0 0 1px rgba(7, 21, 50, 0.08);
  padding: 18px;
  display: none;
  font-family: inherit;
  color: #1f2937;
}
.ts-calendar.is-open {
  display: block;
}

.ts-calendar--inline {
  position: static;
  display: block;
  box-shadow: none;
  border: 1px solid rgba(7, 21, 50, 0.08);
  z-index: auto;
}

.ts-calendar__backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  background: transparent;
  display: none;
}
.ts-calendar__backdrop.is-open {
  display: block;
}

/* === Header (prev/next nav) ========================================= */
.ts-calendar__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.ts-calendar__nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(7, 21, 50, 0.14);
  background: transparent;
  color: #1f2937;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.ts-calendar__nav:hover:not(:disabled),
.ts-calendar__nav:focus-visible:not(:disabled) {
  background: #E8A53D;
  border-color: #E8A53D;
  color: #071532;
  outline: none;
}
.ts-calendar__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* === Two months side-by-side ======================================= */
.ts-calendar__months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.ts-calendar__month-head {
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.ts-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 4px;
}
.ts-calendar__weekday {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7290;
  padding: 6px 0;
}

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

/* === Day cells ====================================================== */
.ts-calendar__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
.ts-calendar__day:hover:not(:disabled):not(.is-blocked) {
  background: rgba(172, 133, 16, 0.18);
}
.ts-calendar__day:focus-visible {
  outline: 2px solid #E8A53D;
  outline-offset: -2px;
}
.ts-calendar__day.is-empty {
  visibility: hidden;
  pointer-events: none;
}
.ts-calendar__day.is-blocked,
.ts-calendar__day:disabled {
  color: rgba(7, 21, 50, 0.32);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: rgba(220, 53, 69, 0.42);
  opacity: 0.5;
}
.ts-calendar__day.is-blocked:hover,
.ts-calendar__day:disabled:hover {
  background: transparent;
}
.ts-calendar__day.is-today {
  outline: 1.5px solid rgba(7, 21, 50, 0.42);
  outline-offset: -2px;
}
.ts-calendar__day.is-in-range {
  background: rgba(172, 133, 16, 0.22);
  border-radius: 0;
}
.ts-calendar__day.is-range-start,
.ts-calendar__day.is-range-end,
.ts-calendar__day.is-selected {
  background: #E8A53D;
  color: #071532;
}
.ts-calendar__day.is-range-start {
  border-radius: 8px 0 0 8px;
}
.ts-calendar__day.is-range-end {
  border-radius: 0 8px 8px 0;
}
.ts-calendar__day.is-range-start.is-range-end,
.ts-calendar__day.is-selected:not(.is-in-range) {
  border-radius: 8px;
}

/* === Footer ========================================================= */
.ts-calendar__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(7, 21, 50, 0.08);
}
.ts-calendar__summary {
  font-size: 12.5px;
  color: #5b6280;
  flex: 1;
  min-width: 0;
}
.ts-calendar__close {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #1f2937;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.16s ease;
}
.ts-calendar__close:hover,
.ts-calendar__close:focus-visible {
  background: rgba(7, 21, 50, 0.08);
  outline: none;
}

/* === Mobile (single month, full width sheet) ======================= */
@media (max-width: 700px) {
  .ts-calendar {
    min-width: 0;
    width: calc(100vw - 16px);
    max-width: 380px;
    padding: 14px;
    border-radius: 12px;
  }
  .ts-calendar__months {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ts-calendar__day {
    font-size: 14px;
  }
}

/* === Admin variant: navy border, smaller padding ===================
 *  Auto-aplikuje sa keď sa <body class="ts-admin"> nájde okolo trigger-a
 *  ALEBO keď field má `data-variant="admin"`. Popup je rendered v <body>,
 *  takže pre popup samostatný hook cez `body.ts-admin .ts-calendar`. */
body.ts-admin .ts-calendar {
  padding: 14px;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(7, 21, 50, 0.18), 0 0 0 1px rgba(7, 21, 50, 0.10);
}
body.ts-admin .ts-calendar__day {
  font-size: 13px;
  border-radius: 6px;
}
body.ts-admin .ts-calendar__day.is-range-start {
  border-radius: 6px 0 0 6px;
}
body.ts-admin .ts-calendar__day.is-range-end {
  border-radius: 0 6px 6px 0;
}
body.ts-admin .ts-calendar__day.is-range-start.is-range-end,
body.ts-admin .ts-calendar__day.is-selected:not(.is-in-range) {
  border-radius: 6px;
}
body.ts-admin .ts-calendar-trigger {
  border-color: #d1d5db;
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 10px;
  min-height: 34px;
}
body.ts-admin .ts-calendar-trigger:focus-visible {
  border-color: #E8A53D;
  box-shadow: 0 0 0 3px rgba(172, 133, 16, 0.20);
}
