@charset "utf-8";
/* ============================================================================
   problem.css — 问题列表页（清爽学术风）
   设计原则与主题一致：白底 / 1px 细线 / 单一深青强调色 / 小圆角 / 无渐变无投影
   依赖 theme.css 中的 CSS 变量（--ink / --line / --brand 等）
   ============================================================================ */

/* ---------------------------------------------------------------- 筛选区 */
.filter-form {
    margin: 0 0 12px;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.filter-bar .filter-search {
    flex: 1 1 260px;
    min-width: 200px;
    max-width: 420px;
}

.filter-bar .filter-select {
    flex: 0 0 auto;
    width: 132px;
}

.filter-bar .filter-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* 统一控件外观（覆盖 Bootstrap，不再用 !important 污染全局 .form-control） */
.filter-bar .form-control {
    height: 34px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--ink);
    background-color: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: none;
    transition: border-color .15s ease;
}

.filter-bar .form-control:focus {
    border-color: var(--brand);
    box-shadow: none;
    outline: 0;
}

.filter-bar select.form-control {
    padding-right: 6px;
    cursor: pointer;
}

.filter-bar .btn {
    height: 34px;
    padding: 0 16px;
    font-size: 13px;
    line-height: 32px;
    border-radius: 3px;
    border: 1px solid transparent;
}

.filter-bar .btn-primary {
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand);
}

.filter-bar .btn-primary:hover,
.filter-bar .btn-primary:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}

.filter-bar .btn-default {
    color: var(--ink-2);
    background-color: var(--paper);
    border-color: var(--line);
}

.filter-bar .btn-default:hover,
.filter-bar .btn-default:focus {
    color: var(--brand);
    border-color: var(--brand);
    background-color: var(--paper);
}

/* ---------------------------------------------------------------- 表格壳 */
.problem-table-wrap {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 覆盖 GridView 默认的 table-bordered / table-striped 观感 */
.problem-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--ink);
    table-layout: auto;
}

.problem-table > thead > tr > th {
    padding: 10px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    text-align: left;
    white-space: nowrap;
    background: #FBFCFB;
    border: 0;
    border-bottom: 1px solid var(--line);
}

.problem-table > thead > tr > th a {
    color: var(--ink-3);
    text-decoration: none;
}

.problem-table > thead > tr > th a:hover {
    color: var(--brand);
}

.problem-table > tbody > tr > td {
    padding: 9px 10px;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    line-height: 1.45;
}

.problem-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.problem-table > tbody > tr:hover > td {
    background-color: #FAFBFA;
}

/* 首列（题号）留出左侧呼吸位 */
.problem-table > tbody > tr > td:first-child,
.problem-table > thead > tr > th:first-child {
    padding-left: 14px;
}

.problem-table > tbody > tr > td:last-child,
.problem-table > thead > tr > th:last-child {
    padding-right: 14px;
}

/* ---------------------------------------------------------------- 列宽 */
.problem-table .col-id {
    width: 78px;
    white-space: nowrap;
}

.problem-table .col-title {
    min-width: 220px;
}

.problem-table .col-diff {
    width: 66px;
    white-space: nowrap;
}

.problem-table .col-level {
    width: 62px;
    white-space: nowrap;
}

.problem-table .col-classify {
    width: 92px;
}

.problem-table .col-recommend {
    width: 66px;
    white-space: nowrap;
}

.problem-table .col-tags {
    width: 156px;
}

.problem-table .col-solved {
    width: 66px;
    text-align: right;
    white-space: nowrap;
}

.problem-table .col-rate {
    width: 96px;
    white-space: nowrap;
}

.problem-table .col-source {
    width: 84px;
}

.problem-table .col-group {
    width: 70px;
    white-space: nowrap;
}

/* 数字统一等宽，右对齐 */
.problem-table .col-solved,
.problem-table .col-rate {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- 单元格内容 */
/* 题号：已解决时前置对勾 */
.pid {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

.pid a {
    color: var(--ink-3);
}

.pid a:hover {
    color: var(--brand);
}

.pid .ok {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    color: var(--ok);
}

/* 学段：纯文字，不抢胶囊视觉 */
.level-link {
    color: var(--ink-2);
}

.level-link:hover {
    color: var(--brand);
}

/* 标题 */
.ptitle a {
    color: var(--ink);
}

.ptitle a:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 难度胶囊：沿用原站 8 档实心色阶（等级越高色相越冷），未定级为灰
   色值与原版 index.php 中的 inline background-color 一一对应，未做调整；
   仅把黄(#FFC116)/青(#5ABFC1) 两档的文字改为深色，避免白字在浅底上看不清 */
.diff {
    display: inline-block;
    min-width: 40px;
    padding: 1px 7px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

/* 未定级：原 label-default 灰 */
.diff-0 {
    background: #777777;
}

/* 1–2 级：原 #d01938 */
.diff-1 {
    background: #D01938;
}

/* 3 级：原 #FFA500 */
.diff-2 {
    background: #FFA500;
}

/* 4 级：原 #FFC116 */
.diff-3 {
    background: #FFC116;
    color: #3A2A00;
}

/* 5 级：原 #52C41A */
.diff-4 {
    background: #52C41A;
}

/* 6 级：原 #5abfc1 */
.diff-5 {
    background: #5ABFC1;
    color: #08383A;
}

/* 7 级：原 #3498DB */
.diff-6 {
    background: #3498DB;
}

/* 8–9 级：原 #9D3DCF */
.diff-7 {
    background: #9D3DCF;
}

/* 10 级及以上：原 #0E1D69 */
.diff-8 {
    background: #0E1D69;
}

/* 标签：左对齐、限宽、超出省略 */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag {
    display: inline-block;
    max-width: 96px;
    padding: 1px 7px;
    font-size: 12px;
    line-height: 18px;
    color: var(--ink-2);
    background: #F4F6F5;
    border: 1px solid transparent;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.tag:hover {
    color: var(--brand);
    background: var(--brand-soft);
}

.tag-more {
    display: inline-block;
    padding: 1px 6px;
    font-size: 12px;
    line-height: 18px;
    color: var(--muted);
}

.tag-empty {
    color: #C7CCC9;
}

/* 通过率：数字 + 细进度条 */
.rate {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--ink-2);
}

.rate-num {
    min-width: 34px;
    text-align: right;
}

.rate-bar {
    position: relative;
    width: 40px;
    height: 3px;
    background: var(--line-soft);
    border-radius: 2px;
    overflow: hidden;
}

.rate-bar > i {
    display: block;
    height: 100%;
    background: var(--brand);
    border-radius: 2px;
}

.rate-0 .rate-bar > i {
    background: #C7CCC9;
}

/* 空值占位 */
.cell-empty {
    color: #C7CCC9;
}

/* ---------------------------------------------------------------- 分页 */
/* 分页整块水平居中。
   视图里给 LinkPager 加了一层 <div class="problem-pager"> 包裹，
   ul 保持 Bootstrap 原生的 inline-block，靠父级 text-align:center 居中 —— 兼容性最好。
   下面 ul.pagination.problem-pager 一条是兜底：万一只换了 CSS 没换视图
   （旧写法把 problem-pager 类直接挂在 ul 上），也能用 flex 居中。 */
.problem-pager {
    margin: 16px 0 0;
    text-align: center;
}

.problem-pager > .pagination {
    display: inline-block;
    margin: 0;
}

ul.pagination.problem-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16px 0 0;
    padding-left: 0;
}

ul.pagination.problem-pager > li {
    display: block;
}

ul.pagination.problem-pager > li > a,
ul.pagination.problem-pager > li > span {
    float: none;
}

.problem-table-wrap + .pagination {
    margin: 16px 0 0;
}

.pagination > li > a,
.pagination > li > span {
    padding: 5px 11px;
    font-size: 13px;
    color: var(--ink-2);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    margin-right: 4px;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
    color: var(--brand);
    background: var(--paper);
    border-color: var(--brand);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.pagination > .disabled > a,
.pagination > .disabled > span {
    color: #BFC5C2;
    background: var(--paper);
    border-color: var(--line-soft);
}

/* 最后一个按钮不再留右边距，否则整条分页会视觉左偏 2px */
.problem-pager .pagination > li:last-child > a,
.problem-pager .pagination > li:last-child > span,
ul.pagination.problem-pager > li:last-child > a,
ul.pagination.problem-pager > li:last-child > span {
    margin-right: 0;
}

/* ---------------------------------------------------------------- 窄屏 */
/* 1199 以下容器变窄，搜索框独占一行，下拉与按钮留在第二行 */
@media (max-width: 1199px) {
    .filter-bar .filter-search {
        flex: 1 1 100%;
        max-width: none;
    }
}

@media (max-width: 991px) {
    .filter-bar .filter-search {
        flex: 1 1 100%;
        max-width: none;
    }

    .filter-bar .filter-select {
        flex: 1 1 130px;
        width: auto;
    }

    .filter-bar .filter-actions {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .filter-bar .filter-actions .btn {
        flex: 1 1 0;
    }

    /* 窄屏隐藏次要列：学段、推荐度、组别 */
    .problem-table .col-level,
    .problem-table .col-recommend,
    .problem-table .col-group {
        display: none;
    }
}

@media (max-width: 767px) {
    /* 再隐藏分类与来源，保证题号/标题/难度/标签/通过率可读 */
    .problem-table .col-classify,
    .problem-table .col-source {
        display: none;
    }

    .problem-table .col-tags {
        width: auto;
    }
}