/**
 * PERT 视图专属样式
 * 路径: css/pert-styles.css
 * 版本: Epsilon2
 * 包含: 手柄样式、临时连线、交互效果
 */

/* ======================
   PERT 手柄样式
   ====================== */

.pert-handle {
    transition: all 0.3s ease;
}

.pert-handle .handle-circle {
    transition: all 0.3s ease;
}

.pert-handle .handle-icon {
    transition: all 0.3s ease;
}

.pert-handle .handle-glow {
    transition: all 0.3s ease;
}

.pert-handle .handle-label {
    transition: all 0.3s ease;
}

/* 手柄悬停效果 */
.pert-handle:hover .handle-circle {
    stroke: #5568d3;
    stroke-width: 3;
    filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.6));
}

.pert-handle:hover .handle-icon {
    fill: #5568d3;
    transform: scale(1.2);
}

.pert-handle:hover .handle-glow {
    opacity: 1 !important;
    fill: rgba(102, 126, 234, 0.3);
}

.pert-handle:hover .handle-label {
    opacity: 1 !important;
}

/* 左侧手柄特殊样式 */
.pert-handle-left:hover .handle-circle {
    transform: translateX(-2px);
}

/* 右侧手柄特殊样式 */
.pert-handle-right:hover .handle-circle {
    transform: translateX(2px);
}

/* 拖拽中的手柄 */
.pert-handle.linking .handle-circle {
    fill: #06b6d4;
    stroke: #06b6d4;
    stroke-width: 3;
    r: 10;
    animation: handlePulse 1s ease-in-out infinite;
}

.pert-handle.linking .handle-icon {
    fill: white;
}

/* 可放置目标的手柄 */
.pert-handle.can-drop .handle-circle {
    fill: #10b981;
    stroke: #10b981;
    stroke-width: 3;
    r: 10;
    animation: handleGlow 0.8s ease-in-out infinite;
}

.pert-handle.can-drop .handle-icon {
    fill: white;
}

/* 手柄脉冲动画 */
@keyframes handlePulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* 手柄发光动画 */
@keyframes handleGlow {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(16, 185, 129, 1));
    }
}

/* ======================
   临时连线样式
   ====================== */

#pertTempLine {
    stroke: #06b6d4;
    stroke-width: 3;
    stroke-dasharray: 5, 5;
    animation: dashMove 0.5s linear infinite;
    filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.6));
}

@keyframes dashMove {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 10;
    }
}

/* ======================
   PERT 节点拖拽状态
   ====================== */

.pert-node.linking-source .node-rect {
    stroke: #06b6d4 !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.6));
}

.pert-node.linking-target .node-rect {
    stroke: #10b981 !important;
    stroke-width: 3 !important;
    animation: targetPulse 1s ease-in-out infinite;
}

@keyframes targetPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(16, 185, 129, 1));
    }
}

/* ======================
   响应式
   ====================== */

@media (max-width: 768px) {
    .pert-handle .handle-circle {
        r: 6;
    }
    
    .pert-handle .handle-icon {
        font-size: 8px;
    }
    
    .pert-handle .handle-label {
        font-size: 9px;
    }
}

/* ======================
   打印样式
   ====================== */

@media print {
    .pert-handle {
        display: none !important;
    }
    
    #pertTempLine {
        display: none !important;
    }
}
/* ======================
   PERT 视图全屏适配
   ====================== */

/* 确保主容器填满剩余空间 */
#pertContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* 关键：允许 flex 子项收缩 */
    overflow: hidden;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    margin-bottom: 15px;
}

/* 内部包装器也要填满 */
.pert-wrapper {
    height: 100% !important; /* 强制填满父容器 */
    width: 100% !important;
}

.pert-canvas {
    flex: 1;
    height: 100%; /* 确保 canvas 占满剩余高度 */
}

/* ======================
   依赖连线交互样式
   ====================== */

/* 增加点击区域和鼠标手势 */
.pert-connection {
    pointer-events: stroke !important; /* 允许鼠标捕捉线条 */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 为了更容易点击，我们可以增加一根透明的宽线条作为点击热区，
   或者简单地利用 SVG 的 stroke-width 增加悬停效果。
   这里采用悬停加粗方案。 */

.pert-connection:hover {
    stroke-width: 6 !important; /* 悬停时显著加粗 */
    stroke: #ef4444 !important; /* 悬停变红，提示可删除 */
    opacity: 1 !important;
    z-index: 100; /* 尝试提升层级（SVG中取决于DOM顺序，但在视觉上变粗） */
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}

/* 正在被删除时的动画 */
.pert-connection.deleting {
    stroke-dasharray: 10;
    animation: dashDelete 0.5s linear infinite;
    opacity: 0.5;
}

@keyframes dashDelete {
    to { stroke-dashoffset: -20; }
}