/* =============================================================================
 * 网络拓扑工坊 · Topology Studio —— Module A 批量初始化 UI 样式
 * 沿用全局设计变量（--bg / --panel / --accent / --mono …），适配深/浅主题。
 * ========================================================================== */

/* 左栏分区提示 */
.batch-hint {
  margin: 6px 2px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.sbtn.full { width: 100%; }

/* ============================ 模态框 ============================ */
.batch-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(3, 7, 14, .62);
  backdrop-filter: blur(2px);
}
.batch-modal.open { display: flex; }

.batch-box {
  width: min(960px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.batch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.batch-title { font-size: 15px; font-weight: 700; color: var(--text); }
.batch-close {
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
}
.batch-close:hover { color: var(--text); border-color: var(--border-2); }

.batch-body {
  padding: 14px 16px 18px;
  overflow-y: auto;
}

.batch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.batch-label { font-size: 12px; color: var(--text-2); }

.batch-input {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
.batch-input:focus { outline: none; border-color: var(--accent); }

/* 安全基线 */
.batch-baseline {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.batch-baseline-title { font-size: 12px; color: var(--text-2); display: block; margin-bottom: 8px; }
.batch-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.batch-checks .chk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.batch-checks .chk input { accent-color: var(--accent); }

.batch-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.batch-summary { font-size: 12px; color: var(--muted); }

/* 分片生成进度条（大清单） */
.batch-progress {
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent, #38bdf8);
  background: linear-gradient(90deg, rgba(56, 189, 248, .16), rgba(56, 189, 248, .04));
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}
.batch-progress[hidden] { display: none; }

/* 结果区 */
.batch-results { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.batch-empty { font-size: 13px; color: var(--muted); padding: 12px; }
.batch-errors {
  font-size: 12px;
  color: var(--alarm);
  background: rgba(251, 191, 36, .08);
  border: 1px solid rgba(251, 191, 36, .28);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  line-height: 1.5;
}

.batch-device {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  overflow: hidden;
}
.bd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel-2);
  cursor: pointer;
  user-select: none;
}
.bd-toggle { color: var(--text-2); font-size: 12px; transition: transform .15s ease; }
.batch-device.collapsed .bd-toggle { transform: rotate(-90deg); }
.bd-title { font-weight: 600; color: var(--text); font-size: 13px; }
.bd-meta { font-size: 11.5px; color: var(--muted); }
.bd-copy { margin-left: auto; }
/* 设备级提示（层级关键字识别 / 无网管口设备忽略清单 IP·VLAN） */
.bd-note-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 10.5px;
  color: var(--alarm);
  background: rgba(251, 191, 36, .12);
  border: 1px solid rgba(251, 191, 36, .3);
}
/* 生成失败的设备：不只靠颜色区分，另配文字标记与左边框 */
.bd-note-tag.fail {
  color: var(--danger, #f87171);
  background: rgba(248, 113, 113, .14);
  border-color: rgba(248, 113, 113, .4);
}
.batch-device.failed { border-left: 3px solid var(--danger, #f87171); }
.bd-notes {
  padding: 6px 10px 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}

.bd-config {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
  border-top: 1px solid var(--border);
}
.batch-device.collapsed .bd-config { display: none; }

/* 复用既有按钮风格 */
.tbtn.small { padding: 4px 10px; font-size: 12px; }
.tbtn.ghost { background: transparent; border-color: var(--border-2); color: var(--accent); }
.tbtn.ghost:hover { background: rgba(56, 189, 248, .12); }