@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────────────── */
[data-theme="light"] {
  --navy:           #1e3a5f;
  --navy-dark:      #142843;
  --navy-mid:       #25487a;
  --navy-light:     #3a6ca8;
  --navy-pale:      #e8eef6;

  --bg-deep:        #f0f2f5;
  --bg-surface:     #ffffff;
  --bg-hover:       #f5f7fa;

  --text-primary:   #111827;
  --text-secondary: #4b5563;
  --text-muted:     #9ca3af;

  --neon-success:   #15803d;
  --neon-danger:    #b91c1c;
  --neon-warning:   #b45309;
  --neon-info:      #1d4ed8;

  --shadow:         0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-hover:   0 4px 12px rgba(0,0,0,0.10), 0 8px 32px rgba(0,0,0,0.08);
  --shadow-modal:   0 24px 80px rgba(0,0,0,0.18);

  --border:         #d1d9e3;
  --glass-border:   #d1d9e3;
}

/* ── Smooth scroll (both modes) ────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Base ──────────────────────────────────────────────────────────── */
[data-theme="light"] body {
  background: var(--bg-deep) !important;
  color: var(--text-primary) !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

/* ── Topbar / Navbar ───────────────────────────────────────────────── */
[data-theme="light"] .topbar,
[data-theme="light"] .navbar,
[data-theme="light"] .nav-bar,
[data-theme="light"] .site-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #25487a 100%) !important;
  box-shadow: 0 2px 12px rgba(30,58,95,0.18), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

[data-theme="light"] .topbar *,
[data-theme="light"] .navbar *,
[data-theme="light"] .nav-bar *,
[data-theme="light"] .site-header * {
  color: #ffffff !important;
}

[data-theme="light"] .topbar a,
[data-theme="light"] .navbar a,
[data-theme="light"] .nav-bar a {
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none;
}

[data-theme="light"] .topbar a:hover,
[data-theme="light"] .navbar a:hover,
[data-theme="light"] .nav-bar a:hover {
  color: #ffffff !important;
}

/* ── Sidebar ───────────────────────────────────────────────────────── */
[data-theme="light"] .sidebar,
[data-theme="light"] .nav-sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 2px 0 8px rgba(0,0,0,0.04) !important;
}

[data-theme="light"] .sidebar .nav-link,
[data-theme="light"] .nav-sidebar .nav-link {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .sidebar .nav-link:hover,
[data-theme="light"] .nav-sidebar .nav-link:hover {
  background: var(--navy-pale) !important;
  color: var(--navy) !important;
}

[data-theme="light"] .sidebar .nav-link.active,
[data-theme="light"] .nav-sidebar .nav-link.active {
  background: var(--navy-pale) !important;
  color: var(--navy) !important;
  border-right: 3px solid var(--navy) !important;
  font-weight: 600 !important;
}

/* ── Cards ─────────────────────────────────────────────────────────── */
[data-theme="light"] .record-card,
[data-theme="light"] .subject-card,
[data-theme="light"] .form-card,
[data-theme="light"] .card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  animation: lightCardIn 0.4s cubic-bezier(0.4,0,0.2,1) both;
}

[data-theme="light"] .record-card:hover,
[data-theme="light"] .subject-card:hover,
[data-theme="light"] .form-card:hover,
[data-theme="light"] .card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--navy-light) !important;
}

@keyframes lightCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-theme="light"] .record-card:nth-child(1),
[data-theme="light"] .subject-card:nth-child(1) { animation-delay: 0.00s; }
[data-theme="light"] .record-card:nth-child(2),
[data-theme="light"] .subject-card:nth-child(2) { animation-delay: 0.04s; }
[data-theme="light"] .record-card:nth-child(3),
[data-theme="light"] .subject-card:nth-child(3) { animation-delay: 0.08s; }
[data-theme="light"] .record-card:nth-child(4),
[data-theme="light"] .subject-card:nth-child(4) { animation-delay: 0.12s; }
[data-theme="light"] .record-card:nth-child(5),
[data-theme="light"] .subject-card:nth-child(5) { animation-delay: 0.16s; }
[data-theme="light"] .record-card:nth-child(n+6),
[data-theme="light"] .subject-card:nth-child(n+6) { animation-delay: 0.20s; }

/* ── Stat Cards ────────────────────────────────────────────────────── */
[data-theme="light"] .stat-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--navy) !important;
  box-shadow: var(--shadow) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

[data-theme="light"] .stat-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle at top right, rgba(30,58,95,0.05), transparent 70%);
  pointer-events: none;
}

[data-theme="light"] .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
}

[data-theme="light"] .stat-card.stat-pass,
[data-theme="light"] .stat-card[data-type="pass"] { border-top-color: var(--neon-success) !important; }

[data-theme="light"] .stat-card.stat-fail,
[data-theme="light"] .stat-card[data-type="fail"] { border-top-color: var(--neon-danger) !important; }

[data-theme="light"] .stat-card.stat-inc,
[data-theme="light"] .stat-card.stat-incomplete,
[data-theme="light"] .stat-card[data-type="inc"] { border-top-color: var(--neon-warning) !important; }

[data-theme="light"] .stat-card.stat-drop,
[data-theme="light"] .stat-card.stat-dropped,
[data-theme="light"] .stat-card[data-type="drop"] { border-top-color: #6d28d9 !important; }

/* ── Buttons ───────────────────────────────────────────────────────── */
[data-theme="light"] .btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #1e3a5f 0%, #25487a 100%) !important;
  border-color: #142843 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(30,58,95,0.25) !important;
}

[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #142843 0%, #1e3a5f 100%) !important;
  box-shadow: 0 4px 12px rgba(30,58,95,0.35) !important;
  transform: translateY(-1px) !important;
}

[data-theme="light"] .btn-secondary {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .btn-secondary:hover {
  border-color: #a0aec0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  transform: translateY(-1px) !important;
}

[data-theme="light"] .btn-danger {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: var(--neon-danger) !important;
}

[data-theme="light"] .btn-danger:hover {
  background: #ffe4e6 !important;
  box-shadow: 0 2px 8px rgba(185,28,28,0.15) !important;
  transform: translateY(-1px) !important;
}

[data-theme="light"] .btn-student {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
  border-color: #1e40af !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(29,78,216,0.25) !important;
}

[data-theme="light"] .btn-student:hover {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
  box-shadow: 0 4px 12px rgba(29,78,216,0.35) !important;
  transform: translateY(-1px) !important;
}

[data-theme="light"] .btn-admin {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important;
  border-color: #5b21b6 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(109,40,217,0.25) !important;
}

[data-theme="light"] .btn-admin:hover {
  background: linear-gradient(135deg, #5b21b6 0%, #6d28d9 100%) !important;
  box-shadow: 0 4px 12px rgba(109,40,217,0.35) !important;
  transform: translateY(-1px) !important;
}

/* ── Tables ────────────────────────────────────────────────────────── */
[data-theme="light"] .table-wrapper,
[data-theme="light"] .data-table-wrapper {
  background: var(--bg-surface) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 10px !important;
  overflow: hidden;
  border: 1px solid var(--border) !important;
}

[data-theme="light"] .data-table thead th {
  background: #1e3a5f !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 11px 14px !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: none !important;
}

[data-theme="light"] .data-table tbody tr:nth-child(even) {
  background: #fafbfd !important;
}

[data-theme="light"] .data-table tbody tr:hover {
  background: #f5f8ff !important;
}

[data-theme="light"] .data-table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid #eef0f4 !important;
  color: var(--text-primary) !important;
}

/* ── Forms ─────────────────────────────────────────────────────────── */
[data-theme="light"] .form-control,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
  color: var(--text-primary) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

[data-theme="light"] .form-control:hover,
[data-theme="light"] input[type="text"]:hover,
[data-theme="light"] input[type="email"]:hover,
[data-theme="light"] input[type="password"]:hover,
[data-theme="light"] select:hover {
  border-color: #b0bec8 !important;
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="email"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="light"] input[type="number"]:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--navy-light) !important;
  box-shadow: 0 0 0 3px rgba(30,58,95,0.12), inset 0 1px 2px rgba(0,0,0,0.04) !important;
  outline: none !important;
}

[data-theme="light"] label,
[data-theme="light"] .form-label {
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}

[data-theme="light"] .form-section,
[data-theme="light"] .finalize-section {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* ── Modals ────────────────────────────────────────────────────────── */
[data-theme="light"] .modal-backdrop,
[data-theme="light"] .modal-overlay {
  background: rgba(17,24,39,0.45) !important;
  backdrop-filter: blur(3px) !important;
}

[data-theme="light"] .modal,
[data-theme="light"] .modal-box,
[data-theme="light"] .modal-content {
  background: var(--bg-surface) !important;
  box-shadow: var(--shadow-modal) !important;
  border: 1px solid var(--border) !important;
  animation: lightModalIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

@keyframes lightModalIn {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer {
  background: #fafbfc !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .modal-title,
[data-theme="light"] .modal-header h2,
[data-theme="light"] .modal-header h3 {
  color: var(--navy) !important;
}

/* ── Auth / Login Pages ────────────────────────────────────────────── */
[data-theme="light"] body.login-page,
[data-theme="light"] body.auth-page {
  background: linear-gradient(160deg, #142843 0%, #1e3a5f 45%, #25487a 100%) !important;
  background-attachment: fixed !important;
  position: relative;
}

[data-theme="light"] body.login-page::before,
[data-theme="light"] body.auth-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] .login-wrapper,
[data-theme="light"] .auth-container {
  position: relative;
  z-index: 1;
}

[data-theme="light"] .login-card,
[data-theme="light"] .auth-card {
  background: #ffffff !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22) !important;
  border: none !important;
  animation: lightAuthCardIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both !important;
}

@keyframes lightAuthCardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

[data-theme="light"] .login-brand h1,
[data-theme="light"] .auth-logo h1 {
  color: var(--navy) !important;
}

[data-theme="light"] .login-brand p,
[data-theme="light"] .auth-logo p {
  color: var(--text-secondary) !important;
}

[data-theme="light"] body.admin-auth-page {
  background: linear-gradient(160deg, #2d1b6e 0%, #4c1d95 45%, #6d28d9 100%) !important;
}

/* ── Grade Pills ───────────────────────────────────────────────────── */
[data-theme="light"] .grade-pill {
  background: #f7f9fc !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

[data-theme="light"] .grade-pill:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .grade-pill.pass,
[data-theme="light"] .grade-pill[data-result="pass"] {
  background: #f0fdf4 !important;
  color: var(--neon-success) !important;
  border-color: #bbf7d0 !important;
}

[data-theme="light"] .grade-pill.fail,
[data-theme="light"] .grade-pill[data-result="fail"] {
  background: #fff1f2 !important;
  color: var(--neon-danger) !important;
  border-color: #fecdd3 !important;
}

[data-theme="light"] .grade-pill.final,
[data-theme="light"] .grade-pill[data-result="final"] {
  background: var(--navy) !important;
  color: #ffffff !important;
  border-color: var(--navy) !important;
}

/* ── Badges ────────────────────────────────────────────────────────── */
[data-theme="light"] .badge-success,
[data-theme="light"] .badge.pass { background: #dcfce7 !important; color: #15803d !important; }

[data-theme="light"] .badge-danger,
[data-theme="light"] .badge.fail { background: #fee2e2 !important; color: #b91c1c !important; }

[data-theme="light"] .badge-warning,
[data-theme="light"] .badge.inc  { background: #fef3c7 !important; color: #b45309 !important; }

[data-theme="light"] .badge-info,
[data-theme="light"] .badge.info { background: #dbeafe !important; color: #1d4ed8 !important; }

[data-theme="light"] .badge-purple,
[data-theme="light"] .badge.drop,
[data-theme="light"] .badge.dr   { background: #ede9fe !important; color: #6d28d9 !important; }

/* ── Score Inputs ──────────────────────────────────────────────────── */
[data-theme="light"] .score-input,
[data-theme="light"] .grade-input {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}

/* ── Alerts ────────────────────────────────────────────────────────── */
[data-theme="light"] .alert-success {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: var(--neon-success) !important;
}

[data-theme="light"] .alert-error {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: var(--neon-danger) !important;
}

[data-theme="light"] .alert-warning {
  background: #fefce8 !important;
  border-color: #fde68a !important;
  color: var(--neon-warning) !important;
}

[data-theme="light"] .alert-info {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: var(--neon-info) !important;
}

/* ── Page Titles ───────────────────────────────────────────────────── */
[data-theme="light"] .page-title,
[data-theme="light"] h1.page-heading {
  color: var(--navy) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .section-title {
  color: var(--navy) !important;
  border-bottom: 2px solid var(--navy-pale) !important;
}

/* ── Links ─────────────────────────────────────────────────────────── */
[data-theme="light"] a {
  color: var(--navy-light) !important;
}

[data-theme="light"] a:hover {
  color: var(--navy) !important;
}

/* ── Footer ────────────────────────────────────────────────────────── */
[data-theme="light"] .site-footer {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

/* ── Display Font Helper ───────────────────────────────────────────── */
[data-theme="light"] .font-display {
  font-family: 'DM Serif Display', Georgia, serif !important;
}