/* A.J Academy SMS — Design System (enterprise, non-generic) */
:root {
  --navy: #0b1229; --navy-800: #111b36; --navy-700: #1a2744;
  --indigo: #3f3ee8; --indigo-600: #4f46e5; --indigo-soft: #eef0ff;
  --teal: #0d9488; --teal-soft: #ccfbf1;
  --paper: #f4f5f9; --surface: #ffffff; --surface-2: #fafbff;
  --border: #e4e7f1; --border-strong: #d0d5e4;
  --text: #0b1229; --text-2: #334155; --muted: #64748b; --muted-2: #94a3b8;
  --success: #059669; --success-bg: #ecfdf5;
  --warning: #d97706; --warning-bg: #fffbeb;
  --danger: #dc2626; --danger-bg: #fef2f2;
  --info: #2563eb; --info-bg: #eff6ff;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --shadow-xs: 0 1px 2px rgba(11,18,41,.04);
  --shadow-sm: 0 2px 8px rgba(11,18,41,.06);
  --shadow-md: 0 6px 20px rgba(11,18,41,.08);
  --shadow-lg: 0 12px 40px rgba(11,18,41,.10);
  --shadow-indigo: 0 8px 28px rgba(79,70,229,.18);
  --ease: cubic-bezier(.22,1,.36,1); --dur: .22s;
  --sidebar-w: 256px; --header-h: 64px;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--paper); color: var(--text);
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
:focus-visible { outline: 2px solid var(--indigo-600); outline-offset: 2px; }

.ds-display { font-size: clamp(2rem,4vw,3.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.ds-h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; }
.ds-h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.ds-h3 { font-size: 1.1rem; font-weight: 700; }
.ds-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ds-muted { color: var(--muted); font-size: .875rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .875rem; border-radius: var(--r-md);
  padding: .625rem 1.15rem; border: 1.5px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), background var(--dur), border-color var(--dur), color var(--dur);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--indigo-600); color: #fff;
  box-shadow: 0 1px 2px rgba(79,70,229,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover { background: #4338ca; box-shadow: var(--shadow-indigo); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--indigo-600); color: var(--indigo-600); background: var(--indigo-soft); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--paper); color: var(--text); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: #fecaca; }
.btn-danger:hover { background: #fee2e2; }
.btn-lg { padding: .8rem 1.5rem; font-size: .9375rem; border-radius: var(--r-lg); }
.btn-sm { padding: .4rem .75rem; font-size: .8125rem; }

.ds-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease);
}
.ds-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.ds-card-pad { padding: 1.25rem 1.35rem; }

.ds-input, .ds-select, .ds-textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: .65rem .9rem; font-size: .875rem; background: var(--surface); color: var(--text);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none; border-color: var(--indigo-600); box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.ds-input::placeholder { color: var(--muted-2); }

.ds-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  padding: .25rem .7rem; border-radius: 99px;
  background: var(--paper); color: var(--muted); border: 1px solid var(--border);
}
.ds-pill-indigo { background: rgba(79,70,229,.08); color: var(--indigo-600); border-color: rgba(79,70,229,.2); }
.ds-pill-success { background: var(--success-bg); color: var(--success); border-color: #a7f3d0; }
.ds-pill-danger { background: var(--danger-bg); color: var(--danger); border-color: #fecaca; }
.ds-pill-warn { background: var(--warning-bg); color: var(--warning); border-color: #fde68a; }

.ds-sec-label {
  font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); margin-bottom: .9rem; display: flex; align-items: center; gap: .65rem;
}
.ds-sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.ds-stat {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 1.15rem 1rem 1rem; position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
}
.ds-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--c, var(--indigo-600)); }
.ds-stat::before {
  content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0;
  background: var(--c, var(--indigo-600)); border-radius: var(--r-lg) 0 0 var(--r-lg);
  transition: height .35s var(--ease);
}
.ds-stat:hover::before { height: 100%; }
.ds-stat-icon {
  width: 34px; height: 34px; border-radius: 9px; background: var(--ibg, var(--indigo-soft));
  display: flex; align-items: center; justify-content: center; margin-bottom: .9rem;
}
.ds-stat-icon i { font-size: 1.05rem; color: var(--c, var(--indigo-600)); }
.ds-stat-num {
  font-size: 1.85rem; font-weight: 900; letter-spacing: -.05em; line-height: 1;
  font-variant-numeric: tabular-nums; margin-bottom: .2rem;
}
.ds-stat-label {
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}

.ds-main { padding: 1.25rem 1.1rem 5rem; max-width: 1200px; }
@media (min-width: 768px) { .ds-main { margin-left: var(--sidebar-w); padding: 1.75rem 1.5rem 5rem; } }

.ds-table-wrap { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ds-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ds-table thead th {
  background: var(--navy); color: #fff; font-weight: 600; text-align: left;
  padding: .75rem 1rem; white-space: nowrap;
}
.ds-table tbody td { padding: .7rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover { background: var(--indigo-soft); }

.ds-alert { padding: .85rem 1.1rem; border-radius: var(--r-md); font-size: .875rem; font-weight: 500; border: 1px solid; }
.ds-alert-success { background: var(--success-bg); color: #065f46; border-color: #a7f3d0; }
.ds-alert-error { background: var(--danger-bg); color: #991b1b; border-color: #fecaca; }
.ds-alert-info { background: var(--info-bg); color: #1e40af; border-color: #bfdbfe; }

@keyframes ds-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.ds-animate { animation: ds-fade-up .45s var(--ease) both; }

/* Legacy pattern overrides — migrate glass/gradient pages toward system */
.glass-effect, .glass {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  backdrop-filter: none !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn-gradient {
  background: var(--indigo-600) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(79,70,229,.25) !important;
}
.btn-gradient:hover { background: #4338ca !important; }

/* Filter cards, common panels */
.ds-panel {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
}

/* CSV buttons */
.btn-csv-dl {
  color: var(--success); border: 1.5px solid var(--success); background: transparent;
  border-radius: var(--r-md); padding: .5rem .9rem; font-weight: 600; font-size: .8rem;
  display: inline-flex; align-items: center; gap: .4rem; transition: background .2s, color .2s;
}
.btn-csv-dl:hover { background: var(--success); color: #fff; }
.btn-csv-ul {
  color: var(--warning); border: 1.5px solid var(--warning); background: transparent;
  border-radius: var(--r-md); padding: .5rem .9rem; font-weight: 600; font-size: .8rem;
  display: inline-flex; align-items: center; gap: .4rem; transition: background .2s, color .2s;
}
.btn-csv-ul:hover { background: var(--warning); color: #fff; }

/* Landing */
.lp-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.lp-hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 70% 0%, rgba(79,70,229,.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(13,148,136,.08), transparent 50%),
    linear-gradient(180deg, #fafbff 0%, var(--paper) 100%);
}
.lp-feature-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; background: var(--indigo-soft); color: var(--indigo-600);
}
.lp-stat-num {
  font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 900;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}

/* Body gradient pages → paper */
body.bg-gradient-to-br,
body[class*="from-blue-50"],
body[class*="from-purple"] {
  background: var(--paper) !important;
}

/* Common input focus alignment */
input:focus, select:focus, textarea:focus {
  border-color: var(--indigo-600) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
}

/* ── Extended components (phase 2 migration) ──────────────────────────────── */

.ds-filter-panel {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-xs);
  margin-bottom: 1.25rem;
}
.ds-filter-panel h2,
.ds-filter-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.ds-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem;
}
@media (min-width: 768px) {
  .ds-filter-grid { grid-template-columns: repeat(4, 1fr); }
}

.ds-empty {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.ds-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .7; }
.ds-empty h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: .35rem; }
.ds-empty p { color: var(--muted); font-size: .9rem; max-width: 28rem; margin: 0 auto; }

.ds-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(11,18,41,.45);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ds-modal-overlay.open { display: flex; }
.ds-modal {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  width: min(520px, 94vw);
  padding: 1.5rem 1.6rem;
  animation: ds-fade-up .25s var(--ease);
}
.ds-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.ds-modal-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ds-drop-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ds-drop-zone:hover,
.ds-drop-zone.drag-over {
  border-color: var(--indigo-600);
  background: var(--indigo-soft);
}

.ds-page-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .25rem;
}
.ds-page-sub { color: var(--muted); font-size: .875rem; margin-bottom: 1.25rem; }

/* Table header: navy instead of purple gradient */
.ds-thead-gradient,
thead tr.bg-gradient-to-r,
thead tr[class*="from-purple"] {
  background: var(--navy) !important;
}
.ds-thead-gradient th,
thead tr.bg-gradient-to-r th {
  border-color: rgba(255,255,255,.12) !important;
}

/* Content area under sidebar */
.ds-content {
  padding: 1rem 1rem 4rem;
}
@media (min-width: 768px) {
  .ds-content { margin-left: var(--sidebar-w); padding: 1.5rem 1.5rem 4rem; }
}

/* Grade select feedback */
.grade-saving { border-color: var(--warning) !important; }
.grade-saved  { border-color: var(--success) !important; }
.grade-error  { border-color: var(--danger) !important; }

/* Avatar consistency */
.ds-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ds-avatar-sm { width: 32px; height: 32px; }

/* Pagination pills */
.ds-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  padding: 1rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  margin-top: 1rem;
}
.ds-page-btn {
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .6rem;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .8125rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ds-page-btn:hover { border-color: var(--indigo-600); color: var(--indigo-600); }
.ds-page-btn.active,
.ds-page-btn.btn-gradient {
  background: var(--indigo-600) !important;
  color: #fff !important;
  border-color: var(--indigo-600) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL PAGE MIGRATION — force non-generic look on ALL legacy screens
   High specificity so page-local purple glass loses.
   ═══════════════════════════════════════════════════════════════════════════ */

body.bg-gradient-to-br,
body[class*="from-blue-50"],
body[class*="from-purple"],
body[class*="via-purple"],
body.gradient-bg {
  background: #f4f5f9 !important;
  background-image: none !important;
}

/* Kill glass morphism everywhere */
.glass-effect,
.glass-card,
.glass {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid #e4e7f1 !important;
  box-shadow: 0 2px 8px rgba(11,18,41,.05) !important;
  border-radius: 14px !important;
}

/* Purple gradient buttons → solid indigo */
.btn-gradient,
button.btn-gradient,
a.btn-gradient,
[class*="bg-gradient-to-r"][class*="from-purple"],
[class*="bg-gradient-to-r"][class*="from-blue-600"][class*="to-purple"],
.action-btn.bg-gradient-to-r {
  background: #4f46e5 !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(79,70,229,.25) !important;
  border: none !important;
}
.btn-gradient:hover,
button.btn-gradient:hover {
  background: #4338ca !important;
}

/* Table headers: navy, not purple gradient */
thead tr.bg-gradient-to-r,
thead tr[class*="from-purple"],
thead tr[class*="from-blue-600"],
.bg-gradient-to-r.from-purple-600,
.bg-gradient-to-r.from-blue-600 {
  background: #0b1229 !important;
  background-image: none !important;
}
thead tr.bg-gradient-to-r th,
thead th.border-purple-500,
thead th[class*="border-purple"] {
  border-color: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

/* Purple focus / borders → indigo */
.focus\:border-purple-500:focus,
.focus\:ring-purple-500:focus,
input:focus, select:focus, textarea:focus {
  border-color: #4f46e5 !important;
  --tw-ring-color: rgba(79,70,229,.2) !important;
}

/* Hover rows */
.hover\:bg-purple-50:hover,
tr.hover\:bg-purple-50:hover {
  background-color: #eef0ff !important;
}

/* White cards with heavy shadow → restrained */
.bg-white.rounded-2xl.shadow-lg,
.bg-white.rounded-2xl.shadow-xl,
.rounded-2xl.shadow-lg.bg-white,
.rounded-2xl.shadow-xl {
  border: 1.5px solid #e4e7f1 !important;
  box-shadow: 0 2px 8px rgba(11,18,41,.05) !important;
  border-radius: 14px !important;
}

/* Content area under dark sidebar */
#content-area,
.ds-content,
.md\:ml-64 {
  background: transparent;
}

/* Page title consistency */
h1.text-3xl.font-bold.text-gray-800,
h1.text-2xl.font-bold {
  letter-spacing: -0.02em;
  color: #0b1229 !important;
}

/* Filter section titles */
.text-lg.font-bold.text-gray-700 {
  color: #0b1229 !important;
  font-weight: 700 !important;
}

/* Sticky student column on domain tables */


/* Pagination active */
.btn-gradient.text-white {
  background: #4f46e5 !important;
}

/* Ensure Inter on app pages */
body, #sidebar, .aj-topbar, .dash-main {
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
}

.ds-app-body {
  background: #f4f5f9 !important;
  min-height: 100vh;
  font-family: Inter, system-ui, sans-serif;
}
/* ══ UNIFIED TABLES + FILTERS + FONT ══ */
html, body,
body *,
#sidebar, .aj-topbar, .dash-main, .wa-page, .ds-content,
.wa-filters, .wa-filters select, .wa-filters input,
input, select, textarea, button, table, th, td {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.aj-filters,
.wa-filters,
.ds-filter-panel,
.glass-effect.rounded-2xl {
  background: #ffffff !important;
  border: 1.5px solid #e4e7f1 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 8px rgba(11,18,41,.05) !important;
  backdrop-filter: none !important;
}

.aj-filters-grid,
.wa-filters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 768px) {
  .aj-filters-grid,
  .wa-filters-grid { grid-template-columns: repeat(4, 1fr); }
}

.classFilter, .termFilter, .sessionFilter, .subjectFilter,
#searchInput, #filterCol, #filterVal,
.wa-filters select, .wa-filters input[type="text"],
.aj-filters select, .aj-filters input {
  width: 100%;
  padding: 10px 12px !important;
  border: 1.5px solid #e4e7f1 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #0b1229 !important;
  background: #f4f5f9 !important;
}
.classFilter:focus, .termFilter:focus, .sessionFilter:focus, .subjectFilter:focus,
#searchInput:focus, .wa-filters select:focus, .wa-filters input:focus {
  outline: none !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
  background: #fff !important;
}

.btn-brand, .btn-gradient, .aj-btn-primary {
  background: #4f46e5 !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.btn-brand:hover, .btn-gradient:hover {
  background: #4338ca !important;
}

.wa-table-wrap, .ds-table-wrap, .aj-table-wrap {
  background: #fff !important;
  border: 1.5px solid #e4e7f1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(11,18,41,.05) !important;
}

.wa-tbl thead th,
.ds-table thead th,
table.min-w-full thead th,
thead tr.bg-gradient-to-r th {
  background: #0b1229 !important;
  background-image: none !important;
  color: #f8fafc !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 14px !important;
}

.wa-tbl tbody td,
table.min-w-full tbody td {
  padding: 10px 14px !important;
  border-bottom: 1px solid #e4e7f1 !important;
  font-size: 13px !important;
  color: #0b1229;
}

.wa-tbl tbody tr:hover,
table.min-w-full tbody tr:hover {
  background: #eef0ff !important;
}

.wa-header {
  background: #4f46e5 !important;
  background-image: none !important;
  border-radius: 14px !important;
  font-family: Inter, system-ui, sans-serif !important;
}

body {
  background: #f4f5f9 !important;
  font-family: Inter, system-ui, sans-serif !important;
}

/* ============================================================
   AJTECH / A.J ACADEMY — FINAL SHARED UI LANGUAGE
   White navigation + institutional blue + restrained surfaces.
   This block is intentionally last so it wins over legacy rules.
   ============================================================ */

:root {
  --aj-blue: #1769aa;
  --aj-blue-dark: #0b2f55;
  --aj-blue-deep: #08243f;
  --aj-blue-soft: #eaf4fb;
  --aj-blue-hover: #f1f7fc;
  --aj-ink: #172033;
  --aj-muted: #64748b;
  --aj-line: #e2e8f0;
  --aj-surface: #ffffff;
  --aj-page: #f7f9fc;
  --aj-danger: #b42318;
}

/* Page */
html, body {
  background: var(--aj-page) !important;
  color: var(--aj-ink) !important;
}

body, button, input, select, textarea, table {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* White shared sidebar / menubar */
#sidebar,
.app-sidebar,
.sidebar,
.main-sidebar,
nav.sidebar,
aside.sidebar {
  background: #fff !important;
  color: #334155 !important;
  border-right: 1px solid var(--aj-line) !important;
  box-shadow: 4px 0 20px rgba(15, 23, 42, .045) !important;
}

#sidebar .nav-group-label,
.sidebar .nav-group-label,
.main-sidebar .nav-group-label {
  color: #94a3b8 !important;
}

#sidebar .nav-item,
.sidebar .nav-item,
.main-sidebar .nav-item {
  color: #475569 !important;
  background: transparent !important;
}

#sidebar .nav-item:hover,
.sidebar .nav-item:hover,
.main-sidebar .nav-item:hover {
  color: var(--aj-blue) !important;
  background: var(--aj-blue-hover) !important;
}

#sidebar .nav-item.active,
.sidebar .nav-item.active,
.main-sidebar .nav-item.active,
#sidebar .nav-item[aria-current="page"] {
  color: var(--aj-blue) !important;
  background: var(--aj-blue-soft) !important;
  box-shadow: inset 3px 0 0 var(--aj-blue) !important;
  font-weight: 600 !important;
}

#sidebar .nav-icon {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

#sidebar .nav-item:hover .nav-icon,
#sidebar .nav-item.active .nav-icon {
  background: #dbeafe !important;
  color: var(--aj-blue) !important;
}

#sidebar .nav-divider {
  background: var(--aj-line) !important;
}

/* Headers / top bars */
.aj-topbar,
header.aj-topbar {
  background: #fff !important;
  color: var(--aj-ink) !important;
  border-bottom: 1px solid var(--aj-line) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .035) !important;
}

/* Buttons */
.btn-brand,
.btn-gradient,
.aj-btn-primary {
  background: var(--aj-blue) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--aj-blue) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.btn-brand:hover,
.btn-gradient:hover,
.aj-btn-primary:hover {
  background: #125b95 !important;
  border-color: #125b95 !important;
}

/* Forms */
input, select, textarea,
.classFilter, .termFilter, .sessionFilter, .subjectFilter,
#searchInput, #filterCol, #filterVal {
  background: #fff !important;
  color: var(--aj-ink) !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
}

input:focus, select:focus, textarea:focus,
.classFilter:focus, .termFilter:focus, .sessionFilter:focus,
.subjectFilter:focus, #searchInput:focus, #filterCol:focus, #filterVal:focus {
  border-color: var(--aj-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(23, 105, 170, .12) !important;
}

/* Cards / panels */
.bg-white.rounded-2xl.shadow-lg,
.bg-white.rounded-2xl.shadow-xl,
.rounded-2xl.shadow-lg.bg-white,
.rounded-2xl.shadow-xl,
.aj-filters,
.wa-filters,
.ds-filter-panel,
.glass-effect.rounded-2xl,
.wa-table-wrap,
.ds-table-wrap,
.aj-table-wrap {
  background: #fff !important;
  border: 1px solid var(--aj-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .045) !important;
  backdrop-filter: none !important;
}

/* Tables: dark-blue header, white readable text */
table thead th,
.wa-tbl thead th,
.ds-table thead th,
table.min-w-full thead th,
thead tr.bg-gradient-to-r th,
thead tr[class*="bg-"] th {
  background: var(--aj-blue-dark) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #17476f !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase;
  padding: 11px 13px !important;
}

table tbody td,
.wa-tbl tbody td,
table.min-w-full tbody td {
  color: #334155 !important;
  border-bottom: 1px solid #edf1f5 !important;
}

table tbody tr:hover,
.wa-tbl tbody tr:hover,
table.min-w-full tbody tr:hover {
  background: #f7fbff !important;
}

/* Kill legacy purple/teal/gold UI colours without changing semantic alerts. */
.text-purple-600, .text-purple-700, .text-indigo-600, .text-indigo-700,
.text-teal-600, .text-teal-700 {
  color: var(--aj-blue) !important;
}

.bg-purple-50, .bg-purple-100, .bg-indigo-50, .bg-indigo-100,
.bg-teal-50, .bg-teal-100 {
  background: var(--aj-blue-soft) !important;
}

.border-purple-500, .border-indigo-500, .border-teal-500 {
  border-color: #b9d9ef !important;
}

[class*="bg-gradient-to-"] {
  background-image: none !important;
}

/* Sticky cells remain readable */

/* Dashboard content */
#content-area,
.ds-content,
.dash-main {
  background: transparent !important;
}

/* Mobile: do not let the sidebar consume most of the screen */
@media (max-width: 767px) {
  #sidebar {
    width: 282px !important;
    max-width: 86vw !important;
  }

  .dash-main,
  .ds-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  table {
    min-width: 680px;
  }
}

/* Local avatar fallback */
.local-avatar {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  border-radius: 10px;
  background: #eaf4fb;
  border: 1px solid #cfe3f4;
  color: #1769aa;
  font-weight: 700;
}


/* AJTECH ROLE DASHBOARD EXTENSIONS */
.staff-dashboard .role-kicker { color:#1769aa !important; }
.student-dashboard .role-kicker { color:#1769aa !important; }
.parent-dashboard .role-kicker { color:#1769aa !important; }

.dashboard-empty {
  padding: 28px 18px;
  text-align: center;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  border-radius: 9px;
  background: #fff;
}

/* ==========================================================================
   STUDENT ATTENDANCE — RESPONSIVE OVERRIDES
   Add/keep these rules in css/design-system.css.
   ========================================================================== */

#content-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.ds-attendance-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding: 22px 24px 48px;
}

.ds-attendance-page * {
    box-sizing: border-box;
}

/* Keep the dashboard content from becoming wider than the viewport. */
.ds-attendance-page .page-header,
.ds-attendance-page .stat-grid,
.ds-attendance-page .ds-filter-card,
.ds-attendance-page .aj-att-legend,
.ds-attendance-page .ds-data-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* ---------- Header ---------- */

.ds-attendance-page .page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ds-attendance-page .page-header h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-attendance-page .page-badge {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* ---------- Statistics ---------- */

.ds-attendance-page .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.ds-attendance-page .stat-card {
    min-width: 0;
}

/* ---------- Filter card ---------- */

.ds-attendance-page .ds-filter-card {
    overflow: hidden;
}

.ds-attendance-page .att-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
    min-width: 0;
}

.ds-attendance-page .att-toolbar > * {
    min-width: 0;
    max-width: 100%;
}

.ds-attendance-page .att-select,
.ds-attendance-page .att-input,
.ds-attendance-page .att-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.ds-attendance-page .ds-filter-button {
    grid-column: 1 / -1;
}

/* ---------- Legend ---------- */

.ds-attendance-page .aj-att-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 14px;
    min-width: 0;
}

/* ---------- Table: scroll ONLY inside this card ---------- */

.ds-attendance-page .ds-data-card {
    display: block;
    overflow: hidden;
    border-radius: 16px;
}

.ds-attendance-page .aj-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.ds-attendance-page .aj-table {
    width: max-content;
    min-width: 100%;
    max-width: none;
    border-collapse: separate;
    border-spacing: 0;
}

/* The Name column stays visible while dates scroll. */
.ds-attendance-page .aj-table th.aj-sticky,
.ds-attendance-page .aj-table td.aj-sticky {
    position: sticky !important;
    left: 0;
    z-index: 5;
    background-color:#ffff;
}

.ds-attendance-page .aj-table thead th.aj-sticky {
    z-index: 20;
}

/* Don't let long student names stretch the sticky column. */
.ds-attendance-page .aj-table td.aj-sticky {
    width: 155px;
    min-width: 155px;
    max-width: 155px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-attendance-page .aj-table th.aj-sticky {
    width: 155px;
    min-width: 155px;
    max-width: 155px;
}

/* Keep each date pair compact. */
.ds-attendance-page .aj-date-group {
    min-width: 112px;
}

.ds-attendance-page .aj-period-am,
.ds-attendance-page .aj-period-pm {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
}

.ds-attendance-page .att-mark {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
}

/* Pagination must not create horizontal overflow. */
.ds-attendance-page .aj-att-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
}

/* ---------- Tablet ---------- */

@media (max-width: 900px) {
    .ds-attendance-page {
        padding: 18px 18px 40px;
    }

    .ds-attendance-page .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Phone ---------- */

@media (max-width: 640px) {
    .ds-attendance-page {
        padding: 14px 12px 32px;
    }

    .ds-attendance-page .page-header {
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 12px;
    }

    .ds-attendance-page .page-header h1 {
        font-size: 18px;
        line-height: 1.2;
    }

    .ds-attendance-page .page-badge {
        width: 100%;
        flex-basis: 100%;
        justify-content: flex-start;
    }

    .ds-attendance-page .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ds-attendance-page .stat-card {
        padding: 11px;
        border-radius: 13px;
    }

    .ds-attendance-page .stat-num {
        font-size: 17px;
    }

    .ds-attendance-page .stat-label {
        font-size: 9px;
    }

    .ds-attendance-page .ds-filter-card {
        padding: 14px;
        border-radius: 16px;
    }

    .ds-attendance-page .ds-filter-title {
        font-size: 17px;
        margin-bottom: 11px;
    }

    .ds-attendance-page .att-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ds-attendance-page .att-select,
    .ds-attendance-page .att-input {
        height: 43px;
        font-size: 13px;
    }

    .ds-attendance-page .ds-filter-button {
        height: 43px;
        font-size: 13px;
    }

    .ds-attendance-page .aj-att-legend {
        gap: 6px 9px;
        font-size: 10px;
    }

    .ds-attendance-page .ds-data-card {
        border-radius: 14px;
    }

    .ds-attendance-page .aj-table th {
        padding: 9px 6px;
        font-size: 9px;
    }

    .ds-attendance-page .aj-table td {
        padding: 6px;
        height: 46px;
        font-size: 10px;
    }

    .ds-attendance-page .aj-table th.aj-sticky,
    .ds-attendance-page .aj-table td.aj-sticky {
        width: 125px;
        min-width: 125px;
        max-width: 125px;
    }

    .ds-attendance-page .aj-date-group {
        min-width: 108px;
    }

    .ds-attendance-page .aj-period-am,
    .ds-attendance-page .aj-period-pm {
        width: 54px;
        min-width: 54px;
        max-width: 54px;
    }

    .ds-attendance-page .att-mark {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        height: 29px;
        font-size: 9px;
    }
}

/* ---------- Very small phones ---------- */

@media (max-width: 390px) {
    .ds-attendance-page {
        padding-left: 9px;
        padding-right: 9px;
    }

    .ds-attendance-page .att-toolbar {
        grid-template-columns: 1fr;
    }

    .ds-attendance-page .ds-filter-button {
        grid-column: auto;
    }

    .ds-attendance-page .aj-table th.aj-sticky,
    .ds-attendance-page .aj-table td.aj-sticky {
        width: 112px;
        min-width: 112px;
        max-width: 112px;
    }
}

/* ============================================================
   MIDTERM — shared design-system table responsiveness
   Filter/card/button styling is inherited from the same shared
   design-system components used by Broadsheet.
   ============================================================ */

.ds-responsive-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.ds-responsive-table .bs-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.ds-responsive-table .sticky-name {
    position: sticky !important;
    left: 0;
    z-index: 5;
}

.ds-responsive-table thead .sticky-name {
    z-index: 15;
}

@media (max-width: 768px) {
    .ds-card.broadsheet-wrap {
        border-radius: 14px;
    }

    .ds-responsive-table .bs-table th,
    .ds-responsive-table .bs-table td {
        white-space: nowrap;
    }

    .ds-responsive-table .th-name,
    .ds-responsive-table .td-name {
        min-width: 125px;
        width: 125px;
        max-width: 125px;
    }

    .ds-responsive-table .td-name > div {
        max-width: 125px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
    .ds-card.broadsheet-wrap {
        margin-left: 0;
        margin-right: 0;
    }

    .ds-responsive-table .th-name,
    .ds-responsive-table .td-name {
        min-width: 112px;
        width: 112px;
        max-width: 112px;
    }

    .ds-responsive-table .td-action {
        white-space: nowrap;
    }
}