/* ANHS Info System v1.0.1 — Friendly mobile-first CSS
* Warmer palette, better hierarchy, accessible touch targets.
* Copyright (c) 2026 DownStreamTech
*/
/* ────── Design tokens ────── */
:root {
--brand: #0284c7;
--brand-hover: #0369a1;
--brand-soft: #e0f2fe;
--bg: #f8fafc;
--bg-elevated: #ffffff;
--surface: #ffffff;
--surface-alt: #f1f5f9;
--text: #0f172a;
--text-muted: #64748b;
--text-light: #94a3b8;
--border: #e2e8f0;
--border-strong: #cbd5e1;
--success: #059669;
--success-soft: #d1fae5;
--warning: #d97706;
--warning-soft: #fef3c7;
--danger: #dc2626;
--danger-soft: #fee2e2;
--info: #0284c7;
--info-soft: #e0f2fe;
--radius: 0.875rem;
--radius-sm: 0.5rem;
--radius-xs: 0.375rem;
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.1);
--font-sans: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
--touch: 44px;
/* Sidebar */
--sidebar-bg: #0f172a;
--sidebar-bg-hover: #1e293b;
--sidebar-text: #cbd5e1;
--sidebar-text-bright: #ffffff;
--sidebar-text-muted: #64748b;
--sidebar-border: #1e293b;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) { --bg: #0f172a;
--bg-elevated: #1e293b;
--surface: #1e293b;
--surface-alt: #273449;
--text: #f1f5f9;
--text-muted: #94a3b8;
--text-light: #64748b;
--border: #334155;
--border-strong: #475569;
--brand-soft: #0c4a6e;
--success-soft: #064e3b;
--warning-soft: #78350f;
--danger-soft: #7f1d1d;
--info-soft: #0c4a6e;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6); }
}
html[data-theme="dark"] { --bg: #0f172a;
--bg-elevated: #1e293b;
--surface: #1e293b;
--surface-alt: #273449;
--text: #f1f5f9;
--text-muted: #94a3b8;
--text-light: #64748b;
--border: #334155;
--border-strong: #475569;
--brand-soft: #0c4a6e;
--success-soft: #064e3b;
--warning-soft: #78350f;
--danger-soft: #7f1d1d;
--info-soft: #0c4a6e;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6); }
/* Explicit user choice — overrides the OS preference. Set on . */
html[data-theme="light"] {
--bg: #f8fafc;
--bg-elevated: #ffffff;
--surface: #ffffff;
--surface-alt: #f1f5f9;
--text: #0f172a;
--text-muted: #64748b;
--text-light: #94a3b8;
--border: #e2e8f0;
--border-strong: #cbd5e1;
--brand-soft: #e0f2fe;
--success-soft: #d1fae5;
--warning-soft: #fef3c7;
--danger-soft: #fee2e2;
--info-soft: #e0f2fe;
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.1);
color-scheme: light;
}
html[data-theme="dark"] {
--bg: #0f172a;
--bg-elevated: #1e293b;
--surface: #1e293b;
--surface-alt: #273449;
--text: #f1f5f9;
--text-muted: #94a3b8;
--text-light: #64748b;
--border: #334155;
--border-strong: #475569;
--brand-soft: #0c4a6e;
--success-soft: #064e3b;
--warning-soft: #78350f;
--danger-soft: #7f1d1d;
--info-soft: #0c4a6e;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
color-scheme: dark;
}
/* ────── Base ────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
small { color: var(--text-muted); font-size: 0.85em; }
code {
background: var(--surface-alt);
padding: 0.125rem 0.4rem;
border-radius: var(--radius-xs);
font-family: var(--font-mono);
font-size: 0.8125em;
color: var(--text);
}
h1, h2, h3, h4 { color: var(--text); line-height: 1.3; margin: 0; }
p { margin: 0; }
/* ────── Layout ────── */
.layout-admin {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.sidebar {
background: var(--sidebar-bg);
color: var(--sidebar-text);
padding: 0.75rem 1rem;
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: var(--shadow);
}
/* Mobile (default): horizontal compact brand row */
.sidebar__brand {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 0.625rem;
position: relative;
}
.sidebar__brand-logo {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: contain;
padding: 2px;
background: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
flex-shrink: 0;
display: block;
}
.sidebar__brand-text {
min-width: 0;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
line-height: 1.2;
}
.sidebar__brand strong {
color: var(--sidebar-text-bright);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar__brand-fullname {
color: var(--sidebar-text-muted);
font-size: 0.6875rem;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar__role-chip {
display: none;
background: rgba(14, 165, 233, 0.2);
color: #7dd3fc;
border: 1px solid rgba(14, 165, 233, 0.35);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.25rem 0.7rem;
border-radius: 999px;
align-self: center;
}
.sidebar__toggle {
display: none;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--sidebar-text);
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
transition: background 0.15s, color 0.15s, transform 0.25s, opacity 0.15s;
opacity: 0;
}
.sidebar__toggle:hover {
background: rgba(255, 255, 255, 0.16);
color: var(--sidebar-text-bright);
}
.sidebar__nav {
display: none;
flex-direction: column;
position: fixed;
top: 60px;
left: 0;
right: 0;
background: var(--sidebar-bg);
border-top: 1px solid var(--sidebar-border);
padding: 0.75rem 0;
max-height: calc(100vh - 60px);
overflow-y: auto;
z-index: 20;
box-shadow: var(--shadow-lg);
}
.sidebar__nav.is-open { display: flex; }
.sidebar__user {
display: flex;
align-items: center;
gap: 0.5rem;
}
.user-chip { display: none; }
.nav-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
color: var(--sidebar-text);
font-size: 0.9375rem;
font-weight: 500;
min-height: var(--touch);
transition: background 0.15s, color 0.15s;
border-left: 3px solid transparent;
}
.nav-link:hover {
background: var(--sidebar-bg-hover);
color: var(--sidebar-text-bright);
text-decoration: none;
}
.nav-link.is-active {
background: rgba(14, 165, 233, 0.15);
color: var(--sidebar-text-bright);
border-left-color: #0ea5e9;
}
.nav-link svg { flex-shrink: 0; opacity: 0.85; }
.nav-link.is-active svg { opacity: 1; color: #0ea5e9; }
.content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 0.875rem 1.25rem;
display: flex;
align-items: center;
gap: 0.75rem;
position: sticky;
top: 60px;
z-index: 10;
}
.topbar__menu {
background: var(--surface-alt);
border: 0;
font-size: 1.25rem;
cursor: pointer;
padding: 0;
width: var(--touch);
height: var(--touch);
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
border-radius: var(--radius-xs);
}
.topbar__title {
font-size: 1rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
}
.content__body {
padding: 1.25rem;
padding-bottom: 3rem;
flex: 1;
}
.footer {
padding: 1.5rem 1rem;
text-align: center;
color: var(--text-muted);
font-size: 0.75rem;
line-height: 1.7;
border-top: 1px solid var(--border);
background: var(--surface);
}
/* ────── Desktop layout (≥900px) ────── */
@media (min-width: 900px) {
.layout-admin { flex-direction: row; }
.sidebar {
width: 240px;
height: 100vh;
flex-direction: column;
align-items: stretch;
padding: 0;
position: sticky;
top: 0;
box-shadow: none;
border-right: 1px solid var(--sidebar-border);
transition: width 0.2s ease;
}
/* Vertical hero brand at the top */
.sidebar__brand {
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.25rem 1rem 1rem;
border-bottom: 1px solid var(--sidebar-border);
text-align: center;
background: linear-gradient(180deg, rgba(14, 165, 233, 0.1), transparent);
}
.sidebar__brand:hover .sidebar__toggle { opacity: 1; }
.sidebar__brand-logo {
width: 56px;
height: 56px;
padding: 3px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.sidebar__brand-text {
align-items: center;
gap: 0.1rem;
flex: 0 0 auto;
max-width: 100%;
}
.sidebar__brand strong {
font-size: 1.0625rem;
font-weight: 800;
letter-spacing: 0.06em;
text-align: center;
}
.sidebar__brand-fullname {
display: block;
font-size: 0.6875rem;
line-height: 1.3;
white-space: normal;
text-align: center;
max-width: 180px;
overflow: visible;
}
.sidebar__role-chip { display: inline-flex; }
.sidebar__toggle {
display: inline-flex;
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
.sidebar__nav {
display: flex !important;
position: static;
padding: 0.5rem 0.5rem 0.5rem;
border: none;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
box-shadow: none;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.sidebar__nav::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.3);
border-radius: 999px;
}
.sidebar__nav::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.55);
}
.nav-link {
border-radius: var(--radius-xs);
padding: 0.4rem 0.75rem;
min-height: 34px;
font-size: 0.875rem;
border-left: 0;
gap: 0.6rem;
}
.nav-link.is-active {
background: rgba(14, 165, 233, 0.2);
border-left: 0;
}
.nav-section {
padding: 0.5rem 0.75rem 0.2rem;
font-size: 0.625rem;
margin-top: 0.1rem;
border-top: 0;
}
.nav-section + .nav-link { margin-top: 0; }
/* User chip/footer — keep it compact */
.sidebar__user {
flex-shrink: 0;
padding: 0.75rem 0.875rem 1rem;
}
.user-chip { gap: 0.5rem; }
.user-chip__avatar { width: 32px; height: 32px; font-size: 0.75rem; }
.user-chip__name { font-size: 0.8125rem; }
.user-chip__email { font-size: 0.6875rem; }
/* Collapsed sidebar state — toggled via JS on body */
body.sidebar-collapsed .sidebar { width: 72px; }
body.sidebar-collapsed .sidebar__brand-text,
body.sidebar-collapsed .sidebar__brand-fullname,
body.sidebar-collapsed .sidebar__role-chip,
body.sidebar-collapsed .nav-link span,
body.sidebar-collapsed .nav-section,
body.sidebar-collapsed .user-chip__info,
body.sidebar-collapsed .logout-form .btn span {
display: none;
}
body.sidebar-collapsed .sidebar__brand {
padding: 1rem 0 0.875rem;
gap: 0.4rem;
}
body.sidebar-collapsed .sidebar__brand-logo { width: 44px; height: 44px; }
/* In collapsed mode the sidebar is only 72px wide, so the absolute toggle
overlaps the centered logo. Move it back into normal flow, centered
below the logo as a small standalone button. */
body.sidebar-collapsed .sidebar__toggle {
position: static;
margin: 0.4rem auto 0;
width: 24px;
height: 24px;
transform: rotate(180deg);
opacity: 1;
}
body.sidebar-collapsed .nav-link {
justify-content: center;
padding: 0.625rem 0;
}
/* Collapsed-sidebar tooltip rendering is handled by a single floating
`.sidebar-tooltip` element (see rules outside this media query). We
cannot use `::after` pseudo-tooltips on the nav-links themselves
because `.sidebar__nav` has `overflow-y: auto` which, per CSS spec,
forces `overflow-x` to be non-visible too — any pseudo-element
extending past the 72px sidebar boundary gets clipped. The JS-driven
floating tooltip is appended to and escapes all overflow. */
body.sidebar-collapsed .sidebar__user {
padding: 0.875rem 0.5rem;
align-items: center;
gap: 0.625rem;
}
body.sidebar-collapsed .user-chip { justify-content: center; }
body.sidebar-collapsed .logout-form { width: 100%; }
body.sidebar-collapsed .sidebar-logout {
padding: 0.6rem 0;
justify-content: center;
}
body.sidebar-collapsed .sidebar-logout span { display: none; }
.sidebar__user {
padding: 1rem 1.25rem;
border-top: 1px solid var(--sidebar-border);
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.user-chip {
display: flex;
align-items: center;
gap: 0.625rem;
}
.user-chip__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #0ea5e9, #6366f1);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8125rem;
font-weight: 600;
flex-shrink: 0;
}
.user-chip__info { min-width: 0; flex: 1; }
.user-chip__name {
color: var(--sidebar-text-bright);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-chip__email {
color: var(--sidebar-text-muted);
font-size: 0.6875rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar {
padding: 1rem 2rem;
position: static;
}
.topbar__menu { display: none; }
.topbar__title { font-size: 1.125rem; }
.content__body { padding: 2rem; }
}
/* ────── Cards ────── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem;
margin-bottom: 1.25rem;
box-shadow: var(--shadow-xs);
}
.card__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
gap: 0.75rem;
flex-wrap: wrap;
}
.card__header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.card__header h3 small {
color: var(--text-muted);
font-weight: 400;
font-size: 0.8125rem;
margin-left: 0.375rem;
}
.card--warning { border-color: var(--warning); background: var(--warning-soft); }
.card--info { border-color: var(--brand); background: var(--brand-soft); }
@media (min-width: 720px) {
.card { padding: 1.5rem; margin-bottom: 1.5rem; }
.card__header h3 { font-size: 1.0625rem; }
}
/* ────── Dashboard header ────── */
.dash__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.25rem;
gap: 1rem;
flex-wrap: wrap;
}
.dash__welcome h2 {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
color: var(--text);
}
.dash__welcome p {
color: var(--text-muted);
font-size: 0.9375rem;
margin-top: 0.125rem;
}
.dash__year {
background: linear-gradient(135deg, #0ea5e9, #0284c7);
color: #fff;
padding: 0.5rem 0.875rem;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 600;
box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
@media (min-width: 720px) { .dash__welcome h2 { font-size: 1.75rem; } }
/* ────── KPI cards ────── */
.kpi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.875rem;
margin-bottom: 1.5rem;
}
@media (min-width: 720px) {
.kpi-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
}
.kpi-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.125rem 1.25rem;
box-shadow: var(--shadow-xs);
transition: all 0.15s;
position: relative;
overflow: hidden;
}
.kpi-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--brand);
}
.kpi-card:hover {
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.kpi-card__icon {
width: 36px;
height: 36px;
background: var(--brand-soft);
color: var(--brand);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.625rem;
}
.kpi-card__label {
color: var(--text-muted);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.kpi-card__value {
font-size: 2rem;
font-weight: 700;
margin-top: 0.25rem;
color: var(--text);
line-height: 1.1;
}
.kpi-card__hint {
color: var(--text-muted);
font-size: 0.75rem;
margin-top: 0.25rem;
}
.kpi-card--danger::before { background: #dc2626; }
.kpi-card--danger .kpi-card__icon {
background: #fee2e2;
color: #991b1b;
}
.kpi-card--danger .kpi-card__value { color: #991b1b; }
.kpi-card--warning::before { background: #f59e0b; }
.kpi-card--warning .kpi-card__icon {
background: #fef3c7;
color: #92400e;
}
.kpi-card--warning .kpi-card__value { color: #92400e; }
.kpi-card--success::before { background: #22c55e; }
.kpi-card--success .kpi-card__icon {
background: #dcfce7;
color: #166534;
}
.kpi-card--success .kpi-card__value { color: #166534; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .kpi-card--danger .kpi-card__icon { background: #7f1d1d; color: #fecaca; }
html:not([data-theme="light"]) .kpi-card--danger .kpi-card__value { color: #fecaca; }
html:not([data-theme="light"]) .kpi-card--warning .kpi-card__icon { background: #78350f; color: #fde68a; }
html:not([data-theme="light"]) .kpi-card--warning .kpi-card__value { color: #fde68a; }
html:not([data-theme="light"]) .kpi-card--success .kpi-card__icon { background: #064e3b; color: #a7f3d0; }
html:not([data-theme="light"]) .kpi-card--success .kpi-card__value { color: #a7f3d0; }
}
html[data-theme="dark"] .kpi-card--danger .kpi-card__icon { background: #7f1d1d; color: #fecaca; }
html[data-theme="dark"] .kpi-card--danger .kpi-card__value { color: #fecaca; }
html[data-theme="dark"] .kpi-card--warning .kpi-card__icon { background: #78350f; color: #fde68a; }
html[data-theme="dark"] .kpi-card--warning .kpi-card__value { color: #fde68a; }
html[data-theme="dark"] .kpi-card--success .kpi-card__icon { background: #064e3b; color: #a7f3d0; }
html[data-theme="dark"] .kpi-card--success .kpi-card__value { color: #a7f3d0; }
/* ────── Honors cards ────── */
.honor-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) { .honor-grid { grid-template-columns: repeat(3, 1fr); } }
.honor-card {
padding: 1.5rem;
border-radius: var(--radius);
text-align: center;
color: #fff;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.honor-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 120px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transform: translate(30px, -30px);
}
.honor-card--highest { background: linear-gradient(135deg, #f59e0b, #d97706); }
.honor-card--high { background: linear-gradient(135deg, #64748b, #475569); }
.honor-card--honors { background: linear-gradient(135deg, #ea580c, #c2410c); }
.honor-card__badge { font-size: 2.5rem; line-height: 1; position: relative; }
.honor-card__count {
font-size: 3rem;
font-weight: 800;
line-height: 1;
margin-top: 0.25rem;
position: relative;
}
.honor-card__label {
font-size: 0.9375rem;
font-weight: 600;
margin-top: 0.5rem;
position: relative;
}
.honor-card__range {
font-size: 0.75rem;
opacity: 0.85;
margin-top: 0.25rem;
position: relative;
font-weight: 500;
}
.honor-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.125rem;
border-radius: var(--radius-sm);
font-weight: 600;
margin: 0.75rem 0;
font-size: 0.9375rem;
}
.honor-badge--highest { background: var(--warning-soft); color: #92400e; }
.honor-badge--high { background: #e0e7ff; color: #3730a3; }
.honor-badge--honors { background: #ffedd5; color: #9a3412; }
/* ────── Two col ────── */
.two-col { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
/* ────── Bars ────── */
.bars { display: flex; flex-direction: column; gap: 1rem; }
.bar-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.25rem 0.75rem;
align-items: center;
}
.bar-row__label {
font-size: 0.875rem;
font-weight: 500;
color: var(--text);
}
.bar-row__label small {
color: var(--text-muted);
font-weight: 400;
font-size: 0.75rem;
display: block;
margin-top: 0.125rem;
}
.bar-row__value {
font-weight: 700;
font-size: 0.9375rem;
color: var(--text);
text-align: right;
}
.bar-row__value small {
color: var(--text-muted);
font-weight: 500;
font-size: 0.75rem;
margin-left: 0.25rem;
}
.bar-row__track {
grid-column: 1 / -1;
background: var(--surface-alt);
border-radius: 9999px;
height: 10px;
overflow: hidden;
}
.bar-row__fill {
height: 100%;
background: linear-gradient(90deg, var(--brand), #0ea5e9);
border-radius: 9999px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 2px;
}
.bar-row__fill.bar-female { background: linear-gradient(90deg, #ec4899, #f472b6); }
.bar-row__fill.bar-male { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.bar-row__fill.bar-out { background: linear-gradient(90deg, #059669, #10b981); }
.bar-row__fill.bar-vs { background: linear-gradient(90deg, #65a30d, #84cc16); }
.bar-row__fill.bar-sat { background: linear-gradient(90deg, #ca8a04, #eab308); }
.bar-row__fill.bar-fs { background: linear-gradient(90deg, #ea580c, #f97316); }
.bar-row__fill.bar-dnme { background: linear-gradient(90deg, #dc2626, #ef4444); }
/* ────── Tables (mobile: cards; desktop: real table) ────── */
.table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.table thead { display: none; }
.table tbody tr {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 1rem;
margin-bottom: 0.625rem;
box-shadow: var(--shadow-xs);
}
.table tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.375rem 0;
border: 0;
gap: 1rem;
min-height: 32px;
}
.table tbody td::before {
content: attr(data-label);
font-weight: 600;
color: var(--text-muted);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.table tbody td.actions {
justify-content: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border);
}
.table tbody td.actions::before { display: none; }
/* Desktop table — higher specificity than mobile rules above */
@media (min-width: 720px) {
.table thead { display: table-header-group; }
.table tbody { display: table-row-group; }
.table tbody tr {
display: table-row;
background: var(--surface);
border: 0;
box-shadow: none;
padding: 0;
margin: 0;
border-radius: 0;
}
.table tbody tr:nth-child(even) { background: var(--surface-alt); }
.table tbody tr:hover { background: var(--brand-soft); }
.table thead th,
.table tbody td {
display: table-cell;
text-align: left;
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--border);
vertical-align: middle;
min-height: 0;
}
.table thead th {
background: var(--surface-alt);
font-weight: 600;
color: var(--text);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 2px solid var(--border-strong);
}
.table tbody td::before { content: none !important; }
.table tbody td.actions {
text-align: right;
white-space: nowrap;
justify-content: flex-end;
margin: 0;
padding: 0.5rem 1rem;
border-top: 0;
}
}
.table .danger { color: var(--danger); font-weight: 600; }
.table__wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-xs);
overflow: hidden;
}
.table__wrap .table tbody tr:last-child td { border-bottom: 0; }
/* ────── Forms ────── */
.form { display: flex; flex-direction: column; gap: 1.125rem; }
.form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.125rem;
}
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-field label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
margin-bottom: 0.375rem;
color: var(--text);
}
.form-field .req { color: var(--danger); margin-left: 0.125rem; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="tel"],
.form-field input[type="search"],
.form-field select,
.form-field textarea {
width: 100%;
padding: 0.75rem 0.875rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
background: var(--surface);
color: var(--text);
min-height: var(--touch);
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: 0;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}
.form-field textarea { resize: vertical; min-height: 80px; }
.form-field__hint {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.375rem;
}
.form-actions {
display: flex;
flex-direction: column-reverse;
gap: 0.625rem;
margin-top: 0.5rem;
}
@media (min-width: 640px) {
.form-actions {
flex-direction: row;
justify-content: flex-end;
}
}
/* ────── Buttons ────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.25rem;
min-height: var(--touch);
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
font-family: inherit;
gap: 0.5rem;
transition: all 0.15s;
white-space: nowrap;
}
.btn:hover {
background: var(--surface-alt);
text-decoration: none;
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-primary {
background: var(--brand);
color: #fff;
border-color: var(--brand);
box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
}
.btn-primary:hover {
background: var(--brand-hover);
border-color: var(--brand-hover);
box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.4);
}
.btn-danger {
background: var(--danger);
color: #fff;
border-color: var(--danger);
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-ghost {
background: transparent;
border-color: transparent;
color: var(--text-muted);
}
.btn-ghost:hover { background: var(--surface-alt); color: var(--text); }
.btn-sm {
padding: 0.5rem 0.875rem;
font-size: 0.8125rem;
min-height: 36px;
}
/* ────── Page elements ────── */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
gap: 0.75rem;
flex-wrap: wrap;
}
.page-header h2 {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
}
.page-header p {
color: var(--text-muted);
font-size: 0.9375rem;
margin-top: 0.25rem;
}
.page-header__title { flex: 1; min-width: 0; }
.page-header__title h2 small {
color: var(--text-muted);
font-weight: 400;
font-size: 1rem;
margin-left: 0.375rem;
}
@media (min-width: 720px) { .page-header h2 { font-size: 1.75rem; } }
.search-form {
display: flex;
gap: 0.625rem;
margin-bottom: 1.25rem;
}
.search-form input {
flex: 1;
padding: 0.75rem 0.875rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
min-height: var(--touch);
background: var(--surface);
color: var(--text);
}
.search-form input:focus {
outline: 0;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}
/* ────── Alerts ────── */
.alert {
padding: 0.875rem 1.125rem;
border-radius: var(--radius-sm);
margin: 1rem;
font-size: 0.9375rem;
font-weight: 500;
box-shadow: var(--shadow-xs);
display: flex;
align-items: center;
gap: 0.625rem;
border: 1px solid;
}
@media (min-width: 720px) { .alert { margin: 1rem 2rem; } }
.alert-success { background: var(--success-soft); border-color: var(--success); color: #064e3b; }
.alert-error { background: var(--danger-soft); border-color: var(--danger); color: #7f1d1d; }
.alert-info { background: var(--info-soft); border-color: var(--info); color: #0c4a6e; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .alert-success { color: #a7f3d0; }
html:not([data-theme="light"]) .alert-error { color: #fecaca; }
html:not([data-theme="light"]) .alert-info { color: #bae6fd; }
}
html[data-theme="dark"] .alert-success { color: #a7f3d0; }
html[data-theme="dark"] .alert-error { color: #fecaca; }
html[data-theme="dark"] .alert-info { color: #bae6fd; }
/* ────── Chips (badges) ────── */
.chip {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.chip-success { background: var(--success-soft); color: #065f46; }
.chip-muted { background: var(--surface-alt); color: var(--text-muted); }
.chip-error { background: var(--danger-soft); color: #991b1b; }
.chip-warn { background: #fef3c7; color: #92400e; }
.chip-info { background: var(--info-soft); color: #075985; }
.chip-core { background: #dbeafe; color: #1e40af; }
.chip-applied { background: #fef3c7; color: #92400e; }
.chip-specialized { background: #e0e7ff; color: #3730a3; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .chip-success { color: #bbf7d0; }
html:not([data-theme="light"]) .chip-error { color: #fecaca; }
html:not([data-theme="light"]) .chip-warn { background: rgba(146, 64, 14, 0.25); color: #fcd34d; }
html:not([data-theme="light"]) .chip-core { background: rgba(30, 64, 175, 0.25); color: #93c5fd; }
html:not([data-theme="light"]) .chip-applied { background: rgba(146, 64, 14, 0.25); color: #fcd34d; }
html:not([data-theme="light"]) .chip-specialized { background: rgba(55, 48, 163, 0.25); color: #a5b4fc; }
}
html[data-theme="dark"] .chip-success { color: #bbf7d0; }
html[data-theme="dark"] .chip-error { color: #fecaca; }
html[data-theme="dark"] .chip-warn { background: rgba(146, 64, 14, 0.25); color: #fcd34d; }
html[data-theme="dark"] .chip-core { background: rgba(30, 64, 175, 0.25); color: #93c5fd; }
html[data-theme="dark"] .chip-applied { background: rgba(146, 64, 14, 0.25); color: #fcd34d; }
html[data-theme="dark"] .chip-specialized { background: rgba(55, 48, 163, 0.25); color: #a5b4fc; }
/* ────── Definition list ────── */
.definition-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem 1.5rem;
margin: 1rem 0 0;
padding: 0;
}
@media (min-width: 640px) {
.definition-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.definition-grid > div { margin: 0; }
.definition-grid dt {
font-size: 0.6875rem;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
letter-spacing: 0.04em;
margin-bottom: 0.25rem;
}
.definition-grid dd {
margin: 0;
font-size: 0.9375rem;
color: var(--text);
font-weight: 500;
}
/* ────── Empty states ────── */
.empty-state {
text-align: center;
padding: 3rem 1.5rem;
color: var(--text-muted);
}
.empty-state__icon {
font-size: 3rem;
margin-bottom: 0.5rem;
opacity: 0.5;
}
.empty-state__title {
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.25rem;
}
.empty-state__hint {
font-size: 0.875rem;
color: var(--text-muted);
}
/* ────── Utilities ────── */
.muted { color: var(--text-muted); }
.small { font-size: 0.8125rem; }
.danger { color: var(--danger); }
.center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
/* ---- Floating sidebar tooltip ---------------------------------------------
A single element appended to by app.js. We use a JS-driven floater
(instead of CSS ::after on the nav-links) because .sidebar__nav has
`overflow-y: auto`, which per CSS spec also clips overflow-x, hiding any
pseudo-element that extends past the collapsed 72px boundary. Positioned
with getBoundingClientRect() relative to the hovered/focused target. */
.sidebar-tooltip {
position: fixed;
z-index: 10000;
background: #0f172a;
color: #f8fafc;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1;
padding: 0.5rem 0.75rem;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.05);
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.sidebar-tooltip.is-visible {
opacity: 1;
transform: translateX(0);
}
.sidebar-tooltip::before {
content: "";
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #0f172a;
}
html[data-theme="light"] .sidebar-tooltip {
background: #1e293b;
color: #f8fafc;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25),
0 0 0 1px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .sidebar-tooltip::before {
border-right-color: #1e293b;
}
/* ---- Sidebar logout button -------------------------------------------------
Prominent danger-tinted action at the bottom of the sidebar. Icon + label
when expanded; icon only (with a tooltip) when collapsed. The red wash is
very subtle at rest and deepens on hover/focus so the action reads as
destructive without being visually loud on every page load. */
.logout-form { display: block; width: 100%; margin: 0; }
.sidebar-logout {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.625rem 0.875rem;
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: 8px;
background: rgba(239, 68, 68, 0.08);
color: #fca5a5;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease,
border-color 0.15s ease, transform 0.08s ease,
box-shadow 0.15s ease;
}
.sidebar-logout:hover,
.sidebar-logout:focus-visible {
background: rgba(239, 68, 68, 0.18);
color: #fecaca;
border-color: rgba(239, 68, 68, 0.4);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
outline: none;
}
.sidebar-logout:active { transform: translateY(1px); }
.sidebar-logout svg {
width: 16px;
height: 16px;
flex-shrink: 0;
stroke-width: 2.25;
}
/* Light theme: swap the rose palette for a readable crimson on a pale wash */
html[data-theme="light"] .sidebar-logout {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.25);
color: #dc2626;
}
html[data-theme="light"] .sidebar-logout:hover,
html[data-theme="light"] .sidebar-logout:focus-visible {
background: rgba(239, 68, 68, 0.14);
color: #b91c1c;
border-color: rgba(239, 68, 68, 0.45);
}
/* ────── Grade entry page ────── */
.grade-guide { border-color: var(--brand); }
.grade-legend {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
}
.legend-item {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: var(--text);
}
.legend-item strong { color: var(--text); font-weight: 700; }
.legend-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.legend-out .legend-dot { background: #22c55e; }
.legend-vs .legend-dot { background: #84cc16; }
.legend-sat .legend-dot { background: #eab308; }
.legend-fs .legend-dot { background: #f97316; }
.legend-dnme .legend-dot { background: #ef4444; }
.grade-progress {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding: 0.75rem 1rem;
background: var(--surface-alt);
border-radius: var(--radius-sm);
}
.grade-progress__text {
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.grade-progress__bar {
flex: 1;
background: var(--border);
border-radius: 9999px;
height: 8px;
overflow: hidden;
}
.grade-progress__fill {
height: 100%;
background: linear-gradient(90deg, #059669, #10b981);
border-radius: 9999px;
transition: width 0.3s ease;
}
/* Grade inputs */
.table--grades .grade-input {
width: 90px;
padding: 0.5rem 0.625rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-xs);
font-size: 0.9375rem;
font-weight: 600;
background: var(--surface);
color: var(--text);
text-align: center;
font-family: var(--font-mono);
min-height: 38px;
transition: all 0.15s;
}
.table--grades .grade-input:focus {
outline: 0;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
}
.table--grades .grade-input.is-valid {
border-color: #10b981;
background: #ecfdf5;
color: #065f46;
}
.table--grades .grade-input.is-valid.is-failing {
border-color: #ef4444;
background: #fef2f2;
color: #991b1b;
}
.table--grades .grade-input.is-invalid {
border-color: #ef4444;
background: #fef2f2;
color: #991b1b;
}
.table--grades .grade-input[readonly] {
background: var(--surface-alt);
cursor: not-allowed;
opacity: 0.75;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .table--grades .grade-input.is-valid { background: #064e3b; color: #a7f3d0; }
html:not([data-theme="light"]) .table--grades .grade-input.is-valid.is-failing { background: #7f1d1d; color: #fecaca; }
html:not([data-theme="light"]) .table--grades .grade-input.is-invalid { background: #7f1d1d; color: #fecaca; }
}
html[data-theme="dark"] .table--grades .grade-input.is-valid { background: #064e3b; color: #a7f3d0; }
html[data-theme="dark"] .table--grades .grade-input.is-valid.is-failing { background: #7f1d1d; color: #fecaca; }
html[data-theme="dark"] .table--grades .grade-input.is-invalid { background: #7f1d1d; color: #fecaca; }
/* Student cell (name + LRN stacked) */
.student-cell__name {
font-weight: 600;
color: var(--text);
}
.student-cell__lrn {
font-size: 0.6875rem;
color: var(--text-muted);
margin-top: 0.125rem;
}
/* Grade average cell */
.grade-avg {
font-size: 1rem;
font-weight: 700;
text-align: left;
}
.grade-avg strong { color: var(--text); }
/* Descriptor chips */
.descriptor {
display: inline-block;
padding: 0.25rem 0.625rem;
border-radius: var(--radius-xs);
font-size: 0.75rem;
font-weight: 600;
text-align: center;
white-space: nowrap;
}
.descriptor-out { background: #d1fae5; color: #065f46; }
.descriptor-vs { background: #ecfccb; color: #365314; }
.descriptor-sat { background: #fef3c7; color: #713f12; }
.descriptor-fs { background: #ffedd5; color: #7c2d12; }
.descriptor-dnme { background: #fee2e2; color: #7f1d1d; }
.descriptor-pass { background: #d1fae5; color: #065f46; }
.descriptor-fail { background: #fee2e2; color: #7f1d1d; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .descriptor-out { background: #064e3b; color: #a7f3d0; }
html:not([data-theme="light"]) .descriptor-vs { background: #365314; color: #d9f99d; }
html:not([data-theme="light"]) .descriptor-sat { background: #78350f; color: #fde68a; }
html:not([data-theme="light"]) .descriptor-fs { background: #7c2d12; color: #fed7aa; }
html:not([data-theme="light"]) .descriptor-dnme { background: #7f1d1d; color: #fecaca; }
}
html[data-theme="dark"] .descriptor-out { background: #064e3b; color: #a7f3d0; }
html[data-theme="dark"] .descriptor-vs { background: #365314; color: #d9f99d; }
html[data-theme="dark"] .descriptor-sat { background: #78350f; color: #fde68a; }
html[data-theme="dark"] .descriptor-fs { background: #7c2d12; color: #fed7aa; }
html[data-theme="dark"] .descriptor-dnme { background: #7f1d1d; color: #fecaca; }
/* Sticky save bar */
.save-bar {
position: sticky;
bottom: 0;
margin: 1.5rem -1.25rem -1.25rem;
padding: 0.875rem 1.25rem;
background: var(--surface);
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.05);
z-index: 5;
}
@media (min-width: 720px) {
.save-bar { margin: 1.5rem -1.5rem -1.5rem; padding: 1rem 1.5rem; }
}
.save-bar__info { flex: 1; min-width: 0; }
.save-bar__badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: var(--warning-soft);
color: #92400e;
border-radius: var(--radius-xs);
font-size: 0.8125rem;
font-weight: 600;
border: 1px solid var(--warning);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .save-bar__badge { color: #fde68a; }
}
html[data-theme="dark"] .save-bar__badge { color: #fde68a; }
.save-bar__badge strong { font-weight: 700; }
.save-bar__actions {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
/* Make grade table rows not zebra-striped (cleaner look for data entry) */
.table--grades tbody tr:nth-child(even) { background: transparent; }
.table--grades tbody tr:hover { background: rgba(2, 132, 199, 0.04); }
/* ────── Academic Period admin card ────── */
.period-active {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 1rem 1.25rem;
background: linear-gradient(135deg, rgba(2,132,199,0.08), rgba(14,165,233,0.04));
border: 1px solid var(--brand);
border-radius: var(--radius);
}
.period-active__label {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
font-weight: 600;
}
.period-active__value {
font-size: 1.125rem;
font-weight: 700;
color: var(--text);
}
.period-active__sep {
font-size: 1.5rem;
color: var(--text-muted);
opacity: 0.6;
}
@media (max-width: 640px) {
.period-active__sep { display: none; }
}
/* Grade entry quarter-active indicator */
.quarter-banner {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.125rem;
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
border: 1px solid #22c55e;
border-radius: var(--radius-sm);
font-size: 0.9375rem;
color: #065f46;
margin-bottom: 1rem;
font-weight: 500;
}
.quarter-banner--closed {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-color: #f59e0b;
color: #78350f;
}
.quarter-banner strong { font-weight: 700; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .quarter-banner { background: #064e3b; color: #a7f3d0; }
html:not([data-theme="light"]) .quarter-banner--closed { background: #78350f; color: #fde68a; }
}
html[data-theme="dark"] .quarter-banner { background: #064e3b; color: #a7f3d0; }
html[data-theme="dark"] .quarter-banner--closed { background: #78350f; color: #fde68a; }
/* Read-only (closed quarter) grade cells */
.table--grades .grade-input.is-closed {
background: #f3f4f6;
color: var(--text-muted);
cursor: not-allowed;
border-color: var(--border);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .table--grades .grade-input.is-closed { background: #273449; }
}
html[data-theme="dark"] .table--grades .grade-input.is-closed { background: #273449; }
/* ════════════════════════════════════════════════════════════════════════════
DepEd component-based grade entry (Phase 1 rewrite)
See src/Services/GradeComputation.php and migration 140 for the spec.
════════════════════════════════════════════════════════════════════════════ */
/* Quarter tab switcher — teacher focuses on one quarter at a time */
.quarter-tabs {
display: flex;
gap: 0.25rem;
padding: 0.25rem;
margin: 0 0 1rem;
background: var(--surface-2, var(--surface));
border: 1px solid var(--border);
border-radius: 10px;
width: fit-content;
}
.quarter-tab {
appearance: none;
background: transparent;
border: none;
padding: 0.55rem 1.25rem;
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
border-radius: 8px;
transition: background 0.12s ease, color 0.12s ease;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.quarter-tab:hover { color: var(--text); }
.quarter-tab.is-active {
background: var(--brand, #0284c7);
color: #fff;
box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25);
}
.quarter-panel { display: none; }
.quarter-panel.is-active { display: block; }
.quarter-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
gap: 1rem;
flex-wrap: wrap;
}
.quarter-panel__head h3 {
font-size: 1rem;
margin: 0;
font-weight: 600;
}
/* Share all the table--grades input / zebra / focus rules with the new table */
.table--grade-components .grade-input {
width: 72px;
padding: 0.45rem 0.35rem;
text-align: center;
font-variant-numeric: tabular-nums;
font-weight: 600;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-size: 0.9375rem;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.table--grade-components .grade-input:focus {
outline: none;
border-color: var(--brand, #0284c7);
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}
.table--grade-components .grade-input.is-valid { border-color: rgba(16, 185, 129, 0.5); }
.table--grade-components .grade-input.is-invalid { border-color: rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.08); }
.table--grade-components .grade-input[readonly] {
background: var(--surface-2, var(--surface));
color: var(--text-muted);
cursor: not-allowed;
}
.table--grade-components th.num,
.table--grade-components td.num {
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Subject-teacher grade entry table — right-align all numeric columns
(header + input + computed sem avg) so the digits line up. */
#gradesTable th.num,
#gradesTable td.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
#gradesTable td.num input.grade-input {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Password show/hide toggle — js/password-toggle.js attaches this to
every on the page. The wrapper takes over
the input's full width so the layout doesn't jump. */
.pwd-toggle-wrap {
position: relative;
display: block;
width: 100%;
}
.pwd-toggle-wrap > input { width: 100%; }
.pwd-toggle-btn {
position: absolute;
top: 50%;
right: .55rem;
transform: translateY(-50%);
padding: 4px 6px;
background: transparent;
border: none;
cursor: pointer;
color: var(--text-muted, #6b7280);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
line-height: 0;
transition: color .12s, background .12s;
}
.pwd-toggle-btn:hover,
.pwd-toggle-btn:focus-visible {
color: var(--primary, #0284c7);
background: rgba(14, 165, 233, 0.08);
outline: none;
}
.pwd-toggle-btn[aria-pressed="true"] { color: var(--primary, #0284c7); }
/* ID-photo picker used on the IIF form.
Single unified target — one square tile. Placeholder shows a camera +
prompt; when a photo is loaded it fills the whole tile. Hover/focus
reveals a subtle overlay inviting a replace. */
.photo-picker {
position: relative;
display: block;
width: 220px;
aspect-ratio: 1 / 1;
border: 2px dashed var(--border, #d1d5db);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
background: var(--surface-2, #f3f4f6);
transition: border-color .15s, background .15s, transform .15s;
}
.photo-picker:hover,
.photo-picker:focus-visible {
border-color: #0ea5e9;
outline: none;
}
.photo-picker.is-dragover {
border-color: #0ea5e9;
background: rgba(14, 165, 233, 0.10);
}
.photo-picker__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* The hidden attribute sets display:none in UA styles, but our own
display:block above would win. Force the hidden state explicitly. */
.photo-picker__img[hidden] { display: none; }
.photo-picker__overlay {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: .25rem;
padding: 1rem; text-align: center;
color: var(--text-muted, #6b7280);
transition: background .15s, color .15s, opacity .15s;
background: transparent;
}
/* When a photo is loaded, dim the overlay unless hovered. */
.photo-picker.has-photo .photo-picker__overlay {
background: rgba(0, 0, 0, 0.0);
opacity: 0;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.photo-picker.has-photo:hover .photo-picker__overlay,
.photo-picker.has-photo:focus-visible .photo-picker__overlay,
.photo-picker.has-photo.is-dragover .photo-picker__overlay {
background: rgba(0, 0, 0, 0.45);
opacity: 1;
}
.photo-picker__icon { font-size: 2rem; line-height: 1; }
.photo-picker__text { font-weight: 600; font-size: .95rem; }
.photo-picker__hint { font-size: .78rem; opacity: .85; }
/* Sidebar sub-menu (e.g. Class Grade Summary → Summary / Per Subject).
Subtle indented links — no full-width hover background, no left border
(the parent nav-link already shows the active rail). The sub-list lives
inside the parent's vertical rhythm so it reads as a continuation, not
a new nav block. */
.sidebar__nav .nav-sublist {
display: flex;
flex-direction: column;
margin: 0 0 .25rem 0;
padding: .15rem 0 .25rem 2.6rem; /* aligned roughly with the parent label */
}
.sidebar__nav .nav-link--sub {
display: block;
padding: .35rem .75rem;
min-height: 0; /* override nav-link min-height */
font-size: .825rem;
font-weight: 400;
color: var(--sidebar-text);
opacity: .75;
border-left: 2px solid transparent;
background: transparent;
text-decoration: none;
transition: color .12s, opacity .12s, border-color .12s;
}
.sidebar__nav .nav-link--sub:hover {
background: transparent;
color: var(--sidebar-text-bright);
opacity: 1;
}
.sidebar__nav .nav-link--sub.is-active {
color: var(--sidebar-text-bright);
opacity: 1;
font-weight: 600;
border-left-color: #0ea5e9;
}
.table--grade-components th small {
display: block;
font-weight: 400;
font-size: 0.6875rem;
margin-top: 2px;
opacity: 0.7;
}
.table--grade-components tbody tr:hover { background: rgba(2, 132, 199, 0.04); }
.grade-initial {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 4px;
background: rgba(2, 132, 199, 0.08);
color: var(--text-muted);
font-size: 0.8125rem;
font-weight: 600;
}
.grade-final-number {
display: inline-block;
padding: 0.3rem 0.6rem;
min-width: 44px;
text-align: center;
border-radius: 6px;
background: var(--brand, #0284c7);
color: #fff;
font-size: 1rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25);
}
/* User guide */
.guide-toc {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 2rem;
}
.guide-toc h3 { margin: 0 0 0.5rem; font-size: 0.9375rem; }
.guide-toc ol { margin: 0; padding-left: 1.25rem; }
.guide-toc li { margin: 0.2rem 0; font-size: 0.875rem; }
.guide-toc a { color: #0284c7; text-decoration: none; font-weight: 500; }
.guide-toc a:hover { text-decoration: underline; }
.guide-section { margin-bottom: 2.5rem; }
.guide-section h2 {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.75rem;
padding-bottom: 0.4rem;
border-bottom: 2px solid #0284c7;
color: #0f172a;
}
.guide-section h3 {
font-size: 1rem;
font-weight: 700;
margin: 1.25rem 0 0.5rem;
color: #334155;
}
.guide-section p, .guide-section li { line-height: 1.7; font-size: 0.9375rem; color: #334155; }
.guide-section ol, .guide-section ul { padding-left: 1.5rem; }
.guide-section li { margin: 0.3rem 0; }
.guide-section code {
background: #e2e8f0;
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-size: 0.8125rem;
}
/* Counselling notes */
.notes-list { display: flex; flex-direction: column; gap: 0.625rem; }
.note-item {
padding: 0.875rem 1rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-2, var(--surface));
}
.note-item--confidential {
border-left: 3px solid #f59e0b;
background: rgba(245, 158, 11, 0.04);
}
.note-item__meta {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.4rem;
}
.note-item__body {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--text);
}
.note-cat {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
background: var(--surface-2, #e2e8f0);
color: var(--text-muted);
}
.note-cat--academic { background: #dbeafe; color: #1e40af; }
.note-cat--behavioral { background: #fef3c7; color: #92400e; }
.note-cat--personal { background: #e0e7ff; color: #3730a3; }
.note-cat--referral { background: #fce7f3; color: #9d174d; }
.note-cat--follow_up { background: #dcfce7; color: #166534; }
.note-confidential {
font-size: 0.75rem;
font-weight: 600;
color: #b45309;
}
/* Class performance analytics */
.perf-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.perf-stat {
text-align: center;
padding: 0.625rem;
background: var(--surface-2, var(--surface));
border-radius: 8px;
border: 1px solid var(--border);
}
.perf-stat__n {
font-size: 1.5rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.perf-stat__label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
margin-top: 0.2rem;
}
.perf-histogram {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.perf-histo-row {
display: grid;
grid-template-columns: 60px 1fr 40px;
gap: 0.5rem;
align-items: center;
}
.perf-histo-label {
font-size: 0.8125rem;
font-weight: 600;
text-align: right;
font-variant-numeric: tabular-nums;
}
.perf-histo-bar {
height: 20px;
background: var(--surface-2, var(--border));
border-radius: 4px;
overflow: hidden;
}
.perf-histo-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
min-width: 2px;
}
.perf-histo-count {
font-size: 0.8125rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text-muted);
}
/* Progress pill (teacher progress monitor) */
.progress-pill {
display: inline-flex;
padding: 0.3rem 0.75rem;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.progress-pill--good { background: rgba(52, 211, 153, 0.15); color: #065f46; }
.progress-pill--ok { background: rgba(251, 191, 36, 0.15); color: #78350f; }
.progress-pill--bad { background: rgba(248, 113, 113, 0.15); color: #7f1d1d; }
html[data-theme="dark"] .progress-pill--good { background: rgba(52, 211, 153, 0.18); color: #a7f3d0; }
html[data-theme="dark"] .progress-pill--ok { background: rgba(251, 191, 36, 0.18); color: #fde68a; }
html[data-theme="dark"] .progress-pill--bad { background: rgba(248, 113, 113, 0.18); color: #fecaca; }
/* Student attendance bar */
.att-bar {
position: relative;
background: var(--surface-2, var(--border));
border-radius: 6px;
height: 22px;
overflow: hidden;
min-width: 120px;
}
.att-bar__fill {
height: 100%;
border-radius: 6px;
transition: width 0.2s ease;
}
.att-bar__fill--good { background: linear-gradient(90deg, #34d399, #10b981); }
.att-bar__fill--ok { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.att-bar__fill--bad { background: linear-gradient(90deg, #f87171, #ef4444); }
.att-bar__label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.75rem;
font-weight: 700;
color: #0f172a;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
}
/* ════════════════════════════════════════════════════════════════════════════
Electronic Report Card (Phase 3)
Student-facing, print-optimized. Separate from SF9 (official audit form).
════════════════════════════════════════════════════════════════════════════ */
.ecard-body {
background: var(--bg, #f5f5f5);
margin: 0;
padding: 0;
min-height: 100vh;
}
.ecard-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.875rem 1.5rem;
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 20;
}
.ecard-toolbar h1 {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
}
.ecard {
max-width: 840px;
margin: 2rem auto;
padding: 2.5rem 2.75rem;
background: #fff;
color: #0f172a;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}
.ecard__header {
display: flex;
gap: 1.25rem;
align-items: center;
padding-bottom: 1.25rem;
border-bottom: 2px solid #0284c7;
margin-bottom: 1.5rem;
}
.ecard__seal { width: 72px; height: 72px; flex-shrink: 0; }
.ecard__heading { flex: 1; min-width: 0; }
.ecard__school-name {
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #0f172a;
}
.ecard__school-addr {
font-size: 0.75rem;
color: #64748b;
margin-bottom: 0.5rem;
}
.ecard__heading h2 {
margin: 0.25rem 0 0;
font-size: 1.375rem;
font-weight: 700;
color: #0284c7;
}
.ecard__sy {
font-size: 0.875rem;
color: #64748b;
margin-top: 0.125rem;
}
.ecard__info {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 0.875rem 1.125rem;
margin-bottom: 1.5rem;
font-size: 0.875rem;
}
.ecard__info-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
padding: 0.3rem 0;
}
.ecard__info-row + .ecard__info-row { border-top: 1px dashed #e2e8f0; }
.ecard__section { margin-bottom: 1.75rem; }
.ecard__section h3 {
margin: 0 0 0.75rem;
font-size: 1rem;
font-weight: 700;
color: #0f172a;
padding-bottom: 0.3rem;
border-bottom: 1px solid #cbd5e1;
}
.ecard__grades {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.ecard__grades th,
.ecard__grades td {
padding: 0.5rem 0.7rem;
border-bottom: 1px solid #e2e8f0;
text-align: left;
}
.ecard__grades th {
background: #f1f5f9;
font-weight: 700;
color: #475569;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ecard__grades th.num,
.ecard__grades td.num {
text-align: center;
font-variant-numeric: tabular-nums;
}
.ecard__grades tfoot td {
padding-top: 0.7rem;
font-weight: 700;
background: #f8fafc;
border-top: 2px solid #0284c7;
}
.ecard__ga-label { text-align: right; color: #475569; }
.ecard__final {
display: inline-block;
min-width: 32px;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-weight: 700;
}
.ecard__final.pass { background: rgba(52, 211, 153, 0.18); color: #065f46; }
.ecard__final.fail { background: rgba(248, 113, 113, 0.18); color: #7f1d1d; }
.ecard__cat {
display: inline-block;
margin-left: 0.4rem;
padding: 0.08rem 0.4rem;
border-radius: 4px;
font-size: 0.6875rem;
font-weight: 600;
background: #e2e8f0;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.ecard__cat--core { background: #dbeafe; color: #1e40af; }
.ecard__cat--applied { background: #dcfce7; color: #166534; }
.ecard__cat--specialized { background: #fef3c7; color: #92400e; }
.ecard__honor {
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: linear-gradient(90deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.04));
border: 1px solid rgba(251, 191, 36, 0.4);
border-radius: 6px;
font-size: 0.9375rem;
color: #78350f;
}
.ecard__attendance-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
.ecard__att-stat {
padding: 0.875rem;
text-align: center;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
.ecard__att-stat--present { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.3); }
.ecard__att-stat--absent { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.3); }
.ecard__att-stat--tardy { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); }
.ecard__att-n {
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
color: #0f172a;
}
.ecard__att-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
margin-top: 0.3rem;
}
.ecard__footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid #cbd5e1;
}
.ecard__sig { text-align: center; }
.ecard__sig-line {
border-bottom: 1px solid #0f172a;
height: 28px;
}
.ecard__sig-label {
font-size: 0.75rem;
margin-top: 0.25rem;
}
.ecard__footnote {
margin-top: 1.5rem;
padding-top: 0.75rem;
border-top: 1px dashed #e2e8f0;
text-align: center;
}
/* Dark mode: E-Card + Guide — override all hardcoded light colors */
html[data-theme="dark"] .ecard-body { background: var(--bg, #0f172a); }
html[data-theme="dark"] .ecard {
background: var(--surface, #1e293b);
color: var(--text, #e2e8f0);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .ecard__header { border-bottom-color: #0ea5e9; }
html[data-theme="dark"] .ecard__school-name { color: #e2e8f0; }
html[data-theme="dark"] .ecard__school-addr { color: #94a3b8; }
html[data-theme="dark"] .ecard__heading h2 { color: #38bdf8; }
html[data-theme="dark"] .ecard__sy { color: #94a3b8; }
html[data-theme="dark"] .ecard__info {
background: rgba(30, 41, 59, 0.8);
border-color: #334155;
}
html[data-theme="dark"] .ecard__info-row + .ecard__info-row { border-top-color: #334155; }
html[data-theme="dark"] .ecard__section h3 { color: #e2e8f0; border-bottom-color: #475569; }
html[data-theme="dark"] .ecard__grades th {
background: #1e293b;
color: #94a3b8;
}
html[data-theme="dark"] .ecard__grades td { border-bottom-color: #334155; color: #cbd5e1; }
html[data-theme="dark"] .ecard__grades tfoot td {
background: rgba(30, 41, 59, 0.8);
border-top-color: #0ea5e9;
}
html[data-theme="dark"] .ecard__ga-label { color: #94a3b8; }
html[data-theme="dark"] .ecard__final.pass { background: rgba(52, 211, 153, 0.2); color: #a7f3d0; }
html[data-theme="dark"] .ecard__final.fail { background: rgba(248, 113, 113, 0.2); color: #fecaca; }
html[data-theme="dark"] .ecard__cat { background: #334155; color: #94a3b8; }
html[data-theme="dark"] .ecard__cat--core { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
html[data-theme="dark"] .ecard__cat--applied { background: rgba(16, 185, 129, 0.2); color: #a7f3d0; }
html[data-theme="dark"] .ecard__cat--specialized { background: rgba(245, 158, 11, 0.2); color: #fde68a; }
html[data-theme="dark"] .ecard__honor {
background: linear-gradient(90deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05));
border-color: rgba(251, 191, 36, 0.3);
color: #fde68a;
}
html[data-theme="dark"] .ecard__att-stat {
background: rgba(30, 41, 59, 0.8);
border-color: #334155;
}
html[data-theme="dark"] .ecard__att-stat--present { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.25); }
html[data-theme="dark"] .ecard__att-stat--absent { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.25); }
html[data-theme="dark"] .ecard__att-stat--tardy { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.25); }
html[data-theme="dark"] .ecard__att-n { color: #e2e8f0; }
html[data-theme="dark"] .ecard__att-label { color: #94a3b8; }
html[data-theme="dark"] .ecard__footer { border-top-color: #475569; }
html[data-theme="dark"] .ecard__sig-line { border-bottom-color: #64748b; }
html[data-theme="dark"] .ecard__footnote { border-top-color: #334155; }
/* Guide TOC + sections */
html[data-theme="dark"] .guide-toc {
background: rgba(30, 41, 59, 0.8);
border-color: #334155;
}
html[data-theme="dark"] .guide-toc a { color: #38bdf8; }
html[data-theme="dark"] .guide-section h2 { color: #e2e8f0; border-bottom-color: #0ea5e9; }
html[data-theme="dark"] .guide-section h3 { color: #cbd5e1; }
html[data-theme="dark"] .guide-section p,
html[data-theme="dark"] .guide-section li { color: #cbd5e1; }
html[data-theme="dark"] .guide-section code {
background: #334155;
color: #e2e8f0;
}
/* Also respect prefers-color-scheme for users who haven't toggled manually */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .ecard-body { background: var(--bg, #0f172a); }
html:not([data-theme="light"]) .ecard { background: var(--surface, #1e293b); color: var(--text, #e2e8f0); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
html:not([data-theme="light"]) .ecard__header { border-bottom-color: #0ea5e9; }
html:not([data-theme="light"]) .ecard__school-name { color: #e2e8f0; }
html:not([data-theme="light"]) .ecard__info { background: rgba(30, 41, 59, 0.8); border-color: #334155; }
html:not([data-theme="light"]) .ecard__grades th { background: #1e293b; color: #94a3b8; }
html:not([data-theme="light"]) .ecard__grades td { border-bottom-color: #334155; color: #cbd5e1; }
html:not([data-theme="light"]) .ecard__grades tfoot td { background: rgba(30, 41, 59, 0.8); border-top-color: #0ea5e9; }
html:not([data-theme="light"]) .guide-toc { background: rgba(30, 41, 59, 0.8); border-color: #334155; }
html:not([data-theme="light"]) .guide-section h2 { color: #e2e8f0; border-bottom-color: #0ea5e9; }
html:not([data-theme="light"]) .guide-section h3 { color: #cbd5e1; }
html:not([data-theme="light"]) .guide-section p,
html:not([data-theme="light"]) .guide-section li { color: #cbd5e1; }
html:not([data-theme="light"]) .guide-section code { background: #334155; color: #e2e8f0; }
}
/* Mobile: keep the User Guide / E-Card pages from overflowing horizontally */
@media (max-width: 700px) {
.ecard-body { overflow-x: hidden; }
.ecard-toolbar {
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
}
.ecard-toolbar h1 {
order: -1;
flex-basis: 100%;
font-size: 1rem;
line-height: 1.25;
}
.ecard-toolbar .btn { font-size: 0.8125rem; padding: 0.4rem 0.7rem; }
.ecard {
margin: 0.75rem;
padding: 1.25rem 1rem;
border-radius: 8px;
}
.ecard__header { gap: 0.75rem; }
.ecard__seal { width: 56px; height: 56px; }
.ecard__heading h2 { font-size: 1.125rem; line-height: 1.25; }
.guide-section h2 { font-size: 1.0625rem; }
.guide-section h3 { font-size: 0.9375rem; }
.guide-section p, .guide-section li { font-size: 0.875rem; }
.guide-section pre, .guide-section code { word-break: break-word; white-space: pre-wrap; }
.guide-toc ol { padding-left: 1rem; }
.table__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Print: hide toolbar, strip shadows, full-width card, force light colors */
@media print {
.no-print { display: none !important; }
.ecard-body { background: #fff !important; }
.ecard {
margin: 0;
max-width: none;
box-shadow: none !important;
border-radius: 0;
padding: 1.5cm 2cm;
background: #fff !important;
color: #0f172a !important;
}
.ecard__grades th { background: #f1f5f9 !important; color: #475569 !important; }
.ecard__grades td { color: #0f172a !important; border-bottom-color: #e2e8f0 !important; }
.guide-section h2, .guide-section h3 { color: #0f172a !important; }
.guide-section p, .guide-section li { color: #334155 !important; }
.guide-toc { background: #f8fafc !important; border-color: #e2e8f0 !important; }
}
/* ════════════════════════════════════════════════════════════════════════════
End-of-year dashboard (Phase 2)
════════════════════════════════════════════════════════════════════════════ */
.eoy-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.875rem;
margin-bottom: 1.25rem;
}
.eoy-stat {
padding: 1.125rem 1.25rem;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.eoy-stat__n {
font-size: 2rem;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.eoy-stat__label {
margin-top: 0.4rem;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.eoy-stat--promoted { border-color: #34d399; background: linear-gradient(180deg, rgba(52, 211, 153, 0.08), transparent); }
.eoy-stat--graduated { border-color: #8b5cf6; background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), transparent); }
.eoy-stat--conditional { border-color: #fbbf24; background: linear-gradient(180deg, rgba(251, 191, 36, 0.08), transparent); }
.eoy-stat--retained { border-color: #f87171; background: linear-gradient(180deg, rgba(248, 113, 113, 0.08), transparent); }
.eoy-stat--pending { border-color: #94a3b8; background: linear-gradient(180deg, rgba(148, 163, 184, 0.08), transparent); }
.eoy-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.eoy-actions__left { flex: 1 1 300px; min-width: 0; }
.eoy-actions__right { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.decision-badge {
display: inline-block;
padding: 0.3rem 0.7rem;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
}
.decision-promoted { background: rgba(52, 211, 153, 0.15); color: #065f46; }
.decision-graduated { background: rgba(139, 92, 246, 0.15); color: #5b21b6; }
.decision-conditional { background: rgba(251, 191, 36, 0.15); color: #78350f; }
.decision-retained { background: rgba(248, 113, 113, 0.15); color: #7f1d1d; }
.decision-pending { background: rgba(148, 163, 184, 0.15); color: #334155; }
.decision-dropped { background: rgba(148, 163, 184, 0.15); color: #334155; }
html[data-theme="dark"] .decision-promoted { background: rgba(52, 211, 153, 0.18); color: #a7f3d0; }
html[data-theme="dark"] .decision-graduated { background: rgba(139, 92, 246, 0.18); color: #ddd6fe; }
html[data-theme="dark"] .decision-conditional { background: rgba(251, 191, 36, 0.18); color: #fde68a; }
html[data-theme="dark"] .decision-retained { background: rgba(248, 113, 113, 0.18); color: #fecaca; }
html[data-theme="dark"] .decision-pending { background: rgba(148, 163, 184, 0.18); color: #e2e8f0; }
html[data-theme="dark"] .decision-dropped { background: rgba(148, 163, 184, 0.18); color: #e2e8f0; }
.fail-chip {
display: inline-block;
margin: 0 0.25rem 0.25rem 0;
padding: 0.15rem 0.5rem;
background: rgba(248, 113, 113, 0.12);
color: #b91c1c;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
}
html[data-theme="dark"] .fail-chip { background: rgba(248, 113, 113, 0.22); color: #fecaca; }
.pill {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
}
.pill--success { background: rgba(52, 211, 153, 0.15); color: #065f46; }
.pill--warn { background: rgba(251, 191, 36, 0.15); color: #78350f; }
html[data-theme="dark"] .pill--success { background: rgba(52, 211, 153, 0.18); color: #a7f3d0; }
html[data-theme="dark"] .pill--warn { background: rgba(251, 191, 36, 0.18); color: #fde68a; }
.override-detail summary {
cursor: pointer;
list-style: none;
}
.override-detail summary::-webkit-details-marker { display: none; }
.override-form {
margin-top: 0.5rem;
padding: 0.75rem;
background: var(--surface-2, var(--surface));
border: 1px solid var(--border);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 260px;
}
.override-form label {
display: flex;
flex-direction: column;
gap: 0.2rem;
font-size: 0.8125rem;
font-weight: 500;
}
.override-form select,
.override-form input[type="text"] {
padding: 0.4rem 0.5rem;
font-family: inherit;
font-size: 0.875rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
}
.preflight { list-style: none; padding: 0; margin: 0 0 1rem; }
.preflight li {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
font-size: 0.9375rem;
}
.preflight li:last-child { border-bottom: none; }
.preflight li.ok .preflight__icon { color: #059669; }
.preflight li.warn .preflight__icon { color: #b45309; }
.preflight li.fail .preflight__icon { color: #b91c1c; }
.preflight__icon { font-weight: 700; font-size: 1.125rem; }
.rollover-breakdown {
display: grid;
gap: 0.4rem;
padding: 0.875rem 1rem;
background: var(--surface-2, var(--surface));
border-radius: 8px;
margin-top: 0.75rem;
font-size: 0.9375rem;
}
.finalize-bar {
margin-top: 1rem;
padding: 1rem 1.25rem;
border: 1px dashed var(--border);
border-radius: 10px;
background: var(--surface-2, var(--surface));
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.finalize-bar__info {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1 1 300px;
min-width: 0;
}
.finalize-bar .btn-danger {
background: #b91c1c;
color: #fff;
border-color: #991b1b;
white-space: nowrap;
}
.finalize-bar .btn-danger:hover,
.finalize-bar .btn-danger:focus-visible {
background: #991b1b;
outline: none;
}
/* ════════════════════════════════════════════════════════════════════════════
Adviser: Attendance entry grid (redesigned)
════════════════════════════════════════════════════════════════════════════ */
.att-card { padding: 0; overflow: hidden; }
.att-card .save-bar { padding: 0.875rem 1.25rem; }
.att-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.att-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
min-width: 980px;
font-size: 0.9375rem;
}
.att-table th,
.att-table td {
padding: 0.65rem 0.5rem;
text-align: center;
vertical-align: middle;
background: var(--surface, #fff);
border-bottom: 1px solid var(--border, #e5e7eb);
}
.att-col-student { width: 260px; }
.att-col-month { width: 66px; }
.att-col-total { width: 86px; }
.att-col-sem1 { background: rgba(59, 130, 246, 0.04); }
.att-col-sem2 { background: rgba(168, 85, 247, 0.04); }
/* Sticky header row + sticky first column for horizontal scroll */
.att-thead__sem th,
.att-thead__months th {
position: sticky;
top: 0;
z-index: 3;
background: var(--surface, #fff);
}
.att-th-sticky {
position: sticky;
left: 0;
z-index: 2;
background: var(--surface, #fff);
box-shadow: 4px 0 6px -4px rgba(0,0,0,0.08);
}
.att-thead__sem .att-th-sticky,
.att-thead__months .att-th-sticky {
z-index: 4;
}
.att-th-student, .att-th-total {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted, #64748b);
background: var(--surface, #fff);
font-weight: 700;
}
.att-th-student { text-align: left; padding-left: 1.125rem; }
.att-th-total { background: #f8fafc; }
.att-sem-header {
font-weight: 700;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.55rem 0.75rem;
color: #fff;
}
.att-sem-header--1 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.att-sem-header--2 { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.att-th-month {
font-weight: 700;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.55rem 0.5rem;
color: var(--text, #0f172a);
background: #f8fafc;
}
.att-th-month--1 { border-top: 2px solid #3b82f6; }
.att-th-month--2 { border-top: 2px solid #a855f7; }
.att-cell-label {
text-align: left;
padding-left: 1.125rem;
font-weight: 500;
}
.att-label-icon { font-size: 1.125rem; margin-right: 0.4rem; }
/* Student cell */
.att-student {
display: flex;
gap: 0.7rem;
align-items: center;
min-width: 0;
}
.att-student__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #0284c7, #0369a1);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.8125rem;
flex-shrink: 0;
}
.att-student__meta { text-align: left; min-width: 0; }
.att-student__name {
font-weight: 600;
color: var(--text, #0f172a);
font-size: 0.9375rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.att-student__lrn {
font-size: 0.75rem;
color: var(--text-muted, #64748b);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* School-days row */
.att-row-schooldays th,
.att-row-schooldays td {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-bottom: 3px solid #f59e0b;
font-weight: 600;
}
.att-row-schooldays .att-th-sticky { background: #fef3c7; }
.att-row-schooldays select.att-select--days {
/* slight emphasis over default */
box-shadow: 0 1px 2px rgba(146, 64, 14, 0.15);
}
/* Alternating student row shading */
.att-row-student:nth-child(even) th.att-th-sticky { background: #f9fafb; }
.att-row-student:nth-child(even) td { background: #fafafa; }
.att-row-student:nth-child(even) .att-col-sem1 { background: rgba(59, 130, 246, 0.05); }
.att-row-student:nth-child(even) .att-col-sem2 { background: rgba(168, 85, 247, 0.05); }
.att-row-student:hover th.att-th-sticky,
.att-row-student:hover td { background: #f0f9ff !important; }
/* Dropdowns (replaced the old number inputs) */
.att-select {
width: 58px;
max-width: 58px;
padding: 0.4rem 0.35rem;
padding-right: 1.1rem; /* space for caret */
text-align: center;
text-align-last: center; /* centers the chosen option text */
border: 1px solid var(--border, #e5e7eb);
border-radius: 0.375rem;
font-size: 0.9375rem;
font-variant-numeric: tabular-nums;
background-color: var(--surface, #fff);
color: var(--text, #0f172a);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.35rem center;
background-size: 7px 5px;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.att-select:focus {
outline: none;
border-color: #0284c7;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
}
.att-select--days {
width: 64px;
max-width: 64px;
font-weight: 700;
color: #92400e;
background-color: #fffbeb;
border-color: #fcd34d;
}
.att-select[value=""], .att-select option[value=""] { color: #94a3b8; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .att-select { background-color: #1e293b;
color: #e2e8f0;
border-color: #334155; }
html:not([data-theme="light"]) .att-select--days { background-color: #422006;
color: #fde68a;
border-color: #b45309; }
}
html[data-theme="dark"] .att-select { background-color: #1e293b;
color: #e2e8f0;
border-color: #334155; }
html[data-theme="dark"] .att-select--days { background-color: #422006;
color: #fde68a;
border-color: #b45309; }
/* Total-absent column */
.att-cell-total {
font-weight: 700;
font-size: 1.125rem;
background: #f1f5f9 !important;
color: #0f172a;
}
/* Legend */
.att-legend {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.8125rem;
color: var(--text-muted, #64748b);
}
.att-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.att-legend__swatch {
width: 14px;
height: 14px;
border-radius: 3px;
display: inline-block;
}
.att-legend__swatch--1 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.att-legend__swatch--2 { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.att-legend__swatch--err { background: #fee2e2; border: 1px solid #dc2626; }
/* Dark mode tweaks */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .att-table th, html:not([data-theme="light"]) .att-table td { background: #0f172a; border-color: #1e293b; }
html:not([data-theme="light"]) .att-th-student, html:not([data-theme="light"]) .att-th-total, html:not([data-theme="light"]) .att-th-month { background: #111827; color: #94a3b8; }
html:not([data-theme="light"]) .att-th-sticky { background: #0f172a; }
html:not([data-theme="light"]) .att-col-sem1 { background: rgba(59, 130, 246, 0.08); }
html:not([data-theme="light"]) .att-col-sem2 { background: rgba(168, 85, 247, 0.08); }
html:not([data-theme="light"]) .att-row-schooldays th, html:not([data-theme="light"]) .att-row-schooldays td { background: #422006; color: #fde68a; border-bottom-color: #b45309; }
html:not([data-theme="light"]) .att-row-schooldays .att-th-sticky { background: #422006; }
html:not([data-theme="light"]) .att-row-student:nth-child(even) th.att-th-sticky, html:not([data-theme="light"]) .att-row-student:nth-child(even) td { background: #111827; }
html:not([data-theme="light"]) .att-row-student:hover th.att-th-sticky, html:not([data-theme="light"]) .att-row-student:hover td { background: #1e3a5f !important; }
html:not([data-theme="light"]) .att-cell-total { background: #1e293b !important; color: #e2e8f0; }
html:not([data-theme="light"]) .att-student__name { color: #e2e8f0; }
}
html[data-theme="dark"] .att-table th, html[data-theme="dark"] .att-table td { background: #0f172a; border-color: #1e293b; }
html[data-theme="dark"] .att-th-student, html[data-theme="dark"] .att-th-total, html[data-theme="dark"] .att-th-month { background: #111827; color: #94a3b8; }
html[data-theme="dark"] .att-th-sticky { background: #0f172a; }
html[data-theme="dark"] .att-col-sem1 { background: rgba(59, 130, 246, 0.08); }
html[data-theme="dark"] .att-col-sem2 { background: rgba(168, 85, 247, 0.08); }
html[data-theme="dark"] .att-row-schooldays th, html[data-theme="dark"] .att-row-schooldays td { background: #422006; color: #fde68a; border-bottom-color: #b45309; }
html[data-theme="dark"] .att-row-schooldays .att-th-sticky { background: #422006; }
html[data-theme="dark"] .att-row-student:nth-child(even) th.att-th-sticky, html[data-theme="dark"] .att-row-student:nth-child(even) td { background: #111827; }
html[data-theme="dark"] .att-row-student:hover th.att-th-sticky, html[data-theme="dark"] .att-row-student:hover td { background: #1e3a5f !important; }
html[data-theme="dark"] .att-cell-total { background: #1e293b !important; color: #e2e8f0; }
html[data-theme="dark"] .att-student__name { color: #e2e8f0; }
@media (max-width: 860px) {
.att-student__name { max-width: 140px; font-size: 0.875rem; }
.att-col-student { width: 200px; }
.att-th-student { padding-left: 0.75rem; }
.att-cell-label { padding-left: 0.75rem; }
}
/* ════════════════════════════════════════════════════════════════════════════
Adviser: Observed Values entry grid
════════════════════════════════════════════════════════════════════════════ */
.table--values th, .table--values td {
vertical-align: middle;
padding: 0.55rem 0.6rem;
}
.table--values .value-core {
background: #f1f5f9;
border-right: 2px solid var(--border);
text-align: left;
width: 140px;
}
.table--values .value-core--cont {
background: #f8fafc;
}
.table--values .value-statement {
text-align: left;
line-height: 1.35;
font-size: 0.9375rem;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .table--values .value-core { background: #1e293b; }
html:not([data-theme="light"]) .table--values .value-core--cont { background: #0f172a; }
}
html[data-theme="dark"] .table--values .value-core { background: #1e293b; }
html[data-theme="dark"] .table--values .value-core--cont { background: #0f172a; }
.value-select {
width: 100%;
min-width: 4.25rem;
padding: 0.4rem 0.5rem;
border: 1px solid var(--border);
border-radius: 0.375rem;
background: var(--surface);
color: var(--text);
font-weight: 600;
text-align: center;
text-align-last: center;
}
.value-select--ao { background: #dcfce7; color: #065f46; border-color: #22c55e; }
.value-select--so { background: #dbeafe; color: #1e40af; border-color: #3b82f6; }
.value-select--ro { background: #fef3c7; color: #78350f; border-color: #f59e0b; }
.value-select--no { background: #fee2e2; color: #991b1b; border-color: #ef4444; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .value-select--ao { background: #064e3b; color: #a7f3d0; }
html:not([data-theme="light"]) .value-select--so { background: #1e3a8a; color: #bfdbfe; }
html:not([data-theme="light"]) .value-select--ro { background: #78350f; color: #fde68a; }
html:not([data-theme="light"]) .value-select--no { background: #7f1d1d; color: #fecaca; }
}
html[data-theme="dark"] .value-select--ao { background: #064e3b; color: #a7f3d0; }
html[data-theme="dark"] .value-select--so { background: #1e3a8a; color: #bfdbfe; }
html[data-theme="dark"] .value-select--ro { background: #78350f; color: #fde68a; }
html[data-theme="dark"] .value-select--no { background: #7f1d1d; color: #fecaca; }
/* ════════════════════════════════════════════════════════════════════════════
Shared footer (all layouts)
════════════════════════════════════════════════════════════════════════════ */
.footer {
margin-top: 2rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--border);
font-size: 0.8125rem;
color: var(--text-muted);
}
.footer__inner {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
align-items: center;
justify-content: space-between;
}
.footer__copy { line-height: 1.4; }
.footer__nav { display: flex; gap: 1rem; }
.footer__nav a {
color: var(--text-muted);
text-decoration: none;
font-weight: 500;
}
.footer__nav a:hover { color: var(--primary, #0284c7); text-decoration: underline; }
/* ════════════════════════════════════════════════════════════════════════════
About page
════════════════════════════════════════════════════════════════════════════ */
.about-page {
background: var(--bg, #f8fafc);
min-height: 100vh;
color: var(--text, #0f172a);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .about-page { background: #0b1220; }
}
html[data-theme="dark"] .about-page { background: #0b1220; }
.about-main {
max-width: 720px;
margin: 0 auto;
padding: 3rem 1.25rem 2rem;
}
.about-hero {
text-align: center;
padding: 2rem 1rem 2.5rem;
}
.about-hero h1 {
margin: 0.75rem 0 0.25rem;
font-size: 1.875rem;
font-weight: 700;
color: var(--text);
}
.about-hero__subtitle {
margin: 0;
color: var(--text-muted);
font-size: 1rem;
}
.about-seal {
width: 72px;
height: 72px;
object-fit: contain;
display: block;
margin: 0 auto;
}
.about-card {
background: var(--surface, #fff);
border: 1px solid var(--border);
border-radius: var(--radius, 0.75rem);
padding: 1.5rem 1.75rem;
margin-bottom: 1.25rem;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.about-card h2 {
margin: 0 0 0.75rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--text);
}
.about-card p { margin: 0 0 0.5rem; line-height: 1.6; color: var(--text); }
.about-card p:last-child { margin-bottom: 0; }
.about-card a { color: var(--primary, #0284c7); text-decoration: none; font-weight: 500; }
.about-card a:hover { text-decoration: underline; }
.about-features {
margin: 0.25rem 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.6rem;
}
.about-features li {
position: relative;
padding: 0 0 0 1.5rem;
line-height: 1.55;
color: var(--text);
font-size: 0.9375rem;
}
.about-features li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
width: 1.1rem;
height: 1.1rem;
color: var(--primary, #0284c7);
font-weight: 700;
}
.about-features li strong { color: var(--text); }
.modal--about .about-features li { font-size: 0.875rem; }
.about-dev {
display: flex;
gap: 1rem;
align-items: center;
}
.about-dev__avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #0284c7, #0369a1);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.125rem;
flex-shrink: 0;
letter-spacing: 0.5px;
}
.about-dev__avatar--company {
background: linear-gradient(135deg, #9333ea, #7c3aed);
}
.about-dev__info h3 {
margin: 0 0 0.25rem;
font-size: 1rem;
font-weight: 600;
}
.about-dev__info p { margin: 0.125rem 0; font-size: 0.875rem; }
/* ════════════════════════════════════════════════════════════════════════════
Sidebar user chip — avatar image variant
════════════════════════════════════════════════════════════════════════════ */
.user-chip__avatar--img {
object-fit: cover;
width: 42px;
height: 42px;
border-radius: 50%;
display: block;
}
/* ════════════════════════════════════════════════════════════════════════════
Profile hero (header card with avatar + upload)
════════════════════════════════════════════════════════════════════════════ */
.profile-hero {
display: flex;
gap: 2rem;
align-items: center;
background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
border: 1px solid #bae6fd;
border-radius: var(--radius, 0.75rem);
padding: 2rem 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .profile-hero { background: linear-gradient(135deg, #0c4a6e 0%, #0f2e4a 100%);
border-color: #0c4a6e; }
}
html[data-theme="dark"] .profile-hero { background: linear-gradient(135deg, #0c4a6e 0%, #0f2e4a 100%);
border-color: #0c4a6e; }
.profile-hero__avatar-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.profile-hero__avatar {
width: 140px;
height: 140px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #fff;
box-shadow: 0 6px 20px rgba(2, 132, 199, 0.2);
background: #fff;
display: block;
}
.profile-hero__avatar--initials {
background: linear-gradient(135deg, #0284c7, #0369a1);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: 700;
letter-spacing: 1px;
}
.profile-hero__upload {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
margin: 0;
}
.profile-hero__upload .btn { cursor: pointer; }
.profile-hero__hint { margin: 0.25rem 0 0; }
.profile-hero__body { flex: 1; min-width: 0; }
.profile-hero__name {
font-size: 1.75rem;
font-weight: 700;
color: #0c4a6e;
line-height: 1.2;
margin: 0 0 0.35rem;
}
.profile-hero__subtitle {
color: #0369a1;
font-size: 1rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.profile-hero__email {
color: #475569;
font-size: 0.9375rem;
word-break: break-all;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .profile-hero__name { color: #e0f2fe; }
html:not([data-theme="light"]) .profile-hero__subtitle { color: #7dd3fc; }
html:not([data-theme="light"]) .profile-hero__email { color: #94a3b8; }
html:not([data-theme="light"]) .profile-hero__avatar { border-color: #0f172a; }
}
html[data-theme="dark"] .profile-hero__name { color: #e0f2fe; }
html[data-theme="dark"] .profile-hero__subtitle { color: #7dd3fc; }
html[data-theme="dark"] .profile-hero__email { color: #94a3b8; }
html[data-theme="dark"] .profile-hero__avatar { border-color: #0f172a; }
@media (max-width: 700px) {
.profile-hero {
flex-direction: column;
text-align: center;
padding: 1.5rem 1rem;
gap: 1rem;
}
.profile-hero__avatar { width: 110px; height: 110px; }
.profile-hero__name { font-size: 1.375rem; }
}
/* Two-column profile body grid */
.profile-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1.25rem;
}
@media (max-width: 900px) {
.profile-grid { grid-template-columns: 1fr; }
}
.definition-grid--cols-1 { grid-template-columns: 1fr; }
/* ════════════════════════════════════════════════════════════════════════════
Table summary/footer rows — theme-aware (fix for the student-grades
"white bar" bug in dark mode)
════════════════════════════════════════════════════════════════════════════ */
.table__summary-row td {
background: var(--surface-2, #f8fafc);
color: var(--text, #0f172a);
font-weight: 600;
border-top: 2px solid var(--border, #e5e7eb);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .table__summary-row td { background: #1e293b;
color: #e2e8f0;
border-top-color: #334155; }
}
html[data-theme="dark"] .table__summary-row td { background: #1e293b;
color: #e2e8f0;
border-top-color: #334155; }
/* ════════════════════════════════════════════════════════════════════════════
Sidebar section dividers (grouping labels above nav-link)
════════════════════════════════════════════════════════════════════════════ */
.nav-section {
display: none;
color: var(--sidebar-text-muted);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.9rem 1rem 0.4rem;
margin-top: 0.25rem;
border-top: 1px solid var(--sidebar-border);
}
.nav-section:first-of-type { border-top: 0; margin-top: 0; }
@media (min-width: 900px) {
.nav-section { display: block; }
}
/* ─── Collapsible sidebar groups () ─── */
.nav-group {
/* No background, no extra padding — keeps same visual rhythm as plain divs. */
border-top: 1px solid var(--sidebar-border);
margin-top: 0.25rem;
}
.nav-group:first-of-type { border-top: 0; margin-top: 0; }
.nav-group > summary.nav-section {
/* Override the default display:none on small screens — summary must
always be visible to expand/collapse. */
display: flex !important;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
list-style: none;
border-top: 0; /* the parent .nav-group already has the divider */
margin-top: 0;
padding-right: 1rem;
transition: background 0.15s ease;
}
.nav-group > summary.nav-section::-webkit-details-marker { display: none; }
.nav-group > summary.nav-section::after {
content: '▾';
color: var(--sidebar-text-muted);
font-size: 0.7rem;
transform: rotate(0deg);
transition: transform 0.15s ease;
}
.nav-group:not([open]) > summary.nav-section::after { transform: rotate(-90deg); }
.nav-group > summary.nav-section:hover {
color: var(--sidebar-text-bright);
background: var(--sidebar-bg-hover);
}
.nav-group:not([open]) > summary.nav-section { color: var(--sidebar-text-muted); }
@media (max-width: 899.9px) {
/* Mobile: the summary is the ONLY visible label (the .nav-section
block-display rule above is min-width:900px). Keep summary visible. */
.nav-group > summary.nav-section { padding: 0.7rem 1rem; }
}
.nav-link span {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ════════════════════════════════════════════════════════════════════════════
Required-field visual markers on forms
════════════════════════════════════════════════════════════════════════════ */
.required-mark {
color: #dc2626;
font-weight: 700;
margin-left: 0.15em;
}
label.is-required::after {
content: " *";
color: #dc2626;
font-weight: 700;
}
.form-field :where(input, select, textarea)[required] {
/* subtle left accent so the required field is obvious without shouting */
box-shadow: inset 3px 0 0 rgba(220, 38, 38, 0.3);
}
.form-field :where(input, select, textarea)[required]:focus {
box-shadow: inset 3px 0 0 rgba(220, 38, 38, 0.6),
0 0 0 3px rgba(2, 132, 199, 0.2);
}
.form-field :where(input, select, textarea):invalid:not(:placeholder-shown):not(:focus) {
border-color: #dc2626;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .required-mark, html:not([data-theme="light"]) label.is-required::after { color: #fca5a5; }
}
html[data-theme="dark"] .required-mark, html[data-theme="dark"] label.is-required::after { color: #fca5a5; }
/* Sticky form-actions bar (e.g. bottom of the IIF) */
.form-actions--sticky {
position: sticky;
bottom: 0;
background: var(--surface);
padding: 1rem 1.25rem;
border-top: 1px solid var(--border);
margin: 1.25rem -1.25rem -1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
z-index: 5;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .form-actions--sticky { background: #0f172a; border-color: #1e293b; }
}
html[data-theme="dark"] .form-actions--sticky { background: #0f172a; border-color: #1e293b; }
/* Form checkbox wrapper */
.form-check {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
font-weight: 500;
}
.form-check input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #0284c7;
cursor: pointer;
}
/* ════════════════════════════════════════════════════════════════════════════
IIF completion progress bar
════════════════════════════════════════════════════════════════════════════ */
.iif-progress {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.35rem;
min-width: 160px;
}
.iif-progress__label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.iif-progress__bar {
width: 160px;
height: 8px;
background: var(--surface-alt, #f1f5f9);
border-radius: 999px;
overflow: hidden;
}
.iif-progress__fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #22c55e);
border-radius: 999px;
transition: width 0.4s ease;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .iif-progress__bar { background: #1e293b; }
}
html[data-theme="dark"] .iif-progress__bar { background: #1e293b; }
/* ── IIF N/A toggle — field + inline "N/A" button for non-applicable inputs ── */
.field-with-na {
display: flex;
gap: 0.5rem;
align-items: stretch;
}
.field-with-na > input,
.field-with-na > textarea {
flex: 1;
min-width: 0;
}
.btn-na-toggle {
flex: 0 0 auto;
align-self: flex-start;
padding: 0.4rem 0.75rem;
background: var(--surface-alt, #f3f4f6);
border: 1px solid var(--border, #d1d5db);
border-radius: 0.375rem;
cursor: pointer;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-muted, #374151);
white-space: nowrap;
line-height: 1.2;
height: 2.25rem;
}
.btn-na-toggle:hover { background: #e5e7eb; }
.btn-na-toggle[aria-pressed="true"] {
background: #fef3c7;
color: #92400e;
border-color: #fde68a;
}
.btn-na-toggle.is-inline-demo {
display: inline-block;
padding: 0.1rem 0.45rem;
height: auto;
font-size: 0.75rem;
cursor: default;
pointer-events: none;
vertical-align: baseline;
}
.na-field.is-na {
background: #fffbeb;
color: #78350f;
font-style: italic;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .btn-na-toggle[aria-pressed="true"] { background: rgba(146, 64, 14, 0.3); color: #fcd34d; border-color: rgba(253, 230, 138, 0.3); }
html:not([data-theme="light"]) .na-field.is-na { background: rgba(146, 64, 14, 0.15); color: #fcd34d; }
}
html[data-theme="dark"] .btn-na-toggle[aria-pressed="true"] { background: rgba(146, 64, 14, 0.3); color: #fcd34d; border-color: rgba(253, 230, 138, 0.3); }
html[data-theme="dark"] .na-field.is-na { background: rgba(146, 64, 14, 0.15); color: #fcd34d; }
/* ════════════════════════════════════════════════════════════════════════════
Student dashboard hero + honor banner + quick-links
════════════════════════════════════════════════════════════════════════════ */
.student-hero {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.75rem 2rem;
border-radius: var(--radius);
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
color: #fff;
margin-bottom: 1.25rem;
box-shadow: 0 6px 24px rgba(14, 165, 233, 0.25);
}
.student-hero__avatar {
flex-shrink: 0;
}
.student-hero__avatar img {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(255,255,255,0.3);
display: block;
}
.student-hero__initials {
width: 96px;
height: 96px;
border-radius: 50%;
border: 4px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 700;
letter-spacing: 1px;
color: #fff;
}
.student-hero__body { flex: 1; min-width: 0; }
.student-hero__greeting {
font-size: 0.875rem;
opacity: 0.9;
margin-bottom: 0.2rem;
}
.student-hero__name {
font-size: 2rem;
font-weight: 700;
margin: 0 0 0.6rem;
line-height: 1.1;
}
.student-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.6rem;
}
.student-hero__meta .chip {
background: rgba(255,255,255,0.18);
color: #fff;
border: 0;
}
.student-hero__meta .chip-success { background: rgba(34, 197, 94, 0.35); }
.student-hero__lrn {
font-size: 0.875rem;
opacity: 0.9;
}
.student-hero__lrn code {
background: rgba(255,255,255,0.15);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (max-width: 700px) {
.student-hero { flex-direction: column; text-align: center; padding: 1.25rem 1rem; }
.student-hero__name { font-size: 1.5rem; }
}
/* Honor banner (compact horizontal card above KPIs) */
.honor-banner {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.25rem 1.5rem;
border-radius: var(--radius);
color: #fff;
margin-bottom: 1.25rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.honor-banner--highest { background: linear-gradient(135deg, #f59e0b, #d97706); }
.honor-banner--high { background: linear-gradient(135deg, #64748b, #475569); }
.honor-banner--honors { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.honor-banner__icon { font-size: 2.5rem; line-height: 1; }
.honor-banner__label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.85;
}
.honor-banner__title {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.15;
}
.honor-banner__sub {
font-size: 0.9375rem;
opacity: 0.95;
margin-top: 0.2rem;
}
/* Student dashboard two-column layout */
.student-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 1.25rem;
}
@media (max-width: 900px) {
.student-grid { grid-template-columns: 1fr; }
}
.student-sidebar { align-self: start; }
/* Quick-links list */
.quick-links {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.quick-link {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.85rem 1rem;
border-radius: var(--radius-sm, 0.5rem);
background: var(--surface-alt, #f8fafc);
border: 1px solid var(--border);
color: var(--text);
text-decoration: none;
transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.quick-link:hover {
transform: translateX(2px);
border-color: #0284c7;
background: #e0f2fe;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .quick-link { background: #1e293b; }
html:not([data-theme="light"]) .quick-link:hover { background: #0c4a6e; border-color: #0ea5e9; }
}
html[data-theme="dark"] .quick-link { background: #1e293b; }
html[data-theme="dark"] .quick-link:hover { background: #0c4a6e; border-color: #0ea5e9; }
.quick-link__icon {
width: 38px;
height: 38px;
border-radius: var(--radius-xs, 0.375rem);
background: var(--brand-soft, rgba(14, 165, 233, 0.12));
color: var(--brand, #0284c7);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.quick-link__text { flex: 1; min-width: 0; }
.quick-link__text strong { display: block; font-size: 0.9375rem; }
.quick-link__text small { color: var(--text-muted); font-size: 0.75rem; }
.quick-link__arrow {
font-size: 1.125rem;
color: var(--text-muted);
font-weight: 700;
}
/* Tip box */
.tip-box {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 0.9rem 1rem;
margin-top: 1rem;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: var(--radius-sm, 0.5rem);
color: #78350f;
font-size: 0.875rem;
line-height: 1.5;
}
.tip-box__icon { font-size: 1.25rem; line-height: 1.2; flex-shrink: 0; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .tip-box { background: #422006; color: #fde68a; border-color: #b45309; }
}
html[data-theme="dark"] .tip-box { background: #422006; color: #fde68a; border-color: #b45309; }
/* ════════════════════════════════════════════════════════════════════════════
Grades semester card header with summary block
════════════════════════════════════════════════════════════════════════════ */
.grade-semester__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.grade-semester__summary {
display: flex;
align-items: center;
gap: 1.25rem;
}
.grade-semester__avg {
text-align: right;
}
.grade-semester__avg-label {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
font-weight: 600;
}
.grade-semester__avg-value {
font-size: 2rem;
font-weight: 700;
line-height: 1;
color: var(--text);
}
.grade-semester__desc {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* ════════════════════════════════════════════════════════════════════════════
Topbar actions + theme toggle button
════════════════════════════════════════════════════════════════════════════ */
.topbar { gap: 0.75rem; }
.topbar__title { flex: 1; }
.topbar__actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.topbar__theme {
background: var(--surface-alt);
border: 1px solid var(--border);
color: var(--text-muted);
width: var(--touch);
height: var(--touch);
border-radius: var(--radius-xs);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.topbar__theme:hover {
background: var(--brand-soft);
color: var(--brand);
border-color: var(--brand);
}
.theme-icon { display: none; line-height: 0; }
/* Default (no data-theme = auto): show whichever fits the OS preference */
.theme-icon--moon { display: inline-flex; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .theme-icon--moon { display: none; }
html:not([data-theme="light"]) .theme-icon--sun { display: inline-flex; }
}
html[data-theme="dark"] .theme-icon--moon { display: none; }
html[data-theme="dark"] .theme-icon--sun { display: inline-flex; }
/* Explicit theme overrides (set on by app.js) */
html[data-theme="light"] .theme-icon--moon { display: inline-flex; }
html[data-theme="light"] .theme-icon--sun { display: none; }
html[data-theme="dark"] .theme-icon--moon { display: none; }
html[data-theme="dark"] .theme-icon--sun { display: inline-flex; }
/* ════════════════════════════════════════════════════════════════════════════
IIF: deceased-parent state
════════════════════════════════════════════════════════════════════════════ */
.form-check--inline {
display: inline-flex;
margin: 0;
padding: 0.4rem 0.75rem;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.875rem;
}
[data-deceased-fields].is-deceased {
opacity: 0.5;
pointer-events: none;
position: relative;
}
[data-deceased-fields].is-deceased::after {
content: "Marked as deceased";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.4);
border-radius: 0.5rem;
pointer-events: none;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) [data-deceased-fields].is-deceased::after { background: rgba(15, 23, 42, 0.5); }
}
html[data-theme="dark"] [data-deceased-fields].is-deceased::after { background: rgba(15, 23, 42, 0.5); }
html[data-theme="dark"] [data-deceased-fields].is-deceased::after { background: rgba(15, 23, 42, 0.5); }
/* ════════════════════════════════════════════════════════════════════════════
Role chip — subtle color accent per portal
════════════════════════════════════════════════════════════════════════════ */
[data-role="admin"] .sidebar__role-chip { background: rgba(220, 38, 38, 0.18); color: #fca5a5; border-color: rgba(220, 38, 38, 0.35); }
[data-role="teacher"] .sidebar__role-chip { background: rgba(34, 197, 94, 0.18); color: #86efac; border-color: rgba(34, 197, 94, 0.4); }
[data-role="student"] .sidebar__role-chip { background: rgba(14, 165, 233, 0.2); color: #7dd3fc; border-color: rgba(14, 165, 233, 0.4); }
[data-role="registrar"].sidebar__role-chip { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; border-color: rgba(168, 85, 247, 0.4); }
[data-role="guidance"] .sidebar__role-chip { background: rgba(245, 158, 11, 0.2); color: #fcd34d; border-color: rgba(245, 158, 11, 0.4); }
/* ════════════════════════════════════════════════════════════════════════════
LOGIN PAGE — modern split-screen with school hero
════════════════════════════════════════════════════════════════════════════ */
.login-body {
background: var(--bg);
color: var(--text);
min-height: 100vh;
margin: 0;
font-family: var(--font-sans);
}
.login-page {
display: grid;
grid-template-columns: 1fr;
min-height: 100vh;
}
@media (min-width: 900px) {
.login-page { grid-template-columns: 1.1fr 1fr; }
}
/* ── Hero column (school photo) ─────────────────────────────────────────── */
.login-hero {
display: none;
position: relative;
overflow: hidden;
background: #0f172a;
color: #fff;
}
@media (min-width: 900px) {
.login-hero { display: block; }
}
.login-hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(1.05);
}
.login-hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(2, 132, 199, 0.55) 0%,
rgba(15, 23, 42, 0.65) 60%,
rgba(15, 23, 42, 0.85) 100%);
}
.login-hero__content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 3.5rem 3rem;
max-width: 560px;
}
.login-hero__seal {
width: 84px;
height: 84px;
border-radius: 50%;
background: #fff;
padding: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
margin-bottom: 1.25rem;
display: block;
}
.login-hero__title {
font-size: 2.25rem;
font-weight: 800;
line-height: 1.15;
margin: 0 0 0.5rem;
color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
letter-spacing: -0.01em;
}
.login-hero__subtitle {
font-size: 1rem;
margin: 0 0 1rem;
opacity: 0.92;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.login-hero__tagline {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
margin: 0;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.25);
opacity: 0.85;
}
/* ── Form column ────────────────────────────────────────────────────────── */
.login-form-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem 1.5rem 1.5rem;
min-height: 100vh;
position: relative;
}
.login-theme-toggle {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--surface-alt);
border: 1px solid var(--border);
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.login-theme-toggle:hover {
background: var(--brand-soft);
color: var(--brand);
border-color: var(--brand);
}
.login-card {
width: 100%;
max-width: 440px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 2.25rem 2.25rem 2rem;
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .login-card { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06); }
}
html[data-theme="dark"] .login-card { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06); }
/* School logo above the form card (always shown — overlaps the card top edge) */
.login-card__logo-wrap {
display: flex;
justify-content: center;
margin-top: -3.5rem;
margin-bottom: 0.875rem;
}
.login-card__logo {
width: 84px;
height: 84px;
border-radius: 50%;
background: #fff;
padding: 6px;
box-shadow: 0 6px 20px rgba(2, 132, 199, 0.3), 0 0 0 4px var(--surface);
display: block;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .login-card__logo { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 0 4px var(--surface); }
}
html[data-theme="dark"] .login-card__logo { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 0 4px var(--surface); }
html[data-theme="dark"] .login-card__logo { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 0 4px var(--surface); }
/* School name block under the logo — only on mobile (desktop has the hero) */
.login-card__brand {
text-align: center;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.login-card__brand strong {
display: block;
font-size: 1.0625rem;
font-weight: 800;
color: var(--text);
letter-spacing: 0.04em;
line-height: 1.15;
}
.login-card__brand span {
display: block;
font-size: 0.75rem;
color: var(--text-muted);
line-height: 1.35;
margin-top: 0.15rem;
}
@media (min-width: 900px) {
/* On desktop the hero column already shows the school seal + name
prominently, so hiding the logo and brand from the form card
produces a cleaner, less redundant layout. */
.login-card__brand { display: none; }
.login-card__logo-wrap { display: none; }
/* Reclaim the negative margin space so the card sits flush */
.login-card { padding-top: 2.5rem; }
}
.login-card__heading {
margin: 0 0 0.3rem;
font-size: 1.75rem;
font-weight: 800;
color: var(--text);
letter-spacing: -0.01em;
}
.login-card__sub {
margin: 0 0 1.75rem;
color: var(--text-muted);
font-size: 0.9375rem;
line-height: 1.5;
}
.login-alert {
margin: 0 0 1.25rem;
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
.login-form .form-field {
margin-bottom: 1.125rem;
}
.login-form .form-field label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 0.875rem;
color: var(--text);
}
.login-form .form-field input {
width: 100%;
padding: 0.8125rem 1rem;
border: 1.5px solid var(--border-strong);
border-radius: 10px;
font-size: 1rem;
background: var(--surface);
color: var(--text);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.login-form .form-field input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
background: var(--surface);
}
.login-form .form-field input::placeholder {
color: var(--text-muted);
opacity: 0.5;
}
.login-submit {
width: 100%;
padding: 0.9375rem 1rem;
font-size: 1rem;
font-weight: 700;
margin-top: 0.75rem;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
transition: transform 0.1s ease, box-shadow 0.15s ease;
letter-spacing: 0.01em;
}
.login-submit:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(2, 132, 199, 0.4);
}
.login-submit:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}
.login-card__hint {
text-align: center;
margin: 1.25rem 0 0;
}
.login-footer {
width: 100%;
max-width: 420px;
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-size: 0.75rem;
text-align: center;
display: flex;
flex-direction: column;
gap: 0.4rem;
align-items: center;
}
.login-footer a {
color: var(--brand);
text-decoration: none;
font-weight: 500;
}
.login-footer a:hover { text-decoration: underline; }
/* Make sure the theme toggle in the corner picks up the right icon */
.login-theme-toggle .theme-icon { line-height: 0; }
/* ════════════════════════════════════════════════════════════════════════════
Native