/* Desktop workspace: compact controls, broad data canvas, quiet visual hierarchy. */
:root { --page:#f1f4f7; --surface:#fff; --ink:#24364b; --muted:#65768a; --line:#e0e7ee; --accent:#087f70; --soft:#edf7f4; }
.dark { --page:#101923; --surface:#182533; --ink:#e5edf5; --muted:#a5b4c4; --line:#304152; --accent:#58ccb0; --soft:#203e3c; }
.app-navigation { border-top:3px solid #087f70; }
.app-navigation > div { min-height:65px; max-width:none; padding:10px 28px; }
.app-navigation h1 { font-size:17px; }
.app-navigation img { width:36px; height:39px; }
.app-navigation > div > div:last-child { gap:8px; }
#currentUserDisplay { background:var(--page); border:1px solid var(--line); border-radius:8px; font-size:12px; }
.workspace { max-width:none; padding:24px 28px 14px; }
.page-intro { margin-bottom:20px; }
.eyebrow { letter-spacing:.2px; font-size:11px; color:var(--muted); margin-bottom:5px; }
.page-intro h2 { font-size:27px; letter-spacing:-.5px; }
.page-intro p { font-size:12px; margin-top:4px; }
.intro-note { font-size:11px; }
.intro-note i { background:transparent; font-size:25px; padding:8px; }
#dashboardSummary { gap:0; margin-bottom:20px; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
#dashboardSummary .card { padding:16px 22px!important; border:0; border-right:1px solid var(--line); border-radius:0; box-shadow:none; background:var(--surface)!important; }
#dashboardSummary .card:last-child { border-right:0; }
#dashboardSummary .card > div:first-child { font-size:11px; }
#dashboardSummary .card > div:last-child { margin-top:7px; font-size:29px; letter-spacing:-.5px; }
#dashboardSummary .card:after { width:7px; height:7px; top:22px; right:22px; box-shadow:none; }
.filter-card { padding:18px 20px 0; margin-bottom:16px; border-radius:12px; box-shadow:none; }
.section-heading { margin-bottom:14px; }
.section-heading h3 { font-size:13px; }
.section-heading > span { font-size:11px; }
.filter-card label { font-size:11px; margin-bottom:6px; }
.filter-card .input-field { height:40px; min-height:40px; border-radius:7px; font-size:12px; background:var(--surface); }
.filter-card .btn { height:40px; min-height:40px; border-radius:7px; font-size:12px; }
.filter-card .fa-search { top:14px; }
.filter-card > div:last-child { flex-direction:column; align-items:stretch; gap:16px; }
.filter-card > div:last-child > div:last-child { width:auto; margin:0 -20px; padding:12px 20px; background:var(--page); border-top:1px solid var(--line); justify-content:flex-start; border-radius:0 0 12px 12px; }
#exportToExcelBtn { margin-left:auto; }
#refreshData { background:var(--surface); color:var(--ink); border-color:var(--line); }
#openArchiveViewBtn { color:var(--muted); border-color:var(--line); }
.student-panel { border-radius:12px; box-shadow:0 2px 8px #182b4205; }
.student-panel > div:first-child { padding:12px 18px; min-height:62px; }
.table-caption { font-size:11px; color:var(--muted); }
#totalStudentsBadge { border:0; border-radius:6px; background:var(--soft); color:var(--accent); box-shadow:none; padding:3px 9px; }
#tableDensityBtn { min-height:30px; padding:5px 8px; font-size:10px; margin-left:12px; }
#tableDensityBtn[aria-pressed=true] { background:var(--soft); border-color:var(--accent); }
.student-panel .table-container { height:clamp(360px,calc(100dvh - 510px),1000px); min-height:360px; scrollbar-gutter:stable; }
#studentTable th { background:#f3f6f9; color:#52667e; padding:13px 16px; font-size:11px; border-bottom:1px solid var(--line); }
#studentTable td { padding:13px 16px; font-size:12px; color:var(--ink); border-bottom:1px solid var(--line); }
#studentTable tbody tr:nth-child(even) { background:#fbfcfd; }
#studentTable tbody tr:hover td { background:#f0f7f6; }
#studentTable tbody tr:has(.student-checkbox:checked) td { background:#e6f4ef; }
#studentTable tbody tr:has(.student-checkbox:checked) td:first-child { box-shadow:inset 3px 0 #087f70; }
.student-panel > div:last-child { padding:12px 18px; font-size:12px; min-height:58px; }
#paginationButtons button { font-size:11px; min-height:32px; min-width:32px; }
.workspace footer { margin-top:16px; padding-bottom:4px; font-size:10px; text-align:left; color:var(--muted); }
.selection-bar { border-radius:12px; background:#20394c; padding:12px 16px; bottom:22px; gap:20px; border:1px solid #496073; box-shadow:0 8px 32px #142b4530; }
.selection-bar .btn-tool { border-radius:7px; font-size:12px; }
#selectionContext { display:block; font-size:10px; color:#c3d2df; }
.dark #studentTable th { background:#1e2e40; color:#c1cfde; }
.dark #studentTable tbody tr:nth-child(even) { background:#1b2938; }
.dark #studentTable tbody tr:hover td { background:#263d48; }
.dark #studentTable tbody tr:has(.student-checkbox:checked) td { background:#24463f; }
.dark #studentTable td { color:var(--ink); }
@media(min-width:1024px) {
    .filter-card > div:last-child > div:first-child { width:100%; grid-template-columns:minmax(130px, .7fr) minmax(200px,1.2fr) minmax(260px,2fr) 190px; align-items:end; }
    .filter-card > div:last-child > div:first-child > div:nth-child(n) { grid-column:auto; }
    #studentTable .rt-name-cell { position:sticky; left:0; background:var(--surface); box-shadow:4px 0 6px -5px #52667e; z-index:2; min-width:210px; }
    #studentTable .student-name-heading { position:sticky; left:0; z-index:12; box-shadow:4px 0 6px -5px #52667e; }
    #studentTable .rt-name-cell:after { content:'↗'; font-size:10px; color:var(--muted); padding-left:10px; }
    .compact-table #studentTable td { padding-top:8px; padding-bottom:8px; font-size:11px; }
    .compact-table #studentTable th { padding-top:10px; padding-bottom:10px; }
}
@media(min-width:1800px) { .workspace { padding-left:40px; padding-right:40px; } .student-panel .table-container { height:calc(100dvh - 520px); } }
@media(max-width:1023px) { #tableDensityBtn { display:none; } .filter-card > div:last-child > div:last-child { flex-wrap:wrap; } }
@media(max-width:767px) {
    .workspace { padding:18px 12px; } .app-navigation > div { padding:10px 14px; }
    #dashboardSummary .card { padding:14px!important; border-bottom:1px solid var(--line); }
    #dashboardSummary .card > div:last-child { font-size:25px; }
    .table-caption { display:none; } #exportToExcelBtn { margin-left:0; }
    .student-panel > div:first-child { align-items:stretch; gap:12px; }
    .selection-bar { gap:10px; bottom:10px; }
    #studentTable td { padding:7px; border:0; }
}