/* ---- Narrow screens: table scroll, stacked document review, touch targets, scholar lists ---- */

/* Wide admin tables scroll sideways inside their card up to 1280px. Above that they fit and the sticky header works. */
@media (max-width: 1280px) {
    .table-scroll { overflow-x: auto; }
    .table-scroll table.data-table { min-width: 44rem; }
}

/* Roomier use of narrow screens. */
@media (max-width: 760px) {
    table.data-table th, table.data-table td { padding: 0.75rem 0.5rem; }
}
@media (max-width: 520px) {
    .card { padding: 1rem; }
}

/* Scrolling tables: a hint, and the first column (the scholar) stays visible while the rest scrolls. */
@media (max-width: 900px) {
    .table-scroll::before { content: "Scroll sideways to see all columns."; position: sticky; left: 0; display: block; margin-bottom: 0.5rem; color: var(--ul-muted); font-size: 0.8rem; }
    table.data-table--sticky th:first-child,
    table.data-table--sticky td:first-child { position: sticky; left: 0; width: 8rem; max-width: 8rem; overflow-wrap: anywhere; }
    table.data-table--sticky td:first-child { z-index: 1; background: var(--ul-surface); box-shadow: 1px 0 0 var(--ul-border); }
    table.data-table--sticky th:first-child { z-index: 3; }
    table.data-table--sticky tr.review-row--pending td:first-child { box-shadow: inset 3px 0 0 var(--color-pending), 1px 0 0 var(--ul-border); }
}

/* Document review: each row becomes a labelled block, so Verify / Reject are on screen without scrolling. Same cells, same form. */
@media (max-width: 900px) {
    .table-scroll:has(table.data-table--stack)::before { display: none; }
    .table-scroll table.data-table--stack { min-width: 0; }
    table.data-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    table.data-table--stack, table.data-table--stack tbody, table.data-table--stack tr { display: block; }
    table.data-table--stack tr { padding: 0.5rem 0; border-bottom: 1px solid var(--ul-border); }
    table.data-table--stack tr:last-child { border-bottom: 0; }
    table.data-table--stack td, table.data-table--stack td:first-child {
        display: flex; align-items: flex-start; gap: 0.75rem; position: static;
        width: auto; max-width: none; padding: 0.5rem 0.75rem; border: 0; box-shadow: none;
    }
    table.data-table--stack td::before { flex: 0 0 5.5rem; color: var(--ul-muted); font-size: 0.8rem; font-weight: 600; }
    table.data-table--stack td:nth-child(1)::before { content: "Scholar"; }
    table.data-table--stack td:nth-child(2)::before { content: "Document"; }
    table.data-table--stack td:nth-child(3)::before { content: "File"; }
    table.data-table--stack td:nth-child(4)::before { content: "Status"; }
    table.data-table--stack td:nth-child(5)::before { content: "Remarks"; }
    table.data-table--stack td:nth-child(6)::before { content: "Action"; }
    table.data-table--stack td.empty-state { justify-content: center; }
    table.data-table--stack td.empty-state::before { content: none; }
    table.data-table--stack .review-form { min-width: 0; flex: 1 1 auto; }
}

/* Touch targets: phones, and tablets that report a coarse pointer. */
@media (max-width: 760px), (pointer: coarse) {
    .nav-toggle { min-height: 2.75rem; }
    .account-chip { min-height: 2.75rem; }
    .account-menu__panel a { padding: 0.75rem 1rem; }
    .status-chip { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.9rem; }
    .search-form input, .search-form button, .search-form .btn { min-height: 2.75rem; }
    .filter-chip { padding-left: 0.75rem; }
    .filter-chip a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0; }
    .filter-block > summary { padding: 0.75rem 0; }
    .rule-list__action { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; }
    .review-form button[type="submit"] { min-height: 2.75rem; }
    .file-chip__remove { width: 2.75rem; height: 2.75rem; }
    /* Links straight inside a cell (scholar name, View file, Edit): taller hit area without making rows taller. */
    table.data-table td > a:not(.btn) { display: inline-block; padding: 0.75rem 0; margin: -0.75rem 0; }
}

/* Scholar and admin lists: the status badge keeps its size beside the text. */
.rule-list li > .status-badge { flex: none; }