/* ================================================================
   MCK — NEW DESIGN SYSTEM (v3)
   Moved away from the old blue/violet scheme to a fresh deep-teal +
   coral identity, applied everywhere via CSS variables and Bootstrap's
   own CSS-variable theming — one file re-themes all three web portals
   plus the new Super Admin panel since they all share this stylesheet.
   ================================================================ */
:root {
  --primary: #0d7c74;         /* deep teal — new brand color */
  --primary-dark: #084d47;
  --primary-light: #14b8a6;
  --accent-red: #e2483d;      /* coral-red — danger/alerts */
  --accent-warm: #ff8a3d;     /* coral-orange — CTAs / highlights */
  --cream: #fff4e0;
  --bg-soft: #f3f7f6;

  /* Vibrant accent palette used across module cards, badges, and highlights */
  --hue-violet: #8b5cf6;
  --hue-pink: #ec4899;
  --hue-teal: #0d9488;
  --hue-orange: #f59e0b;
  --hue-cyan: #06b6d4;
  --hue-lime: #65a30d;
  --hue-rose: #e11d48;
  --hue-indigo: #6366f1;

  /* Super Admin tier — distinct charcoal + gold identity so it always
     reads as a higher, separate privilege level at a glance. */
  --sa-bg: #0f1720;
  --sa-panel: #182430;
  --sa-gold: #f2b632;
  --sa-gold-dark: #c98d15;

  /* Bootstrap variable overrides so default .btn-primary / .alert-primary /
     .text-primary etc. pick up the new brand color everywhere automatically. */
  --bs-primary: #0d7c74;
  --bs-primary-rgb: 13, 124, 116;
  --bs-link-color: #0d7c74;
  --bs-link-hover-color: #084d47;
}

.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-bg: var(--primary);
}
a { color: var(--primary); }
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }

@keyframes bgShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(4deg); }
}

* { box-sizing: border-box; }

body {
  background: var(--bg-soft);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------------- LOGIN PAGE (v3 — split screen) ---------------- */
.login-body {
  min-height: 100vh;
  background: linear-gradient(120deg, #0d7c74, #14b8a6, #ff8a3d, #084d47);
  background-size: 300% 300%;
  animation: bgShift 16s ease infinite;
  position: relative;
  /* IMPORTANT: overflow-x only. This used to be a blanket `overflow:hidden`
     on <body> itself (just to clip the decorative blurred orbs), but that
     also disables page scrolling entirely — on any screen where the form
     content is taller than the viewport (register forms, short/landscape
     screens, a mobile keyboard shrinking the viewport) the rest of the
     content — including the Submit button — became completely unreachable,
     with no scrollbar and no way to get to it. */
  overflow-x: hidden;
  overflow-y: auto;
}

.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  animation: floatSlow 8s ease-in-out infinite;
  pointer-events: none;
}
.orb1 { width: 340px; height: 340px; background: #f2b632; top: -80px; left: -80px; }
.orb2 { width: 280px; height: 280px; background: #e2483d; bottom: -60px; right: -60px; animation-delay: 2s; }
.orb3 { width: 220px; height: 220px; background: #06b6d4; top: 40%; left: 60%; animation-delay: 1s; opacity: .3; }
.orb4 { width: 180px; height: 180px; background: #a3e635; bottom: 20%; left: 5%; animation-delay: 3.5s; opacity: .25; }

.login-card {
  width: 380px; border: none; border-radius: 22px; z-index: 2;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Split-screen layout: branding panel on the left, form on the right.
   Falls back to a single stacked card (login-card) on narrow screens. */
.login-split-wrap {
  min-height: 100vh; display: flex; position: relative; z-index: 2;
}
.login-split-brand {
  flex: 1 1 46%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: #fff; padding: 40px; text-align: center;
}
.login-split-brand .brand-title { font-size: 30px; font-weight: 800; margin-top: 22px; }
.login-split-brand .brand-sub { font-size: 14px; opacity: .85; max-width: 340px; margin-top: 8px; }
.login-split-brand .brand-points { margin-top: 28px; text-align: left; }
.login-split-brand .brand-points div { font-size: 13.5px; opacity: .92; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.login-split-form {
  flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-split-card {
  width: 400px; max-width: 92vw; border: none; border-radius: 24px;
  background: rgba(255,255,255,.98); backdrop-filter: blur(12px);
  box-shadow: 0 24px 70px rgba(0,0,0,.3); padding: 38px 34px;
}
@media (max-width: 900px) {
  .login-split-wrap { flex-direction: column; }
  .login-split-brand { padding: 30px 20px 10px; }
  .login-split-brand .brand-points { display: none; }
  .login-split-form { padding: 10px 20px 30px; }
}

.role-pill-group { display: flex; gap: 8px; margin-bottom: 20px; }
.role-pill {
  flex: 1; text-align: center; padding: 10px 6px; border-radius: 12px;
  border: 2px solid #e6ecec; cursor: pointer; font-size: 13px; font-weight: 600;
  color: #4b5563; transition: all .15s ease; user-select: none;
}
.role-pill i { display: block; font-size: 17px; margin-bottom: 3px; }
.role-pill.active { border-color: var(--primary); background: rgba(13,124,116,.08); color: var(--primary); }
.role-pill:hover { border-color: var(--primary-light); }

.fade-up-in { animation: fadeUpIn 0.6s ease both; }
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-field-in { animation: fieldIn 0.5s ease both; }
@keyframes fieldIn {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

.login-logo-img {
  width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent-red);
  box-shadow: 0 6px 22px rgba(0,0,0,.3);
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(0,0,0,.3); }
  50% { box-shadow: 0 6px 30px rgba(124,58,237,.5); }
}

.login-logo {
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--hue-violet));
  color: var(--cream);
  align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; margin: 0 auto;
  border: 3px solid var(--accent-red);
}
.small-logo { width: 42px; height: 42px; font-size: 12px; margin: 0; border-radius: 50%; overflow: hidden; display: flex; align-items:center; justify-content:center; background: var(--cream); }
.small-logo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- SIDEBAR ---------------- */
.sidebar {
  width: 258px; min-height: 100vh;
  background: linear-gradient(180deg, var(--primary-dark), var(--primary));
  color: #fff; position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
  /* Without these two, a page with wide content in .content/main (a data
     table, a two-column form, etc.) can force the flex container wider than
     the viewport, and the sidebar — being a flex item with no explicit
     shrink/basis — gets squeezed narrower to compensate. flex-shrink: 0
     keeps it locked at 258px regardless of what's happening in the content
     pane next to it. */
  flex-shrink: 0;
  flex-basis: 258px;
}
/* The content pane next to the sidebar needs min-width: 0 — flex items
   default to min-width: auto, which means they refuse to shrink below their
   content's natural minimum width (e.g. a wide table). That's what was
   actually pushing on the sidebar. min-width: 0 lets the content pane
   scroll/wrap internally instead, which is what .table-responsive and
   similar are already designed to do. */
.d-flex > main,
.d-flex > .content {
  min-width: 0;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,.15);
  color: #fff;
}
.nav-section {
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.5); padding: 14px 18px 4px;
}
.sidebar .nav-link {
  color: rgba(255,255,255,.85);
  padding: 10px 18px; font-size: 13.5px; border-left: 3px solid transparent;
  display: flex; align-items: center; gap: 8px;
  transition: background .15s ease, border-color .15s ease;
}
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link.active {
  background: rgba(255,255,255,.15);
  border-left: 3px solid #ffcc00;
  color: #fff; font-weight: 600;
}

.badge-pulse {
  background: var(--accent-red);
  color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 20px; padding: 1px 7px; margin-left: auto;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(214,26,26,.6); }
  70% { box-shadow: 0 0 0 6px rgba(214,26,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(214,26,26,0); }
}

.content { flex: 1; min-height: 100vh; }

/* ---------------- STAT CARDS ---------------- */
.stat-card {
  border: none; border-radius: 16px; color: #fff; padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.stat-card .stat-value { font-size: 27px; font-weight: 700; }
.stat-card .stat-label { font-size: 13px; opacity: .9; }
.bg-blue { background: linear-gradient(135deg,#0d7c74,#14b8a6); }
.bg-red { background: linear-gradient(135deg,#c9362c,#e2483d); }
.bg-green { background: linear-gradient(135deg,#0f9d58,#34d399); }
.bg-orange { background: linear-gradient(135deg,#e8720c,#ff8a3d); }
.bg-purple { background: linear-gradient(135deg,#6d28d9,#a78bfa); }
.bg-violet { background: linear-gradient(135deg,#7c3aed,#c4b5fd); }
.bg-teal { background: linear-gradient(135deg,#0d9488,#5eead4); }
.bg-pink { background: linear-gradient(135deg,#db2777,#f9a8d4); }
.bg-cyan { background: linear-gradient(135deg,#0891b2,#67e8f9); }
.bg-indigo { background: linear-gradient(135deg,#4338ca,#a5b4fc); }
.bg-rose { background: linear-gradient(135deg,#be123c,#fda4af); }
.bg-lime { background: linear-gradient(135deg,#4d7c0f,#bef264); }

.stat-card { animation: fadeUpIn 0.5s ease both; }

/* ---------------- CARDS / TABLES ---------------- */
.card {
  border: none; border-radius: 16px; box-shadow: 0 3px 14px rgba(0,0,0,.06);
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.table thead { background: #eef1fb; }
.table-hover tbody tr { transition: background .12s ease; }

.badge-paid { background: #0f9d58; }
.badge-partial { background: #e8850c; }
.badge-pending { background: #d61a1a; }
.badge-approved { background: #0f9d58; }
.badge-rejected { background: #d61a1a; }

/* ---------------- BUTTONS ---------------- */
.btn-animated {
  position: relative; overflow: hidden; transition: transform .15s ease;
}
.btn-animated:active { transform: scale(0.97); }
.btn { border-radius: 9px; }

/* ---------------- CHIP / TAG STYLE ---------------- */
.priority-urgent { background: #d61a1a; color: #fff; }
.priority-important { background: #e8850c; color: #fff; }
.priority-normal { background: #6b7280; color: #fff; }
.chip {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
}

/* ---------------- MISC ---------------- */
.hover-lift { transition: transform .18s ease, box-shadow .18s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.1); }

.timeline-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--primary);
  display: inline-block; margin-right: 8px;
}

/* ================================================================
   RESPONSIVE / MOBILE NAVIGATION
   Shared by admin_panel, faculty_portal, student_portal (all three
   link to this same stylesheet), so this one block covers every
   dashboard in the system.
   ================================================================ */

.mobile-topbar {
  display: none;
  position: sticky; top: 0; z-index: 1050;
  background: var(--primary-dark);
  color: #fff;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
}
.mobile-topbar .hamburger-btn {
  background: transparent; border: none; color: #fff; font-size: 24px;
  padding: 2px 6px; line-height: 1;
}
.mobile-topbar-title { font-weight: 600; font-size: 15px; }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1040;
}
.sidebar-overlay.show { display: block; }

@media (max-width: 991.98px) {
  .mobile-topbar { display: flex; }

  .sidebar {
    position: fixed; top: 0; left: -280px; height: 100vh;
    z-index: 1045; width: 260px;
    transition: left .25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.2);
  }
  .sidebar.open { left: 0; }

  .content { padding: 16px !important; }

  .stat-card { padding: 16px; }
  .stat-card .stat-value { font-size: 22px; }
  .stat-card .stat-label { font-size: 12px; }

  /* Toolbar rows (filters, button groups) stack cleanly on mobile */
  .d-flex.justify-content-between.flex-wrap { row-gap: 10px; }
}

@media (max-width: 767.98px) {
  h4 { font-size: 20px; }
  .card { border-radius: 12px; }
  .card.p-4 { padding: 1.1rem !important; }
  .card.p-3 { padding: 0.9rem !important; }

  /* Tables scroll horizontally instead of squeezing/breaking layout */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table { font-size: 13px; }
  .table th, .table td { white-space: nowrap; padding: 8px 10px; }
  .table td[style*="max-width"] { white-space: normal; }

  .btn-group { flex-wrap: wrap; }
  .btn-group .btn { flex: 1 1 auto; }
}

@media (max-width: 575.98px) {
  .login-card { width: 92vw !important; max-width: 380px; }
  .card[style*="width:460px"],
  .card[style*="width:480px"] { width: 92vw !important; }

  .row.g-3 > [class*="col-"] { margin-bottom: 4px; }
  .stat-card .stat-value { font-size: 20px; }

  /* Modal dialogs stay comfortably inset on small phones */
  .modal-dialog { margin: 10px; }
}

/* Utility: hide element on mobile only (used sparingly) */
@media (max-width: 991.98px) {
  .d-none-mobile { display: none !important; }
}

/* ================================================================
   CALENDAR
   ================================================================ */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-weekday {
  text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted, #757575);
  padding-bottom: 6px; text-transform: uppercase;
}
.calendar-cell {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  border-radius: 10px;
  font-size: 13px;
  color: #212121;
  text-decoration: none;
  background: #f4f6fb;
  transition: transform .12s ease, background .12s ease;
}
.calendar-cell:hover { background: #e4e9fb; transform: scale(1.05); color: #212121; }
.calendar-cell-empty { background: transparent; }
.calendar-cell-today { border: 2px solid var(--primary); font-weight: 700; }
.calendar-cell-selected { background: var(--primary); color: #fff; font-weight: 700; }
.calendar-cell-selected:hover { color: #fff; }
.calendar-dot {
  position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-red);
}
.calendar-cell-selected .calendar-dot { background: #f2b632; }

/* ================================================================
   SUPER ADMIN — distinct charcoal + gold theme (v3)
   Reuses the same .sidebar / .stat-card / .card structure as the rest
   of the app, but overridden with its own palette so it always reads
   as a separate, higher-privilege tier at a glance.
   ================================================================ */
.sa-body { background: #eef2f1; }

.sa-sidebar {
  background: linear-gradient(180deg, var(--sa-bg), var(--sa-panel)) !important;
  border-right: 1px solid rgba(242,182,50,.15);
}
.sa-sidebar .nav-link.active {
  background: rgba(242,182,50,.15) !important;
  border-left: 3px solid var(--sa-gold) !important;
}
.sa-sidebar .nav-link:hover { background: rgba(242,182,50,.08) !important; }
.sa-brand { border-bottom: 1px solid rgba(242,182,50,.18) !important; }
.sa-logo-ring { border: 2px solid var(--sa-gold); }
.sa-topbar { background: var(--sa-bg) !important; }

.sa-badge {
  background: linear-gradient(135deg, var(--sa-gold-dark), var(--sa-gold));
  color: #1a1200; font-weight: 700; padding: 6px 14px; border-radius: 20px; font-size: 12.5px;
}
.sa-btn {
  background: linear-gradient(135deg, var(--sa-gold-dark), var(--sa-gold));
  color: #1a1200 !important; border: none; font-weight: 700; border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sa-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(242,182,50,.35); color: #1a1200; }
.sa-btn-outline {
  border: 2px solid var(--sa-gold-dark); color: var(--sa-gold-dark) !important; font-weight: 700; border-radius: 10px; background: transparent;
}
.sa-btn-outline:hover { background: var(--sa-gold); color: #1a1200 !important; }

/* Super Admin standalone login screen */
.sa-login-body {
  min-height: 100vh; background: radial-gradient(circle at 30% 20%, #1c2b38, var(--sa-bg) 60%);
  position: relative; overflow-x: hidden; overflow-y: auto; display: flex;
  align-items: center; align-items: safe center; /* keeps the card scrollable-into-view instead of clipped at the top on short viewports */
  justify-content: center;
  padding: 24px 0;
}
.sa-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .28; animation: floatSlow 9s ease-in-out infinite; pointer-events: none; }
.sa-orb-1 { width: 300px; height: 300px; background: var(--sa-gold); top: -60px; left: -60px; }
.sa-orb-2 { width: 260px; height: 260px; background: #0d7c74; bottom: -50px; right: -40px; animation-delay: 2s; }
.sa-orb-3 { width: 200px; height: 200px; background: #e2483d; bottom: 30%; left: 55%; opacity: .18; animation-delay: 1.2s; }

.sa-login-wrap { position: relative; z-index: 2; padding: 20px; }
.sa-login-card {
  width: 400px; max-width: 92vw; border-radius: 22px; padding: 40px 32px;
  background: rgba(24,36,48,.92); border: 1px solid rgba(242,182,50,.25);
  box-shadow: 0 24px 70px rgba(0,0,0,.5); backdrop-filter: blur(10px);
  animation: fadeUpIn .6s ease both;
}
.sa-login-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--sa-gold-dark), var(--sa-gold));
  display: flex; align-items: center; justify-content: center; font-size: 28px; color: #1a1200;
  box-shadow: 0 0 0 6px rgba(242,182,50,.12);
}
.sa-login-sub { color: rgba(255,255,255,.6); font-size: 13px; }
.sa-label { color: rgba(255,255,255,.75); font-size: 12.5px; }
.sa-input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.15) !important; color: #fff !important; }
.sa-input::placeholder { color: rgba(255,255,255,.4); }
.sa-input-icon { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: var(--sa-gold); }
.sa-back-link { color: rgba(255,255,255,.55); font-size: 12.5px; text-decoration: none; }
.sa-back-link:hover { color: var(--sa-gold); }

.super-admin-link {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  color: rgba(255,255,255,.55); text-decoration: none; letter-spacing: .3px;
}
.super-admin-link:hover { color: #fff; }

.super-admin-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  color: var(--sa-gold-dark); background: rgba(242,182,50,.12); border: 1px solid rgba(242,182,50,.4);
  padding: 6px 12px; border-radius: 20px; text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: background .15s ease;
}
.super-admin-pill:hover { background: rgba(242,182,50,.25); color: var(--sa-gold-dark); }

/* ================================================================
   PROFILE DROPDOWN (top-right, every page) + APP FOOTER
   Used by admin_panel / faculty_portal / student_portal.
   ================================================================ */
.profile-dropdown-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #e3ece9; border-radius: 30px;
  padding: 5px 16px 5px 5px; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease;
}
.profile-dropdown-btn:hover, .profile-dropdown-btn:focus {
  border-color: var(--primary); box-shadow: 0 4px 14px rgba(13,124,116,.15);
}
.profile-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.profile-dropdown-btn .profile-name { font-size: 13.5px; font-weight: 600; color: #223; }
.profile-dropdown-btn .bi-chevron-down { font-size: 11px; color: var(--text-muted); margin-left: 2px; }
.profile-dropdown-menu { min-width: 220px; border-radius: 12px; border: 1px solid #e3ece9; box-shadow: 0 12px 34px rgba(0,0,0,.12); padding: 8px; }
.profile-dropdown-menu .dropdown-item { border-radius: 8px; padding: 9px 12px; font-size: 13.5px; }
.profile-dropdown-menu .dropdown-item:hover { background: var(--bg-soft); }
.profile-dropdown-menu .dropdown-item.text-danger:hover { background: #fdecea; }
.profile-dropdown-menu .dropdown-header { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); padding: 6px 12px 2px; }

.app-footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 16px 26px; background: #fff; border-top: 1px solid #e3ece9;
  font-size: 12.5px; color: var(--text-muted);
}
.app-footer a {
  color: var(--primary); font-weight: 700; text-decoration: none;
}
.app-footer a:hover { text-decoration: underline; }


/* ================================================================
   LAYERING FIXES  (added in the v3 upgrade)
   ----------------------------------------------------------------
   Second root cause of the "modal-backdrop fade show blocks clicks"
   report, independent of the JavaScript fix in assets/js/main.js.

   Bootstrap 5 uses this z-index ladder:
       .modal-backdrop  1050
       .modal           1055

   .mobile-topbar was sitting at exactly 1050. When two positioned
   elements share a z-index, the one later in the DOM wins — and the
   backdrop is appended to the end of <body>, so it always painted
   OVER the topbar. On a phone that meant the header bar visibly
   greyed out and the hamburger button stopped responding.

   .sidebar was at 1045, below the backdrop entirely, so an open
   mobile sidebar was covered by any modal's backdrop as well.

   Both are moved above the modal layer. Chrome's rule is that
   position:sticky/fixed elements are compared inside the same
   stacking context, which these are (both are children of <body>),
   so raising the values is sufficient and safe.
   ================================================================ */

.mobile-topbar   { z-index: 1070; }
.sidebar-overlay { z-index: 1065; }

@media (max-width: 991.98px) {
  .sidebar { z-index: 1066; }
}

/* A modal is only guaranteed to escape its parent's stacking context
   when it is a direct child of <body>. main.js moves every modal
   there on load; this rule makes the intent explicit and keeps any
   modal that has not been moved yet visually on top rather than
   trapped behind its own backdrop. */
body > .modal { z-index: 1080; }
body > .modal-backdrop { z-index: 1075; }

/* Bootstrap sets `overflow: hidden` on <body> while a modal is open.
   If a teardown is ever missed the page looks frozen even after the
   backdrop is gone, so the scroll lock is tied to the class that
   Bootstrap adds and main.js removes. */
body:not(.modal-open) { overflow: visible !important; }

/* Dropdowns inside a .card were being clipped by the card's rounded
   overflow, which made the profile menu look broken on short pages. */
.card { overflow: visible; }
.table-responsive { overflow-x: auto; }

/* Long tables on phones: keep the action column reachable. */
@media (max-width: 575.98px) {
  .table-responsive table { min-width: 620px; }
}

/* ================================================================
   PROFILE DROPDOWN — belt-and-braces z-index
   ----------------------------------------------------------------
   main.js now moves the open dropdown-menu to <body> (see the "profile
   dropdown hides behind main content" fix in its comments), which is
   the real fix — it escapes the transformed header entirely rather
   than trying to out-rank it with a bigger number. This rule is a
   second, independent line of defence: if JavaScript hasn't run yet,
   or fails to for any reason, the menu still outranks ordinary page
   content instead of silently losing to it.
   ================================================================ */
.dropdown-menu { z-index: 1057; }


/* ================================================================
   SIDEBAR — BOX/CARD DESIGN (v4)
   ----------------------------------------------------------------
   Previously a flat list of text links (a thin colored strip on
   .active, otherwise plain text). Redesigned into spaced, rounded
   card tiles — same visual language as the Android app's module grid
   — so the two feel like the same product rather than a web app and
   a separate mobile app. Pure CSS: the underlying <li class="nav-item">
   / <a class="nav-link"> markup is untouched, so nothing about how the
   sidebar is built or which PHP variable drives the active state
   changed — only how it's painted.
   ================================================================ */
.sidebar .nav {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar .nav-item { list-style: none; }
.sidebar .nav-link {
  border-left: none;               /* replaces the old thin active strip */
  border-radius: 12px;
  padding: 11px 14px;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: background .18s ease, transform .15s ease, box-shadow .18s ease, color .15s ease;
}
/* The Bootstrap icon each link already carries gets its own small
   rounded "chip" background, matching the icon treatment on Android's
   module tiles, rather than sitting bare against the sidebar. */
.sidebar .nav-link i {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  font-size: 15px;
  flex-shrink: 0;
  transition: background .18s ease, transform .18s ease;
}
.sidebar .nav-link:hover {
  background: rgba(255,255,255,.10);
  transform: translateX(3px);
}
.sidebar .nav-link:hover i { background: rgba(255,255,255,.16); }
.sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.12);
}
.sidebar .nav-link.active i {
  background: var(--accent-warm);
  color: #fff;
}
/* A thin glowing accent bar on the active tile — echoes the old
   left-border but as a soft rounded accent rather than a hard line,
   consistent with the card-ified rest of the tile. */
.sidebar .nav-link.active::before {
  content: '';
  position: absolute; left: 0; top: 10%; bottom: 10%; width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--accent-warm);
}
.sa-sidebar .nav-link.active i { background: var(--sa-gold); color: var(--sa-bg); }
.sa-sidebar .nav-link.active::before { background: var(--sa-gold); }

/* ================================================================
   GLOBAL MOTION + DEPTH (v4)
   ----------------------------------------------------------------
   A handful of small, consistent interaction cues used across every
   card, button and stat tile so the whole app feels like one
   considered design rather than default Bootstrap styling with a
   color swap. Kept subtle and fast (150-220ms) — this is a college
   ERP people use all day, not a marketing site; snappy beats flashy.
   ================================================================ */
.card, .stat-card, .border.rounded {
  transition: box-shadow .2s ease, transform .18s ease;
}
.hover-lift:hover, a.stat-card:hover .stat-card, .card.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.btn {
  transition: transform .12s ease, box-shadow .18s ease, filter .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary:hover, .btn.sa-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 16px rgba(13,124,116,.28);
}
.btn-animated:hover { transform: translateY(-1px); }

/* Table rows get a gentle highlight sweep rather than an instant
   flat background swap, and cells don't visually jump on hover. */
.table-hover tbody tr { transition: background-color .15s ease; }

/* Every alert now settles in rather than popping, matching the
   staggered fade-up already used for cards via data-aos. */
.alert {
  animation: mck-alert-in .3s ease both;
}
@keyframes mck-alert-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   INSTANT SEARCH DROPDOWN
   ----------------------------------------------------------------
   Results appear directly under the header search box as the person
   types — no Enter key, no page navigation. See assets/js/main.js
   for the debounced fetch that populates this.
   ================================================================ */
.mck-search-wrap { position: relative; }
.mck-search-results {
  position: fixed; /* top/left/width are set by main.js against the input */
  background: #fff; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  max-height: 420px; overflow-y: auto;
  z-index: 1090; /* above the modal layer (1080) is unnecessary here since a
                    search dropdown and a modal are never open together, but
                    staying above ordinary page content (which is all this
                    needs) is guaranteed at this value regardless */
  display: none;
  padding: 6px;
  animation: mck-alert-in .15s ease both;
}
.mck-search-results.open { display: block; }
.mck-search-results .mck-search-category {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--primary); font-weight: 700;
  padding: 10px 10px 4px;
}
.mck-search-results a.mck-search-row {
  display: block; padding: 8px 10px; border-radius: 8px;
  color: #212121; text-decoration: none;
  transition: background .12s ease;
}
.mck-search-results a.mck-search-row:hover { background: var(--bg-soft); }
.mck-search-results .mck-search-title { font-size: 13.5px; font-weight: 600; }
.mck-search-results .mck-search-subtitle { font-size: 11.5px; color: #6b7674; }
.mck-search-empty, .mck-search-hint {
  padding: 18px 12px; text-align: center; color: #6b7674; font-size: 13px;
}
.mck-search-loading {
  padding: 16px; text-align: center;
}

/* ================================================================
   IMAGE GALLERY LIGHTBOX
   ----------------------------------------------------------------
   Opens an uploaded document/image full-screen in place, instead of
   a new tab or a forced download — see main.js's installLightbox().
   Triggered by any element carrying data-lightbox="<image-url>".
   ================================================================ */
.mck-lightbox-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(10, 14, 13, .92);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  animation: mck-alert-in .18s ease both;
}
.mck-lightbox-overlay.show { display: flex; }
.mck-lightbox-overlay img {
  max-width: min(92vw, 1100px); max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  animation: mck-lightbox-zoom .2s ease both;
}
@keyframes mck-lightbox-zoom {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.mck-lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  border: none; font-size: 22px; line-height: 1;
  cursor: pointer; transition: background .15s ease;
}
.mck-lightbox-close:hover { background: rgba(255,255,255,.22); }
.mck-lightbox-caption {
  position: absolute; bottom: 22px; left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,.85); font-size: 13.5px;
}
.mck-lightbox-download {
  position: absolute; top: 18px; right: 74px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  border: none; font-size: 17px; line-height: 1;
  cursor: pointer; transition: background .15s ease;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.mck-lightbox-download:hover { background: rgba(255,255,255,.22); color: #fff; }

/* Anything meant to open the lightbox gets a subtle "clickable image"
   affordance rather than looking like static content. */
[data-lightbox] { cursor: zoom-in; transition: opacity .15s ease, transform .15s ease; }
[data-lightbox]:hover { opacity: .92; transform: scale(1.015); }

/* Belt and braces: the page-title/search/profile header row is its own
   stacking context (data-aos transform); make it outrank the content
   below it so nothing in it can ever be painted over by a later card. */
main.content > div[data-aos="fade-down"] { position: relative; z-index: 1060; }