/**
 * Файл: /public/assets/css/axiopedia_view.css
 * Версия: v.4.008 | 15.10.2025 14:15
 * Изменения:
 * - КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ СТИЛЕЙ ДЕРЕВА: Стили полностью адаптированы под новую HTML-структуру, генерируемую скриптом v.4.078.
 * - УЛУЧШЕНИЕ UX: Кликабельными элементами теперь являются отдельно иконка-треугольник и название категории. Эффекты наведения (:hover) и выделения (.active) применяются только к названию.
 * - СТИЛИЗАЦИЯ: Стиль выделения активной категории теперь идентичен стилю активной статьи, как и требовалось.
 */

/* ================================================================== */
/* --- ОСНОВНОЙ МАКЕТ СТРАНИЦЫ --- */
/* ================================================================== */

/* Главный grid-контейнер, который делит страницу на две колонки. */
.view-grid {
    display: grid;
    /* Соотношение колонок 1:2, что соответствует Tailwind классам w-1/3 и w-2/3 */
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); 
    gap: 1.5rem; /* Соответствует Tailwind gap-6 */
    /* * Ключевое правило: высота рассчитывается от высоты окна просмотра (viewport height).
     * 85px - примерная высота хедера, 3rem - вертикальные отступы родительского контейнера (#main-content или main).
     * Это заставляет контейнер занять всё доступное пространство по высоте.
     */
    height: calc(100vh - 85px - 3rem);
}

/* * Эти правила гарантируют, что flex-элементы (наши панели) внутри grid-ячеек 
 * не будут "выталкивать" родителя и корректно ограничат свою высоту.
 */
#navigation-panel, #content-view-panel {
    min-height: 0;
}

/* ================================================================== */
/* --- СТИЛИ ДЕРЕВА НАВИГАЦИИ (ЛЕВАЯ ПАНЕЛЬ) --- */
/* ================================================================== */

/* Контейнер для строки категории (иконка + название) */
#navigation-panel .category-node .category-item { 
    display: flex; 
    align-items: center; 
}

/* Обертка для названия категории, основной интерактивный элемент */
#navigation-panel .category-name-wrapper {
    flex-grow: 1; /* Занимает все доступное пространство */
    padding: 0.25rem 0.5rem; 
    border-radius: 0.375rem; 
    cursor: pointer; 
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; 
    color: var(--text-primary);
    font-weight: 500; /* Жирность для названий категорий */
}

/* Эффект при наведении курсора на название категории */
#navigation-panel .category-name-wrapper:hover {
    background-color: var(--bg-interactive); 
}

/* Стиль для активной (выбранной) категории */
#navigation-panel .category-name-wrapper.active {
    background-color: var(--accent-primary); 
    color: var(--accent-primary-text); 
}

#navigation-panel .toggle-handle { 
    width: 16px; 
    text-align: center; 
    transition: transform 0.2s; 
    margin-right: 8px; 
    cursor: pointer; /* Делаем иконку кликабельной */
    flex-shrink: 0; /* Предотвращаем сжатие иконки */
}

#navigation-panel .category-children.hidden, 
#navigation-panel .article-list.hidden { 
    display: none; 
}

#navigation-panel .article-list .article-list-item { 
    display: block; 
    padding: 0.25rem 0.5rem; 
    margin-left: 32px; 
    border-radius: 0.375rem; 
    cursor: pointer; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    color: var(--text-secondary);
    font-weight: 300; /* Жирность для названий статей */
}

#navigation-panel .article-list .article-list-item:hover { 
    background-color: var(--bg-interactive); 
    color: var(--text-primary); 
}

#navigation-panel .article-list .article-list-item.active { 
    background-color: var(--accent-primary); 
    color: var(--accent-primary-text); 
}
    
/* ================================================================== */
/* --- СТИЛИ ОГЛАВЛЕНИЯ (TOC) (ЛЕВАЯ ПАНЕЛЬ) --- */
/* ================================================================== */

#toc-container {
    /* Переменные для быстрой настройки отступов вложенности */
    --toc-h3-padding: 1.5rem; /* Отступ для H3 */
    --toc-h4-padding: 2.5rem; /* Отступ для H4 */
}
#toc-container h3 { 
    font-size: 1.1rem; 
    font-weight: bold; 
    margin-bottom: 1rem; 
    color: var(--text-primary); 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 0.5rem; 
}
#toc-container ul { 
    list-style-type: none; 
    padding-left: 0; 
}
#toc-container a { 
    text-decoration: none; 
    color: var(--text-secondary); 
    display: block; 
    padding: 0.2rem 0.3rem; 
    border-left: 3px solid transparent; 
    transition: all 0.2s ease; 
    font-size: 0.9rem; 
}
#toc-container a:hover { 
    color: var(--text-primary); 
    background-color: var(--bg-interactive); 
    border-left-color: var(--accent-primary); 
}
#toc-container .toc-h2 { 
    font-weight: 500; 
}
#toc-container .toc-h3 { 
    padding-left: var(--toc-h3-padding); 
}
#toc-container .toc-h4 { 
    padding-left: var(--toc-h4-padding); 
    font-size: 0.85rem; 
}

/* ================================================================== */
/* --- СТИЛИ КОНТЕНТА (ПРАВАЯ ПАНЕЛЬ) --- */
/* ================================================================== */

.content-view p { margin-bottom: 1rem; line-height: 1.7; }
.content-view h2, .content-view h3, .content-view h4 { margin-top: 2rem; margin-bottom: 1rem; line-height: 1.4; }
.content-view ul, .content-view ol { margin-left: 1.5rem; margin-bottom: 1rem; }
.content-view li { margin-bottom: 0.5rem; }

/*  Явное стилизование ссылок внутри статьи для улучшения их заметности. */

#article-content-view a,
#category-wrapper a {
    color: var(--accent-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight: 500;
}

#article-content-view a:hover,
#category-wrapper a:hover {
    color: var(--accent-primary-hover);
    text-decoration: none;
}

/* --- Новые стили для глоссария --- */

/* Делаем термин интерактивным и создаем контекст для позиционирования */

.glossary-term {
    border-bottom: 2px dotted var(--accent-primary);
    border-radius: 3px;
    cursor: help;
    position: relative;
    white-space: nowrap;
}

.glossary-term:hover {
    background-color: var(--accent-primary);
    color: var(--accent-primary-text);
    /* Убираем линию при наведении для более чистого вида */
    border-bottom-color: transparent;
}

.glossary-tooltip {
    position: absolute;
    bottom: 110%; 
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    max-width: calc(100vw - 40px);
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
    text-align: left;
    white-space: normal;
}

.glossary-tooltip strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.1em;
    color: var(--accent-color);
}

.glossary-tooltip div p {
    margin-top: 0;
}

.glossary-term:hover .glossary-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Горизонтальная коррекция: сдвиг влево (когда у правого края) */
.glossary-tooltip.tooltip-adjust-left {
    left: auto;
    right: 0;
    transform: none; /* ИСПРАВЛЕНО: отменяем центрирование */
}

/* Горизонтальная коррекция: сдвиг вправо (когда у левого края) */
.glossary-tooltip.tooltip-adjust-right {
    left: 0;
    right: auto;
    transform: none; /* ИСПРАВЛЕНО: отменяем центрирование */
}

/* Вертикальная коррекция: сдвиг вниз (когда у верхнего края) */
.glossary-tooltip.tooltip-adjust-bottom {
    top: 140%;
    bottom: auto;
}

/* Стили для изображений категорий */
#category-wrapper .category-image-layout {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 0.25rem;
    object-fit: contain;
}
#category-wrapper .category-image-container {
    border-radius: 0.5rem;
    background-color: var(--bg-primary);
    padding: 0.5rem;
    border: 1px solid var(--border-color);
}
/* ================================================================== */
/* --- СТИЛИ КНОПОК ПОДПИСКИ --- */
/* ================================================================== */

/* Этот класс управляет размером обеих кнопок подписки (на статью и на категорию) */
#content-title-container .pwa-subscription-button,
#article-meta-container .pwa-subscription-button {
    /*
     * МЕСТО ДЛЯ ИЗМЕНЕНИЯ РАЗМЕРА КНОПКИ
     * Просто измените значения width и height на нужные вам.
     * Например: 2rem (32px), 1.75rem (28px), 1.5rem (24px) и т.д.
    */
    width: 4rem;
    height: 4rem;
    padding: 0.2rem; /* Небольшой внутренний отступ для иконки */
}

/* ================================================================== */
/* --- АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (< 1024px) --- */
/* ================================================================== */
@media (max-width: 1023px) {
    /* Перестраиваем грид в одну колонку */
    .view-grid {
        grid-template-columns: 1fr;
        height: auto; /* Высота по контенту */
        margin-top: 0; /* Убираем отступ, так как панель теперь абсолютная */
    }

    /* Панель навигации становится выпадающей */
    #navigation-panel {
        position: absolute;
        /* Начало изменения v.4.005 */
        top: 0; /* Стартует от верха родительского .view-grid */
        /* Конец изменения v.4.005 */
        left: 0;
        right: 0;
        z-index: 50;
        max-height: 0; /* Начальное состояние - скрыта */
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        /* Начало изменения v.4.005 */
        padding-top: 0; /* Отступ больше не нужен */
        border-radius: 0 0 0.5rem 0.5rem; /* Скругляем нижние углы */
        box-shadow: 0 8px 16px rgba(0,0,0,0.3);
        /* Конец изменения v.4.005 */
    }

    #navigation-panel.is-open {
       /* Начало изменения v.4.005 */
        max-height: calc(100vh - 100px); /* Максимальная высота при открытии, с отступом от низа */
       /* Конец изменения v.4.005 */
    }
    
    #content-view-panel {
        /* Начало изменения v.4.005 */
        margin-top: 0; /* Отступ больше не нужен, т.к. панель навигации абсолютная */
        /* Конец изменения v.4.005 */
    }
}

/* Стили для блока-заглушки */
#axiopedia-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
}