/* ============================================================
   GREEN VALLEY SCHOOL — MASTER STYLESHEET
   ============================================================
   Structure:
     1.  Reset & Variables
     2.  Layout
     3.  Top Bar & Header
     4.  Page Hero & Content
     5.  Tables (generic)
     6.  Buttons & Alerts
     7.  Login Forms
     8.  Admin — Sidebar & Main
     9.  Portal Layout (Faculty/Student)
     10. Stats & Badges
     11. Result Cards
     12. LMS — Material List
     13. LMS — Assignment Cards
     14. Subject Cards & Banner
     15. Marks Table
     16. Profile
     17. Footer
     18. Home Page
     19. Admin Toolbar & Pagination
     20. Admin — Page Head, Toolbar, Modern Table
     21. Admin — Faculty Styles
     22. Admin — Dashboard
     23. Public — Principal Page
     24. Public — Admissions Page
     25. Public — Notices Page
     26. Public — Contact Page
     27. Public — Gallery
     28. Admin — Contact Messages
     29. Faculty — Timetable (Days = Rows, Periods = Columns)
     30. Responsive (General)
   ============================================================ */


/* ============================================================
   1. RESET & VARIABLES
   ============================================================ */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Segoe UI',Roboto,system-ui,sans-serif;
}
:root{
  --primary:#0b3b5c;
  --primary-light:#1b5a7a;
  --accent:#f9a826;
  --bg-light:#f8fbfe;
  --text-dark:#1e2b37;
  --text-muted:#4a5f6e;
  --white:#fff;
  --shadow:0 12px 24px -8px rgba(0,20,30,.12);
  --radius:16px;
  --radius-sm:10px;
}
body{
  background:var(--bg-light);
  color:var(--text-dark);
  line-height:1.5;
}
a{
  text-decoration:none;
  color:inherit;
}
/* ============================================================
   UNIVERSAL BUTTON RESET
   Removes browser-default bevel styling from <button> elements
   ============================================================ */
button,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  outline:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  padding:0;
  margin:0;
  text-align:center;
  text-decoration:none;
  line-height:inherit;
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible{
  outline:2px solid #f9a826;
  outline-offset:2px;
}
button:disabled{
  cursor:not-allowed;
  opacity:.55;
}

/* ============================================================
   2. LAYOUT
   ============================================================ */
.container{
  max-width:1300px;
  margin:0 auto;
  padding:0 24px;
}


/* ============================================================
   3. TOP BAR & HEADER
   ============================================================ */
.top-bar{
  background:var(--primary);
  color:#fff;
  padding:8px 0;
  font-size:.9rem;
}
.top-bar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.top-bar a{
  margin-left:20px;
  font-weight:500;
  opacity:.9;
}
.top-bar a:hover{ color:var(--accent); }

.main-header{
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.03);
  padding:12px 0;
  position:sticky;
  top:0;
  z-index:100;
}
.main-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.logo-area{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo-icon{
  background:var(--primary);
  color:#fff;
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  font-weight:700;
}
.logo-text h1{
  font-size:1.5rem;
  color:var(--primary);
}
.logo-text span{
  font-size:.75rem;
  color:var(--text-muted);
  letter-spacing:1px;
}
.nav-menu{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.nav-menu a{
  padding:6px 12px;
  border-radius:30px;
  font-weight:500;
  font-size:.85rem;
  transition:.2s;
}
.nav-menu a:hover,
.nav-menu a.active{
  background:var(--primary);
  color:#fff;
}


/* ============================================================
   4. PAGE HERO & CONTENT
   ============================================================ */
.page-hero{
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;
  padding:60px 24px;
  text-align:center;
  border-radius:0 0 var(--radius) var(--radius);
  margin-bottom:30px;
  background-size:cover;
  background-position:center;
}
.page-hero h1{
  font-size:2.2rem;
  margin-bottom:8px;
}
.page-content{
  background:#fff;
  border-radius:var(--radius);
  padding:40px;
  box-shadow:var(--shadow);
}
.rich-content{ line-height:1.7; }
.section-block{
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid #eee;
}


/* ============================================================
   5. TABLES (generic)
   ============================================================ */
.data-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:var(--radius-sm);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.data-table th,
.data-table td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid #eef;
  font-size:.92rem;
}
.data-table th{
  background:#e3f0f9;
  color:var(--primary);
}
.data-table tfoot th{ background:#fff7e6; }


/* ============================================================
   6. BUTTONS & ALERTS
   ============================================================ */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 20px;
  background:var(--primary) !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  font-size:.875rem;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s, box-shadow .15s, transform .1s;
  box-shadow:0 4px 10px -3px rgba(11,59,92,.25);
  -webkit-appearance:none;
  appearance:none;
  text-decoration:none;
  white-space:nowrap;
  line-height:1.2;
}
.btn-primary:hover{
  background:var(--primary-light) !important;
  box-shadow:0 6px 14px -3px rgba(11,59,92,.35);
  transform:translateY(-1px);
}
.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 2px 6px -2px rgba(11,59,92,.35);
}
.btn-primary i{ font-size:.85rem; }

/* ============================================================
   7. LOGIN FORMS
   ============================================================ */
.login-form{
  max-width:400px;
  margin:60px auto;
  background:#fff;
  padding:30px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.login-form h2{
  color:var(--primary);
  margin-bottom:20px;
}
.login-form label{
  display:block;
  margin-bottom:16px;
  font-weight:600;
}
.login-form input{
  width:100%;
  padding:10px;
  border:1px solid #ccd;
  border-radius:8px;
  margin-top:4px;
  font-size:1rem;
}
.login-form button{ width:100%; }


/* ============================================================
   8. ADMIN — SIDEBAR & MAIN
   ============================================================ */
/* ============================================================
   8. ADMIN — SIDEBAR & MAIN (Upgraded)
   ============================================================ */

.admin-body{
  display:flex;
  min-height:100vh;
  background:#f0f4f8;
}

/* ---------- Sidebar shell ---------- */
.admin-sidebar{
  width:260px;
  background:linear-gradient(180deg,#0b3b5c 0%,#082c44 100%);
  color:#fff;
  padding:0;
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  transition:width .22s ease;
  border-right:1px solid rgba(0,0,0,.05);
}
.admin-sidebar.collapsed{ width:72px; }
.admin-sidebar.collapsed .admin-brand-text,
.admin-sidebar.collapsed .admin-search,
.admin-sidebar.collapsed .nav-section,
.admin-sidebar.collapsed .nav-badge,
.admin-sidebar.collapsed .au-info,
.admin-sidebar.collapsed .admin-nav a span:not(.nav-badge){ display:none; }
.admin-sidebar.collapsed .admin-nav a{ justify-content:center; padding:12px 0; }
.admin-sidebar.collapsed .admin-nav a i{ margin:0; }
.admin-sidebar.collapsed .admin-brand{ justify-content:center; padding:18px 12px; }
.admin-sidebar.collapsed .admin-user{ justify-content:center; padding:14px 8px; }

/* ---------- Brand ---------- */
.admin-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
  position:relative;
}
.admin-brand-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  background:linear-gradient(135deg,#f9a826,#ff8f00);
  color:#0b3b5c;
  font-weight:800;
  font-size:1.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 14px -4px rgba(249,168,38,.5);
  flex-shrink:0;
}
.admin-brand-text{
  flex:1;
  min-width:0;
  line-height:1.2;
}
.admin-brand-text strong{
  display:block;
  font-size:.92rem;
  letter-spacing:-0.2px;
}
.admin-brand-text span{
  font-size:.65rem;
  opacity:.55;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.admin-brand-collapse{
  width:26px;
  height:26px;
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.7);
  border:none;
  cursor:pointer;
  font-size:.65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
  flex-shrink:0;
}
.admin-brand-collapse:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
}

/* ---------- Search ---------- */
.admin-search{
  position:relative;
  margin:12px 14px;
  flex-shrink:0;
}
.admin-search i{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.45);
  font-size:.78rem;
  pointer-events:none;
}
.admin-search input{
  width:100%;
  padding:9px 34px 9px 32px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  color:#fff;
  font-size:.8rem;
  font-family:inherit;
  transition:.15s;
}
.admin-search input::placeholder{ color:rgba(255,255,255,.4); }
.admin-search input:focus{
  outline:none;
  background:rgba(255,255,255,.12);
  border-color:rgba(249,168,38,.4);
}
.admin-search kbd{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.6);
  font-size:.65rem;
  padding:1px 6px;
  border-radius:4px;
  font-family:inherit;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.08);
}

/* ---------- Nav ---------- */
.admin-nav{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:4px 0 12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
}
.admin-nav::-webkit-scrollbar{ width:5px; }
.admin-nav::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:3px;
}
.admin-nav::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); }

/* Section headers */
.nav-section{
  padding:14px 20px 6px;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:rgba(255,255,255,.35);
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
  user-select:none;
}
.nav-count{
  background:rgba(249,168,38,.15);
  color:#f9a826;
  padding:1px 7px;
  border-radius:10px;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.3px;
}

/* Nav links */
.admin-nav a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 18px;
  margin:1px 8px;
  border-radius:9px;
  color:rgba(255,255,255,.72);
  font-size:.83rem;
  font-weight:500;
  transition:all .15s ease;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
.admin-nav a:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}
.admin-nav a.active{
  background:linear-gradient(90deg,rgba(249,168,38,.18),rgba(249,168,38,.05));
  color:#fff;
  font-weight:600;
}
.admin-nav a.active::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:#f9a826;
}
.admin-nav a i{
  width:20px;
  text-align:center;
  font-size:.9rem;
  opacity:.75;
  flex-shrink:0;
  transition:.15s;
}
.admin-nav a.active i{
  opacity:1;
  color:#f9a826;
}
.admin-nav a:hover i{ opacity:1; }
.admin-nav a span:not(.nav-badge){
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Badges */
.nav-badge{
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.9);
  padding:1px 8px;
  border-radius:20px;
  font-size:.65rem;
  font-weight:700;
  min-width:22px;
  text-align:center;
  flex-shrink:0;
  line-height:1.6;
}
.admin-nav a.active .nav-badge{
  background:#f9a826;
  color:#0b3b5c;
}
.nav-badge.accent{
  background:rgba(249,168,38,.2);
  color:#f9a826;
}
.nav-badge.danger{
  background:#dc2626;
  color:#fff;
}

/* ---------- User footer ---------- */
.admin-user{
  border-top:1px solid rgba(255,255,255,.08);
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.au-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  background:linear-gradient(135deg,#f9a826,#ff8f00);
  color:#0b3b5c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:.85rem;
  flex-shrink:0;
}
.au-info{
  flex:1;
  min-width:0;
  line-height:1.2;
}
.au-info strong{
  display:block;
  font-size:.8rem;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.au-info span{
  font-size:.65rem;
  opacity:.5;
  letter-spacing:.4px;
}
.au-logout{
  width:30px;
  height:30px;
  border-radius:8px;
  background:rgba(255,80,80,.12);
  color:#ff8f8f;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  transition:.15s;
  flex-shrink:0;
}
.au-logout:hover{
  background:#dc2626;
  color:#fff;
}

/* ---------- Main area ---------- */
.admin-main{
  flex:1;
  padding:32px 36px;
  min-width:0;
  background:#f0f4f8;
  transition:padding .22s ease;
}
.admin-main h1{
  color:var(--primary);
  font-size:1.9rem;
  margin-bottom:8px;
  letter-spacing:-0.5px;
}
.admin-main h2{
  color:var(--primary);
  font-size:1.2rem;
  margin:26px 0 14px;
}

/* ---------- Mobile toggle ---------- */
.admin-mobile-toggle{
  display:none;
  position:fixed;
  top:14px;
  left:14px;
  z-index:1000;
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  border:none;
  font-size:1.2rem;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .admin-sidebar{
    position:fixed;
    left:-280px;
    top:0;
    z-index:999;
    transition:left .25s ease;
    width:260px;
  }
  .admin-sidebar.open{ left:0; }
  .admin-sidebar.collapsed{ width:260px; }
  .admin-sidebar.collapsed .admin-brand-text,
  .admin-sidebar.collapsed .admin-search,
  .admin-sidebar.collapsed .nav-section,
  .admin-sidebar.collapsed .au-info{ display:block; }
  .admin-sidebar.collapsed .admin-nav a span:not(.nav-badge){ display:inline; }
  .admin-main{ padding:20px 18px; padding-top:70px; }
  .admin-mobile-toggle{ display:flex; align-items:center; justify-content:center; }
}


/* ============================================================
   9. PORTAL LAYOUT (Faculty/Student)
   ============================================================ */
.student-body{
  display:flex;
  min-height:100vh;
  background:#f0f4f8;
}
.student-sidebar{
  width:260px;
  background:var(--primary);
  color:#fff;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.faculty-sidebar{ background:#1e2b37; }
.student-badge{
  text-align:center;
  padding:30px 20px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.student-badge .avatar{
  width:70px;
  height:70px;
  background:var(--accent);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  font-weight:700;
  color:var(--primary);
  margin-bottom:10px;
}
.student-badge h3{ font-size:1.1rem; }
.student-badge p{ font-size:.85rem; opacity:.85; }
.student-sidebar nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 24px;
  color:rgba(255,255,255,.85);
  font-size:.9rem;
  border-left:3px solid transparent;
  transition:.2s;
}
.student-sidebar nav a:hover,
.student-sidebar nav a.active{
  background:var(--primary-light);
  color:#fff;
  border-left-color:var(--accent);
}
.student-sidebar nav a i{
  width:20px;
  text-align:center;
}
.student-main{
  flex:1;
  padding:30px 40px;
}
.student-main h1{
  color:var(--primary);
  margin-bottom:16px;
}


/* ============================================================
   10. STATS & BADGES
   ============================================================ */
.stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;
  margin-bottom:24px;
}
.stat-box{
  background:#fff;
  padding:22px;
  border-radius:var(--radius);
  text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  border-top:4px solid var(--primary);
}
.stat-box i{
  font-size:1.8rem;
  color:var(--accent);
  margin-bottom:10px;
}
.stat-box h3{
  color:var(--primary);
  font-size:1.6rem;
  margin-bottom:4px;
}
.stat-box p{
  color:var(--text-muted);
  font-size:.9rem;
}
.stat-box.green{ border-top-color:#28a745; }
.stat-box.green i{ color:#28a745; }
.stat-box.red{ border-top-color:#dc3545; }
.stat-box.red i{ color:#dc3545; }
.stat-box.yellow{ border-top-color:#ffc107; }
.stat-box.yellow i{ color:#ffc107; }
.stat-box.blue{ border-top-color:#17a2b8; }
.stat-box.blue i{ color:#17a2b8; }

.pill{
  display:inline-block;
  padding:4px 12px;
  border-radius:20px;
  font-size:.8rem;
  font-weight:600;
  text-transform:capitalize;
}
.pill.present,
.pill.paid{
  background:#d4edda;
  color:#155724;
}
.pill.absent{
  background:#f8d7da;
  color:#721c24;
}
.pill.late,
.pill.partial{
  background:#fff3cd;
  color:#856404;
}
.pill.leave,
.pill.pending{
  background:#d1ecf1;
  color:#0c5460;
}
.grade{
  display:inline-block;
  padding:3px 10px;
  border-radius:12px;
  background:#e6ffed;
  color:#175c2c;
  font-weight:600;
}


/* ============================================================
   11. RESULT CARDS
   ============================================================ */
.result-card{
  background:#fff;
  padding:24px;
  border-radius:var(--radius);
  margin-bottom:24px;
  box-shadow:var(--shadow);
}
.result-card h2{
  color:var(--primary);
  margin-bottom:14px;
  font-size:1.3rem;
}


/* ============================================================
   12. LMS — MATERIAL LIST
   ============================================================ */
.material-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.material-item{
  display:flex;
  gap:16px;
  align-items:center;
  background:#fff;
  padding:16px 20px;
  border-radius:var(--radius);
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  border-left:4px solid var(--primary);
  flex-wrap:wrap;
}
.mat-icon{
  width:52px;
  height:52px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  color:#fff;
  flex-shrink:0;
  background:var(--primary);
}
.mat-icon.pdf{ background:#d32f2f; }
.mat-icon.ppt{ background:#d24726; }
.mat-icon.video{ background:#7b1fa2; }
.mat-icon.link{ background:#0288d1; }
.mat-icon.notes{ background:#388e3c; }
.mat-info{ flex:1; min-width:200px; }
.mat-info h3{ color:var(--primary); margin-bottom:4px; }
.mat-info p{ color:var(--text-muted); font-size:.9rem; margin-bottom:4px; }
.mat-info small{ color:#888; font-size:.8rem; }
.mat-actions{ display:flex; gap:8px; flex-wrap:wrap; }


/* ============================================================
   13. LMS — ASSIGNMENT CARDS
   ============================================================ */
.assignment-card{
  background:#fff;
  border-radius:var(--radius);
  padding:22px 24px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  margin-bottom:18px;
  border-left:5px solid var(--accent);
}
.assignment-card.submitted{ border-left-color:#28a745; }
.assignment-card.overdue{
  border-left-color:#dc3545;
  opacity:.85;
}
.assign-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}
.assign-head h3{
  color:var(--primary);
  font-size:1.2rem;
  margin-bottom:6px;
}
.assign-head .meta{
  font-size:.88rem;
  color:var(--text-muted);
}
.assign-desc{ margin:14px 0; }
.assign-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  border-top:1px solid #eef;
  padding-top:14px;
}
.assign-footer small{
  color:var(--text-muted);
  font-size:.85rem;
}
.assign-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.inline-upload{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.inline-upload input[type=file]{
  font-size:.82rem;
  max-width:200px;
}
.feedback-box{
  margin-top:14px;
  padding:12px 16px;
  background:#e6ffed;
  color:#175c2c;
  border-radius:var(--radius-sm);
  border-left:4px solid #28a745;
  font-size:.92rem;
}
.inline-grade{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.inline-grade input{
  padding:6px 8px;
  border:1px solid #ccd;
  border-radius:8px;
}
.inline-grade input[type=number]{ width:90px; }


/* ============================================================
   14. SUBJECT CARDS & BANNER
   ============================================================ */
.subject-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;
}
.subject-card{
  background:#fff;
  padding:20px;
  border-radius:var(--radius);
  border-left:5px solid var(--primary);
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  transition:.2s;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.subject-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.subject-card h3{
  color:var(--primary);
  font-size:1.1rem;
}
.subject-card p{
  font-size:.9rem;
  color:var(--text-muted);
}
.subject-card .btn-small{
  align-self:flex-start;
  margin-top:auto;
}
.subject-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;
  padding:24px;
  border-radius:var(--radius);
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:16px;
}
.subject-banner .btn-outline{
  border-color:#fff;
  color:#fff;
}


/* ============================================================
   15. MARKS TABLE
   ============================================================ */
.marks-table input[type=number]{
  width:110px;
  padding:8px;
  border:2px solid #d0dae5;
  border-radius:8px;
  font-size:1rem;
  font-weight:600;
  text-align:center;
}
.marks-table input[type=text]{
  padding:6px 10px;
  border:1px solid #d0dae5;
  border-radius:8px;
  width:100%;
}
.grade-preview{
  display:inline-block;
  min-width:34px;
  padding:4px 8px;
  background:#e3f0f9;
  color:var(--primary);
  border-radius:8px;
  font-weight:700;
  font-size:.9rem;
}
.exam-meta{
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
  background:#fff7e6;
  padding:14px 20px;
  border-radius:var(--radius-sm);
  margin-bottom:16px;
}
.save-bar{
  display:flex;
  gap:20px;
  align-items:center;
  margin-top:20px;
  padding:16px;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  flex-wrap:wrap;
}
.save-note{
  color:var(--text-muted);
  font-size:.9rem;
}


/* ============================================================
   16. PROFILE
   ============================================================ */
.profile-card{
  background:#fff;
  padding:30px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.profile-avatar{
  width:90px;
  height:90px;
  background:var(--primary);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
  font-weight:700;
  margin:0 auto 24px;
}


/* ============================================================
   17. FOOTER
   ============================================================ */
.footer{
  background:var(--primary);
  color:#fff;
  padding:40px 0 20px;
  margin-top:40px;
  border-radius:40px 40px 0 0;
}
.footer .container{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:center;
}
.footer-links a{
  opacity:.8;
  font-size:.9rem;
}
.footer-links a:hover{
  opacity:1;
  color:var(--accent);
}
.copyright{
  text-align:center;
  opacity:.6;
  font-size:.85rem;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:20px;
}


/* ============================================================
   18. HOME PAGE
   ============================================================ */

/* --- 18.1 HERO --- */
.home-hero{
  position:relative;
  padding:80px 0 140px;
  overflow:hidden;
  background:linear-gradient(135deg,#0b3b5c 0%,#1b5a7a 100%);
  color:#fff;
  margin:-24px -24px 0;
  border-radius:0 0 40px 40px;
}
.home-hero .hero-bg{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 20%,rgba(249,168,38,.18) 0,transparent 45%),
             radial-gradient(circle at 80% 80%,rgba(255,255,255,.08) 0,transparent 40%);
  pointer-events:none;
}
.home-hero .hero-overlay{
  position:absolute;
  inset:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="2" cy="2" r="1" fill="%23ffffff" opacity="0.06"/></svg>');
}
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:center;
}
.hero-text .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(249,168,38,.18);
  color:#f9a826;
  padding:8px 18px;
  border-radius:50px;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:20px;
  border:1px solid rgba(249,168,38,.35);
}
.hero-text h1{
  font-size:3.4rem;
  line-height:1.1;
  letter-spacing:-1.5px;
  margin-bottom:20px;
  font-weight:800;
}
.hero-text .accent{ color:#f9a826; }
.hero-text p{
  font-size:1.1rem;
  opacity:.9;
  margin-bottom:32px;
  max-width:540px;
}
.hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:36px;
}
.btn-glass{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.25);
  backdrop-filter:blur(10px);
}
.btn-glass:hover{ background:rgba(255,255,255,.22); }
.hero-stats{
  display:flex;
  gap:32px;
  flex-wrap:wrap;
}
.hero-stats div{
  display:flex;
  flex-direction:column;
}
.hero-stats strong{
  font-size:1.8rem;
  color:#f9a826;
  line-height:1;
}
.hero-stats span{
  font-size:.85rem;
  opacity:.75;
  margin-top:4px;
}
.hero-visual{
  position:relative;
  height:440px;
}
.hero-image{
  position:absolute;
  inset:0;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
  border:4px solid rgba(255,255,255,.1);
}
.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-card{
  position:absolute;
  z-index:3;
  background:#fff;
  color:var(--primary);
  padding:16px 20px;
  border-radius:16px;
  box-shadow:0 20px 40px -12px rgba(0,0,0,.3);
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:170px;
  animation:floaty 4s ease-in-out infinite;
}
.hero-card i{
  font-size:1.6rem;
  color:#f9a826;
  margin-bottom:4px;
}
.hero-card h4{ font-size:1rem; }
.hero-card p{ font-size:.8rem; color:var(--text-muted); }
.hero-card-1{ top:20px; left:-30px; animation-delay:0s; }
.hero-card-2{ bottom:30px; right:-30px; animation-delay:1.5s; }
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.hero-wave{
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  z-index:1;
}
.hero-wave svg{
  display:block;
  width:100%;
  height:80px;
}

/* --- 18.2 QUICK STRIP --- */
.quick-strip{
  margin:-40px 0 40px;
  position:relative;
  z-index:5;
}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.quick-tile{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  padding:18px 22px;
  border-radius:16px;
  box-shadow:0 12px 24px -12px rgba(11,59,92,.2);
  transition:.25s;
  border-left:4px solid #f9a826;
}
.quick-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 30px -14px rgba(11,59,92,.3);
}
.quick-tile i{
  font-size:1.8rem;
  color:var(--primary);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e3f0f9;
  border-radius:12px;
}
.quick-tile strong{
  display:block;
  color:var(--primary);
  font-size:.95rem;
}
.quick-tile span{
  font-size:.78rem;
  color:var(--text-muted);
}

/* --- 18.3 SECTION HEADS --- */
.home-section{ padding:60px 0; }
.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 44px;
}
.section-head.left{
  text-align:left;
  margin:0 0 24px;
}
.section-head .eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  color:#f9a826;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.section-head h2{
  font-size:2.2rem;
  color:var(--primary);
  letter-spacing:-1px;
  line-height:1.2;
}
.section-head h2 .accent{ color:#f9a826; }
.section-head p{
  color:var(--text-muted);
  margin-top:10px;
}

/* --- 18.4 FEATURES --- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.feature-card{
  background:#fff;
  padding:30px 26px;
  border-radius:18px;
  box-shadow:0 6px 20px -8px rgba(11,59,92,.08);
  border:1px solid rgba(11,59,92,.05);
  transition:.25s;
  position:relative;
  overflow:hidden;
}
.feature-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#0b3b5c,#f9a826);
  transform:scaleX(0);
  transform-origin:left;
  transition:.35s;
}
.feature-card:hover::before{ transform:scaleX(1); }
.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -16px rgba(11,59,92,.18);
}
.feature-icon{
  width:56px;
  height:56px;
  background:linear-gradient(135deg,#e3f0f9,#fff7e6);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  color:var(--primary);
  margin-bottom:18px;
}
.feature-card h3{
  color:var(--primary);
  font-size:1.15rem;
  margin-bottom:8px;
}
.feature-card p{
  color:var(--text-muted);
  font-size:.92rem;
}

/* --- 18.5 STATS BANNER --- */
.stats-banner{
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  padding:50px 0;
  color:#fff;
  border-radius:24px;
  margin:40px 24px;
  position:relative;
  overflow:hidden;
}
.stats-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 50%,rgba(249,168,38,.15) 0,transparent 40%),
             radial-gradient(circle at 85% 50%,rgba(255,255,255,.06) 0,transparent 40%);
}
.stats-banner-inner{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:24px;
  text-align:center;
}
.stats-banner-inner > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.stats-banner-inner i{
  font-size:2rem;
  color:#f9a826;
  margin-bottom:4px;
}
.stats-banner-inner strong{
  font-size:2.4rem;
  font-weight:800;
  line-height:1;
}
.stats-banner-inner span{
  font-size:.88rem;
  opacity:.8;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* --- 18.6 ABOUT --- */
.about-section{
  background:#fff;
  border-radius:32px;
  margin:20px 24px;
  padding:70px 40px;
}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.about-visual{
  position:relative;
  height:460px;
}
.about-img-1{
  position:absolute;
  top:0;
  left:0;
  width:75%;
  height:75%;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.2);
}
.about-img-2{
  position:absolute;
  bottom:0;
  right:0;
  width:55%;
  height:55%;
  object-fit:cover;
  border-radius:20px;
  border:6px solid #fff;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.25);
}
.about-badge{
  position:absolute;
  bottom:40px;
  left:-10px;
  z-index:2;
  background:#f9a826;
  color:var(--primary);
  padding:18px 22px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 20px 40px -12px rgba(249,168,38,.5);
}
.about-badge strong{
  display:block;
  font-size:2rem;
  line-height:1;
  font-weight:800;
}
.about-badge span{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:1px;
}
.about-text h2{
  font-size:2.1rem;
  color:var(--primary);
  margin:10px 0 18px;
  letter-spacing:-1px;
  line-height:1.2;
}
.about-text h2 .accent{ color:#f9a826; }
.about-text p{
  color:var(--text-muted);
  margin-bottom:20px;
}
.check-list{
  list-style:none;
  margin-bottom:26px;
}
.check-list li{
  display:flex;
  gap:10px;
  padding:8px 0;
  color:var(--text-dark);
  font-size:.95rem;
}
.check-list i{
  color:#28a745;
  margin-top:3px;
}

/* --- 18.7 COURSES --- */
.courses-section{
  background:linear-gradient(180deg,#f8fbfe,#eef6fc);
  border-radius:32px;
  margin:20px 24px;
}
.course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px;
}
.course-card{
  background:#fff;
  padding:28px 24px;
  border-radius:20px;
  box-shadow:0 6px 20px -8px rgba(11,59,92,.08);
  transition:.3s;
  position:relative;
  overflow:hidden;
  animation:fadeUp .6s ease backwards;
  animation-delay:var(--delay);
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}
.course-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 40px -16px rgba(11,59,92,.2);
}
.course-tag{
  position:absolute;
  top:16px;
  right:16px;
  background:#e3f0f9;
  color:var(--primary);
  padding:4px 12px;
  border-radius:20px;
  font-size:.72rem;
  font-weight:700;
}
.course-icon{
  width:58px;
  height:58px;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#f9a826;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  margin-bottom:18px;
}
.course-card h3{
  color:var(--primary);
  font-size:1.15rem;
  margin-bottom:6px;
}
.course-card p{
  color:var(--text-muted);
  font-size:.88rem;
  margin-bottom:14px;
}
.course-link{
  color:#f9a826;
  font-weight:700;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:.2s;
}
.course-link:hover{ gap:10px; }
.center-btn{
  text-align:center;
  margin-top:36px;
}

/* --- 18.8 FACULTY --- */
.faculty-grid-home{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}
.faculty-card-home{
  background:#fff;
  padding:30px 20px;
  text-align:center;
  border-radius:20px;
  box-shadow:0 6px 20px -8px rgba(11,59,92,.08);
  transition:.3s;
  border:1px solid rgba(11,59,92,.04);
}
.faculty-card-home:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -16px rgba(11,59,92,.2);
}
.faculty-avatar{
  width:88px;
  height:88px;
  margin:0 auto 16px;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#f9a826;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.2rem;
  font-weight:700;
}
.faculty-card-home h3{
  color:var(--primary);
  font-size:1.1rem;
  margin-bottom:4px;
}
.fac-role{
  color:#f9a826;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:4px;
}
.fac-qual{
  color:var(--text-muted);
  font-size:.82rem;
  margin-bottom:14px;
}
.fac-social{
  display:flex;
  gap:10px;
  justify-content:center;
}
.fac-social a{
  width:34px;
  height:34px;
  background:#e3f0f9;
  color:var(--primary);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  transition:.2s;
}
.fac-social a:hover{
  background:var(--primary);
  color:#fff;
}

/* --- 18.9 NOTICES & EVENTS --- */
.notice-section{
  background:#fff;
  border-radius:32px;
  margin:20px 24px;
}
.two-col-home{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
}
.notice-list,
.event-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.notice-card{
  display:flex;
  gap:16px;
  align-items:center;
  background:#f8fbfe;
  padding:18px;
  border-radius:14px;
  transition:.25s;
  border-left:4px solid #f9a826;
}
.notice-card:hover{
  background:#fff;
  box-shadow:0 12px 24px -10px rgba(11,59,92,.15);
  transform:translateX(4px);
}
.notice-date{
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#fff;
  min-width:56px;
  height:56px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:700;
  line-height:1;
}
.notice-date span{ font-size:1.3rem; }
.notice-date small{
  font-size:.65rem;
  text-transform:uppercase;
  opacity:.85;
  margin-top:2px;
}
.notice-body{ flex:1; }
.notice-body h4{
  color:var(--primary);
  font-size:.98rem;
  margin-bottom:4px;
}
.notice-body p{
  color:var(--text-muted);
  font-size:.85rem;
}
.notice-arrow{
  width:34px;
  height:34px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  transition:.25s;
}
.notice-arrow:hover{
  background:var(--primary);
  color:#fff;
}
.event-card{
  display:flex;
  gap:16px;
  align-items:center;
  background:#f8fbfe;
  padding:18px;
  border-radius:14px;
  transition:.25s;
  border-left:4px solid #0b3b5c;
}
.event-card:hover{
  background:#fff;
  box-shadow:0 12px 24px -10px rgba(11,59,92,.15);
  transform:translateX(4px);
}
.event-date{
  background:#f9a826;
  color:var(--primary);
  min-width:56px;
  height:56px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:700;
  line-height:1;
}
.event-date span{ font-size:1.3rem; }
.event-date small{
  font-size:.65rem;
  text-transform:uppercase;
  margin-top:2px;
}
.event-card h4{
  color:var(--primary);
  font-size:.98rem;
  margin-bottom:4px;
}
.event-card p{
  color:var(--text-muted);
  font-size:.85rem;
}

/* --- 18.10 TESTIMONIALS --- */
.testimonial-section{
  background:linear-gradient(180deg,#f8fbfe,#eef6fc);
  border-radius:32px;
  margin:20px 24px;
}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.testimonial-card{
  background:#fff;
  padding:30px 26px;
  border-radius:20px;
  box-shadow:0 6px 20px -8px rgba(11,59,92,.08);
  position:relative;
  transition:.25s;
}
.testimonial-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -16px rgba(11,59,92,.2);
}
.testimonial-card > i{
  color:#f9a826;
  font-size:1.8rem;
  margin-bottom:14px;
  opacity:.7;
}
.testimonial-card p{
  color:var(--text-dark);
  font-size:.95rem;
  margin-bottom:20px;
  font-style:italic;
}
.t-author{
  display:flex;
  gap:12px;
  align-items:center;
}
.t-avatar{
  width:44px;
  height:44px;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#f9a826;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
.t-author strong{
  display:block;
  color:var(--primary);
  font-size:.92rem;
}
.t-author small{
  color:var(--text-muted);
  font-size:.78rem;
}

/* --- 18.11 CTA --- */
.cta-section{ padding:60px 24px; }
.cta-inner{
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#fff;
  border-radius:24px;
  padding:50px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.cta-inner::before{
  content:"";
  position:absolute;
  top:-50%;
  right:-10%;
  width:400px;
  height:400px;
  background:radial-gradient(circle,rgba(249,168,38,.25) 0,transparent 70%);
}
.cta-inner > div{
  position:relative;
  z-index:2;
}
.cta-inner h2{
  font-size:2rem;
  margin-bottom:8px;
  letter-spacing:-1px;
}
.cta-inner p{ opacity:.85; }
.cta-buttons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* --- 18.12 CONTACT STRIP --- */
.contact-strip{ padding:40px 0 80px; }
.contact-strip-inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  background:#fff;
  padding:30px;
  border-radius:20px;
  box-shadow:0 12px 32px -16px rgba(11,59,92,.15);
}
.cs-item{
  display:flex;
  gap:14px;
  align-items:center;
}
.cs-item i{
  width:48px;
  height:48px;
  background:#e3f0f9;
  color:var(--primary);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
}
.cs-item strong{
  display:block;
  color:var(--primary);
  font-size:.9rem;
}
.cs-item span{
  color:var(--text-muted);
  font-size:.82rem;
}


/* ============================================================
   19. ADMIN TOOLBAR & PAGINATION
   ============================================================ */
.students-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  background:#fff;
  padding:14px 18px;
  border-radius:12px;
  border:1px solid #e6edf3;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  margin-bottom:16px;
}
.tb-left,
.tb-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.tb-select{
  padding:9px 32px 9px 14px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.875rem;
  font-family:inherit;
  background:#fbfcfd url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238797a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
  background-size:12px;
  color:#1e2b37;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:.15s;
}
.tb-select:hover{ border-color:#b8c5d1; }
.tb-select:focus{
  outline:none;
  border-color:#0b3b5c;
  background-color:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}
.tb-clear{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:9px;
  color:#6b7a88;
  font-size:.82rem;
  font-weight:600;
  background:#f4f7fa;
  transition:.15s;
}
.tb-clear:hover{
  background:#fee2e2;
  color:#b91c1c;
}
.tb-count{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  color:#1e2b37;
  font-weight:600;
  padding:8px 14px;
  background:#f4f7fa;
  border-radius:9px;
}
.tb-count i{
  color:#f9a826;
  font-size:.9rem;
}
.tb-count span{
  color:#6b7a88;
  font-weight:500;
}
.btn-sm{
  padding:9px 16px;
  font-size:.85rem;
  border-radius:9px;
}

.table-info-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 4px 14px;
  font-size:.85rem;
  color:#6b7a88;
}
.tib-left strong{
  color:#1e2b37;
  font-weight:600;
}
.tib-chip{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:3px 10px;
  background:#eef4f9;
  color:#0b3b5c;
  border-radius:20px;
  font-size:.78rem;
  font-weight:600;
}

.pagination{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  margin-top:20px;
  padding:14px 20px;
  background:#fff;
  border-radius:12px;
  border:1px solid #e6edf3;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.pg-status{
  font-size:.85rem;
  color:#6b7a88;
}
.pg-status strong{
  color:#0b3b5c;
  font-weight:700;
}
.pg-of{
  margin:0 2px;
  opacity:.7;
}
.pg-nav{
  display:flex;
  align-items:center;
  gap:4px;
}
.pg-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:9px;
  font-size:.85rem;
  font-weight:600;
  color:#0b3b5c;
  background:#f4f7fa;
  border:1px solid transparent;
  transition:.15s;
  white-space:nowrap;
}
.pg-btn:hover{
  background:#0b3b5c;
  color:#fff;
  border-color:#0b3b5c;
}
.pg-btn i{ font-size:.75rem; }
.pg-btn.disabled{
  opacity:.35;
  pointer-events:none;
  cursor:not-allowed;
}
.pg-dots{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:38px;
  color:#9aa8b4;
  font-weight:700;
  font-size:.9rem;
  letter-spacing:2px;
}
.pg-jump{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:6px;
}
.pg-jump input[type="number"]{
  width:60px;
  padding:8px 10px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.85rem;
  font-family:inherit;
  text-align:center;
  background:#fbfcfd;
  color:#1e2b37;
  font-weight:600;
  transition:.15s;
  -moz-appearance:textfield;
}
.pg-jump input[type="number"]::-webkit-outer-spin-button,
.pg-jump input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.pg-jump input[type="number"]:focus{
  outline:none;
  border-color:#0b3b5c;
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}
.pg-go,
.pager-jump button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  background:#0b3b5c !important;
  color:#fff !important;
  border:none !important;
  border-radius:9px !important;
  font-size:.85rem;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:.15s;
  -webkit-appearance:none;
  appearance:none;
  line-height:1.2;
}
.pg-go:hover,
.pager-jump button:hover{ background:#1b5a7a !important; }
.pg-go:active{ transform:translateY(1px); }


/* ============================================================
   20. ADMIN — PAGE HEAD, TOOLBAR, MODERN TABLE, MODAL
   ============================================================ */
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.ph-left h1{
  color:var(--primary);
  font-size:1.75rem;
  font-weight:700;
  letter-spacing:-0.6px;
  margin-bottom:4px;
}
.ph-sub{
  color:#6b7a88;
  font-size:.9rem;
}
.ph-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Buttons */
.btn-soft{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  background:#fff !important;
  color:var(--primary) !important;
  border:1px solid #d5dee5 !important;
  border-radius:10px !important;
  font-size:.875rem;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:all .15s;
  -webkit-appearance:none;
  appearance:none;
  text-decoration:none;
  white-space:nowrap;
  line-height:1.2;
}
.btn-soft:hover{
  border-color:var(--primary) !important;
  background:#f4f7fa !important;
}
.btn-soft i{ font-size:.85rem; }

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 20px;
  background:transparent !important;
  color:#6b7a88 !important;
  border:1px solid #e6edf3 !important;
  border-radius:10px !important;
  font-size:.875rem;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:all .15s;
  -webkit-appearance:none;
  appearance:none;
  text-decoration:none;
  white-space:nowrap;
  line-height:1.2;
}
.btn-ghost:hover{
  background:#f4f7fa !important;
  color:#1e2b37 !important;
}

.toast-success{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  background:#ecfdf5;
  color:#065f46;
  border:1px solid #a7f3d0;
  border-radius:10px;
  margin-bottom:20px;
  font-size:.9rem;
  font-weight:500;
  animation:slideDown .3s ease;
}
.toast-success i{ color:#10b981; font-size:1.1rem; }
@keyframes slideDown{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}

.toast-error{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  background:#fdecea;
  color:#8a1c1c;
  border:1px solid #f5c6cb;
  border-radius:10px;
  margin-bottom:20px;
  font-size:.9rem;
  font-weight:500;
}
.toast-error i{ color:#dc2626; font-size:1.1rem; }

/* Toolbar */
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  background:#fff;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid #e6edf3;
  margin-bottom:16px;
}
.toolbar .tb-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  flex:1;
  min-width:0;
}
.toolbar .tb-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.search-box{
  position:relative;
  display:flex;
  align-items:center;
  flex:1;
  min-width:220px;
  max-width:360px;
}
.search-box i{
  position:absolute;
  left:13px;
  color:#8797a6;
  font-size:.85rem;
  pointer-events:none;
}
.search-box input{
  width:100%;
  padding:9px 14px 9px 36px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.875rem;
  font-family:inherit;
  background:#fbfcfd;
  transition:.15s;
  color:#1e2b37;
}
.search-box input::placeholder{ color:#9aa8b4; }
.search-box input:focus{
  outline:none;
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}

/* Modern table */
.table-wrap{
  background:#fff;
  border-radius:12px;
  border:1px solid #e6edf3;
  overflow:hidden;
}
.modern-table{
  width:100%;
  border-collapse:collapse;
}
.modern-table thead th{
  background:#f8fafc;
  color:#6b7a88;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid #e6edf3;
}
.modern-table tbody tr{
  transition:.12s;
  border-bottom:1px solid #f0f4f8;
}
.modern-table tbody tr:last-child{ border-bottom:none; }
.modern-table tbody tr:hover{ background:#f8fbfe; }
.modern-table tbody td{
  padding:14px 16px;
  font-size:.9rem;
  color:#1e2b37;
  vertical-align:middle;
}
.td-num{
  color:#9aa8b4;
  font-weight:600;
  font-size:.82rem;
}
.td-strong{ font-weight:600; color:#1e2b37; }
.td-muted{ color:#6b7a88; font-size:.85rem; }

/* Student cell with avatar */
.student-cell{
  display:flex;
  align-items:center;
  gap:12px;
}
.student-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#f9a826;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.5px;
  flex-shrink:0;
}
.student-name{
  font-weight:600;
  color:#1e2b37;
  font-size:.9rem;
}
.student-meta{
  font-size:.78rem;
  color:#8797a6;
  margin-top:2px;
}
.class-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  background:#eef4f9;
  color:#0b3b5c;
  border-radius:6px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.3px;
}
.status-dot{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.8rem;
  font-weight:600;
  color:#1e2b37;
}
.status-dot > span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.15);
}
.status-dot.inactive > span{
  background:#9aa8b4;
  box-shadow:0 0 0 3px rgba(154,168,180,.15);
}
.row-actions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
}
.icon-btn{
  width:34px;
  height:34px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f4f7fa;
  color:#6b7a88;
  font-size:.8rem;
  transition:.15s;
  border:1px solid transparent;
}
.icon-btn:hover{
  background:#0b3b5c;
  color:#fff;
  border-color:#0b3b5c;
}
.icon-btn.danger:hover{
  background:#dc2626;
  color:#fff;
  border-color:#dc2626;
}

/* Empty state */
.empty-state{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:60px 30px;
  text-align:center;
}
.empty-state i{
  font-size:2.5rem;
  color:#d5dee5;
  margin-bottom:16px;
  display:block;
}
.empty-state h3{
  color:#1e2b37;
  font-size:1.1rem;
  margin-bottom:6px;
}
.empty-state p{
  color:#8797a6;
  font-size:.9rem;
  margin-bottom:20px;
}

/* Pager */
.pager{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  margin-top:16px;
  padding:12px 4px;
}
.pager-info{
  font-size:.85rem;
  color:#6b7a88;
}
.pager-info strong{ color:#1e2b37; font-weight:700; }

.pager-nav{
  display:flex;
  align-items:center;
  gap:4px;
}
.pg-arrow{
  width:36px;
  height:36px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #e6edf3;
  color:#6b7a88;
  font-size:.75rem;
  transition:.15s;
}
.pg-arrow:hover{
  background:#0b3b5c;
  color:#fff;
  border-color:#0b3b5c;
}
.pg-arrow.disabled{
  opacity:.4;
  pointer-events:none;
  cursor:not-allowed;
}
.pg-num{
  min-width:36px;
  height:36px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  font-size:.85rem;
  font-weight:600;
  color:#6b7a88;
  background:transparent;
  transition:.15s;
  border:1px solid transparent;
}
.pg-num:hover{
  background:#fff;
  color:#0b3b5c;
  border-color:#e6edf3;
}
.pg-num.active{
  background:#0b3b5c;
  color:#fff;
  border-color:#0b3b5c;
  box-shadow:0 4px 10px -3px rgba(11,59,92,.3);
}
.pg-ellipsis{
  color:#9aa8b4;
  padding:0 6px;
  font-weight:700;
  user-select:none;
}
.pager-jump{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  color:#6b7a88;
}
.pager-jump input[type="number"]{
  width:58px;
  padding:8px 10px;
  border:1px solid #d5dee5;
  border-radius:8px;
  font-size:.85rem;
  font-family:inherit;
  text-align:center;
  background:#fff;
  color:#1e2b37;
  font-weight:600;
  -moz-appearance:textfield;
}
.pager-jump input[type="number"]::-webkit-outer-spin-button,
.pager-jump input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.pager-jump input[type="number"]:focus{
  outline:none;
  border-color:#0b3b5c;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}
.pager-jump button{
  padding:8px 14px;
  background:#0b3b5c;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:.15s;
}
.pager-jump button:hover{ background:#1b5a7a; }

/* Modal */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,32,.5);
  backdrop-filter:blur(4px);
  z-index:1000;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:40px 20px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transition:.2s;
}
.modal-overlay.open{
  opacity:1;
  visibility:visible;
}
.modal-box{
  background:#fff;
  border-radius:16px;
  width:100%;
  max-width:720px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.3);
  transform:translateY(-20px) scale(.98);
  transition:.25s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;
}
.modal-overlay.open .modal-box{
  transform:translateY(0) scale(1);
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:22px 26px;
  border-bottom:1px solid #e6edf3;
  gap:16px;
}
.modal-head h2{
  color:#1e2b37;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-0.4px;
  margin-bottom:4px;
}
.modal-head p{
  color:#6b7a88;
  font-size:.85rem;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:8px;
  background:transparent;
  border:none;
  color:#6b7a88;
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
}
.modal-close:hover{ background:#f4f7fa; color:#1e2b37; }

.modal-form{ padding:0; }
.form-section{
  padding:20px 26px;
  border-bottom:1px solid #f0f4f8;
}
.form-section:last-of-type{ border-bottom:none; }
.form-section h3{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#8797a6;
  font-weight:700;
  margin-bottom:14px;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:600px){
  .form-grid{ grid-template-columns:1fr; }
  .form-grid .col-2{ grid-column:1; }
}
.form-grid .col-2{ grid-column:span 2; }
.form-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.82rem;
  font-weight:600;
  color:#4a5f6e;
}
.form-grid label .req{ color:#dc2626; }
.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.875rem;
  font-family:inherit;
  background:#fbfcfd;
  transition:.15s;
  color:#1e2b37;
  font-weight:500;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
  outline:none;
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}
.form-grid input::placeholder,
.form-grid textarea::placeholder{
  color:#9aa8b4;
  font-weight:400;
}
.form-grid textarea{ resize:vertical; min-height:64px; }
.form-grid select{
  -webkit-appearance:none;
  appearance:none;
  background:#fbfcfd url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238797a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
  padding-right:32px;
}
.field-hint{
  font-size:.75rem;
  color:#8797a6;
  font-weight:400;
  margin-top:2px;
}
.field-hint code{
  background:#f4f7fa;
  padding:1px 6px;
  border-radius:4px;
  color:#0b3b5c;
  font-weight:600;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:18px 26px;
  background:#f8fafc;
  border-top:1px solid #e6edf3;
}


/* ============================================================
   21. ADMIN — FACULTY STYLES
   ============================================================ */
.student-avatar.faculty-avatar-sm{
  background:linear-gradient(135deg,#1b5a7a,#0e7c7b);
}
.role-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  background:#fff7e6;
  color:#8a5a00;
  border-radius:6px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.2px;
}
.subject-count{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  background:#eef4f9;
  color:#0b3b5c;
  border-radius:6px;
  font-size:.78rem;
  font-weight:600;
}


/* ============================================================
   22. ADMIN — DASHBOARD
   ============================================================ */

/* KPI grid */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
  margin-bottom:22px;
}
.kpi-card{
  display:flex;
  gap:16px;
  align-items:center;
  background:#fff;
  padding:20px 22px;
  border-radius:14px;
  border:1px solid #e6edf3;
  transition:.2s;
  position:relative;
  overflow:hidden;
}
.kpi-card:hover{
  border-color:#0b3b5c;
  box-shadow:0 12px 24px -14px rgba(11,59,92,.25);
  transform:translateY(-2px);
}
.kpi-icon{
  width:52px;
  height:52px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  flex-shrink:0;
}
.kpi-icon.blue  { background:#e0ecf9; color:#0b3b5c; }
.kpi-icon.green { background:#e5f5eb; color:#0e7c4f; }
.kpi-icon.amber { background:#fff2dd; color:#b26a00; }
.kpi-icon.purple{ background:#eee6fa; color:#6b34b3; }

.kpi-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  flex:1;
}
.kpi-label{
  font-size:.75rem;
  color:#6b7a88;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.kpi-value{
  font-size:1.7rem;
  font-weight:800;
  color:#1e2b37;
  line-height:1.1;
  letter-spacing:-0.5px;
}
.kpi-trend{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.75rem;
  color:#6b7a88;
  font-weight:500;
}
.kpi-trend.up{ color:#0e7c4f; }
.kpi-trend.warn{ color:#b26a00; }
.kpi-trend i{ font-size:.7rem; }

/* Dashboard row */
.dash-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:18px;
  margin-bottom:22px;
}
.dash-row.wide-left{ grid-template-columns:1.4fr 1fr; }
.dash-row.wide-right{ grid-template-columns:1fr 1fr; }

@media (max-width:1100px){
  .dash-row{ grid-template-columns:1fr 1fr; }
  .dash-row.wide-left{ grid-template-columns:1fr 1fr; }
}
@media (max-width:780px){
  .dash-row,
  .dash-row.wide-left,
  .dash-row.wide-right{ grid-template-columns:1fr; }
}

.dash-card{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:14px;
  padding:20px 22px;
}
.dc-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:16px;
}
.dc-head h3{
  font-size:1rem;
  color:#1e2b37;
  font-weight:700;
  letter-spacing:-0.2px;
  margin-bottom:2px;
}
.dc-head p{
  font-size:.78rem;
  color:#8797a6;
}
.dc-link{
  font-size:.8rem;
  color:#0b3b5c;
  font-weight:600;
  white-space:nowrap;
  transition:.15s;
}
.dc-link:hover{ color:#f9a826; }
.dc-empty{
  text-align:center;
  padding:30px 10px;
  color:#9aa8b4;
  font-size:.85rem;
}

/* Attendance donut */
.att-donut{
  display:flex;
  justify-content:center;
  margin:6px 0 20px;
}
.att-circle{
  width:130px;
  height:130px;
  border-radius:50%;
  background:conic-gradient(#0e7c4f calc(var(--pct) * 1%), #e6edf3 0);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
}
.att-circle::after{
  content:"";
  position:absolute;
  inset:12px;
  background:#fff;
  border-radius:50%;
}
.att-circle span,
.att-circle small{
  position:relative;
  z-index:1;
}
.att-circle span{
  font-size:1.6rem;
  font-weight:800;
  color:#1e2b37;
  line-height:1;
}
.att-circle small{
  font-size:.7rem;
  color:#6b7a88;
  margin-top:4px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.att-legend{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.att-item{
  display:flex;
  align-items:center;
  gap:8px;
}
.att-item .dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;
}
.att-item .dot.green{ background:#0e7c4f; }
.att-item .dot.red{ background:#dc2626; }
.att-item .dot.amber{ background:#f59e0b; }
.att-item .dot.blue{ background:#0ea5e9; }
.att-item div{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.att-item strong{
  font-size:.9rem;
  color:#1e2b37;
  font-weight:700;
}
.att-item small{
  font-size:.7rem;
  color:#8797a6;
}

/* Bars */
.bars{
  display:flex;
  flex-direction:column;
  gap:11px;
}
.bar-row{
  display:grid;
  grid-template-columns:80px 1fr 40px;
  align-items:center;
  gap:10px;
}
.bar-label{
  font-size:.8rem;
  color:#1e2b37;
  font-weight:600;
}
.bar-track{
  height:8px;
  background:#e6edf3;
  border-radius:6px;
  overflow:hidden;
}
.bar-fill{
  height:100%;
  background:linear-gradient(90deg,#0b3b5c,#1b5a7a);
  border-radius:6px;
  transition:.4s;
}
.bar-value{
  font-size:.82rem;
  font-weight:700;
  color:#1e2b37;
  text-align:right;
}

/* Quick actions */
.qa-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.qa-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:10px;
  transition:.15s;
}
.qa-item:hover{ background:#f8fbfe; }
.qa-item > div:nth-child(2){
  flex:1;
  min-width:0;
}
.qa-item strong{
  display:block;
  font-size:.88rem;
  color:#1e2b37;
  font-weight:600;
}
.qa-item small{
  font-size:.75rem;
  color:#8797a6;
}
.qa-item > i{
  font-size:.75rem;
  color:#9aa8b4;
  transition:.15s;
}
.qa-item:hover > i{
  color:#0b3b5c;
  transform:translateX(3px);
}
.qa-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  flex-shrink:0;
}
.qa-icon.blue  { background:#e0ecf9; color:#0b3b5c; }
.qa-icon.green { background:#e5f5eb; color:#0e7c4f; }
.qa-icon.amber { background:#fff2dd; color:#b26a00; }
.qa-icon.red   { background:#fde5e5; color:#b91c1c; }

/* Activity list */
.activity-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.activity-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 8px;
  border-radius:10px;
  transition:.15s;
  cursor:pointer;
}
.activity-item:hover{ background:#f8fbfe; }
.avatar-sm{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#f9a826;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.5px;
  flex-shrink:0;
}
.avatar-sm.faculty{
  background:linear-gradient(135deg,#1b5a7a,#0e7c7b);
}
.avatar-sm.file{
  background:#e0ecf9;
  color:#0b3b5c;
  font-size:1rem;
}
.ai-body{
  flex:1;
  min-width:0;
}
.ai-body strong{
  display:block;
  font-size:.88rem;
  color:#1e2b37;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ai-body small{
  font-size:.75rem;
  color:#8797a6;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ai-time{
  font-size:.75rem;
  color:#9aa8b4;
  flex-shrink:0;
  font-weight:500;
}
.status-mini{
  font-size:.7rem;
  font-weight:700;
  padding:3px 9px;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:.4px;
  flex-shrink:0;
}
.status-mini.ok{ background:#e5f5eb; color:#0e7c4f; }
.status-mini.warn{ background:#fff2dd; color:#b26a00; }
.chip-count{
  font-size:.72rem;
  font-weight:700;
  color:#0b3b5c;
  background:#eef4f9;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
  flex-shrink:0;
}

/* Notice mini list */
.notice-mini-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.notice-mini{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 8px;
  border-radius:10px;
  transition:.15s;
}
.notice-mini:hover{ background:#f8fbfe; }
.nm-date{
  background:#f9a826;
  color:#0b3b5c;
  min-width:44px;
  height:44px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:800;
  line-height:1;
  flex-shrink:0;
}
.nm-date span{ font-size:.95rem; }
.nm-date small{ font-size:.6rem; text-transform:uppercase; margin-top:1px; }
.nm-body{
  flex:1;
  min-width:0;
}
.nm-body strong{
  display:block;
  font-size:.85rem;
  color:#1e2b37;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:2px;
}
.nm-body small{
  font-size:.75rem;
  color:#8797a6;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Website pages grid */
.pages-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}
.page-tile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid #e6edf3;
  border-radius:10px;
  transition:.15s;
  background:#fff;
}
.page-tile:hover{
  border-color:#0b3b5c;
  background:#f8fbfe;
  transform:translateY(-1px);
}
.pt-icon{
  width:36px;
  height:36px;
  border-radius:9px;
  background:#e0ecf9;
  color:#0b3b5c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  flex-shrink:0;
}
.pt-body{
  flex:1;
  min-width:0;
}
.pt-body strong{
  display:block;
  font-size:.85rem;
  color:#1e2b37;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pt-body small{
  font-size:.72rem;
  color:#8797a6;
  font-family:'Courier New',monospace;
}
.pt-arrow{
  font-size:.72rem;
  color:#9aa8b4;
  transition:.15s;
}
.page-tile:hover .pt-arrow{
  color:#0b3b5c;
  transform:translateX(3px);
}


/* ============================================================
   23. PUBLIC — PRINCIPAL PAGE
   ============================================================ */
.principal-hero{
  background:linear-gradient(135deg,#0b3b5c 0%,#1b5a7a 100%);
  padding:60px 0 120px;
  position:relative;
  overflow:hidden;
  margin:-24px -24px 0;
  border-radius:0 0 40px 40px;
  color:#fff;
}
.principal-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(249,168,38,.15) 0,transparent 45%),
             radial-gradient(circle at 85% 70%,rgba(255,255,255,.06) 0,transparent 40%);
  pointer-events:none;
}
.ph-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:50px;
  align-items:center;
}
@media (max-width:800px){
  .ph-inner{ grid-template-columns:1fr; gap:30px; text-align:center; }
}
.ph-photo-wrap{
  position:relative;
  width:280px;
  height:280px;
  margin:0 auto;
}
.ph-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border:6px solid rgba(255,255,255,.15);
  position:relative;
  z-index:2;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.ph-photo-ring{
  position:absolute;
  inset:-12px;
  border-radius:50%;
  background:conic-gradient(from 90deg,#f9a826,#ff8f00,#f9a826,#0b3b5c,#f9a826);
  z-index:1;
  opacity:.5;
  animation:spinRing 12s linear infinite;
}
@keyframes spinRing{
  to{ transform:rotate(360deg); }
}
.ph-info{ position:relative; z-index:2; }
.ph-eyebrow{
  display:inline-block;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#f9a826;
  margin-bottom:12px;
  padding:6px 14px;
  border:1px solid rgba(249,168,38,.4);
  border-radius:20px;
  background:rgba(249,168,38,.1);
}
.ph-info h1{
  font-size:2.8rem;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1.15;
  margin-bottom:10px;
}
.ph-role{
  font-size:1.1rem;
  opacity:.9;
  margin-bottom:6px;
}
.ph-qual{
  font-size:.9rem;
  opacity:.7;
  margin-bottom:22px;
}
.ph-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media (max-width:800px){
  .ph-chips{ justify-content:center; }
}
.ph-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.15);
  border-radius:50px;
  font-size:.82rem;
  font-weight:500;
  backdrop-filter:blur(10px);
}
.ph-chip i{ color:#f9a826; font-size:.85rem; }

.hero-wave{
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  z-index:1;
}
.hero-wave svg{ display:block; width:100%; height:80px; }

/* Message section */
.principal-section{
  padding:60px 0;
  background:var(--bg-light);
}
.message-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:40px;
  align-items:start;
}
@media (max-width:960px){
  .message-layout{ grid-template-columns:1fr; gap:30px; }
}
.message-side{
  display:flex;
  flex-direction:column;
  gap:18px;
  position:sticky;
  top:100px;
}
@media (max-width:960px){
  .message-side{ position:static; }
}
.quote-card{
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#fff;
  padding:26px;
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.quote-card::before{
  content:"";
  position:absolute;
  top:-30px;
  right:-30px;
  width:120px;
  height:120px;
  background:radial-gradient(circle,rgba(249,168,38,.25) 0,transparent 70%);
}
.quote-card i{
  font-size:1.6rem;
  color:#f9a826;
  margin-bottom:14px;
  display:block;
}
.quote-card p{
  font-size:1rem;
  font-style:italic;
  line-height:1.6;
  margin-bottom:14px;
}
.quote-card span{
  font-size:.82rem;
  opacity:.75;
}
.facts-card,
.contact-card{
  background:#fff;
  padding:22px;
  border-radius:16px;
  border:1px solid #e6edf3;
}
.facts-card h4,
.contact-card h4{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:#8797a6;
  font-weight:700;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid #f0f4f8;
}
.facts-card ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.facts-card li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.85rem;
  color:#1e2b37;
  line-height:1.4;
}
.facts-card li i{
  color:#f9a826;
  font-size:.85rem;
  margin-top:2px;
  width:14px;
  flex-shrink:0;
}
.contact-card p{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.85rem;
  color:#1e2b37;
  padding:8px 0;
  border-bottom:1px solid #f0f4f8;
}
.contact-card p:last-of-type{ border-bottom:none; margin-bottom:14px; }
.contact-card p i{
  color:#0b3b5c;
  width:16px;
  text-align:center;
  font-size:.85rem;
}

/* Main message */
.message-main{
  background:#fff;
  padding:40px 44px;
  border-radius:16px;
  border:1px solid #e6edf3;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
@media (max-width:600px){
  .message-main{ padding:26px 22px; }
}
.message-main h2{
  font-size:1.8rem;
  color:#0b3b5c;
  font-weight:800;
  letter-spacing:-0.6px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:2px solid #f9a826;
  display:inline-block;
  text-align:left;
}
.message-main p,
.message-main .rich-content p{
  font-size:1.02rem;
  line-height:1.85;
  color:#3a4d5c;
  margin-bottom:18px;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.message-main .lead,
.message-main .rich-content > p:first-child{
  font-size:1.15rem;
  color:#0b3b5c;
  font-weight:600;
  line-height:1.7;
  margin-bottom:22px;
  text-align:justify;
}
.message-main .rich-content{
  text-align:justify;
  text-justify:inter-word;
}
.message-main .rich-content ul,
.message-main .rich-content ol{
  text-align:left;
  margin:16px 0 18px 22px;
}
.message-main .rich-content li{
  line-height:1.75;
  margin-bottom:8px;
  color:#3a4d5c;
}
.message-main .rich-content h2,
.message-main .rich-content h3,
.message-main .rich-content h4{
  text-align:left;
  color:#0b3b5c;
  margin:24px 0 12px;
}
.message-main .rich-content blockquote{
  text-align:left;
  margin:20px 0;
  padding:16px 22px;
  border-left:4px solid #f9a826;
  background:#fff7e6;
  border-radius:0 10px 10px 0;
  font-style:italic;
  color:#4a5f6e;
}
.message-main .signoff,
.message-main .rich-content .signoff{
  text-align:left;
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid #f0f4f8;
  font-size:.95rem;
  line-height:1.6;
  color:#4a5f6e;
}
.message-main .signoff strong{
  color:#0b3b5c;
  font-size:1.05rem;
  display:block;
  margin-top:4px;
}
.message-main .signoff span{
  font-size:.85rem;
  color:#8797a6;
}
.message-main .rich-content strong{
  color:#0b3b5c;
  font-weight:700;
}
.message-main .rich-content a{
  color:#0b3b5c;
  text-decoration:underline;
  text-decoration-color:#f9a826;
  text-underline-offset:3px;
  transition:.15s;
}
.message-main .rich-content a:hover{
  color:#f9a826;
}
@media (max-width:600px){
  .message-main p,
  .message-main .rich-content p{
    font-size:.98rem;
    line-height:1.75;
    text-align:left;
  }
  .message-main .lead{
    font-size:1.05rem;
    text-align:left;
  }
}

/* Vision / Mission */
.principal-vm{
  padding:40px 0 60px;
  background:var(--bg-light);
}
.vm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
}
.vm-card{
  background:#fff;
  padding:30px 26px;
  border-radius:16px;
  border:1px solid #e6edf3;
  transition:.25s;
  position:relative;
  overflow:hidden;
}
.vm-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#f9a826,#0b3b5c);
  transform:scaleX(0);
  transform-origin:left;
  transition:.35s;
}
.vm-card:hover::before{ transform:scaleX(1); }
.vm-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -16px rgba(11,59,92,.18);
}
.vm-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  background:linear-gradient(135deg,#e3f0f9,#fff7e6);
  color:#0b3b5c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  margin-bottom:18px;
}
.vm-card h3{
  color:#0b3b5c;
  font-size:1.15rem;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:-0.3px;
}
.vm-card p{
  color:#6b7a88;
  font-size:.92rem;
  line-height:1.65;
}

/* CTA */
.principal-cta{
  padding:20px 0 60px;
}
.principal-cta .cta-inner{
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#fff;
  border-radius:24px;
  padding:44px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.principal-cta .cta-inner::before{
  content:"";
  position:absolute;
  top:-40%;
  right:-10%;
  width:400px;
  height:400px;
  background:radial-gradient(circle,rgba(249,168,38,.22) 0,transparent 70%);
  pointer-events:none;
}
.principal-cta .cta-inner > *{
  position:relative;
  z-index:2;
}
.principal-cta h2{
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:-0.6px;
  margin-bottom:8px;
}
.principal-cta p{
  font-size:.95rem;
  opacity:.85;
  max-width:560px;
}
.principal-cta .cta-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
@media (max-width:640px){
  .principal-hero{ padding:40px 0 100px; }
  .ph-info h1{ font-size:2rem; }
  .ph-photo-wrap{ width:200px; height:200px; }
  .principal-cta .cta-inner{ padding:32px 24px; flex-direction:column; text-align:center; }
  .principal-cta h2{ font-size:1.35rem; }
  .principal-cta .cta-buttons{ justify-content:center; width:100%; }
}


/* ============================================================
   24. PUBLIC — ADMISSIONS PAGE
   ============================================================ */
.adm-hero{
  background:linear-gradient(135deg,#0b3b5c 0%,#1b5a7a 100%);
  color:#fff;
  padding:40px 0 50px;
  position:relative;
  overflow:hidden;
  margin:-24px -24px 0;
  border-radius:0 0 24px 24px;
}
.adm-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 30%,rgba(249,168,38,.18) 0,transparent 45%),
             radial-gradient(circle at 85% 70%,rgba(255,255,255,.06) 0,transparent 40%);
  pointer-events:none;
}
.adm-hero-inner{
  position:relative;
  z-index:2;
  max-width:720px;
}
.adm-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(249,168,38,.15);
  color:#f9a826;
  padding:6px 14px;
  border-radius:50px;
  font-size:.78rem;
  font-weight:600;
  margin-bottom:14px;
  border:1px solid rgba(249,168,38,.35);
}
.adm-hero h1{
  font-size:2.2rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-1px;
  margin-bottom:12px;
}
.adm-hero .accent{ color:#f9a826; }
.adm-hero p{
  font-size:.98rem;
  opacity:.9;
  margin-bottom:20px;
  max-width:540px;
  line-height:1.5;
}
.adm-hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.adm-hero-stats{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}
.adm-hero-stats > div{
  display:flex;
  flex-direction:column;
}
.adm-hero-stats strong{
  font-size:1.4rem;
  font-weight:800;
  color:#f9a826;
  line-height:1;
}
.adm-hero-stats span{
  font-size:.7rem;
  opacity:.75;
  margin-top:3px;
  text-transform:uppercase;
  letter-spacing:.8px;
}
@media (max-width:640px){
  .adm-hero{ padding:28px 0 36px; }
  .adm-hero h1{ font-size:1.6rem; letter-spacing:-0.5px; }
  .adm-hero p{ font-size:.9rem; margin-bottom:16px; }
  .adm-hero-cta{ margin-bottom:18px; gap:8px; }
  .adm-hero-cta .btn{ padding:10px 20px; font-size:.85rem; }
  .adm-hero-stats{ gap:18px; }
  .adm-hero-stats strong{ font-size:1.15rem; }
  .adm-hero-stats span{ font-size:.65rem; }
}

.adm-success{
  display:flex;
  gap:22px;
  align-items:flex-start;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  border-radius:16px;
  padding:28px;
  margin:24px 0 0;
}
@media (max-width:600px){
  .adm-success{ flex-direction:column; padding:22px; text-align:center; }
}
.adm-success-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#10b981;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  flex-shrink:0;
}
.adm-success h2{
  color:#065f46;
  font-size:1.3rem;
  margin-bottom:8px;
}
.adm-success p{
  color:#065f46;
  font-size:.95rem;
  margin-bottom:6px;
}
.adm-success p strong{
  font-family:'Courier New',monospace;
  background:#fff;
  padding:3px 10px;
  border-radius:6px;
  letter-spacing:1px;
  color:#0b3b5c;
}
.adm-success-note{
  font-size:.85rem !important;
  opacity:.8;
  margin-top:10px !important;
}
.adm-success-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.adm-section{ padding:60px 0; }
.adm-section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 44px;
}
.adm-eyebrow{
  display:inline-block;
  font-size:.75rem;
  font-weight:700;
  color:#f9a826;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.adm-section-head h2{
  font-size:2.1rem;
  color:#0b3b5c;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1.2;
}
.adm-section-head h2 .accent{ color:#f9a826; }
.adm-section-head p{
  color:#6b7a88;
  margin-top:10px;
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
}
.step-card{
  background:#fff;
  padding:28px 22px;
  border-radius:16px;
  border:1px solid #e6edf3;
  position:relative;
  transition:.25s;
}
.step-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -16px rgba(11,59,92,.18);
}
.step-num{
  position:absolute;
  top:16px;
  right:20px;
  font-size:2rem;
  font-weight:800;
  color:#eef4f9;
  line-height:1;
}
.step-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  background:linear-gradient(135deg,#e3f0f9,#fff7e6);
  color:#0b3b5c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  margin-bottom:16px;
}
.step-card h3{
  font-size:1rem;
  color:#0b3b5c;
  font-weight:700;
  margin-bottom:8px;
}
.step-card p{
  font-size:.85rem;
  color:#6b7a88;
  line-height:1.5;
}

.adm-errors{
  background:#fdecea;
  border:1px solid #f5c6cb;
  border-radius:12px;
  padding:18px 22px;
  margin-bottom:24px;
}
.adm-errors h4{
  color:#8a1c1c;
  font-size:.95rem;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.adm-errors ul{
  margin-left:20px;
  color:#8a1c1c;
  font-size:.88rem;
}
.adm-errors li{ margin-bottom:4px; }

.adm-form-section{ background:var(--bg-light); }
.adm-form{
  background:#fff;
  border-radius:18px;
  border:1px solid #e6edf3;
  overflow:hidden;
  box-shadow:0 12px 32px -16px rgba(11,59,92,.08);
}
.adm-form-block{
  padding:28px 32px;
  border-bottom:1px solid #f0f4f8;
}
.adm-form-block:last-of-type{ border-bottom:none; }
@media (max-width:600px){
  .adm-form-block{ padding:22px 20px; }
}
.adm-block-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
.adm-block-num{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#f9a826;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:.95rem;
  flex-shrink:0;
  box-shadow:0 6px 14px -4px rgba(11,59,92,.35);
}
.adm-block-head h3{
  font-size:1.05rem;
  color:#0b3b5c;
  font-weight:700;
  letter-spacing:-0.3px;
  margin-bottom:2px;
}
.adm-block-head p{
  font-size:.82rem;
  color:#8797a6;
}
.adm-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:640px){
  .adm-grid{ grid-template-columns:1fr; }
  .adm-grid .col-2{ grid-column:span 1; }
}
.adm-grid .col-2{ grid-column:span 2; }
.adm-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.82rem;
  font-weight:600;
  color:#4a5f6e;
}
.adm-grid label .req{ color:#dc2626; }
.adm-grid input,
.adm-grid select,
.adm-grid textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.9rem;
  font-family:inherit;
  background:#fbfcfd;
  color:#1e2b37;
  transition:.15s;
  font-weight:500;
}
.adm-grid input:focus,
.adm-grid select:focus,
.adm-grid textarea:focus{
  outline:none;
  border-color:#0b3b5c;
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}
.adm-grid input::placeholder,
.adm-grid textarea::placeholder{
  color:#9aa8b4;
  font-weight:400;
}
.adm-grid textarea{
  resize:vertical;
  min-height:70px;
}
.adm-grid select{
  -webkit-appearance:none;
  appearance:none;
  background:#fbfcfd url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238797a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 14px center;
  padding-right:36px;
  cursor:pointer;
}
.adm-declaration{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:.88rem;
  color:#4a5f6e;
  line-height:1.6;
  cursor:pointer;
  font-weight:500;
  text-transform:none;
  padding:0;
}
.adm-declaration input[type="checkbox"]{
  width:20px;
  height:20px;
  flex-shrink:0;
  margin-top:2px;
  accent-color:#0b3b5c;
  cursor:pointer;
}
.adm-declaration span{ color:#4a5f6e; }
.adm-form-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:24px 32px;
  background:#f8fafc;
  border-top:1px solid #e6edf3;
  flex-wrap:wrap;
}
@media (max-width:500px){
  .adm-form-actions{ flex-direction:column-reverse; }
  .adm-form-actions button{ width:100%; justify-content:center; }
}
.btn-primary-lg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 32px;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a) !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  font-size:.95rem;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:.2s;
  box-shadow:0 8px 18px -6px rgba(11,59,92,.4);
  -webkit-appearance:none;
  appearance:none;
  text-decoration:none;
  line-height:1.2;
}
.btn-primary-lg:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 22px -6px rgba(11,59,92,.5);
}

.adm-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
@media (max-width:900px){
  .adm-two-col{ grid-template-columns:1fr; }
}
.adm-info-card{
  background:#fff;
  border-radius:16px;
  padding:28px;
  border:1px solid #e6edf3;
}
.aic-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid #f0f4f8;
}
.aic-head i{
  width:44px;
  height:44px;
  border-radius:12px;
  background:#e0ecf9;
  color:#0b3b5c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
}
.aic-head h3{
  font-size:1.1rem;
  color:#0b3b5c;
  font-weight:700;
  letter-spacing:-0.3px;
}
.adm-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.adm-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.88rem;
  color:#3a4d5c;
  line-height:1.5;
  padding:8px 0;
  border-bottom:1px dashed #f0f4f8;
}
.adm-list li:last-child{ border-bottom:none; }
.adm-list i{
  color:#10b981;
  font-size:.85rem;
  margin-top:4px;
  flex-shrink:0;
}
.aic-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  padding:12px 14px;
  background:#fff7e6;
  border-radius:10px;
  border-left:3px solid #f9a826;
  font-size:.82rem;
  color:#8a5a00;
  line-height:1.5;
}
.aic-note i{
  color:#f9a826;
  font-size:.95rem;
  margin-top:2px;
  flex-shrink:0;
}
.aic-note.success{
  background:#ecfdf5;
  border-left-color:#10b981;
  color:#065f46;
}
.aic-note.success i{ color:#10b981; }

.adm-fee-table{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
}
.adm-fee-table th{
  text-align:left;
  padding:10px 12px;
  background:#f8fafc;
  color:#6b7a88;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  border-bottom:1px solid #e6edf3;
}
.adm-fee-table td{
  padding:11px 12px;
  border-bottom:1px solid #f0f4f8;
  color:#1e2b37;
}
.adm-fee-table tr:last-child td{ border-bottom:none; }
.adm-fee-table tr:hover td{ background:#f8fbfe; }

.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:780px){
  .faq-grid{ grid-template-columns:1fr; }
}
.faq-item{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:0;
  overflow:hidden;
  transition:.15s;
}
.faq-item[open]{
  border-color:#0b3b5c;
  box-shadow:0 8px 20px -12px rgba(11,59,92,.2);
}
.faq-item summary{
  padding:16px 20px;
  font-weight:600;
  color:#0b3b5c;
  font-size:.92rem;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  transition:.15s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"\f078";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:.7rem;
  color:#8797a6;
  transition:.2s;
}
.faq-item[open] summary::after{
  transform:rotate(180deg);
  color:#f9a826;
}
.faq-item summary:hover{ background:#f8fbfe; }
.faq-item p{
  padding:0 20px 18px;
  font-size:.88rem;
  color:#4a5f6e;
  line-height:1.65;
  border-top:1px solid #f0f4f8;
  padding-top:14px;
}

.adm-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#fff;
  border-radius:20px;
  padding:40px 40px;
  position:relative;
  overflow:hidden;
}
.adm-cta::before{
  content:"";
  position:absolute;
  top:-40%;
  right:-5%;
  width:400px;
  height:400px;
  background:radial-gradient(circle,rgba(249,168,38,.2) 0,transparent 70%);
  pointer-events:none;
}
.adm-cta > *{ position:relative; z-index:2; }
.adm-cta h2{
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-0.6px;
  margin-bottom:6px;
}
.adm-cta p{
  font-size:.95rem;
  opacity:.85;
}
.adm-cta-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
@media (max-width:640px){
  .adm-cta{ padding:30px 24px; flex-direction:column; text-align:center; }
  .adm-cta h2{ font-size:1.3rem; }
}


/* ============================================================
   25. PUBLIC — NOTICES PAGE
   ============================================================ */
.notices-hero{
  background:linear-gradient(135deg,#0b3b5c 0%,#1b5a7a 100%);
  color:#fff;
  padding:44px 0 52px;
  text-align:center;
  border-radius:0 0 24px 24px;
  margin:-24px -24px 0;
  position:relative;
  overflow:hidden;
}
.notices-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(249,168,38,.15) 0,transparent 45%),
             radial-gradient(circle at 80% 70%,rgba(255,255,255,.06) 0,transparent 40%);
  pointer-events:none;
}
.notices-hero .container{ position:relative; z-index:2; }
.nh-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(249,168,38,.15);
  color:#f9a826;
  padding:6px 14px;
  border-radius:50px;
  font-size:.75rem;
  font-weight:600;
  margin-bottom:12px;
  border:1px solid rgba(249,168,38,.35);
}
.notices-hero h1{
  font-size:2rem;
  font-weight:800;
  letter-spacing:-0.8px;
  margin-bottom:6px;
}
.notices-hero p{
  font-size:.95rem;
  opacity:.85;
  max-width:520px;
  margin:0 auto;
}

.notices-toolbar-wrap{
  margin-top:-24px;
  position:relative;
  z-index:5;
  padding-bottom:20px;
}
.notices-toolbar{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:14px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  box-shadow:0 8px 24px -14px rgba(11,59,92,.2);
}
.nt-cats{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.nt-cat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 13px;
  border-radius:8px;
  font-size:.8rem;
  font-weight:600;
  color:#6b7a88;
  background:#f4f7fa;
  transition:.15s;
  white-space:nowrap;
}
.nt-cat:hover{ background:#e0ecf9; color:#0b3b5c; }
.nt-cat.active{ background:#0b3b5c; color:#fff; }
.nt-cat i{ font-size:.75rem; }

.nt-search{
  position:relative;
  display:flex;
  align-items:center;
  min-width:220px;
}
.nt-search i{
  position:absolute;
  left:12px;
  color:#8797a6;
  font-size:.85rem;
}
.nt-search input{
  width:100%;
  padding:9px 14px 9px 34px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.85rem;
  font-family:inherit;
  background:#fbfcfd;
  transition:.15s;
}
.nt-search input:focus{
  outline:none;
  border-color:#0b3b5c;
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}

.notices-list-wrap{ padding:10px 0 60px; }
.notices-count{
  font-size:.85rem;
  color:#6b7a88;
  margin-bottom:16px;
  padding:0 4px;
}
.notices-count strong{ color:#1e2b37; font-weight:700; }

.notices-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:18px;
}
@media (max-width:560px){
  .notices-grid{ grid-template-columns:1fr; }
}
.notice-card-page{
  position:relative;
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:14px;
  padding:22px 22px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:.2s;
}
.notice-card-page:hover{
  transform:translateY(-3px);
  border-color:#0b3b5c;
  box-shadow:0 16px 32px -18px rgba(11,59,92,.25);
}
.notice-card-page.pinned{
  border-color:#f9a826;
  background:linear-gradient(180deg,#fffaef 0%,#fff 40%);
}
.notice-pin{
  position:absolute;
  top:-9px;
  right:14px;
  background:#f9a826;
  color:#0b3b5c;
  padding:3px 10px;
  border-radius:20px;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  box-shadow:0 4px 10px -3px rgba(249,168,38,.5);
}
.ncp-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.ncp-date{
  min-width:52px;
  height:52px;
  border-radius:12px;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:800;
  line-height:1;
  flex-shrink:0;
}
.ncp-date span{ font-size:1.15rem; }
.ncp-date small{ font-size:.62rem; text-transform:uppercase; margin-top:2px; opacity:.9; }
.ncp-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.ncp-cat{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.ncp-cat i{ font-size:.7rem; }
.ncp-new{
  background:#dc2626;
  color:#fff;
  font-size:.6rem;
  font-weight:800;
  padding:2px 7px;
  border-radius:10px;
  letter-spacing:.6px;
}
.notice-card-page h3{
  font-size:1rem;
  color:#0b3b5c;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-0.2px;
}
.ncp-body{
  font-size:.85rem;
  color:#6b7a88;
  line-height:1.6;
  flex:1;
}
.ncp-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:12px;
  border-top:1px solid #f0f4f8;
  gap:10px;
}
.ncp-author{
  font-size:.75rem;
  color:#9aa8b4;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.ncp-btn{
  background:none;
  border:none;
  color:#0b3b5c;
  font-size:.8rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.ncp-btn:hover{ color:#f9a826; gap:9px; }
.ncp-btn i{ font-size:.7rem; }

.notices-empty{
  text-align:center;
  padding:70px 20px;
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:16px;
}
.notices-empty i{
  font-size:2.5rem;
  color:#d5dee5;
  margin-bottom:14px;
  display:block;
}
.notices-empty h3{
  color:#1e2b37;
  font-size:1.1rem;
  margin-bottom:6px;
}
.notices-empty p{
  color:#8797a6;
  font-size:.9rem;
}
.notices-empty a{
  color:#0b3b5c;
  font-weight:700;
  text-decoration:underline;
}

.notices-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:34px;
  flex-wrap:wrap;
}
.np-arrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border-radius:9px;
  background:#fff;
  border:1px solid #e6edf3;
  color:#0b3b5c;
  font-size:.82rem;
  font-weight:600;
  transition:.15s;
}
.np-arrow:hover{ background:#0b3b5c; color:#fff; border-color:#0b3b5c; }
.np-arrow.disabled{ opacity:.4; pointer-events:none; }
.np-arrow i{ font-size:.7rem; }
.np-nums{
  display:flex;
  gap:4px;
  align-items:center;
}
.np-num{
  min-width:36px;
  height:36px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:600;
  color:#6b7a88;
  background:#fff;
  border:1px solid #e6edf3;
  transition:.15s;
}
.np-num:hover{ background:#f4f7fa; color:#0b3b5c; }
.np-num.active{ background:#0b3b5c; color:#fff; border-color:#0b3b5c; }
.np-dots{ color:#9aa8b4; padding:0 4px; font-weight:700; }

/* Modal */
.notice-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,32,.5);
  backdrop-filter:blur(4px);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:.2s;
}
.notice-modal-overlay.open{
  opacity:1;
  visibility:visible;
}
.notice-modal{
  background:#fff;
  border-radius:18px;
  max-width:640px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  padding:32px 36px;
  position:relative;
  transform:translateY(10px) scale(.97);
  transition:.25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.35);
}
.notice-modal-overlay.open .notice-modal{
  transform:translateY(0) scale(1);
}
@media (max-width:600px){
  .notice-modal{ padding:24px 22px; }
}
.nm-close{
  position:absolute;
  top:18px;
  right:18px;
  width:36px;
  height:36px;
  border-radius:8px;
  background:#f4f7fa;
  border:none;
  color:#6b7a88;
  cursor:pointer;
  font-size:.95rem;
  transition:.15s;
}
.nm-close:hover{ background:#fde5e5; color:#dc2626; }
.nm-cat{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.nm-cat i{ margin-right:5px; }
.notice-modal h2{
  font-size:1.5rem;
  color:#0b3b5c;
  font-weight:800;
  letter-spacing:-0.5px;
  line-height:1.3;
  margin-bottom:12px;
}
.nm-sub{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:.8rem;
  color:#8797a6;
  margin-bottom:20px;
  padding-bottom:18px;
  border-bottom:1px solid #f0f4f8;
}
.nm-sub i{ color:#f9a826; margin-right:4px; }
.nm-body{
  font-size:.95rem;
  line-height:1.75;
  color:#3a4d5c;
}
.nm-body p{ margin-bottom:12px; }
.nm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid #f0f4f8;
}

/* Admin tabs */
.admin-tabs{
  display:flex;
  gap:4px;
  background:#f4f7fa;
  padding:4px;
  border-radius:12px;
  margin-bottom:20px;
  width:fit-content;
}
.admin-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:9px;
  font-size:.87rem;
  font-weight:600;
  color:#6b7a88;
  transition:.15s;
  text-decoration:none;
}
.admin-tab:hover{ color:#0b3b5c; background:#eef4f9; }
.admin-tab.active{
  background:#fff;
  color:#0b3b5c;
  box-shadow:0 2px 6px rgba(11,59,92,.08);
}
.tab-badge{
  background:#e0ecf9;
  color:#0b3b5c;
  font-size:.7rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:20px;
  min-width:24px;
  text-align:center;
}
.admin-tab.active .tab-badge{
  background:#0b3b5c;
  color:#fff;
}

/* Category pills */
.pill.general  { background:#e0ecf9; color:#0b3b5c; }
.pill.academic { background:#eee6fa; color:#6b34b3; }
.pill.event    { background:#e5f5eb; color:#0e7c4f; }
.pill.exam     { background:#fff2dd; color:#b26a00; }
.pill.holiday  { background:#e0f4fd; color:#0c7da0; }
.pill.urgent   { background:#fde5e5; color:#b91c1c; }
.pill.admission{ background:#fff7e6; color:#8a5a00; }

/* Admin notices — edit state */
.modern-table tbody tr.row-editing{
  background:#fffbeb;
  box-shadow:inset 4px 0 0 #f9a826;
}
.modern-table tbody tr.row-editing:hover{
  background:#fff7e0;
}
.notice-title-cell strong{
  display:block;
  font-size:.9rem;
  color:#1e2b37;
  font-weight:600;
  line-height:1.35;
  margin-bottom:3px;
}
.notice-title-cell small{
  display:block;
  font-size:.75rem;
  color:#8797a6;
  line-height:1.4;
}


/* ============================================================
   26. PUBLIC — CONTACT PAGE
   ============================================================ */
.contact-hero{
  background:linear-gradient(135deg,#0b3b5c 0%,#1b5a7a 100%);
  color:#fff;
  padding:44px 0 52px;
  text-align:center;
  border-radius:0 0 24px 24px;
  margin:-24px -24px 0;
  position:relative;
  overflow:hidden;
}
.contact-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(249,168,38,.15) 0,transparent 45%),
             radial-gradient(circle at 80% 70%,rgba(255,255,255,.06) 0,transparent 40%);
}
.contact-hero .container{ position:relative; z-index:2; }
.ch-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(249,168,38,.15);
  color:#f9a826;
  padding:6px 14px;
  border-radius:50px;
  font-size:.75rem;
  font-weight:600;
  margin-bottom:12px;
  border:1px solid rgba(249,168,38,.35);
}
.contact-hero h1{
  font-size:2rem;
  font-weight:800;
  letter-spacing:-0.8px;
  margin-bottom:6px;
}
.contact-hero p{
  font-size:.95rem;
  opacity:.85;
  max-width:520px;
  margin:0 auto;
}

.contact-cards-wrap{
  margin-top:-24px;
  position:relative;
  z-index:5;
  padding-bottom:20px;
}
.contact-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.cc-card{
  background:#fff;
  padding:24px 20px;
  text-align:center;
  border:1px solid #e6edf3;
  border-radius:14px;
  box-shadow:0 8px 24px -14px rgba(11,59,92,.2);
  transition:.2s;
}
.cc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px -18px rgba(11,59,92,.3);
}
.cc-icon{
  width:52px;
  height:52px;
  margin:0 auto 14px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  color:#fff;
}
.cc-icon.blue  { background:linear-gradient(135deg,#0b3b5c,#1b5a7a); }
.cc-icon.green { background:linear-gradient(135deg,#0e7c4f,#0a5c3a); }
.cc-icon.amber { background:linear-gradient(135deg,#f9a826,#c67c00); }
.cc-icon.purple{ background:linear-gradient(135deg,#7b1fa2,#4a148c); }
.cc-card h4{
  font-size:.95rem;
  color:#0b3b5c;
  font-weight:700;
  margin-bottom:6px;
}
.cc-card p{
  font-size:.82rem;
  color:#6b7a88;
  line-height:1.5;
}

.contact-main-wrap{ padding:40px 0 70px; }
.contact-layout{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:30px;
  align-items:start;
}
@media (max-width:900px){
  .contact-layout{ grid-template-columns:1fr; }
}
.contact-form-card{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:18px;
  padding:32px 34px;
  box-shadow:0 12px 32px -16px rgba(11,59,92,.08);
}
@media (max-width:600px){
  .contact-form-card{ padding:24px 20px; }
}
.cf-head h2{
  font-size:1.5rem;
  color:#0b3b5c;
  font-weight:800;
  margin-bottom:6px;
  letter-spacing:-0.5px;
}
.cf-head p{
  font-size:.88rem;
  color:#6b7a88;
  margin-bottom:22px;
}
.cf-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
@media (max-width:600px){
  .cf-grid{ grid-template-columns:1fr; }
}
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.82rem;
  font-weight:600;
  color:#4a5f6e;
  margin-bottom:14px;
}
.contact-form label .req{ color:#dc2626; }
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.9rem;
  font-family:inherit;
  background:#fbfcfd;
  color:#1e2b37;
  transition:.15s;
  font-weight:500;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:#0b3b5c;
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}
.contact-form textarea{ resize:vertical; min-height:130px; }

.cf-errors{
  display:flex;
  gap:12px;
  padding:16px 18px;
  background:#fdecea;
  color:#8a1c1c;
  border:1px solid #f5c6cb;
  border-radius:12px;
  margin-bottom:20px;
  font-size:.85rem;
}
.cf-errors i{
  color:#dc2626;
  font-size:1.1rem;
  margin-top:2px;
}
.cf-errors ul{ margin:6px 0 0 18px; }

.cf-success{ text-align:center; padding:40px 20px; }
.cf-success-icon{
  width:70px;
  height:70px;
  margin:0 auto 18px;
  border-radius:50%;
  background:#10b981;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  box-shadow:0 12px 24px -8px rgba(16,185,129,.4);
}
.cf-success h3{
  font-size:1.4rem;
  color:#065f46;
  margin-bottom:8px;
}
.cf-success p{
  font-size:.9rem;
  color:#6b7a88;
  margin-bottom:22px;
}

.contact-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.map-card{
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e6edf3;
  background:#fff;
  padding:8px;
}
.map-card iframe{ border-radius:12px; }
.side-card{
  background:#fff;
  padding:22px;
  border:1px solid #e6edf3;
  border-radius:16px;
}
.side-card h4{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:#8797a6;
  font-weight:700;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid #f0f4f8;
}
.social-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.soc-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  color:#fff;
  transition:.2s;
}
.soc-icon.fb{ background:#1877f2; }
.soc-icon.ig{ background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.soc-icon.tw{ background:#1da1f2; }
.soc-icon.yt{ background:#ff0000; }
.soc-icon.li{ background:#0077b5; }
.soc-icon:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 20px -8px rgba(0,0,0,.3);
}
.side-links{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.side-links a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 6px;
  color:#4a5f6e;
  font-size:.87rem;
  border-radius:8px;
  transition:.15s;
}
.side-links a:hover{
  background:#f8fbfe;
  color:#0b3b5c;
  padding-left:12px;
}
.side-links i{
  font-size:.65rem;
  color:#f9a826;
}


/* ============================================================
   27. PUBLIC — GALLERY
   ============================================================ */
.gallery-hero{
  background:linear-gradient(135deg,#0b3b5c 0%,#1b5a7a 100%);
  color:#fff;
  padding:44px 0 52px;
  text-align:center;
  border-radius:0 0 24px 24px;
  margin:-24px -24px 0;
  position:relative;
  overflow:hidden;
}
.gallery-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(249,168,38,.15) 0,transparent 45%),
             radial-gradient(circle at 80% 70%,rgba(255,255,255,.06) 0,transparent 40%);
}
.gallery-hero .container{ position:relative; z-index:2; }
.gh-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(249,168,38,.15);
  color:#f9a826;
  padding:6px 14px;
  border-radius:50px;
  font-size:.75rem;
  font-weight:600;
  margin-bottom:12px;
  border:1px solid rgba(249,168,38,.35);
}
.gallery-hero h1{
  font-size:2rem;
  font-weight:800;
  letter-spacing:-0.8px;
  margin-bottom:6px;
}
.gallery-hero p{
  font-size:.95rem;
  opacity:.85;
  max-width:600px;
  margin:0 auto;
}

.album-filter-wrap{
  margin-top:-24px;
  position:relative;
  z-index:5;
  padding-bottom:20px;
}
.album-filter{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:14px;
  padding:12px 16px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  box-shadow:0 8px 24px -14px rgba(11,59,92,.2);
}
.album-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px;
  border-radius:8px;
  font-size:.8rem;
  font-weight:600;
  color:#6b7a88;
  background:#f4f7fa;
  transition:.15s;
  white-space:nowrap;
}
.album-chip:hover{ background:#e0ecf9; color:#0b3b5c; }
.album-chip.active{ background:#0b3b5c; color:#fff; }
.album-chip i{ font-size:.72rem; }
.album-count{
  background:rgba(255,255,255,.6);
  color:#0b3b5c;
  padding:1px 7px;
  border-radius:20px;
  font-size:.68rem;
  font-weight:700;
}
.album-chip.active .album-count{
  background:rgba(249,168,38,.25);
  color:#f9a826;
}

.gallery-grid-wrap{ padding:10px 0 60px; }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
}
.gi-item{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:4/3;
  background:#e6edf3;
  transition:.25s;
}
.gi-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.gi-item:hover img{ transform:scale(1.08); }
.gi-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(11,59,92,.85));
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:.25s;
}
.gi-item:hover .gi-overlay{ opacity:1; }
.gi-overlay i{
  color:#fff;
  font-size:1.6rem;
  background:rgba(249,168,38,.9);
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
}
.gi-item figcaption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:14px 16px;
  color:#fff;
  background:linear-gradient(transparent,rgba(11,59,92,.9));
  transform:translateY(100%);
  transition:.3s;
}
.gi-item:hover figcaption{ transform:translateY(0); }
.gi-item figcaption strong{
  display:block;
  font-size:.88rem;
  font-weight:700;
}
.gi-album{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.7rem;
  opacity:.85;
  margin-top:2px;
}
.gi-album i{ font-size:.65rem; }

.gallery-empty{
  text-align:center;
  padding:80px 20px;
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:16px;
}
.gallery-empty i{
  font-size:2.8rem;
  color:#d5dee5;
  margin-bottom:14px;
  display:block;
}
.gallery-empty h3{
  color:#1e2b37;
  font-size:1.15rem;
  margin-bottom:6px;
}
.gallery-empty p{
  color:#8797a6;
  font-size:.9rem;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.94);
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  opacity:0;
  visibility:hidden;
  transition:.25s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lb-inner{
  max-width:1100px;
  width:100%;
  text-align:center;
}
.lb-inner img{
  max-width:100%;
  max-height:75vh;
  border-radius:12px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
}
.lb-info{ margin-top:20px; color:#fff; }
.lb-info h3{
  font-size:1.15rem;
  font-weight:700;
  margin-bottom:4px;
}
.lb-info p{ font-size:.9rem; opacity:.75; }
.lb-close{
  position:absolute;
  top:22px;
  right:22px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#fff;
  border:none;
  font-size:1.1rem;
  cursor:pointer;
  transition:.15s;
}
.lb-close:hover{ background:rgba(255,255,255,.25); }
.lb-prev,
.lb-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#fff;
  border:none;
  font-size:1.1rem;
  cursor:pointer;
  transition:.15s;
}
.lb-prev:hover,
.lb-next:hover{ background:rgba(249,168,38,.9); }
.lb-prev{ left:22px; }
.lb-next{ right:22px; }
@media (max-width:640px){
  .lb-prev{ left:10px; width:42px; height:42px; }
  .lb-next{ right:10px; width:42px; height:42px; }
  .lb-close{ top:12px; right:12px; }
}

/* Admin gallery grid */
.gallery-admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
}
.gag-card{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:14px;
  overflow:hidden;
  transition:.2s;
}
.gag-card.editing{
  border-color:#f9a826;
  box-shadow:0 0 0 3px rgba(249,168,38,.15);
}
.gag-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px -12px rgba(11,59,92,.2);
}
.gag-img{
  position:relative;
  aspect-ratio:4/3;
  background:#e6edf3;
  overflow:hidden;
}
.gag-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.gag-overlay{
  position:absolute;
  inset:0;
  background:rgba(11,59,92,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  opacity:0;
  transition:.2s;
}
.gag-card:hover .gag-overlay{ opacity:1; }
.gag-badge{
  position:absolute;
  top:10px;
  left:10px;
  font-size:.65rem;
  font-weight:800;
  padding:3px 9px;
  border-radius:20px;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.gag-badge.draft{ background:#fff2dd; color:#b26a00; }
.gag-info{ padding:12px 14px; }
.gag-info strong{
  display:block;
  font-size:.85rem;
  color:#1e2b37;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:3px;
}
.gag-info small{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.72rem;
  color:#8797a6;
}
.gag-info small i{ font-size:.65rem; }


/* ============================================================
   28. ADMIN — CONTACT MESSAGES
   ============================================================ */
.msg-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:20px;
}
.ms-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:16px 18px;
  transition:.2s;
}
.ms-card:hover{
  border-color:#0b3b5c;
  box-shadow:0 10px 24px -14px rgba(11,59,92,.2);
}
.ms-icon{
  width:46px;
  height:46px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
  flex-shrink:0;
}
.ms-icon.blue  { background:#e0ecf9; color:#0b3b5c; }
.ms-icon.amber { background:#fff2dd; color:#b26a00; }
.ms-icon.green { background:#e5f5eb; color:#0e7c4f; }
.ms-icon.purple{ background:#eee6fa; color:#6b34b3; }
.ms-card > div:last-child{ display:flex; flex-direction:column; line-height:1.2; }
.ms-card span{
  font-size:.72rem;
  color:#8797a6;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.ms-card strong{
  font-size:1.4rem;
  color:#1e2b37;
  font-weight:800;
  margin-top:2px;
  line-height:1;
}

.msg-tabs{
  display:inline-flex;
  background:#f4f7fa;
  padding:4px;
  border-radius:10px;
  gap:2px;
}
.msg-tab{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:8px;
  font-size:.82rem;
  font-weight:600;
  color:#6b7a88;
  transition:.15s;
  white-space:nowrap;
}
.msg-tab:hover{ color:#0b3b5c; }
.msg-tab.active{
  background:#fff;
  color:#0b3b5c;
  box-shadow:0 2px 6px rgba(11,59,92,.08);
}
.msg-tab-badge{
  background:#dc2626;
  color:#fff;
  font-size:.65rem;
  font-weight:800;
  padding:1px 6px;
  border-radius:20px;
  min-width:18px;
  text-align:center;
}

.msg-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.msg-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:16px;
  align-items:center;
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:14px 18px;
  transition:.15s;
}
.msg-row:hover{
  border-color:#0b3b5c;
  box-shadow:0 8px 20px -12px rgba(11,59,92,.2);
}
.msg-row.unread{
  background:linear-gradient(90deg,#fffbeb 0%,#fff 60%);
  border-left:3px solid #f9a826;
}
@media (max-width:780px){
  .msg-row{
    grid-template-columns:auto 1fr;
    gap:12px;
  }
  .msg-meta,.msg-actions{ grid-column:2; justify-self:end; }
}
.msg-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.5px;
  flex-shrink:0;
}
.msg-main{
  min-width:0;
  cursor:pointer;
}
.msg-line1{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:3px;
}
.msg-name{
  font-size:.92rem;
  color:#1e2b37;
  font-weight:700;
}
.msg-email{
  font-size:.78rem;
  color:#8797a6;
}
.msg-badge{
  font-size:.62rem;
  font-weight:800;
  padding:2px 7px;
  border-radius:20px;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.msg-badge.new{ background:#fde5e5; color:#b91c1c; }
.msg-line2{
  font-size:.83rem;
  color:#6b7a88;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.msg-subject{
  font-weight:600;
  color:#3a4d5c;
}
.msg-preview{
  color:#8797a6;
}
.msg-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.msg-time{
  font-size:.75rem;
  color:#8797a6;
  white-space:nowrap;
}
.msg-actions{
  display:flex;
  gap:4px;
  flex-shrink:0;
}
.msg-actions .icon-btn{
  width:32px;
  height:32px;
  font-size:.75rem;
}

.msg-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,32,.55);
  backdrop-filter:blur(4px);
  z-index:1500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:.2s;
}
.msg-modal-overlay.open{
  opacity:1;
  visibility:visible;
}
.msg-modal{
  background:#fff;
  border-radius:18px;
  max-width:640px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  padding:32px 36px;
  position:relative;
  transform:translateY(10px) scale(.98);
  transition:.25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.35);
}
.msg-modal-overlay.open .msg-modal{
  transform:translateY(0) scale(1);
}
@media (max-width:600px){
  .msg-modal{ padding:24px 22px; }
}
.msg-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:34px;
  height:34px;
  border-radius:8px;
  background:#f4f7fa;
  border:none;
  color:#6b7a88;
  cursor:pointer;
  font-size:.9rem;
  transition:.15s;
}
.msg-modal-close:hover{ background:#fde5e5; color:#dc2626; }
.mm-head{
  display:flex;
  align-items:center;
  gap:16px;
  padding-bottom:18px;
  border-bottom:1px solid #f0f4f8;
  margin-bottom:16px;
}
.mm-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#f9a826;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  font-weight:800;
  flex-shrink:0;
}
.mm-head-info{ min-width:0; }
.mm-head-info h2{
  font-size:1.2rem;
  color:#0b3b5c;
  font-weight:800;
  letter-spacing:-0.4px;
  margin-bottom:3px;
}
.mm-head-info p{
  font-size:.82rem;
  color:#6b7a88;
}
.mm-meta{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:.78rem;
  color:#8797a6;
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px dashed #e6edf3;
}
.mm-meta i{ color:#f9a826; margin-right:4px; }
.mm-subject{
  font-size:1.05rem;
  color:#0b3b5c;
  font-weight:700;
  margin-bottom:12px;
  padding-left:12px;
  border-left:4px solid #f9a826;
}
.mm-body{
  font-size:.94rem;
  line-height:1.75;
  color:#3a4d5c;
  white-space:pre-wrap;
  word-wrap:break-word;
  margin-bottom:22px;
  padding:16px 18px;
  background:#f8fbfe;
  border-radius:10px;
  border:1px solid #e6edf3;
}
.mm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:18px;
  border-top:1px solid #f0f4f8;
  flex-wrap:wrap;
}


/* ============================================================
   29. FACULTY — TIMETABLE (Days = Rows, Periods = Columns)
   ============================================================ */
.tt-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:22px;
}
.ts-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:16px 18px;
  transition:.2s;
}
.ts-card:hover{
  border-color:#0b3b5c;
  box-shadow:0 10px 24px -14px rgba(11,59,92,.2);
}
.ts-icon{
  width:46px;
  height:46px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
  flex-shrink:0;
}
.ts-icon.blue  { background:#e0ecf9; color:#0b3b5c; }
.ts-icon.amber { background:#fff2dd; color:#b26a00; }
.ts-icon.green { background:#e5f5eb; color:#0e7c4f; }
.ts-icon.purple{ background:#eee6fa; color:#6b34b3; }
.ts-card > div:last-child{ display:flex; flex-direction:column; line-height:1.2; }
.ts-card span{
  font-size:.72rem;
  color:#8797a6;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.ts-card strong{
  font-size:1.4rem;
  color:#1e2b37;
  font-weight:800;
  margin-top:2px;
  line-height:1;
}

.tt-scroll{
  overflow-x:auto;
  border-radius:14px;
  border:1px solid #e6edf3;
  background:#fff;
}
.tt-table{
  width:100%;
  min-width:900px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.tt-table thead th{
  background:#0b3b5c;
  color:#fff;
  font-weight:700;
  text-align:center;
  padding:14px 8px;
  border-right:1px solid rgba(255,255,255,.1);
  position:sticky;
  top:0;
  z-index:2;
}
.tt-table thead th:last-child{ border-right:none; }
.tt-table thead th.tt-corner{
  background:#082c44;
  text-align:left;
  padding-left:18px;
  width:130px;
  border-right:2px solid rgba(255,255,255,.15);
}
.tt-corner span{
  display:block;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.tt-corner small{
  display:block;
  font-weight:500;
  font-size:.65rem;
  opacity:.55;
  margin-top:3px;
  letter-spacing:.5px;
}
.tt-table thead th.tt-period-head{ min-width:130px; }
.tph-num{
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.5px;
  margin-bottom:3px;
}
.tph-time{
  font-size:.68rem;
  font-weight:500;
  opacity:.75;
  letter-spacing:.3px;
  font-variant-numeric:tabular-nums;
}

.tt-table tbody th.tt-day{
  background:#f8fafc;
  border-right:2px solid #e6edf3;
  border-bottom:1px solid #eef2f6;
  padding:16px 18px;
  text-align:left;
  vertical-align:middle;
  width:130px;
  position:sticky;
  left:0;
  z-index:1;
}
.td-name{
  font-size:1rem;
  font-weight:800;
  color:#0b3b5c;
  letter-spacing:-0.2px;
  text-transform:capitalize;
}
.td-tag{
  display:inline-block;
  background:#f9a826;
  color:#0b3b5c;
  font-size:.6rem;
  font-weight:800;
  padding:2px 8px;
  border-radius:10px;
  margin-top:5px;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.tt-table tbody th.tt-day.today{
  background:#fff7e6;
  border-right-color:#f9a826;
}
.tt-table tbody th.tt-day.today .td-name{ color:#b26a00; }

.tt-table tbody td.tt-cell-wrap{
  padding:6px;
  border-bottom:1px solid #eef2f6;
  border-right:1px solid #f4f7fa;
  vertical-align:middle;
  height:100px;
  transition:background .15s;
}
.tt-table tbody td.tt-cell-wrap:last-child{ border-right:none; }
.tt-table tbody tr:last-child td,
.tt-table tbody tr:last-child th{ border-bottom:none; }
.tt-cell-wrap.today-col{ background:#fffbef; }

.tt-entry{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:100%;
  padding:10px 6px;
  background:linear-gradient(135deg,#eef4f9,#f8fbfe);
  border:1px solid #dce7f0;
  border-top:3px solid #0b3b5c;
  border-radius:8px;
  text-align:center;
  transition:.15s;
}
.tt-entry:hover{
  background:linear-gradient(135deg,#e0ecf9,#eef4f9);
  border-top-color:#f9a826;
  transform:translateY(-1px);
  box-shadow:0 6px 14px -8px rgba(11,59,92,.25);
}
.tte-subject{
  font-size:.82rem;
  font-weight:700;
  color:#0b3b5c;
  line-height:1.25;
  letter-spacing:-0.1px;
}
.tte-class{
  display:inline-block;
  background:#0b3b5c;
  color:#f9a826;
  font-size:.65rem;
  font-weight:800;
  padding:2px 9px;
  border-radius:20px;
  letter-spacing:.4px;
  margin-top:2px;
}
.tte-room{
  font-size:.68rem;
  color:#6b7a88;
  font-weight:600;
  margin-top:2px;
}
.tte-room i{
  font-size:.6rem;
  margin-right:2px;
  color:#f9a826;
}
.tt-free{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  color:#d5dee5;
  font-weight:600;
  font-size:1.4rem;
  letter-spacing:2px;
}
@media (max-width:900px){
  .tt-table{ min-width:760px; }
  .tt-table thead th.tt-corner,
  .tt-table tbody th.tt-day{ width:100px; padding:12px; }
  .tt-table thead th.tt-period-head{ min-width:110px; }
  .tph-num{ font-size:.85rem; }
  .tph-time{ font-size:.6rem; }
  .tt-entry{ padding:6px 4px; }
  .tte-subject{ font-size:.74rem; }
  .td-name{ font-size:.88rem; }
}

/* Today's schedule list */
.today-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.today-row-item{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  background:#f8fbfe;
  border-radius:12px;
  border-left:4px solid #f9a826;
  transition:.15s;
}
.today-row-item:hover{
  background:#fff;
  box-shadow:0 8px 20px -14px rgba(11,59,92,.25);
}
@media (max-width:640px){
  .today-row-item{ grid-template-columns:auto 1fr; gap:12px; }
  .today-row-item .tr-num{ display:none; }
  .today-row-item .btn-soft-sm{ grid-column:1/-1; justify-content:center; }
}
.tr-time{
  display:flex;
  flex-direction:column;
  min-width:70px;
  text-align:center;
  font-weight:800;
  color:#0b3b5c;
  line-height:1.1;
}
.tr-time span{ font-size:1rem; }
.tr-time small{
  font-size:.7rem;
  color:#8797a6;
  font-weight:600;
  margin-top:2px;
}
.tr-num{
  width:44px;
  height:44px;
  border-radius:12px;
  background:#0b3b5c;
  color:#f9a826;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:.9rem;
  flex-shrink:0;
}
.tr-info{ min-width:0; }
.tr-info strong{
  display:block;
  font-size:.95rem;
  color:#1e2b37;
  font-weight:700;
  margin-bottom:3px;
}
.tr-info small{
  font-size:.78rem;
  color:#6b7a88;
}
.btn-soft-sm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 14px;
  background:#0b3b5c !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  font-size:.78rem;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s;
  white-space:nowrap;
  -webkit-appearance:none;
  appearance:none;
  text-decoration:none;
  line-height:1.2;
}
.btn-soft-sm:hover{ background:#1b5a7a !important; }

/* Breakdown by class */
.class-breakdown{
  display:grid;
  gap:16px;
}
.cb-block{
  border:1px solid #e6edf3;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.cb-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:#f8fafc;
  border-bottom:1px solid #e6edf3;
}
.cb-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  background:#0b3b5c;
  color:#fff;
  border-radius:8px;
  font-size:.78rem;
  font-weight:700;
}
.cb-count{
  font-size:.75rem;
  color:#8797a6;
  font-weight:600;
}
.cb-list{ display:flex; flex-direction:column; }
.cb-item{
  display:grid;
  grid-template-columns:50px 50px 1fr 120px 70px;
  gap:12px;
  padding:10px 16px;
  border-bottom:1px solid #f0f4f8;
  align-items:center;
  font-size:.82rem;
}
.cb-item:last-child{ border-bottom:none; }
.cb-item:hover{ background:#f8fbfe; }
.cb-day{
  font-weight:800;
  color:#0b3b5c;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.cb-period{
  background:#e0ecf9;
  color:#0b3b5c;
  font-weight:800;
  font-size:.7rem;
  text-align:center;
  padding:3px 0;
  border-radius:6px;
}
.cb-subject{ color:#1e2b37; font-weight:600; }
.cb-time{
  font-size:.75rem;
  color:#6b7a88;
  font-variant-numeric:tabular-nums;
}
.cb-room{
  font-size:.72rem;
  color:#8797a6;
  text-align:right;
}
@media (max-width:700px){
  .cb-item{ grid-template-columns:auto 1fr; gap:6px 12px; }
  .cb-period,
  .cb-time,
  .cb-room{ grid-column:2; }
  .cb-subject{ grid-column:2; font-weight:700; }
  .cb-time{ font-size:.7rem; opacity:.7; }
  .cb-room{ text-align:left; }
}


/* ============================================================
   30. RESPONSIVE (General)
   ============================================================ */

/* Public site */
@media (max-width:900px){
  .nav-menu a{
    padding:6px 8px;
    font-size:.78rem;
  }
}
@media (max-width:680px){
  .main-header .container{
    flex-direction:column;
    align-items:flex-start;
  }
  .nav-menu{
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
  }
}

/* Home page */
@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr; gap:50px; }
  .hero-text h1{ font-size:2.5rem; }
  .hero-visual{ height:320px; }
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .about-visual{ height:380px; }
  .two-col-home{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .home-hero{ padding:60px 0 100px; margin:-24px -16px 0; }
  .hero-text h1{ font-size:2rem; }
  .hero-text p{ font-size:1rem; }
  .hero-visual{ height:260px; }
  .hero-card{ display:none; }
  .hero-stats{ gap:20px; }
  .hero-stats strong{ font-size:1.4rem; }
  .section-head h2{ font-size:1.7rem; }
  .about-text h2{ font-size:1.7rem; }
  .about-section,
  .courses-section,
  .notice-section,
  .testimonial-section{
    padding:40px 20px;
    margin:20px 12px;
  }
  .cta-inner{
    padding:36px 24px;
    flex-direction:column;
    text-align:center;
  }
  .cta-inner h2{ font-size:1.5rem; }
}

/* Admin sidebar */
@media (max-width:960px){
  .admin-sidebar{
    position:fixed;
    left:-280px;
    top:0;
    z-index:999;
    transition:left .25s ease;
    width:260px;
  }
  .admin-sidebar.open{ left:0; }
  .admin-main{ padding:20px 18px; }
  .admin-mobile-toggle{ display:flex; align-items:center; justify-content:center; }
  .admin-main{ padding-top:70px; }
}

/* Pagination */
@media (max-width:900px){
  .pagination{
    grid-template-columns:1fr;
    justify-items:center;
    gap:12px;
  }
  .pg-jump{ justify-self:center; }
}

/* Toolbar */
@media (max-width:768px){
  .students-toolbar{ padding:14px; }
  .search-box input{ min-width:180px; }
}

/* Page head + table */
@media (max-width:900px){
  .pager{
    grid-template-columns:1fr;
    justify-items:center;
    gap:12px;
  }
  .pager-jump{ justify-self:center; }
  .page-head{ flex-direction:column; }
  .ph-right{ width:100%; }
  .ph-right .btn-soft,
  .ph-right .btn-primary{ flex:1; justify-content:center; }
}
@media (max-width:640px){
  .toolbar{ padding:12px; }
  .search-box{ max-width:100%; flex-basis:100%; }
  .tb-select{ flex:1; }
  .modern-table thead{ display:none; }
  .modern-table tbody tr{
    display:block;
    padding:14px;
    border-bottom:1px solid #e6edf3;
  }
  .modern-table tbody td{
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    border:none;
  }
  .modern-table tbody td::before{
    content:attr(data-label);
    font-size:.75rem;
    color:#8797a6;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
  }
  .student-cell{ justify-content:flex-end; }
}

/* Dashboard */
@media (max-width:640px){
  .kpi-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .kpi-card{ padding:16px; gap:12px; }
  .kpi-icon{ width:44px; height:44px; font-size:1.2rem; }
  .kpi-value{ font-size:1.4rem; }
  .att-circle{ width:110px; height:110px; }
  .att-circle span{ font-size:1.3rem; }
  .bar-row{ grid-template-columns:60px 1fr 32px; }
}

/* Print — Faculty timetable */
@media print{
  .student-sidebar,
  .page-head .ph-right,
  .today-row-item .btn-soft-sm,
  .btn-soft{ display:none !important; }
  .student-main{ padding:0 !important; }
  .dash-card{ box-shadow:none; border:1px solid #999; }
  .tt-table{ min-width:100%; }
  .tt-table thead th{
    background:#0b3b5c !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .tt-table tbody th.tt-day{
    background:#f0f4f8 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .tt-entry{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}/* ============================================================
   EVENTS PAGE (Public)
   ============================================================ */

/* ---------- Hero ---------- */
.events-hero{
  background:linear-gradient(135deg,#0b3b5c 0%,#1b5a7a 100%);
  color:#fff;
  padding:44px 0 52px;
  text-align:center;
  border-radius:0 0 24px 24px;
  margin:-24px -24px 0;
  position:relative;
  overflow:hidden;
}
.events-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(249,168,38,.15) 0,transparent 45%),
             radial-gradient(circle at 80% 70%,rgba(255,255,255,.06) 0,transparent 40%);
  pointer-events:none;
}
.events-hero .container{ position:relative; z-index:2; }
.eh-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(249,168,38,.15);
  color:#f9a826;
  padding:6px 14px;
  border-radius:50px;
  font-size:.75rem;
  font-weight:600;
  margin-bottom:12px;
  border:1px solid rgba(249,168,38,.35);
}
.events-hero h1{
  font-size:2rem;
  font-weight:800;
  letter-spacing:-0.8px;
  margin-bottom:6px;
}
.events-hero p{
  font-size:.95rem;
  opacity:.85;
  max-width:600px;
  margin:0 auto;
}

/* ---------- Toolbar ---------- */
.events-toolbar-wrap{
  margin-top:-24px;
  position:relative;
  z-index:5;
  padding-bottom:18px;
}
.events-toolbar{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:14px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  box-shadow:0 8px 24px -14px rgba(11,59,92,.2);
}
.et-time-tabs{
  display:inline-flex;
  gap:4px;
  background:#f4f7fa;
  padding:4px;
  border-radius:10px;
}
.et-time-tab{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:8px;
  font-size:.82rem;
  font-weight:600;
  color:#6b7a88;
  transition:.15s;
  white-space:nowrap;
}
.et-time-tab:hover{ color:#0b3b5c; }
.et-time-tab.active{
  background:#fff;
  color:#0b3b5c;
  box-shadow:0 2px 6px rgba(11,59,92,.08);
}
.et-time-tab i{ font-size:.75rem; }

.et-search{
  position:relative;
  display:flex;
  align-items:center;
  min-width:240px;
}
.et-search i{
  position:absolute;
  left:12px;
  color:#8797a6;
  font-size:.85rem;
}
.et-search input{
  width:100%;
  padding:9px 14px 9px 34px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.85rem;
  font-family:inherit;
  background:#fbfcfd;
  transition:.15s;
}
.et-search input:focus{
  outline:none;
  border-color:#0b3b5c;
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}

.et-cats{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:14px;
  padding:0 4px;
}
.et-cat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:20px;
  font-size:.78rem;
  font-weight:600;
  color:#6b7a88;
  background:#f4f7fa;
  transition:.15s;
}
.et-cat:hover{ background:#e0ecf9; color:#0b3b5c; }
.et-cat.active{
  background:#0b3b5c;
  color:#fff;
}
.et-cat i{ font-size:.7rem; }

/* ---------- Section titles ---------- */
.events-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.15rem;
  color:#0b3b5c;
  font-weight:700;
  letter-spacing:-0.3px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:2px solid #f0f4f8;
}
.events-section-title i{ color:#0b3b5c; }
.est-count{
  margin-left:auto;
  font-size:.78rem;
  font-weight:600;
  color:#8797a6;
  background:#f4f7fa;
  padding:3px 10px;
  border-radius:20px;
}

/* ---------- Featured ---------- */
.events-featured-wrap{
  padding:32px 0 0;
}
.featured-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  margin-bottom:40px;
}
@media (min-width:900px){
  .featured-grid{
    grid-template-columns:1.4fr 1fr 1fr;
  }
  .featured-large{
    grid-column:1;
    grid-row:1/3;
  }
}
.featured-card{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:.25s;
  min-height:220px;
}
.featured-card:hover{
  border-color:#0b3b5c;
  box-shadow:0 16px 32px -18px rgba(11,59,92,.25);
  transform:translateY(-3px);
}
.fc-image{
  height:160px;
  background:#e6edf3 center/cover no-repeat;
  position:relative;
  flex-shrink:0;
}
.featured-large .fc-image{
  height:60%;
  min-height:280px;
}
.fc-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(11,59,92,.75));
}
.fc-badge{
  position:absolute;
  top:12px;
  left:12px;
  font-size:.68rem;
  font-weight:800;
  padding:4px 10px;
  border-radius:20px;
  letter-spacing:.5px;
  text-transform:uppercase;
  background:#fff;
  color:#0b3b5c;
}
.fc-badge.live{ background:#dc2626; color:#fff; animation:pulseBadge 1.6s infinite; }
.fc-badge.today{ background:#0e7c4f; color:#fff; }
.fc-badge.soon{ background:#f9a826; color:#0b3b5c; }
.fc-badge.upcoming{ background:#e0ecf9; color:#0b3b5c; }
.fc-badge.past{ background:#f4f7fa; color:#8797a6; }
@keyframes pulseBadge{
  0%,100%{ opacity:1; }
  50%{ opacity:.65; }
}
.fc-cat{
  position:absolute;
  top:12px;
  right:12px;
  color:#fff;
  font-size:.65rem;
  font-weight:700;
  padding:3px 9px;
  border-radius:20px;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.fc-cat i{ font-size:.6rem; margin-right:3px; }

.fc-body{
  padding:16px 18px 18px;
  display:flex;
  gap:14px;
  flex:1;
}
.featured-large .fc-body{
  padding:20px 22px;
}
.fc-date{
  width:52px;
  min-width:52px;
  height:52px;
  border-radius:12px;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#f9a826;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:800;
  line-height:1;
  flex-shrink:0;
}
.fc-date span{ font-size:1.15rem; }
.fc-date small{ font-size:.6rem; text-transform:uppercase; margin-top:2px; }
.fc-info{
  min-width:0;
  flex:1;
}
.fc-info h3{
  font-size:1rem;
  color:#0b3b5c;
  font-weight:700;
  line-height:1.35;
  margin-bottom:6px;
}
.fc-info p{
  font-size:.82rem;
  color:#6b7a88;
  line-height:1.55;
  margin-bottom:8px;
}
.fc-info small{
  font-size:.75rem;
  color:#8797a6;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.fc-info small i{ color:#f9a826; font-size:.7rem; }

/* ---------- Events list ---------- */
.events-list-wrap{
  padding:20px 0 60px;
}
.events-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
}
@media (max-width:560px){
  .events-grid{ grid-template-columns:1fr; }
}

.event-card-page{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:.25s;
}
.event-card-page:hover{
  border-color:#0b3b5c;
  transform:translateY(-4px);
  box-shadow:0 16px 32px -18px rgba(11,59,92,.25);
}
.event-card-page.past{ opacity:.75; }
.event-card-page.past:hover{ opacity:1; }

.ecp-image{
  height:170px;
  background:#e6edf3 center/cover no-repeat;
  position:relative;
  flex-shrink:0;
}
.ecp-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(11,59,92,.15) 0,transparent 30%,rgba(11,59,92,.75) 100%);
}
.ecp-badge{
  position:absolute;
  top:12px;
  left:12px;
  font-size:.65rem;
  font-weight:800;
  padding:3px 9px;
  border-radius:20px;
  letter-spacing:.4px;
  text-transform:uppercase;
  background:#fff;
  color:#0b3b5c;
}
.ecp-badge.live{ background:#dc2626; color:#fff; animation:pulseBadge 1.6s infinite; }
.ecp-badge.today{ background:#0e7c4f; color:#fff; }
.ecp-badge.soon{ background:#f9a826; color:#0b3b5c; }
.ecp-badge.upcoming{ background:rgba(255,255,255,.95); color:#0b3b5c; }
.ecp-badge.past{ background:rgba(255,255,255,.8); color:#6b7a88; }
.ecp-cat{
  position:absolute;
  top:12px;
  right:12px;
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  padding:3px 9px;
  border-radius:20px;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.ecp-cat i{ font-size:.55rem; margin-right:3px; }

.ecp-date-chip{
  position:absolute;
  bottom:-18px;
  left:18px;
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  min-width:56px;
  height:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:800;
  line-height:1;
  box-shadow:0 8px 20px -10px rgba(11,59,92,.25);
}
.ecp-date-chip span{
  font-size:1.25rem;
  color:#0b3b5c;
}
.ecp-date-chip small{
  font-size:.6rem;
  color:#f9a826;
  margin-top:2px;
  letter-spacing:.6px;
}

.ecp-body{
  padding:30px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.ecp-body h3{
  font-size:.98rem;
  color:#0b3b5c;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-0.2px;
}
.ecp-body p{
  font-size:.83rem;
  color:#6b7a88;
  line-height:1.55;
  flex:1;
}
.ecp-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  padding-top:12px;
  border-top:1px solid #f0f4f8;
  font-size:.75rem;
  color:#8797a6;
}
.ecp-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.ecp-meta i{
  color:#f9a826;
  font-size:.75rem;
}

/* ---------- Empty ---------- */
.events-empty{
  text-align:center;
  padding:70px 20px;
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:16px;
}
.events-empty i{
  font-size:2.5rem;
  color:#d5dee5;
  margin-bottom:14px;
  display:block;
}
.events-empty h3{
  color:#1e2b37;
  font-size:1.1rem;
  margin-bottom:6px;
}
.events-empty p{
  color:#8797a6;
  font-size:.9rem;
}
.events-empty a{
  color:#0b3b5c;
  font-weight:700;
  text-decoration:underline;
}

/* ---------- Pager ---------- */
.events-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:34px;
  flex-wrap:wrap;
}
.ep-arrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border-radius:9px;
  background:#fff;
  border:1px solid #e6edf3;
  color:#0b3b5c;
  font-size:.82rem;
  font-weight:600;
  transition:.15s;
}
.ep-arrow:hover{ background:#0b3b5c; color:#fff; border-color:#0b3b5c; }
.ep-arrow.disabled{ opacity:.4; pointer-events:none; }
.ep-arrow i{ font-size:.7rem; }

.ep-nums{
  display:flex;
  gap:4px;
  align-items:center;
}
.ep-num{
  min-width:36px;
  height:36px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:600;
  color:#6b7a88;
  background:#fff;
  border:1px solid #e6edf3;
  transition:.15s;
}
.ep-num:hover{ background:#f4f7fa; color:#0b3b5c; }
.ep-num.active{ background:#0b3b5c; color:#fff; border-color:#0b3b5c; }
.ep-dots{ color:#9aa8b4; padding:0 4px; font-weight:700; }

/* ---------- CTA ---------- */
.events-cta{ padding:20px 0 70px; }
.events-cta-inner{
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#fff;
  border-radius:20px;
  padding:40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.events-cta-inner::before{
  content:"";
  position:absolute;
  top:-40%;
  right:-5%;
  width:400px;
  height:400px;
  background:radial-gradient(circle,rgba(249,168,38,.2) 0,transparent 70%);
  pointer-events:none;
}
.events-cta-inner > *{ position:relative; z-index:2; }
.events-cta-inner h2{
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-0.6px;
  margin-bottom:6px;
}
.events-cta-inner p{
  font-size:.95rem;
  opacity:.85;
}
.events-cta-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
@media (max-width:640px){
  .events-cta-inner{ padding:30px 24px; flex-direction:column; text-align:center; }
  .events-cta-inner h2{ font-size:1.3rem; }
}/* ============================================================
   ADMIN — EVENTS PAGE
   ============================================================ */

/* Date block in table */
.date-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#f8fafc;
  border:1px solid #e6edf3;
  border-radius:10px;
  padding:6px 10px;
  width:64px;
  line-height:1;
}
.db-day{
  font-size:1.15rem;
  font-weight:800;
  color:#0b3b5c;
}
.db-mon{
  font-size:.62rem;
  font-weight:700;
  color:#f9a826;
  letter-spacing:.6px;
  margin-top:2px;
}
.db-yr{
  font-size:.6rem;
  color:#8797a6;
  margin-top:1px;
}

/* Event cell with thumbnail */
.event-cell{
  display:flex;
  gap:12px;
  align-items:center;
}
.event-thumb{
  width:56px;
  height:56px;
  border-radius:10px;
  background:#e0ecf9 center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0b3b5c;
  font-size:1.2rem;
  flex-shrink:0;
  border:1px solid #e6edf3;
}
.event-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
  font-weight:600;
  color:#1e2b37;
  line-height:1.35;
  margin-bottom:3px;
}
.event-title i{ font-size:.75rem; }
.event-snippet{
  font-size:.75rem;
  color:#8797a6;
  line-height:1.4;
  margin-bottom:3px;
}
.event-time{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.72rem;
  color:#6b7a88;
}
.event-time i{ color:#f9a826; font-size:.7rem; }

/* Category pill */
.cat-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:20px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
}

/* Row highlight while editing */
.modern-table tbody tr.row-editing{
  background:#fffbeb;
  box-shadow:inset 4px 0 0 #f9a826;
}
.modern-table tbody tr.row-editing:hover{
  background:#fff7e0;
}

/* Responsive — event cell stacks on mobile */
@media (max-width:640px){
  .event-cell{ flex-direction:column; align-items:flex-start; gap:8px; }
  .date-block{ width:52px; padding:5px 8px; }
  .db-day{ font-size:1rem; }
  .event-thumb{ width:44px; height:44px; }
}/* ============================================================
   CAMPAIGN MODULE — Shared Styles
   ============================================================ */

/* Filter bar */
.campaign-filter-bar{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  background:#fff;
  padding:16px 18px;
  border:1px solid #e6edf3;
  border-radius:14px;
  margin-bottom:20px;
}
.cfb-group{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:150px;
}
.cfb-group label{
  font-size:.72rem;
  font-weight:700;
  color:#8797a6;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.cfb-group input,
.cfb-group select{
  padding:9px 12px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.85rem;
  font-family:inherit;
  background:#fbfcfd;
}
.cfb-group input:focus,
.cfb-group select:focus{
  outline:none;
  border-color:#0b3b5c;
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}

/* Performer list (dashboard) */
.performer-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.performer-item{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  transition:.15s;
}
.performer-item:hover{ background:#f8fbfe; }
.pi-rank{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#f4f7fa;
  color:#6b7a88;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:.85rem;
}
.pi-rank.gold{ background:#fff7e0; color:#b26a00; }
.pi-rank.silver{ background:#f0f4f8; color:#5a6a78; }
.pi-rank.bronze{ background:#fdf0e2; color:#8a4f1c; }
.pi-info strong{
  display:block;
  font-size:.88rem;
  color:#1e2b37;
  font-weight:700;
}
.pi-info small{
  font-size:.72rem;
  color:#8797a6;
}
.pi-value{
  font-size:1.4rem;
  font-weight:800;
  color:#0b3b5c;
  line-height:1;
}

/* Campaign entry form */
.campaign-form .form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-bottom:14px;
}
.campaign-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.82rem;
  font-weight:600;
  color:#4a5f6e;
  margin-bottom:12px;
}
.campaign-form label .req{ color:#dc2626; }
.campaign-form input,
.campaign-form select,
.campaign-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.875rem;
  font-family:inherit;
  background:#fbfcfd;
  color:#1e2b37;
  transition:.15s;
}
.campaign-form input:focus,
.campaign-form select:focus,
.campaign-form textarea:focus{
  outline:none;
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}
.campaign-form textarea{ resize:vertical; min-height:80px; }

/* Recent contacts list */
.recent-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.recent-item{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:10px;
  transition:.15s;
}
.recent-item:hover{ background:#f8fbfe; }
.ri-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#f9a826;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.85rem;
}
.ri-body strong{
  display:block;
  font-size:.85rem;
  color:#1e2b37;
  font-weight:600;
}
.ri-body small{
  font-size:.72rem;
  color:#8797a6;
}
.ri-status{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:flex-end;
}
.ri-status small{
  font-size:.68rem;
  color:#8797a6;
}

/* Pills for statuses */
.pill.contacted{ background:#e0ecf9; color:#0b3b5c; }
.pill.interested{ background:#e5f5eb; color:#0e7c4f; }
.pill.pending{ background:#fff2dd; color:#b26a00; }
.pill.joined{ background:#e0ecf9; color:#0b3b5c; font-weight:700; }
.pill.not_interested{ background:#fde5e5; color:#b91c1c; }
.pill.not_reachable{ background:#f4f7fa; color:#6b7a88; }

/* Cell badge + link */
.cell-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  padding:3px 9px;
  background:#eef4f9;
  color:#0b3b5c;
  border-radius:20px;
  font-weight:700;
  font-size:.8rem;
  transition:.15s;
}
.cell-link:hover{ background:#0b3b5c; color:#fff; }
.cell-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  padding:3px 9px;
  border-radius:20px;
  font-weight:700;
  font-size:.8rem;
}
.cell-badge.green{ background:#e5f5eb; color:#0e7c4f; }
.cell-badge.blue{ background:#e0ecf9; color:#0b3b5c; }
.cell-badge.red{ background:#fde5e5; color:#b91c1c; }
.cell-badge.amber{ background:#fff2dd; color:#b26a00; }

/* Achievement bar */
.ach-bar{
  position:relative;
  height:20px;
  background:#f0f4f8;
  border-radius:10px;
  overflow:hidden;
  min-width:80px;
}
.ach-fill{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  background:linear-gradient(90deg,#0e7c4f,#0b3b5c);
  border-radius:10px;
  transition:.3s;
}
.ach-text{
  position:relative;
  z-index:1;
  font-size:.7rem;
  font-weight:700;
  color:#fff;
  line-height:20px;
  display:block;
  text-align:center;
  mix-blend-mode:difference;
}

/* Summary cards */
.summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-bottom:22px;
}
.summary-card{
  background:#fff;
  border:1px solid #e6edf3;
  border-left:4px solid #0b3b5c;
  border-radius:14px;
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.summary-card.blue{ border-left-color:#0b3b5c; }
.summary-card.green{ border-left-color:#0e7c4f; }
.summary-card.amber{ border-left-color:#b26a00; }
.summary-card span{
  font-size:.72rem;
  color:#8797a6;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.summary-card strong{
  font-size:2rem;
  font-weight:800;
  color:#1e2b37;
  line-height:1;
  margin:4px 0;
}
.summary-card small{
  font-size:.75rem;
  color:#8797a6;
}

/* Status breakdown */
.status-breakdown{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.sb-row{
  display:grid;
  grid-template-columns:120px 1fr 100px;
  gap:14px;
  align-items:center;
}
.sb-label{
  font-size:.85rem;
  font-weight:600;
  color:#1e2b37;
}
.sb-track{
  height:10px;
  background:#f0f4f8;
  border-radius:6px;
  overflow:hidden;
}
.sb-fill{
  height:100%;
  border-radius:6px;
  transition:.4s;
}
.sb-value{
  font-size:.85rem;
  font-weight:700;
  color:#1e2b37;
  text-align:right;
}
.sb-value small{
  color:#8797a6;
  font-weight:500;
}

/* Mini pager */
.mini-pager{
  display:flex;
  justify-content:center;
  gap:4px;
  margin-top:16px;
}
.mp-btn{
  min-width:32px;
  height:32px;
  border-radius:8px;
  background:#f4f7fa;
  color:#6b7a88;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.82rem;
  font-weight:600;
  transition:.15s;
}
.mp-btn.active,
.mp-btn:hover{
  background:#0b3b5c;
  color:#fff;
}

/* Responsive */
@media (max-width:640px){
  .campaign-filter-bar{ padding:12px; }
  .cfb-group{ min-width:100%; }
  .sb-row{ grid-template-columns:1fr; gap:6px; }
  .sb-value{ text-align:left; }
}
/* ============================================================
   FACULTY — MY LEADS PAGE
   ============================================================ */

/* Status filter chips */
.lead-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.lf-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:20px;
  font-size:.82rem;
  font-weight:600;
  color:#4a5f6e;
  transition:.15s;
  white-space:nowrap;
}
.lf-chip:hover{
  border-color:#0b3b5c;
  color:#0b3b5c;
  transform:translateY(-1px);
}
.lf-chip.active{
  background:#0b3b5c;
  border-color:#0b3b5c;
  color:#fff;
}
.lf-chip i{ font-size:.75rem; }
.lf-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:20px;
  padding:0 7px;
  background:rgba(0,0,0,.06);
  border-radius:20px;
  font-size:.7rem;
  font-weight:800;
}
.lf-chip.active .lf-count{
  background:rgba(255,255,255,.25);
  color:#fff;
}

/* Search bar */
.lead-search-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  background:#fff;
  padding:12px 16px;
  border:1px solid #e6edf3;
  border-radius:12px;
  margin-bottom:18px;
}
.lsb-input{
  position:relative;
  display:flex;
  align-items:center;
  flex:1;
  min-width:240px;
}
.lsb-input i{
  position:absolute;
  left:13px;
  color:#8797a6;
  font-size:.85rem;
}
.lsb-input input{
  width:100%;
  padding:10px 14px 10px 36px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.875rem;
  font-family:inherit;
  background:#fbfcfd;
  transition:.15s;
}
.lsb-input input:focus{
  outline:none;
  border-color:#0b3b5c;
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}

/* Info strip */
.leads-info{
  font-size:.85rem;
  color:#6b7a88;
  margin-bottom:14px;
  padding:0 4px;
}
.leads-info strong{ color:#1e2b37; font-weight:700; }

/* Leads grid */
.leads-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
  margin-bottom:24px;
}
@media (max-width:560px){
  .leads-grid{ grid-template-columns:1fr; }
}

/* Lead card */
.lead-card{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:14px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:.2s;
}
.lead-card:hover{
  border-color:#0b3b5c;
  box-shadow:0 12px 24px -14px rgba(11,59,92,.25);
  transform:translateY(-2px);
}

.lc-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.lc-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:.9rem;
  flex-shrink:0;
  letter-spacing:.5px;
}
.lc-info{
  flex:1;
  min-width:0;
}
.lc-info h3{
  font-size:.95rem;
  color:#1e2b37;
  font-weight:700;
  margin-bottom:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lc-info small{
  font-size:.75rem;
  color:#8797a6;
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lc-info small i{ font-size:.7rem; color:#f9a826; }

.lc-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 11px;
  border-radius:20px;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.3px;
  white-space:nowrap;
  flex-shrink:0;
}
.lc-status i{ font-size:.65rem; }

.lc-details{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 0;
  border-top:1px solid #f0f4f8;
  border-bottom:1px solid #f0f4f8;
}
.lc-detail{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color:#4a5f6e;
}
.lc-detail i{
  color:#f9a826;
  font-size:.75rem;
  width:14px;
  text-align:center;
  flex-shrink:0;
}
.lc-detail span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lc-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.78rem;
  color:#6b7a88;
  background:#f8fbfe;
  padding:8px 10px;
  border-radius:8px;
  line-height:1.5;
  font-style:italic;
}
.lc-note i{
  color:#8797a6;
  font-size:.7rem;
  margin-top:3px;
  flex-shrink:0;
}

.lc-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.lc-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:.72rem;
  color:#8797a6;
}
.lc-meta > span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.lc-meta i{ font-size:.7rem; }

.followup-chip{
  padding:2px 8px;
  border-radius:20px;
  background:#e0ecf9;
  color:#0b3b5c;
  font-weight:700;
}
.followup-chip.soon{ background:#fff2dd; color:#b26a00; }
.followup-chip.overdue{ background:#fde5e5; color:#b91c1c; }

.lc-actions{
  display:flex;
  gap:6px;
}
.lc-btn{
  width:34px;
  height:34px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  border:none;
  cursor:pointer;
  transition:.15s;
  background:#f4f7fa;
  color:#6b7a88;
  font-family:inherit;
}
.lc-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px -3px rgba(0,0,0,.15);
}
.lc-btn.call:hover{ background:#0b3b5c; color:#fff; }
.lc-btn.wa:hover{ background:#25d366; color:#fff; }
.lc-btn.update:hover{ background:#f9a826; color:#0b3b5c; }

/* Pager */
.leads-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.lp-arrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border-radius:9px;
  background:#fff;
  border:1px solid #e6edf3;
  color:#0b3b5c;
  font-size:.82rem;
  font-weight:600;
  transition:.15s;
}
.lp-arrow:hover{ background:#0b3b5c; color:#fff; border-color:#0b3b5c; }
.lp-arrow.disabled{ opacity:.4; pointer-events:none; }
.lp-arrow i{ font-size:.7rem; }

.lp-nums{
  display:flex;
  gap:4px;
  align-items:center;
}
.lp-num{
  min-width:36px;
  height:36px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:600;
  color:#6b7a88;
  background:#fff;
  border:1px solid #e6edf3;
  transition:.15s;
}
.lp-num:hover{ background:#f4f7fa; color:#0b3b5c; }
.lp-num.active{ background:#0b3b5c; color:#fff; border-color:#0b3b5c; }
.lp-dots{ color:#9aa8b4; padding:0 4px; font-weight:700; }

@media (max-width:640px){
  .lead-search-bar{ padding:12px; }
  .lsb-input{ min-width:100%; }
  .lead-search-bar .btn-primary,
  .lead-search-bar .btn-ghost{ flex:1; justify-content:center; }
}/* ============================================================
   ADMIN — CAMPAIGN STUDENTS PAGE
   ============================================================ */

/* Reuses .lead-filters, .lf-chip, .lf-count from My Leads page
   (already in CSS from the earlier faculty leads section) */

/* Detail table inside the modal */
.detail-table{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
}
.detail-table th{
  text-align:left;
  padding:8px 0;
  font-weight:600;
  color:#6b7a88;
  width:140px;
  vertical-align:top;
  font-size:.82rem;
}
.detail-table td{
  padding:8px 0;
  color:#1e2b37;
  font-weight:500;
  border-bottom:1px solid #f0f4f8;
  word-break:break-word;
}
.detail-table tr:last-child th,
.detail-table tr:last-child td{ border-bottom:none; }

.detail-note{
  margin-top:14px;
  padding:12px 14px;
  background:#f8fbfe;
  border-radius:10px;
  font-size:.82rem;
  color:#4a5f6e;
  line-height:1.6;
  font-style:italic;
}
.detail-note:empty{ display:none; }
/* ============================================================
   PUBLIC WEBSITE — HEADER
   ============================================================ */

body{ margin:0; }

/* ---------- Top bar ---------- */
.site-topbar{
  background:#0d2438;
  color:rgba(255,255,255,.75);
  font-size:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.site-topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.st-left,
.st-right{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.st-left a,
.st-right a{
  color:rgba(255,255,255,.75);
  text-decoration:none;
  font-weight:500;
  transition:color .15s;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.st-left a:hover,
.st-right a:hover{ color:#f9a826; }
.st-left i,
.st-right i{ font-size:11px; opacity:.7; }
.st-divider{
  width:1px;
  height:12px;
  background:rgba(255,255,255,.15);
  display:inline-block;
}
.st-cta{
  background:rgba(249,168,38,.15);
  color:#f9a826 !important;
  padding:4px 12px;
  border-radius:6px;
  font-weight:600;
}
.st-cta:hover{ background:rgba(249,168,38,.25); color:#f9a826 !important; }

/* ---------- Main header ---------- */
.site-header{
  background:#fff;
  border-bottom:1px solid #e8ecf0;
  position:sticky;
  top:0;
  z-index:900;
  transition:box-shadow .2s ease;
}
.site-header.scrolled{
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:12px 0;
  min-height:64px;
}

/* Logo */
.site-logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.logo-mark{
  width:38px;
  height:38px;
  border-radius:9px;
  background:#0d2438;
  color:#f9a826;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
  letter-spacing:-0.5px;
  flex-shrink:0;
}
.logo-text{
  line-height:1.15;
}
.logo-text strong{
  display:block;
  font-size:16px;
  font-weight:700;
  color:#0d2438;
  letter-spacing:-0.3px;
}
.logo-text small{
  font-size:10px;
  font-weight:500;
  color:#7a8899;
  letter-spacing:.6px;
  text-transform:uppercase;
}

/* Nav */
.site-nav{
  display:flex;
  align-items:center;
  gap:2px;
  flex:1;
  justify-content:center;
}
.site-nav > a,
.nav-drop > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 12px;
  color:#3d4c5c;
  text-decoration:none;
  font-size:13.5px;
  font-weight:500;
  border-radius:6px;
  transition:all .15s;
  white-space:nowrap;
  letter-spacing:-0.05px;
}
.site-nav > a:hover,
.nav-drop > a:hover{
  color:#0d2438;
  background:#f5f7fa;
}
.site-nav > a.active,
.nav-drop > a.active{
  color:#0d2438;
  font-weight:600;
}
.site-nav > a.active::after,
.nav-drop > a.active::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:2px;
  height:2px;
  background:#f9a826;
  border-radius:2px;
}
.nav-drop > a i{
  font-size:9px;
  opacity:.5;
  transition:transform .2s;
}
.nav-drop:hover > a i{
  transform:rotate(180deg);
  opacity:1;
}

/* Dropdown */
.nav-drop{
  position:relative;
}
.nav-drop-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(6px);
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:10px;
  box-shadow:0 12px 32px -12px rgba(0,0,0,.15);
  padding:6px;
  min-width:230px;
  opacity:0;
  visibility:hidden;
  transition:all .18s ease;
  z-index:100;
}
.nav-drop:hover .nav-drop-menu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(4px);
}
.nav-drop-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  color:#3d4c5c;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  border-radius:6px;
  transition:.12s;
}
.nav-drop-menu a:hover{
  background:#f5f7fa;
  color:#0d2438;
}
.nav-drop-menu a i{
  width:14px;
  text-align:center;
  font-size:12px;
  color:#f9a826;
}

/* Header actions */
.site-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.sh-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 18px;
  background:#0d2438;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  transition:all .15s;
  white-space:nowrap;
  letter-spacing:-0.05px;
  border:none;
  cursor:pointer;
}
.sh-btn:hover{
  background:#1b3d59;
  transform:translateY(-1px);
  box-shadow:0 6px 16px -6px rgba(13,36,56,.35);
}
.sh-btn i{ font-size:11px; }

.sh-menu-toggle{
  display:none;
  width:38px;
  height:38px;
  border-radius:8px;
  background:#f5f7fa;
  color:#0d2438;
  border:none;
  font-size:14px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  transition:.15s;
}
.sh-menu-toggle:hover{ background:#e8ecf0; }

/* ---------- Mobile nav ---------- */
.site-mobile-nav{
  position:fixed;
  inset:0;
  z-index:1000;
  background:#fff;
  transform:translateX(100%);
  transition:transform .25s ease;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.site-mobile-nav.open{
  transform:translateX(0);
}
.smn-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  border-bottom:1px solid #e8ecf0;
  font-weight:700;
  color:#0d2438;
  font-size:15px;
  flex-shrink:0;
}
.smn-head button{
  width:34px;
  height:34px;
  border-radius:8px;
  background:#f5f7fa;
  border:none;
  color:#0d2438;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.smn-body{
  padding:10px 12px 40px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.smn-body a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  color:#3d4c5c;
  text-decoration:none;
  font-size:14.5px;
  font-weight:500;
  border-radius:8px;
  transition:.15s;
}
.smn-body a:hover,
.smn-body a:active{
  background:#f5f7fa;
  color:#0d2438;
}
.smn-body a i{
  width:16px;
  text-align:center;
  font-size:13px;
  color:#f9a826;
}
.smn-body hr{
  border:none;
  border-top:1px solid #e8ecf0;
  margin:12px 8px;
}
.smn-cta{
  background:#0d2438 !important;
  color:#fff !important;
  justify-content:center;
  font-weight:600;
  margin-top:8px;
}
.smn-cta i{ color:#f9a826 !important; }
.smn-cta:hover{ background:#1b3d59 !important; }

/* ---------- Main content wrapper ---------- */
.site-main{
  background:#f7f9fb;
  min-height:60vh;
}
.site-main > .container{
  padding-top:24px;
  padding-bottom:60px;
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .site-nav > a,
  .nav-drop > a{
    padding:8px 9px;
    font-size:13px;
  }
}
@media (max-width:960px){
  .site-nav{ display:none; }
  .sh-menu-toggle{ display:flex; }
  .sh-btn span{ display:none; }
  .sh-btn{ padding:9px 12px; }
  .st-left a:not(:first-child){ display:none; }
  .st-divider{ display:none; }
}
@media (max-width:640px){
  .site-topbar{ font-size:11px; padding:6px 0; }
  .st-right a:not(.st-cta){ display:none; }
  .logo-text strong{ font-size:15px; }
  .logo-text small{ font-size:9px; }
  .logo-mark{ width:34px; height:34px; font-size:16px; }
}

/* Push footer content down */
.site-main{ padding-bottom:0; }
/* ============================================================
   ADMIN — TOP HEADER BAR
   ============================================================ */

/* Content wrapper (holds topbar + main) */
.admin-content-wrap{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#f7f9fb;
}

/* ---------- Topbar ---------- */
.admin-topbar{
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border-bottom:1px solid #e8ecf0;
  padding:0 24px;
  height:56px;
  position:sticky;
  top:0;
  z-index:100;
  flex-shrink:0;
}

/* Left — crumbs */
.atb-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
.atb-mobile{
  display:none;
  width:34px;
  height:34px;
  border-radius:8px;
  background:transparent;
  border:none;
  color:#4a5f6e;
  font-size:14px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.atb-crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#7a8899;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.atb-crumb-sep{
  font-size:9px;
  color:#b8c4d1;
}
.atb-crumbs .current{
  color:#0d2438;
  font-weight:600;
}

/* Center — global search */
.atb-search{
  position:relative;
  display:flex;
  align-items:center;
  max-width:380px;
  width:100%;
  flex-shrink:0;
}
.atb-search i{
  position:absolute;
  left:12px;
  color:#8a97a5;
  font-size:12px;
  pointer-events:none;
}
.atb-search input{
  width:100%;
  padding:8px 40px 8px 34px;
  border:1px solid #e3e8ee;
  border-radius:8px;
  background:#f7f9fb;
  color:#1e2b37;
  font-size:13px;
  font-family:inherit;
  transition:all .15s;
}
.atb-search input::placeholder{
  color:#9aa8b6;
}
.atb-search input:focus{
  outline:none;
  background:#fff;
  border-color:#0d2438;
  box-shadow:0 0 0 3px rgba(13,36,56,.06);
}
.atb-search kbd{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  color:#8a97a5;
  font-size:10px;
  font-family:inherit;
  padding:1px 6px;
  border-radius:4px;
  border:1px solid #e3e8ee;
  pointer-events:none;
}

/* Right — actions */
.atb-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.atb-icon-btn{
  position:relative;
  width:36px;
  height:36px;
  border-radius:8px;
  background:transparent;
  border:none;
  color:#4a5f6e;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
}
.atb-icon-btn:hover{
  background:#f5f7fa;
  color:#0d2438;
}
.atb-dot{
  position:absolute;
  top:7px;
  right:7px;
  width:7px;
  height:7px;
  background:#dc2626;
  border-radius:50%;
  border:1.5px solid #fff;
}
.atb-divider{
  width:1px;
  height:22px;
  background:#e8ecf0;
  margin:0 4px;
}

/* Profile button */
.atb-profile{
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px 10px 4px 4px;
  background:transparent;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.atb-profile:hover{ background:#f5f7fa; }
.atb-profile-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#0d2438;
  color:#f9a826;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:12px;
  flex-shrink:0;
  letter-spacing:-0.3px;
}
.atb-profile-info{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  text-align:left;
}
.atb-profile-info strong{
  font-size:12.5px;
  font-weight:600;
  color:#0d2438;
}
.atb-profile-info small{
  font-size:10.5px;
  color:#8a97a5;
  font-weight:500;
}
.atb-profile-caret{
  font-size:8px;
  color:#8a97a5;
  margin-left:2px;
}

/* ---------- Dropdowns ---------- */
.atb-drop{
  position:relative;
}
.atb-drop-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:10px;
  box-shadow:0 16px 40px -14px rgba(13,36,56,.18);
  padding:6px;
  min-width:220px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:all .15s ease;
  z-index:200;
}
.atb-drop:hover .atb-drop-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.atb-drop-wide{ min-width:260px; }
.atb-drop-right{ right:0; }

.atb-drop-head{
  padding:8px 12px 6px;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#8a97a5;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.atb-drop-count{
  background:rgba(249,168,38,.15);
  color:#b26a00;
  padding:1px 7px;
  border-radius:8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}
.atb-drop-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  color:#3d4c5c;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  border-radius:6px;
  transition:.12s;
}
.atb-drop-menu a:hover{
  background:#f5f7fa;
  color:#0d2438;
}
.atb-drop-menu a i{
  width:14px;
  text-align:center;
  font-size:12px;
  color:#8a97a5;
}
.atb-drop-menu a:hover i{ color:#0d2438; }
.atb-drop-menu hr{
  border:none;
  border-top:1px solid #f0f3f7;
  margin:6px 8px;
}
.atb-drop-danger{ color:#dc2626 !important; }
.atb-drop-danger:hover{ background:#fef2f2 !important; }
.atb-drop-danger i{ color:#dc2626 !important; }

.atb-drop-footer{
  display:block;
  padding:10px 12px;
  text-align:center;
  font-size:12px;
  font-weight:600;
  color:#0d2438 !important;
  border-top:1px solid #f0f3f7;
  margin-top:4px;
  border-radius:0 !important;
}
.atb-drop-footer:hover{ background:#f5f7fa !important; }
.atb-empty{
  padding:24px 12px;
  text-align:center;
  color:#8a97a5;
  font-size:12.5px;
}

/* Notifications menu */
.atb-notif{ min-width:320px; padding:6px; }
.atb-notif-item{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px;
  padding:10px 12px !important;
}
.atb-notif-icon{
  width:32px;
  height:32px;
  border-radius:8px;
  background:#eef4f9;
  color:#0d2438;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  flex-shrink:0;
}
.atb-notif-body{
  flex:1;
  min-width:0;
  line-height:1.35;
}
.atb-notif-body strong{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:#0d2438;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.atb-notif-body small{
  display:block;
  font-size:11.5px;
  color:#8a97a5;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.atb-notif-time{
  font-size:10.5px;
  color:#b8c4d1;
  flex-shrink:0;
  margin-top:2px;
}

/* Adjust main content padding when inside wrapper */
.admin-content-wrap .admin-main{
  padding:28px 32px;
  flex:1;
  background:#f7f9fb;
}

/* Responsive */
@media (max-width:960px){
  .atb-mobile{ display:flex; }
  .atb-search{ max-width:240px; }
  .atb-profile-info{ display:none; }
  .atb-profile-caret{ display:none; }
  .atb-profile{ padding:3px; }
  .admin-content-wrap .admin-main{ padding:20px 16px; }
}
@media (max-width:640px){
  .atb-search{ display:none; }
  .atb-crumbs{ font-size:12px; }
  .atb-divider{ display:none; }
}
/* ============================================================
   ADMIN SIDEBAR — BULLETPROOF VERSION (v2)
   Uses .admin-sidebar prefix for maximum specificity
   ============================================================ */

.admin-body{
  display:flex !important;
  min-height:100vh;
  background:#f7f9fb;
  margin:0;
  padding:0;
}

/* ---------- Sidebar container ---------- */
.admin-sidebar{
  width:248px;
  min-width:248px;
  max-width:248px;
  background:#0d2438;
  color:#fff;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  transition:width .2s ease, min-width .2s ease, max-width .2s ease;
  overflow:hidden;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  z-index:50;
}
.admin-sidebar.collapsed{
  width:64px;
  min-width:64px;
  max-width:64px;
}

/* ---------- Brand ---------- */
.admin-sidebar .admin-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.admin-sidebar .admin-brand-icon{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:9px;
  background:#f9a826;
  color:#0d2438;
  font-weight:800;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  letter-spacing:-0.5px;
}
.admin-sidebar .admin-brand-text{
  flex:1;
  min-width:0;
  line-height:1.15;
}
.admin-sidebar .admin-brand-text strong{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:-0.2px;
  color:#fff;
}
.admin-sidebar .admin-brand-text span{
  display:block;
  font-size:9.5px;
  font-weight:500;
  color:rgba(255,255,255,.42);
  letter-spacing:.8px;
  text-transform:uppercase;
  margin-top:2px;
}
.admin-sidebar .admin-brand-collapse{
  width:24px;
  height:24px;
  border-radius:6px;
  background:transparent;
  border:none;
  color:rgba(255,255,255,.35);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  transition:.15s;
  flex-shrink:0;
}
.admin-sidebar .admin-brand-collapse:hover{
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.8);
}

/* ---------- Search ---------- */
.admin-sidebar .admin-search{
  position:relative;
  margin:10px 12px 8px;
  flex-shrink:0;
}
.admin-sidebar .admin-search i{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.35);
  font-size:11px;
  pointer-events:none;
}
.admin-sidebar .admin-search input{
  width:100%;
  padding:7px 28px 7px 28px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  border-radius:7px;
  color:#fff;
  font-size:12px;
  font-family:inherit;
  transition:.15s;
  box-sizing:border-box;
}
.admin-sidebar .admin-search input::placeholder{
  color:rgba(255,255,255,.32);
}
.admin-sidebar .admin-search input:focus{
  outline:none;
  background:rgba(255,255,255,.09);
  border-color:rgba(249,168,38,.4);
}
.admin-sidebar .admin-search kbd{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.4);
  font-size:9.5px;
  font-family:inherit;
  padding:1px 5px;
  border-radius:3px;
  border:none;
  pointer-events:none;
}

/* ---------- Nav ---------- */
.admin-sidebar .admin-nav{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:4px 0 16px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.1) transparent;
}
.admin-sidebar .admin-nav::-webkit-scrollbar{ width:4px; }
.admin-sidebar .admin-nav::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.1);
  border-radius:2px;
}

/* SECTION LABELS — the critical fix */
.admin-sidebar .nav-label{
  display:block !important;
  padding:14px 20px 5px !important;
  font-size:10px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:1.2px !important;
  color:rgba(255,255,255,.32) !important;
  background:transparent !important;
  margin:0 !important;
  line-height:1.2 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  user-select:none;
}
.admin-sidebar .nav-label-count{
  float:right;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.55);
  padding:0 6px;
  border-radius:8px;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}

/* GROUP */
.admin-sidebar .nav-group{
  display:flex;
  flex-direction:column;
  padding:0 8px;
  gap:1px;
  margin:0;
}

/* LINK */
.admin-sidebar .admin-nav a{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:7px 10px !important;
  color:rgba(255,255,255,.66) !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  letter-spacing:-0.05px;
  border-radius:6px !important;
  text-decoration:none !important;
  transition:all .12s ease;
  white-space:nowrap;
  margin:0 !important;
  background:transparent;
  border:none;
  position:relative;
  overflow:hidden;
}
.admin-sidebar .admin-nav a:hover{
  background:rgba(255,255,255,.055) !important;
  color:rgba(255,255,255,.95) !important;
}
.admin-sidebar .admin-nav a.active{
  background:rgba(249,168,38,.12) !important;
  color:#fff !important;
  font-weight:600 !important;
}
.admin-sidebar .admin-nav a.active::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2.5px;
  background:#f9a826;
  border-radius:0 3px 3px 0;
}
.admin-sidebar .admin-nav a i{
  width:16px;
  min-width:16px;
  text-align:center;
  font-size:12.5px;
  opacity:.7;
  flex-shrink:0;
  transition:opacity .12s;
}
.admin-sidebar .admin-nav a.active i{
  opacity:1;
  color:#f9a826;
}
.admin-sidebar .admin-nav a:hover i{
  opacity:.95;
}
.admin-sidebar .admin-nav a > span:not(.nav-badge){
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* BADGES */
.admin-sidebar .nav-badge{
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.75);
  padding:1px 7px;
  border-radius:10px;
  font-size:10px;
  font-weight:700;
  min-width:20px;
  text-align:center;
  flex-shrink:0;
  letter-spacing:0;
  line-height:1.5;
  margin-left:auto;
}
.admin-sidebar .admin-nav a.active .nav-badge{
  background:rgba(249,168,38,.25);
  color:#f9a826;
}
.admin-sidebar .nav-badge.accent{
  background:rgba(249,168,38,.2);
  color:#f9a826;
}

/* COLLAPSED STATE */
.admin-sidebar.collapsed .admin-brand-text,
.admin-sidebar.collapsed .admin-search,
.admin-sidebar.collapsed .nav-label,
.admin-sidebar.collapsed .nav-badge,
.admin-sidebar.collapsed .au-info{
  display:none !important;
}
.admin-sidebar.collapsed .admin-brand{
  padding:16px 8px;
  justify-content:center;
}
.admin-sidebar.collapsed .admin-brand-collapse{ display:none; }
.admin-sidebar.collapsed .nav-group{ padding:0 8px; }
.admin-sidebar.collapsed .admin-nav a{
  justify-content:center;
  padding:9px 0 !important;
  gap:0;
}
.admin-sidebar.collapsed .admin-nav a span:not(.nav-badge){ display:none; }
.admin-sidebar.collapsed .admin-nav a i{ font-size:14px; }
.admin-sidebar.collapsed .admin-user{
  justify-content:center;
  padding:12px 8px;
}

/* ---------- User footer ---------- */
.admin-sidebar .admin-user{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.admin-sidebar .au-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#f9a826;
  color:#0d2438;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  flex-shrink:0;
  letter-spacing:-0.3px;
}
.admin-sidebar .au-info{
  flex:1;
  min-width:0;
  line-height:1.2;
}
.admin-sidebar .au-info strong{
  display:block;
  font-size:12px;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.admin-sidebar .au-info span{
  display:block;
  font-size:10px;
  color:rgba(255,255,255,.4);
  letter-spacing:.2px;
}
.admin-sidebar .au-logout{
  width:26px;
  height:26px;
  border-radius:6px;
  background:rgba(220,38,38,.15);
  color:#ff7b7b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  transition:.15s;
  flex-shrink:0;
  text-decoration:none;
}
.admin-sidebar .au-logout:hover{
  background:#dc2626;
  color:#fff;
}

/* ---------- Content wrapper ---------- */
.admin-content-wrap{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#f7f9fb;
}

/* ---------- Topbar ---------- */
.admin-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#fff;
  border-bottom:1px solid #e8ecf0;
  padding:0 24px;
  height:56px;
  position:sticky;
  top:0;
  z-index:40;
  flex-shrink:0;
}
.atb-left,
.atb-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.atb-crumbs{
  font-size:13px;
  font-weight:600;
  color:#0d2438;
}
.atb-icon-btn{
  width:36px;
  height:36px;
  border-radius:8px;
  background:transparent;
  border:none;
  color:#4a5f6e;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
  text-decoration:none;
}
.atb-icon-btn:hover{
  background:#f5f7fa;
  color:#0d2438;
}
.atb-mobile{ display:none; }

/* ---------- Main ---------- */
.admin-content-wrap .admin-main{
  flex:1;
  padding:28px 32px;
  background:#f7f9fb;
  min-width:0;
}
.admin-main h1{
  color:#0d2438;
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.4px;
  margin:0 0 6px;
}
.admin-main h2{
  color:#0d2438;
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.1px;
  margin:22px 0 12px;
}

/* ---------- Mobile toggle ---------- */
.admin-mobile-toggle{
  display:none;
  position:fixed;
  top:12px;
  left:12px;
  z-index:1000;
  width:40px;
  height:40px;
  border-radius:10px;
  background:#0d2438;
  color:#fff;
  border:none;
  font-size:15px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .admin-sidebar{
    position:fixed;
    left:-260px;
    top:0;
    z-index:999;
    transition:left .22s ease;
    width:248px;
    min-width:248px;
    max-width:248px;
  }
  .admin-sidebar.open{ left:0; }
  .admin-sidebar.collapsed{
    width:248px;
    min-width:248px;
    max-width:248px;
  }
  .admin-sidebar.collapsed .admin-brand-text,
  .admin-sidebar.collapsed .admin-search,
  .admin-sidebar.collapsed .nav-label,
  .admin-sidebar.collapsed .au-info{ display:block !important; }
  .admin-sidebar.collapsed .admin-nav a span:not(.nav-badge){ display:inline; }
  .admin-sidebar.collapsed .admin-nav a{
    justify-content:flex-start;
    padding:7px 10px !important;
    gap:10px;
  }
  .atb-mobile{ display:flex; }
  .admin-content-wrap .admin-main{
    padding:20px 16px;
    padding-top:70px;
  }
  .admin-topbar{ padding:0 16px; }
}
/* ============================================================
   ADMIN — MODERN FEES PAGE
   ============================================================ */

/* Reuses .msg-stats, .msg-tabs, .toolbar, .modern-table, .modal-* 
   already defined for the messages/notices pages. */

/* Fee-specific: emphasize the "Due" column */
.modern-table td.due-positive{
  color:#dc2626;
  font-weight:700;
}

/* Status pill colors — reuse from messages */
.pill.pending{ background:#fff2dd; color:#b26a00; }
.pill.partial{ background:#fff2dd; color:#b26a00; }
.pill.paid   { background:#e5f5eb; color:#0e7c4f; }
/* ============================================================
   ADMIN — BULK UPLOAD PAGE
   ============================================================ */

/* Step cards */
.bulk-steps{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-bottom:28px;
}

.bulk-step{
  display:flex;
  gap:20px;
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:24px 26px;
  transition:.2s;
}
.bulk-step:hover{
  border-color:#d1dae3;
  box-shadow:0 8px 24px -16px rgba(13,36,56,.15);
}

.bs-num{
  width:38px;
  height:38px;
  border-radius:10px;
  background:#0d2438;
  color:#f9a826;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:15px;
  flex-shrink:0;
  letter-spacing:-0.3px;
  box-shadow:0 4px 10px -3px rgba(13,36,56,.3);
}

.bs-body{
  flex:1;
  min-width:0;
}
.bs-body h3{
  font-size:15px;
  font-weight:700;
  color:#0d2438;
  margin:0 0 6px;
  letter-spacing:-0.1px;
}
.bs-body p{
  font-size:13.5px;
  color:#5a6a7a;
  line-height:1.6;
  margin:0 0 16px;
  max-width:680px;
}
.bs-body p code{
  background:#eef4f9;
  color:#0b3b5c;
  padding:2px 7px;
  border-radius:5px;
  font-size:12px;
  font-weight:600;
  font-family:'Courier New',monospace;
}

/* Tips list */
.bulk-tips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.bulk-tip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#f4f7fa;
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:500;
  color:#3d4c5c;
}
.bulk-tip i{
  color:#0e7c4f;
  font-size:11px;
}

/* ---------- Upload zone ---------- */
.upload-zone{
  border:2px dashed #d5dee5;
  border-radius:14px;
  padding:44px 24px;
  text-align:center;
  cursor:pointer;
  transition:all .18s ease;
  background:#fbfcfd;
  margin-bottom:18px;
}
.upload-zone:hover,
.upload-zone.dragging{
  border-color:#0d2438;
  background:#eef4f9;
}
.upload-zone.dragging{
  border-style:solid;
  transform:scale(1.005);
}
.uz-icon{
  width:56px;
  height:56px;
  margin:0 auto 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid #e3e8ee;
  color:#0d2438;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  transition:.18s;
}
.upload-zone:hover .uz-icon{
  background:#0d2438;
  color:#f9a826;
  border-color:#0d2438;
}
.uz-title{
  font-size:14.5px;
  font-weight:600;
  color:#0d2438;
  margin-bottom:4px;
}
.uz-hint{
  font-size:12px;
  color:#8a97a5;
}

/* Uploaded file display */
.upload-file{
  display:flex;
  align-items:center;
  gap:14px;
  background:#eef4f9;
  border:1px solid #d5e4f0;
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:18px;
}
.uf-icon{
  width:42px;
  height:42px;
  border-radius:10px;
  background:#fff;
  color:#0e7c4f;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.uf-info{
  flex:1;
  min-width:0;
  line-height:1.3;
}
.uf-info strong{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:#0d2438;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.uf-info small{
  font-size:11.5px;
  color:#8a97a5;
}
.uf-remove{
  width:30px;
  height:30px;
  border-radius:8px;
  background:transparent;
  border:none;
  color:#8a97a5;
  cursor:pointer;
  font-size:13px;
  transition:.15s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.uf-remove:hover{
  background:#fde5e5;
  color:#dc2626;
}

/* ---------- Options ---------- */
.bulk-options{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
  margin-bottom:20px;
}
.bulk-opt{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  background:#fbfcfd;
  border:1px solid #e3e8ee;
  border-radius:10px;
  cursor:pointer;
  transition:.15s;
}
.bulk-opt:hover{
  border-color:#0d2438;
  background:#fff;
}
.bulk-opt input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:#0d2438;
  flex-shrink:0;
  cursor:pointer;
}
.bulk-opt strong{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#0d2438;
  margin-bottom:2px;
}
.bulk-opt small{
  display:block;
  font-size:11.5px;
  color:#8a97a5;
  line-height:1.5;
}

/* ---------- Actions ---------- */
.bulk-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
#uploadBtn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ---------- Preview section ---------- */
.preview-section{
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:22px 24px;
  margin-top:22px;
}
.preview-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid #eef2f6;
}
.preview-head h2{
  font-size:16px;
  font-weight:700;
  color:#0d2438;
  margin:0 0 4px;
  letter-spacing:-0.1px;
}
.preview-head h2 i{
  margin-right:6px;
}
.preview-head p{
  font-size:12.5px;
  color:#8a97a5;
  margin:0;
}
.preview-legend{
  display:flex;
  gap:16px;
  font-size:12px;
  color:#5a6a7a;
  font-weight:500;
}
.legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.legend-dot{
  width:8px;
  height:8px;
  border-radius:50%;
}
.legend-dot.new{ background:#10b981; }
.legend-dot.update{ background:#f59e0b; }
.legend-dot.skip{ background:#9aa8b4; }

/* Preview errors */
.alert-errors{
  display:flex;
  gap:12px;
  padding:16px 20px;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:12px;
  margin-bottom:18px;
  font-size:13px;
  color:#991b1b;
}
.alert-errors > i{
  color:#dc2626;
  font-size:16px;
  margin-top:2px;
  flex-shrink:0;
}
.alert-errors strong{
  display:block;
  font-weight:700;
  margin-bottom:6px;
}
.alert-errors ul{
  margin:0 0 0 18px;
  line-height:1.6;
}

/* Confirm bar */
.confirm-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:18px 22px;
  background:#f4f9f4;
  border:1px solid #a7f3d0;
  border-radius:12px;
  margin-top:18px;
}
.confirm-bar.confirm-error{
  background:#fef2f2;
  border-color:#fecaca;
}
.cb-text strong{
  display:block;
  font-size:13.5px;
  font-weight:700;
  color:#065f46;
  margin-bottom:2px;
}
.cb-text small{
  font-size:12px;
  color:#5a6a7a;
}

/* Responsive */
@media (max-width:640px){
  .bulk-step{
    flex-direction:column;
    padding:20px;
    gap:14px;
  }
  .preview-head{
    flex-direction:column;
  }
  .confirm-bar{
    flex-direction:column;
    align-items:flex-start;
  }
  .confirm-bar .btn-primary,
  .confirm-bar .btn-soft{
    width:100%;
    justify-content:center;
  }
}
/* ============================================================
   ADMIN — MODERN SUBJECTS PAGE
   ============================================================ */

/* Reuses .msg-stats, .lead-filters, .lf-chip, .lf-count, .toolbar,
   .search-box, .modern-table, .student-cell, .student-avatar,
   .class-badge, .row-actions, .pager, .modal-* 
   from previous admin pages. */

/* Subject code — monospace chip */
code{
  font-family:'JetBrains Mono','Fira Code','Courier New',monospace;
}
/* ============================================================
   ADMIN — MODERN EXAM TYPES PAGE
   ============================================================ */

/* Weightage warning banner */
.weight-warning{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 20px;
  background:#fff7e6;
  border:1px solid #f5d896;
  border-radius:12px;
  margin-bottom:20px;
  color:#8a5a00;
}
.weight-warning i{
  color:#d97706;
  font-size:20px;
  margin-top:2px;
  flex-shrink:0;
}
.weight-warning strong{
  display:block;
  font-size:13.5px;
  font-weight:700;
  margin-bottom:3px;
}
.weight-warning small{
  font-size:12px;
  opacity:.85;
}

/* Weightage distribution bar card */
.weight-bar-card{
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:22px 24px;
  margin-bottom:22px;
}
.wbc-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.wbc-head strong{
  font-size:14px;
  font-weight:700;
  color:#0d2438;
  letter-spacing:-0.1px;
}
.wbc-head span{
  font-size:12px;
  color:#8a97a5;
}

.wbc-bar{
  display:flex;
  height:32px;
  border-radius:8px;
  overflow:hidden;
  background:#f0f3f7;
  margin-bottom:14px;
}
.wbc-segment{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:11px;
  font-weight:700;
  transition:.2s;
  border-right:1px solid rgba(255,255,255,.3);
  letter-spacing:.3px;
  min-width:2px;
}
.wbc-segment:last-child{ border-right:none; }
.wbc-segment:hover{
  filter:brightness(1.1);
  cursor:default;
}

.wbc-legend{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  color:#5a6a7a;
}
.wbc-legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:500;
}
.wbc-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}

/* Weight bar inside table cells */
.weight-cell{
  display:flex;
  align-items:center;
  gap:10px;
}
.weight-bar{
  flex:1;
  height:6px;
  background:#f0f3f7;
  border-radius:4px;
  overflow:hidden;
  min-width:60px;
}
.weight-fill{
  height:100%;
  border-radius:4px;
  transition:.3s;
}
.weight-cell strong{
  font-size:13px;
  font-weight:700;
  color:#0d2438;
  min-width:36px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Total weightage footer */
.weight-total-footer{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:18px 24px;
  margin-top:20px;
}
.wtf-item{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.wtf-item span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#8a97a5;
  font-weight:700;
}
.wtf-item strong{
  font-size:20px;
  font-weight:800;
  color:#0d2438;
  letter-spacing:-0.4px;
}
.wtf-badge{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:10px;
  font-size:12.5px;
  font-weight:600;
}
.wtf-badge.ok{
  background:#e5f5eb;
  color:#0e7c4f;
}
.wtf-badge.warn{
  background:#fff2dd;
  color:#b26a00;
}
.wtf-badge i{ font-size:13px; }

/* Responsive */
@media (max-width:640px){
  .weight-total-footer{
    flex-direction:column;
    align-items:stretch;
  }
  .wtf-badge{ margin-left:0; justify-content:center; }
  .weight-cell{ flex-direction:column; align-items:flex-start; gap:6px; }
  .weight-cell strong{ text-align:left; }
}
/* ============================================================
   ADMIN — MODERN TIMETABLE PAGE (CSS-ONLY)
   Styles raw form + table inside .admin-main
   ============================================================ */

/* ============================================================
   1. PAGE TITLE
   ============================================================ */
.admin-main > h1,
.admin-main > h2:first-of-type{
  font-size:22px !important;
  font-weight:700;
  color:#0d2438;
  letter-spacing:-0.4px;
  margin:0 0 24px !important;
}

/* ============================================================
   2. "Add Entry" FORM
   Targets any form directly under .admin-main
   ============================================================ */
.admin-main > form,
.admin-main .admin-form{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr);
  gap:14px 16px;
  align-items:end;
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:22px 24px;
  margin:0 0 24px 0 !important;
  box-shadow:0 4px 16px -12px rgba(13,36,56,.08);
  max-width:100%;
}

/* Small heading inside the form */
.admin-main > form > h2,
.admin-main > form > h3,
.admin-main .admin-form > h2,
.admin-main .admin-form > h3{
  grid-column:1 / -1;
  margin:0 0 6px !important;
  font-size:13px !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:#8a97a5;
  padding-bottom:10px;
  border-bottom:1px solid #eef2f6;
}

/* Text labels — turn each into its own column */
.admin-main > form > label,
.admin-main .admin-form > label{
  display:flex !important;
  flex-direction:column;
  gap:6px;
  margin:0 !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  color:#5a6a7a !important;
  text-transform:uppercase;
  letter-spacing:.6px;
  width:auto !important;
}

/* Inputs, selects */
.admin-main > form input[type="text"],
.admin-main > form input[type="number"],
.admin-main > form input[type="time"],
.admin-main > form input[type="date"],
.admin-main > form input:not([type]),
.admin-main > form select,
.admin-main .admin-form input[type="text"],
.admin-main .admin-form input[type="number"],
.admin-main .admin-form input[type="time"],
.admin-main .admin-form input:not([type]),
.admin-main .admin-form select{
  width:100% !important;
  padding:10px 12px !important;
  border:1px solid #d5dee5 !important;
  border-radius:9px !important;
  background:#fbfcfd !important;
  color:#1e2b37 !important;
  font-size:13.5px !important;
  font-family:inherit !important;
  font-weight:500 !important;
  transition:all .15s;
  box-sizing:border-box;
  margin:0 !important;
  box-shadow:none;
  height:42px;
}
.admin-main > form input:focus,
.admin-main > form select:focus,
.admin-main .admin-form input:focus,
.admin-main .admin-form select:focus{
  outline:none !important;
  border-color:#0d2438 !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(13,36,56,.08) !important;
}

/* The Save button — spans full width on its own row */
.admin-main > form > button,
.admin-main > form > input[type="submit"],
.admin-main .admin-form > button{
  grid-column:1 / -1;
  justify-self:flex-start;
  width:auto !important;
  margin-top:6px !important;
}

/* ============================================================
   3. TABLE — modern look
   ============================================================ */
.admin-main > table,
.admin-main .admin-table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0;
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:12px;
  overflow:hidden;
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-size:13px;
  margin:0 0 20px !important;
  box-shadow:0 4px 16px -12px rgba(13,36,56,.08);
}

.admin-main > table thead th,
.admin-main .admin-table thead th{
  background:#f8fafc !important;
  color:#6b7a88 !important;
  font-size:11px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
  padding:12px 16px !important;
  text-align:left;
  border-bottom:1px solid #e8ecf0 !important;
  white-space:nowrap;
  position:sticky;
  top:0;
  z-index:2;
}

.admin-main > table tbody tr,
.admin-main .admin-table tbody tr{
  transition:background .12s;
  border-bottom:1px solid #f0f4f8;
}
.admin-main > table tbody tr:last-child,
.admin-main .admin-table tbody tr:last-child{
  border-bottom:none;
}
.admin-main > table tbody tr:hover,
.admin-main .admin-table tbody tr:hover{
  background:#f8fbfe;
}

.admin-main > table tbody td,
.admin-main .admin-table tbody td{
  padding:12px 16px !important;
  color:#1e2b37 !important;
  font-size:13px !important;
  font-weight:500;
  vertical-align:middle;
  border-bottom:1px solid #f0f4f8;
}

/* ---------- Column-specific tweaks via nth-child ---------- */

/* Class column — bold, monospace-ish */
.admin-main > table tbody td:nth-child(1),
.admin-main .admin-table tbody td:nth-child(1){
  font-weight:700;
  color:#0d2438 !important;
  font-size:13px !important;
}

/* Day column — subtle chip */
.admin-main > table tbody td:nth-child(2),
.admin-main .admin-table tbody td:nth-child(2){
  color:#4a5f6e !important;
  font-weight:600;
}

/* Period column — centered, small */
.admin-main > table tbody td:nth-child(3),
.admin-main .admin-table tbody td:nth-child(3){
  text-align:center;
  color:#8a97a5 !important;
  font-weight:600;
  font-size:12px !important;
  font-variant-numeric:tabular-nums;
}

/* Time column — tabular numbers, muted */
.admin-main > table tbody td:nth-child(4),
.admin-main .admin-table tbody td:nth-child(4){
  color:#5a6a7a !important;
  font-size:12.5px !important;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Subject column — bold */
.admin-main > table tbody td:nth-child(5),
.admin-main .admin-table tbody td:nth-child(5){
  font-weight:600;
  color:#0d2438 !important;
}

/* Teacher column */
.admin-main > table tbody td:nth-child(6),
.admin-main .admin-table tbody td:nth-child(6){
  color:#4a5f6e !important;
  font-size:12.5px !important;
}

/* Room column — subtle amber chip via text color */
.admin-main > table tbody td:nth-child(7),
.admin-main .admin-table tbody td:nth-child(7){
  color:#b26a00 !important;
  font-weight:600;
  font-size:12px !important;
}

/* Last column (actions) — right align */
.admin-main > table tbody td:last-child,
.admin-main .admin-table tbody td:last-child{
  text-align:right;
  white-space:nowrap;
}

/* ============================================================
   4. ACTION LINKS inside table cells
   Targets plain <a> tags with "Edit" / "×" text
   ============================================================ */
.admin-main > table tbody td:last-child a,
.admin-main .admin-table tbody td:last-child a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 11px;
  border-radius:6px;
  background:#f4f7fa;
  color:#0b3b5c !important;
  font-size:11.5px !important;
  font-weight:700;
  text-decoration:none !important;
  margin-left:4px;
  transition:all .15s;
  border:1px solid transparent;
}
.admin-main > table tbody td:last-child a:hover,
.admin-main .admin-table tbody td:last-child a:hover{
  background:#0d2438;
  color:#fff !important;
  border-color:#0d2438;
}
.admin-main > table tbody td:last-child a:last-child,
.admin-main .admin-table tbody td:last-child a:last-child{
  background:#fef2f2;
  color:#dc2626 !important;
  padding:5px 9px;
}
.admin-main > table tbody td:last-child a:last-child:hover,
.admin-main .admin-table tbody td:last-child a:last-child:hover{
  background:#dc2626;
  color:#fff !important;
  border-color:#dc2626;
}

/* ============================================================
   5. OPTIONAL — if you add these classes later
   ============================================================ */

/* Wrapper for the form — add <div class="tt-form-wrap"> around form */
.tt-form-wrap{
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:22px 24px;
  margin-bottom:24px;
}
.tt-form-title{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:#8a97a5;
  padding-bottom:10px;
  border-bottom:1px solid #eef2f6;
  margin-bottom:18px;
}

/* Wrapper for the table — add <div class="tt-table-wrap"> around table */
.tt-table-wrap{
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 16px -12px rgba(13,36,56,.08);
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .admin-main > form,
  .admin-main .admin-form{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:640px){
  .admin-main > form,
  .admin-main .admin-form{
    grid-template-columns:1fr;
    padding:16px;
    gap:12px;
  }

  .admin-main > table,
  .admin-main .admin-table{
    font-size:12px;
  }

  .admin-main > table thead th,
  .admin-main .admin-table thead th,
  .admin-main > table tbody td,
  .admin-main .admin-table tbody td{
    padding:9px 10px !important;
  }

  /* Horizontal scroll for wide tables on mobile */
  .admin-main{
    overflow-x:auto;
  }
}/* ============================================================
   ADMIN — TIMETABLE PAGE (extra tweaks)
   ============================================================ */

/* Row highlight for today's entries */
.modern-table tbody tr.row-editing{
  background:#fffbeb;
  box-shadow:inset 3px 0 0 #f9a826;
}
.modern-table tbody tr.row-editing:hover{
  background:#fff7e0;
}

/* Monospace room chip inside timetable table */
.modern-table code{
  font-family:'JetBrains Mono','Fira Code','Courier New',monospace;
  letter-spacing:0;
}/* ============================================================
   ADMIN — EDIT PAGE
   ============================================================ */

/* Big content block card */
.edit-block{
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:26px 28px;
  margin-bottom:22px;
  box-shadow:0 4px 16px -12px rgba(13,36,56,.08);
}

/* Card head with icon + title */
.eb-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:18px;
  margin-bottom:22px;
  border-bottom:1px solid #eef2f6;
}
.eb-head-icon{
  width:42px;
  height:42px;
  border-radius:11px;
  background:#0d243815;
  color:#0d2438;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.eb-head h2{
  font-size:16px;
  font-weight:700;
  color:#0d2438;
  margin:0 0 3px;
  letter-spacing:-0.2px;
}
.eb-head p{
  font-size:12.5px;
  color:#8a97a5;
  margin:0;
}
.eb-head-count{
  margin-left:auto;
  background:#eef4f9;
  color:#0b3b5c;
  padding:4px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
}

/* Form grid inside cards */
.eb-form{
  margin:0;
}
.eb-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 18px;
  margin-bottom:20px;
}
.eb-grid .col-2{
  grid-column:span 2;
}
@media (max-width:640px){
  .eb-grid{ grid-template-columns:1fr; }
  .eb-grid .col-2{ grid-column:span 1; }
}

.eb-grid label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:12.5px;
  font-weight:600;
  color:#4a5f6e;
  margin:0;
}

.eb-grid input[type="text"],
.eb-grid input[type="number"],
.eb-grid input[type="url"],
.eb-grid input:not([type]),
.eb-grid textarea{
  width:100%;
  padding:10px 13px;
  border:1px solid #d5dee5;
  border-radius:9px;
  background:#fbfcfd;
  color:#1e2b37;
  font-size:13.5px;
  font-family:inherit;
  font-weight:500;
  transition:all .15s;
  box-sizing:border-box;
  line-height:1.5;
}
.eb-grid input:focus,
.eb-grid textarea:focus{
  outline:none;
  border-color:#0d2438;
  background:#fff;
  box-shadow:0 0 0 3px rgba(13,36,56,.08);
}
.eb-grid textarea{
  resize:vertical;
  min-height:140px;
}
.eb-grid textarea.editor{
  font-family:'JetBrains Mono','Fira Code','Courier New',monospace;
  font-size:12.5px;
  line-height:1.65;
}

.eb-grid .field-hint{
  font-size:11.5px;
  color:#8a97a5;
  font-weight:400;
  margin-top:2px;
  line-height:1.5;
}
.eb-grid .field-hint code{
  background:#eef4f9;
  color:#0b3b5c;
  padding:1px 6px;
  border-radius:4px;
  font-family:'Courier New',monospace;
  font-size:11px;
  font-weight:600;
}

/* Action bar */
.eb-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-top:18px;
  border-top:1px solid #eef2f6;
}

/* ============================================================
   SECTIONS LIST
   ============================================================ */
.sections-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.section-item{
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:12px;
  padding:18px 20px;
  transition:.15s;
}
.section-item:hover{
  border-color:#d1dae3;
  box-shadow:0 6px 18px -14px rgba(13,36,56,.2);
}
.section-item.editing{
  border-color:#f9a826;
  background:#fffbeb;
  box-shadow:0 0 0 3px rgba(249,168,38,.12);
}

.si-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}
.si-order{
  min-width:36px;
  height:36px;
  border-radius:9px;
  background:#0d2438;
  color:#f9a826;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  flex-shrink:0;
  letter-spacing:-0.2px;
}
.si-title{
  flex:1;
  min-width:0;
  line-height:1.3;
}
.si-title strong{
  display:block;
  font-size:14px;
  font-weight:600;
  color:#0d2438;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.si-title small{
  font-size:11.5px;
  color:#8a97a5;
}
.si-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.si-preview{
  font-size:12.5px;
  color:#5a6a7a;
  line-height:1.6;
  padding:12px 14px;
  background:#f8fbfe;
  border-radius:8px;
  border-left:3px solid #e3e8ee;
  font-style:italic;
  word-break:break-word;
}
.section-item.editing .si-preview{
  background:#fff;
  border-left-color:#f9a826;
}

/* Responsive */
@media (max-width:640px){
  .edit-block{ padding:20px; }
  .eb-head{ flex-wrap:wrap; }
  .eb-head-count{ margin-left:0; }
  .si-head{ flex-wrap:wrap; gap:10px; }
  .si-actions{ width:100%; justify-content:flex-end; }
}/* ============================================================
   HOME HERO — IMAGE-ONLY CAROUSEL
   ============================================================ */

.home-hero-images{
  position:relative;
  width:100%;
  margin:-24px -24px 0;
  padding:0;
  overflow:hidden;
  background:#0b3b5c;
}

.hero-slider{
  position:relative;
  width:100%;
  aspect-ratio:21 / 9;
  min-height:420px;
  max-height:640px;
  overflow:hidden;
}
@media (max-width:900px){
  .hero-slider{ aspect-ratio:16 / 10; min-height:340px; }
}
@media (max-width:600px){
  .hero-slider{ aspect-ratio:4 / 3; min-height:260px; }
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.05);
  transition:opacity 1s ease, transform 6s ease;
  will-change:opacity, transform;
}
.hero-slide.active{
  opacity:1;
  transform:scale(1);
  z-index:1;
}
.hero-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.12) 100%);
  pointer-events:none;
}

/* Nav arrows */
.hero-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  color:#0b3b5c;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  transition:.2s;
  backdrop-filter:blur(10px);
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  opacity:0;
}
.hero-slider:hover .hero-nav{ opacity:1; }
.hero-nav:hover{
  background:#fff;
  transform:translateY(-50%) scale(1.08);
}
.hero-prev{ left:24px; }
.hero-next{ right:24px; }
@media (hover:none){
  .hero-nav{ opacity:1; }
}

/* Dot indicators */
.hero-dots{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  gap:10px;
  padding:8px 14px;
  background:rgba(0,0,0,.25);
  border-radius:50px;
  backdrop-filter:blur(10px);
}
.hero-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  border:none;
  cursor:pointer;
  padding:0;
  transition:.2s;
}
.hero-dot:hover{
  background:rgba(255,255,255,.9);
  transform:scale(1.2);
}
.hero-dot.active{
  background:#f9a826;
  width:26px;
  border-radius:5px;
}

/* Hide old hero styles */
.home-hero,
.hero-wave{ display:none !important; }
/* ============================================================
   FACULTY — MODERN ATTENDANCE PAGE
   ============================================================ */

/* Toolbar */
.att-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:14px 20px;
  margin-bottom:18px;
  box-shadow:0 4px 16px -12px rgba(13,36,56,.08);
}
.att-tool-left,
.att-tool-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.att-toolbar label{
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#8a97a5;
}

/* Summary cards */
.att-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:12px;
  margin-bottom:18px;
}
.as-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:12px;
  transition:.15s;
  box-shadow:0 4px 16px -12px rgba(13,36,56,.06);
}
.as-card:hover{
  border-color:#d1dae3;
}
.as-info{
  flex:1;
  min-width:0;
  line-height:1.15;
}
.as-info span{
  display:block;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#8a97a5;
  margin-bottom:4px;
}
.as-info strong{
  display:block;
  font-size:20px;
  font-weight:800;
  color:#0d2438;
  letter-spacing:-0.4px;
}
.as-card.present .as-info strong{ color:#0e7c4f; }
.as-card.absent .as-info strong{ color:#dc2626; }
.as-card.late .as-info strong{ color:#b26a00; }
.as-card.leave .as-info strong{ color:#0b3b5c; }
.as-card.unmarked .as-info strong{ color:#8a97a5; }
.as-card.pct{ background:#0d2438; border-color:#0d2438; }
.as-card.pct .as-info span{ color:rgba(255,255,255,.55); }
.as-card.pct .as-info strong{ color:#f9a826; }

.as-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.as-card.present .as-dot{ background:#0e7c4f; }
.as-card.absent .as-dot{ background:#dc2626; }
.as-card.late .as-dot{ background:#f59e0b; }
.as-card.leave .as-dot{ background:#0ea5e9; }
.as-card.unmarked .as-dot{ background:#b8c4d1; }

/* Quick actions bar */
.att-quickbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:12px;
  padding:12px 18px;
  margin-bottom:14px;
  box-shadow:0 4px 16px -12px rgba(13,36,56,.06);
}
.aqb-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:#5a6a7a;
  font-weight:600;
}
.aqb-left > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:6px;
}
.aqb-left > span i{
  color:#f9a826;
  font-size:11px;
}
.aqb-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  background:#f4f7fa;
  color:#3d4c5c;
  border:1px solid transparent;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:.15s;
}
.aqb-btn:hover{
  background:#e8ecf0;
  color:#0d2438;
}
.aqb-btn i{ font-size:10px; }
.aqb-right{
  font-size:12.5px;
  font-weight:600;
  color:#0d2438;
}
.aqb-right #progressText{
  background:#eef4f9;
  color:#0b3b5c;
  padding:5px 12px;
  border-radius:20px;
  font-size:11.5px;
  font-weight:700;
}

/* Attendance table */
.att-table tbody tr:hover{
  background:#f8fbfe;
}
.att-table tbody td{
  padding:12px 14px;
  vertical-align:middle;
}

/* Status picker */
.status-picker{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.sp-option{
  position:relative;
  cursor:pointer;
}
.sp-option input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.sp-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:8px;
  font-size:11.5px;
  font-weight:600;
  font-family:inherit;
  color:#5a6a7a;
  background:#f4f7fa;
  border:1.5px solid transparent;
  transition:.15s;
  user-select:none;
  white-space:nowrap;
}
.sp-label i{ font-size:11px; }
.sp-option:hover .sp-label{
  background:#e8ecf0;
}

/* Checked states */
.sp-option input:checked + .sp-label{
  color:#fff;
}
.sp-green  input:checked + .sp-label{ background:#0e7c4f; color:#fff; border-color:#0e7c4f; }
.sp-red    input:checked + .sp-label{ background:#dc2626; color:#fff; border-color:#dc2626; }
.sp-amber  input:checked + .sp-label{ background:#f59e0b; color:#fff; border-color:#f59e0b; }
.sp-blue   input:checked + .sp-label{ background:#0b3b5c; color:#fff; border-color:#0b3b5c; }

/* Remarks input */
.att-remarks{
  width:100%;
  padding:7px 10px;
  border:1px solid #e3e8ee;
  border-radius:7px;
  background:#fbfcfd;
  color:#1e2b37;
  font-size:12.5px;
  font-family:inherit;
  transition:.15s;
}
.att-remarks:focus{
  outline:none;
  border-color:#0d2438;
  background:#fff;
  box-shadow:0 0 0 3px rgba(13,36,56,.06);
}

/* Save bar */
.att-savebar{
  position:sticky;
  bottom:16px;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:14px 20px;
  margin-top:18px;
  box-shadow:0 12px 32px -14px rgba(13,36,56,.25);
}
.asb-left .asb-status{
  font-size:12.5px;
  color:#8a97a5;
  font-weight:500;
}
.asb-right{
  display:flex;
  gap:10px;
}

/* Pulsing Save button when marks are made */
.btn-pulse{
  animation:pulseSave 1.8s ease-in-out infinite;
}
@keyframes pulseSave{
  0%, 100%{
    box-shadow:0 4px 10px -3px rgba(11,59,92,.25);
  }
  50%{
    box-shadow:0 4px 10px -3px rgba(11,59,92,.25), 0 0 0 6px rgba(249,168,38,.15);
  }
}

/* Responsive */
@media (max-width:768px){
  .att-toolbar{ padding:12px 14px; }
  .att-tool-left,
  .att-tool-right{
    width:100%;
    justify-content:space-between;
  }
  .att-tool-left select,
  .att-tool-right input{
    flex:1;
  }
  .att-summary{
    grid-template-columns:repeat(3, 1fr);
  }
  .att-quickbar{
    flex-direction:column;
    align-items:stretch;
  }
  .aqb-left,
  .aqb-right{
    justify-content:center;
    text-align:center;
  }
  .status-picker{
    gap:4px;
  }
  .sp-label{
    padding:5px 8px;
    font-size:11px;
  }
  .sp-label span{
    display:none;
  }
  .sp-label i{
    font-size:12px;
  }
  .att-savebar{
    flex-direction:column;
    align-items:stretch;
  }
  .asb-right{
    justify-content:stretch;
  }
  .asb-right button{
    flex:1;
    justify-content:center;
  }
}/* ============================================================
   FACULTY — MODERN STUDY MATERIAL PAGE
   ============================================================ */

/* ---------- Upload card ---------- */
.upload-card{
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:26px 28px;
  margin-bottom:22px;
  box-shadow:0 4px 16px -12px rgba(13,36,56,.08);
}

.uc-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:18px;
  margin-bottom:22px;
  border-bottom:1px solid #eef2f6;
}
.uc-head-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:linear-gradient(135deg,#0d2438,#1b3d59);
  color:#f9a826;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  flex-shrink:0;
  box-shadow:0 6px 14px -4px rgba(13,36,56,.35);
}
.uc-head h2{
  font-size:16px;
  font-weight:700;
  color:#0d2438;
  margin:0 0 3px;
  letter-spacing:-0.2px;
}
.uc-head p{
  font-size:12.5px;
  color:#8a97a5;
  margin:0;
}

/* Form grid */
.uc-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px 18px;
  margin-bottom:20px;
}
.uc-grid .uc-col-2{
  grid-column:span 2;
}
@media (max-width:640px){
  .uc-grid{ grid-template-columns:1fr; }
  .uc-grid .uc-col-2{ grid-column:span 1; }
}
.uc-grid label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:12.5px;
  font-weight:600;
  color:#4a5f6e;
}
.uc-grid label .req{ color:#dc2626; }
.uc-grid input[type="text"],
.uc-grid input:not([type]),
.uc-grid select,
.uc-grid textarea{
  width:100%;
  padding:10px 13px;
  border:1px solid #d5dee5;
  border-radius:9px;
  background:#fbfcfd;
  color:#1e2b37;
  font-size:13.5px;
  font-family:inherit;
  font-weight:500;
  transition:.15s;
  box-sizing:border-box;
}
.uc-grid input:focus,
.uc-grid select:focus,
.uc-grid textarea:focus{
  outline:none;
  border-color:#0d2438;
  background:#fff;
  box-shadow:0 0 0 3px rgba(13,36,56,.08);
}
.uc-grid textarea{ resize:vertical; min-height:60px; }
.uc-grid .field-hint{
  font-size:11.5px;
  color:#8a97a5;
  font-weight:400;
  margin-top:2px;
}

/* Mode tabs */
.upload-mode{
  display:inline-flex;
  gap:4px;
  background:#f4f7fa;
  padding:4px;
  border-radius:10px;
  margin-bottom:16px;
}
.um-tab{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 16px;
  border-radius:8px;
  background:transparent;
  border:none;
  color:#6b7a88;
  font-size:12.5px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:.15s;
}
.um-tab:hover{ color:#0d2438; }
.um-tab.active{
  background:#fff;
  color:#0d2438;
  box-shadow:0 2px 6px rgba(13,36,56,.08);
}
.um-tab i{ font-size:11px; }

/* Drop zone */
.drop-zone{
  border:2px dashed #d5dee5;
  border-radius:12px;
  padding:36px 20px;
  text-align:center;
  cursor:pointer;
  transition:all .18s ease;
  background:#fbfcfd;
  margin-bottom:16px;
}
.drop-zone:hover,
.drop-zone.dragging{
  border-color:#0d2438;
  background:#eef4f9;
  border-style:solid;
}
.dz-icon{
  width:52px;
  height:52px;
  margin:0 auto 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid #e3e8ee;
  color:#0d2438;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  transition:.18s;
}
.drop-zone:hover .dz-icon{
  background:#0d2438;
  color:#f9a826;
  border-color:#0d2438;
}
.dz-title{
  font-size:14px;
  font-weight:600;
  color:#0d2438;
  margin-bottom:4px;
}
.dz-hint{
  font-size:11.5px;
  color:#8a97a5;
}

/* Picked file card */
.picked-file{
  display:flex;
  align-items:center;
  gap:14px;
  background:#eef4f9;
  border:1px solid #d5e4f0;
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:16px;
}
.pf-icon{
  width:42px;
  height:42px;
  border-radius:10px;
  background:#fff;
  color:#0e7c4f;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.pf-info{ flex:1; min-width:0; line-height:1.3; }
.pf-info strong{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:#0d2438;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pf-info small{
  font-size:11.5px;
  color:#8a97a5;
}
.pf-remove{
  width:30px;
  height:30px;
  border-radius:8px;
  background:transparent;
  border:none;
  color:#8a97a5;
  cursor:pointer;
  font-size:13px;
  transition:.15s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pf-remove:hover{
  background:#fde5e5;
  color:#dc2626;
}

/* Actions */
.uc-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-top:18px;
  border-top:1px solid #eef2f6;
}

/* ============================================================
   TYPE DISTRIBUTION
   ============================================================ */
.type-dist-card{
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:20px 24px;
  margin-bottom:22px;
  box-shadow:0 4px 16px -12px rgba(13,36,56,.08);
}
.tdc-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.tdc-head strong{
  font-size:14px;
  font-weight:700;
  color:#0d2438;
  letter-spacing:-0.1px;
}
.tdc-head span{
  font-size:12px;
  color:#8a97a5;
}
.tdc-bar{
  display:flex;
  height:28px;
  border-radius:8px;
  overflow:hidden;
  background:#f0f3f7;
  margin-bottom:14px;
}
.tdc-segment{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:11px;
  font-weight:700;
  transition:.2s;
  border-right:1px solid rgba(255,255,255,.3);
  min-width:2px;
}
.tdc-segment:last-child{ border-right:none; }
.tdc-legend{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  color:#5a6a7a;
}
.tdc-legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:500;
}
.tdc-legend-item strong{
  color:#0d2438;
  font-weight:700;
}
.tdc-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}

/* ============================================================
   MATERIAL LIST
   ============================================================ */
.material-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid #eef2f6;
}
.material-header h2{
  font-size:16px;
  font-weight:700;
  color:#0d2438;
  margin:0;
  letter-spacing:-0.2px;
}
.mh-count{
  background:#eef4f9;
  color:#0b3b5c;
  padding:3px 11px;
  border-radius:20px;
  font-size:11.5px;
  font-weight:700;
}

.material-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mat-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:12px;
  padding:18px 20px;
  transition:.15s;
}
.mat-item:hover{
  border-color:#d1dae3;
  box-shadow:0 6px 20px -16px rgba(13,36,56,.2);
}

.mat-icon{
  width:46px;
  height:46px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:17px;
  flex-shrink:0;
  box-shadow:0 4px 10px -3px rgba(0,0,0,.15);
}

.mat-info{
  flex:1;
  min-width:0;
}
.mat-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:5px;
}
.mat-title h3{
  font-size:14.5px;
  font-weight:700;
  color:#0d2438;
  margin:0;
  letter-spacing:-0.1px;
  line-height:1.35;
}
.mat-badge.draft{
  background:#fff2dd;
  color:#b26a00;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:2px 8px;
  border-radius:20px;
}

.mat-info p{
  font-size:12.5px;
  color:#5a6a7a;
  line-height:1.55;
  margin:0 0 10px;
}

.mat-meta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:11.5px;
  color:#8a97a5;
}
.mat-meta > span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.mat-meta i{ font-size:11px; color:#f9a826; }
.mat-type-pill{
  padding:2px 9px;
  border-radius:20px;
  font-weight:700;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.mat-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.mat-actions .btn-soft{
  padding:7px 13px;
  font-size:12px;
}

/* Responsive */
@media (max-width:768px){
  .upload-card{ padding:20px; }
  .mat-item{
    flex-direction:column;
    align-items:stretch;
  }
  .mat-actions{
    justify-content:flex-start;
    padding-top:12px;
    border-top:1px solid #f0f4f8;
  }
  .uc-actions button{ flex:1; justify-content:center; }
}
/* ============================================================
   FACULTY — MODERN ASSIGNMENTS PAGE
   ============================================================ */

/* Reuses .upload-card, .uc-head, .uc-grid, .uc-actions, 
   .picked-file, .pf-icon, .pf-info, .pf-remove from Study Material */

/* Attachment zone (compact version of drop-zone) */
.attach-zone{
  display:flex;
  align-items:center;
  gap:14px;
  border:2px dashed #d5dee5;
  border-radius:12px;
  padding:16px 20px;
  cursor:pointer;
  transition:.18s;
  background:#fbfcfd;
}
.attach-zone:hover{
  border-color:#0d2438;
  border-style:solid;
  background:#eef4f9;
}
.attach-zone i{
  font-size:20px;
  color:#8a97a5;
  transition:.18s;
}
.attach-zone:hover i{
  color:#0d2438;
  transform:rotate(-15deg);
}
.attach-zone strong{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:#0d2438;
  margin-bottom:2px;
}
.attach-zone small{
  display:block;
  font-size:11.5px;
  color:#8a97a5;
}

/* ============================================================
   ASSIGNMENT CARDS
   ============================================================ */
.assignments-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.assign-card{
  background:#fff;
  border:1px solid #e8ecf0;
  border-radius:14px;
  padding:22px 24px;
  border-left:4px solid #0d2438;
  transition:.15s;
  position:relative;
}
.assign-card:hover{
  border-color:#d1dae3;
  box-shadow:0 8px 24px -16px rgba(13,36,56,.25);
}
.assign-card.draft{
  border-left-color:#b8c4d1;
  background:linear-gradient(90deg,#fbfcfd 0%,#fff 30%);
}

/* Head */
.ac-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.ac-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  flex:1;
  min-width:0;
}
.ac-title h3{
  font-size:16px;
  font-weight:700;
  color:#0d2438;
  margin:0;
  letter-spacing:-0.2px;
  line-height:1.35;
}

.ac-badge{
  padding:3px 10px;
  border-radius:20px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.ac-badge.published{
  background:#e5f5eb;
  color:#0e7c4f;
}
.ac-badge.draft{
  background:#f4f7fa;
  color:#5a6a7a;
}
.ac-badge.overdue{
  background:#fde5e5;
  color:#b91c1c;
}

/* Due date block */
.ac-due{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:10px;
  background:#f4f7fa;
  flex-shrink:0;
}
.ac-due i{
  font-size:16px;
  color:#8a97a5;
}
.ac-due div{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.ac-due strong{
  font-size:12.5px;
  font-weight:700;
  color:#0d2438;
}
.ac-due small{
  font-size:10.5px;
  color:#8a97a5;
}

.ac-due.ok{
  background:#e5f5eb;
}
.ac-due.ok i{ color:#0e7c4f; }
.ac-due.ok small{ color:#0e7c4f; }

.ac-due.warn{
  background:#fff7e6;
}
.ac-due.warn i{ color:#b26a00; }
.ac-due.warn small{ color:#b26a00; }

.ac-due.danger{
  background:#fde5e5;
}
.ac-due.danger i{ color:#dc2626; }
.ac-due.danger small{ color:#dc2626; }

/* Meta */
.ac-meta{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:12px;
  color:#5a6a7a;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid #f0f4f8;
}
.ac-meta > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.ac-meta i{
  color:#f9a826;
  font-size:11px;
}
.ac-attach{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#0d2438;
  font-weight:600;
  text-decoration:none;
  padding:2px 10px;
  background:#eef4f9;
  border-radius:20px;
  font-size:11.5px;
  transition:.15s;
}
.ac-attach:hover{
  background:#0d2438;
  color:#fff;
}
.ac-attach i{ color:#0d2438; transition:.15s; }
.ac-attach:hover i{ color:#f9a826; }

/* Description */
.ac-desc{
  font-size:13px;
  color:#5a6a7a;
  line-height:1.6;
  margin:0 0 16px;
}

/* Progress */
.ac-progress{
  padding:14px 16px;
  background:#f8fbfe;
  border-radius:10px;
  margin-bottom:16px;
  border:1px solid #eef2f6;
}
.acp-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  font-size:12.5px;
  color:#5a6a7a;
}
.acp-head strong{
  color:#0d2438;
  font-weight:700;
}
.acp-pct{
  font-weight:700;
  color:#0d2438;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.acp-bar{
  height:8px;
  background:#e8ecf0;
  border-radius:6px;
  overflow:hidden;
}
.acp-fill{
  height:100%;
  background:linear-gradient(90deg,#0e7c4f,#0d2438);
  border-radius:6px;
  transition:.4s;
}
.acp-sub{
  display:flex;
  gap:14px;
  margin-top:10px;
  font-size:11.5px;
  font-weight:600;
}
.acp-stat{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.acp-stat::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
}
.acp-stat.ok{ color:#0e7c4f; }
.acp-stat.ok::before{ background:#0e7c4f; }
.acp-stat.warn{ color:#b26a00; }
.acp-stat.warn::before{ background:#f59e0b; }

/* Actions */
.ac-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding-top:14px;
  border-top:1px solid #f0f4f8;
}
.ac-actions .btn-sm{
  padding:8px 16px;
  font-size:12.5px;
  border-radius:8px;
}
.ac-actions .icon-btn{
  margin-left:auto;
}

/* Pending badge on the Submissions button */
.btn-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:18px;
  padding:0 6px;
  background:#f9a826;
  color:#0d2438;
  border-radius:10px;
  font-size:10.5px;
  font-weight:800;
  margin-left:4px;
}

/* Responsive */
@media (max-width:640px){
  .assign-card{ padding:18px; }
  .ac-head{
    flex-direction:column;
    align-items:stretch;
  }
  .ac-due{
    align-self:flex-start;
    justify-content:center;
  }
  .ac-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .ac-actions > *{
    width:100%;
    justify-content:center;
  }
  .ac-actions .icon-btn{
    margin-left:0;
    width:100%;
  }
}
/* ============================================================
   PUBLIC — DOWNLOADS PAGE
   ============================================================ */

/* ---------- Compact Hero ---------- */
.dl-hero{
  background:linear-gradient(135deg,#0b3b5c 0%,#1b5a7a 100%);
  color:#fff;
  padding:44px 0 52px;
  text-align:center;
  border-radius:0 0 24px 24px;
  margin:-24px -24px 0;
  position:relative;
  overflow:hidden;
}
.dl-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(249,168,38,.15) 0,transparent 45%),
             radial-gradient(circle at 80% 70%,rgba(255,255,255,.06) 0,transparent 40%);
  pointer-events:none;
}
.dl-hero .container{ position:relative; z-index:2; }
.dl-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(249,168,38,.15);
  color:#f9a826;
  padding:6px 14px;
  border-radius:50px;
  font-size:.75rem;
  font-weight:600;
  margin-bottom:12px;
  border:1px solid rgba(249,168,38,.35);
}
.dl-hero h1{
  font-size:2rem;
  font-weight:800;
  letter-spacing:-0.8px;
  margin-bottom:6px;
}
.dl-hero p{
  font-size:.95rem;
  opacity:.85;
  max-width:520px;
  margin:0 auto;
}

/* ---------- Toolbar ---------- */
.dl-toolbar-wrap{
  margin-top:-24px;
  position:relative;
  z-index:5;
  padding-bottom:20px;
}
.dl-toolbar{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:14px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  box-shadow:0 8px 24px -14px rgba(11,59,92,.2);
}
.dl-cats{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.dl-cat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:8px;
  font-size:.8rem;
  font-weight:600;
  color:#6b7a88;
  background:#f4f7fa;
  transition:.15s;
  white-space:nowrap;
  text-decoration:none;
}
.dl-cat:hover{ background:#e0ecf9; color:#0b3b5c; }
.dl-cat.active{ background:#0b3b5c; color:#fff; }
.dl-cat i{ font-size:.72rem; }
.dl-cat-count{
  background:rgba(255,255,255,.6);
  color:#0b3b5c;
  padding:1px 7px;
  border-radius:20px;
  font-size:.68rem;
  font-weight:700;
}
.dl-cat.active .dl-cat-count{
  background:rgba(249,168,38,.25);
  color:#f9a826;
}

.dl-search{
  position:relative;
  display:flex;
  align-items:center;
  min-width:220px;
}
.dl-search i{
  position:absolute;
  left:12px;
  color:#8797a6;
  font-size:.85rem;
}
.dl-search input{
  width:100%;
  padding:9px 14px 9px 34px;
  border:1px solid #d5dee5;
  border-radius:9px;
  font-size:.85rem;
  font-family:inherit;
  background:#fbfcfd;
  transition:.15s;
}
.dl-search input:focus{
  outline:none;
  border-color:#0b3b5c;
  background:#fff;
  box-shadow:0 0 0 3px rgba(11,59,92,.08);
}

/* ---------- Files list ---------- */
.dl-list-wrap{ padding:10px 0 60px; }
.dl-count{
  font-size:.85rem;
  color:#6b7a88;
  margin-bottom:16px;
  padding:0 4px;
}
.dl-count strong{ color:#1e2b37; font-weight:700; }

.dl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;
}
@media (max-width:560px){
  .dl-grid{ grid-template-columns:1fr; }
}

.dl-card{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:14px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:.2s;
  position:relative;
}
.dl-card:hover{
  transform:translateY(-3px);
  border-color:#0b3b5c;
  box-shadow:0 16px 32px -18px rgba(11,59,92,.25);
}

.dl-card-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  color:#fff;
  position:relative;
  flex-shrink:0;
}
.dl-card-icon.pdf   { background:linear-gradient(135deg,#d32f2f,#b71c1c); }
.dl-card-icon.doc   { background:linear-gradient(135deg,#1976d2,#0d47a1); }
.dl-card-icon.xls   { background:linear-gradient(135deg,#388e3c,#1b5e20); }
.dl-card-icon.ppt   { background:linear-gradient(135deg,#d24726,#a13320); }
.dl-card-icon.img   { background:linear-gradient(135deg,#7b1fa2,#4a148c); }
.dl-card-icon.zip   { background:linear-gradient(135deg,#f9a826,#c67c00); }
.dl-card-icon.other { background:linear-gradient(135deg,#0b3b5c,#082c44); }

.dl-card-ext{
  position:absolute;
  bottom:-6px;
  right:-6px;
  background:#fff;
  color:#0b3b5c;
  font-size:.62rem;
  font-weight:800;
  padding:2px 7px;
  border-radius:6px;
  letter-spacing:.5px;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}

.dl-card-body{ flex:1; }
.dl-card-body h3{
  font-size:1rem;
  color:#0b3b5c;
  font-weight:700;
  line-height:1.35;
  margin-bottom:6px;
  letter-spacing:-0.2px;
}
.dl-card-body p{
  font-size:.82rem;
  color:#6b7a88;
  line-height:1.55;
  margin-bottom:12px;
}
.dl-card-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:.72rem;
  color:#9aa8b4;
  margin-top:auto;
}
.dl-card-meta i{ margin-right:3px; }

.dl-card-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  background:linear-gradient(135deg,#0b3b5c,#1b5a7a);
  color:#fff;
  border-radius:10px;
  font-size:.85rem;
  font-weight:700;
  transition:.18s;
  margin-top:auto;
  box-shadow:0 4px 10px -3px rgba(11,59,92,.25);
  text-decoration:none;
}
.dl-card-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px -8px rgba(11,59,92,.4);
  background:linear-gradient(135deg,#1b5a7a,#0b3b5c);
}

/* ---------- Empty ---------- */
.dl-empty{
  text-align:center;
  padding:70px 20px;
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:16px;
}
.dl-empty i{
  font-size:2.5rem;
  color:#d5dee5;
  margin-bottom:14px;
  display:block;
}
.dl-empty h3{
  color:#1e2b37;
  font-size:1.1rem;
  margin-bottom:6px;
}
.dl-empty p{
  color:#8797a6;
  font-size:.9rem;
}
.dl-empty a{
  color:#0b3b5c;
  font-weight:700;
  text-decoration:underline;
}

/* ---------- Help CTA ---------- */
.dl-help{ padding:20px 0 60px; }
.dl-help-inner{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:16px;
  padding:22px 26px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.dl-help-icon{
  width:50px;
  height:50px;
  border-radius:12px;
  background:linear-gradient(135deg,#e0ecf9,#fff7e6);
  color:#0b3b5c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  flex-shrink:0;
}
.dl-help-inner > div:nth-child(2){ flex:1; min-width:220px; }
.dl-help-inner h3{
  font-size:1.05rem;
  color:#0b3b5c;
  font-weight:700;
  margin-bottom:4px;
}
.dl-help-inner p{
  font-size:.85rem;
  color:#6b7a88;
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .dl-hero{ padding:32px 0 40px; }
  .dl-hero h1{ font-size:1.6rem; }
  .dl-hero p{ font-size:.88rem; }
  .dl-toolbar{ padding:12px 14px; }
  .dl-search{ width:100%; }
  .dl-help-inner{ padding:18px 20px; }
  .dl-help-inner .btn{ width:100%; justify-content:center; }
}
/* ============================================================
   GLOBAL — MOBILE FRIENDLY OVERHAUL
   ============================================================
   Breakpoints:
     1024px — tablets
      768px — small tablets / large phones
      640px — phones
      480px — small phones
   ============================================================ */

/* ---------- Base touch improvements ---------- */
html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
}
*{
  -webkit-overflow-scrolling:touch;
}

/* Minimum tap target size for interactive elements */
button,
.btn,
.btn-primary,
.btn-soft,
.btn-ghost,
.icon-btn,
a.btn,
input[type="submit"],
select{
  min-height:44px;
}

/* Prevent horizontal scroll on body */
body{
  overflow-x:hidden;
  width:100%;
}

/* Images never overflow */
img{
  max-width:100%;
  height:auto;
}

/* Long words wrap */
h1, h2, h3, h4, p, td, th{
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* ============================================================
   TABLET — 1024px and below
   ============================================================ */
@media (max-width:1024px){

  /* Container padding */
  .container{
    padding:0 20px;
  }

  /* Admin main padding */
  .admin-main{
    padding:24px 20px;
  }

  /* Grid collapses */
  .grid-3{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  }

  /* Modals full width */
  .modal-box{
    max-width:calc(100vw - 32px) !important;
  }
}

/* ============================================================
   SMALL TABLET / LARGE PHONE — 768px and below
   ============================================================ */
@media (max-width:768px){

  /* ---------- Container ---------- */
  .container{
    padding:0 16px;
  }

  /* ---------- Typography scale ---------- */
  h1{ font-size:1.5rem; }
  h2{ font-size:1.25rem; }
  h3{ font-size:1.05rem; }

  .page-head h1{ font-size:1.4rem; }
  .ph-sub{ font-size:.85rem; }

  /* ---------- Page head layout ---------- */
  .page-head{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  .ph-right{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .ph-right > *{
    flex:1;
    min-width:0;
  }

  /* ---------- Admin sidebar ---------- */
  .admin-sidebar{
    position:fixed;
    top:0;
    left:-100%;
    z-index:1200;
    width:280px !important;
    max-width:85vw;
    height:100vh;
    transition:left .25s ease;
    box-shadow:2px 0 24px rgba(0,0,0,.2);
  }
  .admin-sidebar.open{ left:0; }
  .admin-sidebar.collapsed{
    width:280px !important;
    max-width:85vw;
  }

  /* Mobile close overlay */
  .admin-sidebar.open::before{
    content:"";
    position:fixed;
    top:0;
    left:280px;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.5);
    z-index:-1;
  }

  /* Mobile toggle button */
  .admin-mobile-toggle{
    display:flex !important;
    align-items:center;
    justify-content:center;
    top:12px;
    left:12px;
    width:42px;
    height:42px;
    z-index:1300;
  }

  /* Push main content below header */
  .admin-content-wrap .admin-main{
    padding:64px 16px 20px !important;
  }

  /* Top header mobile */
  .admin-topbar{
    padding:0 14px !important;
    height:auto !important;
    min-height:52px;
  }
  .atb-search{
    display:none; /* Hide global search on mobile — sidebar has its own */
  }
  .atb-crumbs{ font-size:12px; }
  .atb-profile-info{ display:none; }
  .atb-profile-caret{ display:none; }
  .atb-icon-btn{ width:38px; height:38px; }

  /* ---------- Student/Faculty sidebar ---------- */
  .student-sidebar{
    position:fixed !important;
    top:0;
    left:-100%;
    z-index:1200;
    width:280px !important;
    max-width:85vw;
    height:100vh;
    transition:left .25s ease;
    box-shadow:2px 0 24px rgba(0,0,0,.2);
  }
  .student-sidebar.open{ left:0; }

  /* Add mobile toggle if missing (JS handles) */
  .student-main{
    padding:20px 16px !important;
    width:100% !important;
  }

  /* ---------- Public site header ---------- */
  .site-topbar{
    padding:6px 0;
    font-size:11px;
  }
  .site-topbar-inner{
    flex-direction:column;
    gap:6px;
  }
  .st-left,
  .st-right{
    gap:12px;
    justify-content:center;
  }
  .st-left a:not(:first-child),
  .st-divider{
    display:none;
  }

  .site-header-inner{
    padding:10px 0;
    min-height:56px;
  }
  .site-nav{
    display:none !important;
  }
  .sh-menu-toggle{
    display:flex !important;
  }
  .sh-btn span{
    display:none;
  }
  .sh-btn{
    padding:9px 12px;
    min-width:44px;
  }

  /* ---------- Home hero ---------- */
  .hero-slider{
    aspect-ratio:16 / 10 !important;
    min-height:260px !important;
  }
  .hero-nav{
    width:40px;
    height:40px;
    opacity:1 !important;
  }
  .hero-prev{ left:12px; }
  .hero-next{ right:12px; }
  .hero-dots{
    bottom:14px;
    padding:6px 12px;
  }

  /* ---------- Quick strip ---------- */
  .quick-strip{
    margin-top:-20px;
  }
  .quick-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .quick-tile{
    padding:12px 14px;
    gap:10px;
  }
  .quick-tile i{
    width:38px;
    height:38px;
    font-size:1.4rem;
  }
  .quick-tile strong{ font-size:.85rem; }
  .quick-tile span{ font-size:.7rem; }

  /* ---------- Feature cards ---------- */
  .feature-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .feature-card{
    padding:22px 20px;
  }
  .feature-icon{
    width:48px;
    height:48px;
    font-size:1.4rem;
  }

  /* ---------- Stats banner ---------- */
  .stats-banner{
    margin:20px 12px;
    padding:32px 20px;
    border-radius:16px;
  }
  .stats-banner-inner{
    grid-template-columns:1fr 1fr;
    gap:18px;
  }
  .stats-banner-inner i{ font-size:1.6rem; }
  .stats-banner-inner strong{ font-size:1.8rem; }
  .stats-banner-inner span{ font-size:.7rem; }

  /* ---------- About section ---------- */
  .about-section{
    margin:16px 12px;
    padding:32px 20px;
    border-radius:20px;
  }
  .about-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .about-visual{ height:300px; }
  .about-text h2{ font-size:1.5rem; }
  .about-badge{
    padding:12px 16px;
    left:-6px;
  }
  .about-badge strong{ font-size:1.5rem; }
  .about-badge span{ font-size:.7rem; }

  /* ---------- Courses ---------- */
  .courses-section,
  .notice-section,
  .testimonial-section{
    margin:16px 12px;
    padding:32px 20px;
    border-radius:20px;
  }
  .course-grid,
  .faculty-grid-home,
  .testimonial-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  /* ---------- Notices & Events two-col ---------- */
  .two-col-home{
    grid-template-columns:1fr;
    gap:34px;
  }
  .notice-card,
  .event-card{
    padding:14px;
    gap:12px;
  }
  .notice-date,
  .event-date{
    min-width:48px;
    height:48px;
  }
  .notice-date span,
  .event-date span{ font-size:1.05rem; }
  .notice-date small,
  .event-date small{ font-size:.58rem; }

  /* ---------- CTA ---------- */
  .cta-section{ padding:30px 16px; }
  .cta-inner{
    padding:32px 24px;
    flex-direction:column;
    text-align:center;
    gap:20px;
    border-radius:20px;
  }
  .cta-inner h2{ font-size:1.35rem; }
  .cta-buttons{
    width:100%;
    flex-direction:column;
  }
  .cta-buttons .btn{
    width:100%;
    justify-content:center;
  }

  /* ---------- Contact strip ---------- */
  .contact-strip{
    padding:20px 0 50px;
  }
  .contact-strip-inner{
    grid-template-columns:1fr;
    gap:14px;
    padding:20px;
  }

  /* ============================================================
     TABLES — Turn into cards on mobile
     ============================================================ */

  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:12px;
  }

  .modern-table{
    min-width:600px;
  }

  /* Alternative card-style table for very narrow screens */
  @media (max-width:640px){
    .modern-table{
      min-width:100%;
    }
    .modern-table thead{
      display:none;
    }
    .modern-table tbody tr{
      display:block;
      padding:14px 16px;
      border-bottom:1px solid #e8ecf0;
      position:relative;
    }
    .modern-table tbody tr:last-child{
      border-bottom:none;
    }
    .modern-table tbody td{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:6px 0;
      border:none;
      font-size:.85rem;
    }
    .modern-table tbody td::before{
      content:attr(data-label);
      font-weight:700;
      font-size:.7rem;
      text-transform:uppercase;
      letter-spacing:.5px;
      color:#8a97a5;
      flex-shrink:0;
      margin-right:12px;
    }
    .modern-table tbody td.td-num{ display:none; }
    .modern-table tbody td:first-child{ padding-top:0; }
    .modern-table tbody td:last-child{
      padding-top:12px;
      margin-top:6px;
      border-top:1px solid #f0f4f8;
      justify-content:flex-end;
    }
    .modern-table tbody td:last-child::before{ display:none; }
  }

  /* ============================================================
     KPI / STATS CARDS
     ============================================================ */
  .msg-stats,
  .kpi-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
  .ms-card,
  .kpi-card{
    padding:14px;
    gap:10px;
  }
  .ms-icon,
  .kpi-icon{
    width:40px;
    height:40px;
    font-size:1rem;
  }
  .ms-card strong,
  .kpi-value{ font-size:1.35rem !important; }
  .ms-card span,
  .kpi-label{ font-size:.65rem; }

  /* ============================================================
     FILTER CHIPS / TABS — horizontal scroll
     ============================================================ */
  .lead-filters,
  .msg-tabs,
  .admin-tabs,
  .et-time-tabs{
    display:flex;
    gap:6px;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    width:100%;
  }
  .lead-filters::-webkit-scrollbar,
  .msg-tabs::-webkit-scrollbar,
  .admin-tabs::-webkit-scrollbar,
  .et-time-tabs::-webkit-scrollbar{
    display:none;
  }
  .lf-chip,
  .msg-tab,
  .admin-tab,
  .et-time-tab{
    flex-shrink:0;
    font-size:.75rem;
    padding:8px 14px;
    white-space:nowrap;
  }

  /* ============================================================
     TOOLBAR
     ============================================================ */
  .toolbar,
  .students-toolbar,
  .att-toolbar,
  .campaign-filter-bar{
    flex-direction:column;
    align-items:stretch;
    padding:14px;
    gap:12px;
  }
  .toolbar .tb-left,
  .toolbar .tb-right{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    width:100%;
  }
  .search-box{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .search-box input{
    width:100%;
    font-size:16px; /* Prevent iOS zoom on focus */
  }
  .tb-select{
    width:100%;
    font-size:16px;
  }

  /* ============================================================
     MODALS — Full width on mobile
     ============================================================ */
  .modal-overlay,
  .msg-modal-overlay,
  .notice-modal-overlay{
    padding:16px !important;
    align-items:flex-start !important;
  }
  .modal-box,
  .msg-modal,
  .notice-modal{
    max-width:100% !important;
    width:100% !important;
    max-height:90vh;
    margin:0 !important;
    border-radius:14px;
  }
  .modal-head,
  .form-section,
  .modal-actions{
    padding:18px 20px !important;
  }
  .modal-actions{
    flex-direction:column-reverse;
    gap:10px;
  }
  .modal-actions button,
  .modal-actions .btn-primary,
  .modal-actions .btn-ghost{
    width:100%;
    justify-content:center;
  }

  /* Form inputs inside modals — prevent iOS zoom */
  .modal-form input,
  .modal-form select,
  .modal-form textarea,
  .form-grid input,
  .form-grid select,
  .form-grid textarea{
    font-size:16px !important;
    min-height:44px;
  }

  /* ---------- Form grids stack ---------- */
  .form-grid,
  .uc-grid,
  .eb-grid,
  .adm-grid,
  .cf-grid{
    grid-template-columns:1fr !important;
    gap:14px;
  }
  .form-grid .col-2,
  .uc-grid .uc-col-2,
  .eb-grid .col-2,
  .adm-grid .col-2,
  .cf-grid .col-2{
    grid-column:span 1 !important;
  }

  /* ============================================================
     ATTENDANCE TABLE
     ============================================================ */
  .att-table{
    min-width:0;
  }
  .status-picker{
    gap:6px;
    flex-wrap:wrap;
  }
  .sp-label{
    padding:8px 12px;
    font-size:12px;
    min-height:40px;
  }
  .att-summary{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
  .as-card{
    padding:12px 14px;
  }
  .as-info strong{ font-size:1.35rem; }

  .att-quickbar{
    flex-direction:column;
    gap:10px;
  }
  .aqb-left{
    justify-content:center;
  }

  .att-savebar{
    flex-direction:column;
    padding:14px;
    gap:12px;
  }
  .asb-right{
    width:100%;
    flex-direction:column;
    gap:8px;
  }
  .asb-right button{
    width:100%;
    justify-content:center;
  }

  /* ============================================================
     LMS / STUDY MATERIAL / ASSIGNMENTS
     ============================================================ */
  .material-item,
  .mat-item,
  .assign-card,
  .assignment-card{
    padding:16px;
  }
  .mat-item{
    flex-direction:column;
    align-items:stretch;
  }
  .mat-actions,
  .ac-actions{
    justify-content:flex-start;
    padding-top:12px;
    border-top:1px solid #f0f4f8;
    flex-direction:column;
    gap:8px;
    width:100%;
  }
  .mat-actions > *,
  .ac-actions > *{
    width:100%;
    justify-content:center;
  }
  .ac-head{
    flex-direction:column;
    gap:12px;
  }
  .ac-due{
    align-self:flex-start;
  }

  /* ============================================================
     PAGINATION
     ============================================================ */
  .pager,
  .pagination{
    grid-template-columns:1fr !important;
    justify-items:center;
    gap:14px;
    padding:14px;
  }
  .pager-info{
    text-align:center;
    order:2;
  }
  .pager-nav{
    order:1;
    justify-content:center;
    flex-wrap:wrap;
  }
  .pager-jump{
    justify-self:center !important;
    order:3;
  }

  /* ============================================================
     FOOTER
     ============================================================ */
  .footer{
    padding:28px 16px 16px;
    border-radius:24px 24px 0 0;
  }
  .footer-links{
    gap:16px;
    flex-direction:column;
    align-items:center;
  }
  .footer-links a{ font-size:.85rem; }

  /* ============================================================
     HOME HERO — smaller on phones
     ============================================================ */
  @media (max-width:640px){
    .home-hero{
      padding:50px 0 90px;
      border-radius:0 0 24px 24px;
    }
    .hero-text h1{
      font-size:1.9rem !important;
      letter-spacing:-0.5px;
    }
    .hero-text p{ font-size:.95rem; }
    .hero-stats{ gap:16px; }
    .hero-stats strong{ font-size:1.3rem !important; }
    .hero-visual{ height:230px !important; }
    .hero-card{ display:none !important; }
    .home-hero .container{ padding:0 20px; }
  }

  /* ============================================================
     PRINCIPAL / ADMISSIONS / CONTACT / GALLERY / EVENTS
     ============================================================ */
  .principal-hero,
  .adm-hero,
  .notices-hero,
  .contact-hero,
  .gallery-hero,
  .dl-hero{
    padding:32px 0 40px !important;
    border-radius:0 0 20px 20px !important;
  }
  .principal-hero h1,
  .adm-hero h1,
  .notices-hero h1,
  .contact-hero h1,
  .gallery-hero h1,
  .dl-hero h1{
    font-size:1.6rem !important;
    letter-spacing:-0.4px;
  }

  /* Principal page layout */
  .message-layout{
    grid-template-columns:1fr !important;
    gap:20px;
  }
  .message-side{
    position:static !important;
  }
  .message-main{
    padding:22px 20px !important;
  }
  .ph-inner{
    grid-template-columns:1fr !important;
    gap:20px !important;
    text-align:center;
  }
  .ph-photo-wrap{
    width:170px !important;
    height:170px !important;
  }

  /* Gallery */
  .gallery-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .lb-inner img{ max-height:60vh; }
  .lb-prev,
  .lb-next{
    width:40px;
    height:40px;
  }

  /* Downloads public */
  .dl-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  /* ============================================================
     FACULTY TIMETABLE — Horizontal scroll
     ============================================================ */
  .tt-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .tt-table{
    min-width:720px;
  }
  .tt-entry{
    padding:6px 4px;
    font-size:.7rem;
  }
  .tte-subject{ font-size:.72rem; }
  .tte-class{ font-size:.6rem; padding:1px 6px; }
  .tte-room{ font-size:.6rem; }

  /* ============================================================
     SECTIONS LIST (edit_page)
     ============================================================ */
  .si-head{
    flex-wrap:wrap;
  }
  .si-actions{
    width:100%;
    justify-content:flex-end;
  }
}

/* ============================================================
   PHONES — 640px and below
   ============================================================ */
@media (max-width:640px){

  /* Typography */
  body{ font-size:14px; }
  h1{ font-size:1.35rem; }
  h2{ font-size:1.15rem; }
  h3{ font-size:1rem; }

  /* Container */
  .container{ padding:0 14px; }

  /* Admin main */
  .admin-content-wrap .admin-main{
    padding:60px 14px 20px !important;
  }

  /* KPI grid — 1 column on very small */
  .msg-stats,
  .kpi-grid{
    grid-template-columns:1fr;
  }

  /* Quick tiles single column */
  .quick-grid{
    grid-template-columns:1fr;
  }

  /* Buttons full width in groups */
  .btn-group,
  .hero-cta{
    flex-direction:column;
    gap:10px;
  }
  .btn-group .btn,
  .hero-cta .btn{
    width:100%;
    justify-content:center;
  }

  /* Tables keep horizontal scroll for complex data */
  .table-wrap{
    margin-left:-14px;
    margin-right:-14px;
    padding-left:14px;
    padding-right:14px;
  }

  /* Status pickers in attendance — collapse to icons */
  .sp-label span{
    display:none;
  }
  .sp-label i{
    font-size:14px;
    margin:0;
  }
  .sp-label{
    padding:10px 12px;
    min-width:44px;
    justify-content:center;
  }

  /* Attendance summary */
  .att-summary{
    grid-template-columns:repeat(2, 1fr);
  }
  .as-card.pct{
    grid-column:span 2;
  }

  /* Hero (image carousel) */
  .hero-slider{
    aspect-ratio:4 / 3 !important;
    min-height:220px !important;
  }

  /* Contact form */
  .contact-layout,
  .contact-side{
    grid-template-columns:1fr !important;
  }
  .contact-form-card{
    padding:20px 16px !important;
  }

  /* Gallery 1 col */
  .gallery-grid{
    grid-template-columns:1fr !important;
  }

  /* Modal padding tighter */
  .modal-overlay,
  .msg-modal-overlay{
    padding:10px !important;
  }
  .modal-box,
  .msg-modal{
    border-radius:12px;
  }

  /* Notice/event date blocks smaller */
  .notice-date,
  .event-date{
    min-width:44px;
    height:44px;
  }
  .notice-date span,
  .event-date span{ font-size:.95rem; }
  .notice-date small,
  .event-date small{ font-size:.55rem; }

  /* Footer */
  .footer-links{
    gap:12px;
  }
}

/* ============================================================
   VERY SMALL PHONES — 480px and below
   ============================================================ */
@media (max-width:480px){

  /* Base font */
  body{ font-size:13.5px; }

  h1{ font-size:1.2rem; }
  h2{ font-size:1.05rem; }
  h3{ font-size:.95rem; }

  /* Very tight container */
  .container{ padding:0 12px; }

  /* Small KPI numbers */
  .ms-card strong,
  .kpi-value{ font-size:1.2rem !important; }

  /* Feature cards compact */
  .feature-card{ padding:18px 16px; }

  /* Section head smaller */
  .section-head h2{ font-size:1.35rem !important; }

  /* Hero text */
  .hero-text h1{ font-size:1.65rem !important; }
  .hero-text p{ font-size:.88rem; }

  /* Buttons compact */
  .btn{
    padding:11px 20px;
    font-size:.9rem;
  }
  .btn-primary,
  .btn-soft,
  .btn-ghost{
    padding:11px 18px;
    font-size:.85rem;
  }

  /* Table card style compact */
  .modern-table tbody td{
    padding:5px 0;
    font-size:.8rem;
  }
}

/* ============================================================
   LANDSCAPE MODE — short heights
   ============================================================ */
@media (max-height:500px) and (orientation:landscape){
  .hero-slider{
    min-height:200px !important;
  }
  .home-hero{
    padding:30px 0 60px !important;
  }
}

/* ============================================================
   PRINT — hide navigation, show content
   ============================================================ */
@media print{
  .admin-sidebar,
  .student-sidebar,
  .admin-topbar,
  .admin-mobile-toggle,
  .site-header,
  .site-topbar,
  .site-mobile-nav,
  .footer,
  .page-head .ph-right,
  .att-savebar,
  .att-quickbar,
  .toolbar,
  .lead-filters,
  .admin-tabs,
  .msg-tabs{
    display:none !important;
  }
  .admin-content-wrap .admin-main,
  .student-main{
    padding:0 !important;
  }
  .admin-body,
  .student-body{
    display:block !important;
  }
  body{ background:#fff; }
  .dash-card,
  .table-wrap,
  .modal-box{
    box-shadow:none !important;
    border:1px solid #ddd !important;
  }
}
/* ============================================================
   MOBILE FIX — For old header structure (.top-bar + .main-header)
   ============================================================ */

@media (max-width:768px){

  /* ---------- TOP BAR ---------- */
  .top-bar{
    padding:8px 0;
    font-size:.78rem;
  }
  .top-bar .container{
    flex-direction:column;
    gap:6px;
    align-items:center;
    text-align:center;
  }
  .top-contact{
    font-size:.75rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
  .top-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }
  .top-links a{
    margin-left:0;
    padding:4px 10px;
    background:rgba(255,255,255,.08);
    border-radius:20px;
    font-size:.72rem;
    white-space:nowrap;
  }
  .top-links a i{
    font-size:.68rem;
    margin-right:3px;
  }

  /* ---------- MAIN HEADER ---------- */
  .main-header{
    padding:10px 0;
  }
  .main-header .container{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  /* Logo area centered */
  .logo-area{
    justify-content:center;
  }
  .logo-icon{
    width:40px;
    height:40px;
    font-size:1.4rem;
    border-radius:11px;
  }
  .logo-text h1{
    font-size:1.25rem;
  }
  .logo-text span{
    font-size:.65rem;
  }

  /* ---------- NAV MENU — Horizontal scroll ---------- */
  .nav-menu{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:2px;
    padding:4px 0;
    width:100%;
    justify-content:flex-start;

    /* Hide scrollbar on all browsers */
    -ms-overflow-style:none;
    scrollbar-width:none;

    /* Smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling:touch;

    /* Fade edges to hint scrollability */
    mask-image:linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
  }
  .nav-menu::-webkit-scrollbar{
    display:none;
  }
  .nav-menu a{
    flex-shrink:0;
    padding:8px 14px;
    font-size:.8rem;
    border-radius:20px;
    white-space:nowrap;
  }
  .nav-menu a.active{
    background:var(--primary);
    color:#fff;
  }
}

@media (max-width:480px){
  /* Even tighter spacing */
  .top-bar{
    padding:6px 0;
    font-size:.72rem;
  }
  .top-links a{
    padding:3px 8px;
    font-size:.68rem;
  }
  .logo-text h1{ font-size:1.1rem; }
  .logo-icon{
    width:36px;
    height:36px;
    font-size:1.2rem;
  }
  .nav-menu a{
    padding:7px 12px;
    font-size:.75rem;
  }
}

/* ============================================================
   QUICK TILES — Better mobile spacing
   ============================================================ */
@media (max-width:768px){
  .quick-strip{
    margin:-20px 0 30px;
  }
  .quick-grid{
    grid-template-columns:1fr;
    gap:10px;
    padding:0 4px;
  }
  .quick-tile{
    padding:14px 16px;
    gap:12px;
    border-radius:14px;
  }
  .quick-tile i{
    width:40px;
    height:40px;
    font-size:1.3rem;
    border-radius:11px;
  }
  .quick-tile strong{
    font-size:.9rem;
  }
  .quick-tile span{
    font-size:.75rem;
  }
}

/* ============================================================
   HERO CAROUSEL — phone sizing
   ============================================================ */
@media (max-width:768px){
  .hero-slider{
    min-height:240px !important;
    aspect-ratio:16 / 10 !important;
    border-radius:0;
  }
  .hero-nav{
    width:38px;
    height:38px;
    opacity:1 !important;
    font-size:13px;
  }
  .hero-prev{ left:10px; }
  .hero-next{ right:10px; }
  .hero-dots{
    bottom:12px;
    gap:6px;
    padding:6px 10px;
  }
  .hero-dot{
    width:7px;
    height:7px;
  }
  .hero-dot.active{
    width:20px;
  }
}

/* ============================================================
   MAIN CONTENT — Reduce padding on mobile
   ============================================================ */
@media (max-width:768px){
  main.container{
    padding:0 14px;
  }
  .home-section{
    padding:40px 0;
  }
  .section-head{
    margin-bottom:30px;
  }
  .section-head h2{
    font-size:1.5rem;
  }
  .section-head p{
    font-size:.9rem;
  }
}
/* Hide the toggle on desktop */
.nav-toggle-mobile{
  display:none;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:.15s;
}
.nav-toggle-mobile:hover{
  background:var(--primary-light);
}

@media (max-width:768px){
  /* Show toggle button */
  .nav-toggle-mobile{
    display:inline-flex;
    width:100%;
    justify-content:center;
    margin-top:8px;
  }

  /* Hide nav by default on mobile */
  .nav-menu{
    display:none !important;
    flex-direction:column;
    align-items:stretch;
    overflow:visible;
    padding:10px 0;
    mask-image:none;
    -webkit-mask-image:none;
  }

  /* Show nav when toggled open */
  .nav-menu.open{
    display:flex !important;
  }

  /* Full-width nav items */
  .nav-menu a{
    padding:12px 16px;
    border-radius:8px;
    font-size:.9rem;
    text-align:left;
  }
}
/* ============================================================
   MOBILE — CLEAN TOP BAR (hide login links)
   ============================================================ */

@media (max-width:900px){
  /* Hide login links — they're in the quick tiles below */
  .top-links{
    display:none !important;
  }
  .top-bar .container{
    justify-content:center;
    text-align:center;
  }
  .top-contact{
    font-size:.78rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
}
/* ============================================================
   MOBILE HAMBURGER MENU
   ============================================================ */

/* Hide hamburger on desktop */
.mobile-menu-btn{
  display:none;
}

@media (max-width:900px){

  /* Show hamburger */
  .mobile-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:10px;
    background:var(--primary);
    color:#fff;
    border:none;
    font-size:16px;
    cursor:pointer;
    flex-shrink:0;
    transition:.15s;
  }
  .mobile-menu-btn:hover,
  .mobile-menu-btn:active{
    background:var(--primary-light);
  }
  .mobile-menu-btn i{ font-size:16px; }

  /* Keep header row on one line */
  .main-header .container{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .logo-area{
    justify-content:flex-start;
    flex:1;
    min-width:0;
  }
  .logo-text h1{ font-size:1.15rem; }
  .logo-text span{ font-size:.6rem; letter-spacing:.5px; }
  .logo-icon{
    width:38px;
    height:38px;
    font-size:1.3rem;
    border-radius:10px;
  }

  /* Nav menu — dropdown panel */
  .nav-menu{
    display:none !important;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:280px;
    max-width:85vw;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    padding:60px 12px 20px;
    gap:2px;
    overflow-y:auto;
    z-index:1200;
    box-shadow:-4px 0 24px rgba(0,0,0,.15);
    transform:translateX(100%);
    transition:transform .25s ease;
  }

  .nav-menu.open{
    display:flex !important;
    transform:translateX(0);
  }

  /* Full-width nav items */
  .nav-menu a{
    display:flex;
    align-items:center;
    padding:13px 16px;
    border-radius:9px;
    font-size:.95rem;
    font-weight:500;
    color:#3d4c5c;
    text-align:left;
    transition:.15s;
    background:#fff;
  }
  .nav-menu a:hover{
    background:#f5f7fa;
    color:#0d2438;
  }
  .nav-menu a.active{
    background:var(--primary);
    color:#fff;
    font-weight:600;
  }

  /* Close button inside menu */
  .nav-menu::before{
    content:"\f00d";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    top:16px;
    right:16px;
    width:36px;
    height:36px;
    border-radius:9px;
    background:#f4f7fa;
    color:#5a6a7a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    cursor:pointer;
    transition:.15s;
  }
  .nav-menu::before:hover{
    background:#fde5e5;
    color:#dc2626;
  }

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */

.mobile-menu-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(13,36,56,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:1190;
  opacity:0;
  transition:opacity .25s ease;
  cursor:pointer;
}
.mobile-menu-overlay.open{
  display:block;
  opacity:1;
}

/* Prevent body scroll when menu is open */
body.menu-open{
  overflow:hidden;
  position:fixed;
  width:100%;
}
}
/* ============================================================
   MOBILE — Z-INDEX LOCK
   ============================================================ */
@media (max-width:900px){
  /* Page content — below everything */
  main,
  .admin-main,
  .student-main{
    position:relative;
    z-index:1;
  }

  /* Top bar — below overlay */
  .top-bar{
    position:relative;
    z-index:10;
  }

  /* Header — below overlay */
  .main-header{
    position:sticky;
    top:0;
    z-index:50;
  }

  /* Overlay — above header, below menu */
  .mobile-menu-overlay.open{
    z-index:1190;
  }

  /* Menu panel — above overlay */
  .nav-menu.open{
    z-index:1200;
  }

  /* Menu close button (inside nav-menu::before) */
  .nav-menu::before{
    z-index:1;
  }
}