/* 批量工具页专属样式
   由 src/web/templates/batch/{ping,tcping,http,dns}.html 的内联 <style> 抽取合并而来。
   四页共用一份样式，其中 http/dns 额外包含 .cell-status / .select-field /
   .cell-records / .cell-count / .checkbox-line 等规则。 */

.batch-card { background: #fff; border: 1px solid #dfe8ec; border-radius: 12px; box-shadow: 0 2px 8px rgba(37,65,80,.06); padding: 20px; margin-bottom: 20px; }
.batch-form { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.batch-form-main { flex: 1; display: flex; flex-direction: column; }
.batch-form-main label { font-weight: 600; color: #254150; margin-bottom: 8px; }
.batch-form-main textarea { width: 100%; flex: 1; min-height: 180px; border: 1px solid #d0dde3; border-radius: 8px; padding: 12px; font-family: inherit; font-size: 13px; line-height: 1.5; resize: vertical; }
.batch-form-main .input-hint { margin-top: 8px; color: #91a0a9; font-size: 12px; }
.batch-form-side { width: 280px; display: flex; flex-direction: column; gap: 14px; }
.batch-form-side .btn { width: 100%; justify-content: center; }
.batch-form-side .btn-start { background: #2a9df4; border-color: #2a9df4; color: #fff; height: 46px; font-size: 15px; }
.batch-form-side .btn-start:hover { background: #1d8cd9; }
.batch-form-side .btn-secondary { background: #fff; border: 1px solid #c5d3da; color: #5c707d; height: 38px; }
.batch-form-side .btn-secondary:hover { border-color: #2a9df4; color: #2a9df4; }
.batch-form-side .form-toggles { background: #f7fafc; border: 1px solid #e6eef2; border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.batch-form-side .form-toggles > label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5c707d; cursor: pointer; }
.batch-form-side .form-toggles .toggle-row { margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.batch-form-side .form-toggles .toggle-row label { font-size: 12px; }
.batch-form-side .form-toggles .probe-options {
    display: flex;
    flex-direction: column;
    row-gap: 14px;
    width: 100%;
}
/* 每行：左表头(92px) + 右控件(1fr)，独立 grid 避免 display:contents 兼容空白 */
.form-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    column-gap: 12px;
    width: 100%;
}
.form-label {
    font-size: 13px; font-weight: 600; color: #254150;
    text-align: left; white-space: nowrap;
}

/* IP 版本：单选框 */
.segmented { display: inline-flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.segmented input[type="radio"] { width: 15px; height: 15px; accent-color: #2a9df4; cursor: pointer; margin: 0; }
.segmented label { font-size: 13px; color: #5c707d; cursor: pointer; user-select: none; }

/* 节点线路说明徽标 */
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 12px; background: #eef5fb; color: #2a6fae; font-size: 11px; }
.checkbox-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5c707d; cursor: pointer; }
.checkbox-line input[type="checkbox"] { width: 15px; height: 15px; accent-color: #2a9df4; cursor: pointer; margin: 0; }
.select-field { height: 32px; padding: 0 8px; border: 1px solid #c5d3da; border-radius: 6px; font-size: 12px; color: #44525c; background: #fff; width: 100%; }

/* DNS 输入框：复用公共 partial dns.choice，适配批量侧 form-toggles 容器 */
.batch-form-side .form-toggles .probe-options-label { font-size: 13px; font-weight: 600; color: #254150; text-align: left; white-space: nowrap; }
.batch-form-side .form-toggles .probe-dns-choice { width: 100%; gap: 10px; margin-left: 0; display: flex; align-items: center; }
.batch-form-side .form-toggles .probe-dns-choice .dns-combobox { display: flex; align-items: center; flex: 1; width: auto; }
.batch-form-side .form-toggles .probe-dns-choice .dns-input {
    flex: 1;
    width: 100%; min-width: 0; height: 32px; padding: 0 10px;
    border: 1px solid #d9e0e6; border-radius: 4px; font-size: 11px; color: #44525c;
    background: #fff; transition: border-color .15s, box-shadow .15s;
}
.batch-form-side .form-toggles .probe-dns-choice .dns-input::placeholder { color: #a6b1ba; }
.batch-form-side .form-toggles .probe-dns-choice .dns-input:focus { border-color: #4285ed; box-shadow: 0 0 0 2px rgba(66,133,237,.15); outline: none; }

.batch-results { background: #fff; border: 1px solid #dfe8ec; border-radius: 12px; box-shadow: 0 2px 8px rgba(37,65,80,.06); overflow: hidden; }
.batch-results-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eef4f7; flex-wrap: wrap; }
.batch-tabs { display: flex; gap: 6px; }
.batch-tabs button { background: #f1f7fb; border: none; border-radius: 6px; padding: 6px 12px; font-size: 13px; color: #5c707d; cursor: pointer; }
.batch-tabs button.is-active { background: #2a9df4; color: #fff; }
.batch-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #5c707d; }
.batch-progress { width: 120px; height: 8px; background: #e6eef2; border-radius: 4px; overflow: hidden; }
.batch-progress-bar { height: 100%; width: 0%; background: #2a9df4; transition: width 0.3s; }
.batch-table-wrap { overflow-x: auto; }
.batch-matrix-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.batch-matrix-table th { background: #f7fafc; color: #5c707d; font-weight: 600; padding: 10px 8px; border-bottom: 1px solid #dfe8ec; white-space: nowrap; position: sticky; top: 0; text-align: left; }
.batch-matrix-table td { padding: 10px 8px; border-bottom: 1px solid #eef4f7; vertical-align: top; text-align: center; }
.batch-matrix-table td:first-child, .batch-matrix-table th:first-child { position: sticky; left: 0; background: #fff; z-index: 2; min-width: 40px; }
.batch-matrix-table th:first-child { background: #f7fafc; }
.batch-matrix-table td:nth-child(2), .batch-matrix-table th:nth-child(2) { position: sticky; left: 40px; background: #fff; z-index: 2; min-width: 90px; max-width: 90px; text-align: left; }
.batch-matrix-table th:nth-child(2) { background: #f7fafc; }
/* 5 大线路栏目配色 + 等宽均衡 + 超出省略 */
.batch-matrix-table th.col-telecom { color: #c0392b; min-width: 96px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-matrix-table th.col-unicom { color: #2980b9; min-width: 96px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-matrix-table th.col-mobile { color: #27ae60; min-width: 96px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 其他国内：云机房与中小运营商节点，配色与三大运营商区分开 */
.batch-matrix-table th.col-domestic_other { color: #d68910; min-width: 96px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-matrix-table th.col-overseas { color: #8e44ad; min-width: 96px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-target { font-weight: 500; color: #254150; display: inline-block; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.batch-matrix-table td.cell-pending { color: #b0bcc4; font-style: italic; text-align: left; }
.cell-status { font-size: 13px; font-weight: 700; text-align: left; }
.cell-status.ok { color: #27ae60; }
.cell-status.warn { color: #f1c40f; }
.cell-status.err { color: #e74c3c; }
.cell-latency { font-size: 13px; font-weight: 700; color: #2ecc71; text-align: left; margin-top: 2px; }
.cell-latency.timeout { color: #e74c3c; }
.cell-latency.partial { color: #f1c40f; }
.cell-records { font-size: 12px; color: #254150; line-height: 1.5; text-align: left; word-break: break-all; }
.cell-records .rec { display: block; }
.cell-count { font-size: 11px; color: #91a0a9; margin-top: 2px; text-align: left; }
.cell-detail { color: #91a0a9; font-size: 11px; margin-top: 2px; line-height: 1.4; text-align: left; }
.cell-detail span { display: block; }
.batch-empty { padding: 40px; text-align: center; color: #91a0a9; }