/* ---- Role Accent Variables ---- */
body.admin { --accent: #006bb3; }
body.teacher { --accent: #28a745; }
body.student { --accent: #ffc107; }
body.parent { --accent: #17a2b8; }

/* ---- Global ---- */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
  background-color: #f9fafb;
  color: #333;
}

/* ---- Navbar ---- */
.navbar {
  background: #fff;
  box-shadow: 0px 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.navbar-brand {
  font-weight: 600;
  color: #222 !important;
}
.nav-link {
  font-weight: 500;
  color: #555 !important;
  transition: color 0.2s ease;
}
.nav-link:hover { color: var(--accent) !important; }

/* ---- Avatars ---- */
.avatar-40 { width:40px; height:40px; object-fit:cover; border-radius:50%; border:2px solid var(--accent); }
.avatar-fallback-40 {
  width:40px; height:40px; border-radius:50%; background:#eef2ff;
  display:flex; align-items:center; justify-content:center; font-weight:600;
  color: var(--accent); border:2px solid var(--accent);
}
/* 36px variant used in lists/tables */
.avatar-36 { width:36px; height:36px; object-fit:cover; border-radius:50%; border:2px solid var(--accent); }
.avatar-fallback-36 {
  width:36px; height:36px; border-radius:50%; background:#eef2ff;
  display:flex; align-items:center; justify-content:center; font-weight:600;
  color: var(--accent); border:2px solid var(--accent);
}

/* ---- Buttons ---- */
.btn { border-radius: 8px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--accent, #ff7a00, 0.25); }
.btn-primary { background-color: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background-color: color-mix(in srgb, var(--accent) 85%, black); border-color: color-mix(in srgb, var(--accent) 85%, black); }
.btn-outline-primary { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover { background-color: var(--accent); color: #fff; }

/* ---- Cards ---- */
.card { border-radius: 12px; border: 1px solid #eaeaea; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 10px 25px var(--accent, #ff7a00, 0.35); border-color: var(--accent); }

/* ---- Alerts ---- */
.alert { border-radius: 10px; border: none; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }

/* ---- Footer ---- */
footer {
  background: #fff; padding: 15px 0; text-align: center; color: #777; font-size: 14px;
  margin-top: auto; border-top: 1px solid #eee; transition: background 0.3s ease;
}
footer:hover { background: #f1f3f6; }

/* ---- Utility ---- */
.hover-glow { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.hover-glow:hover { transform: translateY(-3px); box-shadow: 0 6px 14px var(--accent, #ff7a00, 0.3); }

/* ---- Modern Table (Global) ---- */
.table-modern thead { background: linear-gradient(45deg, #1875FF, #4facfe); color: #fff; font-weight: 600; }
.table-modern thead th { border: none; padding: 12px; }
.table-modern tbody tr { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.table-modern tbody tr:hover { background:#f8faff; box-shadow:0 4px 10px rgba(0,0,0,.06); transform:translateY(-2px); }
.table-modern td { vertical-align: middle; padding:12px; border-bottom:1px solid #f1f1f1; }
.table-modern .avatar-circle { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; }

/* ---- Utilities ---- */
.slide-transition { transition: margin-left .3s ease; }
.btn-danger-alt { background:#dc3545; color:#fff; }
.btn-danger-alt:hover { background: color-mix(in srgb, #dc3545 85%, black); color:#fff; }
.max-w-180 { max-width:180px; }