:root{
  --navy-900:#0b1548;
  --navy-800:#101d5e;
  --navy-700:#16266f;
  --sidebar-hover:rgba(255,255,255,.08);
  --sidebar-active:rgba(255,255,255,.12);
  --primary:#1e3a8a;
  --primary-dark:#152a63;
  --primary-light:#eef1ff;
  --success-bg:#dcfce7;--success-text:#16a34a;
  --warning-bg:#fef3c7;--warning-text:#c2790a;
  --danger-bg:#fee2e2;--danger-text:#dc2626;
  --info-bg:#dbeafe;--info-text:#2563eb;
  --purple-bg:#f1e8ff;--purple-text:#7c3aed;
  --bg:#f6f7fb;
  --card:#ffffff;
  --border:#e6e8f0;
  --text:#111827;
  --text-sub:#6b7280;
  --text-faint:#9aa1b1;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,64,.04),0 1px 8px rgba(16,24,64,.03);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
ul{list-style:none;margin:0;padding:0;}

.app{display:flex;min-height:100vh;}

/* ---------- Sidebar ---------- */
.sidebar{
  width:260px;
  flex-shrink:0;
  background:linear-gradient(180deg,var(--navy-900) 0%,var(--navy-800) 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:26px 20px 20px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-bottom:20px;}
.brand-logo{
  width:76px;height:76px;border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--navy-900);font-size:11px;
  border:3px solid rgba(255,255,255,.25);
  text-align:center;line-height:1.1;
}
.brand h1{font-size:15px;margin:0;font-weight:700;line-height:1.3;}
.hr-line{height:1px;background:rgba(255,255,255,.15);margin:16px 0;}
.system-tag{
  text-transform:uppercase;
  font-size:10.5px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.55);
  text-align:center;
  font-weight:600;
  padding-bottom:6px;
}
.admin-pill{
  align-self:center;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  padding:3px 10px;
  border-radius:999px;
  margin-top:2px;
}
nav.nav{flex:1;margin-top:6px;}
nav.nav .group-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(255,255,255,.4);
  font-weight:700;
  margin:16px 8px 8px;
}
nav.nav .group-label:first-child{margin-top:0;}
nav.nav li a{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  border-radius:10px;
  font-size:13.5px;
  font-weight:500;
  color:rgba(255,255,255,.78);
  margin-bottom:2px;
  transition:background .15s;
}
nav.nav li a svg{width:18px;height:18px;flex-shrink:0;opacity:.9;}
nav.nav li a:hover{background:var(--sidebar-hover);color:#fff;}
nav.nav li a.active{background:var(--sidebar-active);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #6ea0ff;}

.sidebar-footer{
  display:flex;align-items:center;gap:10px;
  padding:14px 10px 4px;
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:10px;
}
.avatar-sm{
  width:34px;height:34px;border-radius:50%;
  background:#5c74d6;color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sidebar-footer .who{line-height:1.3;}
.sidebar-footer .who .name{font-size:12.5px;font-weight:700;color:#fff;}
.sidebar-footer .who .role{font-size:11px;color:rgba(255,255,255,.55);}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 32px;
}
.topbar .titles h2{margin:0;font-size:22px;font-weight:800;}
.breadcrumb{font-size:12.5px;color:var(--text-sub);margin-top:4px;}
.breadcrumb a{color:var(--text-sub);}
.breadcrumb .sep{margin:0 6px;color:var(--text-faint);}
.breadcrumb .current{color:var(--primary);font-weight:600;}
.topbar-actions{display:flex;align-items:center;gap:14px;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;
  position:relative;color:var(--text-sub);
}
.icon-btn svg{width:18px;height:18px;}
.badge-dot{
  position:absolute;top:-4px;right:-4px;
  background:#ef4444;color:#fff;font-size:10px;font-weight:700;
  min-width:17px;height:17px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  border:2px solid var(--bg);
}
.avatar-round{
  width:38px;height:38px;border-radius:50%;
  background:var(--primary);color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.admin-chip{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--border);background:#fff;
  border-radius:999px;padding:5px 12px 5px 5px;
}
.admin-chip .name-mini{font-size:12.5px;font-weight:700;}
.admin-chip .role-mini{font-size:10.5px;color:var(--text-sub);}
.admin-chip svg{width:14px;height:14px;color:var(--text-faint);}

.content{padding:0 32px 40px;flex:1;}

/* ---------- Cards / Stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px;}
.stat-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow);
}
.stat-icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.stat-icon svg{width:22px;height:22px;}
.stat-num{font-size:26px;font-weight:800;line-height:1;}
.stat-label{font-size:12.5px;font-weight:700;margin-top:6px;}
.stat-sub{font-size:11.5px;color:var(--text-sub);margin-top:3px;}
.stat-sub a{color:var(--primary);font-weight:600;}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-head{
  display:flex;align-items:center;justify-content:between;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);
}
.card-head h3{margin:0;font-size:15.5px;font-weight:800;}
.card-head p{margin:3px 0 0;font-size:12px;color:var(--text-sub);}
.card-body{padding:18px 20px;}
.link-btn{font-size:12.5px;font-weight:700;color:var(--primary);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;
  border:1px solid transparent;transition:all .15s;
}
.btn svg{width:15px;height:15px;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline{background:#fff;border-color:var(--border);color:var(--text);}
.btn-outline:hover{background:#f8f9fc;}
.btn-danger-outline{background:#fff;border-color:#fca5a5;color:var(--danger-text);}
.btn-danger-outline:hover{background:var(--danger-bg);}
.btn-danger{background:var(--danger-text);color:#fff;}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:7px;}

/* ---------- Table ---------- */
table{width:100%;border-collapse:collapse;}
thead th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text-sub);font-weight:700;padding:10px 20px;border-bottom:1px solid var(--border);
  background:#fafbfd;
}
tbody td{padding:14px 20px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#fafbff;}
.cell-title{font-weight:700;}
.cell-sub{color:var(--text-sub);font-size:12px;margin-top:2px;}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
}
.badge-success{background:var(--success-bg);color:var(--success-text);}
.badge-warning{background:var(--warning-bg);color:var(--warning-text);}
.badge-danger{background:var(--danger-bg);color:var(--danger-text);}
.badge-info{background:var(--info-bg);color:var(--info-text);}
.badge-purple{background:var(--purple-bg);color:var(--purple-text);}
.badge-gray{background:#f1f2f6;color:var(--text-sub);}

.icon-action{
  width:30px;height:30px;border-radius:7px;border:1px solid var(--border);
  background:#fff;display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-sub);margin-left:4px;
}
.icon-action svg{width:14px;height:14px;}
.icon-action:hover{background:#f4f5fa;}

/* ---------- Tabs / filter pills ---------- */
.pill-tabs{display:flex;gap:8px;margin-bottom:18px;}
.pill-tabs button{
  padding:9px 18px;border-radius:9px;border:1px solid var(--border);background:#fff;
  font-size:13px;font-weight:700;color:var(--text-sub);
}
.pill-tabs button.active{background:var(--primary);border-color:var(--primary);color:#fff;}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.search-box{
  flex:1;min-width:240px;display:flex;align-items:center;gap:10px;
  border:1px solid var(--border);background:#fff;border-radius:9px;padding:10px 14px;
}
.search-box svg{width:16px;height:16px;color:var(--text-faint);}
.search-box input{border:none;outline:none;font-size:13px;width:100%;background:transparent;}
.select{
  border:1px solid var(--border);background:#fff;border-radius:9px;padding:9px 14px;
  font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;
}

.pagination{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:12.5px;color:var(--text-sub);}
.pagination .pages{display:flex;gap:6px;}
.pagination .pages button{
  width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:#fff;font-weight:700;font-size:12.5px;color:var(--text-sub);
}
.pagination .pages button.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12.5px;font-weight:700;color:var(--text);}
.field label .req{color:var(--danger-text);}
.field input,.field select,.field textarea{
  border:1px solid var(--border);border-radius:9px;padding:10px 13px;font-size:13px;
  font-family:inherit;color:var(--text);background:#fff;outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);}
.field textarea{resize:vertical;min-height:90px;}
.toggle{
  width:42px;height:24px;border-radius:999px;background:#e5e7eb;position:relative;flex-shrink:0;border:none;
}
.toggle.on{background:var(--primary);}
.toggle::after{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.toggle.on::after{left:21px;}

.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;}
.stack{display:flex;flex-direction:column;gap:20px;}

.note-banner{
  display:flex;align-items:center;gap:10px;background:var(--info-bg);color:var(--info-text);
  border-radius:9px;padding:12px 16px;font-size:12.5px;font-weight:600;margin-top:18px;
}
.note-banner svg{width:16px;height:16px;flex-shrink:0;}

.role-badge-admin{background:#eef1ff;color:var(--primary);}
.role-badge-staff{background:#f1e8ff;color:#7c3aed;}
.role-badge-student{background:#e8f7ef;color:#159a52;}

.checkbox-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;}
.checkbox-row:last-child{border-bottom:none;}
.checkbox-row input{width:16px;height:16px;accent-color:var(--primary);}

.progress-track{width:100%;height:8px;background:#eef0f5;border-radius:99px;overflow:hidden;}
.progress-fill{height:100%;border-radius:99px;background:var(--primary);}

@media (max-width:1100px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
}

/* --- SMOOTH PAGE TRANSITIONS --- */
/* 1. Only animate the main content area so the sidebar stays frozen */
.main {
  animation: slideUpIn 0.3s ease-out forwards;
}

/* 2. The exit animation when clicking a link */
.main.fade-out {
  animation: slideDownOut 0.3s ease-in forwards !important;
}

@keyframes slideUpIn {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideDownOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(15px); }
}

/* --- NATIVE BROWSER VIEW TRANSITIONS --- */
/* 1. Enable cross-document transitions */
@view-transition {
  navigation: auto;
}

/* 2. Tell the browser to completely freeze the sidebar during page loads */
.sidebar {
  view-transition-name: frozen-sidebar;
}

/* 3. Tell the browser to animate the main content */
.main {
  view-transition-name: dynamic-content;
}
/* The Loader Animation */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Fills the screen height */
  width: 100%;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #6366f1; /* Change this hex to match your school/brand colors */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Container to keep the dropdown positioned correctly */
.admin-profile-container {
  position: relative;
  cursor: pointer;
}

/* The hidden dropdown menu */
.admin-dropdown {
  display: none; /* Hides the menu by default */
  position: absolute;
  top: 110%; /* Pops up just below the chip */
  right: 0;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  min-width: 150px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  z-index: 50;
}

/* The items inside the menu */
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
  text-decoration: none;
  color: #374151;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f3f4f6;
}

.text-danger {
  color: #dc2626;
  font-weight: bold;
}