/* css/components.css (КОМПОНЕНТЫ) */



/* ==========================================================================
   BOTTOM SHEET PANELS (Settings, Info)
   ========================================================================== */
.side-panel { /* Общий контейнер для панелей, выезжающих снизу */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 85vh; /* Максимальная высота панели */
    background-color: var(--bg-secondary);
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.25); /* Тень сверху */
    z-index: 10000; /* Поверх основного контента, но ниже оверлеев модалок */
    transform: translateY(105%); /* Изначально скрыта полностью внизу + запас */
    transition: transform var(--transition-speed-normal) var(--transition-easing);
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; /* Скругление верхних углов */
}
.side-panel.is-active {
    transform: translateY(0); /* Показываем панель */
}

.panel-grabber { /* "Ручка" для свайпа панели */
    width: 40px;
    height: 5px;
    background-color: var(--text-disabled);
    border-radius: 2.5px;
    margin: 10px auto 8px auto; /* Отступы и центрирование */
    cursor: grab;
    flex-shrink: 0; /* Чтобы не сжимался */
}

.panel-header { /* Общий заголовок для панелей */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--base-padding); /* Горизонтальные отступы */
    height: calc(var(--header-height) - 20px); /* Уменьшенная высота, учитывая grabber */
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0; /* Чтобы не сжимался */
}
.panel-header h2 { /* Заголовок внутри .panel-header */
    font-family: var(--font-display);
    font-size: 1.2rem; /* Чуть меньше, чем основной заголовок приложения */
    margin: 0;
    font-weight: 500; /* Менее жирный, чем h1/h2 по умолчанию */
    color: var(--text-primary);
}
/* Кнопка закрытия .icon-btn.close-panel-btn уже должна быть стилизована в main.css */
/* .panel-header .close-panel-btn .material-symbols-outlined { font-size: 22px; } */


.panel-content {
    overflow-y: auto; 
    overflow-x: hidden; 
    flex-grow: 1; 
    min-height: 0; 
    overscroll-behavior-y: contain; /* <<< Добавляем сюда */
    -webkit-overflow-scrolling: touch; 
}

/* ==========================================================================
   INFO PANEL SPECIFIC STYLES (внутри .panel-content)
   ========================================================================== */
.info-panel-content { /* Добавляется к .panel-content для info-panel */
    padding: 0; /* Убираем общий padding от .panel-content, если он был */
    display: flex;
    flex-direction: column;
}
/* ... (все стили для .app-details-section, .info-grid, .info-item и т.д. из предыдущего ответа) ... */
.app-details-section {
    padding: 24px var(--base-padding) 20px; text-align: center;
    border-bottom: 1px solid var(--border-primary); background-color: var(--bg-tertiary);
}
.app-logo-placeholder {
    font-family: var(--font-display); font-size: 2.8rem; color: var(--accent-primary);
    line-height: 1; margin-bottom: 8px;
}
.app-details-section h3 {
    font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 4px 0; color: var(--text-primary);
}
.app-version-info { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.app-version-info #app-version { font-weight: 600; color: var(--text-primary); }

.info-grid {
    display: grid; grid-template-columns: 1fr; gap: 1px;
    background-color: var(--border-primary);
}
.info-item {
    background-color: var(--bg-secondary); padding: 14px var(--base-padding);
    display: flex; align-items: center; gap: 12px;
}
.info-item.action-item { cursor: pointer; transition: background-color var(--transition-speed-fast); }
.info-item.action-item:hover { background-color: var(--bg-tertiary); }
.info-icon {
    font-size: 22px; color: var(--accent-secondary); padding: 8px;
    background-color: color-mix(in srgb, var(--accent-secondary) 15%, transparent);
    border-radius: var(--border-radius-medium); display: inline-flex;
    align-items: center; justify-content: center; width: 38px; height: 38px;
}
#internet-status-icon.is-offline {
    color: var(--accent-primary);
    background-color: color-mix(in srgb, var(--accent-primary) 15%, transparent);
}
.info-text { display: flex; flex-direction: column; flex-grow: 1; }
.info-label {
    font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 2px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.info-value { font-size: 0.95rem; color: var(--text-primary); font-weight: 500; }
#copy-version-status { font-size: 0.8rem; color: var(--accent-secondary); min-height: 1.2em; margin-top: 2px; }
.info-footer {
    padding: 16px var(--base-padding); text-align: center; font-size: 0.8rem;
    color: var(--text-secondary); margin-top: auto; border-top: 1px solid var(--border-primary);
}
.info-footer p { margin: 0 0 5px 0; }
.info-footer p:last-child { margin-bottom: 0; }
.info-footer a { color: var(--accent-secondary); text-decoration: none; }
.info-footer a:hover { text-decoration: underline; }


/* ==========================================================================
   SETTINGS PANEL SPECIFIC STYLES (внутри .panel-content)
   ========================================================================== */
.settings-panel-content { /* Класс для <div class="panel-content settings-panel-content"> в settings-panel */
    padding: var(--base-padding); /* Возвращаем паддинг для контента настроек */
}
.setting-item { margin-bottom: 24px; }
.setting-item label { /* Эти стили более специфичны, чем общие h1-h6 или p */
    display: flex; align-items: center; font-size: var(--font-size-small);
    color: var(--text-secondary); margin-bottom: 8px; font-weight: 500;
}
.setting-item label .material-symbols-outlined.small-icon { font-size: 16px; margin-right: 6px; }

.select-wrapper { position: relative; }
.select-wrapper .material-symbols-outlined.select-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--text-secondary); pointer-events: none;
}
.select-wrapper select {
    width: 100%; 
    padding: 10px 30px 10px 40px; 
    background-color: var(--bg-tertiary);
    color: var(--text-primary); 
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-medium); 
    font-size: 0.9rem; 
    appearance: none;
    /* ИСПРАВЛЕННАЯ СТРОКА - цвет #A0A0A5 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A0A0A5'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); 
    background-repeat: no-repeat; 
    background-position: right 10px center; 
    background-size: 18px;
    cursor: pointer;
}
.select-wrapper select:focus {
    outline: none; border-color: var(--accent-secondary); 
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-secondary) 20%, transparent);
}

.theme-selector { display: flex; gap: 8px; }
.theme-btn {
    flex-grow: 1; padding: 8px; border: 1.5px solid var(--border-primary);
    background-color: transparent; color: var(--text-secondary);
    border-radius: var(--border-radius-medium); cursor: pointer;
    font-size: 0.85rem; font-weight: 500; text-align: center;
    transition: background-color var(--transition-speed-fast), color var(--transition-speed-fast), border-color var(--transition-speed-fast);
}
.theme-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
.theme-btn.is-active {
    background-color: var(--accent-secondary); color: var(--text-on-accent);
    border-color: var(--accent-secondary); font-weight: 600;
}

.update-status { margin-top: 10px; }
/* Стили для .update-status .progress-bar уже должны быть в main.css */
.update-status #update-status-message {
    font-size: 0.9rem; color: var(--text-secondary); text-align: center;
}

/* ==========================================================================
   HOLIDAY PANEL SPECIFIC STYLES (выезжает снизу)
   ========================================================================== */

/* css/components.css */

/* ... (Стили для .side-panel, .panel-grabber, .panel-header, .panel-content ДОЛЖНЫ БЫТЬ ЗДЕСЬ или в main.css) ... */
/* ... (Стили для Info Panel и Settings Panel) ... */

/* ==========================================================================
   HOLIDAY PANEL SPECIFIC STYLES (Обновлено для доп. инфо)
   ========================================================================== */

.holiday-panel-content { 
    padding: 0; 
    display: flex;
    flex-direction: column;
    /* ДОБАВЛЯЕМ НИЖНИЙ ОТСТУП ДЛЯ ВСЕГО КОНТЕНТА ПАНЕЛИ */
    /* Учитываем высоту стандартного футера + небольшой запас */
    /* Либо можно использовать safe-area-inset-bottom, если панель идет до низа экрана */
    padding-bottom: calc(var(--footer-height) + var(--base-padding)); 
    /* ИЛИ, если панель всегда над футером приложения: */
    /* padding-bottom: var(--base-padding); */ 
}

/* --- Стили для содержимого панели (почти идентичны стилям для модалки) --- */
.holiday-main-info {
    display: flex; align-items: center; gap: var(--base-padding);
    padding: var(--base-padding);
	margin-top: var(--compact-padding);
}
.holiday-type-icon {
    font-size: 36px; color: var(--accent-secondary); flex-shrink: 0;
    padding: 8px; background-color: color-mix(in srgb, var(--accent-secondary) 10%, transparent);
    border-radius: 50%;
}
.holiday-type-icon.icon-public { 
     color: var(--accent-primary); background-color: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}
.holiday-names { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }

/* Заголовок H2 в панели уже стилизован через .panel-header h2. */
/* Если нужно переопределить для #holiday-panel-title: */
/* #holiday-panel-title { font-size: 1.3rem; ... } */

#holiday-panel-title, 
.holiday-english-name, 
.detail-value {
    word-break: break-word; /* Ломает слово в любом месте */
    overflow-wrap: break-word; /* Переносит длинные слова (предпочтительнее) */
    hyphens: auto; /* Автоматические переносы (опционально, может потребовать lang атрибут) */
}

.holiday-english-name { font-size: 0.85rem; color: var(--text-secondary); margin: 0; font-style: italic; }
.holiday-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.holiday-tag {
    display: inline-block; font-size: 0.7rem; font-weight: 500;
    padding: 3px 8px; border-radius: var(--border-radius-small);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.holiday-tag.type-tag { background-color: color-mix(in srgb, var(--accent-secondary) 80%, black); color: var(--text-on-accent); }
.holiday-tag.type-tag.tag-public { background-color: color-mix(in srgb, var(--accent-primary) 85%, black); }
.holiday-tag.scope-tag { background-color: var(--bg-tertiary); color: var(--text-secondary); }
.holiday-tag.scope-tag.tag-regional { background-color: color-mix(in srgb, var(--accent-secondary) 20%, var(--bg-tertiary) 80%); color: var(--accent-secondary); }
.holiday-tag.fixed-tag { background-color: var(--bg-tertiary); color: var(--text-secondary); }

.holiday-divider { border: none; height: 1px; background-color: var(--border-primary); margin: 0; }

.holiday-details { padding: var(--base-padding); display: grid; gap: var(--compact-padding); }
.detail-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
.detail-label { color: var(--text-secondary); margin-right: 10px; }
.detail-value { color: var(--text-primary); text-align: right; font-weight: 500; }
#holiday-panel-counties { font-size: 0.85rem; opacity: 0.9; }

#holiday-panel-more-info-btn {
    margin: var(--base-padding); margin-top: auto; /* Прижимаем кнопку */
    background-color: var(--bg-tertiary); color: var(--text-primary); 
	flex-shrink: 0;
    margin-left: var(--base-padding); /* Отступ слева */
    margin-right: var(--base-padding); /* Отступ справа */
    margin-bottom: 0; /* Убираем нижний отступ, т.к. есть padding у родителя */	
	width: calc(100% - (var(--base-padding) * 2));
}
#holiday-panel-more-info-btn:hover { background-color: color-mix(in srgb, var(--bg-tertiary) 80%, black); }


/* ==========================================================================
   CUSTOM SELECT DROPDOWN (Month/Year Picker под шапкой)
   ========================================================================== */
.custom-select-dropdown {
    position: absolute; 
    top: calc(var(--header-height) - 1px); /* Прямо под шапкой, перекрывая ее border */
    left: 0; /* Растягиваем на всю ширину */
    right: 0;
    background-color: var(--bg-secondary); 
    border: 1px solid var(--border-primary);
    border-top: none; /* Убираем верхнюю рамку */
    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large); /* Скругляем только нижние углы */
    box-shadow: var(--shadow-medium); 
    z-index: 99; /* Чуть ниже шапки, но выше остального */
    padding: var(--base-padding);
    opacity: 0; 
    transform: translateY(-10px); /* Начальное положение для анимации */
    visibility: hidden;
    /* Добавляем transition и для transform */
    transition: opacity var(--transition-speed-normal) var(--transition-easing), 
                transform var(--transition-speed-normal) var(--transition-easing),
                visibility 0s var(--transition-speed-normal);
    transition-delay: 0s, 0s, var(--transition-speed-normal); /* Скрываем мгновенно */
}
.custom-select-dropdown:not(.is-hidden) { /* Состояние видимости */
    opacity: 1; 
    transform: translateY(0); 
    visibility: visible; 
    transition-delay: 0s; /* Показываем сразу */
}

/* --- Селектор Года --- */
.custom-select-controls .year-selector {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: calc(var(--base-padding) + var(--compact-padding)); /* Увеличим отступ до месяцев */
}
.custom-select-controls .year-selector #selected-year-display {
    font-family: var(--font-display); /* Используем дисплейный шрифт */
    font-size: 1.3rem; /* Крупнее */
    font-weight: 500;
    color: var(--text-primary); 
    padding: 0 15px; 
    min-width: 80px; 
    text-align: center;
}
/* Кнопки < > для года */
.custom-select-controls .year-nav-btn { 
    /* Используем базовые стили .icon-btn, но делаем их минималистичнее */
    border: none; /* Убираем рамку */
    background: none;
    color: var(--text-secondary);
    width: 36px; /* Стандартный размер */
    height: 36px;
}
.custom-select-controls .year-nav-btn:hover {
    background-color: var(--bg-tertiary); /* Стандартный ховер */
    color: var(--text-primary);
}
.custom-select-controls .year-nav-btn .material-symbols-outlined { 
    font-size: 20px; /* Размер иконки */
    font-weight: 500; /* Чуть жирнее стрелки */
}

/* --- Сетка Месяцев --- */
.month-grid-select {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* Всегда 3 колонки */
    gap: var(--compact-padding); /* Отступ между кнопками */
    /* margin-bottom: var(--base-padding); /* Убрали кнопку Go, этот отступ не нужен */
}
.month-btn { /* Кнопка месяца */
    background-color: var(--bg-tertiary); 
    border: none; /* Убираем рамку по умолчанию */
    color: var(--text-primary); /* Основной цвет текста */
    padding: 12px 5px; 
    border-radius: var(--border-radius-medium); 
    text-align: center;
    font-size: 0.85rem; 
    font-weight: 500; 
    cursor: pointer;
    position: relative; /* Для позиционирования псевдо-элемента */
    transition: background-color var(--transition-speed-fast), 
                color var(--transition-speed-fast),
                transform var(--transition-speed-fast);
    overflow: hidden; /* Скрываем все, что выходит за рамки */
}
.month-btn:hover { 
    background-color: color-mix(in srgb, var(--bg-primary) 80%, var(--bg-secondary) 20%); /* Легкий ховер */
    transform: scale(1.03); /* Небольшое увеличение */
}
.month-btn:active {
    transform: scale(0.98); /* Уменьшение при клике */
}

/* Выбранный месяц */
.month-btn.is-active { 
    background-color: var(--accent-primary); 
    color: var(--text-on-accent); 
    font-weight: 600; 
    transform: scale(1); /* Убираем эффект ховера */
}

/* Текущий РЕАЛЬНЫЙ месяц - ИНДИКАТОР ТОЧКОЙ */
.month-btn.is-current-month {
    /* Старую рамку убрали */
    /* border: 1.5px solid var(--accent-secondary); */ 
    /* color: var(--accent-secondary); */ /* Цвет текста не меняем */
}
.month-btn.is-current-month::after { /* Добавляем точку снизу */
    content: '';
    position: absolute;
    bottom: 5px; /* Отступ точки от нижнего края */
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--accent-secondary); /* Цвет точки - синий */
    opacity: 0.9;
}

/* Если выбранный месяц является текущим реальным */
.month-btn.is-active.is-current-month {
    /* Фон остается акцентным (красным) от .is-active */
}
.month-btn.is-active.is-current-month::after {
     /* Точка все равно видна под текстом */
    background-color: color-mix(in srgb, var(--text-on-accent) 80%, transparent); /* Делаем точку светлее на красном фоне */
}


/* ==========================================================================
   HOLIDAY MODAL SPECIFIC STYLES
   ========================================================================== */

.holiday-modal-content { /* Класс для .modal-content конкретно этого окна */
   /* Можно задать другую max-width, если нужно */
   /* max-width: 420px; */
}

.holiday-modal-body {
    padding: 0; /* Убираем стандартный padding, секции будут иметь свои */
    display: flex;
    flex-direction: column;
}

.holiday-main-info {
    display: flex;
    align-items: center;
    gap: var(--base-padding);
    padding: var(--base-padding);
}

.holiday-type-icon {
    font-size: 36px; /* Крупная иконка */
    color: var(--accent-secondary); /* Синий по умолчанию */
    flex-shrink: 0;
    padding: 8px;
    background-color: color-mix(in srgb, var(--accent-secondary) 10%, transparent);
    border-radius: 50%; /* Круглый фон */
}
.holiday-type-icon.icon-public { /* Класс для Public праздников */
     color: var(--accent-primary); 
     background-color: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.holiday-names {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Отступ между названием и тегами */
    flex-grow: 1;
}

#holiday-modal-title { /* Переопределяем стиль заголовка из header для главного имени */
    font-size: 1.4rem; /* Крупнее */
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px; /* Отступ до английского имени */
    /* Убедимся, что текст переносится, если очень длинный */
    word-break: break-word; 
    overflow-wrap: break-word;
}

.holiday-english-name {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}

.holiday-tags {
    display: flex;
    flex-wrap: wrap; /* Перенос тегов, если не влезают */
    gap: 6px; /* Отступ между тегами */
    margin-top: 6px; /* Отступ сверху */
}

.holiday-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: var(--border-radius-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.holiday-tag.type-tag {
    background-color: color-mix(in srgb, var(--accent-secondary) 80%, black); /* Темно-синий */
    color: var(--text-on-accent);
}
.holiday-tag.type-tag.tag-public { /* Если тип Public */
    background-color: color-mix(in srgb, var(--accent-primary) 85%, black); /* Темно-красный */
}

.holiday-tag.scope-tag {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}
.holiday-tag.scope-tag.tag-regional { /* Если региональный */
     background-color: color-mix(in srgb, var(--accent-secondary) 20%, var(--bg-tertiary) 80%);
     color: var(--accent-secondary);
}

.holiday-tag.fixed-tag {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}
/* is-hidden хелпер уже есть в main.css */


.holiday-divider {
    border: none;
    height: 1px;
    background-color: var(--border-primary);
    margin: 0; /* Убираем стандартные отступы hr */
}

.holiday-details {
    padding: var(--base-padding);
    display: grid;
    gap: var(--compact-padding); /* Отступ между деталями */
}

.detail-item {
    display: flex;
    justify-content: space-between; /* Название слева, значение справа */
    align-items: center;
    font-size: 0.9rem;
}

.detail-label {
    color: var(--text-secondary);
    margin-right: 10px; /* Отступ от значения */
}

.detail-value {
    color: var(--text-primary);
    text-align: right;
    font-weight: 500;
}
#holiday-modal-counties { /* Для списка регионов */
    font-size: 0.85rem; 
    opacity: 0.9;
}


#holiday-modal-more-info-btn {
    margin: var(--base-padding);
    margin-top: auto; /* Прижимает кнопку к низу, если есть место */
    /* Используем вторичный стиль кнопки - возможно, просто рамка? */
    background-color: var(--bg-tertiary); /* Например, серый фон */
    color: var(--text-primary); /* Основной цвет текста */
    /* Или стиль с рамкой:
    background-color: transparent;
    border: 1.5px solid var(--accent-secondary);
    color: var(--accent-secondary); */
}
#holiday-modal-more-info-btn:hover {
     background-color: color-mix(in srgb, var(--bg-tertiary) 80%, black);
     /* Или для рамочной кнопки:
     background-color: color-mix(in srgb, var(--accent-secondary) 15%, transparent);
     border-color: color-mix(in srgb, var(--accent-secondary) 80%, white); */
}