/* ====================== 05-NODE.CSS ====================== */
/* Основные стили узлов дерева + кнопки — современный деловой стиль */

.node {
    font-weight: 600;
    color: #1e2937;
    cursor: pointer;
    display: flex;
    align-items: flex-start;     /* ← важно */
    flex-wrap: wrap;             /* ← главное изменение */
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Перенос длинных названий */
    word-break: break-all;
    overflow-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    min-width: 0;
    flex: 1;
    position: relative;
}

.node:hover {
    background-color: #f8fafc;
}

.node.active {
    background-color: #dbeafe;
    border: 1px solid #bfdbfe;
}

/* ====================== ТЕГИ — ТЕПЕРЬ ПОД ТЕКСТОМ ====================== */
.node-text {
    flex: 1;
    min-width: 0;
    margin-right: auto;
}

.node-tags {
    width: 100%;
    margin-top: 4px;     /* было 6px */
    margin-left: 10px;   /* было 30px — сильно уменьшили */
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    order: 3;                    /* гарантируем порядок */
}

.node-tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.78em;
    line-height: 1;
    white-space: nowrap;
}

/* На мобильных убираем лишний отступ у тегов */
@media (max-width: 480px) {
    .node-tags {
        margin-left: 0;
        margin-top: 4px;
    }

    .node {
        padding: 9px 10px;
    }
}

/* Тёмная тема */
body.theme-dark .node {
    color: #e2e8f0;
}

body.theme-dark .node:hover {
    background-color: #334155;
}

body.theme-dark .node.active {
    background-color: #1e40af;
    border: 1px solid #3b82f6;
}

/* Leaf (листовой узел без детей) */
.leaf {
    color: #475569;
    font-weight: 500;
}

/* ====================== НОВОЕ: ИКОНКА УЗЛА ====================== */
.node-icon {
    font-size: 1.25em;           /* размер эмодзи */
    flex-shrink: 0;              /* не сжимается */
    width: 28px;                 /* фиксированная ширина для выравнивания */
    text-align: center;
    margin-right: 6px;
    line-height: 1;
}

/* Для листовых узлов (чтобы было чуть меньше) */
.node.leaf .node-icon {
    font-size: 1.15em;
}

/* Тёмная тема */
body.theme-dark .node-icon {
    filter: brightness(1.1);
}


/* Toggle (стрелка раскрытия) */
.toggle {
    display: inline-block;
    width: 20px;
    text-align: center;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    user-select: none;
    font-size: 1.1em;
}

body.theme-dark .toggle {
    color: #94a3b8;
}

/* ====================== КНОПКИ ВНУТРИ УЗЛОВ ====================== */

.node-menu-btn,
.node-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.node-menu-btn:hover,
.node-btn:hover {
    background: #e2e8f0;
    color: #334155;
    transform: scale(1.08);
}

body.theme-dark .node-menu-btn,
body.theme-dark .node-btn {
    background: #334155;
    color: #94a3b8;
}

body.theme-dark .node-menu-btn:hover,
body.theme-dark .node-btn:hover {
    background: #475569;
    color: #e2e8f0;
    transform: scale(1.08);
}

/* Кнопки действий справа (если будут использоваться) */
.node-buttons {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Каждый узел — контейнер для абсолютного меню */
.node {
    position: relative;          /* Ключевой момент! */
}

/* Меню теперь позиционируется относительно .node */
.node-menu {
    position: absolute;
    top: 100%;                   /* сразу под узлом */
    right: 0;                    /* выравнивание по правому краю кнопки ⋮ */
    margin-top: 4px;             /* небольшой отступ */
    z-index: 200;                /* выше других элементов */
}

/* Если меню не помещается снизу — показываем сверху (умное поведение) */
.node-menu.flip-up {
    top: auto;
    bottom: 100%;
    margin-bottom: 4px;
}


/* ====================== СКРЫТИЕ ТЕГОВ ====================== */
.node-tags.hidden {
    display: none !important;
}

/* ====================== ПОИСК: ПОДСВЕТКА УЗЛОВ ====================== */

/* Обычное совпадение (серый/синий фон) */
.node.match {
    background-color: #e3f2fd !important;
    border-left: 4px solid #3498db;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
}

/* Активное (текущее) совпадение — ярко выделено */
.node.active-match {
    background-color: #fff3cd !important;
    border-left: 4px solid #f39c12;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.3);
    animation: searchPulse 1.5s ease-in-out;
}

@keyframes searchPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* Тёмная тема */
body.theme-dark .node.match {
    background-color: #1e3a5f !important;
    border-left-color: #3498db;
}

body.theme-dark .node.active-match {
    background-color: #4a3f2a !important;
    border-left-color: #f39c12;
}