/* =========================================================================
EASY MARKS PLUS+ — SHARED DESIGN SYSTEM STYLESHEET
Academic Indigo | Design System v1.0 | Locked Sept 2026
Single source of truth for color, typography, and every component.
Link this file from every page's :
========================================================================= */
/* -------------------------------------------------------------------------
1. DESIGN TOKENS — color, typography, structure
------------------------------------------------------------------------- */
:root {
/* Brand / Primary */
--emp-primary: #4F46E5;
--emp-primary-hover: #4338CA;
--emp-primary-active: #6366F1;
--emp-primary-tint: #EEF2FF;
/* Sidebar */
--emp-sidebar: #111827;
--emp-sidebar-logo: #A5B4FC;
--emp-sidebar-active: #6366F1;
/* Semantic — locked 7 Sept 2026: exactly 3 status colors, no separate
"Info" hue. Info-role components reuse the Primary Indigo tint pairing
(see .badge-info / .alert-info / .toast-info below) rather than
introducing a 4th independent color family. */
--emp-success: #059669;
--emp-success-tint: #DCFCE7;
--emp-success-text: #065F46;
--emp-danger: #DC2626;
--emp-danger-tint: #FEE2E2;
--emp-danger-text: #991B1B;
--emp-warning: #D97706;
--emp-warning-tint: #FEF3C7;
--emp-warning-text: #92400E;
--emp-neutral-tint: #F1F5F9;
--emp-neutral-text: #475569;
/* Neutrals */
--emp-page-bg: #F5F7FA;
--emp-surface: #FFFFFF;
--emp-text: #111827;
--emp-text-secondary: #64748B;
--emp-text-muted: #94A3B8;
--emp-border: #E2E8F0;
/* Typography */
--emp-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--emp-weight-regular: 400;
--emp-weight-medium: 500;
--emp-weight-semibold: 600;
--emp-text-page-title: 28px; --emp-text-page-title-line: 34px;
--emp-text-section-title: 20px; --emp-text-section-title-line: 26px;
--emp-text-subsection-title: 16px; --emp-text-subsection-title-line: 22px;
--emp-text-card-title: 16px; --emp-text-card-title-line: 22px;
--emp-text-card-value: 24px; --emp-text-card-value-line: 30px;
--emp-text-body-lg: 15px; --emp-text-body-lg-line: 23px;
--emp-text-body: 14px; --emp-text-body-line: 21px;
--emp-text-table: 13px; --emp-text-table-line: 18px;
--emp-text-table-header: 12px; --emp-text-table-header-line: 16px;
--emp-text-small: 12px; --emp-text-small-line: 17px;
--emp-text-caption: 11px; --emp-text-caption-line: 15px;
--emp-text-button: 13px; --emp-text-button-line: 18px;
--emp-text-input: 14px; --emp-text-input-line: 20px;
--emp-text-nav: 14px; --emp-text-nav-line: 20px;
--emp-text-nav-section: 11px; --emp-text-nav-section-line: 15px;
/* Structure */
--emp-sidebar-w: 248px;
--emp-mobile-breakpoint: 768px;
--emp-radius: 8px;
--emp-radius-lg: 10px;
--emp-radius-pill: 999px;
}
/* -------------------------------------------------------------------------
2. BASE ELEMENTS
------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
font-family: var(--emp-font-family);
font-size: var(--emp-text-body);
font-weight: var(--emp-weight-regular);
line-height: var(--emp-text-body-line);
color: var(--emp-text);
background: var(--emp-page-bg);
margin: 0;
}
h1 { font-size: var(--emp-text-page-title); font-weight: var(--emp-weight-semibold); line-height: var(--emp-text-page-title-line); margin: 0; }
h2 { font-size: var(--emp-text-section-title); font-weight: var(--emp-weight-semibold); line-height: var(--emp-text-section-title-line); margin: 0; }
h3 { font-size: var(--emp-text-subsection-title); font-weight: var(--emp-weight-semibold); line-height: var(--emp-text-subsection-title-line); margin: 0; }
.emp-numeric,
.total-marks, .percentage, .rank, .attendance, .marks-table td.numeric {
font-variant-numeric: tabular-nums;
}
.text-small { font-size: var(--emp-text-small); line-height: var(--emp-text-small-line); }
.text-caption { font-size: var(--emp-text-caption); line-height: var(--emp-text-caption-line); color: var(--emp-text-muted); }
/* -------------------------------------------------------------------------
3. BUTTONS
------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--emp-font-family);
font-size: var(--emp-text-button);
font-weight: var(--emp-weight-medium);
line-height: var(--emp-text-button-line);
padding: 8px 16px;
border-radius: var(--emp-radius);
border: 1px solid transparent;
cursor: pointer;
transition: background-color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.btn:disabled, .btn.is-disabled { opacity: 0.45; cursor: not-allowed; }
.btn .icon-only { padding: 8px; }
.btn-primary { background: var(--emp-primary); color: #FFFFFF; }
.btn-primary:hover:not(:disabled) { background: var(--emp-primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--emp-primary-active); }
.btn-secondary { background: var(--emp-surface); color: var(--emp-primary); border-color: var(--emp-primary); }
.btn-secondary:hover:not(:disabled) { background: var(--emp-primary-tint); }
.btn-secondary:active:not(:disabled) { background: #E0E1FC; }
.btn-ghost { background: transparent; color: var(--emp-text-secondary); border-color: var(--emp-border); }
.btn-ghost:hover:not(:disabled) { background: var(--emp-neutral-tint); border-color: #CBD5E1; }
.btn-ghost:active:not(:disabled) { background: #E2E8F0; }
.btn-danger { background: var(--emp-danger); color: #FFFFFF; }
.btn-danger:hover:not(:disabled) { background: #B91C1C; }
.btn-danger:active:not(:disabled) { background: #991B1B; }
.btn-loading { pointer-events: none; }
.btn-spinner {
width: 13px; height: 13px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
animation: emp-spin 0.7s linear infinite;
}
.btn-ghost .btn-spinner, .btn-secondary .btn-spinner {
border: 2px solid rgba(79,70,229,0.25); border-top-color: var(--emp-primary);
}
@keyframes emp-spin { to { transform: rotate(360deg); } }
/* -------------------------------------------------------------------------
4. BADGES / STATUS PILLS
------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--emp-text-small);
font-weight: var(--emp-weight-semibold);
line-height: var(--emp-text-small-line);
padding: 3px 10px;
border-radius: var(--emp-radius-pill);
}
.badge-success { background: var(--emp-success-tint); color: var(--emp-success-text); }
.badge-warning { background: var(--emp-warning-tint); color: var(--emp-warning-text); }
.badge-danger { background: var(--emp-danger-tint); color: var(--emp-danger-text); }
.badge-neutral { background: var(--emp-neutral-tint); color: var(--emp-neutral-text); }
/* Info reuses the Primary Indigo tint pairing — no separate hue introduced. */
.badge-info { background: var(--emp-primary-tint); color: var(--emp-primary); }
/* -------------------------------------------------------------------------
5. METRIC / STAT CARDS
------------------------------------------------------------------------- */
.stat-card {
background: var(--emp-surface);
border: 1px solid var(--emp-border);
border-radius: var(--emp-radius-lg);
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.stat-card-icon {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.stat-card-icon.tone-primary { background: var(--emp-primary-tint); color: var(--emp-primary); }
.stat-card-icon.tone-success { background: var(--emp-success-tint); color: var(--emp-success); }
.stat-card-icon.tone-warning { background: var(--emp-warning-tint); color: var(--emp-warning); }
.stat-card-icon.tone-danger { background: var(--emp-danger-tint); color: var(--emp-danger); }
.stat-card-value { font-size: var(--emp-text-card-value); font-weight: var(--emp-weight-semibold); line-height: var(--emp-text-card-value-line); color: var(--emp-text); }
.stat-card-label { font-size: var(--emp-text-small); color: var(--emp-text-secondary); }
/* -------------------------------------------------------------------------
5b. BASE LAYOUT — page shell, generic card, page title
Added 7 Sept 2026 (Dashboard build) — these were missing even though
several already-shipped pages (My Profile) assumed .card existed.
Every future page should use .main-content as its body wrapper.
------------------------------------------------------------------------- */
.main-content {
margin-left: var(--emp-sidebar-w);
min-height: 100vh;
background: var(--emp-page-bg);
padding: 28px 32px 48px;
}
.page-title {
font-size: var(--emp-text-page-title);
font-weight: var(--emp-weight-semibold);
line-height: var(--emp-text-page-title-line);
color: var(--emp-text);
margin: 0;
}
.card {
background: var(--emp-surface);
border: 1px solid var(--emp-border);
border-radius: var(--emp-radius-lg);
padding: 20px;
}
@media (max-width: 768px) {
.main-content { margin-left: 0; padding: 20px; }
}
/* -------------------------------------------------------------------------
6. TABS (two distinct components — do not merge)
------------------------------------------------------------------------- */
.tabbar {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--emp-border);
}
.tabbar-item {
font-size: var(--emp-text-body);
font-weight: var(--emp-weight-medium);
color: var(--emp-text-secondary);
padding: 10px 14px;
border-bottom: 2px solid transparent;
cursor: pointer;
background: none; border-top: none; border-left: none; border-right: none;
}
.tabbar-item:hover { color: var(--emp-text); }
.tabbar-item.active { color: var(--emp-primary); border-bottom-color: var(--emp-primary); font-weight: var(--emp-weight-semibold); }
.pill-selector { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-selector-item {
font-size: var(--emp-text-small);
font-weight: var(--emp-weight-medium);
color: var(--emp-text-secondary);
background: var(--emp-surface);
border: 1px solid var(--emp-border);
border-radius: var(--emp-radius-pill);
padding: 6px 14px;
cursor: pointer;
}
.pill-selector-item:hover { border-color: var(--emp-primary); color: var(--emp-primary); }
.pill-selector-item.active { background: var(--emp-primary); border-color: var(--emp-primary); color: #FFFFFF; }
/* -------------------------------------------------------------------------
7. FORM ELEMENTS
------------------------------------------------------------------------- */
.field-label {
display: block;
font-size: var(--emp-text-small);
font-weight: var(--emp-weight-medium);
color: var(--emp-text);
margin-bottom: 4px;
}
.field-input, .field-select, .field-textarea {
width: 100%;
font-family: var(--emp-font-family);
font-size: var(--emp-text-input);
line-height: var(--emp-text-input-line);
color: var(--emp-text);
background: var(--emp-surface);
border: 1px solid var(--emp-border);
border-radius: var(--emp-radius);
padding: 8px 12px;
}
.field-textarea { resize: vertical; min-height: 72px; }
.field-input:focus, .field-select:focus, .field-textarea:focus {
outline: none; border-color: var(--emp-primary);
box-shadow: 0 0 0 3px var(--emp-primary-tint);
}
.field-input.is-error, .field-select.is-error, .field-textarea.is-error {
border-color: var(--emp-danger);
}
.field-input.is-error:focus, .field-textarea.is-error:focus {
box-shadow: 0 0 0 3px var(--emp-danger-tint);
}
.field-input:disabled, .field-select:disabled, .field-textarea:disabled {
background: var(--emp-neutral-tint); color: var(--emp-text-muted); cursor: not-allowed;
}
.field-help { font-size: var(--emp-text-caption); color: var(--emp-text-muted); margin-top: 4px; }
.field-error { font-size: var(--emp-text-caption); color: var(--emp-danger); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.field-checkbox, .field-radio {
width: 16px; height: 16px;
accent-color: var(--emp-primary);
cursor: pointer;
}
.field-checkbox:disabled, .field-radio:disabled { cursor: not-allowed; opacity: 0.5; }
/* -------------------------------------------------------------------------
8. DATA TABLES
------------------------------------------------------------------------- */
.data-table-wrap {
background: var(--emp-surface);
border: 1px solid var(--emp-border);
border-radius: var(--emp-radius-lg);
overflow: hidden;
}
.data-table { width: 100%; border-collapse: collapse; font-size: var(--emp-text-table); line-height: var(--emp-text-table-line); }
.data-table thead tr { background: var(--emp-page-bg); }
.data-table th {
text-align: left; padding: 8px 12px;
font-size: var(--emp-text-table-header); font-weight: var(--emp-weight-medium);
color: var(--emp-text-secondary); text-transform: uppercase; letter-spacing: 0.04em;
}
.data-table td { padding: 10px 12px; border-top: 1px solid var(--emp-border); color: var(--emp-text); }
.data-table tbody tr:hover { background: var(--emp-page-bg); }
.data-table tbody tr.is-selected { background: var(--emp-primary-tint); }
.data-table .row-actions { display: flex; gap: 6px; }
.data-table .row-actions .btn { padding: 6px; }
.table-empty {
text-align: center; padding: 48px 24px; color: var(--emp-text-secondary);
}
.table-empty-icon { color: var(--emp-text-muted); margin-bottom: 12px; }
.table-empty-title { font-size: var(--emp-text-subsection-title); font-weight: var(--emp-weight-semibold); color: var(--emp-text); margin-bottom: 4px; }
.table-empty-body { font-size: var(--emp-text-body); margin-bottom: 16px; }
/* -------------------------------------------------------------------------
8b. TABLE GROUP ROW (grouped-section divider inside a data-table)
Added 15 Sept 2026 — Subjects build (Phase 6 UI Revamp). For lists that
are naturally grouped into sections within one shared table (Subjects'
Main/Additional/Co-Scholastic groups; any future grouped list). Renders
as a full-width label row inside , not a separate element outside
the table — keeps row borders continuous instead of fragmenting the
table into several disconnected blocks per group.
------------------------------------------------------------------------- */
.table-group-row td {
background: var(--emp-page-bg);
font-size: var(--emp-text-caption);
font-weight: var(--emp-weight-semibold);
color: var(--emp-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 8px 12px;
border-top: 1px solid var(--emp-border);
}
/* -------------------------------------------------------------------------
9. FILTER BAR
------------------------------------------------------------------------- */
.filter-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: var(--emp-surface); border: 1px solid var(--emp-border);
border-radius: var(--emp-radius-lg); padding: 12px 14px;
}
.filter-bar .field-input, .filter-bar .field-select { width: auto; min-width: 160px; }
.filter-bar-spacer { flex: 1; }
/* -------------------------------------------------------------------------
10. MODALS
------------------------------------------------------------------------- */
.modal-overlay {
position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45);
display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal {
background: var(--emp-surface); border-radius: var(--emp-radius-lg);
width: 100%; max-width: 420px; overflow: hidden;
}
.modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--emp-border);
}
.modal-title { font-size: var(--emp-text-subsection-title); font-weight: var(--emp-weight-semibold); }
.modal-close { background: none; border: none; color: var(--emp-text-muted); cursor: pointer; padding: 4px; }
.modal-body { padding: 20px; font-size: var(--emp-text-body); color: var(--emp-text-secondary); }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--emp-border); }
/* -------------------------------------------------------------------------
11. ALERTS (inline, full-width) + TOASTS (temporary, top-right)
------------------------------------------------------------------------- */
.alert {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; border-radius: var(--emp-radius);
font-size: var(--emp-text-body);
}
.alert-success { background: var(--emp-success-tint); color: var(--emp-success-text); }
.alert-warning { background: var(--emp-warning-tint); color: var(--emp-warning-text); }
.alert-danger { background: var(--emp-danger-tint); color: var(--emp-danger-text); }
.alert-info { background: var(--emp-primary-tint); color: var(--emp-primary); }
.alert-close { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; opacity: 0.7; }
.toast {
position: fixed; top: 20px; right: 20px;
display: flex; align-items: center; gap: 8px;
padding: 12px 16px; border-radius: var(--emp-radius);
font-size: var(--emp-text-body); background: var(--emp-surface);
border: 1px solid var(--emp-border);
box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
z-index: 1100;
}
.toast-success { border-left: 3px solid var(--emp-success); }
.toast-warning { border-left: 3px solid var(--emp-warning); }
.toast-danger { border-left: 3px solid var(--emp-danger); }
.toast-info { border-left: 3px solid var(--emp-primary); }
/* -------------------------------------------------------------------------
12. LOADING STATES
------------------------------------------------------------------------- */
.inline-loader {
display: flex; align-items: center; gap: 8px;
color: var(--emp-text-secondary); font-size: var(--emp-text-body);
}
.spinner {
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid var(--emp-border); border-top-color: var(--emp-primary);
animation: emp-spin 0.7s linear infinite;
}
.section-loader {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 48px; color: var(--emp-text-secondary); gap: 12px;
}
.section-loader .spinner { width: 28px; height: 28px; border-width: 3px; }
/* -------------------------------------------------------------------------
13. PAGINATION
------------------------------------------------------------------------- */
.pagination { display: flex; align-items: center; gap: 4px; }
.pagination-item {
min-width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
font-size: var(--emp-text-small); border-radius: var(--emp-radius);
border: 1px solid var(--emp-border); background: var(--emp-surface);
color: var(--emp-text-secondary); cursor: pointer;
}
.pagination-item:hover { border-color: var(--emp-primary); color: var(--emp-primary); }
.pagination-item.active { background: var(--emp-primary); border-color: var(--emp-primary); color: #FFFFFF; }
.pagination-item:disabled { opacity: 0.4; cursor: not-allowed; }
/* -------------------------------------------------------------------------
14. LARGE EMPTY STATE (full-page / full-section)
------------------------------------------------------------------------- */
.empty-state-lg { text-align: center; padding: 64px 24px; }
.empty-state-lg-icon { color: var(--emp-text-muted); margin-bottom: 16px; }
.empty-state-lg-title { font-size: var(--emp-text-section-title); font-weight: var(--emp-weight-semibold); margin-bottom: 6px; }
.empty-state-lg-body { font-size: var(--emp-text-body-lg); color: var(--emp-text-secondary); margin-bottom: 20px; }
/* -------------------------------------------------------------------------
15. SIDEBAR NAVIGATION
Added Phase 6 UI Revamp — sidebar_include.php was the first page revamped
under the Page Revamp Protocol. Structure/role-gating logic is untouched
(locked separately); only the visual layer lives here. This is the only
place sidebar-related CSS should ever be edited — sidebar_include.php
itself must never carry its own