/* ==================== 全局样式 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: #f5f6fa;
    color: #333;
    min-height: 100vh;
}

.app-container {
    display: flex;
    min-height: 100vh;
}

/* ==================== 左侧边栏 ==================== */
.sidebar {
    width: 340px;
    background: #fff;
    padding: 24px 22px;
    border-right: 1px solid #e8eaed;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
}

/* 左侧底部署名 */
.sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #eef0f2;
}

.sidebar-footer a {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #9aa0a6;
    text-decoration: none;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sidebar-footer a:hover {
    color: #1a73e8;
}

.action-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.action-buttons .btn {
    width: auto;
    flex: 1 1 0;
}

.btn {
    width: 100%;
    height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.btn:active {
    transform: translateY(0);
}

.btn-outline {
    background: #f0f2f5;
    color: #555;
    border: 1px solid #d0d3d8;
}

.btn-outline:hover {
    background: #e4e7ec;
}

.btn-primary {
    background: #00b36b;
    color: #fff;
}

.btn-primary:hover {
    background: #00a061;
}

.btn-purple {
    background: #6c5ce7;
    color: #fff;
    width: 100%;
    height: 42px;
}

.btn-purple:hover {
    background: #5a4bd1;
}

/* 布局按钮：无论「确定布局」(紫) 还是「修改布局」(描边) 样式，顶部间距保持一致，避免锁定后上移 */
#layoutBtn {
    margin-top: 8px;
}

.btn-generate {
    background: linear-gradient(135deg, #00b36b 0%, #00a061 100%);
    color: #fff;
    font-size: 14px;
    height: 42px;
    width: calc(100% - 32px);
    margin: 0 16px;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,179,107,0.3);
}

.btn-generate:hover {
    background: linear-gradient(135deg, #00a061 0%, #008c54 100%);
    box-shadow: 0 6px 20px rgba(0,179,107,0.4);
}

.hint-text {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
}

.hint-text-small {
    font-size: 11px;
    color: #aaa;
    line-height: 1.4;
    margin-top: 4px;
}

.btn-export-pdf {
    background: linear-gradient(135deg, #0984e3 0%, #0070c0 100%);
    color: #fff;
    font-size: 14px;
    height: 42px;
    width: calc(100% - 32px);
    margin: 0 16px;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(9,132,227,0.3);
}

.btn-export-pdf:hover:not(:disabled) {
    background: linear-gradient(135deg, #0070c0 0%, #005ea8 100%);
    box-shadow: 0 6px 20px rgba(9,132,227,0.4);
}

.btn-export-pdf:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

/* ==================== 区块 ==================== */
.section {
    background: #fafbfc;
    border-radius: 10px;
    padding: 16px;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-row label {
    font-size: 14px;
    color: #555;
    white-space: nowrap;
}

.num-input {
    width: 60px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}

.num-input:focus {
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108,92,231,0.1);
}

/* VIP 座配置行 */
.vip-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #555;
    white-space: nowrap;
    cursor: pointer;
}

.vip-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #6c5ce7;
    cursor: pointer;
}

/* ==================== 复选框组 ==================== */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    padding: 8px 12px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #eee;
    transition: all 0.2s;
}

.checkbox-label:hover {
    background: #f8f9fa;
    border-color: #ddd;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #6c5ce7;
    cursor: pointer;
}

/* ==================== 主区域 ==================== */
.main-area {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==================== 讲台 ==================== */
/* 作为座位网格顶部第一行，宽度由 grid-column span 控制（= 前 3 个座位卡片） */
.podium {
    height: 85px; /* 与座位卡片高度(SEAT_H)一致 */
    background: #fdcb6e;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #2d3436;
    letter-spacing: 4px;
    box-shadow: 0 2px 8px rgba(253,203,110,0.3);
}

/* ==================== 底部列间分隔/合并按钮 ==================== */
/* 按钮容器：底部按钮行的网格单元（窄轨道），作为按钮绝对定位的参照 */
.col-btn-wrap {
    position: relative;
}

/* 分隔态容器：底部高亮背景表示过道 */
.col-btn-wrap.separated {
    background: #e6f7f1;
    border-radius: 6px;
}

/* 分隔态走道：贯穿座位行的绿色高亮条（宽 20px），居中于 30px 分隔轨道内（左右各留 5px） */
.col-divider-lane {
    width: 20px;
    margin: 0 auto;
    background: #d4f3e9;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #9fe0c9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 2px;
    color: #2e9c78;
    writing-mode: vertical-rl;
    text-orientation: upright;
    opacity: 0.85;
}

/* 水平按钮（参考 1.png 样式），居中溢出定位，不受窄轨道限制 */
.col-config-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 4px 14px;
    border: 1.5px solid transparent;
    border-radius: 5px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* 合并态按钮：紫色实心 —— 当前为「合并」（间距 5px），点击切换为分隔 */
.col-config-btn.state-merge {
    background: #6c5ce7;
    border-color: #6c5ce7;
}

.col-config-btn.state-merge:hover {
    background: #5a4bd6;
    border-color: #5a4bd6;
}

/* 分隔态按钮：绿色实心 —— 当前为「分隔」（间距 20px），点击切换为合并 */
.col-config-btn.state-separator {
    background: #00b894;
    border-color: #00b894;
}

.col-config-btn.state-separator:hover {
    background: #00a383;
    border-color: #00a383;
}

/* 布局锁定后：分隔/合并按钮与禁用输入不可操作 */
.col-config-btn:disabled,
.col-config-btn.locked {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

.num-input:disabled,
.vip-checkbox:disabled {
    background: #f1f3f5;
    color: #adb5bd;
    cursor: not-allowed;
    opacity: 0.7;
}

/* 普通按钮禁用态（如未上传名单时的「确定布局」） */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

/* ==================== 座位网格 ==================== */
.seating-grid {
    display: grid;
    position: relative; /* 讲台绝对定位的参照 */
    gap: 5px 0; /* 行间距 5px；列间距由分隔轨道控制，故列间距为 0 */
    width: max-content;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.seat-cell {
    width: 135px;
    height: 85px;
    border: 1.5px solid #e2e8f0;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #a0aec0;
    background: #fafbfc;
    transition: all 0.25s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.seat-cell:hover {
    border-color: #a0aec0;
    background: #f0f4f8;
    transform: scale(1.02);
    z-index: 2;
}

.seat-cell.occupied {
    background: linear-gradient(135deg, #e8f4fd 0%, #dbeafe 100%);
    border-color: #93c5fd;
    color: #1e40af;
    font-weight: 500;
    font-size: 13px;
}

/* 男/女性别着色（覆盖默认 occupied 蓝色） */
.seat-cell.occupied.gender-male {
    background: linear-gradient(135deg, #e8f4fd 0%, #bfdbfe 100%);
    border-color: #60a5fa;
    color: #1e40af;
}
.seat-cell.occupied.gender-female {
    background: linear-gradient(135deg, #fde8f3 0%, #fbcfe8 100%);
    border-color: #f472b6;
    color: #9d174d;
}
.seat-cell.occupied.gender-male:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59,130,246,0.18);
}
.seat-cell.occupied.gender-female:hover {
    background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 100%);
    border-color: #ec4899;
    box-shadow: 0 4px 12px rgba(236,72,153,0.18);
}

.seat-cell.occupied:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}

.seat-cell .seat-name {
    text-align: center;
    line-height: 1.2;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* 姓名下方的补充信息行：身高 -- 视力 -- 成绩（仅数字，整条统一样式） */
.seat-cell .seat-meta {
    margin-top: 5px;
    width: 100%;
    padding: 0 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    opacity: 0.9;
    white-space: nowrap;
}
.seat-cell .seat-meta .meta-val {
    flex: 0 0 auto;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.seat-cell .seat-meta .meta-sep {
    flex: 0 0 auto;
    margin: 0;
    color: #94a3b8;
    opacity: 0.7;
    font-weight: 400;
}

/* 座位图例 */
.seat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #64748b;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1.5px solid transparent;
    display: inline-block;
}
.legend-male { background: linear-gradient(135deg, #e8f4fd 0%, #bfdbfe 100%); border-color: #60a5fa; }
.legend-female { background: linear-gradient(135deg, #fde8f3 0%, #fbcfe8 100%); border-color: #f472b6; }
.legend-vip { background: linear-gradient(135deg, #fff7e6 0%, #ffe9b8 100%); border-color: #f0b429; }
.legend-empty { background: #fafbfc; border-color: #e2e8f0; }

/* VIP 座位卡片（讲台两侧，样式区别于普通座位） */
.seat-cell.vip-seat {
    background: linear-gradient(135deg, #fff7e6 0%, #ffe9b8 100%);
    border-color: #f0b429;
    color: #b7791f;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(240,180,41,0.25);
}

.seat-cell.vip-seat .seat-name {
    color: #b7791f;
    font-size: 13px;
    letter-spacing: 1px;
}

/* VIP 已占用（手动拖入学生）时，姓名与补充信息同样放大加粗、金色 */
.seat-cell.vip-seat.occupied .seat-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.seat-cell.vip-seat .seat-meta {
    color: #b7791f;
}

/* 已放入学生的 VIP 座位：保留金色身份，不被普通 occupied 蓝色覆盖 */
.seat-cell.vip-seat.occupied {
    background: linear-gradient(135deg, #fff7e6 0%, #ffe9b8 100%);
    border-color: #f0b429;
    color: #b7791f;
}
.seat-cell.vip-seat.occupied:hover {
    background: linear-gradient(135deg, #ffe9b8 0%, #ffd98a 100%);
    border-color: #e0a417;
    box-shadow: 0 4px 12px rgba(240,180,41,0.3);
}

/* 拖拽交换座位 */
.seat-cell[draggable="true"] {
    cursor: grab;
}
.seat-cell[draggable="true"]:active {
    cursor: grabbing;
}
.seat-cell.dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.seat-cell.drop-zone {
    outline: 2px dashed #6c5ce7;
    outline-offset: -2px;
    background: #f3f0ff;
    box-shadow: 0 0 0 3px rgba(108,92,231,0.12);
}

/* 规则子选项（性别搭配下的 男女/同性 + 女左/男左） */
.sub-options {
    margin: 8px 0 4px;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}
.radio-label input[type="radio"] {
    accent-color: #6c5ce7;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.checkbox-label:has(input[type="checkbox"]:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 行号指示器（可选） */
.seating-grid::before {
    content: '';
    position: absolute;
}

/* ==================== 弹窗 ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: #fff;
    border-radius: 16px;
    width: 480px;
    max-width: 90vw;
    max-height: 70vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: modalIn 0.25s ease-out;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eee;
}

.modal-header h3 {
    font-size: 17px;
    font-weight: 600;
}

.close-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: all 0.2s;
}

.close-btn:hover {
    background: #eee;
    color: #333;
}

.modal-body {
    padding: 16px 22px;
    max-height: 400px;
    overflow-y: auto;
}

.student-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background 0.15s;
}

.student-item:nth-child(even) {
    background: #fafbfc;
}

.student-item:hover {
    background: #f0f4ff;
}

.student-index {
    width: 28px;
    height: 28px;
    background: #e8f0fe;
    color: #1967d2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.student-info {
    margin-left: 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.student-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

.student-detail {
    font-size: 11px;
    color: #999;
    margin-top: 0;
    white-space: nowrap;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #eee;
}

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e8eaed;
    }

    .main-area {
        padding: 16px;
    }

    .seating-grid {
        padding: 12px;
        gap: 6px;
    }

    .seat-cell {
        min-height: 42px;
        font-size: 12px;
    }
}

/* ==================== 动画效果 ==================== */
@keyframes seatAppear {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.seat-cell.occupied {
    animation: seatAppear 0.3s ease-out backwards;
}

.seat-cell:nth-child(1) { animation-delay: 0.01s; }
.seat-cell:nth-child(2) { animation-delay: 0.02s; }
.seat-cell:nth-child(3) { animation-delay: 0.03s; }
.seat-cell:nth-child(4) { animation-delay: 0.04s; }
.seat-cell:nth-child(5) { animation-delay: 0.05s; }
.seat-cell:nth-child(6) { animation-delay: 0.06s; }
.seat-cell:nth-child(7) { animation-delay: 0.07s; }

/* ==================== 导出 PDF（打印）专用 ==================== */
/* 屏幕状态下把打印容器移出可视区（仍参与布局以便测量尺寸），打印时再显示 */
#printArea {
    position: fixed;
    left: -10000px;
    top: 0;
    z-index: -1;
}
#printArea .print-sheet {
    width: 210mm;
    height: 297mm;
    background: #fff;
    box-sizing: border-box;
    padding: 12mm;
}
#printArea .print-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin-bottom: 8mm;
}
#printArea .print-chart-wrap {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* 打印：A4 竖向，仅显示打印容器（座位表），并保留配色、去掉身高/视力/成绩 */
@media print {
    @page { size: A4 portrait; margin: 0; }
    html, body { margin: 0; padding: 0; background: #fff; }
    body * { visibility: hidden !important; }
    #printArea, #printArea * { visibility: visible !important; }
    #printArea {
        position: static !important;
        left: 0 !important;
        top: 0 !important;
        z-index: auto !important;
    }
    .app-container, .modal-overlay { display: none !important; }
    /* 导出内容不含身高/视力/成绩 */
    .seat-meta { display: none !important; }
    /* 保留性别 / VIP / 空位配色 */
    .seat-cell, .podium, .col-divider-lane, .legend-dot {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    /* 关闭入场动画，避免打印瞬间动画残留的缩放/变换痕迹 */
    .seat-cell { animation: none !important; }
}