<script setup>
import {onMounted, ref, computed, watch} from 'vue';
import {useAuthStore} from '@/stores/Auth';
import {useRoute, useRouter} from 'vue-router';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import dejavuFont from '@/fonts/DejaVuSans-normal.js';

const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();
const planId = route.params.id;
const planInfo = ref(null);
const errorMessage = ref(null);
const currentPage = ref(0);
const districtFilter = ref(''); // Фильтр по районам
const freqFilter = ref('');
const selectedRequestLabel = ref('');
const requestsList = ref([]);
const selectedRequestId = ref(null);
const showSignModal = ref(false);
const selectedMonth = ref(null);
const selectedReqId = ref(null);
const managers = ref([])
const managerFilter = ref(null)
// Если на странице есть параметр расписания
const scheduleId = route.params.id;

// Список подписей (месяц/год) по расписанию
const signatures = ref([]);
// Множество строк "YYYY-M" подписанных периодов
const signedPeriods = computed(() => new Set(signatures.value.map(s => `${s.year}-${s.month}`)));

function isSigned(dateStr) {
  const d = new Date(dateStr);
  const key = `${d.getFullYear()}-${d.getMonth() + 1}`;
  return signedPeriods.value.has(key);
}

const freqOptions = [
  {value: '', label: 'Все частоты'},
  {value: 1, label: 'Ежемесячно'},
  {value: 2, label: 'Ежеквартально'},
];

const monthNamesMap = {
  Январь: '01',
  Февраль: '02',
  Март: '03',
  Апрель: '04',
  Май: '05',
  Июнь: '06',
  Июль: '07',
  Август: '08',
  Сентябрь: '09',
  Октябрь: '10',
  Ноябрь: '11',
  Декабрь: '12',
};

const currentMonth = computed(() => {
  const m = visibleCalendar.value[0]?.month;
  return parseInt(monthNamesMap[m], 10);
});

function onDownloadExcel() {
  const month = currentMonth.value;
  if (!month) {
    alert('Не удалось определить месяц');
    return;
  }
  const request_id = selectedRequestId.value != null && selectedRequestId.value !== '' ? selectedRequestId.value : '';

  authStore.downloadScheduleExcel(planId, {
    month: month,
    district: districtFilter.value,
    freq: freqFilter.value,
    request_id: request_id,
  });
}

const selectedRequest = computed(() => {
  return requestsList.value.find(r => r.id === selectedRequestId.value) || null;
});

onMounted(async () => {
  const {response: reqR, requestError} = await authStore.getRequests();
  if (reqR) {
    requestsList.value = reqR.data;
  } else {
    console.error('Ошибка загрузки заявок:', requestError);
  }

  const {response: mgrRes, error: mgrErr} = await authStore.getRefManagers('subgroup')
  if (mgrRes) {
    managers.value = mgrRes.data
  } else {
    console.error('Не удалось загрузить менеджеров:', mgrErr)
  }

});

watch(selectedRequestId, async (newReq) => {
  // если заявка не выбрана — просто очищаем
  if (!newReq) {
    planInfo.value = null
    return
  }

  // показываем загрузку, сбрасываем ошибки
  errorMessage.value = null

  // параметры для API
  const params = {request_id: newReq}
  // (можно также передать districtFilter, freqFilter, если нужно)

  // запросим календарь по выбранной заявке
  const {response, error} = await authStore.getCalendarView(planId, params)
  if (response) {
    planInfo.value = response.data

    // текущее отображение страницы
    currentPage.value = findFirstMonthWithWork()

    // подписи, если нужны
    signatures.value = response.data.signed_requests || []
  } else {
    console.error('Ошибка при загрузке календаря:', error)
    errorMessage.value = 'Не удалось загрузить календарь для этой заявки'
  }
})

const totalPages = computed(() => {
  if (!planInfo.value?.calendar) return 0;
  return Math.ceil(planInfo.value.calendar.length);
});

function findFirstMonthWithWork() {
  if (!planInfo.value) return 0;
  // Перебираем все месяцы календаря
  for (let i = 0; i < planInfo.value.calendar.length; i++) {
    const month = planInfo.value.calendar[i];
    const monthNum = Number(monthNamesMap[month.month]);
    // Ищем хотя бы одну точку, у которой есть план в этом месяце
    const hasWork = planInfo.value.points.some(region =>
        region.districts.some(district =>
            district.points.some(point =>
                // plans теперь уже отфильтрованы по schedule и по request_id
                point.plans.some(plan => {
                  const d = new Date(plan.day);
                  return d.getMonth() + 1 === monthNum;
                })
            )
        )
    );
    if (hasWork) {
      return i;
    }
  }
  return 0;
}

const visibleCalendar = computed(() => {
  if (!planInfo.value?.calendar) return [];
  const start = currentPage.value * 1;
  return planInfo.value.calendar.slice(start, start + 1);
});
// ✅ Исправляем даты здесь, учитывая UTC
const getLocalDate = (utcDateString) => {
  const date = new Date(utcDateString);
  return date.toLocaleDateString('sv-SE'); // Возвращает YYYY-MM-DD
};

// Список районов для фильтра
const districtOptions = computed(() => {
  if (!planInfo.value) return [];
  const districtsSet = new Set();
  planInfo.value.points.forEach((region) => {
    region.districts.forEach((district) => {
      districtsSet.add(district.name);
    });
  });
  // return Array.from(districtsSet);
  return Array.from(districtsSet).sort((a, b) => a.localeCompare(b, 'ru'));
});

// Опции месяцев для модалки подписания
const monthOptions = computed(() => {
  if (!planInfo.value?.calendar) return [];
  return planInfo.value.calendar.map((m) => ({
    value: {month: parseInt(monthNamesMap[m.month], 10), year: planInfo.value.year},
    label: `${m.month} ${planInfo.value.year}`,
  }));
});

// Функция подписания
const signPlan = async () => {
  if (!selectedMonth.value || !selectedReqId.value) {
    alert('Выберите месяц и заявку');
    return;
  }
  try {
    await authStore.signPlan({
      request_id: selectedReqId.value,
      month: selectedMonth.value.month,
      year: selectedMonth.value.year,
    });
    // Обновляем данные после подписания
    const {response} = await authStore.getCalendarView(planId, {request_id: selectedRequestId.value});

    if (response) {
      planInfo.value = response.data;
      signatures.value = response.data.signed_requests || [];
      showSignModal.value = false;
      errorMessage.value = null;
    } else {
      errorMessage.value = 'Не удалось обновить данные после подписания';
    }
  } catch (e) {
    console.error('Ошибка при подписании:', e);
    errorMessage.value = e.response?.data?.message || 'Ошибка при подписании';
  }
};

// Фильтрация точек по району
const filteredPoints = computed(() => {
  if (!planInfo.value) return []

  return planInfo.value.points
      .flatMap(region =>
          region.districts
              .filter(d => !districtFilter.value || d.name === districtFilter.value)
              .flatMap(district =>
                  district.points
                      .filter(point => {
                        // ваши существующие фильтры по freq и request
                        if (freqFilter.value && point.monitoring_freq !== freqFilter.value) return false
                        if (selectedRequestId.value && !point.requests.some(r => r.id === selectedRequestId.value)) return false

                        // новый фильтр: у точки должен быть хотя бы один план с таким менеджером
                        if (managerFilter.value) {
                          // показываем точку, если её «родной» менеджер совпал
                          return Number(point.subgroup_manager_id) === Number(managerFilter.value)
                        }

                        return true
                      })
                      .map(point => ({point, district: district.name}))
              )
      )
      .sort((a, b) => (Number(a.point.record_number) || 0) - (Number(b.point.record_number) || 0))
})

// 📊 Предрасчёт матрицы утро/день на каждый день видимого месяца
const calendarMatrix = computed(() => {
  if (!planInfo.value?.calendar) return [];
  // visibleCalendar — массив из одного месяца (slice по currentPage)
  return visibleCalendar.value.map((month) => {
    const days = month.days;
    const rows = filteredPoints.value.map(({point, district}) => {
      // для каждой точки собираем флаги
      const flags = days.map((day) => {
        const date = fullDate(month, day);
        return {
          morning: hasMorning(point, date),
          afternoon: hasAfternoon(point, date),
        };
      });
      return {id: point.id, point, district, flags};
    });
    return {month: month.month, days, rows};
  });
});

const clicker = (month, day, point_id) => {
  router.push({
    name: 'pointPlanCreate',
    query: {
      date: `${planInfo.value.year}-${monthNamesMap[month]}-${String(day).padStart(2, '0')}`,
      point_id,
      schedule_id: planId,
      district: districtFilter.value,
    },
  });
};

const getPlanForDate = (point, fullDate) => {
  if (!point?.plans || !fullDate) return undefined;
  return point.plans.find(plan => {
    // сначала дата должна совпасть
    const planDate = getLocalDate(plan.day);
    if (planDate !== fullDate) return false;
    // если есть выбранная заявка — только её планы
    if (selectedRequestId.value) {
      return Number(plan.request_id) === Number(selectedRequestId.value);
    }
    // если фильтр по заявке снят — показываем все планы
    return true;
  });
};

const getCellClass = (point, fullDate) => {
  const plan = getPlanForDate(point, fullDate);
  if (!plan) return '';
  if (plan.timeStart === '09:00') return 'morning';
  if (plan.timeStart === '14:00') return 'evening';
  return '';
};

const hasMorning = (point, date) => {
  const plan = getPlanForDate(point, date);
  return plan?.timeStart === '08:00';
};

const hasAfternoon = (point, date) => {
  const plan = getPlanForDate(point, date);
  return plan?.timeStart === '13:00';
};

const fullDate = (month, day) => {
  return `${planInfo.value.year}-${monthNamesMap[month.month]}-${String(day).padStart(2, '0')}`;
};

// вычисляемый булев, подписан ли текущий отображаемый месяц у выбранной заявки
const isCurrentPeriodSigned = computed(() => {
  if (!planInfo.value || !selectedRequestId.value || !visibleCalendar.value.length) {
    return false;
  }
  const year = planInfo.value.year;
  const monthName = visibleCalendar.value[0].month;           // русское название
  const month = parseInt(monthNamesMap[monthName], 10);        // номер месяца
  return signedPeriods.value.has(`${year}-${month}`);
});


const fileName = computed(() => {
  // Если выбран район — выводим "План-график <Район>", иначе "План-график Оренбургская область"
  let name = districtFilter.value && districtFilter.value.trim()
      ? `План-график ${districtFilter.value.trim()}`
      : 'План-график Оренбургская область';

  // Можно добавить год (или месяц, если нужно) для уникальности:
  if (planInfo.value?.year) {
    name += `_${planInfo.value.year}`;
  }
  return name + '.pdf';
});

const generateSchedulePdf = () => {
  if (!planInfo.value?.calendar?.length) return;

  let approverPosition = 'Генеральный директор';
  let approverName = 'Иванов Дмитрий Александрович';

  if (districtFilter.value) {
    // ищем любую точку из выбранного района
    const anyPointWrap = filteredPoints.value.find(p => p.district === districtFilter.value);
    if (anyPointWrap) {
      const mgrId = Number(anyPointWrap.point.subgroup_manager_id);
      const mgr = managers.value.find(m => Number(m.id) === mgrId);
      if (mgr) {
        approverPosition = 'Районный менеджер';
        approverName = mgr.fullName || '';
      }
    }
  }
  const doc = new jsPDF({orientation: 'landscape', unit: 'mm', format: 'a4'});

  // подключаем кириллический шрифт
  doc.addFileToVFS('DejaVuSans.ttf', dejavuFont);
  doc.addFont('DejaVuSans.ttf', 'DejaVuSans', 'normal');
  doc.setFont('DejaVuSans');
  doc.setFontSize(10);

  // Формируем колонки по дням
  const dateColumns = visibleCalendar.value.flatMap((month) =>
      month.days.map((day) => ({header: `${day}.${monthNamesMap[month.month]}`, dataKey: `d_${month.month}_${day}`}))
  );
  const staticColumns = [
    {header: 'Номер ПУИДД', dataKey: 'code'},
    {header: 'Название а/д', dataKey: 'name'},
    {header: 'Координаты', dataKey: 'coords'}
  ];
  const dateKeys = dateColumns.map(col => col.dataKey);

  // Группируем точки по районам
  const grouped = {};
  filteredPoints.value.forEach(({point, district}) => {
    if (!grouped[district]) grouped[district] = [];
    grouped[district].push(point);
  });

  // Собираем тело таблицы с заголовками районов
  const body = [];
  Object.keys(grouped).sort().forEach(district => {
    // строка-заголовок района
    const headerRow = {isGroup: true, name: `${district}`};
    dateKeys.forEach(key => headerRow[key] = '');
    headerRow.code = '';
    headerRow.coords = '';
    body.push(headerRow);

    // строки точек внутри района
    grouped[district].forEach(point => {
      const row = {
        code: point.record_number ?? '-',
        name: point.name,
        coords: `${point.latitude ?? '-'}, ${point.longitude ?? '-'}`
      };
      visibleCalendar.value.forEach(month => {
        month.days.forEach(day => {
          const date = fullDate(month, day);
          const m = hasMorning(point, date);
          const a = hasAfternoon(point, date);
          row[`d_${month.month}_${day}`] = m && a ? 'УП' : m ? 'У' : a ? 'П' : '';
        });
      });
      body.push(row);
    });
  });

  const columnStyles = {
    code: {cellWidth: 10},
    name: {cellWidth: 50, overflow: 'linebreak'},
    coords: {cellWidth: 15},
  };

  dateKeys.forEach((key) => {
    columnStyles[key] = {
      textColor: [255, 255, 255],
      fontSize: 1,
    };
  });

  doc.setFontSize(12);
  doc.text('Согласовано:', 15, 15, {align: 'left'});
  doc.setFontSize(8);
  doc.text('Представитель  ', 15, 20, {align: 'left'});
  doc.text('АО "Оренбургремдорстрой"', 15, 25, {align: 'left'});
  doc.text('Подпись: ________________________________', 15, 30, {align: 'left'});
  doc.text('Дата: ___________________________________', 15, 35, {align: 'left'});
  doc.setFontSize(12);
  doc.text('Утверждаю:', 200, 15, {align: 'left'});
  doc.setFontSize(8);
  doc.text(approverPosition, 200, 20, {align: 'left'});
  doc.text('ООО "ИТБ"', 200, 25, {align: 'left'});
  doc.text(`Подпись: __________ / ${approverName}`, 200, 30, {align: 'left'});
  doc.text('Дата: ___________________________________', 200, 35, {align: 'left'});

  doc.setFontSize(12);
  doc.text('Календарный план-график выполнения работ по учёту интенсивности движения и состава', 150, 45, {align: 'center'});
  doc.text('транспортных потоков на автомобильных дорогах общего пользования регионального и', 150, 50, {align: 'center'});
  const req = selectedRequest.value;
  console.log(req);
  const reqName = req ? req.name : '—';
  const reqDesc = req && req.description ? `${req.description}` : '';

  doc.text(`межмуниципального значения Оренбургской области по ${reqName} ${reqDesc}`, 150, 55, {align: 'center'});

  // 📦 рендер таблицы
  autoTable(doc, {
    columns: [...staticColumns, ...dateColumns],
    body,
    styles: {
      font: 'DejaVuSans',
      textColor: 0,
      fontSize: 6,
      cellPadding: 0.5,
      overflow: 'linebreak',
      lineColor: 0, // цвет границ (0-255)
      lineWidth: 0.2,
    },
    columnStyles,
    startY: 60,
    margin: {left: 5, right: 5},
    tableWidth: 'wrap',
    headStyles: {
      font: 'DejaVuSans',
      halign: 'center',
      valign: 'middle',
      fontStyle: 'normal',
      fillColor: [255, 255, 255],
    },
    bodyStyles: {
      font: 'DejaVuSans',
      fontStyle: 'normal',
      valign: 'middle',
    },
    didParseCell: function (data) {
      // Стиль заголовка района
      if (data.row.raw.isGroup) {
        if (data.column.dataKey === 'name') {

          data.cell.colSpan = staticColumns.length + dateKeys.length;
          data.cell.styles.halign = 'center';
          data.cell.styles.fillColor = [240, 240, 240];
        } else {
          data.cell.styles.cellPadding = 0;
          data.cell.text = '';
        }
      }
    },
    didDrawCell: function (data) {
      const col = data.column.dataKey;
      const val = data.cell.raw;
      if (!col.startsWith('d_')) return;

      const {x, y, width, height} = data.cell;

      if (val === 'У' || val === 'УП') {
        doc.setFillColor(0, 0, 0);
        doc.rect(x, y, width / 2, height, 'F');
      }

      if (val === 'П' || val === 'УП') {
        doc.setFillColor(0, 0, 0);
        doc.rect(x + width / 2, y, width / 2, height, 'F');
      }
    }
  });
  if (doc.lastAutoTable && doc.lastAutoTable.finalY) {
    doc.setFontSize(8);
    doc.setFont("DejaVuSans");
    const noteText = [
      "* Левая половина ячейки отражает, что учет ведется с 8:00-12:00,",
      "правая половина ячейки отражает, что учет ведется с 13:00-17:00"
    ];

    let startY = doc.lastAutoTable.finalY + 10;
    noteText.forEach((line) => {
      doc.text(line, 15, startY);
      startY += 5;
    });
  }

  doc.save(fileName.value);
};
</script>

<template>

  <div class="mb-3 d-flex justify-content-left align-items-center">
    <select v-model="districtFilter" class="form-select w-auto">
      <option value="">Все районы</option>
      <option v-for="district in districtOptions" :key="district" :value="district">
        {{ district }}
      </option>
    </select>
    <select v-model="freqFilter" class="form-select w-auto ms-2">
      <option v-for="opt in freqOptions" :key="opt.value" :value="opt.value">
        {{ opt.label }}
      </option>
    </select>
    <select v-model="managerFilter" class="form-select w-auto ms-2">
      <option :value="null">Все менеджеры</option>
      <option v-for="m in managers" :key="m.id" :value="m.id">{{ m.fullName }}</option>
    </select>
    <select v-model="selectedRequestId" class="form-select w-auto ms-2">
      <option :value="null">Все заявки</option>
      <option v-for="r in requestsList" :key="r.id" :value="r.id">{{ r.name }}</option>
    </select>
  </div>
  <div class="fw-bold">Количество ПУИДД: {{ filteredPoints.length }}</div>
  <div class="d-flex justify-content-end mb-3 align-items-center">
    <button
        v-if="authStore.hasPermission(['sign-plan-chart'])"
        class="btn btn-sm me-2"
        :class="isCurrentPeriodSigned ? 'btn-secondary' : 'btn-success'"
        :disabled="isCurrentPeriodSigned"
        @click="showSignModal = true"
    >
      {{ isCurrentPeriodSigned ? 'План подписан' : 'Подписать план' }}
    </button>

    <button class="btn btn-sm btn-primary me-2" @click="generateSchedulePdf">
      Скачать в PDF
    </button>

    <button class="btn btn-sm btn-primary me-2"
            @click="onDownloadExcel">
      Скачать Excel
    </button>

    <button class="btn btn-sm btn-primary me-2" :disabled="currentPage === 0" @click="currentPage--">
      <<
    </button>

    <button class="btn btn-sm btn-primary" :disabled="currentPage >= totalPages - 1"
            @click="currentPage++">
      >>
    </button>
  </div>
  <div class="table-responsive">
    <div v-if="selectedRequestId && planInfo">
      <table class="table table-bordered table-sm text-center align-middle calendar-table bg-white">
        <thead>
        <tr>
          <th class="calendar-wide-header" :colspan="3">Пункт учета интенсивности дорожного движения</th>
          <th v-for="month in visibleCalendar" :key="month.month" :colspan="month.days.length">
            {{ month.month }} {{ month.year }}
          </th>
        </tr>
        <tr>
          <th class="sticky-col align-middle w-number">Номер<br>ПУИДД</th>
          <th class="sticky-col align-middle w-310">Наименование а/д</th>
          <th class="sticky-col align-middle w-130">Геоданные</th>
          <template v-for="month in visibleCalendar" :key="`days-${month.month}`">
            <th v-for="day in month.days" :key="`${month.month}-${day}`" class="day-cell">
              {{ day }}
            </th>
          </template>
        </tr>
        </thead>

        <tbody>
        <!-- Зайдем по заранее рассчитанной матрице -->
        <template v-for="monthData in calendarMatrix" :key="`body-${monthData.month}`">
          <tr v-for="row in monthData.rows" :key="row.id">
            <!-- Первая колонка: код точки -->
            <td>
              {{
                `${row.point.record_number ?? '-'}`
              }}
            </td>
            <!-- Вторая: название -->
            <td>
              <strong>{{ row.point.name }}</strong>
            </td>
            <!-- Третья: координаты -->
            <td>{{ row.point.latitude ?? '-' }}, {{ row.point.longitude ?? '-' }}</td>
            <!-- Дальше — уже только булевы флаги из flags -->
            <td v-for="(cell, idx) in row.flags" :key="`${row.id}-${cell}-${idx}`" class="calendar-td">
              <div class="half-cell-wrapper">
                <div class="half-cell left" :class="{ morning: cell.morning }"></div>
                <div class="half-cell right" :class="{ afternoon: cell.afternoon }"></div>
              </div>
            </td>
          </tr>
        </template>
        </tbody>
      </table>
    </div>
    <div v-else class="alert alert-info">
      Выберите заявку для отображения календаря
    </div>
  </div>

  <!-- Модальное окно подписания -->
  <div v-if="showSignModal" class="modal-overlay">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Подписать план-график</h5>
          <button type="button" class="btn-close" @click="showSignModal = false"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Месяц</label>
            <select v-model="selectedMonth" class="form-select">
              <option :value="null" disabled>Выберите месяц</option>
              <option
                  v-for="opt in monthOptions"
                  :key="opt.value.month + '-' + opt.value.year"
                  :value="opt.value"
              >
                {{ opt.label }}
              </option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Заявка</label>
            <select v-model="selectedReqId" class="form-select">
              <option :value="null" disabled>Выберите заявку</option>
              <option v-for="req in requestsList" :key="req.id" :value="req.id">
                {{ req.name }}
              </option>
            </select>
          </div>
          <div v-if="errorMessage" class="alert alert-danger">{{ errorMessage }}</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="showSignModal = false">
            Отмена
          </button>
          <button type="button" class="btn btn-primary" @click="signPlan">
            Подтвердить
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.calendar-table {
  border-collapse: separate;
  border-spacing: 0;
}

.calendar-table th,
.calendar-table td {
  border: 1px solid #dee2e6;
}

.sticky-col {
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 3;
  border-right: 1px solid #dee2e6;
}

.day-cell {
  padding: 0.25rem;
  /* для одинаковых ширин по дате */
  width: 30px;
  min-width: 30px;
  max-width: 30px;
}

.calendar-wide-header {
  min-width: 200px;
  text-align: center;
  white-space: normal;
  font-weight: bold;
}

.morning {
  font-size: 11px;
}

.calendar-td {
  padding: 0;
}

.half-cell-wrapper {
  display: flex;
  height: 40px;
  width: 100%;
}

.half-cell {
  flex: 1;
}

.half-cell.left {
  border-right: 1px solid #dee2e6;
}

.half-cell.morning {
  background-color: #007bff;
}

.half-cell.afternoon {
  background-color: #007bff;
}

.w-number {
  width: 20px;
}

.w-310 {
  width: 310px;
}

.w-130 {
  width: 130px;
}

.table-responsive {
  width: 100%;
  min-width: 1000px;
}

@media (max-width: 1499px) {
  .w-number {
    width: 20px;
  }

  .w-310 {
    width: 280px;
  }

  .w-130 {
    width: 100px;
  }

  .calendar-table {
    font-size: 12px;
  }

  .day-cell {
    /* для одинаковых ширин по дате */
    width: 27px;
    min-width: 27px;
    max-width: 27px;
  }

  .half-cell-wrapper {
    height: 30px;
  }
}

@media (max-width: 1277px) {
  .w-number {
    width: 20px;
  }

  .w-310 {
    width: 260px;
  }

  .w-130 {
    width: 90px;
  }

  .calendar-table {
    font-size: 11px;
  }

  .day-cell {
    /* для одинаковых ширин по дате */
    width: 24px;
    min-width: 24px;
    max-width: 24px;
  }

  .half-cell-wrapper {
    height: 25px;
  }
}

@media (max-width: 1149px) {
  .w-number {
    width: 20px;
  }

  .w-310 {
    width: 220px;
  }

  .w-130 {
    width: 70px;
  }

  .calendar-table {
    font-size: 10px;
  }

  .day-cell {
    /* для одинаковых ширин по дате */
    width: 20px;
    min-width: 20px;
    max-width: 20px;
  }
}

/* Стили для модального окна */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}

.modal-dialog {
  max-width: 500px;
  margin: auto;
}

.modal-content {
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.3rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  width: 100%;
}

.modal-header,
.modal-footer {
  border-bottom: none;
  border-top: none;
  padding: 0.5rem 1rem;
}

.modal-title {
  margin: 0;
  font-size: 1.25rem;
}

.btn-close {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
</style>
