:root {
  --primary: #0f2545; /* dark navy */
  --secondary: #1a3a6b; /* medium navy */
  --accent: #c9a227; /* gold */
  --success: #1a7a4a; /* dark green */
  --whatsapp: #25D366; /* whatsapp green */
  --light-bg: #f0f4f8; /* light gray blue */
  --card-shadow: 0 4px 20px rgba(0,0,0,0.08);
  --font: 'Poppins', sans-serif;

  /* Backward-compatible aliases used by existing CSS */
  --bg: #0f1419;
  --surface: #1a2332;
  --surface2: #243044;
  --text: #e8edf4;
  --muted: #8b9cb3;
  --accent2: #3d8bfd; /* legacy link accent */
  --accentLink: #5c9eff;
  --warning: #f0c14b;
  --danger: #f07178;
  --radius: 10px;
}

.footerSchool {
  padding: 16px 12px;
  color: #6b7280;
  font-size: 13px;
}

* {
  box-sizing: border-box;
}

::placeholder {
  color: #94a3b8 !important;
  opacity: 0.6 !important;
}
::-webkit-input-placeholder {
  color: #94a3b8 !important;
  opacity: 0.6 !important;
}
::-moz-placeholder {
  color: #94a3b8 !important;
  opacity: 0.6 !important;
}

html {
  overflow: hidden;
}

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  font-family: var(--font);
  background: var(--light-bg);
  color: #0f2545;
  line-height: 1.5;
}

.custom-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.7);
}

a {
  color: var(--accent2);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #0f2545 0%, #1a3a6b 100%);
  border-right: 1px solid rgba(255,255,255,0.08);
  padding: 0.25rem 0 0 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  /* Completely prevent scrolling as requested */
  overflow: hidden;
}

.sidebar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.sidebar h1 {
  font-size: 1rem;
  margin: 0 1rem 0.5rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Keep JS-generated <h1> text but visually replace it with school name */
.sidebar h1 {
  font-size: 0;
}
.sidebar h1::after {
  content: 'Surya Vidya Nikethan School';
  font-size: 1rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sidebar nav {
  flex: 1;
  overflow: hidden;
}
.sidebar nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}

.sidebar .logout {
  margin-top: auto;
  padding: 0.25rem 1.25rem 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.sidebar .logout button {
  width: 100%;
  margin: 0;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar .logout button:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.45) !important;
}



.sidebar a {
  color: rgba(255,255,255,0.92);
}

.sidebar nav a {
  display: block;
  padding: 0.4rem 1.25rem;
  color: rgba(255,255,255,0.92);
  border-left: 3px solid transparent;
  text-decoration: none;
  font-size: 0.92rem;
}

.sidebar nav a:hover,
.sidebar nav a.active {
  background: rgba(255,255,255,0.08);
  border-left-color: var(--accent);
  color: #fff;
  text-decoration: none;
}

.main {
  flex: 1;
  padding: 1.75rem 2rem;
  overflow-y: auto;
  min-height: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.main::-webkit-scrollbar {
  display: none;
}

.main h2 {
  margin-top: 0;
  font-weight: 600;
  font-size: 1.35rem;
}

.card {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e7eef6;
  box-shadow: var(--card-shadow);
}

.card-titlebar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  margin: -0.6rem -0.5rem 1rem -0.5rem;
  border: 1px solid rgba(255,255,255,0.08);
}

.card-titlebar i {
  color: var(--accent);
  font-size: 1.05rem;
}

.compact-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.card-header-compact { padding: 0.35rem 0.8rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 8px; }
.header-upload { background: #f0f9ff; color: #0284c7; }
.header-filter { background: #f8fafc; color: #475569; }
.header-download { background: #fef2f2; color: #dc2626; }

.modern-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.modern-table th { background: #f8fafc; color: #475569; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 16px; border-bottom: 2px solid #e2e8f0; }
.modern-table td { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #1e293b; font-size: 0.85rem; }
.modern-table tr:hover td { background: #f8fafc; }

.btn-action { height: 32px; width: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; transition: all 0.2s; }
.btn-purple { background-color: #9164f3; color: white; border-radius: 6px; font-weight: 600; border: 1px solid #9164f3; }
.btn-purple:hover { background-color: #7c52df; color: white; border-color: #7c52df; }

.btn-outline-purple { 
  background-color: transparent !important; 
  color: #9164f3 !important; 
  border: 1px solid #9164f3 !important; 
  border-radius: 6px !important; 
  font-weight: 600 !important; 
}
.btn-outline-purple:hover { 
  background-color: #9164f3 !important; 
  color: white !important; 
}

.btn-action:hover { border-color: #cbd5e1; background: #f8fafc; color: #0f172a; }
.btn-action.text-danger:hover { color: #ef4444; border-color: #fca5a5; background: #fef2f2; }
.btn-action.text-primary:hover { color: #3b82f6; border-color: #bfdbfe; background: #eff6ff; }

.card-titlebar span {
  font-weight: 700;
}

label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: #3b5b80;
}

input,
select,
textarea {
  width: 100%;
  max-width: 420px;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid #dbe3ee;
  background-color: #f8fafc;
  color: #0f1419;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

textarea {
  min-height: 100px;
  max-width: 640px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(26,58,107,0.45);
  box-shadow: 0 0 0 4px rgba(26,58,107,0.18);
}

button,
.btn {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  border: none;
  background: linear-gradient(180deg, var(--secondary), var(--primary));
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  margin: 0 12px 12px 0;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
  box-shadow: 0 8px 20px rgba(15,37,69,0.18);
}

button.secondary {
  background: #eef3f8;
  color: var(--secondary);
  border: 1px solid #dbe3ee;
  box-shadow: none;
}

button.danger {
  background: #f07178;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button:hover,
.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

table button {
  margin: 0 6px 6px 0 !important;
  padding: 0.35rem 0.65rem !important;
  font-size: 0.8rem !important;
  box-shadow: none !important;
}

th,
td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #edf2f7;
}

tbody tr:nth-child(odd) td {
  background: #ffffff;
}

tbody tr:nth-child(even) td {
  background: #f7fafc;
}

tbody tr:hover td {
  background: #eef5ff;
}

th {
  color: #ffffff;
  font-weight: 600;
  background: var(--secondary);
}

.msg {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.msg.error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  font-weight: 500;
}

.msg.ok {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  font-weight: 500;
}

.login-wrap {
  max-width: 400px;
  margin: 4rem auto;
  padding: 2rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--surface2);
}

.login-wrap h1 {
  margin-top: 0;
  font-size: 1.5rem;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge.pending {
  background: rgba(240, 193, 75, 0.2);
  color: var(--warning);
}

.badge.approved {
  background: rgba(61, 214, 140, 0.2);
  color: var(--success);
}

.badge.rejected {
  background: rgba(240, 113, 120, 0.2);
  color: var(--danger);
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.user-pill {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 1.25rem 1.5rem;
  margin: -1.75rem -2rem 2rem;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.top-actions .top-school {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: #fff;
  font-weight: 700;
}

.top-actions .top-school span {
  color: var(--accent);
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(201,162,39,0.16);
  border: 1px solid rgba(201,162,39,0.35);
  color: #fff;
  white-space: nowrap;
}

.notif {
  position: relative;
  display: inline-block;
}

.notif-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--surface2);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
}

.notif-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
  display: none;
  line-height: 20px;
  text-align: center;
  font-weight: 700;
}

.notif-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 340px;
  max-width: 80vw;
  background: var(--surface);
  border: 1px solid var(--surface2);
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 420px;
  display: none;
  z-index: 50;
}

.notif-dropdown.open {
  display: block;
}

.notif-header {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--surface2);
  display: flex;
  justify-content: flex-end;
}

.notif-items {
  max-height: 360px;
  overflow: hidden;
}

.notif-item {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--surface2);
}

.notif-msg {
  font-size: 0.88rem;
  color: var(--text);
  word-break: break-word;
}

.notif-time {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.notif-empty {
  padding: 1rem 0.9rem;
  color: var(--muted);
}

.notif-markread {
  margin: 0;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
}

.logout {
  margin-top: 2rem;
  padding: 0 1.25rem;
}

@media (max-width: 990px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--surface2);
  }
}

/* Centered Theme for All Portals (Cream Card & Lavender Background) */
body.principal-portal,
body.faculty-portal,
body.student-portal,
body.parent-portal {
  background-color: #eae6f5 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
  color: #2d1b54 !important;
}

body.principal-portal .layout,
body.faculty-portal .layout,
body.student-portal .layout,
body.parent-portal .layout {
  background-color: #f8f6ff !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 50px rgba(74, 30, 128, 0.08) !important;
  display: flex !important;
  width: 100% !important;
  max-width: 1350px !important;
  min-height: 720px !important;
  height: auto !important;
  padding: 1.25rem !important;
  box-sizing: border-box !important;
  gap: 1.5rem !important;
  overflow: hidden !important;
}

body.principal-portal .sidebar,
body.faculty-portal .sidebar,
body.student-portal .sidebar,
body.parent-portal .sidebar {
  width: 250px !important;
  background: #3D1E6B !important;
  border-radius: 20px !important;
  border: none !important;
  padding: 1.5rem 0.25rem 0.5rem 0.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  position: static !important; 
  height: 680px !important;
  flex-shrink: 0 !important;
}

body.principal-portal .main,
body.faculty-portal .main,
body.student-portal .main,
body.parent-portal .main {
  padding: 0.5rem 0.5rem 0.5rem 0 !important;
  height: 680px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

/* Card overrides for all portals */
body.principal-portal .card,
body.faculty-portal .card,
body.student-portal .card,
body.parent-portal .card {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #e9e3cf !important;
  box-shadow: 0 4px 15px rgba(74, 30, 128, 0.02) !important;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(201,162,39,0.16);
  border: 1px solid rgba(201,162,39,0.35);
  color: #fff;
  white-space: nowrap;
}

.notif {
  position: relative;
  display: inline-block;
}

.notif-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--surface2);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
}

.notif-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
  display: none;
  line-height: 20px;
  text-align: center;
  font-weight: 700;
}

.notif-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 340px;
  max-width: 80vw;
  background: var(--surface);
  border: 1px solid var(--surface2);
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 420px;
  display: none;
  z-index: 50;
}

.notif-dropdown.open {
  display: block;
}

.notif-header {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--surface2);
  display: flex;
  justify-content: flex-end;
}

.notif-items {
  max-height: 360px;
  overflow: hidden;
}

.notif-item {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--surface2);
}

.notif-msg {
  font-size: 0.88rem;
  color: var(--text);
  word-break: break-word;
}

.notif-time {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.notif-empty {
  padding: 1rem 0.9rem;
  color: var(--muted);
}

.notif-markread {
  margin: 0;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
}

.logout {
  margin-top: 2rem;
  padding: 0 1.25rem;
}

@media (max-width: 990px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--surface2);
  }
}

/* Centered Theme for All Portals (Cream Card & Lavender Background) */
body.principal-portal,
body.faculty-portal,
body.student-portal,
body.parent-portal {
  background-color: #eae6f5 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
  color: #2d1b54 !important;
}

body.principal-portal .layout,
body.faculty-portal .layout,
body.student-portal .layout,
body.parent-portal .layout {
  background-color: #f8f6ff !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 50px rgba(74, 30, 128, 0.08) !important;
  display: flex !important;
  width: 100% !important;
  max-width: 1350px !important;
  min-height: 720px !important;
  height: auto !important;
  padding: 1.25rem !important;
  box-sizing: border-box !important;
  gap: 1.5rem !important;
  overflow: hidden !important;
}

body.principal-portal .sidebar,
body.faculty-portal .sidebar,
body.student-portal .sidebar,
body.parent-portal .sidebar {
  width: 250px !important;
  background: #3D1E6B !important;
  border-radius: 20px !important;
  border: none !important;
  padding: 1.5rem 0.25rem 0.5rem 0.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  position: static !important; 
  height: 680px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

body.principal-portal .main,
body.faculty-portal .main,
body.student-portal .main,
body.parent-portal .main {
  padding: 0.5rem 0.5rem 0.5rem 0 !important;
  height: 680px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

/* Card overrides for all portals */
body.principal-portal .card,
body.faculty-portal .card,
body.student-portal .card,
body.parent-portal .card {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #e9e3cf !important;
  box-shadow: 0 4px 15px rgba(74, 30, 128, 0.02) !important;
}

/* Sidebar Header Logo for portals using h1 */
body.student-portal .sidebar h1,
body.parent-portal .sidebar h1 {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 65px !important;
  height: 65px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  font-size: 2.3rem !important;
  color: #ffffff !important;
  margin: 0 auto 1.5rem auto !important;
}

body.student-portal .sidebar h1::after,
body.parent-portal .sidebar h1::after {
  display: none !important;
}

body.principal-portal .sidebar > div:first-child,
body.faculty-portal .sidebar > div:first-child,
body.student-portal .sidebar > div:first-child,
body.parent-portal .sidebar > div:first-child {
  display: flex !important;
  justify-content: center !important;
  padding: 0.5rem 0 1.5rem 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.principal-portal .sidebar > div:first-child > .sidebar-logo-sq,
body.faculty-portal .sidebar > div:first-child > .sidebar-logo-sq,
body.student-portal .sidebar > div:first-child > .sidebar-logo-sq,
body.parent-portal .sidebar > div:first-child > .sidebar-logo-sq {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 65px !important;
  height: 65px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  margin: 0 !important;
  gap: 0 !important;
}

body.principal-portal .sidebar > div:first-child i,
body.faculty-portal .sidebar > div:first-child i,
body.student-portal .sidebar > div:first-child i,
body.parent-portal .sidebar > div:first-child i {
  font-size: 2.3rem !important;
  color: #ffffff !important;
  margin: 0 !important;
}

body.principal-portal .sidebar nav,
body.faculty-portal .sidebar nav,
body.student-portal .sidebar nav,
body.parent-portal .sidebar nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  padding: 0 0.5rem !important;
  overflow: hidden !important;
}
body.principal-portal .sidebar nav a,
body.faculty-portal .sidebar nav a,
body.student-portal .sidebar nav a,
body.parent-portal .sidebar nav a {
  display: flex !important;
  align-items: center !important;
  padding: 0.55rem 0.85rem !important;
  color: #c5a9df !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border-left: none !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}



body.principal-portal .sidebar nav a:hover,
body.faculty-portal .sidebar nav a:hover,
body.student-portal .sidebar nav a:hover,
body.parent-portal .sidebar nav a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  text-decoration: none !important;
}



body.principal-portal .sidebar nav a.active,
body.faculty-portal .sidebar nav a.active,
body.student-portal .sidebar nav a.active,
body.parent-portal .sidebar nav a.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  font-weight: 600 !important;
}





body.principal-portal .sidebar .logout,
body.faculty-portal .sidebar .logout,
body.student-portal .sidebar .logout,
body.parent-portal .sidebar .logout {
  margin-top: auto !important;
  padding: 0.45rem 0.5rem 0.1rem 0.5rem !important;
  border-top: none !important;
}

body.principal-portal .sidebar .logout button,
body.faculty-portal .sidebar .logout button,
body.student-portal .sidebar .logout button,
body.parent-portal .sidebar .logout button {
  background: #e05a47 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border: none !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: background 0.2s ease !important;
  text-transform: none !important;
}

body.principal-portal .sidebar .logout button:hover,
body.faculty-portal .sidebar .logout button:hover,
body.student-portal .sidebar .logout button:hover,
body.parent-portal .sidebar .logout button:hover {
  background: #d84b38 !important;
  transform: none !important;
}



body.student-portal .main,
body.parent-portal .main {
  padding: 0.5rem 0.5rem 0.5rem 0 !important;
  height: 680px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

@media (max-width: 990px) {
  body.principal-portal,
  body.faculty-portal,
  body.student-portal,
  body.parent-portal {
    padding: 0 !important;
    display: block !important;
  }
  body.principal-portal .layout,
  body.faculty-portal .layout,
  body.student-portal .layout,
  body.parent-portal .layout {
    border-radius: 0 !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: 1rem !important;
    gap: 1rem !important;
  }
  body.principal-portal .sidebar,
  body.faculty-portal .sidebar,
  body.student-portal .sidebar,
  body.parent-portal .sidebar {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    border-radius: 16px !important;
    padding: 1rem !important;
  }
  body.principal-portal .sidebar > div:first-child,
  body.faculty-portal .sidebar > div:first-child,
  body.student-portal .sidebar > div:first-child,
  body.parent-portal .sidebar > div:first-child {
    display: none !important;
  }
  body.principal-portal .main,
  body.faculty-portal .main,
  body.student-portal .main,
  body.parent-portal .main {
    height: auto !important;
    padding: 0 !important;
  }
}

/* Scoped Content Overrides for Student and Parent Portals */

/* Welcome Banner purple background */
body.student-portal .welcome-banner,
body.parent-portal .welcome-banner,
body.student-portal .welcome-banner-custom,
body.parent-portal .welcome-banner-custom {
  background: linear-gradient(135deg, #3D1E6B, #9164f3) !important;
  overflow: hidden !important;
}

body.principal-portal .sidebar nav a,
body.faculty-portal .sidebar nav a,
body.student-portal .sidebar nav a,
body.parent-portal .sidebar nav a {
  display: flex !important;
  align-items: center !important;
  padding: 0.55rem 0.85rem !important;
  color: #c5a9df !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border-left: none !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}



body.principal-portal .sidebar nav a:hover,
body.faculty-portal .sidebar nav a:hover,
body.student-portal .sidebar nav a:hover,
body.parent-portal .sidebar nav a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  text-decoration: none !important;
}



body.principal-portal .sidebar nav a.active,
body.faculty-portal .sidebar nav a.active,
body.student-portal .sidebar nav a.active,
body.parent-portal .sidebar nav a.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  font-weight: 600 !important;
}





body.principal-portal .sidebar .logout,
body.faculty-portal .sidebar .logout,
body.student-portal .sidebar .logout,
body.parent-portal .sidebar .logout {
  margin-top: auto !important;
  padding: 0.45rem 0.5rem 0.1rem 0.5rem !important;
  border-top: none !important;
}

body.principal-portal .sidebar .logout button,
body.faculty-portal .sidebar .logout button,
body.student-portal .sidebar .logout button,
body.parent-portal .sidebar .logout button {
  background: #e05a47 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border: none !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: background 0.2s ease !important;
  text-transform: none !important;
}

body.principal-portal .sidebar .logout button:hover,
body.faculty-portal .sidebar .logout button:hover,
body.student-portal .sidebar .logout button:hover,
body.parent-portal .sidebar .logout button:hover {
  background: #d84b38 !important;
  transform: none !important;
}



body.student-portal .main,
body.parent-portal .main {
  padding: 0.5rem 0.5rem 0.5rem 0 !important;
  height: 680px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

@media (max-width: 990px) {
  body.principal-portal,
  body.faculty-portal,
  body.student-portal,
  body.parent-portal {
    padding: 0 !important;
    display: block !important;
  }
  body.principal-portal .layout,
  body.faculty-portal .layout,
  body.student-portal .layout,
  body.parent-portal .layout {
    border-radius: 0 !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: 1rem !important;
    gap: 1rem !important;
  }
  body.principal-portal .sidebar,
  body.faculty-portal .sidebar,
  body.student-portal .sidebar,
  body.parent-portal .sidebar {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    border-radius: 16px !important;
    padding: 1rem !important;
  }
  body.principal-portal .sidebar > div:first-child,
  body.faculty-portal .sidebar > div:first-child,
  body.student-portal .sidebar > div:first-child,
  body.parent-portal .sidebar > div:first-child {
    display: none !important;
  }
  body.principal-portal .main,
  body.faculty-portal .main,
  body.student-portal .main,
  body.parent-portal .main {
    height: auto !important;
    padding: 0 !important;
  }
}

/* Scoped Content Overrides for Student and Parent Portals */

/* Welcome Banner purple background */
body.student-portal .welcome-banner,
body.parent-portal .welcome-banner,
body.student-portal .welcome-banner-custom,
body.parent-portal .welcome-banner-custom {
  background: linear-gradient(135deg, #3D1E6B, #9164f3) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 25px rgba(145, 100, 243, 0.12) !important;
  border: none !important;
}

body.student-portal .welcome-banner i,
body.parent-portal .welcome-banner i {
  color: rgba(255, 255, 255, 0.2) !important;
}

/* Card overrides (18px border-radius, thin borders, hover offset) */
body.student-portal .card,
body.parent-portal .card,
body.student-portal .action-card-custom,
body.parent-portal .action-card-custom,
body.student-portal .notice-card-item,
body.parent-portal .notice-card-item {
  border-radius: 18px !important;
  border: 1px solid #f0effb !important;
  box-shadow: 0 4px 15px rgba(74, 30, 128, 0.02) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.student-portal .action-card-custom:hover,
body.parent-portal .action-card-custom:hover,
body.student-portal .notice-card-item:hover,
body.parent-portal .notice-card-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(74, 30, 128, 0.06) !important;
}

/* Header bars & top action panel gradients */
body.student-portal .card-titlebar,
body.parent-portal .card-titlebar,
body.student-portal .top-actions,
body.parent-portal .top-actions {
  background: linear-gradient(135deg, #3D1E6B, #9164f3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Header text and specific element color adjustments */
body.student-portal h2, body.student-portal h3, body.student-portal h5, body.student-portal h6,
body.parent-portal h2, body.parent-portal h3, body.parent-portal h5, body.parent-portal h6 {
  color: #2D1B54 !important;
}
body.student-portal .welcome-banner h2, body.student-portal .welcome-banner p,
body.parent-portal .welcome-banner h2, body.parent-portal .welcome-banner p,
body.student-portal .card-titlebar h3, body.student-portal .card-titlebar span,
body.parent-portal .card-titlebar h3, body.parent-portal .card-titlebar span,
body.student-portal .top-actions h2, body.student-portal .top-actions span,
body.parent-portal .top-actions h2, body.parent-portal .top-actions span {
  color: #ffffff !important; /* Keep banner/header text white */
}

/* Table border and styling */
body.student-portal table,
body.parent-portal table {
  border: 1px solid #e2e8f0 !important;
}

/* Table Header Accent */
body.student-portal table th,
body.parent-portal table th,
body.student-portal .modern-table th,
body.parent-portal .modern-table th {
  background: #9164f3 !important;
  color: #ffffff !important;
  border-bottom: 2px solid #7c52df !important;
  border-radius: 0 !important;
  width: 30% !important;
  text-align: center !important;
}
body.student-portal tbody tr:hover td,
body.parent-portal tbody tr:hover td {
  background: #f8f6ff !important; /* soft purple tint */
}

/* Buttons gradients & glows */
body.student-portal button:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.chart-tab):not(.btn-outline-pdf):not(.ams-btn-export):not(.theme-btn-outline),
body.parent-portal button:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.chart-tab):not(.btn-outline-pdf):not(.ams-btn-export):not(.theme-btn-outline),
body.student-portal .btn:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.chart-tab):not(.btn-outline-pdf):not(.ams-btn-export):not(.theme-btn-outline),
body.parent-portal .btn:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.chart-tab):not(.btn-outline-pdf):not(.ams-btn-export):not(.theme-btn-outline) {
  background: #9164f3 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(145, 100, 243, 0.15) !important;
  border: none !important;
}
body.student-portal button:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.chart-tab):not(.btn-outline-pdf):not(.ams-btn-export):not(.theme-btn-outline):hover,
body.parent-portal button:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.chart-tab):not(.btn-outline-pdf):not(.ams-btn-export):not(.theme-btn-outline):hover,
body.student-portal .btn:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.chart-tab):not(.btn-outline-pdf):not(.ams-btn-export):not(.theme-btn-outline):hover,
body.parent-portal .btn:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.chart-tab):not(.btn-outline-pdf):not(.ams-btn-export):not(.theme-btn-outline):hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.1) !important;
  box-shadow: 0 6px 16px rgba(145, 100, 243, 0.25) !important;
}
body.student-portal button.secondary,
body.parent-portal button.secondary {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  border: 1px solid #d8b4fe !important;
  box-shadow: none !important;
}
body.student-portal button.secondary:hover,
body.parent-portal button.secondary:hover {
  background: #eae0fa !important;
  color: #581c87 !important;
  filter: none !important;
}

/* Form inputs focus effect */
body.student-portal input:focus,
body.parent-portal input:focus,
body.student-portal select:focus,
body.parent-portal select:focus,
body.student-portal textarea:focus,
body.parent-portal textarea:focus {
  border-color: #9164f3 !important;
  box-shadow: 0 0 0 4px rgba(145, 100, 243, 0.15) !important;
}

/* Badges & Accents */
body.student-portal .badge.bg-primary,
body.parent-portal .badge.bg-primary {
  background-color: rgba(145, 100, 243, 0.1) !important;
  color: #9164f3 !important;
  border: 1px solid rgba(145, 100, 243, 0.2) !important;
}

/* Content Icon accent colors */
body.student-portal i,
body.parent-portal i {
  color: #9164f3 !important;
}
body.student-portal .sidebar i,
body.parent-portal .sidebar i,
body.student-portal button i,
body.parent-portal button i,
body.student-portal .btn i,
body.parent-portal .btn i,
body.student-portal th i,
body.parent-portal th i,
body.student-portal .card-titlebar i,
body.parent-portal .card-titlebar i,
body.student-portal .top-actions i,
body.parent-portal .top-actions i {
  color: inherit !important; /* Preserve default colors for functional icons */
}

/* ==========================================
   Principal & Faculty Portal Content-Specific Themes
   ========================================== */

/* Layout frame background (pale lavender-gray) */
body.principal-portal .layout,
body.faculty-portal .layout {
  background-color: #f7f6fb !important;
}

/* Card components */
body.principal-portal .card,
body.faculty-portal .card {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #f0effb !important;
  box-shadow: 0 4px 15px rgba(74, 30, 128, 0.02) !important;
}

/* Action Cards */
body.principal-portal .action-card-custom,
body.faculty-portal .action-card-custom {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #f0effb !important;
  box-shadow: 0 4px 15px rgba(74, 30, 128, 0.02) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body.principal-portal .action-card-custom:hover,
body.faculty-portal .action-card-custom:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(74, 30, 128, 0.06) !important;
}

/* Heading colors */
body.principal-portal main h2,
body.faculty-portal main h2,
body.principal-portal main h3,
body.faculty-portal main h3,
body.principal-portal main h5,
body.faculty-portal main h5 {
  color: #2D1B54 !important;
}

/* Form inputs & select fields styling */
body.principal-portal input,
body.faculty-portal input,
body.principal-portal select,
body.faculty-portal select,
body.principal-portal textarea,
body.faculty-portal textarea {
  background-color: #ffffff !important;
  border: 1px solid #dbe3ee !important;
  color: #0f1419 !important;
}

/* Default Fallback Theme Variables */
body.principal-portal,
body.faculty-portal {
  --page-theme-color: #3D1E6B;
  --page-theme-hover: #2b144e;
  --page-theme-bg-light: #f5f3ff;
  --page-gradient: linear-gradient(135deg, #3D1E6B, #9164f3);
  --page-shadow: rgba(145, 100, 243, 0.2);
}

/* 1. Attendance (Forest Green) */
body.principal-portal.page-attendance,
body.faculty-portal.page-attendance {
  --page-theme-color: #2e7d32;
  --page-theme-hover: #1b5e20;
  --page-theme-bg-light: #e8f5e9;
  --page-gradient: linear-gradient(135deg, #388e3c, #1b5e20);
  --page-shadow: rgba(46, 125, 50, 0.18);
}

/* 2. Marks (Website Theme Purple/Lavender) */
body.principal-portal.page-marks,
body.faculty-portal.page-marks {
  --page-theme-color: #9164f3;
  --page-theme-hover: #7b4be0;
  --page-theme-bg-light: #f2eeff;
  --page-gradient: linear-gradient(135deg, #9164f3, #7f4be0);
  --page-shadow: rgba(145, 100, 243, 0.2);
}

/* 3. Score Card (Gold/Bronze) */
body.principal-portal.page-scorecard,
body.faculty-portal.page-scorecard {
  --page-theme-color: #ca8a04;
  --page-theme-hover: #a16207;
  --page-theme-bg-light: #fefce8;
  --page-gradient: linear-gradient(135deg, #ca8a04, #854d0e);
  --page-shadow: rgba(202, 138, 4, 0.18);
}

/* 4. Academic Progress (Deep Scholarly Indigo) */
body.principal-portal.page-academic-progress,
body.faculty-portal.page-academic-progress {
  --page-theme-color: #4338ca;
  --page-theme-hover: #312e81;
  --page-theme-bg-light: #e0e7ff;
  --page-gradient: linear-gradient(135deg, #4f46e5, #312e81);
  --page-shadow: rgba(67, 56, 202, 0.18);
}

/* 5. Notices (Deep Plum/Purple) */
body.principal-portal.page-notices,
body.faculty-portal.page-notices {
  --page-theme-color: #6a1b9a;
  --page-theme-hover: #4a148c;
  --page-theme-bg-light: #f3e5f5;
  --page-gradient: linear-gradient(135deg, #7b1fa2, #4a148c);
  --page-shadow: rgba(106, 27, 154, 0.18);
}

/* 6. Timetable (Warm Copper/Orange) */
body.principal-portal.page-timetable,
body.faculty-portal.page-timetable {
  --page-theme-color: #d84315;
  --page-theme-hover: #bf360c;
  --page-theme-bg-light: #fbe9e7;
  --page-gradient: linear-gradient(135deg, #e64a19, #bf360c);
  --page-shadow: rgba(216, 67, 21, 0.18);
}

/* 7. Exam Schedule (Deep Ocean Blue) */
body.principal-portal.page-exam-schedule,
body.faculty-portal.page-exam-schedule {
  --page-theme-color: #0284c7;
  --page-theme-hover: #0369a1;
  --page-theme-bg-light: #f0f9ff;
  --page-gradient: linear-gradient(135deg, #0ea5e9, #0369a1);
  --page-shadow: rgba(2, 132, 199, 0.18);
}

/* 8. Study Materials (Deep Teal/Pine) */
body.principal-portal.page-materials,
body.faculty-portal.page-materials {
  --page-theme-color: #00695c;
  --page-theme-hover: #004d40;
  --page-theme-bg-light: #e0f2f1;
  --page-gradient: linear-gradient(135deg, #00796b, #004d40);
  --page-shadow: rgba(0, 105, 92, 0.18);
}

/* 9. Faculty Management (Steel Slate Blue) */
body.principal-portal.page-faculty-management,
body.faculty-portal.page-faculty-management {
  --page-theme-color: #283593;
  --page-theme-hover: #1a237e;
  --page-theme-bg-light: #e8eaf6;
  --page-gradient: linear-gradient(135deg, #303f9f, #1a237e);
  --page-shadow: rgba(40, 53, 147, 0.18);
}

/* 10. Student Registration (Deep Ocean Teal) */
body.principal-portal.page-student-registration,
body.faculty-portal.page-student-registration {
  --page-theme-color: #00838f;
  --page-theme-hover: #006064;
  --page-theme-bg-light: #e0f7fa;
  --page-gradient: linear-gradient(135deg, #0097a7, #006064);
  --page-shadow: rgba(0, 131, 143, 0.18);
}

/* 11. Chat (Emerald Forest) */
body.principal-portal.page-chat,
body.faculty-portal.page-chat {
  --page-theme-color: #00695c;
  --page-theme-hover: #004d40;
  --page-theme-bg-light: #e0f2f1;
  --page-gradient: linear-gradient(135deg, #00796b, #004d40);
  --page-shadow: rgba(0, 105, 92, 0.18);
}


/* Elements styling using variables */

/* Title Icons */
body.principal-portal main h2 i,
body.faculty-portal main h2 i,
body.principal-portal main h3 i,
body.faculty-portal main h3 i,
body.principal-portal main h5 i,
body.faculty-portal main h5 i {
  color: var(--page-theme-color) !important;
}

/* Table Headers */
body.principal-portal table th,
body.faculty-portal table th,
body.principal-portal .modern-table th,
body.faculty-portal .modern-table th {
  background: var(--page-theme-color) !important;
  color: #ffffff !important;
  border-bottom: 2px solid var(--page-theme-hover) !important;
  border-top: none !important;
  text-align: center !important;
}

body.principal-portal tbody tr:hover td,
body.faculty-portal tbody tr:hover td {
  background: var(--page-theme-bg-light) !important;
}

/* Forms Focus styles */
body.principal-portal input:focus,
body.faculty-portal input:focus,
body.principal-portal select:focus,
body.faculty-portal select:focus,
body.principal-portal textarea:focus,
body.faculty-portal textarea:focus {
  border-color: var(--page-theme-color) !important;
  box-shadow: 0 0 0 4px var(--page-shadow) !important;
}

/* Restore Form Select Arrow */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.25rem !important;
  appearance: none !important;
}

/* Primary buttons gradient */
body.principal-portal button:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-danger):not(.ams-btn-export):not(.dl-btn):not(.theme-btn-outline):not(.modal-close-btn):not(.btn-my-events),
body.faculty-portal button:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-danger):not(.ams-btn-export):not(.dl-btn):not(.theme-btn-outline):not(.modal-close-btn):not(.btn-my-events),
body.principal-portal .btn:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-danger):not(.ams-btn-export):not(.dl-btn):not(.theme-btn-outline):not(.modal-close-btn):not(.btn-my-events),
body.faculty-portal .btn:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-danger):not(.ams-btn-export):not(.dl-btn):not(.theme-btn-outline):not(.modal-close-btn):not(.btn-my-events) {
  background: var(--page-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px var(--page-shadow) !important;
  border: none !important;
}

body.principal-portal button:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.theme-btn-outline):not(.modal-close-btn):not(.btn-my-events):hover,
body.faculty-portal button:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.theme-btn-outline):not(.modal-close-btn):not(.btn-my-events):hover,
body.principal-portal .btn:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.btn-outline-secondary):not(.theme-btn-outline):not(.modal-close-btn):not(.btn-my-events):hover,
body.faculty-portal .btn:not(.btn-sm-action):not(.filter-btn):not(.secondary):not(.btn-outline-primary):not(.btn-outline-secondary):not(.theme-btn-outline):not(.modal-close-btn):not(.btn-my-events):hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.1) !important;
  box-shadow: 0 6px 16px var(--page-shadow) !important;
}

/* Secondary buttons */
body.principal-portal button.secondary,
body.faculty-portal button.secondary,
body.principal-portal .btn.secondary,
body.faculty-portal .btn.secondary {
  background: var(--page-theme-bg-light) !important;
  color: var(--page-theme-color) !important;
  border: 1px solid var(--page-theme-bg-light) !important;
  box-shadow: none !important;
}

body.principal-portal button.secondary:hover,
body.faculty-portal button.secondary:hover,
body.principal-portal .btn.secondary:hover,
body.faculty-portal .btn.secondary:hover {
  filter: brightness(0.9) !important;
}

/* Badge styles */
body.principal-portal .badge.bg-primary,
body.faculty-portal .badge.bg-primary {
  background-color: var(--page-theme-bg-light) !important;
  color: var(--page-theme-color) !important;
  border: 1px solid var(--page-shadow) !important;
}

/* Match Welcome Banner background to Sidebar background (#3D1E6B) */
body.principal-portal .welcome-banner-custom,
body.faculty-portal .welcome-banner-custom {
  background: linear-gradient(135deg, #9164f3, #c3a6fc) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(145, 100, 243, 0.2) !important;
  border: none !important;
}

/* Unify compact card header styles across principal and faculty portals */
body.principal-portal .card-header-compact,
body.faculty-portal .card-header-compact,
body.student-portal .card-header-compact,
body.parent-portal .card-header-compact {
  background: #f8fafc !important;
  color: #334155 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body.principal-portal .card-header-compact i,
body.faculty-portal .card-header-compact i,
body.student-portal .card-header-compact i,
body.parent-portal .card-header-compact i {
  color: #334155 !important; /* Matches header text */
}

/* Reset icon colors inside compact card header buttons to inherit the button's text color */
body.principal-portal .card-header-compact button i,
body.faculty-portal .card-header-compact button i,
body.principal-portal .card-header-compact .btn i,
body.faculty-portal .card-header-compact .btn i {
  color: inherit !important;
}

/* Force Dashboard Theme on all Principal & Faculty Portal Pages */
body.principal-portal,
body.faculty-portal {
  --page-theme-color: #9164f3 !important;
  --page-theme-hover: #7b4be0 !important;
  --page-theme-bg-light: #f2eeff !important;
  --page-gradient: linear-gradient(135deg, #9164f3, #7f4be0) !important;
  --page-shadow: rgba(145, 100, 243, 0.2) !important;
  --primary: #9164f3 !important;
  --secondary: #7f4be0 !important;
}

/* Custom theme-based outline buttons */
body.principal-portal .theme-btn-outline,
body.faculty-portal .theme-btn-outline {
  background: transparent !important;
  color: var(--page-theme-color) !important;
  border: 1px solid var(--page-theme-color) !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}
body.principal-portal .theme-btn-outline:hover,
body.faculty-portal .theme-btn-outline:hover {
  background: var(--page-theme-color) !important;
  color: #ffffff !important;
  border-color: var(--page-theme-color) !important;
  box-shadow: 0 4px 12px var(--page-shadow) !important;
}
body.principal-portal .theme-btn-outline i,
body.faculty-portal .theme-btn-outline i {
  color: inherit !important;
}

/* Force outline buttons to ONLY have text and border of the same color, no background */
body.principal-portal .btn-outline-primary,
body.faculty-portal .btn-outline-primary {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: none !important;
}
body.principal-portal .btn-outline-primary:hover,
body.faculty-portal .btn-outline-primary:hover {
  background: var(--page-theme-color) !important;
  color: #ffffff !important;
}

body.principal-portal .btn-outline-danger,
body.faculty-portal .btn-outline-danger {
  background: transparent !important;
  color: #dc3545 !important;
  border: 1px solid #dc3545 !important;
  box-shadow: none !important;
}
body.principal-portal .btn-outline-danger:hover,
body.faculty-portal .btn-outline-danger:hover {
  background: #dc3545 !important;
  color: #ffffff !important;
}

/* Force export and download buttons to match the Edit ghost button theme but with specific colors */
body.principal-portal .ams-btn-export,
body.faculty-portal .ams-btn-export,
body.principal-portal .dl-btn,
body.faculty-portal .dl-btn {
  background: transparent !important;
  box-shadow: none !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Excel Button: Green */
body.principal-portal .ams-btn-excel,
body.faculty-portal .ams-btn-excel {
  color: #16A34A !important;
  border: 1px solid #16A34A !important;
}
body.principal-portal .ams-btn-excel i,
body.faculty-portal .ams-btn-excel i {
  color: #16A34A !important;
}
body.principal-portal .ams-btn-excel:hover,
body.faculty-portal .ams-btn-excel:hover {
  background: rgba(22, 163, 74, 0.08) !important;
}

/* PDF Button: Red */
body.principal-portal .ams-btn-pdf,
body.faculty-portal .ams-btn-pdf,
body.principal-portal .dl-btn-pdf,
body.faculty-portal .dl-btn-pdf {
  color: #DC2626 !important;
  border: 1px solid #DC2626 !important;
}
body.principal-portal .ams-btn-pdf i,
body.faculty-portal .ams-btn-pdf i,
body.principal-portal .dl-btn-pdf i,
body.faculty-portal .dl-btn-pdf i {
  color: #DC2626 !important;
}
body.principal-portal .ams-btn-pdf:hover,
body.faculty-portal .ams-btn-pdf:hover,
body.principal-portal .dl-btn-pdf:hover,
body.faculty-portal .dl-btn-pdf:hover {
  background: rgba(220, 38, 38, 0.08) !important;
}

/* CSV Button: Blue */
body.principal-portal .ams-btn-csv,
body.faculty-portal .ams-btn-csv {
  color: #2563EB !important;
  border: 1px solid #2563EB !important;
}
body.principal-portal .ams-btn-csv i,
body.faculty-portal .ams-btn-csv i {
  color: #2563EB !important;
}
body.principal-portal .ams-btn-csv:hover,
body.faculty-portal .ams-btn-csv:hover {
  background: rgba(37, 99, 235, 0.08) !important;
}

/* Student Portal Export Buttons */
body.student-portal .ams-btn-export {
  background: transparent !important;
  box-shadow: none !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
body.student-portal .ams-btn-excel { color: #16A34A !important; border: 1px solid #16A34A !important; }
body.student-portal .ams-btn-excel i { color: #16A34A !important; }
body.student-portal .ams-btn-excel:hover { background: rgba(22, 163, 74, 0.08) !important; }

/* Secondary buttons */
body.principal-portal button.secondary,
body.faculty-portal button.secondary,
body.principal-portal .btn.secondary,
body.faculty-portal .btn.secondary {
  background: var(--page-theme-bg-light) !important;
  color: var(--page-theme-color) !important;
  border: 1px solid var(--page-theme-bg-light) !important;
  box-shadow: none !important;
}

body.principal-portal button.secondary:hover,
body.faculty-portal button.secondary:hover,
body.principal-portal .btn.secondary:hover,
body.faculty-portal .btn.secondary:hover {
  filter: brightness(0.9) !important;
}

/* Badge styles */
body.principal-portal .badge.bg-primary,
body.faculty-portal .badge.bg-primary {
  background-color: var(--page-theme-bg-light) !important;
  color: var(--page-theme-color) !important;
  border: 1px solid var(--page-shadow) !important;
}

/* Match Welcome Banner background to Sidebar background (#3D1E6B) */
body.principal-portal .welcome-banner-custom,
body.faculty-portal .welcome-banner-custom {
  background: linear-gradient(135deg, #9164f3, #c3a6fc) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(145, 100, 243, 0.2) !important;
  border: none !important;
}

/* Unify compact card header styles across principal and faculty portals */
body.principal-portal .card-header-compact,
body.faculty-portal .card-header-compact,
body.student-portal .card-header-compact,
body.parent-portal .card-header-compact {
  background: #f8fafc !important;
  color: #334155 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body.principal-portal .card-header-compact i,
body.faculty-portal .card-header-compact i,
body.student-portal .card-header-compact i,
body.parent-portal .card-header-compact i {
  color: #334155 !important; /* Matches header text */
}

/* Reset icon colors inside compact card header buttons to inherit the button's text color */
body.principal-portal .card-header-compact button i,
body.faculty-portal .card-header-compact button i,
body.principal-portal .card-header-compact .btn i,
body.faculty-portal .card-header-compact .btn i {
  color: inherit !important;
}

/* Force Dashboard Theme on all Principal & Faculty Portal Pages */
body.principal-portal,
body.faculty-portal {
  --page-theme-color: #9164f3 !important;
  --page-theme-hover: #7b4be0 !important;
  --page-theme-bg-light: #f2eeff !important;
  --page-gradient: linear-gradient(135deg, #9164f3, #7f4be0) !important;
  --page-shadow: rgba(145, 100, 243, 0.2) !important;
  --primary: #9164f3 !important;
  --secondary: #7f4be0 !important;
}

/* Custom theme-based outline buttons */
body.principal-portal .theme-btn-outline,
body.faculty-portal .theme-btn-outline {
  background: transparent !important;
  color: var(--page-theme-color) !important;
  border: 1px solid var(--page-theme-color) !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}
body.principal-portal .theme-btn-outline:hover,
body.faculty-portal .theme-btn-outline:hover {
  background: var(--page-theme-color) !important;
  color: #ffffff !important;
  border-color: var(--page-theme-color) !important;
  box-shadow: 0 4px 12px var(--page-shadow) !important;
}
body.principal-portal .theme-btn-outline i,
body.faculty-portal .theme-btn-outline i {
  color: inherit !important;
}

/* Force outline buttons to ONLY have text and border of the same color, no background */
body.principal-portal .btn-outline-primary,
body.faculty-portal .btn-outline-primary {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: none !important;
}
body.principal-portal .btn-outline-primary:hover,
body.faculty-portal .btn-outline-primary:hover {
  background: var(--page-theme-color) !important;
  color: #ffffff !important;
}

body.principal-portal .btn-outline-danger,
body.faculty-portal .btn-outline-danger {
  background: transparent !important;
  color: #dc3545 !important;
  border: 1px solid #dc3545 !important;
  box-shadow: none !important;
}
body.principal-portal .btn-outline-danger:hover,
body.faculty-portal .btn-outline-danger:hover {
  background: #dc3545 !important;
  color: #ffffff !important;
}

/* Force export and download buttons to match the Edit ghost button theme but with specific colors */
body.principal-portal .ams-btn-export,
body.faculty-portal .ams-btn-export,
body.principal-portal .dl-btn,
body.faculty-portal .dl-btn {
  background: transparent !important;
  box-shadow: none !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Excel Button: Green */
body.principal-portal .ams-btn-excel,
body.faculty-portal .ams-btn-excel {
  color: #16A34A !important;
  border: 1px solid #16A34A !important;
}
body.principal-portal .ams-btn-excel i,
body.faculty-portal .ams-btn-excel i {
  color: #16A34A !important;
}
body.principal-portal .ams-btn-excel:hover,
body.faculty-portal .ams-btn-excel:hover {
  background: rgba(22, 163, 74, 0.08) !important;
}

/* PDF Button: Red */
body.principal-portal .ams-btn-pdf,
body.faculty-portal .ams-btn-pdf,
body.principal-portal .dl-btn-pdf,
body.faculty-portal .dl-btn-pdf {
  color: #DC2626 !important;
  border: 1px solid #DC2626 !important;
}
body.principal-portal .ams-btn-pdf i,
body.faculty-portal .ams-btn-pdf i,
body.principal-portal .dl-btn-pdf i,
body.faculty-portal .dl-btn-pdf i {
  color: #DC2626 !important;
}
body.principal-portal .ams-btn-pdf:hover,
body.faculty-portal .ams-btn-pdf:hover,
body.principal-portal .dl-btn-pdf:hover,
body.faculty-portal .dl-btn-pdf:hover {
  background: rgba(220, 38, 38, 0.08) !important;
}

/* CSV Button: Blue */
body.principal-portal .ams-btn-csv,
body.faculty-portal .ams-btn-csv {
  color: #2563EB !important;
  border: 1px solid #2563EB !important;
}
body.principal-portal .ams-btn-csv i,
body.faculty-portal .ams-btn-csv i {
  color: #2563EB !important;
}
body.principal-portal .ams-btn-csv:hover,
body.faculty-portal .ams-btn-csv:hover {
  background: rgba(37, 99, 235, 0.08) !important;
}

/* Student and Parent Portal Export Buttons */
body.student-portal .ams-btn-export,
body.parent-portal .ams-btn-export {
  background: transparent !important;
  box-shadow: none !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
body.student-portal .ams-btn-excel, body.parent-portal .ams-btn-excel { color: #16A34A !important; border: 1px solid #16A34A !important; }
body.student-portal .ams-btn-excel i, body.parent-portal .ams-btn-excel i { color: #16A34A !important; }
body.student-portal .ams-btn-excel:hover, body.parent-portal .ams-btn-excel:hover { background: rgba(22, 163, 74, 0.08) !important; }

body.student-portal .ams-btn-pdf, body.parent-portal .ams-btn-pdf { color: #DC2626 !important; border: 1px solid #DC2626 !important; }
body.student-portal .ams-btn-pdf i, body.parent-portal .ams-btn-pdf i { color: #DC2626 !important; }
body.student-portal .ams-btn-pdf:hover, body.parent-portal .ams-btn-pdf:hover { background: rgba(220, 38, 38, 0.08) !important; }

body.student-portal .ams-btn-csv, body.parent-portal .ams-btn-csv { color: #2563EB !important; border: 1px solid #2563EB !important; }
body.student-portal .ams-btn-csv i, body.parent-portal .ams-btn-csv i { color: #2563EB !important; }
body.student-portal .ams-btn-csv:hover, body.parent-portal .ams-btn-csv:hover { background: rgba(37, 99, 235, 0.08) !important; }

/* Stat Badge with Glow Effect */
.stat-badge {
  border: 1px solid var(--badge-color);
  color: var(--badge-color);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
  cursor: default;
  display: inline-block;
}
.stat-badge:hover {
  box-shadow: 0 0 8px var(--badge-color);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Dashboard Slide-in Sidebar */
.dashboard-slide-sidebar {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 2000;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  height: 100vh;
  box-shadow: 4px 0 15px rgba(0,0,0,0.5);
}
.dashboard-slide-sidebar.open {
  transform: translateX(0) !important;
}
.dashboard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 1999;
  display: none;
}
.dashboard-overlay.open {
  display: block;
}

/* Force Add Faculty button to match export buttons exactly, bypassing HTML cache */
body.faculty-portal #openAddFacBtn {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  height: 34px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 14px 2px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.faculty-portal #exportBtnsHost {
  margin: 0 !important;
  align-items: center !important;
  gap: 8px !important;
}




body.parent-portal .sidebar-logo-container h4 { color: #ffffff !important; font-weight: 700 !important; margin: 0 !important; font-size: 1.4rem !important; letter-spacing: 0.5px !important; line-height: 1 !important; }

/* Custom Attendance Toggle Colors */
.form-check-input.attendance-toggle:checked {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}
.form-check-input.attendance-toggle:not(:checked) {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Late Checkbox Sizing and Tick */
.form-check-input.late-checkbox {
  width: 14px !important;
  height: 14px !important;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}
.form-check-input.late-checkbox:checked {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
  background-size: 85% !important;
  background-position: center !important;
}