correctly went right — every numeric column
(Semesters, CH, Marks, GPA, etc.) had its header out of step with its
own data. This rule only needs to win that one tie. */
.data-table th.text-right{text-align:right}
/* A sortable header's content is the flex row inside .sort-th-link (see
its own display:flex fix above), not inline text — text-align has no
effect on a flex item's position, so a right-aligned sortable numeric
column (e.g. Semester) needs the flex row itself pushed to the end. */
.data-table th.text-right a.sort-th-link{justify-content:flex-end}
/* Same pair of fixes as text-right above, for center-aligned short numeric
columns (Semester, CH, Marks, GPA, etc. — 2026-09-17, direct request to
switch these from right- to center-aligned for readability at their
width). */
.data-table th.text-center{text-align:center}
.data-table th.text-center a.sort-th-link{justify-content:center}
.data-table td{padding:14px 16px;border-bottom:1px solid #edf1f5;font-size:14px}.data-table tbody tr:hover{background:#fafbff}
/* Column widths driven by content, not layout (2026-09-17, direct report:
"column width should be fixed according to nature of columns... not
consistence UI design") — every .data-table cell wraps long content by
default (rather than forcing the table wider than its container) so a
table can safely go `table-fixed` with per-column widths set via the
.col-* classes below on each
(fixed layout takes every column's
width from the header row, not from whichever cell happens to hold the
longest content that render). A column with no .col-* class is the
table's own "identity" column (name/title/subject/etc.) and is meant to
receive whatever width the fixed ones don't use.
Usage:
...
AG
Number
... and the matching
gets col-wrap if its content can
run long (a name, a title, a note) so it wraps inside its column
instead of overflowing it. */
.data-table td,.data-table th{overflow-wrap:break-word}
.data-table .col-2xs{width:56px}
.data-table .col-xs{width:88px}
.data-table .col-sm{width:120px}
.data-table .col-md{width:160px}
.data-table .col-lg{width:220px}
.data-table .col-xl{width:280px}
.data-table .col-actions{width:100px}
.data-table .col-actions-wide{width:160px}
/* The un-classed "identity" column (name/title/subject/etc.) needs an
explicit width too, not just "whatever's left" — table-layout:fixed only
shares remaining space with auto-width columns when there IS remaining
space; once the other columns' declared widths already reach the
table's own width (a real case here: several .col-* columns on a
narrower viewport), an unclassed column collapses toward zero instead of
the table simply growing past 100% into .table-wrap's horizontal
scroll the way it would with table-layout:auto. Giving it a real
minimum via width+min-width (not just min-width alone, which
table-fixed ignores for column sizing) keeps it readable and lets the
table overflow into the scroll wrapper instead. */
.data-table.table-fixed th:not([class*="col-"]){width:240px;min-width:240px}
.data-table .col-wrap{white-space:normal;overflow-wrap:break-word}
/* Scoped to #rows-table (the scheme-review formset, academics/review_scheme_pdf.html)
only — its cells are a bare
with no width of its own, so the
input needs to fill the cell. A blanket .data-table td input rule instead hit
every table-embedded input, including ones like admin_student_list.html's
password field that already has a real Tailwind width (w-28) inside its own
inline-flex form — 100% width inside that shrink-to-fit flex container
collapsed it to a near-invisible box instead of respecting w-28. */
#rows-table td input:not([type=checkbox]):not([type=radio]),#rows-table td select{width:100%;min-width:0}
@media(max-width:640px){.data-table.table-fixed{table-layout:auto}}
/* Column-header sorting (2026-09-16, direct request: click a header to sort
ascending, click again for descending, small vertical-arrow indicator
after the column name) — two mechanisms share this styling: server-side
sort links (components/_sort_th.html, a ) on
tables backed by enrollment.list_utils.paginate_and_sort(), and the
client-side auto-sort in static/js/app.js's initSortableTables() (a
) for every other plain data-table. */
.sort-indicator{display:inline-block;margin-left:4px;color:#a3adba;font-size:11px;line-height:1}
.sort-indicator--active{color:var(--primary)}
.data-table th a.sort-th-link{color:inherit;text-decoration:none;display:flex;align-items:center;min-width:0}
.data-table th a.sort-th-link .sort-th-label{min-width:0;overflow-wrap:break-word}
.data-table th a.sort-th-link:hover{color:var(--text)}
.data-table th.sortable-th{cursor:pointer;user-select:none}
.data-table th.sortable-th:hover{color:var(--text)}
.sidebar{transition:transform .22s ease}.overlay{display:none}
/* Dark sidebar scrollbar (2026-09-05, direct request: "The scroll bar of
sidebar should follow the sidebar design theme") — the default OS
scrollbar is a pale grey that clashes with the sidebar's bg-slate-950. */
.sidebar-scroll{scrollbar-width:thin;scrollbar-color:#334155 transparent}
.sidebar-scroll::-webkit-scrollbar{width:8px}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar-scroll::-webkit-scrollbar-thumb{background:#334155;border-radius:999px}
.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:#475569}
/* Sidebar nav category accordion (2026-09-05, direct request: "add the
expand/hide functionality to all nav categories, so that only one
category items should be displayed at a time") — see static/js/app.js's
[data-nav-cat-toggle] handler, which closes every other category before
opening the clicked one. Initial open/closed state per category is set
server-side in components/_staff_sidebar.html (matching the page's own
nav_active), so a page load never needs JS to guess which category the
current page belongs to. */
.nav-cat-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 6px;background:transparent;border:0;cursor:pointer;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-family:inherit}
.nav-cat-toggle:hover{color:#cbd5e1}
.nav-cat-chevron{width:14px;height:14px;transition:transform .18s ease;flex-shrink:0}
.nav-cat--open .nav-cat-chevron{transform:rotate(90deg)}
/* Sub-group labels inside one nav-cat-body (2026-09-17, direct request: the
Admin category had 17 links in one flat scrolling list — group related
ones together). Plain text, not another accordion level: nesting a
second [data-nav-cat] inside this one would make static/js/app.js's
"opening one category closes every other" handler treat it as a sibling
of Admin/Faculty/etc. and collapse the parent category itself, which is
not what grouping within an already-open category should do. */
.nav-subgroup-label{padding:14px 12px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#475569;font-weight:600}
.nav-subgroup-label:first-child{padding-top:2px}
@media(max-width:1023px){.sidebar{transform:translateX(-100%);position:fixed!important;z-index:50}.sidebar.open{transform:translateX(0)}.overlay.open{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:40}}
@media(max-width:640px){.data-table{min-width:640px}.mobile-hide{display:none!important}}
.skeleton{background:linear-gradient(90deg,#eef2f7,#f8fafc,#eef2f7);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.toast{animation:slideIn .22s ease}@keyframes slideIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.public-nav{display:inline-flex;align-items:center;padding:8px 10px;border-radius:8px;color:#475569;transition:.15s}.public-nav:hover{background:#f8fafc;color:#312e81}.public-hero{background:radial-gradient(circle at 80% 20%,rgba(99,102,241,.18),transparent 35%),linear-gradient(135deg,#0f172a,#172554)}
.public-grid{background-image:linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px);background-size:32px 32px}
/* FIX (2026-09-03, ported from ui_mvp): .public-hero and .public-grid are
used together on the hero (class="public-hero public-grid text-white"),
and both set background-image at equal specificity — so .public-grid,
coming last, REPLACED the hero's dark gradient with the faint grid
lines. The result was white hero text on the page's near-white body
background: invisible. Confirmed in the browser, not guessed.
The combined rule below restates all four layers in one declaration —
grid lines on top, then the indigo glow, then the navy base — so the two
classes compose the way the markup clearly intends. Both classes are
left alone so either still works on its own. The same bug is in
ui_mvp/static/css/app.css; this file is now the corrected copy. */
.public-hero.public-grid{
background-image:
linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),
linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px),
radial-gradient(circle at 80% 20%,rgba(99,102,241,.18),transparent 35%),
linear-gradient(135deg,#0f172a,#172554);
background-size:32px 32px,32px 32px,auto,auto;
}
/* Admin list-page filter bar + row-actions dropdown (2026-09-12, ported
from the sos_mvp UI concept): every admin_*_list.html filter