/* ==========================================================================
   ОБЩИЕ СТИЛИ ХОЛСТА (LITEGRAPH)
   ========================================================================== */

/* Убиваем встроенную сетку LiteGraph и синюю рамку фокуса */
.litegraph canvas {
    background-image: none !important;
    background-color: transparent !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Красим контекстное меню (ПКМ) */
.litegraph .litecontextmenu {
    background-color: var(--glass-bg, rgba(20, 20, 20, 0.9)) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 12px !important;
    color: #fff !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important;
    padding: 6px !important;
}

.litegraph .litecontextmenu .litemenu-entry {
    color: #fff !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    transition: 0.2s;
}

.litegraph .litecontextmenu .litemenu-entry:hover {
    background-color: var(--primary, #FABF3C) !important;
    color: #000 !important;
    font-weight: bold;
}

/* Стили полей ввода внутри нод */
.litegraph input, .litegraph select {
    background-color: #0a0a0a !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    outline: none !important;
}

.litegraph input:focus {
    border-color: var(--primary, #FABF3C) !important;
}

/* ==========================================================================
   ПАНЕЛЬ "МОИ ВОРКФЛОУ" (ЛЕВОЕ МЕНЮ)
   ========================================================================== */

.workflow-sidebar-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px;
}

.btn-new-workflow {
    background: transparent; 
    color: var(--primary); 
    border: 1px solid var(--primary);
    border-radius: 8px; 
    padding: 4px 12px; 
    font-size: 0.85rem; 
    cursor: pointer; 
    transition: var(--transition);
}

.btn-new-workflow:hover { 
    background: var(--primary-glow); 
}

/* Поиск */
.workflow-search-box {
    display: flex; 
    gap: 8px; 
    margin-bottom: 20px; 
    align-items: center; 
    position: relative;
}

.workflow-search-box input {
    flex-grow: 1; 
    background: rgba(255,255,255,0.03); 
    border: 1px solid var(--border-color);
    border-radius: 8px; 
    padding: 8px 12px 8px 32px; 
    color: #fff; 
    outline: none; 
    width: 100%; 
    transition: var(--transition);
}

.workflow-search-box input:focus { 
    border-color: var(--primary); 
    background: rgba(255,255,255,0.06); 
}

.search-icon { 
    position: absolute; 
    left: 12px; 
    color: #888; 
    font-size: 0.85rem; 
    pointer-events: none; 
}

.btn-filter {
    background: rgba(255,255,255,0.03); 
    border: 1px solid var(--border-color);
    color: #888; 
    border-radius: 8px; 
    padding: 8px 12px; 
    cursor: pointer; 
    transition: var(--transition);
}

.btn-filter:hover { 
    color: #fff; 
    border-color: #666; 
}

/* Карточки воркфлоу */
.workflow-list {
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    overflow-y: auto; 
    padding-right: 5px; 
    flex-grow: 1;
}

.workflow-card {
    background: rgba(255,255,255,0.03); 
    border: 1px solid var(--border-color);
    border-radius: 12px; 
    padding: 14px; 
    cursor: pointer; 
    transition: var(--transition); 
    position: relative;
}

.workflow-card:hover { 
    border-color: #555; 
    background: rgba(255,255,255,0.05); 
}

.workflow-card.active { 
    border-color: var(--primary); 
    background: rgba(250, 191, 60, 0.05); 
}

.workflow-card-title { 
    font-weight: 600; 
    color: #fff; 
    font-size: 0.95rem; 
    margin-bottom: 8px; 
    padding-right: 20px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.workflow-card-meta { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 0.75rem; 
    color: #888; 
}

.workflow-status { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

.workflow-status.ready { 
    color: #4ade80; 
} 

.status-dot { 
    width: 6px; 
    height: 6px; 
    border-radius: 50%; 
    background: currentColor; 
}

/* Кнопка с тремя точками (Удаление) на карточке */
.workflow-actions {
    position: absolute; 
    top: 12px; 
    right: 10px; 
    color: #888; 
    background: none; 
    border: none; 
    font-size: 1.1rem; 
    cursor: pointer; 
    padding: 0 5px; 
    transition: 0.2s;
}

.workflow-actions:hover { 
    color: #dc3545; 
}

/* Иконка звезды на карточке воркфлоу */
.workflow-fav-icon {
    position: absolute;
    top: 14px;
    right: 38px;
    color: #FABF3C !important;
    font-size: 0.9rem;
    filter: drop-shadow(0 0 8px rgba(250, 191, 60, 0.4));
    pointer-events: none;
    display: block !important;
}

/* Выпадающее меню для карточки */
.workflow-dropdown-menu {
    position: fixed;
    z-index: 10000;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    min-width: 180px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 6px;
    display: none;
}

.workflow-dropdown-menu.show {
    display: block;
}

.dropdown-item-node {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #eee;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
}

.dropdown-item-node:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary);
}

.dropdown-item-node i {
    width: 16px;
    text-align: center;
    font-size: 0.9rem;
}

.dropdown-item-node.text-danger:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #ff4d4d;
}

/* ==========================================================================
   ПЛАВАЮЩИЕ ПАНЕЛИ НА ХОЛСТЕ (ТУЛБАР И МИНИМАПА)
   ========================================================================== */

/* Верхний Тулбар */
.nodes-top-toolbar {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent; 
    border: none;
    box-shadow: none;
    padding: 0 6px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 2px;
}

.nodes-top-toolbar button {
    background: transparent;
    border: none;
    color: #999;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
    padding: 0;
    margin: 0;
}

.nodes-top-toolbar button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.nodes-top-toolbar button.active {
    color: #FABF3C;
    background: rgba(250, 191, 60, 0.15);
}

.zoom-value {
    color: #ddd;
    font-size: 13px;
    font-family: var(--font-mono, monospace);
    width: 48px;
    text-align: center;
    user-select: none;
    font-weight: 500;
}

.btn-auto-arrange {
    width: auto !important;
    padding: 0 14px !important;
    gap: 8px;
    color: #ccc !important;
    font-size: 13px !important;
    font-weight: 500;
}

.btn-auto-arrange:hover {
    color: #FABF3C !important;
    background: rgba(250, 191, 60, 0.1) !important;
}


/* Нижняя Минимапа */
.nodes-minimap-container {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100;
}

.minimap-view {
    width: 120px;
    height: 80px;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(250, 191, 60, 0.3);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    cursor: crosshair;
}

.minimap-grid-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 10px 10px;
    opacity: 0.5;
}

.node-dot {
    pointer-events: none; 
    box-shadow: 0 0 2px rgba(250, 191, 60, 0.5);
    z-index: 5;
}

.minimap-indicator {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 40%;
    height: 40%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    z-index: 10;
    transition: all 0.1s ease-out;
}

.minimap-controls {
    display: flex;
    flex-direction: column;
    background: rgba(20, 20, 20, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.minimap-controls button {
    background: transparent;
    border: none;
    color: #888;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.minimap-controls button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   АДАПТИВ (БЛОКИРОВКА МОБИЛОК)
   ========================================================================== */
.mobile-nodes-blocker {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(10px);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

@media (max-width: 991px) {
    /* Скрываем кнопку "Workflow" в боковом меню */
    .mode-button[data-mode="nodes"] {
        display: none !important;
    }
    
    /* Показываем заглушку, если экран сузили */
    .mobile-nodes-blocker {
        display: flex;
    }
    
    /* Прячем тулбары, чтобы они не накладывались на заглушку */
    .nodes-top-toolbar,
    .nodes-minimap-container {
        display: none !important;
    }
}