/* =============================================================================
   СТИЛИ ДЛЯ УНИВЕРСАЛЬНОГО БЛОКА (page-block)
   =============================================================================
   
   Используется в детальных страницах для отображения полей.
   Поддерживает разные типы полей и режимы просмотра/редактирования.
   
   ============================================================================= */

/* ============= ОСНОВНОЙ КОНТЕЙНЕР ============= */
/* Блок с полем, включает отступы и границы */
.page-block {
    background: var(--tg-theme-bg-color, #ffffff);
    border-radius: 12px;
    padding: 12px;              /* Отступы: 12px со всех сторон */
    margin-bottom: 8px;         /* Отступ между блоками */
    position: relative;
}

/* Блок с изображением — убираем все отступы для полноэкранного отображения */
.page-block[data-type="image"] {
    padding: 0;                 /* Убираем все отступы (изображение от края до края) */
    border-radius: 0;           /* Убираем скругление углов */
}

/* Блок в режиме редактирования - подсветка */
.page-block[data-editable="true"] {
    border: 1px solid var(--tg-theme-hint-color, #e0e0e0);
}

/* ============= ЗАГОЛОВОК БЛОКА ============= */
/* Содержит лейбл и кнопку помощи */
.page-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;         /* Отступ снизу от содержимого */
}

/* Заголовок для блока с изображением — отступы только сверху */
.page-block[data-type="image"] .page-block__header {
    padding: 12px 0 0 0;  /* Отступ только сверху, без боковых */
}

/* Название поля (лейбл) */
.page-block__label {
    font-size: 1.125rem;             /* 18px - как в формах */
    font-weight: 600;                /* Полужирный - как в формах */
    color: var(--tg-theme-text-color);
    margin-bottom: 0;                /* Отступ управляется через header */
}

/* ============= КНОПКА ПОДСКАЗКИ ============= */
/* Иконка восклицательного знака справа от лейбла */
.page-block__help-toggle {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--tg-theme-link-color, #3390ec);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.page-block__help-toggle:hover {
    background-color: var(--tg-theme-secondary-bg-color, #f0f0f0);
}

.page-block__help-toggle:active {
    transform: scale(0.95);
}

/* SVG иконка внутри кнопки */
.page-block__help-toggle svg {
    display: block;
}

/* ============= ТЕКСТ ПОДСКАЗКИ ============= */
/* Разворачивается при клике на кнопку помощи - стиль как в формах */
.page-block__help {
    display: none;               /* Скрыта по умолчанию */
    margin-top: 0.25rem;         /* 4px - как в формах */
    margin-bottom: 0.5rem;       /* 8px - как в формах */
    padding: 0;                  /* Без внутренних отступов - как в формах */
    background: none;            /* Без фона - как в формах */
    border: none;                /* Без рамки - как в формах */
}

/* Подсказка для блока с изображением — добавляем боковые отступы */
.page-block[data-type="image"] .page-block__help {
    margin-left: 12px;          /* Отступ слева (от края экрана) */
    margin-right: 12px;         /* Отступ справа (от края экрана) */
}

/* Скрытое состояние (управляется через .is-open в components.js) */
.page-block__help.hidden {
    display: none;
}

/* Показываем подсказку когда добавлен класс .is-open */
.page-block__help.is-open {
    display: block;
}

/* Текст подсказки - как в формах */
.page-block__help-text {
    font-size: 1rem;             /* 16px - как в формах */
    line-height: 1.5;
    color: var(--tg-theme-hint-color, #999);  /* Серый цвет - как в формах */
    margin: 0;
}

/* ============= КОНТЕЙНЕР ЗНАЧЕНИЯ ============= */
/* Основное содержимое блока */
.page-block__content {
    min-height: 24px;
}

/* ============= ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ ЗНАЧЕНИЙ ============= */
.page-block__value {
    font-size: 16px;
    line-height: 1.5;
    color: var(--tg-theme-text-color, #000000);
}

/* Пустое значение */
.page-block__empty {
    color: var(--tg-theme-hint-color, #999999);
    font-style: italic;
}

/* ============= ИЗОБРАЖЕНИЕ ============= */

/* Обертка для режимов просмотра/редактирования */
.page-block__image-wrapper {
    width: 100%;
}

/* Режим просмотра (по умолчанию) */
.page-block__image-view {
    display: block;
}

/* Режим редактирования (показывается при раскрытии подсказки) */
.page-block__image-edit {
    display: block;
}

.page-block__image-edit.hidden {
    display: none;
}

/* ============= СТИЛИ ДЛЯ РЕДАКТИРОВАНИЯ ФОТО ============= */

/* Контейнер для редактирования (такие же размеры как в режиме просмотра) */
.page-block__image-edit-container {
    position: relative;
    width: 100%;
    max-height: 50vh;           /* Максимальная высота как в просмотре */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

/* Изображение в режиме редактирования (те же стили что и в просмотре) */
.page-block__image-editable {
    max-width: 100%;
    max-height: 50vh;
    width: auto;
    height: auto;
    object-fit: contain;        /* Вписываем изображение целиком */
    display: block;
}

/* Кнопка замены изображения (круговая стрелка на желтом фоне) */
.page-block__image-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;                /* Компактный размер для мобильных */
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.5);  /* Яркий желтый фон с 50% прозрачностью */
    color: #000;                /* Темная иконка для контраста */
    border: none;
    cursor: pointer;
    opacity: 1;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);  /* Легкая тень */
}

/* SVG иконка внутри кнопки */
.page-block__image-remove svg {
    stroke: #000;               /* Темная иконка */
}

/* Анимация при наведении на кнопку (для desktop) */
.page-block__image-remove:hover {
    background: rgba(255, 237, 78, 0.7);  /* Светлее + менее прозрачная при наведении */
    transform: scale(1.15) rotate(180deg);  /* Увеличение + поворот стрелки по часовой */
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5);  /* Желтое свечение */
}

/* Активное состояние (при клике/тапе) */
.page-block__image-remove:active {
    transform: scale(0.9);
    background: rgba(255, 193, 7, 0.8);  /* Темнее + более непрозрачная при нажатии */
}

/* Placeholder когда нет изображения */
.page-block__image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;           /* Минимальная высота */
    width: 100%;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    background: var(--tg-theme-secondary-bg-color, #232e3c);
    border: 2px dashed var(--tg-theme-section-separator-color, #2a2a2a);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.page-block__image-edit-container:hover .page-block__image-placeholder {
    border-color: var(--tg-theme-button-color, #0078d4);
    background: rgba(255, 255, 255, 0.03);
}

.page-block__image-placeholder-icon {
    opacity: 0.3;
    color: var(--tg-theme-hint-color, #999);
}

.page-block__image-placeholder-text {
    font-size: 0.875rem;
    color: var(--tg-theme-hint-color, #999);
    line-height: 1.4;
}

/* Скрытый input для файла */
.photo-input {
    display: none;
}

/* ============= ИЗОБРАЖЕНИЕ (режим просмотра) ============= */

.page-block__image-container {
    width: 100%;                /* Контейнер занимает всю ширину (теперь от края до края!) */
    border-radius: 0;           /* Без скругления углов (изображение на весь экран) */
    overflow: hidden;           /* Обрезаем выходящие части */
    max-height: 50vh;           /* Максимальная высота = 50% экрана */
    display: flex;              /* Flexbox для центрирования */
    align-items: center;        /* Вертикальное центрирование */
    justify-content: center;    /* Горизонтальное центрирование */
    background: transparent;    /* Прозрачный фон (не мешает изображению) */
}

.page-block__image {
    max-width: 100%;            /* Максимальная ширина = 100% (не выходит за контейнер) */
    max-height: 50vh;           /* Максимальная высота = 50% высоты экрана */
    width: auto;                /* Ширина автоматически по пропорциям изображения */
    height: auto;               /* Высота автоматически по пропорциям изображения */
    object-fit: contain;        /* Вписываем изображение целиком без обрезки */
    display: block;             /* Убираем лишние отступы под изображением */
}

/* Плейсхолдер изображения */
.page-block__image--placeholder {
    opacity: 0.6;
    filter: grayscale(50%);
}

/* Заглушка при отсутствии изображения */
.page-block__image-empty {
    width: 100%;                /* Заглушка на всю ширину */
    height: 40vh;               /* Высота = 40% экрана (меньше чем max-height) */
    display: flex;              /* Flexbox для центрирования текста */
    flex-direction: column;     /* Вертикальное расположение элементов */
    align-items: center;        /* Центрирование по горизонтали */
    justify-content: center;    /* Центрирование по вертикали */
    background-color: var(--tg-theme-secondary-bg-color, #f0f0f0);  /* Светло-серый фон */
    border-radius: 8px;         /* Скругленные углы */
    color: var(--tg-theme-hint-color, #999999);  /* Серый текст */
    font-size: 16px;            /* Размер шрифта текста */
}

/* ============= ЧИСЛОВЫЕ ЗНАЧЕНИЯ ============= */
/* Одиночное число */
.page-block__value--number {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.page-block__number {
    font-size: 20px;
    font-weight: 600;
    color: var(--tg-theme-text-color, #000000);
}

/* Единица измерения */
.page-block__unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--tg-theme-hint-color, #999999);
}

/* ============= ДИАПАЗОН ЧИСЕЛ ============= */
.page-block__value--range {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.page-block__range {
    font-size: 18px;
    font-weight: 500;
    color: var(--tg-theme-text-color, #000000);
    display: flex;
    align-items: baseline;
    gap: 4px;
}

/* ============= ВЫБОР ИЗ СПИСКА (SELECT) ============= */
.page-block__value--choice {
    display: flex;
    align-items: center;
}

.page-block__choice-value {
    font-size: 16px;
    font-weight: 500;
    color: var(--tg-theme-text-color, #000000);
    padding: 4px 12px;
    background-color: var(--tg-theme-secondary-bg-color, #f0f0f0);
    border-radius: 6px;
}

/* ============= МНОГОСТРОЧНЫЙ ТЕКСТ ============= */
.page-block__value--textarea {
    width: 100%;
}

.page-block__textarea-content {
    font-size: 15px;
    line-height: 1.6;
    color: var(--tg-theme-text-color, #000000);
    white-space: pre-wrap; /* Сохраняем переносы строк */
    word-wrap: break-word; /* Переносим длинные слова */
}

/* ============= ОБЫЧНЫЙ ТЕКСТ ============= */
.page-block__value--text {
    display: flex;
    align-items: center;
}

.page-block__text {
    font-size: 16px;
    color: var(--tg-theme-text-color, #000000);
}

/* ============= КНОПКИ ДЕЙСТВИЙ ============= */
/* Контейнер кнопок (показывается только в режиме редактирования) */
.page-block__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--tg-theme-hint-color, #e0e0e0);
}

/* Кнопка действия */
.page-block__action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background-color: var(--tg-theme-button-color, #3390ec);
    color: var(--tg-theme-button-text-color, #ffffff);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.page-block__action-btn:hover {
    opacity: 0.9;
}

.page-block__action-btn:active {
    opacity: 0.8;
    transform: scale(0.98);
}

/* Кнопка редактирования */
.page-block__action-btn--edit {
    background-color: var(--tg-theme-button-color, #3390ec);
}

/* Текст кнопки */
.page-block__action-text {
    font-size: 14px;
}

/* ============= УТИЛИТАРНЫЕ КЛАССЫ ============= */
/* Скрытый элемент */
.hidden {
    display: none !important;
}

/* ============= АДАПТИВНОСТЬ ============= */
/* На маленьких экранах */
@media (max-width: 360px) {
    /* Label оставляем как есть - 1.125rem (18px) для единообразия с формами */
    
    .page-block__value {
        font-size: 15px;
    }
    
    .page-block__number {
        font-size: 18px;
    }
    
    .page-block__range {
        font-size: 16px;
    }
}