/* =============================================================
   theme.css  --  Vyala LMS  --  Deep Space Indigo (Student Portal)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  /* Vyala Software Brand Palette */
  --logo-red:    #ef4444;
  --logo-yellow: #f59e0b;
  --logo-blue:   #3b82f6;
  --logo-green:  #10b981;

  /* Backgrounds (Light Theme) */
  --bg-root:    #f8fafc;
  --bg-deep:    #e2e8f0;
  --bg-sidebar: #ffffff;
  --bg-card:    #f0f3ff;
  --bg-input:   #f8fafc;
  --bg-hover:   rgba(37, 99, 235, 0.06);

  /* Primary – Logo Blue (Vyala Theme) */
  --indigo:      #2563eb;
  --indigo-lt:   #1d4ed8;
  --indigo-dk:   #1e40af;
  --indigo-glow: rgba(37, 99, 235, 0.12);

  /* Secondary highlight – cyan/sky */
  --cyan:       #0284c7;
  --cyan-soft:  #0369a1;

  /* Status */
  --green:      #16a34a;
  --green-dim:  rgba(22, 163, 74, 0.12);
  --red:        #dc2626;
  --red-dim:    rgba(220, 38, 38, 0.1);
  --amber:      #d97706;
  --amber-dim:  rgba(217, 119, 6, 0.10);

  /* Text */
  --t1:  #000000;
  --t2:  #111827;
  --t3:  #374151;
  --t4:  #f8fafc;

  /* Borders */
  --b0:  rgba(0, 0, 0, 0.08);
  --b1:  rgba(37, 99, 235, 0.15);
  --b2:  rgba(37, 99, 235, 0.28);
  --b3:  rgba(37, 99, 235, 0.45);

  /* Shadows */
  --sh1: 0 1px 3px rgba(0,0,0,0.05);
  --sh2: 0 4px 15px rgba(37, 99, 235, 0.05), 0 1px 2px rgba(0,0,0,0.02);
  --sh3: 0 12px 30px rgba(37, 99, 235, 0.1), 0 1px 3px rgba(0,0,0,0.02);
  --glow: 0 0 20px rgba(37, 99, 235, 0.08);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background:
    radial-gradient(ellipse 80% 55% at 15% 0%,   rgba(99,102,241,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 85% 100%, rgba(34,211,238,0.05) 0%, transparent 55%),
    var(--bg-root) !important;
  color: var(--t1) !important;
  font-family: 'Inter', sans-serif !important;
  min-height: 100vh;
  font-size: 14px;
  letter-spacing: -0.011em;
  line-height: 1.6;
}

/* ── Typography ──────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Inter', sans-serif !important;
  color: var(--t1) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
}
p, label, .form-label       { color: var(--t3) !important; }
small                        { color: var(--t3) !important; font-size: 12px; }
.text-white                  { color: var(--t1) !important; }
.text-success                { color: var(--green) !important; }
.text-danger                 { color: var(--red) !important; }

/* legacy colour aliases */
.text-purple,
[style*="color:#c4b5fd"],[style*="color: #c4b5fd"],
[style*="color:#a78bfa"] {
  color: var(--indigo-lt) !important;
  -webkit-text-fill-color: var(--indigo-lt) !important;
}
.text-pink-400 {
  color: var(--cyan-soft) !important;
  -webkit-text-fill-color: var(--cyan-soft) !important;
}
.text-muted,.text-slate-400,.text-slate-300,
.text-slate-500,.text-slate-600 {
  color: var(--t3) !important; opacity: 1 !important;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar, .topics-sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--b1) !important;
  min-height: 100vh;
  position: relative;
}
.sidebar::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, var(--indigo) 0%, transparent 100%);
  opacity: 0.3;
  pointer-events: none;
}
.sidebar-brand {
  padding: 24px 20px 18px;
  border-bottom: 1px solid var(--b1);
  position: relative;
}
.sidebar-brand::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--logo-red), var(--logo-yellow), var(--logo-blue), var(--logo-green));
}
.sidebar-brand span {
  font-weight: 800; letter-spacing: -0.04em;
  color: var(--t1) !important;
  -webkit-text-fill-color: var(--t1) !important;
}
.sidebar-brand span .text-purple {
  color: var(--indigo-lt) !important;
  -webkit-text-fill-color: var(--indigo-lt) !important;
}
.sidebar-brand div {
  color: var(--indigo-lt) !important;
  font-size: 9.5px; letter-spacing: 0.22em;
  font-weight: 700; margin-top: 4px; text-transform: uppercase;
  -webkit-text-fill-color: var(--indigo-lt) !important;
}

.nav-link, .topic-item {
  color: var(--t3) !important;
  margin: 2px 10px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important; font-weight: 500;
  display: flex !important; align-items: center; gap: 11px;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.nav-link:hover, .topic-item:hover {
  background: var(--bg-hover) !important;
  color: var(--t2) !important;
  border-color: var(--b1) !important;
  transform: translateX(3px);
}
.nav-link.active, .topic-item.active {
  background: rgba(99,102,241,0.13) !important;
  border-color: var(--b2) !important;
  color: var(--indigo-lt) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--indigo), var(--glow) !important;
}
.nav-link i { width: 16px; text-align: center; font-size: 13px; opacity: 0.85; }
.nav-link.active i { color: var(--indigo-lt); opacity: 1; }

/* ── Header ──────────────────────────────────────────────────── */
.header-banner, header {
  background: #ffffff !important;
  border-bottom: 2px solid var(--b1) !important;
  padding: 13px 30px !important;
  backdrop-filter: blur(12px);
  color: #000000 !important;
}
header .badge, .header-banner .badge, .portal-badge {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; font-weight: 700;
  border-radius: 7px; padding: 4px 12px;
}
header select[name="active_enrollment_id"] {
  background: #ffffff !important;
  border: 1px solid var(--b2) !important;
  color: #000000 !important;
  font-weight: 600; font-size: 13px !important; cursor: pointer;
}

/* ── Cards ───────────────────────────────────────────────────── */
.glass-panel, .glass-card,
.portal-card, .login-card, .content-panel {
  background: var(--bg-card) !important;
  border: 1px solid var(--b0) !important;
  border-radius: 16px !important;
  box-shadow: var(--sh2) !important;
  color: var(--t1) !important;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s !important;
}
.glass-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--b2) !important;
  box-shadow: var(--sh3), var(--glow) !important;
}
.subject-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--b0) !important;
  border-radius: 14px !important;
  transition: all 0.22s ease !important;
}
.subject-card:hover {
  border-color: var(--b2) !important;
  background: rgba(99,102,241,0.05) !important;
  transform: translateY(-2px);
}

/* attendance rows */
.att-row {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--b0) !important;
  border-radius: 13px !important;
  padding: 16px 20px !important;
  margin-bottom: 10px !important;
  transition: border-color 0.18s !important;
}
.att-row:hover          { border-color: var(--b1) !important; }
.att-row.marked-present { border-left: 3px solid var(--green) !important; }
.att-row.marked-absent  { border-left: 3px solid var(--red) !important; }
.att-row.marked-late    { border-left: 3px solid var(--amber) !important; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary, .btn-success, .btn-submit-att,
.btn-filter, input[type="submit"] {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-dk) 100%) !important;
  border: 1px solid rgba(99,102,241,0.4) !important;
  color: #fff !important; font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px var(--indigo-glow) !important;
  transition: all 0.22s cubic-bezier(.16,1,.3,1) !important;
  letter-spacing: 0;
}
.btn-primary:hover, .btn-success:hover, .btn-submit-att:hover,
.btn-filter:hover, input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(99,102,241,0.45) !important;
  filter: brightness(1.1) !important;
  color: #fff !important;
}
.btn-save-att {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-dk) 100%) !important;
  border: 1px solid rgba(99,102,241,0.4) !important;
  border-radius: 12px !important; padding: 12px 34px !important;
  font-weight: 700 !important; font-size: 14px !important;
  color: #fff !important; cursor: pointer !important;
  box-shadow: 0 4px 16px var(--indigo-glow) !important;
  transition: all 0.25s ease !important;
}
.btn-save-att:hover { transform: translateY(-2px) !important; filter: brightness(1.1) !important; }

.btn-outline-light {
  color: var(--t3) !important; border: 1px solid var(--b0) !important;
  background: transparent !important; border-radius: 10px !important;
  transition: all 0.2s !important;
}
.btn-outline-light:hover {
  background: var(--bg-hover) !important; border-color: var(--b2) !important; color: var(--t1) !important;
}
.btn-outline-danger {
  color: var(--red) !important; border: 1px solid rgba(248,113,113,0.25) !important;
  background: transparent !important; border-radius: 10px !important; transition: all 0.2s !important;
}
.btn-outline-danger:hover {
  background: rgba(248,113,113,0.08) !important; border-color: var(--red) !important;
}
.btn-outline-secondary {
  color: var(--t3) !important; border: 1px solid var(--b0) !important;
  background: transparent !important; border-radius: 10px !important;
}
.btn-outline-secondary:hover { background: var(--bg-hover) !important; color: var(--t2) !important; }
.btn-sm { font-size: 12px !important; padding: 6px 14px !important; }

/* status buttons in attendance */
.status-btn {
  border: 1px solid transparent !important; border-radius: 9px !important;
  padding: 7px 18px !important; font-size: 12px !important; font-weight: 600 !important;
  cursor: pointer !important; transition: all 0.18s !important; background: transparent !important;
  letter-spacing: 0;
}
.status-btn.present { border-color: rgba(74,222,128,0.3) !important; color: var(--green) !important; }
.status-btn.present:hover,.status-btn.present.selected {
  background: var(--green-dim) !important; border-color: var(--green) !important; transform: scale(1.05) !important;
}
.status-btn.absent  { border-color: rgba(248,113,113,0.3) !important; color: var(--red) !important; }
.status-btn.absent:hover,.status-btn.absent.selected {
  background: var(--red-dim) !important; border-color: var(--red) !important; transform: scale(1.05) !important;
}
.status-btn.late    { border-color: rgba(251,191,36,0.3) !important; color: var(--amber) !important; }
.status-btn.late:hover,.status-btn.late.selected {
  background: var(--amber-dim) !important; border-color: var(--amber) !important; transform: scale(1.05) !important;
}

/* quick buttons */
.quick-btn {
  background: rgba(99,102,241,0.09) !important; border: 1px solid var(--b1) !important;
  color: var(--indigo-lt) !important; border-radius: 9px !important;
  padding: 7px 15px !important; font-size: 12px !important; font-weight: 600 !important;
  cursor: pointer !important; transition: all 0.18s !important; font-family: inherit;
}
.quick-btn:hover { background: rgba(99,102,241,0.16) !important; border-color: var(--indigo) !important; color: var(--t1) !important; }

/* student number chip */
.student-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(99,102,241,0.13); color: var(--indigo-lt);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* ── Tables ──────────────────────────────────────────────────── */
.table-glass, .attendance-table, .report-table, .table, .table-dark {
  background: rgba(255,255,255,0.01) !important; color: var(--t1) !important;
  border: 1px solid var(--b0) !important; border-radius: 14px !important; overflow: hidden;
}
.table-glass th, .report-table th, .table th, .table-dark th, .attendance-table th {
  background: rgba(5,7,20,0.85) !important; color: var(--indigo-lt) !important;
  border-bottom: 1px solid var(--b1) !important; font-weight: 700 !important;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; padding: 14px 18px !important;
}
.table-glass td, .report-table td, .table td, .table-dark td, .attendance-table td {
  color: var(--t2) !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  padding: 13px 18px !important; font-size: 13.5px; vertical-align: middle;
}
.table-hover tbody tr:hover, .table-dark tbody tr:hover {
  background: rgba(99,102,241,0.04) !important;
}

/* ── Progress ────────────────────────────────────────────────── */
.progress-bar-custom, .progress-bar-att {
  height: 6px !important; background: rgba(255,255,255,0.07) !important;
  border-radius: 99px !important; overflow: hidden;
}
.progress-bar-fill, .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--indigo-dk) 0%, var(--cyan) 100%) !important;
  border-radius: 99px; transition: width 0.4s ease !important;
}

/* ── Forms ───────────────────────────────────────────────────── */
.form-control, .form-select, .date-input, .filter-input, .remarks-input {
  background: var(--bg-input) !important; border: 1px solid var(--b1) !important;
  color: var(--t1) !important; border-radius: 10px !important;
  padding: 10px 16px; font-size: 13.5px; font-family: 'Inter', sans-serif;
  transition: all 0.2s ease !important;
}
.form-control::placeholder,.remarks-input::placeholder,.date-input::placeholder {
  color: var(--t4) !important;
}
.form-control:focus,.form-select:focus,.date-input:focus,
.filter-input:focus,.remarks-input:focus {
  background: rgba(99,102,241,0.08) !important; border-color: var(--indigo) !important;
  color: var(--t1) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.18) !important;
  outline: none !important;
}
.form-select option,.filter-input option { background: #0a0e20; color: var(--t1); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.6) sepia(1) hue-rotate(200deg) saturate(1.5); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge-present {
  background: var(--green-dim) !important; color: var(--green) !important;
  border: 1px solid rgba(74,222,128,0.22) !important;
  border-radius: 20px; padding: 4px 12px; font-size: 11.5px; font-weight: 600;
}
.badge-absent {
  background: var(--red-dim) !important; color: var(--red) !important;
  border: 1px solid rgba(248,113,113,0.2) !important;
  border-radius: 20px; padding: 4px 12px; font-size: 11.5px; font-weight: 600;
}
.badge-late {
  background: var(--amber-dim) !important; color: var(--amber) !important;
  border: 1px solid rgba(251,191,36,0.2) !important;
  border-radius: 20px; padding: 4px 12px; font-size: 11.5px; font-weight: 600;
}
.badge { font-size: 11px !important; border-radius: 7px !important; padding: 3px 10px !important; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert-s,.alert-success {
  background: rgba(74,222,128,0.07) !important; border: 1px solid rgba(74,222,128,0.22) !important;
  color: var(--green) !important; border-radius: 12px !important; padding: 12px 20px !important;
}
.alert-e,.alert-danger {
  background: rgba(248,113,113,0.07) !important; border: 1px solid rgba(248,113,113,0.22) !important;
  color: var(--red) !important; border-radius: 12px !important; padding: 12px 20px !important;
}
.alert-info {
  background: rgba(99,102,241,0.07) !important; border: 1px solid var(--b2) !important;
  color: var(--indigo-lt) !important; border-radius: 12px !important;
}
.alert-warning {
  background: rgba(251,191,36,0.07) !important; border: 1px solid rgba(251,191,36,0.22) !important;
  color: var(--amber) !important; border-radius: 12px !important;
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-content {
  background: #0d1025 !important; border: 1px solid var(--b2) !important;
  border-radius: 18px !important; color: var(--t1) !important;
}
.modal-header { border-bottom: 1px solid var(--b1) !important; }
.modal-footer { border-top:    1px solid var(--b1) !important; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination .page-link {
  background: rgba(255,255,255,0.03) !important; color: var(--t3) !important;
  border: 1px solid var(--b0) !important; border-radius: 8px !important;
  margin: 0 2px; transition: all 0.18s;
}
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-dk) 100%) !important;
  border-color: transparent !important; color: #fff !important; font-weight: 700;
}
.pagination .page-link:hover:not(.disabled) {
  background: rgba(99,102,241,0.1) !important; color: var(--indigo-lt) !important; border-color: var(--b2) !important;
}
.pagination .page-item.disabled .page-link { opacity: 0.28; pointer-events: none; }

/* ── Code / Learning pane ────────────────────────────────────── */
.pane-header { background: var(--bg-sidebar) !important; color: var(--t1) !important; border-bottom: 1px solid var(--b1) !important; }
.editor-pane { border-right: 2px solid var(--b1) !important; }
.content-rendered { color: var(--t2) !important; font-size: 15.5px !important; line-height: 1.78 !important; }
.p-4.mb-5.rounded-xl.border pre {
  background: var(--bg-deep) !important; color: var(--cyan-soft) !important;
  border-left: 3px solid var(--indigo) !important; border-radius: 10px !important;
  padding: 16px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important;
}

/* ── Icons ───────────────────────────────────────────────────── */
.fa-home,.fa-clipboard-check,.fa-chart-bar,.fa-chart-line,
.fa-graduation-cap,.fa-user-graduate,.fa-list-ol,.fa-folder-plus,
.fa-exchange-alt { color: var(--indigo-lt) !important; }
.fa-user-tie,.fa-user-circle,.fa-book,.fa-book-open,
.fa-envelope,.fa-phone { color: var(--cyan) !important; }
.fa-calendar-alt,.fa-clock { color: var(--amber) !important; }
.fa-check { color: var(--green) !important; }
.fa-times { color: var(--red) !important; }
.fa-sign-out-alt { color: var(--red) !important; }

/* ── Legacy inline overrides ─────────────────────────────────── */
span[style*="background:rgba(139,92,246"],
span[style*="background: rgba(139, 92, 246"],
div[style*="background:rgba(139,92,246"],
div[style*="background: rgba(139, 92, 246"] {
  background: rgba(99,102,241,0.12) !important; color: var(--indigo-lt) !important;
}
[style*="linear-gradient(90deg, #8b5cf6"],
[style*="linear-gradient(90deg,#8b5cf6"],
[style*="linear-gradient(135deg, #8b5cf6"],
[style*="linear-gradient(90deg, #8b5cf6, #d946ef"],
[style*="linear-gradient(90deg, #8b5cf6, #06b6d4"] {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-dk) 100%) !important;
  color: #fff !important;
}
[style*="background:rgba(139,92,246,0.15)"],
[style*="background: rgba(139, 92, 246, 0.15)"],
[style*="background: rgba(139,92,246,0.1)"] {
  background: rgba(99,102,241,0.12) !important; color: var(--indigo-lt) !important;
}
.border-slate-800 { border-color: var(--b0) !important; }
.border-slate-700 { border-color: var(--b1) !important; }

.professor-badge {
  background: rgba(99,102,241,0.07) !important; border: 1px solid var(--b2) !important;
  border-radius: 12px; padding: 10px 16px;
}

/* ── Premium White Theme Overrides ── */
body, html {
  background:
    radial-gradient(ellipse 80% 55% at 15% 0%, rgba(99, 102, 241, 0.03) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 85% 100%, rgba(34, 211, 238, 0.02) 0%, transparent 55%),
    var(--bg-root) !important;
  color: var(--t2) !important;
}

/* Override all local dark styles in cards, sections, layouts */
.glass-card, .glass-panel, .card, .modal-content, .topics-sidebar {
  background: var(--bg-card) !important;
  border: 1px solid var(--b1) !important;
  box-shadow: var(--sh2) !important;
  color: var(--t2) !important;
}

.modal-content {
  background-color: var(--bg-card) !important;
}

/* Input Fields */
.form-control, .form-select, textarea, input, .filter-input, .select2-selection {
  background: var(--bg-input) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t1) !important;
}

.form-control:focus, .form-select:focus, textarea:focus, input:focus {
  border-color: var(--indigo) !important;
  box-shadow: 0 0 0 3px var(--indigo-glow) !important;
  background: var(--bg-input) !important;
  color: var(--t1) !important;
}

.form-control::placeholder, textarea::placeholder {
  color: var(--t3) !important;
}

/* Active navigation overrides */
.nav-link.active, .topic-item.active {
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--indigo) !important;
  font-weight: 600 !important;
  border-left: 4px solid var(--indigo) !important;
}

.nav-link:hover, .topic-item:hover {
  background: rgba(37, 99, 235, 0.04) !important;
  color: var(--indigo) !important;
}

/* Tables styling */
table, .table {
  color: var(--t2) !important;
}

th, td {
  border-bottom-color: var(--b0) !important;
  color: var(--t2) !important;
}

.table th {
  background: var(--bg-deep) !important;
  color: var(--t1) !important;
}

tr:hover {
  background: rgba(79, 70, 229, 0.02) !important;
}

/* Style table-glass container and elements for clean light mode */
.table-glass {
  background: var(--bg-card) !important;
  border: 1px solid var(--b1) !important;
  box-shadow: var(--sh2) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.table-glass table {
  background: transparent !important;
}

.table-glass th {
  background: var(--bg-deep) !important;
  color: var(--t1) !important;
  border-bottom: 1.5px solid var(--b1) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}

.table-glass td {
  color: var(--t2) !important;
  border-bottom: 1px solid var(--b0) !important;
  background: transparent !important;
}

.table-glass td .text-muted, 
.table-glass td .text-xs {
  color: var(--t3) !important;
  -webkit-text-fill-color: var(--t3) !important;
}

.table-glass .badge {
  font-weight: 600 !important;
}

/* Secondary Badges and Tags */
.badge.bg-purple\/10 {
  background: rgba(79, 70, 229, 0.08) !important;
  color: var(--indigo) !important;
  border: 1px solid rgba(79, 70, 229, 0.15) !important;
}

/* Scrollbars */
::-webkit-scrollbar-track {
  background: var(--bg-deep) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--b2) !important;
}

/* Toggle button styling */
#sidebarToggleBtn {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(79, 70, 229, 0.25) !important;
  color: var(--indigo) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}

#sidebarToggleBtn:hover {
  background: var(--indigo) !important;
  color: #ffffff !important;
  border-color: var(--indigo) !important;
}


/* Class card schedules text readability overrides for Light Theme */
.class-card-hover strong[style*="color:#c4b5fd"],
.class-card-hover strong[style*="color: #c4b5fd"] {
  color: var(--indigo-lt) !important;
  -webkit-text-fill-color: var(--indigo-lt) !important;
  font-weight: 700 !important;
}

.class-card-hover span[style*="color:#f472b6"],
.class-card-hover span[style*="color: #f472b6"] {
  color: var(--cyan) !important;
  -webkit-text-fill-color: var(--cyan) !important;
  font-weight: 600 !important;
}

.class-card-hover .text-slate-400 {
  color: var(--t2) !important;
}

.class-card-hover .text-teal {
  color: var(--green) !important;
  font-weight: 700 !important;
}

.class-card-hover div[style*="background: rgba(255, 255, 255, 0.01)"],
.class-card-hover div[style*="background:rgba(255,255,255,0.01)"] {
  background: rgba(37, 99, 235, 0.04) !important;
  border-color: rgba(37, 99, 235, 0.15) !important;
}

.class-card-hover .badge.bg-purple-soft {
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--indigo) !important;
  border: 1px solid rgba(37, 99, 235, 0.15) !important;
}

.class-card-hover .badge.bg-teal-soft {
  background: rgba(22, 163, 74, 0.08) !important;
  color: var(--green) !important;
  border: 1px solid rgba(22, 163, 74, 0.15) !important;
}

/* ── Global Light Theme Overrides (Sidebar, Forms, Panels, Custom Tables) ── */

/* Force Sidebar to Light Mode */
.sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--b1, rgba(37, 99, 235, 0.12)) !important;
  box-shadow: 2px 0 12px rgba(37, 99, 235, 0.04) !important;
}

.sidebar-brand {
  border-bottom: 1px solid var(--b0, rgba(0,0,0,0.06)) !important;
}

/* Force Nav Links to Light Mode */
.nav-link {
  color: var(--t3, #64748b) !important;
  font-weight: 500 !important;
}

.nav-link:hover, .nav-link.active {
  color: var(--indigo, #2563eb) !important;
  background: rgba(37, 99, 235, 0.06) !important;
  border-left-color: var(--indigo, #2563eb) !important;
  font-weight: 600 !important;
}

/* Force Panels and Modals to Light Mode */
.glass-panel, .glass-card, .topics-sidebar {
  background: #ffffff !important;
  border: 1px solid var(--b1, rgba(37, 99, 235, 0.12)) !important;
  border-radius: 16px !important;
  box-shadow: var(--sh2) !important;
  color: var(--t1, #0f172a) !important;
}

.glass-panel h3, .glass-panel h4, .glass-panel h5, .glass-panel h6,
.glass-card h3, .glass-card h4, .glass-card h5, .glass-card h6 {
  color: var(--t1, #0f172a) !important;
}

/* Force Form Controls to Light Mode */
.form-control, .form-select {
  background-color: #ffffff !important;
  border: 1px solid var(--b1, rgba(37, 99, 235, 0.15)) !important;
  color: var(--t1, #0f172a) !important;
}

.form-control::placeholder {
  color: var(--t3, #94a3b8) !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--indigo, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  background-color: #ffffff !important;
  color: var(--t1, #0f172a) !important;
}

.form-select option {
  background-color: #ffffff !important;
  color: var(--t1, #0f172a) !important;
}

/* Force Custom Tables to Light Mode */
.table-custom {
  background: transparent !important;
  color: var(--t1, #0f172a) !important;
}

.table-custom th {
  color: var(--t3, #64748b) !important;
  background: transparent !important;
  font-weight: 700 !important;
  border-bottom: none !important;
}

.table-custom tr {
  background: #ffffff !important;
}

.table-custom td {
  background: #ffffff !important;
  color: var(--t2, #334155) !important;
  border-top: 1px solid var(--b1, rgba(37, 99, 235, 0.12)) !important;
  border-bottom: 1px solid var(--b1, rgba(37, 99, 235, 0.12)) !important;
}

.table-custom tr td:first-child {
  border-left: 1px solid var(--b1, rgba(37, 99, 235, 0.12)) !important;
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

.table-custom tr td:last-child {
  border-right: 1px solid var(--b1, rgba(37, 99, 235, 0.12)) !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Take Test Option Labels and Question Blocks */
.assessment-card {
  background: #ffffff !important;
  border: 1px solid var(--b1, rgba(37, 99, 235, 0.12)) !important;
  box-shadow: var(--sh3) !important;
  color: var(--t1, #0f172a) !important;
}

.question-block {
  background: var(--bg-card, #f0f3ff) !important;
  border: 1px solid var(--b1, rgba(37, 99, 235, 0.12)) !important;
  color: var(--t1, #0f172a) !important;
}

.option-label {
  background: #ffffff !important;
  border: 1px solid var(--b1, rgba(37, 99, 235, 0.12)) !important;
  color: var(--t2, #334155) !important;
}

.option-label:hover {
  background: var(--bg-hover, rgba(37, 99, 235, 0.06)) !important;
  border-color: var(--indigo, #2563eb) !important;
  color: var(--indigo, #2563eb) !important;
}

.option-input:checked + .option-label {
  background: rgba(37, 99, 235, 0.12) !important;
  border-color: var(--indigo, #2563eb) !important;
  color: var(--indigo, #2563eb) !important;
  font-weight: 600 !important;
}

/* ── Global High Contrast Black Text Overrides ── */

body, p, label, .form-label, .text-muted, .text-slate-400, .text-slate-500, .text-slate-600 {
  color: var(--t2, #111827) !important;
}

h1, h2, h3, h4, h5, h6, .fw-bold, .font-display, th {
  color: var(--t1, #000000) !important;
}

td, span, .fw-semibold, a:not(.btn):not(.nav-link):not(.topic-item) {
  color: var(--t2, #111827) !important;
}

/* Exclude badge and button state texts so they remain color-coded */
.badge, .btn, .nav-link, .topic-item, .alert {
  /* inherit custom styled colors or keep default */
}