/* ============================================================
 * 作业完成统计系统 —— 全局自定义样式
 * 说明：Bootstrap 5 负责整体布局与组件，本文件只补充少量全局规则，
 *       让后台列表在手机、电脑上都不出现挤压错位。
 * ============================================================ */

body {
    min-height: 100vh;
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

/* ------------------------------------------------------------
 * 后台数据表格（科目 / 学生 / 作业列表）
 * 问题背景：窄屏下若允许表格自由收缩，操作按钮会被压成竖排、
 * 表头文字会逐字换行（如「批 改 备 注」）。
 * 解决方式：给表格一个最小宽度，让外层 .table-responsive 横向滚动，
 * 列内容一律不换行；需要换行的文字单元格单独加 .cell-wrap。
 * ------------------------------------------------------------ */
.list-table {
    min-width: 720px;
}

.list-table th {
    white-space: nowrap;
}

.list-table td {
    white-space: nowrap;
    vertical-align: middle;
}

/* 例外：标题、备注等长文本允许换行，避免撑破表格 */
.list-table td.cell-wrap {
    white-space: normal;
    min-width: 180px;
}

/* 表格内的操作按钮组：保持一行排列，不换行、不竖排 */
.list-table td.text-end .btn {
    white-space: nowrap;
}

/* ============================================================
 * 移动端（≤767px）行转卡片
 * 原理：隐藏表头，每行变成一张白色小卡片，每个 td 变成
 * 「标签（data-label） …… 值」的一行；值靠右，标签靠左变灰。
 * 要求每个数据 td 都带 data-label="列名"，空状态/colspan 行
 * 自动不显示标签。
 * ============================================================ */
@media (max-width: 767.98px) {
    /* 次要列在手机上依然隐藏（Bootstrap 的 d-none 会被上面的 display:block 顶掉） */
    .list-table td.d-none,
    .grade-table td.d-none {
        display: none;
    }

    .list-table {
        min-width: 0;
    }

    .list-table thead {
        display: none;
    }

    .list-table,
    .list-table tbody,
    .list-table tr,
    .list-table td {
        display: block;
        width: 100%;
        white-space: normal;
    }

    .list-table tr {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .25rem .75rem;
    }

    .list-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
        padding: .5rem .25rem;
        border: 0;
        border-bottom: 1px dashed #eef0f2;
    }

    .list-table tr td:last-child {
        border-bottom: 0;
    }

    .list-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: #6c757d;
        font-size: .85rem;
        text-align: left;
    }

    /* 空状态行 / 整行合并的 td：不要标签，居中显示 */
    .list-table td[colspan] {
        display: block;
        text-align: center;
    }

    .list-table td[colspan]::before {
        content: none;
    }

    .list-table td.cell-wrap {
        min-width: 0;
    }

    .list-table td.text-end {
        justify-content: flex-end;
    }

    /* 表单控件在卡片里不要撑满整行，留一半宽度给标签 */
    .list-table td > input,
    .list-table td > select,
    .list-table td > textarea {
        width: auto;
        max-width: 62%;
    }

    /* 批改页表格（.grade-table）同样行转卡片 */
    .grade-table {
        min-width: 0;
    }

    .grade-table thead {
        display: none;
    }

    .grade-table,
    .grade-table tbody,
    .grade-table tr,
    .grade-table td {
        display: block;
        width: 100%;
        white-space: normal;
    }

    .grade-table tr {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .25rem .75rem;
    }

    .grade-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
        padding: .5rem .25rem;
        border: 0;
        border-bottom: 1px dashed #eef0f2;
    }

    .grade-table tr td:last-child {
        border-bottom: 0;
    }

    .grade-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: #6c757d;
        font-size: .85rem;
        text-align: left;
    }

    .grade-table td > input,
    .grade-table td > select,
    .grade-table td > textarea {
        width: auto;
        max-width: 62%;
    }
}