/* css/calendar.css */

/* ==========================================================================
   CALENDAR CONTROLS & DAY OF WEEK HEADER
   ========================================================================== */
/* css/calendar.css */

/* ==========================================================================
   CALENDAR CONTROLS & DAY OF WEEK HEADER - ИЗМЕНЕНО
   ========================================================================== */
.calendar-controls { /* Теперь содержит только кнопки < > */
    display: flex; 
    align-items: center; 
    justify-content: space-between; /* Кнопки по краям */
    padding: 6px var(--compact-padding); /* Вертикальный отступ и боковой, как у grid-wrapper */
    background-color: var(--bg-primary); 
    flex-shrink: 0;
    /* border-bottom больше не нужен здесь, он будет под днями недели */
    /* min-height не обязателен, высота будет по кнопкам */
}
.calendar-controls .nav-btn { 
    padding: 6px; color: var(--text-secondary); 
}
.calendar-controls .nav-btn:hover { 
    color: var(--text-primary); background-color: var(--bg-tertiary); 
}
.calendar-controls .nav-btn .material-symbols-outlined { font-size: 20px; }

/* --- ДНИ НЕДЕЛИ: Теперь отдельный блок над сеткой --- */
#days-of-week-header { 
    /* Используем Grid, чтобы точно имитировать 7 колонок календаря */
    display: grid; 
    grid-template-columns: repeat(7, 1fr); /* 7 одинаковых колонок */
    gap: 3px; /* ТОЧНО ТАКОЙ ЖЕ gap, как у .calendar-grid */
    padding: 8px var(--compact-padding) 4px; /* Вертикальные отступы и БОКОВЫЕ, как у grid-wrapper */
    border-bottom: 1px solid var(--border-primary); /* Граница под днями недели */
    background-color: var(--bg-primary); /* Фон, как у контролов */
    flex-shrink: 0; /* Чтобы не сжимался, если вдруг попадет во flex-контейнер */
}

/* Стили для каждого отдельного дня недели (<span>) */
#days-of-week-header span {
    /* Свойства flex больше не нужны, т.к. используется Grid */
    text-align: center; /* Центрируем текст внутри ячейки грида */
    font-family: var(--font-main); 
    font-size: 0.625rem; /* 10px */
    font-weight: 600;
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    color: var(--text-secondary);
    padding: 4px 0; /* Небольшой вертикальный паддинг */
    line-height: 1.2; 
    opacity: 0.85; 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

/* Стиль для выходных дней в заголовке */
#days-of-week-header span.weekend-header { 
    color: var(--accent-primary); 
    opacity: 1; 
    font-weight: 700; 
}

/* --- Контейнер сетки календаря --- */
/* Селектор .calendar-grid-wrapper был в main.css, но логичнее его стили (padding) определить здесь */
.calendar-grid-wrapper { 
    flex-grow: 1;       /* <<< САМОЕ ВАЖНОЕ: Занять все оставшееся место */
    overflow: hidden;     /* <<< ЗАПРЕТИТЬ СКРОЛЛ самого wrapper'а */
    min-height: 0;      /* <<< ВАЖНО для flex-детей с overflow */
    position: relative;   /* Можно оставить, если нужно для дочерних */
    background-color: var(--bg-primary);
    padding: 0 var(--compact-padding) var(--compact-padding) var(--compact-padding); 
    padding-top: var(--compact-padding); 
    display: flex;        /* Оставляем flex для управления #calendar-grid (или swipe-container) */
    flex-direction: column; /* Если внутри нужна вертикальная компоновка */
}

/* ==========================================================================
   CALENDAR GRID & CELLS
   ========================================================================== */
/* ==========================================================================
   CALENDAR GRID & CELLS - РЕДИЗАЙН
   ========================================================================== */
.calendar-grid {
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    /* Изменяем GAP: Вертикальный больше, горизонтальный меньше */
    column-gap: 2px; /* Горизонтальный зазор (очень маленький) */
    row-gap: 5px;    /* Вертикальный зазор (больше) */
    width: 100%; 
    height: 100%; 
    position: relative;
    flex-grow: 1; 

}


.calendar-day-cell {
    position: relative; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    /* Уменьшаем горизонтальные паддинги, чтобы текст и точки были ближе к центру по горизонтали */
    padding: 6px 1px 4px; /* Верх/Низ остались, Горизонтальные уменьшены до 1px */
    background-color: var(--bg-secondary); 
    border-radius: var(--border-radius-large); 
    /* aspect-ratio: 1 / 1; /* УБИРАЕМ aspect-ratio, т.к. ячейки больше не квадратные */
    cursor: pointer; 
    overflow: hidden; 
    transition: background-color var(--transition-speed-fast) var(--transition-easing),
                box-shadow var(--transition-speed-fast) var(--transition-easing),
                transform var(--transition-speed-fast) var(--transition-easing); 
}

.calendar-day-cell:not(.is-other-month) {
    /* Перенес общие переходы сюда */
    transition: background-color var(--transition-speed-fast) var(--transition-easing),
                box-shadow var(--transition-speed-fast) var(--transition-easing),
                transform 0.1s cubic-bezier(0.4, 0, 0.2, 1); /* Упростил transition для transform */
}

.calendar-day-cell:hover:not(.is-other-month) {
    background-color: var(--bg-tertiary); 
    /* УБРАЛ translateY */
    /* transform: translateY(-2.5px); */ 
    box-shadow: var(--shadow-medium); /* Добавляем тень при наведении */
    z-index: 1; /* Чтобы тень была видна над соседними ячейками */
}

.calendar-day-cell:active:not(.is-other-month) {
    transform: scale(0.96); /* Немного уменьшил масштаб */
    box-shadow: none; /* Убираем тень при нажатии */
    background-color: color-mix(in srgb, var(--bg-tertiary) 85%, black); /* Чуть темнее */
}

.calendar-day-cell.is-other-month { 
    background-color: transparent; 
    box-shadow: none; 
    cursor: default; 
    opacity: 0.3; /* Сделал всю ячейку полупрозрачной */
    pointer-events: none; 
}
/* Убираем отдельные стили для .day-number и .holiday-indicators внутри .is-other-month, т.к. вся ячейка теперь тусклая */
/* .calendar-day-cell.is-other-month .day-number, ... { opacity: 0.35; ... } */
.calendar-day-cell.is-other-month:hover { 
    transform: none; 
    background-color: transparent; 
}

.day-number { 
    font-family: var(--font-main); 
    font-size: 0.9rem; 
    font-weight: 400; /* Сделал немного тоньше по умолчанию */
    line-height: 1.2; /* Чуть больше для воздуха */
    text-align: center; 
    color: var(--text-primary); 
    margin-bottom: 0; /* Убрал margin, будем управлять через flex */
    padding-top: 2px; /* Небольшой отступ сверху номера */
    transition: color var(--transition-speed-fast), font-weight var(--transition-speed-fast);
    width: 24px; /* Фиксируем ширину/высоту для выравнивания */
    height: 24px;
    display: inline-flex; /* Используем flex для центрирования внутри */
    align-items: center;
    justify-content: center;
    border: 1.5px solid transparent; /* Резервируем место для рамки "Today" */
    border-radius: 50%; /* Скругляем */
    box-sizing: border-box; /* Чтобы border не увеличивал размер */
	margin-top: 2px; 
}

/* СТИЛЬ ДЛЯ "СЕГОДНЯ" - РАМКА ВМЕСТО ЗАЛИВКИ */
.calendar-day-cell.is-today .day-number { 
    border-color: var(--accent-primary); /* Красная рамка */
    color: var(--accent-primary); /* Красный цвет текста */
    font-weight: 600; /* Жирный шрифт */
    background-color: transparent; /* Убираем фоновую заливку */
    box-shadow: none; /* Убираем тень */
}

/* СТИЛЬ ДЛЯ "СЕГОДНЯ" В ДРУГОМ МЕСЯЦЕ (если нужно) - можно упростить или убрать */
.calendar-day-cell.is-today.is-other-month {
    /* Так как вся ячейка .is-other-month теперь тусклая, 
       специальное выделение today там может быть лишним. 
       Если нужно, можно вернуть стили: */
    /* opacity: 0.5; */ /* Сделать ее чуть заметнее других is-other-month */
}
/* .calendar-day-cell.is-today.is-other-month .day-number { ... } */ /* Стили для номера "сегодня" в другом месяце, если нужно */


/* СТИЛЬ ДЛЯ ВЫХОДНЫХ */
.calendar-day-cell.is-weekend:not(.is-other-month) {
    /* Добавляем ОЧЕНЬ легкий фоновый оттенок */
    background-color: color-mix(in srgb, var(--bg-secondary) 95%, var(--bg-tertiary) 5%); 
}
.calendar-day-cell.is-weekend:not(.is-other-month):not(.is-today) .day-number { 
    color: var(--accent-secondary); /* Синий цвет для цифры */
    font-weight: 500; /* Чуть жирнее обычной цифры */
}

/* СТИЛЬ ДЛЯ ИНДИКАТОРОВ ПРАЗДНИКОВ */
.holiday-indicators { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    pointer-events: none; 
    margin-top: auto; /* Прижимает точки к низу ячейки */
    height: 6px; /* Немного увеличил высоту для воздуха */
    padding-bottom: 1px; /* Отступ снизу */
}
.holiday-dot { 
    width: 3px; /* УМЕНЬШИЛ РАЗМЕР */
    height: 3px; 
    border-radius: 50%; 
    margin: 0 1px; /* УМЕНЬШИЛ ОТСТУП МЕЖДУ */
    background-color: var(--text-secondary); 
    opacity: 0.7; /* Чуть заметнее */
    flex-shrink: 0; /* Чтобы точки не сжимались */
}
.holiday-dot.type-public { 
    background-color: var(--accent-primary); opacity: 1; 
}
.holiday-dot.type-observance { 
    background-color: var(--accent-secondary); opacity: 0.9; 
}


/* ==========================================================================
   SWIPE ANIMATIONS (без изменений от предыдущего ответа)
   ========================================================================== */
.calendar-grid.swipe-left-leave  { animation: swipeToLeftLeave  0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards; }
.calendar-grid.swipe-left-enter  { animation: swipeToLeftEnter  0.25s cubic-bezier(0.215, 0.61, 0.355, 1.000) forwards; }
.calendar-grid.swipe-right-leave { animation: swipeToRightLeave 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards; }
.calendar-grid.swipe-right-enter { animation: swipeToRightEnter 0.25s cubic-bezier(0.215, 0.61, 0.355, 1.000) forwards; }

@keyframes swipeToLeftLeave { from { transform: translateX(0) scale(1); opacity: 1; } to { transform: translateX(-80%) scale(0.9); opacity: 0; } }
@keyframes swipeToRightLeave { from { transform: translateX(0) scale(1); opacity: 1; } to { transform: translateX(80%) scale(0.9); opacity: 0; } }
@keyframes swipeToLeftEnter { from { transform: translateX(80%) scale(0.9); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes swipeToRightEnter { from { transform: translateX(-80%) scale(0.9); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }