<template>
  <div class="relative">
    <div class="calendar-header bookaro-card bookaro-card__body">
      <div class="calendar-header__left">
        <button
          @click="prevPeriod"
          class="cal-nav-btn bookaro-btn bookaro-btn--outline"
          type="button"
        >
          &lsaquo;
        </button>
        <div class="calendar-period">
          <div class="calendar-period__label">{{ periodLabel }}</div>
          <div class="calendar-period__meta">{{ viewModeLabel }}</div>
        </div>
        <button
          @click="nextPeriod"
          class="cal-nav-btn bookaro-btn bookaro-btn--outline"
          type="button"
        >
          &rsaquo;
        </button>
      </div>

      <div class="calendar-header__right">
        <div class="calendar-view-toggle">
          <button
            :class="['toggle-btn bookaro-btn bookaro-btn--outline', viewMode === 'month' ? 'is-active' : '']"
            @click="setView('month')"
            type="button"
          >
            {{ i18n.calendar_view_month }}
          </button>
          <button
            :class="['toggle-btn bookaro-btn bookaro-btn--outline', viewMode === 'week' ? 'is-active' : '']"
            @click="setView('week')"
            type="button"
          >
            {{ i18n.calendar_view_week }}
          </button>
        </div>
        <button
          class="filters-toggle bookaro-btn bookaro-btn--outline"
          type="button"
          @click="toggleFilters"
        >
          <span class="filters-toggle__label">
            {{ filtersOpen ? (i18n.filters_hide || i18n.filters_label) : (i18n.filters_show || i18n.filters_label) }}
          </span>
        </button>
      </div>
    </div>

    <div v-if="loading" class="bookaro-loading-shell mt-6">
      <div class="bookaro-skeleton-card">
        <div class="bookaro-skeleton bookaro-skeleton-line is-wide"></div>
        <div class="bookaro-skeleton bookaro-skeleton-line is-medium"></div>
        <div class="bookaro-skeleton bookaro-skeleton-line is-short"></div>
      </div>
      <div class="bookaro-skeleton-card">
        <div class="bookaro-skeleton bookaro-skeleton-line is-wide"></div>
        <div class="bookaro-skeleton bookaro-skeleton-line"></div>
        <div class="bookaro-skeleton bookaro-skeleton-line"></div>
        <div class="bookaro-skeleton bookaro-skeleton-line is-medium"></div>
      </div>
    </div>

    <template v-else>
    <div v-if="!filtersOpen" class="calendar-filters-summary">
      <span class="calendar-filters-summary__text">{{ filtersSummaryText }}</span>
      <button class="calendar-filters-summary__pill" type="button" @click="toggleFilters">
        {{ i18n.filters_label }}
      </button>
    </div>

    <div v-show="filtersOpen" class="calendar-filters-panel bookaro-card bookaro-card__body">
      <div class="calendar-filters-section">
        <div class="calendar-filters-section__title">
          {{ i18n.filters_label }}
        </div>
        <div class="calendar-filters-grid">
          <div class="calendar-filters-field">
            <label class="calendar-filters-label">{{ i18n.start_date }}</label>
            <input
              v-model="rangeFrom"
              type="date"
              class="calendar-filters-input"
            />
          </div>
          <div class="calendar-filters-field">
            <label class="calendar-filters-label">{{ i18n.end_date }}</label>
            <input
              v-model="rangeTo"
              type="date"
              class="calendar-filters-input"
            />
          </div>
          <div class="calendar-filters-action">
            <button
              @click="applyRange"
              class="calendar-primary-btn bookaro-btn bookaro-btn--primary"
              type="button"
            >
              {{ i18n.apply }}
            </button>
          </div>
        </div>
      </div>

    </div>

    <div v-if="viewMode === 'month'" class="calendar-panel">
      <div class="month-grid calendar-month-grid">
        <div
          v-for="(label, idx) in weekdayLabels"
          :key="`weekday-${idx}`"
          class="dow"
        >
          {{ label }}
        </div>
        <button
          v-for="day in calendarDays"
          :key="day.format('YYYY-MM-DD')"
          class="date-pill"
          :class="{
            selected: selectedDate === day.format('YYYY-MM-DD'),
            other: !day.isSame(currentMonth, 'month'),
            'has-bookings': bookingsByDate[day.format('YYYY-MM-DD')]
          }"
          type="button"
          @click="selectDay(day)"
          @keydown.enter.prevent="selectDay(day)"
          @keydown.space.prevent="selectDay(day)"
        >
          {{ day.date() }}
          <span v-if="bookingsByDate[day.format('YYYY-MM-DD')]" class="slot-count">
            {{ bookingsByDate[day.format('YYYY-MM-DD')].length }}
          </span>
        </button>
      </div>
    </div>

    <div v-else class="week-grid">
      <div v-for="day in weekDays" :key="day.format('YYYY-MM-DD')" class="week-day">
        <div class="week-day-header">
          <div class="week-day-name">{{ weekdayLabels[day.day()] }}</div>
          <div class="week-day-date">{{ day.format(dateFormat) }}</div>
        </div>
        <div v-if="!bookingsByDate[day.format('YYYY-MM-DD')]" class="week-empty">
          {{ i18n.no_bookings }}
        </div>
        <div v-else class="week-bookings">
          <div
            v-for="booking in bookingsByDate[day.format('YYYY-MM-DD')]"
            :key="booking.id"
            class="week-booking"
          >
            <div class="week-booking-top">
              <div class="week-booking-title">
                <span class="slot-pill slot-pill--static">{{ formatTimeRange(booking) }}</span>
                <span class="week-booking-service">- {{ booking.service_label || i18n.placeholder_dash }}</span>
              </div>
              <div class="week-booking-top-actions">
                <span class="bookaro-status-chip" :data-status="booking.status">
                  {{ statusLabel(booking.status) }}
                </span>
                <button
                  class="week-booking-menu-toggle"
                  type="button"
                  :aria-expanded="openMenuId === booking.id ? 'true' : 'false'"
                  aria-haspopup="menu"
                  @click="toggleMenu(booking.id, $event)"
                >
                  &bull;&bull;&bull;
                </button>
              </div>
            </div>
            <div class="week-booking-meta">
              {{ booking.provider_name || i18n.provider_name || i18n.placeholder_dash }}
              <span v-if="booking.provider_email">({{ booking.provider_email }})</span>
            </div>
            <div class="week-booking-details">
              <span class="week-booking-detail">
                {{ i18n.price_label }}: {{ booking.price_formatted || formatPrice(booking.price) }}
              </span>
              <span v-if="booking.provider_phone" class="week-booking-detail">
                {{ i18n.phone }}: {{ booking.provider_phone }}
              </span>
            </div>
            <div
              v-if="openMenuId === booking.id"
              class="week-booking-menu"
              role="menu"
              @click.stop
            >
              <button
                class="week-booking-menu__item"
                type="button"
                @click="openMenuId = 0; viewBooking(booking)"
              >
                <ActionIcon name="view" />
                <span>{{ i18n.view }}</span>
              </button>
              <button
                v-if="canCancel(booking)"
                class="week-booking-menu__item"
                type="button"
                @click="openMenuId = 0; cancel(booking)"
              >
                <ActionIcon name="cancel" />
                <span>{{ i18n.cancel }}</span>
              </button>
              <button
                v-if="canReschedule(booking)"
                class="week-booking-menu__item"
                type="button"
                @click="openMenuId = 0; openReschedule(booking)"
              >
                <ActionIcon name="reschedule" />
                <span>{{ i18n.reschedule }}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <CancelBookingModal
      :show="showCancelModal"
      :booking="cancelBookingTarget"
      :i18n="i18n"
      @close="closeCancelModal"
      @cancelled="handleCancelled"
    />

    <RescheduleModal
      :show="showRescheduleModal"
      :booking="rescheduleBooking"
      :i18n="i18n"
      @close="closeRescheduleModal"
      @rescheduled="handleRescheduled"
    />

    <div v-if="showDayModal" class="calendar-day-modal">
      <div class="calendar-day-modal__overlay" @click="closeDayModal"></div>
      <div class="calendar-day-modal__panel bookaro-card" role="dialog" aria-modal="true">
        <div class="calendar-day-modal__header">
          <div>
            <div class="calendar-day-modal__title">
              {{ i18n.calendar_day_label || i18n.calendar_tab }} {{ formatDateOnly(selectedDate) }}
            </div>
            <div class="calendar-day-modal__meta">
              {{ i18n.total_bookings_label }}: {{ dayBookings.length }}
            </div>
          </div>
          <button class="calendar-day-modal__close" type="button" @click="closeDayModal" :aria-label="i18n.close">
            &times;
          </button>
        </div>
        <div class="calendar-day-modal__body">
          <div v-if="!dayBookings.length" class="text-sm text-gray-500">
            {{ i18n.no_bookings }}
          </div>
          <div v-else class="space-y-3">
            <div
              v-for="booking in dayBookings"
              :key="booking.id"
              class="bookaro-card bookaro-card__body"
            >
              <div class="flex flex-wrap items-center justify-between gap-2">
                <div class="text-sm font-semibold text-gray-900">
                  {{ formatDate(booking.booking_date) }} &bull; {{ booking.service_label || i18n.placeholder_dash }}
                </div>
                <span
                  class="bookaro-status-chip"
                  :data-status="booking.status"
                >
                  {{ statusLabel(booking.status) }}
                </span>
              </div>
              <div class="text-xs text-gray-600 mt-1">
                {{ booking.provider_name || i18n.provider_name || i18n.placeholder_dash }}
                <span v-if="booking.provider_email">({{ booking.provider_email }})</span>
              </div>
              <div class="week-booking-actions mt-2">
                  <button
                    @click="viewBooking(booking)"
                    class="bookaro-btn bookaro-btn--action-view bookaro-btn--sm"
                  >
                    <ActionIcon name="view" />
                    <span>{{ i18n.view }}</span>
                  </button>
                  <button
                    v-if="canCancel(booking)"
                    @click="cancel(booking)"
                    class="bookaro-btn bookaro-btn--action-cancel bookaro-btn--sm"
                  >
                    <ActionIcon name="cancel" />
                    <span>{{ i18n.cancel }}</span>
                  </button>
                  <button
                    v-if="canReschedule(booking)"
                    @click="openReschedule(booking)"
                    class="bookaro-btn bookaro-btn--action-reschedule bookaro-btn--sm"
                  >
                    <ActionIcon name="reschedule" />
                    <span>{{ i18n.reschedule }}</span>
                  </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </template>
  </div>
</template>

<script>
import { restRequest } from '@bookaro-free/js/rest';
import CancelBookingModal from '@bookaro-free/components/modals/CancelBookingModal.vue';
import RescheduleModal from '@bookaro-free/components/modals/RescheduleModal.vue';
import ActionIcon from '@bookaro-free/components/ActionIcon.vue';

export default {
  name: 'OwnerCalendarView',
  components: { CancelBookingModal, RescheduleModal, ActionIcon },
  props: {
    i18n: { type: Object, required: true }
  },
  data() {
    const today = window.dayjs();
    const startOfMonth = today.startOf('month');
    const endOfMonth = today.endOf('month');
    return {
      viewMode: 'month',
      filtersOpen: false,
      currentDate: today,
      rangeFrom: startOfMonth.format('YYYY-MM-DD'),
      rangeTo: endOfMonth.format('YYYY-MM-DD'),
      loading: false,
      allBookings: [],
      selectedDate: '',
      showDayModal: false,
      showCancelModal: false,
      cancelBookingTarget: null,
      showRescheduleModal: false,
      rescheduleBooking: null,
      openMenuId: 0
    };
  },
  computed: {
    dateFormat() {
      return this.i18n.date_format;
    },
    weekdayLabels() {
      return Array.isArray(this.i18n.weekdays_short) ? this.i18n.weekdays_short : [];
    },
    currentMonth() {
      return this.currentDate.startOf('month');
    },
    monthLabel() {
      const idx = this.currentMonth.month();
      const fullMonth = Array.isArray(this.i18n.months) ? this.i18n.months[idx] : '';
      const shortMonth = Array.isArray(this.i18n.months_short) ? this.i18n.months_short[idx] : '';
      const year = this.currentMonth.format('YYYY');
      const format = this.i18n.month_year_format || 'MMMM YYYY';
      let label = format;
      if (format.includes('MMMM')) {
        label = label.replace('MMMM', fullMonth || '');
      } else if (format.includes('MMM')) {
        label = label.replace('MMM', shortMonth || '');
      }
      label = label.replace('YYYY', year);
      return label.trim();
    },
    weekLabel() {
      const start = this.currentDate.startOf('week');
      const end = this.currentDate.endOf('week');
      return `${start.format(this.dateFormat)} - ${end.format(this.dateFormat)}`;
    },
    periodLabel() {
      return this.viewMode === 'week' ? this.weekLabel : this.monthLabel;
    },
    viewModeLabel() {
      return this.viewMode === 'week'
        ? this.i18n.calendar_view_week
        : this.i18n.calendar_view_month;
    },
    filtersSummaryRange() {
      if (!this.rangeFrom || !this.rangeTo) {
        return this.periodLabel;
      }
      const from = window.dayjs(this.rangeFrom);
      const to = window.dayjs(this.rangeTo);
      if (!from.isValid() || !to.isValid()) {
        return this.periodLabel;
      }
      const format = this.i18n.date_format || 'YYYY-MM-DD';
      return `${from.format(format)} - ${to.format(format)}`;
    },
    filtersSummaryText() {
      const viewLabel = this.viewModeLabel;
      const range = this.filtersSummaryRange;
      const template = this.i18n.filters_summary || '';
      if (!template) {
        return '';
      }
      return template
        .replace('{range}', range)
        .replace('{view}', viewLabel);
    },
    calendarDays() {
      const start = this.currentMonth.startOf('month').startOf('week');
      const end = this.currentMonth.endOf('month').endOf('week');
      const days = [];
      let cursor = start.clone();
      while (cursor.isBefore(end) || cursor.isSame(end, 'day')) {
        days.push(cursor.clone());
        cursor = cursor.add(1, 'day');
      }
      return days;
    },
    weekDays() {
      const start = this.currentDate.startOf('week');
      const end = this.currentDate.endOf('week');
      const days = [];
      let cursor = start.clone();
      while (cursor.isBefore(end) || cursor.isSame(end, 'day')) {
        days.push(cursor.clone());
        cursor = cursor.add(1, 'day');
      }
      return days;
    },
    filteredBookings() {
      if (!this.rangeFrom || !this.rangeTo) {
        return this.allBookings;
      }
      const from = window.dayjs(this.rangeFrom);
      const to = window.dayjs(this.rangeTo);
      if (!from.isValid() || !to.isValid()) {
        return this.allBookings;
      }
      const startDay = from.startOf('day');
      const endDay = to.endOf('day');
      return this.allBookings.filter((booking) => {
        const start = window.dayjs(booking.booking_date);
        if (!start.isValid()) {
          return false;
        }
        const end = booking.booking_date_to ? window.dayjs(booking.booking_date_to) : start;
        if (!end.isValid()) {
          return false;
        }
        if (end.isBefore(startDay, 'day')) {
          return false;
        }
        if (start.isAfter(endDay, 'day')) {
          return false;
        }
        return true;
      });
    },
    bookingsByDate() {
      const map = {};
      this.filteredBookings.forEach((booking) => {
        const start = window.dayjs(booking.booking_date);
        if (!start.isValid()) {
          return;
        }
        const end = booking.booking_date_to ? window.dayjs(booking.booking_date_to) : start;
        if (!end.isValid()) {
          return;
        }
        const startDay = start.startOf('day');
        const endDay = end.startOf('day');
        let cursor = startDay.clone();
        let safety = 0;
        while (cursor.isBefore(endDay, 'day') || cursor.isSame(endDay, 'day')) {
          const dateKey = cursor.format('YYYY-MM-DD');
          if (!map[dateKey]) {
            map[dateKey] = [];
          }
          map[dateKey].push(booking);
          cursor = cursor.add(1, 'day');
          safety += 1;
          if (safety > 370) {
            break;
          }
        }
      });
      return map;
    },
    dayBookings() {
      if (!this.selectedDate) {
        return [];
      }
      const rows = this.bookingsByDate[this.selectedDate] || [];
      return [...rows].sort((a, b) => {
        if (a.booking_date < b.booking_date) return -1;
        if (a.booking_date > b.booking_date) return 1;
        return 0;
      });
    }
  },
  methods: {
    emitNavCounts() {
      const pendingCount = this.allBookings.filter((booking) => booking.status === 'pending').length;
      this.$emit('nav-counts', { bookings: { pending: pendingCount } });
    },
    toggleFilters() {
      this.filtersOpen = !this.filtersOpen;
    },
    setView(mode) {
      if (mode === this.viewMode) {
        return;
      }
      this.viewMode = mode;
      this.syncRangeToCurrent();
      this.clearSelectedDate();
      this.fetchBookings();
    },
    prevPeriod() {
      this.currentDate = this.viewMode === 'week'
        ? this.currentDate.subtract(1, 'week')
        : this.currentDate.subtract(1, 'month');
      this.syncRangeToCurrent();
      if (this.viewMode === 'month') {
        this.clearSelectedDate();
      }
      this.fetchBookings();
    },
    nextPeriod() {
      this.currentDate = this.viewMode === 'week'
        ? this.currentDate.add(1, 'week')
        : this.currentDate.add(1, 'month');
      this.syncRangeToCurrent();
      if (this.viewMode === 'month') {
        this.clearSelectedDate();
      }
      this.fetchBookings();
    },
    syncRangeToCurrent() {
      if (this.viewMode === 'week') {
        this.rangeFrom = this.currentDate.startOf('week').format('YYYY-MM-DD');
        this.rangeTo = this.currentDate.endOf('week').format('YYYY-MM-DD');
        return;
      }
      this.rangeFrom = this.currentDate.startOf('month').format('YYYY-MM-DD');
      this.rangeTo = this.currentDate.endOf('month').format('YYYY-MM-DD');
    },
    applyRange() {
      if (!this.rangeFrom || !this.rangeTo) {
        this.$emit('open-error', this.i18n.generic_error);
        return;
      }
      const from = window.dayjs(this.rangeFrom);
      const to = window.dayjs(this.rangeTo);
      if (!from.isValid() || !to.isValid() || to.isBefore(from, 'day')) {
        this.$emit('open-error', this.i18n.generic_error);
        return;
      }
      this.currentDate = from;
      if (this.viewMode === 'month') {
        this.clearSelectedDate();
      }
      this.fetchBookings();
    },
    selectDay(day) {
      const dateKey = day.format('YYYY-MM-DD');
      if (this.selectedDate === dateKey) {
        this.closeDayModal();
        return;
      }
      if (!day.isSame(this.currentMonth, 'month')) {
        this.currentDate = day.clone();
        this.syncRangeToCurrent();
      }
      this.selectedDate = dateKey;
      this.showDayModal = true;
    },
    clearSelectedDate() {
      this.selectedDate = '';
      this.showDayModal = false;
    },
    closeDayModal() {
      this.clearSelectedDate();
    },
    fetchBookings() {
      this.loading = true;
      restRequest('bookaro/v1/bookings/owner')
        .then((res) => {
          const rows = Array.isArray(res) ? res : [];
          this.allBookings = rows.map((booking) => ({
            ...booking,
            provider_name: booking.provider_name || '',
            provider_email: booking.provider_email || '',
            provider_phone: booking.provider_phone || '',
            cancel_reason: booking.cancel_reason || ''
          }));
          this.emitNavCounts();
          this.openMenuId = 0;
        })
        .catch((err) => {
          this.$emit('open-error', err?.message || this.i18n.fetch_error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    toggleMenu(id, event) {
      if (event && typeof event.stopPropagation === 'function') {
        event.stopPropagation();
      }
      this.openMenuId = this.openMenuId === id ? 0 : id;
    },
    closeMenu() {
      this.openMenuId = 0;
    },
    onDocumentClick(event) {
      if (!this.openMenuId) {
        return;
      }
      const target = event?.target;
      if (!target || typeof target.closest !== 'function') {
        this.openMenuId = 0;
        return;
      }
      if (target.closest('.week-booking-menu') || target.closest('.week-booking-menu-toggle')) {
        return;
      }
      this.openMenuId = 0;
    },
    openReschedule(booking) {
      this.rescheduleBooking = booking;
      this.showRescheduleModal = true;
    },
    cancel(booking) {
      this.cancelBookingTarget = booking;
      this.showCancelModal = true;
    },
    closeCancelModal() {
      this.showCancelModal = false;
      this.cancelBookingTarget = null;
    },
    closeRescheduleModal() {
      this.showRescheduleModal = false;
      this.rescheduleBooking = null;
    },
    handleCancelled() {
      this.fetchBookings();
    },
    canCancel(booking) {
      const status = booking?.status || '';
      return !['cancelled', 'rejected', 'completed', 'no_show'].includes(status);
    },
    viewBooking(booking) {
      this.$emit('open-details', booking);
    },
    handleRescheduled() {
      this.fetchBookings();
    },
    canReschedule(booking) {
      return ['pending', 'approved'].includes(booking?.status || '');
    },
    statusLabel(status) {
      return this.i18n[status] || this.i18n.status_unknown || '';
    },
    formatPrice(value) {
      const settings = window.BookaroData?.currency || {};
      const num = Number(value);
      if (Number.isNaN(num)) {
        return '';
      }
      const decimals = Number.isInteger(settings.decimals) ? settings.decimals : 2;
      const decSep = settings.decimal_separator || '.';
      const thouSep = settings.thousand_separator || ',';
      const symbol = settings.symbol || '';
      const format = settings.format || '%1$s%2$s';
      const fixed = num.toFixed(decimals);
      const parts = fixed.split('.');
      const intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thouSep);
      const number = parts[1] !== undefined ? intPart + decSep + parts[1] : intPart;
      return format.replace('%1$s', symbol).replace('%2$s', number);
    },
    formatDate(dateStr) {
      const format = this.i18n.date_time_format;
      return window.dayjs(dateStr).format(format);
    },
    formatDateOnly(dateStr) {
      const format = this.i18n.date_format;
      return window.dayjs(dateStr).format(format);
    },
    formatTimeRange(booking) {
      const start = window.dayjs(booking.booking_date);
      if (!start.isValid()) {
        return '';
      }
      const end = booking.booking_date_to ? window.dayjs(booking.booking_date_to) : null;
      const timeFormat = this.i18n.time_format;
      const dateFormat = this.i18n.date_format;
      const startTime = start.format(timeFormat);
      if (!end || !end.isValid() || end.isSame(start, 'day')) {
        if (end && end.isValid()) {
          const endTime = end.format(timeFormat);
          if (endTime !== startTime) {
            return `${startTime} - ${endTime}`;
          }
        }
        return startTime;
      }
      return `${start.format(dateFormat)} ${startTime} - ${end.format(dateFormat)} ${end.format(timeFormat)}`;
    },
  },
  mounted() {
    this.fetchBookings();
    document.addEventListener('click', this.onDocumentClick);
  },
  beforeUnmount() {
    document.removeEventListener('click', this.onDocumentClick);
  }
};
</script>

<style scoped>
.calendar-panel {
  background: var(--bookaro-dashboard-surface);
  border: 1px solid var(--bookaro-dashboard-border);
  border-radius: var(--bookaro-dashboard-radius);
  padding: 12px;
  box-shadow: var(--bookaro-dashboard-shadow);
}

.calendar-month-grid {
  margin-bottom: 0;
}

.calendar-month-grid .date-pill {
  min-height: 70px;
}

.calendar-month-grid .date-pill.has-bookings:not(.selected) {
  border: 1.5px solid var(--bookaro-dashboard-accent, #3b82f6);
  background: rgba(59, 130, 246, 0.06);
}

.calendar-month-grid .date-pill .slot-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--bookaro-dashboard-accent, #3b82f6);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}
.calendar-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: var(--bookaro-dashboard-card-pad);
}
.calendar-header__left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.calendar-header__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.calendar-period__label {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}
.calendar-period__meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}
.cal-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.cal-nav-btn:hover {
  border-color: #cbd5f5;
  background: #f8fafc;
}
.filters-toggle {
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  transition: all 0.15s ease;
}
.filters-toggle:hover {
  border-color: #cbd5f5;
  background: #f8fafc;
}
.calendar-filters-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 12px;
  color: #6b7280;
}
.calendar-filters-summary__pill {
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #111827;
}
.calendar-filters-panel {
  margin-bottom: 18px;
  padding: var(--bookaro-dashboard-card-pad);
  display: grid;
  gap: 16px;
}
.calendar-filters-section__title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
}
.calendar-filters-help {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 12px;
}
.calendar-filters-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
}
.calendar-filters-field {
  display: grid;
  gap: 6px;
}
.calendar-filters-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}
.calendar-filters-input {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  background: #fff;
}
.calendar-filters-action {
  display: flex;
  align-items: flex-end;
}
.calendar-primary-btn {
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.calendar-primary-btn:disabled {
  opacity: 0.6;
}
.calendar-filters-group {
  border: 1px solid var(--bookaro-dashboard-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--bookaro-dashboard-surface);
  display: grid;
  gap: 10px;
}
.calendar-filters-group__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bookaro-dashboard-text);
}
.calendar-filters-message {
  font-size: 12px;
  margin-top: 6px;
}
.calendar-filters-message.is-success {
  color: #15803d;
}
.calendar-filters-message.is-error {
  color: #dc2626;
}
.slot-pill--static {
  flex: 0 0 auto;
  width: auto;
  padding: 0.25rem 0.5rem;
  font-size: 0.65rem;
  border-radius: 999px;
}
.calendar-view-toggle {
  display: inline-flex;
  border: 1px solid var(--bookaro-dashboard-border);
  border-radius: 999px;
  overflow: hidden;
}
.toggle-btn {
  padding: 6px 12px;
  font-size: 12px;
  background: var(--bookaro-dashboard-surface);
  color: var(--bookaro-dashboard-text);
  border-right: 1px solid var(--bookaro-dashboard-border);
}
.toggle-btn:last-child {
  border-right: 0;
}
.toggle-btn.is-active {
  background: var(--bookaro-dashboard-accent);
  color: #fff;
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.week-day {
  background: var(--bookaro-dashboard-surface);
  border: 1px solid var(--bookaro-dashboard-border);
  border-radius: 12px;
  padding: 8px;
}
.week-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--bookaro-dashboard-muted);
  margin-bottom: 8px;
}
.week-bookings {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.week-booking {
  border: 1px solid var(--bookaro-dashboard-border);
  border-radius: 10px;
  padding: 6px;
  background: #f8fafc;
  position: relative;
}
.week-booking-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.week-booking-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--bookaro-dashboard-text);
}

.week-booking-service {
  font-size: 11px;
  font-weight: 600;
  color: var(--bookaro-dashboard-text);
}

.week-booking-meta {
  font-size: 10.5px;
  color: var(--bookaro-dashboard-muted);
  margin-top: 2px;
}
.week-booking-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-size: 10.5px;
  color: var(--bookaro-dashboard-muted);
  margin-top: 4px;
}
.week-booking-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.week-booking-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.week-booking-menu-toggle {
  border: 1px solid var(--bookaro-dashboard-border);
  background: #fff;
  color: var(--bookaro-dashboard-muted);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.week-booking-menu-toggle:hover {
  background: #f1f5f9;
  border-color: #cbd5f5;
  color: var(--bookaro-dashboard-text);
}
.week-booking-menu {
  position: absolute;
  top: 34px;
  right: 6px;
  z-index: 10;
  min-width: 170px;
  max-width: 240px;
  background: #fff;
  border: 1px solid var(--bookaro-dashboard-border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  display: grid;
  gap: 4px;
}
.week-booking-menu__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--bookaro-dashboard-text);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.week-booking-menu__item:hover:not(:disabled) {
  background: #f1f5f9;
}
.week-booking-menu__item:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.week-empty {
  font-size: 12px;
  color: var(--bookaro-dashboard-muted);
  padding: 6px 0;
}

.calendar-day-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12vh 0 6vh;
}

.calendar-day-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.calendar-day-modal__panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 720px);
  max-height: 90vh;
  max-height: 90dvh;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.calendar-day-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.calendar-day-modal__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
}

.calendar-day-modal__meta {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.15rem;
}

.calendar-day-modal__close {
  border: none;
  background: #f1f5f9;
  color: #0f172a;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.calendar-day-modal__close:hover {
  background: #e2e8f0;
}

.calendar-day-modal__body {
  overflow: visible;
  padding-right: 4px;
  max-height: none;
}

@media (max-width: 768px) {
  .calendar-header {
    align-items: flex-start;
  }
  .calendar-header__left {
    width: 100%;
    justify-content: space-between;
  }
  .calendar-header__right {
    width: 100%;
    justify-content: space-between;
  }
  .calendar-filters-grid {
    grid-template-columns: 1fr;
  }
  .calendar-filters-action {
    justify-content: flex-start;
  }
}
</style>
