Corp/backend/static/css/calendar-improvements.css

/* ========================================
   Улучшенные стили для календаря
   ======================================== */

/* Улучшенное отображение дней с событиями */
.fc-daygrid-day {
  position: relative;
}

/* Современный стиль для ячеек календаря */
.fc-daygrid-day-frame {
  min-height: 100px;
  position: relative;
}

/* Убираем стандартные рамки событий и делаем их более гладкими */
.fc-event {
  border-radius: 4px !important;
  margin: 1px 2px !important;
  padding: 2px 4px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

/* Улучшенное отображение текста события */
.fc-event-title {
  font-weight: 500;
  padding: 1px 0;
}

/* Стиль для дней с большим количеством событий */
.fc-daygrid-day.fc-day-today {
  background-color: rgba(13, 110, 253, 0.05) !important;
}

.fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  background-color: #0d6efd;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Улучшенный popover для множества событий */
.fc-popover {
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  max-width: 300px;
}

.fc-popover-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  padding: 8px 12px !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: 600;
}

.fc-popover-body {
  padding: 8px !important;
  max-height: 400px;
  overflow-y: auto;
}

/* Стили для ссылки "+N еще" */
.fc-more-link {
  color: #0d6efd !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  background: rgba(13, 110, 253, 0.1) !important;
  transition: all 0.2s ease;
}

.fc-more-link:hover {
  background: rgba(13, 110, 253, 0.2) !important;
  text-decoration: none !important;
}

/* Улучшенное отображение времени события */
.fc-event-time {
  font-weight: 400;
  font-size: 10px;
  opacity: 0.9;
  margin-right: 3px;
}

/* Стиль для событий с левой цветной границей (календарь) */
.fc-event.has-calendar-color {
  padding-left: 8px !important;
}

/* Анимация появления событий */
@keyframes fadeInEvent {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fc-event {
  animation: fadeInEvent 0.3s ease;
}

/* Улучшенный hover для всех событий */
.fc-event:hover {
  z-index: 999 !important;
  transform: translateY(-2px) scale(1.02);
}

/* Стиль для выходных дней */
.fc-day-sat,
.fc-day-sun {
  background-color: rgba(220, 53, 69, 0.02);
}

/* Улучшенная читаемость заголовков дней недели */
.fc-col-header-cell {
  font-weight: 600;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  border-color: #dee2e6 !important;
}

/* Современный стиль для кнопок навигации календаря */
.fc-button {
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.fc-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Стиль для заголовка календаря */
.fc-toolbar-title {
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  color: #2c3e50;
}

/* Улучшенное отображение номера дня */
.fc-daygrid-day-number {
  padding: 4px 6px;
  font-weight: 500;
  color: #495057;
}

/* Стиль для прошедших дней */
.fc-day-past:not(.fc-day-today) {
  background-color: rgba(0,0,0,0.02);
}

.fc-day-past:not(.fc-day-today) .fc-daygrid-day-number {
  color: #adb5bd;
}

/* Улучшенное отображение границ между днями */
.fc-daygrid-day-frame {
  border: 1px solid #e9ecef !important;
}

/* Стиль для событий на весь день */
.fc-daygrid-event.fc-daygrid-block-event {
  padding: 3px 6px !important;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
  .fc-daygrid-day-frame {
    min-height: 80px;
  }
  
  .fc-event {
    font-size: 10px !important;
    padding: 1px 3px !important;
  }
  
  .fc-toolbar-title {
    font-size: 1rem !important;
  }
}

/* Улучшенная прокрутка в popover */
.fc-popover-body::-webkit-scrollbar {
  width: 6px;
}

.fc-popover-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.fc-popover-body::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.fc-popover-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Индикатор загрузки событий */
.fc-view-harness.fc-view-harness-active {
  position: relative;
}

/* Стиль для событий разной продолжительности */
.fc-event.fc-event-start.fc-event-end {
  /* Событие в один день - закругленные углы */
  border-radius: 4px !important;
}

.fc-event.fc-event-start:not(.fc-event-end) {
  /* Начало многодневного события - закругление слева */
  border-radius: 4px 0 0 4px !important;
}

.fc-event:not(.fc-event-start).fc-event-end {
  /* Конец многодневного события - закругление справа */
  border-radius: 0 4px 4px 0 !important;
}

.fc-event:not(.fc-event-start):not(.fc-event-end) {
  /* Середина многодневного события - без закруглений */
  border-radius: 0 !important;
}

/* Улучшенная видимость выбранной даты при создании события */
.fc-highlight {
  background: rgba(13, 110, 253, 0.15) !important;
  border-radius: 4px;
}

/* Стиль для недели */
.week-strip-header {
  font-weight: 600;
  color: #495057;
  padding: 12px 0 8px;
  border-top: 1px solid #e9ecef;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.week-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

/* Улучшенный стиль для списка календарей */
.calendar-list-container {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 #f7fafc;
}

.calendar-list-container::-webkit-scrollbar {
  width: 6px;
}

.calendar-list-container::-webkit-scrollbar-track {
  background: #f7fafc;
  border-radius: 3px;
}

.calendar-list-container::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.calendar-list-container::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}