/* ============================================================
   Result_Board_Style.css - 结果看板专用样式
   顺序：
     1. 主容器网格布局（响应式）
     2. 卡片包装与标题
     3. 表格整体、表头、单元格
     4. 列宽控制
     5. 整行组颜色（不同阶段文字区分）
     6. 动态绿/红样式（✅/❌ 颜色）
     7. 前缀单词下划线、汇总行、分隔线
     8. 视图 A（大字体双列布局）
   ============================================================ */

/* ---------- 1. 外层容器网格布局 ---------- */
.board-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 1400px) {
    .board-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
    .board-container { grid-template-columns: 1fr; }
}

/* ---------- 2. 卡片包装与标题 ---------- */
.board-wrapper {
    background: #14141f;
    border-radius: 20px;
    border: 1px solid #2c2c3e;
    overflow-x: auto;
}
.board-caption {
    background: #1e1e2c;
    padding: 8px 10px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 2px solid #3a3a50;
    color: #eef2ff;
}

/* ---------- 3. 表格主体、表头、单元格 ---------- */
.result-board-table {
    width: 100%;
    border-collapse: collapse;
    background: #0e0e18;
    table-layout: fixed;
    min-width: calc(100% + 150px);
}
.result-board-table th {
    padding: 6px;
    text-align: center;
    background: #232333;
    color: #d4d4f0;
    border-right: 1px solid #2c2c3e;
    position: sticky;
    top: 0;
    font-size: 12px;
    font-weight: bold;
}
.result-board-table th:last-child { border-right: none; }
.result-board-table td {
    padding: 6px;
    border-bottom: 1px solid #262636;
    border-right: 1px solid #2c2c3e;
    vertical-align: middle;
    word-break: break-word;
    white-space: normal;
    font-size: 10px;
}
.result-board-table td:last-child { border-right: none; }

/* 阶段列 & 组结果列 */
.board-stage-cell,
.board-group-cell {
    background: #0e0e18;
    text-align: center;
    vertical-align: middle;
}
/* 子结果列 */
.board-sub-cell {
    text-align: center;
    vertical-align: middle;
}
/* 数值/条件列（左对齐） */
.board-value-cell {
    text-align: left;
    vertical-align: middle;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}
.result-board-table th:nth-child(4) {
    text-align: left;
}

/* ---------- 4. 固定列宽 ---------- */
.result-board-table th:nth-child(1),
.result-board-table td:nth-child(1) { width: 15%; }
.result-board-table th:nth-child(2),
.result-board-table td:nth-child(2) { width: 13%; }
.result-board-table th:nth-child(3),
.result-board-table td:nth-child(3) { width: 12%; }
.result-board-table th:nth-child(4),
.result-board-table td:nth-child(4) { width: 60%; }

/* ---------- 5. 整行组颜色（不同阶段文字区分） ---------- */
.board-row-group-macro td,
.board-row-group-cooldown td,
.board-row-group-call td,
.board-row-group-l1 td {
    color: #3bc0fc;
}
.board-row-group-prelim td,
.board-row-group-l2 td {
    color: #3B5BF7;
}

/* ---------- 6. 动态绿/红样式（✅/❌ 颜色） ---------- */
.result-board-table .row-sub-green {
    color: #2ecc71 !important;
}
.result-board-table .row-sub-red {
    color: #e74c3c !important;
}
.result-board-table .row-group-green {
    color: #2ecc71 !important;
}
.result-board-table .row-group-red {
    color: #e74c3c !important;
}

/* ---------- 7. 辅助样式：单词下划线、汇总行、分隔线 ---------- */
.result-board-table td .prefix-word {
    text-decoration: underline;
}
.board-summary-row {
    padding: 6px;
    text-align: left;
    font-size: 12px;
    background: #0e0e18;
}
.board-spacer-row {
    height: 4px;
    background-color: #1e1e2c;
}

/* ---------- 8. 视图 A（大字体，两列布局） ---------- */
.board-container.view-a {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.board-container.view-a .board-caption {
    font-size: 24px;
    padding: 16px 20px;
}
.board-container.view-a .result-board-table th {
    font-size: 18px;
    padding: 15px 8px;
}
.board-container.view-a .result-board-table td {
    font-size: 15px;
    padding: 12px 8px;
}