/**
 * Файл: /public/assets/css/cp_axiopedia_view.css
 * Версия: v.4.003 | 08.07.2026
 * Изменения:
 * - ДОБАВЛЕНО: Стили для визуализации дерева категорий (вертикальные линии и горизонтальные ветки).
 * - РЕАЛИЗАЦИЯ: Используется border-left на контейнерах для создания непрерывной "рельсы" и ::before на элементах для "веток".
 * - ИСПРАВЛЕНО: Убраны разрывы линий между списком статей и подкатегориями за счет обнуления margin/padding.
 */
 
/* ================================================================== */
/* --- ОСНОВНОЙ МАКЕТ СТРАНИЦЫ --- */
/* ================================================================== */

/* BEGIN v.4.045 08.07.2026: Универсальный ресайзер и SPA-панели */
.view-layout-container {
    display: grid;
    grid-template-columns: 350px 16px 1fr;
    height: 100%;
}

@media (max-width: 800px) {
    .view-layout-container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

.panel {
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    min-height: 0;
    min-width: 0;
}

/* Кастомный скролл */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 10px; }

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

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

/* Обертка для названия категории, основной интерактивный элемент */
#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; /* Предотвращаем сжатие иконки */
    z-index: 2; /* Чтобы иконка была выше линий */
    position: relative;
}

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

/* --- ВИЗУАЛИЗАЦИЯ ДЕРЕВА (ЛИНИИ) --- */

/* 1. Вертикальная "рельса" */
/* Рисуем линию на левой границе контейнеров. 
   margin-left: 7px выравнивает линию по центру иконки треугольника (16px / 2 = 8px, минус 1px border = 7px).
*/
#navigation-panel .article-list,
#navigation-panel .category-children { 
    margin-left: 7px !important; /* Сдвигаем контейнер под иконку */
    padding-left: 12px !important; /* Отступ контента от линии */
    border-left: 1px solid; /* Вертикальная линия */
    border-left-color: rgba(156, 163, 175, 0.4); /* Цвет линии (серый с прозрачностью) */
    
    /* Критически важно: убираем вертикальные отступы, чтобы линии "склеились" без разрывов */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Горизонтальные "ветки" для Статей */
#navigation-panel .article-list .article-list-item { 
    display: block; 
    padding: 0.25rem 0.5rem; 
    /* margin-left: 32px;  <-- УДАЛЕНО, теперь отступ регулируется padding-left контейнера */
    border-radius: 0.375rem; 
    cursor: pointer; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    color: var(--text-secondary);
    font-weight: 300; 
    position: relative; /* Для позиционирования псевдо-элемента */
}

/* Рисуем горизонтальную линию (тире) */
#navigation-panel .article-list .article-list-item::before {
    content: '';
    position: absolute;
    top: 50%; /* По центру высоты строки */
    left: -12px; /* Тянемся влево до вертикальной рельсы (равно padding-left контейнера) */
    width: 8px; /* Длина ветки */
    height: 1px;
    background-color: rgba(156, 163, 175, 0.4); /* Тот же цвет */
}

#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); 
}

/* 3. Горизонтальные "ветки" для Подкатегорий */
/* Здесь сложнее: нам нужно рисовать линию к .category-item внутри вложенного .category-node */
#navigation-panel .category-children .category-node {
    position: relative;
}

#navigation-panel .category-children .category-node::before {
    content: '';
    position: absolute;
    top: 1.1rem; /* Примерно центр высоты заголовка категории. Подбирается визуально. */
    left: -12px; /* Тянемся влево до вертикальной рельсы */
    width: 8px;
    height: 1px;
    background-color: rgba(156, 163, 175, 0.4);
    z-index: 1;
}
    
/* ================================================================== */
/* --- СТИЛИ ОГЛАВЛЕНИЯ (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);
}
/* ================================================================== */
/* --- СТИЛИ КНОПОК ПОДПИСКИ --- */
/* ================================================================== */
.btn-subscribed {
    background-color: var(--bg-interactive) !important;
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}
.btn-subscribed i {
    color: var(--accent-primary);
}

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