/* style.css */

/* Подключаем шрифт AeonikPro (пример) */
@font-face {
  font-family: 'AeonikPro';
  src: url('fonts/AeonikPro-Regular.woff2') format('woff2'),
       url('fonts/AeonikPro-Regular.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Тёмно-пастельный (слегка более фиолетовый) фон */
html, body {
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 100%;
  /* Уменьшаем общий шрифт до 75% (ранее было 60%) */
  font-family: 'AeonikPro', sans-serif;
  font-size: 70%;
  background: linear-gradient(
    135deg,
    #3B2A49 0%, 
    #6A4B7F 100%
  );
  color: #ddd;
  overflow: hidden;
}

/* Виды (month, week, day) */
.view {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.view.active {
  opacity: 1; 
  z-index: 2;
}
.view.hidden {
  opacity: 0; 
  z-index: 1;
}

/* Месяц/Неделя: 7 столбцов */
#monthView .grid,
#weekView .grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%; 
  height: 100%;
}

/* День: 1 колонка по центру, шириной 1/3 (пример) */
#dayView .grid {
    display: flex;
    padding-left: 25%;
    justify-content: flex-start;
    width: 50%;
    height: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

/* Ячейка (месяц/неделя) */
.cell {
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 6px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(2px);
  width: 100%;
}

/* Подсветка выходных (месяц/неделя) */
.weekend {
  background: rgba(252,228,236,0.2);
}

/* Номер дня */
.day-number {
  font-weight: bold;
  margin-bottom: 4px;
  color: #fff;
}

/* Контейнер события */
.event {
  /* Уменьшаем боковые отступы до 2px */
  margin: 4px 2px;  
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background: none;
  width: auto; /* чтобы не заполнял всю ширину */
}

/* Шапка события:
   - максимум 2 строки, troetochie */
.event-header {
  position: relative;
  padding: 8px;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
  font-size: 0.84rem; /* уменьшенный размер текста (70% от 1.2rem) */
  color: #444;
  background: rgba(255,255,255, 0.9);
  line-height: 1.2;
  max-height: 2.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

/* Цвет времени */
.time-part {
  color: #aaa;
}

/* Описание (скрываем в месяце) */
.event-desc {
  border-radius: 0 0 8px 8px;
  background: rgba(255,255,255,0.85);
  padding: 8px;
  color: #333;
  font-size: 0.9rem;
  line-height: 1.3;
  opacity: 0.95;
  flex: 1;
}
#monthView .event-desc {
  display: none;
}

/* Последние 2 столбца (6,7) для month/week */
#monthView .grid .cell:nth-child(7n+6),
#monthView .grid .cell:nth-child(7n+7),
#weekView .grid .cell:nth-child(7n+6),
#weekView .grid .cell:nth-child(7n+7) {
  background: rgba(252,228,236,0.2) !important;
}

/* Стили для сообщения "Нет событий" в режиме "День" */
.no-events {
  font-size: 3.5rem;          /* увеличенный размер текста */
  color: #888;                /* серый оттенок, не слишком контрастный */
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;        /* выравнивание по вертикали */
  justify-content: center;    /* выравнивание по горизонтали */
}