/* 拓扑图基础样式 */
.topology-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 30, 62, 0.1);
    overflow: hidden;
}

/* 节点基础样式 */
.node {
    stroke: #333;
    stroke-width: 1.5px;
    cursor: pointer;
}

.slack-node {
    fill: #ff5722;
}

.pv-node {
    fill: #4caf50;
}

.pq-node {
    fill: #2196f3;
}

/* 连接线样式 */
.link {
    fill: none;
    stroke: #555;
    stroke-width: 2px;
    stroke-opacity: 0.6;
}

/* 节点标签 */
.node-label {
    fill: white;
    font-size: 12px;
    text-anchor: middle;
    pointer-events: none;
    font-weight: bold;
}

/* 节点数据显示样式 */
.node-data text {
    fill: white;
    font-size: 11px;
    text-anchor: middle;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 节点数据背景 */
.node-data-bg {
    fill: rgba(0, 0, 0, 0.3);
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 0.5px;
}

/* 通用参数值样式 */
.param-value {
    fill: #e4e4e4;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* 可编辑参数样式 */
.param-value.editable {
    fill: #64ffda;
    font-weight: 500;
    cursor: pointer;
}

.param-value.editable:hover {
    fill: #76ffff;
    text-shadow: 0 0 4px rgba(100, 255, 218, 0.7);
}

/* 计算后参数样式 */
.param-value.calculated {
    fill: #ffab40;
    font-weight: bold;
}

/* 节点类型标签 */
.node-type-label {
    fill: rgba(255, 255, 255, 0.5);
    font-size: 10px;
}

/* 电压和相角样式 */
.voltage-value {
    fill: #ffeb3b;
}

.angle-value {
    fill: #81d4fa;
}

/* 功率显示样式 */
.power-value {
    fill: #e0e0e0;
}

.power-separator {
    fill: #a0a0a0;
    font-size: 11px;
}

.p-value {
    fill: #ff9800;
}

.q-value {
    fill: #03a9f4;
}

/* 活跃连接线样式 */
.link.active {
    stroke: #948341;
    stroke-width: 3px;
}

/* 流动效果线条 */
.power-flow {
    fill: none;
    stroke-width: 2.5px;
    stroke-dasharray: 6 3;
    stroke-linecap: round;
}

/* 功率流箭头样式 */
.power-flow-arrow {
    stroke-width: 2.5px;
    fill: none;
}

.p-flow-arrow {
    stroke: #ff9800;
}

.q-flow-arrow {
    stroke: #64ffda;
}

/* 编辑模式样式 */
.topology-container.edit-mode {
    border: 2px dashed #ff5722 !important;
    position: relative;
    background-color: rgba(255, 87, 34, 0.05);
}

.topology-container.edit-mode::before {
    content: "编辑模式 - 拖拽节点调整布局";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff5722;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    z-index: 100;
    opacity: 0.9;
    white-space: nowrap;
}

/* 编辑模式下的节点样式 */
.edit-mode .node {
    cursor: move;
    stroke-dasharray: 3 2;
    stroke-width: 2px;
    filter: brightness(1.2) !important;
}
/* 普通模式下的节点 - 禁用拖拽 */
.node {
    cursor: default;
}

/* 编辑模式下的节点 - 允许拖拽 */
.edit-mode .node {
    cursor: move;
    stroke-dasharray: 3 2;
    stroke-width: 2px;
    filter: brightness(1.2) !important;
}

/* 复数形式参数样式 */
.voltage-complex {
    fill: #ffeb3b;
    font-size: 13px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.power-complex {
    fill: #ff9800;
    font-size: 13px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.voltage-complex.editable, .power-complex.editable {
    fill: #64ffda;
    cursor: pointer;
}

.voltage-complex.editable:hover, .power-complex.editable:hover {
    fill: #76ffff;
    text-shadow: 0 0 8px rgba(100, 255, 218, 0.9);
}

.voltage-complex.calculated, .power-complex.calculated {
    fill: #ffab40;
    font-weight: bold;
}

/* 复数参数表单样式 */
.form-group-complex {
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
}

.form-group-complex.disabled {
    opacity: 0.7;
}

.complex-header {
    font-size: 14px;
    font-weight: 500;
    color: #e4e6eb;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
}

/* 修改表单输入框布局 */
.complex-inputs {
    display: flex;
    flex-direction: column;  /* 改为纵向布局 */
    gap: 10px;
}

.input-pair {
    width: 100%;  /* 占满宽度 */
}

/* 或者保持横向布局但限制宽度 */
.complex-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.input-pair {
    flex: 1 0 100%;  /* 修改为每行一个输入框 */
}

/* 对于宽屏可以考虑恢复横向布局 */
@media (min-width: 500px) {
    .input-pair {
        flex: 0 0 calc(50% - 5px);  /* 宽屏时两列布局 */
    }
}

.complex-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.input-pair {
    flex: 1;
    min-width: 100px;
}

.input-pair.disabled input {
    background: rgba(60, 65, 78, 0.5);
    color: #7a7e88;
}

.complex-note {
    width: 100%;
    display: block;
    font-size: 11px;
    color: #7a7e88;
    margin-top: 5px;
    font-style: italic;
}

/* 节点数据背景 */
.node-data-bg {
    fill: rgba(0, 0, 0, 0.3);
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 0.5px;
}

/* 数据框样式 */
.data-bg {
    fill: rgba(20, 30, 48, 0.8);
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 0.5px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* 连接线样式 */
.data-connector {
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 1px;
    stroke-dasharray: 2 2;
}

/* 参数标签样式 */
.param-label {
    fill: #c0c0c0;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* 节点编号样式 */
.node-id {
    fill: #7f9db9;
    font-size: 11px;
    font-weight: bold;
}

/* 节点类型标签样式 */
.node-type-badge {
    fill: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

/* 电压值样式 */
.voltage-complex {
    fill: #ffeb3b;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* 功率值样式 */
.power-complex {
    fill: #ff9800;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* 可编辑参数样式 */
.param-value.editable {
    fill: #64ffda;
    cursor: pointer;
}

.param-value.editable:hover {
    fill: #76ffff;
    text-shadow: 0 0 4px rgba(100, 255, 218, 0.7);
}

/* 计算结果样式 */
.param-value.calculated {
    fill: #ffab40;
    font-weight: bold;
}

/* 支路潮流标签样式 */
.branch-label-bg {
    fill: rgba(20, 30, 48, 0.8);
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 0.5px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.branch-p-label {
    font-size: 12px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.branch-q-label {
    font-size: 12px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.branch-loss-label {
    font-size: 11px;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* 流动箭头样式 */
.flow-arrow {
    fill: none;
    stroke-width: 1.5px;
}

.p-flow-arrow {
    stroke: #ffab40;
}

.q-flow-arrow {
    stroke: #64ffda;
}

/* 节点功率分配标签 */
.node-power-distribution text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* 支路标签连接线 */
.branch-label-connector {
    stroke-dasharray: 3, 3;
    pointer-events: none;
}

/* 支路标签拖动时的样式 */
.branch-label.dragging .branch-label-bg {
    stroke: #ff9800;
    stroke-width: 2px;
}

/* 支路标签鼠标悬停效果 */
.branch-label:hover .branch-label-bg {
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 1.5px;
}

/* 支路标签标题 */
.branch-title {
    font-weight: bold;
    font-size: 10px;
}

/* 节点功率分配详情框样式 */
.node-power-distribution {
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}

.node-power-distribution text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.node-power-distribution .close-button:hover circle {
    fill: rgba(255, 87, 34, 1);
}

/* 功率方向指示 */
.flow-direction-out {
    fill: #ff9800;
}

.flow-direction-in {
    fill: #64ffda;
}

/* 节点功率分配连接线 */
.node-power-connector {
    stroke-dasharray: 3, 3;
    pointer-events: none;
}

/* 节点功率分配框样式 */
.node-power-distribution {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* 节点功率分配详情框样式 */
.node-power-distribution {
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
    z-index: 10;
}

.node-power-distribution text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.node-power-connector, .branch-label-connector {
    stroke-dasharray: 3, 3;
    pointer-events: none;
}

.branch-label {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    z-index: 5;
}

.branch-label-bg {
    fill: rgba(20, 30, 48, 0.95);
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1px;
}

.branch-label.dragging .branch-label-bg {
    stroke: #ff9800;
    stroke-width: 2px;
}

/* 功率流箭头样式 */
.power-flow-arrow {
    stroke-width: 3px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}