with specific inline background/color.
We target them via the data attribute injected by admin-students.js */
tr.prog-group-row td,
tr[data-prog-group] td {
background: var(--surface) !important;
border-bottom: 1.5px solid var(--line) !important;
padding: 10px 14px !important;
}
body.theme-dark tr.prog-group-row td,
body.theme-dark tr[data-prog-group] td {
background: rgba(255,255,255,0.035) !important;
border-bottom-color: rgba(255,255,255,0.07) !important;
}
/* Tighten the cohort sub-group rows (e.g., FINAL PART 2 CLINICAL) */
tr.cohort-group-row td,
tr[data-cohort-group] td {
background: transparent !important;
border-bottom: 1px solid var(--line) !important;
padding: 8px 14px 8px 32px !important;
color: var(--ink2) !important;
}
body.theme-dark tr.cohort-group-row td,
body.theme-dark tr[data-cohort-group] td {
color: #B0BCCC !important;
}
/* ── PROFESSIONAL FONT COLORS: COHORT LABELS ── */
/* The student table cohort group labels use teal/cyan which looks amateurish.
Override with proper ink hierarchy. */
.cohort-label, .prog-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ink2) !important; /* Was teal — now proper secondary ink */
}
body.theme-dark .cohort-label,
body.theme-dark .prog-label {
color: #FFFFFF !important;
}
/* Program ID badge (e.g. "1001") — remove red, use ink */
.prog-id-badge {
font-family: monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--ink) !important;
}
body.theme-dark .prog-id-badge {
color: #FFFFFF !important;
}
/* ── REMOVE EMOJI FROM BUTTONS — via SVG replacements ── */
/* Assign Cohort and Cohort Report buttons use emoji; hide and use ::before text */
button[onclick*="openBulkCohortModal"] {
position: relative;
}
button[onclick*="openCohortReportModal"] {
position: relative;
}
/* ── PROGRAM GROUP ROW: inline-style override for dynamic JS rows ── */
/* admin-students.js renders these with inline color: #2D7BE5 (blue) or #8B1A2E (crimson)
for the cohort sub-headers. We fix the colours at the class level. */
/* Year-level sub-header color overrides */
[style*="color: #2D7BE5"],
[style*="color:#2D7BE5"] {
color: var(--ink2) !important;
}
[style*="color: rgb(45, 123, 229)"] {
color: var(--ink2) !important;
}
/* ── TOPBAR: more institution-grade appearance ── */
.topbar-logo {
font-family: 'Libre Baskerville', serif;
font-size: 14px;
letter-spacing: 0.02em;
}
body.theme-light .topbar {
box-shadow: 0 1px 0 var(--line);
}
/* ── SIDEBAR brand: stronger visual identity ── */
.sb-brand-name {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.2px;
}
.sb-brand-sub {
font-size: 9.5px;
letter-spacing: 0.8px;
text-transform: uppercase;
opacity: 0.6;
}
body.theme-light .sb-brand-name { color: #1C1F26; }
body.theme-light .sb-brand-sub { color: #6E7A8A; opacity: 1; }
/* ── PAGE TITLE: serif for authority ── */
.page-title {
font-family: 'Libre Baskerville', serif;
font-size: 20px;
color: var(--ink);
font-weight: 700;
letter-spacing: -0.01em;
}
body.theme-light .page-title { color: #0F1624; }
body.theme-dark .page-title { color: #EDF2FA; }
.page-sub {
font-size: 12px;
color: var(--ink3);
margin-top: 3px;
letter-spacing: 0.02em;
}
body.theme-light .page-sub { color: #6B7280; }
/* ── CARD TITLE: refined label ── */
.card-title {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ink3);
margin-bottom: 14px;
}
body.theme-light .card-title { color: #7B8494; }
/* ── TABLE: professional ink hierarchy ── */
td {
color: var(--ink);
font-size: 13px;
}
body.theme-light td { color: #1C1F26; }
body.theme-dark td { color: #CBD5E1; }
/* secondary cells (id, dates, codes) */
td .text-mono,
td code,
.cell-id {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 11.5px;
color: var(--ink2);
letter-spacing: 0.03em;
}
body.theme-light .cell-id { color: #3D4554; }
body.theme-dark .cell-id { color: #7B93B5; }
/* ── CHECKBOXES: cleaner appearance ── */
input[type=checkbox] {
width: 15px !important;
height: 15px !important;
accent-color: var(--crimson);
cursor: pointer;
min-height: 15px !important;
}
/* ── NAV ITEMS: crisper active state ── */
body.theme-light .nav-item {
color: #4B5563;
font-size: 12.5px;
}
body.theme-light .nav-item:hover {
color: #1C1F26;
background: rgba(0,0,0,0.04);
}
body.theme-light .nav-item.active {
color: #8B1A2E;
background: #F8EFF1;
border-color: rgba(139,26,46,0.2);
font-weight: 600;
}
body.theme-light .nav-icon { color: #9CA3AF; }
body.theme-light .nav-item:hover .nav-icon { color: #4B5563; }
body.theme-light .nav-item.active .nav-icon { color: #8B1A2E; }
/* ── SIDEBAR SECTION LABEL ── */
body.theme-light .sidebar-section {
color: #9CA3AF;
font-size: 8.5px;
letter-spacing: 2px;
opacity: 1;
}
/* ── STUDENT TABLE INLINE-STYLE GROUP HEADERS ── */
/* JS-rendered program group rows (the "1001 — 8 students · 4 years" row) */
/* These use inline font-weight:700; we augment their appearance */
tbody tr td[colspan] {
padding: 10px 14px !important;
}
/* Fix the dynamic chevron character — JS renders a ▾ or v text.
We target the surrounding or | that contains the program group info */
tbody tr td[colspan] span[style*="color:#8B1A2E"],
tbody tr td[colspan] span[style*="color: #8B1A2E"],
tbody tr td[colspan] span[style*="color:rgb(139"] {
color: var(--ink) !important;
font-weight: 700 !important;
}
/* The "FINAL PART 2 CLINICAL" cohort sub-header teal text */
tbody tr td[colspan] span[style*="color:#2D7BE5"],
tbody tr td[colspan] span[style*="color: #2D7BE5"],
tbody tr td[colspan] span[style*="teal"],
tbody tr td[colspan] span[style*="#0891B2"],
tbody tr td[colspan] span[style*="#2563EB"] {
color: var(--ink2) !important;
}
body.theme-dark tbody tr td[colspan] span[style*="color:#2D7BE5"],
body.theme-dark tbody tr td[colspan] span[style*="teal"],
body.theme-dark tbody tr td[colspan] span[style*="#0891B2"] {
color: #8ABADF !important;
}
/* Chevron arrow fix — rendered in red (#8B1A2E) inline */
/* Replace bright red with subdued authority tone */
tbody tr td[colspan] span[style*="color:#8B1A2E"] {
color: var(--crimson) !important;
opacity: 0.75;
}
/* ── STAT CARDS: numbers should command attention ── */
.stat-value {
font-family: 'Libre Baskerville', serif;
font-weight: 400;
font-size: 30px;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1;
}
body.theme-light .stat-value { color: #0F1624; }
body.theme-dark .stat-value { color: #EDF2FA; }
.stat-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--ink3);
margin-top: 5px;
}
body.theme-light .stat-label { color: #6B7280; }
/* ── BADGE REFINEMENTS ── */
.badge {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 4px;
}
/* ── FORM INPUTS: polish ── */
body.theme-light input:not([type=checkbox]):not([type=radio]),
body.theme-light select,
body.theme-light textarea {
background: #FFFFFF;
border-color: #D1D5DB;
color: #1C1F26;
}
body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
border-color: #8B1A2E;
box-shadow: 0 0 0 3px rgba(139,26,46,0.08);
}
body.theme-dark input:not([type=checkbox]):not([type=radio]),
body.theme-dark select,
body.theme-dark textarea {
background: #16202E;
border-color: rgba(255,255,255,0.10);
color: #CBD5E1;
}
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus {
border-color: rgba(139,26,46,0.65);
background: #1E2C3F;
}
/* ── LABEL: better contrast ── */
label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--ink3);
}
body.theme-light label { color: #6B7280; }
body.theme-dark label { color: #7B93B5; }
/* ── BUTTON REFINEMENTS ── */
.btn {
font-weight: 600;
letter-spacing: 0.01em;
border-radius: 7px;
}
.btn-primary {
background: #8B1A2E;
color: #fff;
box-shadow: 0 1px 3px rgba(139,26,46,0.25);
}
.btn-primary:hover {
background: #A8223A;
box-shadow: 0 2px 8px rgba(139,26,46,0.30);
}
body.theme-light .btn-outline {
border-color: #D1D5DB;
color: #374151;
background: #FFFFFF;
}
body.theme-light .btn-outline:hover {
border-color: #8B1A2E;
color: #8B1A2E;
background: #FBF2F3;
}
/* ── PROFILE BANNER ── */
body.theme-light .profile-banner {
background: #FFFFFF;
border-color: #E5E7EB;
}
.profile-name {
font-family: 'Libre Baskerville', serif;
font-size: 20px;
color: var(--ink);
font-weight: 700;
}
body.theme-light .profile-name { color: #0F1624; }
body.theme-dark .profile-name { color: #EDF2FA; }
/* ── SEARCH INPUT ── */
body.theme-light .search-input,
body.theme-light input[type=text],
body.theme-light input[type=email],
body.theme-light input[type=search] {
background: #FFFFFF;
border-color: #D1D5DB;
color: #1C1F26;
}
body.theme-light input::placeholder { color: #9CA3AF; }
/* ── SYNC BADGE: less neon ── */
.sync-badge {
font-size: 11px;
color: #10B981;
letter-spacing: 0.03em;
}
.sync-dot {
background: #10B981;
}
/* ── LOGOUT BTN ── */
body.theme-dark .logout-btn {
color: rgba(203,213,225,0.5);
border-color: rgba(255,255,255,0.09);
}
body.theme-dark .logout-btn:hover {
color: #CBD5E1;
border-color: rgba(255,255,255,0.22);
}
/* ── TOPBAR USER AVATAR ── */
.topbar-user {
background: var(--crimson);
font-weight: 700;
font-family: 'Libre Baskerville', serif;
font-size: 11px;
letter-spacing: 0.04em;
}
/* ── TABS: more authoritative ── */
.tab {
font-size: 12.5px;
font-weight: 500;
color: var(--ink3);
padding: 10px 18px;
letter-spacing: 0.02em;
}
.tab.active {
color: var(--crimson);
font-weight: 600;
border-bottom-color: var(--crimson);
}
body.theme-light .tab { color: #6B7280; }
body.theme-light .tab:hover { color: #1C1F26; }
body.theme-light .tab.active { color: #8B1A2E; border-bottom-color: #8B1A2E; }
/* ── MODAL TITLE ── */
.modal-title {
font-family: 'Libre Baskerville', serif;
font-size: 17px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
}
body.theme-light .modal-title { color: #0F1624; }
body.theme-dark .modal-title { color: #EDF2FA; }
/* ── MODAL CLOSE BTN ── */
.modal-close {
font-size: 16px;
color: var(--ink3);
background: none;
border: none;
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .15s;
}
.modal-close:hover {
background: var(--surface);
color: var(--ink);
}
/* ── NOTIF TOAST: fully hardcoded — immune to light/dark theme ── */
/* ALL colors hardcoded so toast always appears as a dark pill regardless of theme. */
.notif-toast {
background: #1C2736 !important;
border: 1px solid rgba(255,255,255,0.12) !important;
border-left: 3px solid #8B1A2E !important;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
}
.notif-title {
font-size: 12px;
font-weight: 600;
color: #F9FAFB !important;
letter-spacing: 0.01em;
}
.notif-body {
font-size: 11.5px;
color: rgba(249,250,251,0.72) !important;
line-height: 1.5;
}
/* ── UPLOAD OVERLAY ── */
.upload-overlay-title {
font-family: 'Libre Baskerville', serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
}
/* ── INFO / WARN BOX ── */
body.theme-light .info-box {
background: #EFF6FF;
border-color: rgba(29,55,96,0.18);
color: #1D3760;
}
body.theme-light .warn-box {
background: #FFFBEB;
border-color: rgba(138,110,40,0.25);
color: #78580A;
}
/* ── DARK THEME TABLE ROWS ── */
body.theme-dark tbody tr:hover td {
background: rgba(255,255,255,0.03);
}
body.theme-dark td {
border-bottom-color: rgba(255,255,255,0.045);
}
/* ── TBODY ALTERNATE: subtle stripe (optional) ── */
/* Only for light mode — gives a premium register feel */
body.theme-light tbody tr:nth-child(even) td {
background: #FAFBFC;
}
body.theme-light tbody tr:hover td {
background: #F3F4F6 !important;
}
/* Group-header rows (e.g. program header in courses table) set their own
crimson background inline and must stay legible on hover — don't let the
generic light-mode hover rule flatten them to light gray under white text. */
body.theme-light tbody tr.group-header-program:hover td {
background: var(--crimson, #b91c1c) !important;
}
/* ── PROGRAM GROUP ROW override: correct the teal/blue cohort labels ──
The student JS renders cohort sub-rows with a colored dot and label.
We intercept to ensure proper colour hierarchy. */
/* Any td inside a group-header-style row with colspan */
table tbody tr td[colspan="14"],
table tbody tr td[colspan="13"],
table tbody tr td[colspan="12"],
table tbody tr td[colspan="11"],
table tbody tr td[colspan="10"] {
padding: 0 !important;
}
/* ── SCROLLBAR: subtle, professional ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(139,26,46,0.18);
border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(139,26,46,0.32); }
body.theme-dark ::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.10);
}
body.theme-dark ::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.18);
}
/* ── FOCUS RINGS: accessible and clean ── */
:focus-visible {
outline: 2px solid rgba(139,26,46,0.5);
outline-offset: 2px;
}
/* ── SIDEBAR footer sign-out: subtle ── */
body.theme-light .btn-signout {
background: #F9FAFB;
border-color: #E5E7EB;
color: #6B7280;
font-size: 12.5px;
}
body.theme-light .btn-signout:hover {
background: #FBF2F3;
border-color: rgba(139,26,46,0.2);
color: #8B1A2E;
}
/* ── SIDEBAR light mode: tighter, cleaner ── */
body.theme-light .sidebar {
background: #FFFFFF;
border-right: 1px solid #E5E7EB;
box-shadow: 2px 0 12px rgba(0,0,0,0.04);
}
body.theme-light .sb-brand {
border-bottom-color: #F3F4F6;
background: #FAFAFA;
}
/* ── STAT CARD left stripe ── */
.stat-card::after {
width: 3px;
border-radius: 0 2px 2px 0;
}
/* ── DOC CARDS ── */
body.theme-light .doc-card {
background: #FFFFFF;
border-color: #E5E7EB;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
body.theme-light .doc-card:hover {
border-color: #8B1A2E;
box-shadow: 0 4px 18px rgba(139,26,46,0.09);
}
/* ── CARD light mode ── */
body.theme-light .card {
background: #FFFFFF;
border-color: #E5E7EB;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* ── LOGIN SCREEN: typographic polish ── */
.login-tagline {
font-family: 'Libre Baskerville', serif;
font-size: 25px;
color: #fff;
line-height: 1.28;
letter-spacing: -0.01em;
}
.login-institution {
font-size: 10px;
letter-spacing: 3.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: 10px;
font-weight: 500;
}
/* ── LOGIN THEME TOGGLE BUTTON (replaces inline styles) ── */
.login-theme-toggle {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 8px;
padding: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.65);
transition: background .15s, border-color .15s, color .15s;
width: 34px;
height: 34px;
}
.login-theme-toggle:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.32);
color: #fff;
}
/* ── PROFESSIONAL TABLE COLOUR OVERRIDES for dynamic JS content ──
JS in admin-students.js renders group rows with hardcoded inline colors.
We use broad attribute selectors to correct them. */
/* The program-level rows use a colored number like "1001" in red inline */
/* Soften to dark ink with subtle crimson for the ID number */
tbody tr td b[style],
tbody tr td strong[style] {
color: var(--ink) !important;
}
/* Cohort sub-header labels (FINAL PART 2 CLINICAL, etc.) rendered with teal/blue */
/* We can only cascade over inline styles using !important */
tbody tr[style*="background"] td {
/* Program group row backgrounds from JS: standardize */
}
/* The dark mode program group rows — make them look intentional */
body.theme-dark tbody tr td[colspan] {
background: rgba(255,255,255,0.025) !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
body.theme-light tbody tr td[colspan] {
background: #F7F8FA !important;
border-bottom: 1.5px solid #E5E7EB !important;
}
/* Exception: program group-header rows (courses table) render their own
crimson background + white text inline (see renderCoursesTable() in
admin-courses.js). The generic td[colspan] rule above was overriding
that background to near-white while the text stayed white — making the
row unreadable. Restore the crimson background here, at higher
specificity, for this specific row type only. */
body.theme-light tbody tr.group-header-program td[colspan] {
background: var(--crimson, #8B1A2E) !important;
border-bottom: none !important;
}
body.theme-light tbody tr.group-header-program:hover td[colspan] {
background: var(--crimson, #8B1A2E) !important;
}
/* ══════════════════════════════════════════════════════════════════
STUDENT TABLE GROUP ROW VISIBILITY FIX
The JS renders year-level sub-headers with inline color:var(--blue)
which is #1D3760 — near-invisible in dark mode. Override with a
readable colour for both themes.
══════════════════════════════════════════════════════════════════ */
/* ── Year-level header rows (e.g. FINAL PART 2 CLINICAL, M-3, FOUNDATION YEAR) ──
These are |