:root{
  --bg: #f8f9fa;
  --card: #ffffff;
  --text: #0b2545;
  --muted: #6c757d;
  --primary: #0056B3;
  --accent: #28A745;
}

[data-theme='dark']{
  --bg: #0b1220;
  --card: #0f1724;
  --text: #e6eef8;
  --muted: #9aa6b2;
  --primary: #5aa0ff;
  --accent: #3bd06b;
}

body{
  background: var(--bg);
  color: var(--text);
  transition: background .3s ease, color .3s ease;
}

.card{ background: var(--card); color: var(--text); transition: background .3s ease, color .3s ease; }
.navbar{ background: var(--primary); transition: background .3s ease; }
.btn-outline-light{ color: var(--text); border-color: rgba(255,255,255,0.2); }
.chart-card{ min-height: 320px; }


/* FADDING EFFECTS */
#add-status {
  transition: opacity 0.4s ease;
}
#add-status.show {
  opacity: 1;
}
#add-status.hide {
  opacity: 0;
}


/* ── Breadcrumbs ───────────────────────────────────────────────────── */
.breadcrumb {
  background: transparent;
  padding: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--muted);
}
.breadcrumb-item a {
  color: var(--primary);
}
.breadcrumb-item.active {
  color: var(--muted);
}

/* ── Onboarding checklist ──────────────────────────────────────────── */
.onboarding-card {
  border-left: 4px solid var(--primary);
  background: var(--card);
}
.onboarding-step {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  font-size: .875rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
[data-theme='dark'] .onboarding-step {
  border-bottom-color: rgba(255,255,255,.06);
}
.onboarding-step:last-child { border-bottom: none; }
.onboarding-step .step-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}
.onboarding-step.done   { color: var(--text); }
.onboarding-step.todo   { color: var(--muted); }
.onboarding-step .step-action {
  margin-left: auto;
  font-size: .78rem;
}

/* ── Mobile student cards with swipe-reveal ───────────────────────── */
.student-card-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: .6rem;
}
.student-card-actions {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: stretch;
  transform: translateX(100%);
  transition: transform .22s ease;
  z-index: 1;
}
.student-card-actions button,
.student-card-actions a {
  border: none;
  border-radius: 0;
  padding: 0 1.1rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.student-card-wrap.swiped .student-card-actions {
  transform: translateX(0);
}
.student-card-inner {
  position: relative;
  z-index: 2;
  background: var(--card);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 10px;
  padding: .75rem 1rem;
  transition: transform .22s ease, border-color .2s;
  touch-action: pan-y;
  cursor: grab;
}
[data-theme='dark'] .student-card-inner {
  border-color: rgba(255,255,255,.09);
}
.student-card-wrap.swiped .student-card-inner {
  transform: translateX(-148px);
  border-color: transparent;
  border-radius: 10px 0 0 10px;
}
.student-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}