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

.node {
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Курсор по умолчанию — в режиме скролла */
.node {
    cursor: default;
}

/* ====================== HOVER ====================== */
.node:hover {
    background-color: var(--bg-surface) !important;
    z-index: 80;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ====================== DRAG & DROP РЕЖИМ ====================== */
.drag-drop-active .node,
body.reorder-enabled .node {
    cursor: grab !important;
}

.drag-drop-active .node:active,
body.reorder-enabled .node:active {
    cursor: grabbing !important;
}

/* ====================== АКТИВНЫЙ УЗЕЛ ====================== */
.node.active {
    background-color: #dbeafe !important;
    border: 1px solid #bfdbfe;
    z-index: 90;
}

/* ====================== ПОИСК И ВЫДЕЛЕНИЕ ====================== */
.node.match {
    background: #e3f2fd !important;
    background-image: none !important;
    border-left: 4px solid var(--accent);
    z-index: 85;
}

.node.active-match {
    background: #fff3cd !important;
    background-image: none !important;
    border-left: 4px solid #f59e0b;
    z-index: 95;
}

/* ====================== DRAG-AND-DROP СОСТОЯНИЯ ====================== */
.node.dragging,
.node.dragging-touch {
    opacity: 0.35;
    transform: scale(0.93);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    z-index: 150 !important;
}

.node.drag-over {
    border: 2px dashed #27ae60 !important;
    background: #e8f5e9 !important;
    box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.3) !important;
    z-index: 120;
}

/* ====================== ТЁМНАЯ ТЕМА ====================== */
body.theme-dark .node:hover {
    background-color: var(--bg-surface) !important;
    z-index: 80;
}

body.theme-dark .node.active {
    background-color: #1e40af !important;
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
    z-index: 90;
}

body.theme-dark .node.drag-over {
    border-color: #22c55e !important;
    background: #052e16 !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.4) !important;
    z-index: 120;
}

body.theme-dark .node.dragging,
body.theme-dark .node.dragging-touch {
    opacity: 0.4;
    z-index: 150 !important;
}

/* ====================== ЗАЩИТА КОНТЕКСТНОГО МЕНЮ УЗЛОВ ====================== */
.node:hover .node-menu,
.node.active .node-menu,
.node.match .node-menu,
.node.active-match .node-menu,
.node.dragging .node-menu,
.node.drag-over .node-menu {
    z-index: 400 !important;
}

/* Дополнительная защита от тапа */
.node * {
    -webkit-tap-highlight-color: transparent;
}

/* ====================== РЕЖИМ ПЕРЕТАСКИВАНИЯ (REORDER MODE) ====================== */
/* Скрываем ТОЛЬКО меню УЗЛОВ дерева (класс .node-menu) */
body.reorder-enabled .node-menu-btn,
body.reorder-enabled .node-menu {
    display: none !important;
}

/* ====================== ЗАЩИТА ГЛАВНОГО МЕНЮ И КНОПКИ В ЗАГОЛОВКЕ ====================== */
/* Главное меню и кнопка ⋮ всегда работают, независимо от режима */
body.reorder-enabled #controlPanel,
body.reorder-enabled .header-menu-btn,
body.reorder-enabled .header-menu,
body.reorder-enabled .control-btn,
body.reorder-enabled .reorder-toggle-btn {
    pointer-events: auto !important;
    z-index: 10000 !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Страховка для всех дочерних элементов */
body.reorder-enabled #controlPanel * {
    pointer-events: auto !important;
}