/* ==========================================================================
   School Management System - Modern Professional Stylesheet
   ========================================================================== */

:root {
  /* Color Palette */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;

  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;

  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;
  --rose-700: #be123c;

  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-600: #0284c7;

  --danger-50: #fff1f2;
  --danger-100: #fee2e2;
  --danger-200: #fecdd3;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-800: #991b1b;
  --danger-900: #7f1d1d;

  --success-50: #ecfdf5;
  --success-100: #d1fae5;
  --success-200: #a7f3d0;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;

  /* Typography & Sizing */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--slate-100);
  color: var(--slate-800);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Layout Elements */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* Sidebar Styles */
.sidebar {
  width: 270px;
  background: linear-gradient(180deg, var(--slate-900) 0%, #172033 100%);
  color: var(--slate-200);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--slate-800);
}

.sidebar-header {
  padding: 1.5rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.school-logo {
  width: 40px;
  height: 40px;
  background: var(--primary-600);
  color: white;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
}

.school-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.school-subtitle {
  font-size: 0.72rem;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-nav {
  padding: 1.25rem 0.75rem;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-400);
  padding: 0.75rem 0.75rem 0.25rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--slate-300);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  transform: translateX(3px);
}

.nav-item.active {
  background: var(--primary-600);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.nav-icon {
  font-size: 1.1rem;
  width: 22px;
  text-align: center;
}

.sidebar-footer {
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-700);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role-tag {
  font-size: 0.7rem;
  color: var(--primary-100);
  background: rgba(99, 102, 241, 0.25);
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
}

/* Main Content Area */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: #f8fafc;
}

.top-bar {
  background: #ffffff;
  height: 64px;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--slate-900);
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.term-badge {
  background: var(--sky-50);
  color: var(--sky-600);
  border: 1px solid var(--sky-100);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-xl);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.content-body {
  padding: 2rem;
  flex: 1;
}

/* Flash Messages */
.messages-container {
  margin-bottom: 1.5rem;
}

.alert {
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alert-success {
  background-color: var(--emerald-50);
  color: var(--emerald-700);
  border: 1px solid var(--emerald-100);
}

.alert-error,
.alert-danger {
  background-color: var(--rose-50);
  color: var(--rose-700);
  border: 1px solid var(--rose-100);
}

.alert-warning {
  background-color: var(--amber-50);
  color: var(--amber-700);
  border: 1px solid var(--amber-100);
}

.alert-info {
  background-color: var(--sky-50);
  color: var(--sky-600);
  border: 1px solid var(--sky-100);
}

/* Card & Grid Layouts */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: #ffffff;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.stat-icon.primary {
  background: var(--primary-50);
  color: var(--primary-600);
}

.stat-icon.success {
  background: var(--emerald-50);
  color: var(--emerald-600);
}

.stat-icon.warning {
  background: var(--amber-50);
  color: var(--amber-600);
}

.stat-icon.danger {
  background: var(--rose-50);
  color: var(--rose-600);
}

.stat-icon.sky {
  background: var(--sky-50);
  color: var(--sky-600);
}

.stat-details {
  flex: 1;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.1;
}

.stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
}

/* Card Component */
.card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
  overflow: hidden;
}

.card-header {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--slate-900);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-body {
  padding: 1.75rem;
}

/* Tables */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.table th {
  background: var(--slate-50);
  color: var(--slate-600);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--slate-200);
}

.table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--slate-100);
  font-size: 0.88rem;
  color: var(--slate-700);
  vertical-align: middle;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background-color: var(--slate-50);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-xl);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-xs {
  font-size: 0.7rem !important;
  padding: 1px 6px !important;
}

.badge-success {
  background: var(--emerald-100);
  color: var(--emerald-700);
}

.badge-warning {
  background: var(--amber-100);
  color: var(--amber-700);
}

.badge-danger {
  background: var(--rose-100);
  color: var(--rose-700);
}

.badge-primary {
  background: var(--primary-100);
  color: var(--primary-700);
}

.badge-secondary {
  background: var(--slate-200);
  color: var(--slate-700);
}

/* Buttons & Inputs */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.btn-primary {
  background: var(--primary-600);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--primary-700);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

.btn-secondary {
  background: #ffffff;
  color: var(--slate-700);
  border-color: var(--slate-300);
}

.btn-secondary:hover {
  background: var(--slate-50);
  border-color: var(--slate-400);
}

.btn-success {
  background: var(--emerald-600);
  color: #ffffff;
}

.btn-success:hover {
  background: var(--emerald-700);
}

.btn-danger {
  background: var(--rose-600);
  color: #ffffff;
}

.btn-danger:hover {
  background: var(--rose-700);
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

/* Forms */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 0.4rem;
}

.form-control {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-300);
  background-color: #ffffff;
  font-family: inherit;
  font-size: 1rem; /* 16px prevents iOS / Android auto-zoom */
  color: var(--slate-800);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

/* Touch Targets and Large Card Checkboxes */
.touch-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  min-height: 48px;
}

.touch-checkbox-label:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
}

.touch-checkbox-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  accent-color: var(--primary-600);
  cursor: pointer;
}

/* ==========================================================================
   SEARCHABLE STUDENT PICKER COMPONENT
   ========================================================================== */

.student-picker-wrapper {
  position: relative;
  width: 100%;
}

.student-search-input-box {
  position: relative;
  width: 100%;
}

.student-search-input-box input {
  padding-left: 2.5rem;
  padding-right: 2rem;
  font-size: 0.98rem;
  min-height: 48px;
}

.student-search-input-box .picker-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-400);
  font-size: 1.1rem;
  pointer-events: none;
}

.student-search-input-box .picker-spinner {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  font-size: 0.85rem;
  color: var(--primary-600);
}

.student-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--primary-300);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1050;
  display: none;
}

.student-dropdown-menu.show {
  display: block;
}

.student-dropdown-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--slate-100);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: background 0.15s ease;
  min-height: 52px;
}

.student-dropdown-item:last-child {
  border-bottom: none;
}

.student-dropdown-item:hover,
.student-dropdown-item.active-highlight {
  background: var(--primary-50);
}

.student-dropdown-empty {
  padding: 1.25rem;
  text-align: center;
  color: var(--slate-500);
  font-size: 0.88rem;
}

.student-item-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 6px;
  background: var(--primary-700);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.88rem;
}

/* Selected Student Preview Card */
.student-selected-card {
  display: none;
  background: linear-gradient(135deg, var(--primary-50) 0%, #f0fdf4 100%);
  border: 2px solid var(--primary-500);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 54px;
  box-shadow: var(--shadow-sm);
}

.student-selected-card.show {
  display: flex;
}

.student-selected-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.student-selected-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: var(--radius-sm);
  background: var(--primary-600);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}

.student-selected-info {
  flex: 1;
  min-width: 0;
}

.student-selected-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--slate-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-selected-sub {
  font-size: 0.78rem;
  color: var(--slate-600);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.student-change-btn {
  background: #ffffff;
  border: 1px solid var(--slate-300);
  color: var(--slate-700);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.student-change-btn:hover {
  background: var(--rose-50);
  border-color: var(--rose-300);
  color: var(--rose-700);
}

/* Search bar banner */
.action-banner {
  background: #ffffff;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.search-input-wrap {
  position: relative;
  min-width: 240px;
  flex: 1;
}

.search-input-wrap input {
  padding-left: 2.25rem;
}

.search-input-wrap .search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-400);
}

/* Quick Role Switcher for Demo */
.role-switcher-banner {
  background: linear-gradient(90deg, #312e81 0%, #1e1b4b 100%);
  color: white;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.role-pill {
  color: #cbd5e1;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 500;
  display: inline-block;
  margin: 2px;
  transition: all 0.15s ease;
  min-height: 30px;
  line-height: 22px;
}

.role-pill:hover {
  background: var(--primary-500);
  color: white;
}

/* Mobile Top Header (Hidden on Desktop) */
.mobile-top-header {
  display: none;
  background: linear-gradient(135deg, var(--slate-900) 0%, #1e293b 100%);
  color: white;
  padding: 0.65rem 1rem;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-md);
}

.mobile-menu-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mobile-menu-btn:active {
  background: rgba(255, 255, 255, 0.3);
}

.mobile-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
}

.mobile-brand-title {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

/* Off-canvas Backdrop */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1050;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sidebar-close-btn {
  display: none;
}

/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 990;
  justify-content: space-around;
  align-items: center;
  padding: 0 0.4rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--slate-300);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.4rem;
  border-radius: var(--radius-sm);
  flex: 1;
  max-width: 80px;
  gap: 0.15rem;
  transition: color 0.15s ease;
}

.mobile-bottom-item.active {
  color: var(--primary-300);
}

.mobile-bottom-item .bottom-icon {
  font-size: 1.25rem;
}

.mobile-bottom-item.primary-action {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  color: white;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.45);
  transform: translateY(-4px);
  padding: 0.45rem 0.55rem;
}

/* ==========================================================================
   Student Profile Layout & Mobile Responsiveness
   ========================================================================== */
.student-profile-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.student-profile-sidebar {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.student-profile-main {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-sizing: border-box;
}

.student-profile-main .card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.student-bio-header {
  background: linear-gradient(135deg, var(--primary-800) 0%, var(--slate-900) 100%);
  color: white;
  padding: 1.75rem 1.25rem;
  text-align: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.student-bio-avatar {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  margin: 0 auto 0.85rem;
  border: 3.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 2px 4px rgba(255, 255, 255, 0.25);
  user-select: none;
}

.student-bio-avatar span {
  display: inline-block;
  transform: translateY(-0.5px);
}

.student-bio-name {
  font-size: 1.25rem;
  font-weight: 700;
  word-break: break-word;
  overflow-wrap: break-word;
  margin-bottom: 0.25rem;
}

.student-bio-adm {
  color: var(--primary-100);
  font-size: 0.85rem;
  word-break: break-all;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES (MOBILE FIRST)
   ========================================================================== */

@media (max-width: 960px) {
  .student-profile-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 860px) {
  .mobile-top-header {
    display: flex;
  }

  .mobile-bottom-nav {
    display: flex;
  }

  .app-container {
    flex-direction: column;
  }

  /* Off-canvas Sidebar Drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 290px;
    max-width: 85vw;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-xl);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
    opacity: 1;
  }

  .sidebar-header {
    justify-content: space-between;
    padding: 1.25rem 1rem;
  }

  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
  }

  /* Top Bar Adjustments */
  .top-bar {
    height: auto;
    padding: 0.85rem 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    position: static;
  }

  .top-bar-left .page-title {
    font-size: 1.15rem;
  }

  .top-bar-right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .top-bar-right > div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .top-bar-right .btn {
    flex: 1;
    min-width: 130px;
    justify-content: center;
  }

  /* Content Padding (Accounts for fixed mobile bottom nav) */
  .content-body {
    padding: 1rem 0.75rem 5.5rem;
    overflow-x: hidden;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .page-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .header-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .header-actions .btn {
    flex: 1;
    min-width: 130px;
    justify-content: center;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .kpi-card {
    padding: 1rem;
  }

  .kpi-value {
    font-size: 1.35rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .form-control, input, select, textarea {
    min-height: 48px;
    font-size: 1rem;
    padding: 0.75rem 0.85rem;
  }

  .btn {
    min-height: 46px;
    padding: 0.65rem 1.15rem;
    font-size: 0.95rem;
  }

  .btn-sm {
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
  }

  /* Form actions stack on mobile */
  form div[style*="justify-content: flex-end"] {
    flex-direction: column-reverse;
    gap: 0.75rem !important;
    width: 100%;
  }

  form div[style*="justify-content: flex-end"] .btn {
    width: 100%;
    justify-content: center;
  }

  /* Responsive Form Cards & Mobile Grids */
  .responsive-form-card {
    padding: 1.25rem 0.85rem !important;
  }

  .form-row-2col,
  .form-row-3col,
  .form-row-halves {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    margin-bottom: 0.85rem !important;
  }

  .student-form-row {
    grid-template-columns: 1fr 44px !important;
    gap: 0.65rem !important;
    padding: 0.85rem !important;
  }

  .student-form-row .student-picker-cell {
    grid-column: 1 / -1 !important;
  }

  .student-form-row .student-role-cell {
    grid-column: 1 / 2 !important;
  }

  .student-form-row .student-remove-cell {
    grid-column: 2 / 3 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  .student-remove-btn {
    width: 38px;
    height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--rose-100) !important;
    color: var(--rose-700) !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 1.1rem !important;
    cursor: pointer;
  }

  .form-footer-actions {
    flex-direction: column-reverse !important;
    gap: 0.75rem !important;
  }

  .form-footer-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    font-size: 1rem !important;
  }

  /* Touch-friendly table scrolling */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  .table th, .table td {
    padding: 0.75rem 0.65rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .card-body {
    padding: 1rem;
  }

  .card-header {
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .search-input-wrap {
    min-width: 100%;
  }

  .page-heading {
    font-size: 1.3rem;
  }

  .header-actions {
    flex-direction: column;
  }

  .header-actions .btn {
    width: 100%;
    min-width: 100%;
  }

  .callout-card {
    padding: 0.85rem 1rem;
    gap: 0.5rem;
  }
}

/* ==========================================================================
   ENTERPRISE STANDARDIZED COMPONENTS & REUSABLE UTILITIES
   ========================================================================== */

/* Page Header & Toolbar System */
.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.breadcrumb-nav {
  font-size: 0.85rem;
  color: var(--slate-500);
  margin-bottom: 0.25rem;
}

.breadcrumb-nav a {
  color: var(--primary-600);
  text-decoration: none;
}

.breadcrumb-nav a:hover {
  text-decoration: underline;
}

.page-heading {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--slate-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-subtitle {
  font-size: 0.85rem;
  color: var(--slate-500);
  margin: 0.25rem 0 0 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Mobile-First Form Grids & Layouts */
.responsive-form-card {
  padding: 2rem;
}

.form-row-2col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.form-row-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.form-row-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.student-form-row {
  display: grid;
  grid-template-columns: 2fr 1.35fr 40px;
  gap: 0.75rem;
  align-items: center;
  background: var(--slate-50);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--slate-200);
  position: relative;
}

.student-form-row .student-picker-cell {
  position: relative;
}

.student-form-row .student-role-cell select {
  width: 100%;
}

.student-form-row .student-remove-cell {
  text-align: center;
}

.student-remove-btn {
  background: none;
  border: none;
  color: var(--slate-400);
  font-size: 1.1rem;
  cursor: pointer;
}

.student-remove-btn:hover {
  color: var(--rose-600);
}

.form-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--slate-200);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

/* Callouts & Policy Cards */
.callout-card {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.callout-success {
  background: var(--emerald-50);
  border-color: var(--emerald-200);
  color: var(--emerald-900);
}

.callout-warning {
  background: var(--amber-50);
  border-color: var(--amber-200);
  color: var(--amber-900);
}

.callout-danger {
  background: var(--rose-50);
  border-color: var(--rose-200);
  color: var(--rose-900);
}

.callout-info {
  background: var(--sky-50);
  border-color: var(--sky-200);
  color: var(--sky-900);
}

.callout-purple {
  background: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary-900);
}

.callout-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 0.2rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.callout-body {
  font-size: 0.78rem;
  margin: 0;
  line-height: 1.4;
  opacity: 0.92;
}

/* Dark Hero Banner */
.hero-banner {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  color: white;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-md);
}

.hero-banner h4 {
  color: #e0e7ff;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}

.hero-banner p {
  color: #c7d2fe;
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.4;
}

/* Responsive KPI Metric Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.kpi-card {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.kpi-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--slate-900);
  line-height: 1.1;
}

.kpi-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

/* Action Clusters & Compact Buttons */
.action-cluster {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.btn-xs {
  font-size: 0.72rem;
  padding: 0.22rem 0.48rem;
  line-height: 1.3;
  border-radius: var(--radius-sm);
}

/* Specialized Badges & Chips */
.badge-sso {
  background: var(--sky-100);
  color: var(--sky-700);
  font-size: 0.68rem;
  font-weight: 700;
}

.badge-password-only {
  background: var(--amber-100);
  color: var(--amber-800);
  border: 1px solid var(--amber-200);
  font-size: 0.68rem;
  font-weight: 700;
}

.badge-current-device {
  background: var(--emerald-100);
  color: var(--emerald-700);
  font-size: 0.68rem;
  font-weight: 700;
}

/* Discipline Severity Badges */
.badge-severity-minor {
  background: var(--amber-100);
  color: var(--amber-800);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-severity-moderate {
  background: #fed7aa;
  color: #9a3412;
  font-size: 0.75rem;
  font-weight: 700;
}

.badge-severity-major {
  background: var(--rose-100);
  color: var(--rose-700);
  font-size: 0.75rem;
  font-weight: 800;
}

.badge-severity-critical {
  background: #f3e8ff;
  color: #6b21a8;
  font-size: 0.75rem;
  font-weight: 800;
}

.code-chip {
  font-size: 0.8rem;
  background: var(--slate-100);
  color: var(--slate-700);
  padding: 0.18rem 0.4rem;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Avatar Sizing Utility */
.user-avatar-xs {
  width: 26px;
  height: 26px;
  font-size: 0.72rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100);
  color: var(--primary-700);
  font-weight: 700;
}

.user-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100);
  color: var(--primary-700);
  font-weight: 700;
}

.user-avatar-md {
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slate-100);
  color: var(--slate-700);
  flex-shrink: 0;
}

/* Device Sessions Card Layout */
.device-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--slate-100);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.device-session-row.current-device {
  background: var(--slate-50);
}

.device-meta-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--slate-500);
  margin-top: 0.15rem;
}

/* ==========================================================================
   ENTERPRISE CSS UTILITY TOOLKIT & SHORTHANDS
   ========================================================================== */

/* Typography & Sizing */
.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.85rem !important; }
.text-base { font-size: 0.95rem !important; }
.text-lg { font-size: 1.15rem !important; }
.text-xl { font-size: 1.35rem !important; }
.text-2xl { font-size: 1.6rem !important; }

/* Font Weights */
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }

/* Text Colors */
.text-muted { color: var(--slate-500) !important; }
.text-muted-light { color: var(--slate-400) !important; }
.text-slate-700 { color: var(--slate-700) !important; }
.text-slate-800 { color: var(--slate-800) !important; }
.text-slate-900 { color: var(--slate-900) !important; }
.text-white { color: #ffffff !important; }
.text-primary { color: var(--primary-600) !important; }
.text-success { color: var(--emerald-600) !important; }
.text-danger { color: var(--rose-600) !important; }
.text-warning { color: var(--amber-600) !important; }
.text-info { color: var(--sky-600) !important; }

/* Text Alignments & Formatting */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flexbox Layout Helpers */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }
.position-relative { position: relative !important; }
.flex-col, .flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-1 { flex: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

/* Flexbox Alignment */
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }
.justify-between, .justify-content-between { justify-content: space-between !important; }
.justify-center, .justify-content-center { justify-content: center !important; }
.justify-start, .justify-content-start { justify-content: flex-start !important; }
.justify-end, .justify-content-end { justify-content: flex-end !important; }
.justify-around, .justify-content-around { justify-content: space-around !important; }

/* Flexbox Gaps */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }

/* Margins */
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.5rem !important; }
.mb-6 { margin-bottom: 2rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.5rem !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Paddings */
.p-0 { padding: 0 !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

/* Width & Heights */
.w-full, .w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.w-100-px { width: 100px !important; }
.w-130-px { width: 130px !important; }
.h-full { height: 100% !important; }
.min-w-180 { min-width: 180px !important; }
.min-w-200 { min-width: 200px !important; }
.min-w-240 { min-width: 240px !important; }
.max-w-md { max-width: 28rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-5xl { max-width: 64rem !important; }

/* Borders & Rounded */
.border-0 { border: none !important; }
.border-slate-100 { border-color: var(--slate-100) !important; }
.border-slate-200 { border-color: var(--slate-200) !important; }
.border-slate-300 { border-color: var(--slate-300) !important; }
.border-bottom-slate-100 { border-bottom: 1px solid var(--slate-100) !important; }
.border-bottom-slate-200 { border-bottom: 1px solid var(--slate-200) !important; }
.border-top-slate-200 { border-top: 1px solid var(--slate-200) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: 9999px !important; }

/* Backgrounds */
.bg-white { background-color: #ffffff !important; }
.bg-slate-50 { background-color: var(--slate-50) !important; }
.bg-slate-100 { background-color: var(--slate-100) !important; }
.bg-slate-900 { background-color: var(--slate-900) !important; }

/* Component Helpers */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--slate-100);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.card-inner-box {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.empty-state-box {
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--slate-50);
  border: 2px dashed var(--slate-200);
  border-radius: var(--radius-lg);
  color: var(--slate-500);
}

.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.table-action-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

/* Role Matrix Selection Grid */
.role-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.65rem;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
}

.role-matrix-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.role-matrix-item:hover {
  border-color: var(--primary-400);
  box-shadow: var(--shadow-sm);
}

/* Audit Logs & Forensics */
.audit-kpi-border-primary { border-left: 4px solid var(--primary-600) !important; }
.audit-kpi-border-success { border-left: 4px solid #10b981 !important; }
.audit-kpi-border-warning { border-left: 4px solid #f59e0b !important; }
.audit-kpi-border-purple { border-left: 4px solid #6366f1 !important; }

.audit-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.audit-modal-dialog {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--slate-200);
}

.diff-cell-old {
  padding: 0.5rem 0.75rem;
  background: #fff1f2;
  color: #be123c;
  font-family: monospace;
}

.diff-cell-new {
  padding: 0.5rem 0.75rem;
  background: #f0fdf4;
  color: #15803d;
  font-family: monospace;
  font-weight: 700;
}

/* Dark Banners & Header Containers */
.banner-dark {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg, 12px);
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.banner-dark-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.banner-dark-subtitle {
  font-size: 0.84rem;
  color: #94a3b8;
}

.banner-badge-glass {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 0.9rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
}

.category-tabs-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--slate-200);
}

.btn-pill {
  border-radius: 9999px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.max-w-1200 { max-width: 1200px !important; }
.max-w-1000 { max-width: 1000px !important; }
.max-w-800 { max-width: 800px !important; }
.max-w-600 { max-width: 600px !important; }
.max-w-400 { max-width: 400px !important; }
.align-middle { vertical-align: middle !important; }
.w-170 { width: 170px !important; }
.w-160 { width: 160px !important; }
.w-190 { width: 190px !important; }
.w-240 { width: 240px !important; }
.w-280 { width: 280px !important; }
.w-140 { width: 140px !important; }
.bg-advisory { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; }
.underline { text-decoration: underline !important; }
.row-suspended { background-color: var(--rose-50) !important; }
.btn-impersonate { background: #e0e7ff !important; color: #3730a3 !important; border: 1px solid #c7d2fe !important; font-weight: 700 !important; }
.badge-multi-campus { font-size: 0.68rem; font-weight: 600; color: #0284c7; background: #e0f2fe; padding: 0.1rem 0.35rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.2rem; }
.user-search-input { width: 260px !important; padding: 0.4rem 0.75rem !important; font-size: 0.85rem !important; }
.text-2xs { font-size: 0.65rem !important; }
.role-badge { font-size: 0.76rem !important; font-weight: 700 !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; }
.border-success { border-color: var(--emerald-500) !important; }
.max-w-1080 { max-width: 1080px !important; }
.max-w-900 { max-width: 900px !important; }
.min-w-260 { min-width: 260px !important; }
.overflow-hidden { overflow: hidden !important; }
.avatar-current-device { background: var(--sky-100) !important; color: var(--sky-700) !important; }
.avatar-mobile-phone { background: var(--rose-100) !important; color: var(--rose-700) !important; }

/* Permission Matrix */
.permission-matrix-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  background: var(--slate-50);
}

.permission-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.65rem;
}

.permission-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 48px;
  transition: border-color 0.15s ease;
}

.permission-check-item:hover {
  border-color: var(--primary-400);
}

.permission-check-item input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

/* School Switcher & Command Palette Modal */
.school-switcher-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}

.school-switcher-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.school-switcher-name {
  font-weight: 700;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-switcher-static {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #fff;
}

.badge-glass-code {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  font-size: 0.68rem !important;
  padding: 2px 5px !important;
  font-family: monospace !important;
  font-weight: 700 !important;
}

.kbd-shortcut {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
}

.school-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  z-index: 99999;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5vh;
}

.school-modal-content {
  background: #ffffff;
  width: 100%;
  max-width: 620px;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--slate-200);
  overflow: hidden;
  animation: modalFadeIn 0.15s ease-out;
  margin: 0 1rem;
}

.school-modal-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--slate-200);
  gap: 0.75rem;
  background: var(--slate-50);
}

.school-search-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--slate-800) !important;
  outline: none !important;
  width: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
}

.school-modal-close-btn {
  border: none;
  background: #e2e8f0;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate-600);
  font-weight: 700;
  font-size: 0.85rem;
}

.school-modal-body {
  max-height: 440px;
  overflow-y: auto;
  padding: 0.75rem;
}

.school-section-heading {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.6rem;
  display: flex;
}

.school-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--slate-800);
  border: 1px solid transparent;
  transition: all 0.15s;
}

.school-item-link:hover {
  background: #f1f5f9 !important;
  border-color: var(--slate-300) !important;
}

.school-item-active {
  border-color: var(--primary-300) !important;
  background: #eff6ff !important;
}

.school-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.badge-code {
  font-family: monospace !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

.school-modal-footer {
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
  padding: 0.75rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.82rem;
}

.staff-campus-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #ffffff;
  min-width: 260px;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--slate-200);
  z-index: 9999;
  overflow: hidden;
}

.staff-campus-header {
  padding: 0.6rem 0.85rem;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.staff-campus-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--slate-800);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s;
}

.staff-campus-item:hover {
  background: var(--slate-100);
}

.staff-campus-item-active {
  background: #eef2ff !important;
  color: #4338ca !important;
  font-weight: 700 !important;
}

.relative { position: relative !important; }
.d-inline-block { display: inline-block !important; }
.p-1 { padding: 0.25rem !important; }

/* Impersonation Banner */
.impersonation-mode-banner {
  background: linear-gradient(90deg, #9a3412 0%, #c2410c 100%);
  color: #fff;
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.35);
  position: sticky;
  top: 0;
  z-index: 9999;
  font-size: 0.88rem;
}

.btn-impersonate-exit {
  background: #ffffff !important;
  color: #9a3412 !important;
  font-weight: 800 !important;
  border: none !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.logo-mobile {
  width: 32px !important;
  height: 32px !important;
  font-size: 1rem !important;
  border-radius: 6px !important;
}

.sidebar-footer-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sidebar-device-btn {
  width: 100% !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  background: var(--slate-100) !important;
  color: var(--slate-700) !important;
  font-weight: 600 !important;
}

.sidebar-signout-btn {
  width: 100% !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
}

.btn-clean {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}

/* Schools Directory & Portfolios */
.schools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 480px) {
  .schools-grid {
    grid-template-columns: 1fr;
  }
}

.school-portfolio-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  border: 1px solid var(--slate-200);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.school-card-active {
  border: 2px solid var(--primary-500) !important;
  background: #fbfdff !important;
}

.school-motto {
  font-style: italic;
  color: var(--slate-600);
  font-size: 0.85rem;
  margin: 0 0 1rem 0;
  border-left: 2px solid var(--primary-300);
  padding-left: 0.5rem;
}

.school-contacts {
  font-size: 0.82rem;
  color: var(--slate-600);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1.25rem;
}

.school-stats-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background: var(--slate-50);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--slate-200);
  margin-bottom: 1.25rem;
}

.school-card-footer {
  background: var(--slate-100);
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--slate-200);
  border-radius: 0 0 12px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pagination-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--slate-200);
}

.grid-col-all {
  grid-column: 1 / -1 !important;
}
.max-h-350 { max-height: 350px !important; }
.overflow-y-auto { overflow-y: auto !important; }
.cursor-pointer { cursor: pointer !important; }
.pb-2 { padding-bottom: 0.5rem !important; }

.form-grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

@media (max-width: 480px) {
  .form-grid-fit {
    grid-template-columns: 1fr;
  }
}
.w-110 { width: 110px !important; }
.w-120 { width: 120px !important; }
.w-140 { width: 140px !important; }
.w-150 { width: 150px !important; }
.w-100-px { width: 100px !important; }
.w-80-px { width: 80px !important; }
.w-60-px { width: 60px !important; }
.italic { font-style: italic !important; }
.nowrap { white-space: nowrap !important; }
.min-w-300 { min-width: 300px !important; }
.bg-black-15 { background-color: rgba(0, 0, 0, 0.15) !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.ml-1 { margin-left: 0.25rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
.max-w-xs { max-width: 20rem !important; }
.my-6 { margin-top: 2rem !important; margin-bottom: 2rem !important; }

/* Login & Authentication Portal */
.login-container {
  max-width: 520px;
  margin: 2rem auto;
}

.login-card {
  border-radius: 20px !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden;
  border: 1px solid var(--slate-200) !important;
}

.login-header {
  background: linear-gradient(135deg, var(--slate-900) 0%, var(--primary-900) 100%);
  padding: 2.5rem 2rem;
  text-align: center;
  color: white;
}

.login-header-icon {
  font-size: 2.75rem;
  margin-bottom: 0.5rem;
}

.login-header-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.login-header-subtitle {
  color: var(--primary-100);
  font-size: 0.88rem;
  margin-top: 0.25rem;
}

.btn-google-oauth {
  width: 100%;
  padding: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  background: white;
  color: var(--slate-800);
  border: 1px solid var(--slate-300);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
  text-decoration: none;
}

.btn-google-oauth:hover {
  background: var(--slate-50);
  border-color: var(--slate-400);
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
}

.auth-divider hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--slate-200);
}

.auth-divider span {
  padding: 0 0.75rem;
  color: var(--slate-400);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.login-footer-notice {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-200);
  text-align: center;
  font-size: 0.78rem;
  color: var(--slate-500);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.quick-personas-box {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--slate-200);
}

.quick-personas-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  text-align: center;
}

.persona-btn-superadmin {
  width: 100%;
  font-size: 0.82rem;
  font-weight: 800;
  background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
  color: white;
  border: none;
  padding: 0.55rem;
  box-shadow: var(--shadow-sm);
  border-radius: 6px;
}

.persona-school-card {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.persona-school-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--slate-700);
  margin-bottom: 0.35rem;
}

.persona-school-select {
  font-size: 0.82rem;
  padding: 0.4rem 0.6rem;
  font-weight: 600;
  background: #ffffff;
}

.persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.persona-btn-sysadmin {
  font-size: 0.75rem;
  background: #fdf2f8 !important;
  border-color: #fbcfe8 !important;
  color: #9d174d !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   GATE, SICKBAY, INVENTORY & MEALS COMPONENT MODULES
   ========================================================================== */

/* Positioning & Display Utilities */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.line-through { text-decoration: line-through !important; }
.cursor-pointer { cursor: pointer !important; }
.flex-2 { flex: 2 !important; }
.min-h-32 { min-height: 32px !important; }
.min-h-48 { min-height: 48px !important; }
.min-h-52 { min-height: 52px !important; }
.max-w-250 { max-width: 250px !important; }
.max-w-300 { max-width: 300px !important; }
.btn-pill-xs { font-size: 0.75rem !important; padding: 2px 8px !important; }

/* Responsive Grids */
.grid-2col-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.grid-auto-fit-220 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* Gate Clearance Station Components */
.gate-scanner-card {
  border: 2px solid var(--primary-500) !important;
  box-shadow: var(--shadow-md);
}

.gate-scanner-header {
  background: linear-gradient(90deg, var(--slate-900) 0%, var(--primary-900) 100%);
  color: white;
  padding: 1.5rem 2rem;
}

.gate-scanner-title {
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  margin: 0;
}

.gate-scanner-subtitle {
  color: var(--primary-100);
  font-size: 0.85rem;
  margin-top: 0.25rem;
  margin-bottom: 0;
}

.gate-search-input {
  font-size: 1.05rem !important;
  padding: 0.75rem 0.75rem 0.75rem 2.5rem !important;
  min-height: 48px !important;
}

.gate-alert-card {
  border: 2px solid #ef4444 !important;
  background: #fff1f2 !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}

.gate-alert-body {
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}

.gate-alert-title {
  color: #991b1b !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  margin: 0 0 0.25rem 0 !important;
}

.gate-alert-desc {
  color: #881337 !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

.gate-alert-highlight {
  color: #be123c !important;
  font-weight: 800 !important;
}

.gate-pass-verified {
  border: 2px solid var(--slate-200);
}

.gate-pass-verified.status-issued {
  border-color: var(--amber-500) !important;
}

.gate-pass-verified.status-active {
  border-color: var(--rose-500) !important;
}

.gate-pass-verified.status-returned {
  border-color: var(--emerald-500) !important;
}

.gate-pass-avatar {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: var(--radius-md);
  background: var(--primary-700);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
}

.gate-pass-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--slate-200);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.gate-info-box {
  background: var(--slate-50);
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.gate-bulk-bar {
  display: none;
  background: var(--slate-900);
  color: white;
  padding: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.gate-pending-card {
  margin-top: 1.5rem;
  border: 1.5px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
}

.gate-pending-card.has-pending {
  border-color: var(--amber-400);
}

.gate-pending-header {
  background: var(--slate-50);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.gate-pending-header.has-pending {
  background: linear-gradient(135deg, var(--amber-50) 0%, #ffffff 100%);
}

.gate-scroll-table {
  max-height: 380px;
  overflow-y: auto;
}

.gate-row-fees {
  background: #fffdfa !important;
}

.gate-row-medical {
  background: #fffafa !important;
}

.gate-action-btn {
  width: 100% !important;
  padding: 1rem !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  justify-content: center !important;
  min-height: 52px !important;
}

/* Sickbay Module Components */
.sickbay-card-highlight {
  border: 2px solid var(--primary-300) !important;
  margin-bottom: 1.5rem !important;
}

.sickbay-header-gradient {
  background: linear-gradient(135deg, var(--primary-50) 0%, #ffffff 100%) !important;
}

.bed-fields-box {
  display: none;
  background: var(--amber-50);
  padding: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--amber-200);
  margin-bottom: 1.25rem;
}

.exeat-fields-box {
  display: none;
  background: var(--rose-50);
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rose-200);
  margin-bottom: 1.25rem;
}

.clinical-regimen-box {
  border-top: 1px solid var(--slate-200);
  margin-top: 1.5rem;
  background: var(--slate-50);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  border: 1px solid var(--slate-200);
}

.medication-card {
  background: white;
  border: 1.5px solid var(--primary-200);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.custom-med-block {
  display: none;
  background: #fffbeb;
  border: 1.5px dashed var(--amber-400);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  margin-bottom: 0.75rem;
}

.in-bits-block {
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}

.touch-checkbox-clean {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-height: auto !important;
  margin-bottom: 0.4rem !important;
}

.btn-dashed-add {
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  width: 100% !important;
  border: 2px dashed var(--primary-400) !important;
  background: white !important;
  color: var(--primary-700) !important;
  padding: 0.75rem !important;
}

.text-amber-900 {
  color: var(--amber-900) !important;
}

.dose-plan-summary {
  background: linear-gradient(135deg, var(--primary-50) 0%, #f0fdf4 100%);
  border: 1.5px solid var(--primary-400);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.dose-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--primary-700);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
}

.border-top-primary-200 {
  border-top: 1px solid var(--primary-200) !important;
}

.grid-3col-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.sickbay-plan-card {
  background: var(--slate-50);
  border: 1.5px solid var(--primary-300);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.clinical-closure-box {
  background: #ffffff;
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
}

.progress-track {
  width: 100%;
  height: 8px;
  background: var(--slate-200);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.progress-bar-fill.bg-amber { background: var(--amber-500); }
.progress-bar-fill.bg-primary { background: var(--primary-600); }
.progress-bar-fill.bg-emerald { background: var(--emerald-600); }

.btn-warning-highlight {
  border-color: var(--amber-400) !important;
  color: var(--amber-800) !important;
  background: #fffbeb !important;
}

.plan-card {
  position: relative;
  box-shadow: var(--shadow-sm);
}

.plan-card.overdue {
  border: 2px solid var(--amber-500) !important;
  background: #fffdfa !important;
}

.plan-card.active-plan {
  border: 2px solid var(--primary-400) !important;
}

.plan-card.normal-plan {
  border: 1px solid var(--slate-200) !important;
}

.overdue-banner {
  background: var(--amber-100);
  border: 1px solid var(--amber-300);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.plan-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}

.plan-avatar.overdue { background: var(--amber-600) !important; }
.plan-avatar.normal { background: var(--primary-700) !important; }

.plan-med-box {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.plan-closure-audit {
  background: #f8fafc;
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
}

.plan-dose-timeline {
  border-top: 1px dashed var(--slate-200);
  padding-top: 0.75rem;
  margin-bottom: 1rem;
}

.dose-item-pill {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border: 1px solid var(--slate-100);
  padding: 4px 8px;
  border-radius: 4px;
}

.closure-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.closure-modal-box {
  background: white;
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: fadeIn 0.2s ease;
}

.closure-modal-header {
  background: var(--slate-900);
  color: white;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.closure-modal-info {
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.inventory-policy-box {
  background: var(--slate-50);
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}

.checkbox-md {
  width: 1.15rem !important;
  height: 1.15rem !important;
}

.grid-auto-fit-180 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.flow-step-card {
  padding: 1rem;
  border-radius: var(--radius-md);
  border-width: 1.5px;
  border-style: solid;
}

.flow-step-card.granted {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
}

.flow-step-card.awaiting {
  border-color: #fde68a !important;
  background: #fffbeb !important;
}

.flow-step-card.ready {
  border-color: #c7d2fe !important;
  background: #eef2ff !important;
}

.flow-step-card.locked {
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
}

.flow-step-card.granted .flow-step-title { color: #166534 !important; }
.flow-step-card.awaiting .flow-step-title { color: #92400e !important; }
.flow-step-card.ready .flow-step-title { color: #3730a3 !important; }
.flow-step-card.locked .flow-step-title { color: #64748b !important; }

.inventory-bypass-box {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Meals Logging */
.meal-rollcall-section {
  border-top: 1px solid var(--slate-200);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.meal-rollcall-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.meal-rollcall-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--slate-800);
}

.student-meal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  max-height: 480px;
  overflow-y: auto;
  padding: 0.25rem;
}

.student-meal-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--slate-200);
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.student-meal-card.served-active {
  border-color: var(--emerald-300);
  background: var(--emerald-50);
}

.student-meal-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.student-meal-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--slate-900);
}

.student-meal-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--slate-600);
}

.meal-checkbox-lg {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  margin-left: 0.75rem !important;
  cursor: pointer;
}

/* ==========================================================================
   DISCIPLINE & FEES COMPONENT MODULES
   ========================================================================== */

/* Responsive Layout Grids */
.grid-2-1-responsive {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.grid-3-1-responsive {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 960px) {
  .grid-2-1-responsive,
  .grid-3-1-responsive {
    grid-template-columns: 1fr;
  }
}

/* Sizing Utilities */
.max-w-750 { max-width: 750px !important; }
.max-w-760 { max-width: 760px !important; }
.max-w-850 { max-width: 850px !important; }
.min-w-200 { min-width: 200px !important; }

/* Discipline Banners & Headers */
.discipline-banner-success {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: white;
  padding: 1.5rem 2rem;
}

.discipline-banner-danger {
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
  color: white;
  padding: 1.5rem 2rem;
}

.discipline-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.discipline-banner-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  color: white;
}

.discipline-banner-sub {
  margin: 0.2rem 0 0 0;
  color: #a7f3d0;
  font-size: 0.85rem;
}

.discipline-banner-sub-danger {
  margin: 0.2rem 0 0 0;
  color: #fecaca;
  font-size: 0.85rem;
}

/* Discipline Summary & Notice Boxes */
.discipline-summary-box {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.discipline-notice-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  color: #166534;
  display: flex;
  gap: 0.5rem;
}

.sanction-return-conditions {
  margin-top: 0.75rem;
  padding: 0.6rem;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #991b1b;
}

/* Severity & Role Badges */
.badge-severity-minor {
  background: #fef9c3 !important;
  color: #854d0e !important;
  font-weight: 700;
}

.badge-severity-moderate {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  font-weight: 700;
}

.badge-severity-major {
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-weight: 800;
}

.badge-severity-critical {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  font-weight: 800;
}

.badge-role-offender {
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-weight: 700;
}

.badge-role-victim {
  background: #dbeafe !important;
  color: #1e40af !important;
  font-weight: 600;
}

.badge-role-witness {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

.badge-status-reported {
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.72rem;
}

.badge-status-investigating {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  font-weight: 700;
  font-size: 0.72rem;
}

.badge-status-hearing {
  background: #fef08a !important;
  color: #713f12 !important;
  font-weight: 700;
  font-size: 0.72rem;
}

.badge-status-sanction {
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-weight: 800;
  font-size: 0.72rem;
}

.badge-status-resolved {
  background: #dcfce7 !important;
  color: #15803d !important;
  font-weight: 700;
  font-size: 0.72rem;
}

.badge-status-dismissed {
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 0.72rem;
}

/* Dossier Header Cards */
.dossier-header-card {
  margin-bottom: 1.5rem;
}

.dossier-header-card.severity-minor {
  border-left: 6px solid #ca8a04 !important;
}

.dossier-header-card.severity-moderate {
  border-left: 6px solid #ea580c !important;
}

.dossier-header-card.severity-major {
  border-left: 6px solid #dc2626 !important;
}

.dossier-header-card.severity-critical {
  border-left: 6px solid #9333ea !important;
}

/* Sanction Items */
.sanction-item-card {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: white;
}

.sanction-item-card.status-completed {
  border-left: 5px solid #22c55e !important;
}

.sanction-item-card.status-in-progress {
  border-left: 5px solid #ef4444 !important;
}

.sanction-item-card.status-pending {
  border-left: 5px solid #f59e0b !important;
}

/* Searchable Student/Staff Pickers */
.student-search-spinner {
  display: none;
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
}

.student-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  z-index: 1060;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.25rem;
}

.student-search-option {
  padding: 0.45rem 0.65rem;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.1s ease;
}

.student-search-option:hover {
  background: #f1f5f9;
}

.student-selected-card {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem;
}

.investigator-picker-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  z-index: 1050;
  padding: 0.5rem;
  flex-direction: column;
  gap: 0.35rem;
}

.investigator-search-input {
  width: 100%;
  padding: 0.4rem 0.5rem 0.4rem 1.75rem;
  font-size: 0.8rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  outline: none;
}

.investigator-options-list {
  overflow-y: auto;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0.35rem;
}

.investigator-option-item {
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: background 0.1s ease;
}

.investigator-option-item:hover {
  background: #f1f5f9;
}

/* Image Lightbox Modal */
.image-lightbox-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2rem;
}

.lightbox-content {
  max-width: 90vw;
  max-height: 85vh;
  position: relative;
}

.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.lightbox-caption {
  color: white;
  text-align: center;
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.lightbox-close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

.image-preview-thumb {
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--slate-300);
  background-size: cover;
  background-position: center;
}

/* Fees & Exeat Components */
.fees-info-banner {
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--primary-50) 0%, #f0fdf4 100%);
  border: 1.5px solid var(--primary-300);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.fees-mapping-card {
  background: var(--slate-50);
  padding: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-200);
}

.card-stat-border-emerald {
  border-left: 4px solid var(--emerald-500) !important;
}

.card-stat-border-amber {
  border-left: 4px solid var(--amber-500) !important;
}

.card-stat-border-rose {
  border-left: 4px solid var(--rose-500) !important;
}

.card-stat-border-slate {
  border-left: 4px solid var(--slate-300) !important;
}

.btn-danger-solid {
  background: var(--danger-600) !important;
  border-color: var(--danger-600) !important;
  color: #ffffff !important;
}

.btn-success-solid {
  background: var(--success-600) !important;
  border-color: var(--success-600) !important;
  color: #ffffff !important;
}

.pagination-footer-bar {
  padding: 0.85rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--slate-200);
  font-size: 0.82rem;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--slate-50);
}

.page-current-chip {
  padding: 0.25rem 0.65rem;
  background: #ffffff;
  border: 1px solid var(--slate-300);
  border-radius: 4px;
  font-weight: 700;
  color: var(--slate-800);
  font-size: 0.75rem;
}

.case-number-link {
  font-weight: 700;
  color: var(--primary-700);
  text-decoration: none;
  font-size: 0.88rem;
}

.font-italic {
  font-style: italic !important;
}

.student-change-btn {
  background: none !important;
  border: none !important;
  color: #6366f1 !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  cursor: pointer;
  padding: 0 0.25rem !important;
}

.btn-submit-incident {
  padding: 0.75rem 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  background: #dc2626 !important;
  border: 1px solid #b91c1c !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
  cursor: pointer !important;
}

.evidence-drop-zone {
  background: var(--slate-50);
  border: 2px dashed var(--slate-300);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1rem;
}

.student-search-empty-msg {
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
  color: var(--slate-500);
  text-align: center;
}

.image-preview-thumb-img {
  width: 90px;
  height: 90px;
  border-radius: 8px;
  border: 1px solid var(--slate-300);
  object-fit: cover;
}

.text-indigo-950 { color: #1e1b4b !important; }
.text-indigo-700 { color: #4338ca !important; }
.max-w-360 { max-width: 360px !important; }

.discipline-banner-dark {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: white;
  padding: 1.5rem 2rem;
}

.attached-evidence-pill {
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  background: var(--slate-50);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.select-rows-dropdown {
  padding: 0.2rem 0.4rem !important;
  border-radius: 4px !important;
  border: 1px solid var(--slate-300) !important;
  font-size: 0.75rem !important;
  background: white !important;
}

.bg-indigo-gradient {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
  color: white !important;
}

.text-indigo-200 {
  color: #c7d2fe !important;
}

.evidence-thumb-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}

.evidence-doc-thumb {
  height: 130px;
  background: var(--slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--slate-400);
}

.evidence-zoom-tag {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.68rem;
}

.investigator-display-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  font-size: 0.82rem;
  cursor: pointer;
  min-height: 38px;
  box-shadow: var(--shadow-sm);
}

.pre-wrap {
  white-space: pre-wrap !important;
}

.bg-emerald-50 {
  background-color: #ecfdf5 !important;
}

.border-top-emerald-200 {
  border-top: 1px solid #a7f3d0 !important;
}

.border-left-5-green { border-left: 5px solid #22c55e !important; }
.border-left-5-red { border-left: 5px solid #ef4444 !important; }
.border-left-5-amber { border-left: 5px solid #f59e0b !important; }
.border-bottom-dashed { border-bottom: 1px dashed var(--slate-200) !important; }
.btn-warning-solid { background: #fef08a !important; color: #713f12 !important; border-color: #fde047 !important; }
.max-h-300 { max-height: 300px !important; }
.text-primary-900 { color: #1e3a8a !important; }
.text-rose-900 { color: #881337 !important; }
.text-rose-700 { color: #be123c !important; }
.text-emerald-700 { color: #047857 !important; }
.text-amber-700 { color: #b45309 !important; }
.text-amber-900 { color: #78350f !important; }
.bg-amber-50 { background-color: #fffbeb !important; }
.border-amber-300 { border-color: #fcd34d !important; }
.border-amber-300-all { border: 1.5px solid var(--amber-300) !important; }
.max-h-250 { max-height: 250px !important; }
.border-primary-300 { border: 1.5px solid var(--primary-300) !important; }

.grid-auto-fit-200 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.card-stat-sm {
  padding: 1.25rem !important;
}

.card-stat-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
}

.card-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  margin-top: 0.35rem;
}

.card-stat-sub {
  font-size: 0.75rem;
  color: var(--slate-500);
  margin-top: 0.25rem;
}

.card-header-primary-subtle {
  background: linear-gradient(135deg, var(--primary-50) 0%, #ffffff 100%) !important;
}

.bg-amber-subtle {
  background-color: #fffcf8 !important;
}

.max-w-1050 {
  max-width: 1050px !important;
}

.max-h-450 {
  max-height: 450px !important;
}

.table-header-sticky {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 10;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.row-active-pass {
  background-color: #fffbeb !important;
  opacity: 0.85;
}

.w-45 {
  width: 45px !important;
}

.w-40 {
  width: 40px !important;
}

.text-2xs {
  font-size: 0.68rem !important;
}

.font-black {
  font-weight: 900 !important;
}

.border-slate-700 {
  border-color: var(--slate-700) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.fees-sticky-footer {
  position: sticky;
  bottom: 15px;
  background: var(--slate-900);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  box-shadow: var(--shadow-xl);
  z-index: 100;
}

.fees-sticky-footer-title {
  font-weight: 800;
  font-size: 1.05rem;
}

.fees-sticky-footer-sub {
  font-size: 0.8rem;
  color: var(--slate-400);
}

.btn-issue-exeat {
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  padding: 0.7rem 1.5rem !important;
}

.card-stat-border-primary {
  border-left: 4px solid var(--primary-500) !important;
}

.text-primary-800 {
  color: var(--primary-800) !important;
}

.filter-tabs-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--slate-100);
  padding-bottom: 0.75rem;
}

.filter-form-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.bulk-actions-floating-bar {
  background: var(--slate-900);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  box-shadow: var(--shadow-lg);
}

.avatar-badge {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.avatar-badge-rose {
  background-color: var(--rose-700) !important;
}

.avatar-badge-emerald {
  background-color: var(--emerald-700) !important;
}

.row-defaulter {
  background-color: #fffdfd;
}

.min-h-38 { min-height: 38px !important; }
.min-h-34 { min-height: 34px !important; }
.min-w-140 { min-width: 140px !important; }
.min-w-150 { min-width: 150px !important; }
.flex-2 { flex: 2 !important; }

/* Student & Dormitory Form Helpers */
.form-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 2rem;
  border-top: 1px solid var(--slate-200);
  padding-top: 1.25rem;
}

.form-help-text {
  font-size: 0.78rem;
  display: block;
  margin-top: 0.25rem;
  color: var(--slate-500);
}

.form-help-text-primary {
  font-size: 0.78rem;
  display: block;
  margin-top: 0.25rem;
  color: var(--primary-700);
}

.max-w-650 {
  max-width: 650px !important;
}

.max-w-680 {
  max-width: 680px !important;
}

/* Staff Picker Toolbar & Rows */
.staff-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.staff-search-input {
  padding-left: 2rem !important;
  padding-right: 1.8rem !important;
  font-size: 0.85rem !important;
  background: #ffffff !important;
  border-color: var(--slate-300) !important;
}

.staff-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  pointer-events: none;
  opacity: 0.5;
}

.staff-search-clear-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--slate-400);
  line-height: 1;
  padding: 2px 4px;
}

.staff-filter-group {
  display: inline-flex;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-300);
  background: #ffffff;
  overflow: hidden;
  font-size: 0.78rem;
}

.staff-filter-btn {
  padding: 0.35rem 0.65rem;
  border: none;
  background: #ffffff;
  color: var(--slate-600);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.staff-filter-btn.active {
  background: var(--primary-600) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.staff-list-container {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.staff-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  gap: 0.75rem;
  flex-wrap: wrap;
  transition: background 0.15s;
}

.staff-item-row.staff-row-active {
  background: var(--primary-50) !important;
  border-color: var(--primary-200) !important;
}

.staff-item-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 200px;
  flex: 1;
}

.staff-item-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.staff-select-role {
  font-size: 0.8rem !important;
  padding: 0.25rem 0.5rem !important;
  height: auto !important;
}

.staff-lead-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--slate-700);
}

.staff-no-matches {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--slate-400);
  font-size: 0.85rem;
  font-style: italic;
  background: #ffffff;
  border: 1px dashed var(--slate-200);
  border-radius: var(--radius-sm);
}

.form-check-input-staff {
  width: 17px !important;
  height: 17px !important;
  cursor: pointer !important;
  accent-color: var(--primary-600) !important;
}

.badge-staff-selected {
  background: var(--primary-100) !important;
  color: var(--primary-800) !important;
  border: 1px solid var(--primary-200) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
}

.badge-staff-unselected {
  background: var(--slate-100) !important;
  color: var(--slate-600) !important;
  border: 1px solid var(--slate-200) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
}

.row-absent-highlight {
  background-color: #fffafa !important;
}

.w-10p { width: 10% !important; }
.w-12p { width: 12% !important; }
.w-15p { width: 15% !important; }
.w-18p { width: 18% !important; }
.w-20p { width: 20% !important; }
.w-22p { width: 22% !important; }
.w-25p { width: 25% !important; }

/* Class Stream & Dormitory Utilities */
.class-code-badge {
  font-size: 0.85rem;
  color: var(--primary-700);
  background: var(--primary-50);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.badge-amber {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.dorm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--primary-50);
  color: var(--primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  border: 1px solid var(--primary-200);
  flex-shrink: 0;
}

.dorm-code {
  font-size: 0.72rem;
  margin-left: 0.35rem;
  background: var(--slate-100);
  color: var(--slate-700);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.badge-assigned-house {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-size: 0.68rem !important;
  margin-left: 0.35rem !important;
  font-weight: 700 !important;
}

.badge-gender-boys {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  font-size: 0.75rem !important;
}

.badge-gender-girls {
  background: #fdf2f8 !important;
  color: #be185d !important;
  border: 1px solid #fbcfe8 !important;
  font-size: 0.75rem !important;
}

.badge-gender-mixed {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
  font-size: 0.75rem !important;
}

.badge-staff-role {
  font-size: 0.68rem !important;
  padding: 1px 5px !important;
  background: var(--slate-100) !important;
  color: var(--slate-700) !important;
}

.badge-staff-role.is-primary {
  background: var(--primary-100) !important;
  color: var(--primary-800) !important;
  border: 1px solid var(--primary-200) !important;
}

.btn-danger-ghost {
  color: var(--danger-600) !important;
  border-color: var(--danger-200) !important;
  background: var(--danger-50) !important;
}

.h-6-px {
  height: 6px !important;
}
.h-8-px {
  height: 8px !important;
}

.progress-bar-fill.bg-danger {
  background: var(--danger-500) !important;
}

.max-w-860 { max-width: 860px !important; }
.form-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--slate-800);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-section-divider {
  border-top: 1px solid var(--slate-200);
  margin: 1.75rem 0;
  padding-top: 1.5rem;
}
.form-control-readonly {
  background: var(--slate-100) !important;
  color: var(--slate-600) !important;
  cursor: not-allowed !important;
}
.text-underline {
  text-decoration: underline !important;
}
.scope-stream-banner {
  background: var(--indigo-50, #eef2ff);
  border: 1.5px solid var(--indigo-200, #c7d2fe);
  border-radius: var(--radius-md, 8px);
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.flex-1-1-220 {
  flex: 1 1 220px !important;
}
.min-w-160 { min-width: 160px !important; }
.min-w-170 { min-width: 170px !important; }
.per-page-group {
  display: inline-flex;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.btn-per-page {
  padding: 0.2rem 0.6rem !important;
  font-size: 0.75rem !important;
  border-radius: 0 !important;
}
.student-name-link {
  font-weight: 700;
  color: var(--primary-700);
  text-decoration: none;
}
.stat-icon.icon-blue {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}
.cursor-default {
  cursor: default !important;
}
.lh-1 { line-height: 1 !important; }
.lh-relaxed { line-height: 1.45 !important; }

/* Roll Call Conduct */
.roll-call-sticky-header {
  position: sticky;
  top: 70px;
  z-index: 100;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-top: 3px solid var(--primary-600);
}

.badge-tally-present {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
  font-size: 0.82rem !important;
  padding: 4px 8px !important;
}

.badge-tally-absent {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
  font-size: 0.82rem !important;
  padding: 4px 8px !important;
}

.badge-tally-exeat {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-size: 0.82rem !important;
  padding: 4px 8px !important;
}

.badge-tally-sickbay {
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  border: 1px solid #ddd6fe !important;
  font-size: 0.82rem !important;
  padding: 4px 8px !important;
}

.precleared-note-exeat {
  font-size: 0.75rem;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 2px 6px;
  margin-top: 0.35rem;
  display: inline-block;
}

.precleared-note-sickbay {
  font-size: 0.75rem;
  color: #6d28d9;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 4px;
  padding: 2px 6px;
  margin-top: 0.35rem;
  display: inline-block;
}

.status-btn {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--slate-200);
  background: #ffffff;
  color: var(--slate-700);
  transition: all 0.15s;
}

.status-btn.active-present {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

.status-btn.active-absent {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

.status-btn.active-exeat {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}

.status-btn.active-sickbay {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
}

.status-btn.active-other {
  background: #4b5563 !important;
  border-color: #4b5563 !important;
  color: #ffffff !important;
}

.roster-card {
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--slate-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.w-180 { width: 180px !important; }
.w-220 { width: 220px !important; }

/* Bulk Promotion Utilities */
.row-graduated {
  background-color: rgba(239, 246, 255, 0.6) !important;
}

.row-departed {
  background-color: rgba(254, 242, 242, 0.6) !important;
}

.row-retained {
  background-color: rgba(248, 250, 252, 0.8) !important;
}

.opacity-40 {
  opacity: 0.4 !important;
}

.max-w-1180 {
  max-width: 1180px !important;
}

.student-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

.checkbox-scale-12 {
  transform: scale(1.2);
  cursor: pointer;
}

.table-valign-middle td,
.table-valign-middle th {
  vertical-align: middle !important;
}

.w-44 { width: 44px !important; }
.min-w-180 { min-width: 180px !important; }
.min-w-190 { min-width: 190px !important; }
.flex-1-1-320 { flex: 1 1 320px !important; }

/* Roll Call Detail Alert & Card Classes */
.bg-rose-50 { background-color: #fff1f2 !important; }
.border-danger-400 { border: 2px solid #f87171 !important; }
.border-rose-200 { border: 1px solid #fecaca !important; }
.border-emerald-200 { border: 1px solid #bbf7d0 !important; }
.text-rose-800 { color: #991b1b !important; }
.text-emerald-800 { color: #166534 !important; }
.text-purple-700 { color: #7e22ce !important; }
.card-stat-border-purple { border-left: 3px solid #a855f7 !important; }
.card-stat-border-emerald-3 { border-left: 3px solid var(--success-500) !important; }
.card-stat-border-rose-3 { border-left: 3px solid var(--danger-500) !important; }
.card-stat-border-amber-3 { border-left: 3px solid var(--amber-500) !important; }
.w-4p { width: 4% !important; }
.w-8p { width: 8% !important; }
.w-12p { width: 12% !important; }
.w-14p { width: 14% !important; }
.w-16p { width: 16% !important; }
.w-18p { width: 18% !important; }
.w-22p { width: 22% !important; }
.w-24p { width: 24% !important; }
.w-28p { width: 28% !important; }

/* Student Profile & Bio Utilities */
.student-status-badge {
  padding: 0.35rem 0.85rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}
.student-alumni-card {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1.15rem;
}
.student-alumni-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: #475569;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.student-alumni-body {
  font-size: 0.82rem;
  color: #1e293b;
  margin-top: 0.35rem;
  line-height: 1.45;
}
.student-profile-field-label {
  color: var(--slate-500);
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
}
.medical-warning-box {
  background: var(--amber-50);
  border: 1px solid var(--amber-100);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}
.medical-warning-title {
  color: var(--amber-700);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.medical-warning-item {
  font-size: 0.8rem;
  margin-top: 0.25rem;
  word-break: break-word;
}
.card-fee-defaulter {
  border: 1.5px solid var(--rose-400) !important;
}
.card-fee-cleared {
  border: 1.5px solid var(--emerald-400) !important;
}
.card-fee-header-defaulter {
  background: var(--rose-50) !important;
}
.card-fee-header-cleared {
  background: var(--emerald-50) !important;
}
.fee-balance-amount {
  font-size: 1.35rem;
  font-weight: 800;
  word-break: break-all;
}
.badge-role-offender {
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
}
.badge-role-victim {
  background: #dbeafe !important;
  color: #1e40af !important;
  font-size: 0.72rem !important;
}
.badge-role-other {
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.72rem !important;
}
.badge-demerits {
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-weight: 800 !important;
}

/* Dormitory Allocate & Operations Utilities */
.card-border-primary-4 {
  border-left: 4px solid var(--primary-600) !important;
}
.card-stat-border-primary {
  border-left: 3px solid var(--primary-500) !important;
}
.tab-nav-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--slate-200);
  padding-bottom: 0.5rem;
  flex-wrap: wrap;
}
.select-all-matching-banner {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #1e40af;
  text-align: center;
}
.select-all-matching-banner.banner-success {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}
.selection-dock {
  position: fixed;
  bottom: 20px;
  right: 24px;
  z-index: 1050;
  background: #1e293b;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
  align-items: center;
  gap: 1rem;
  border: 1px solid #334155;
}
.selection-dock-count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
}
.selection-dock-clear-btn {
  background: rgba(255,255,255,0.15) !important;
  border: none !important;
  color: #cbd5e1 !important;
  font-size: 0.75rem !important;
  padding: 4px 8px !important;
}
.selection-dock-submit-btn {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
}
.dorm-staff-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.55rem;
}
.banner-rollcall-alert {
  margin-bottom: 1.5rem;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
}
.banner-rollcall-ok {
  margin-bottom: 1.5rem;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
}
.modal-backdrop-custom {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-backdrop-custom.is-open {
  display: flex !important;
}
.modal-dialog-custom {
  background: #fff;
  border-radius: var(--radius-md);
  max-width: 480px;
  width: 100%;
  padding: 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--slate-400);
}
.table-empty-cell {
  text-align: center;
  color: var(--slate-400);
  padding: 1.5rem;
}
.badge-live-exeat {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-size: 0.75rem !important;
  padding: 3px 7px !important;
}
.badge-live-sickbay {
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  border: 1px solid #ddd6fe !important;
  font-size: 0.75rem !important;
  padding: 3px 7px !important;
}
.w-170 { width: 170px !important; }
.w-200 { width: 200px !important; }
.w-220 { width: 220px !important; }
.min-w-240 { min-width: 240px !important; }
.max-w-420 { max-width: 420px !important; }
.max-w-460 { max-width: 460px !important; }
.max-w-650 { max-width: 650px !important; }
.max-w-960 { max-width: 960px !important; }
.max-w-1300 { max-width: 1300px !important; }
.fs-10 { font-size: 0.65rem !important; }
.fs-11 { font-size: 0.72rem !important; }
.fs-12 { font-size: 0.75rem !important; }
.fs-13 { font-size: 0.8rem !important; }
.fs-14 { font-size: 0.88rem !important; }
.fs-15 { font-size: 0.95rem !important; }
.fs-16 { font-size: 1rem !important; }
.fs-20 { font-size: 1.25rem !important; }
.fs-24 { font-size: 1.5rem !important; }

/* Academics & Dashboard Components */
.grid-auto-fit-280 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.stream-register-card {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-subtle-box {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.form-control-touch {
  min-height: 44px !important;
  font-size: 0.95rem !important;
  padding: 0.5rem 0.65rem !important;
}
.bg-amber-50 {
  background-color: var(--amber-50) !important;
}
.text-amber-800 {
  color: #92400e !important;
}
.card-hero-primary {
  background: linear-gradient(135deg, var(--primary-900) 0%, var(--slate-900) 100%) !important;
  color: white !important;
}

/* Reports & Confidential Dispatches */
.max-w-1100 { max-width: 1100px !important; }
.max-w-380 { max-width: 380px !important; }
.min-w-90 { min-width: 90px !important; }
.min-w-110 { min-width: 110px !important; }
.min-w-130 { min-width: 130px !important; }
.min-w-250 { min-width: 250px !important; }
.w-100-px { width: 100px !important; }
.w-130-px { width: 130px !important; }
.w-130 { width: 130px !important; }
.w-30p { width: 30% !important; }
.w-35p { width: 35% !important; }
.pl-7 { padding-left: 2.25rem !important; }
.search-input-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); }
.border-left-primary { border-left: 3px solid var(--primary-600) !important; }
.bg-rose-50 { background-color: #fee2e2 !important; }
.bg-emerald-50 { background-color: #dcfce7 !important; }
.outline-none { outline: none !important; }
.overflow-x-auto { overflow-x: auto !important; }
.pointer-events-none { pointer-events: none !important; }
.checkbox-17 { width: 17px !important; height: 17px !important; }
.checkbox-18 { width: 18px !important; height: 18px !important; min-width: 18px !important; }
.checkbox-20 { width: 20px !important; height: 20px !important; min-width: 20px !important; }
.lh-1-2 { line-height: 1.2 !important; }
.text-rose-800 { color: #9f1239 !important; }
.text-rose-900 { color: #881337 !important; }
.justify-center { justify-content: center !important; }
.flex-1-1-220 { flex: 1 1 220px !important; }
.flex-1-1-240 { flex: 1 1 240px !important; }
.fs-1-1-rem { font-size: 1.1rem !important; }
.fs-1-5-rem { font-size: 1.5rem !important; }
.fs-1-6-rem { font-size: 1.6rem !important; }
.fs-1-8-rem { font-size: 1.8rem !important; }
.fs-2-5-rem { font-size: 2.5rem !important; }
.flex-2 { flex: 2 !important; }
.fst-italic { font-style: italic !important; }
.tracking-wider { letter-spacing: 0.08em !important; }
.text-emerald-900 { color: #14532d !important; }
.text-amber-700 { color: #b45309 !important; }
.text-amber-900 { color: #78350f !important; }
.text-pink-700 { color: #831843 !important; }
.text-pink-900 { color: #9d174d !important; }
.text-rose-700 { color: #881337 !important; }
.text-rose-900 { color: #be123c !important; }
.text-sky-400 { color: #38bdf8 !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.border-amber-200 { border: 1px solid #fde68a !important; }
.border-top-2 { border-top: 2px solid var(--slate-300) !important; }

.badge-sky-dark {
  background: #38bdf8 !important;
  color: #0f172a !important;
}
.badge-white-alpha {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* Staff Role Badges */
.badge-staff-director { background: #e0e7ff !important; color: #3730a3 !important; }
.badge-staff-principal { background: #ede9fe !important; color: #5b21b6 !important; }
.badge-staff-head_teacher { background: #dbeafe !important; color: #1e40af !important; }
.badge-staff-deputy { background: #eff6ff !important; color: #1d4ed8 !important; }
.badge-staff-dos { background: #f0fdf4 !important; color: #15803d !important; }
.badge-staff-bursar { background: #fefce8 !important; color: #854d0e !important; }
.badge-staff-accountant { background: #fef9c3 !important; color: #a16207 !important; }
.badge-staff-nurse { background: #fce7f3 !important; color: #9d174d !important; }
.badge-staff-storekeeper { background: #ffedd5 !important; color: #9a3412 !important; }
.badge-staff-gate_security { background: #f1f5f9 !important; color: #334155 !important; }
.badge-staff-class_teacher { background: #fef3c7 !important; color: #92400e !important; }
.badge-staff-teacher { background: #f1f5f9 !important; color: #475569 !important; }
.badge-staff-teacher_duty { background: #fef08a !important; color: #713f12 !important; }
.badge-staff-catering { background: #fed7aa !important; color: #7c2d12 !important; }
.badge-staff-housemaster { background: #e0f2fe !important; color: #0369a1 !important; }
.badge-staff-matron { background: #fce7f3 !important; color: #9d174d !important; }
.badge-staff-discipline_master { background: #fef2f2 !important; color: #991b1b !important; }
.badge-staff-discipline_committee { background: #f3e8ff !important; color: #6b21a8 !important; }
.badge-staff-system_admin { background: #fee2e2 !important; color: #991b1b !important; }

.badge-school-code {
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-weight: 800 !important;
  font-family: monospace !important;
  font-size: 0.68rem !important;
  border: 1px solid #cbd5e1 !important;
  padding: 2px 5px !important;
}

.tr-hover {
  border-bottom: 1px solid var(--slate-100);
  transition: background 0.15s ease;
}
.tr-hover:hover {
  background-color: var(--slate-50);
}

.border-bottom-2 {
  border-bottom: 2px solid var(--slate-200) !important;
}

.empty-state-cell {
  padding: 3rem 1rem !important;
  text-align: center !important;
  color: var(--slate-400) !important;
}

.th-report-header {
  background: var(--slate-50) !important;
  border-bottom: 2px solid var(--slate-200) !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--slate-600) !important;
}
.th-report-header th {
  padding: 0.85rem 1rem !important;
}

.td-report-cell {
  padding: 0.85rem 1rem !important;
}

.badge-dept-finance {
  background: #dcfce7 !important;
  color: #166534 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}
.badge-dept-academics {
  background: #e0e7ff !important;
  color: #3730a3 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}
.badge-dept-health {
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}
.badge-dept-welfare {
  background: #fef3c7 !important;
  color: #92400e !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}
.badge-dept-stores {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}
.badge-dept-exec {
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

.badge-status-draft {
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  border: 1px solid #cbd5e1 !important;
}
.badge-status-submitted {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  border: 1px solid #bae6fd !important;
}
.badge-status-signedoff {
  background: #dcfce7 !important;
  color: #15803d !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  border: 1px solid #86efac !important;
}
.badge-status-generic {
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 0.72rem !important;
}

.badge-encrypted {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border: 1px solid #a7f3d0 !important;
}

/* Tab Navigation Pills */
.nav-tab-pills {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--slate-200);
  padding-bottom: 0.75rem;
  flex-wrap: wrap;
}
.btn-tab-pill {
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 1rem !important;
  background: var(--slate-100) !important;
  color: var(--slate-700) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.15s ease;
}
.btn-tab-pill:hover {
  background: var(--slate-200) !important;
}
.btn-tab-pill.active {
  background: var(--primary-600) !important;
  color: white !important;
}
.tab-pill-badge {
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 4px;
  font-size: 0.75rem;
}

/* Reports Document Paper */
.report-paper {
  padding: 2.5rem;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.report-letterhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--slate-900);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.report-ref-badge {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-800);
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 0.4rem;
}
.report-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  background: #f8fafc;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--slate-200);
  margin-bottom: 1.75rem;
}
.report-metrics-card {
  margin-bottom: 1.75rem;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  overflow: hidden;
}
.report-metrics-header {
  background: var(--slate-50);
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--slate-200);
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--slate-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.report-section-header {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--slate-800);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--slate-200);
  padding-bottom: 0.35rem;
  margin-bottom: 0.6rem;
}
.report-body-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--slate-800);
  white-space: pre-wrap;
}
.report-confidential-box {
  margin-bottom: 1.75rem;
  background: #fffbeb;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border: 1px solid #fde68a;
}
.report-signoff-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 1.25rem;
  border-radius: 8px;
}
.report-signoff-form {
  background: #f8fafc;
  border: 1px solid var(--slate-200);
  padding: 1.25rem;
  border-radius: 8px;
}
.report-signature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--slate-300);
}
@media (max-width: 640px) {
  .report-signature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Metric Box Cards */
.metric-box-finance { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.85rem; }
.metric-box-debt { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 0.85rem; }
.metric-box-academics { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; padding: 0.85rem; }
.metric-box-danger { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 0.85rem; }
.metric-box-sickbay { background: #fdf2f8; border: 1px solid #fbcfe8; border-radius: 8px; padding: 0.85rem; }
.metric-box-referral { background: #fff1f2; border: 1px solid #fecdd3; border-radius: 8px; padding: 0.85rem; }
.metric-box-welfare { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 0.85rem; }
.metric-box-slate { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.85rem; }

/* Director Dashboard — Executive Analytics Toolbar */
.director-toolbar {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: white;
  border: 1px solid #334155;
  padding: 1.25rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.director-toolbar-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1.25rem;
  box-sizing: border-box;
}

.director-toolbar-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
}

.director-toolbar-icon {
  font-size: 1.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.director-toolbar-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}

.director-toolbar-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: #f8fafc;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.3;
}

.director-toolbar-subtitle {
  font-size: 0.8125rem;
  color: #94a3b8;
  line-height: 1.4;
}

.director-toolbar-controls {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
}

.director-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.director-filter-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  margin-bottom: 0;
  white-space: nowrap;
}

.director-period-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.director-period-group select {
  flex: 1;
}

.director-input-dark {
  background: #1e293b !important;
  color: white !important;
  border: 1px solid #334155 !important;
  min-height: 44px;
  height: 44px;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  font-size: 1rem !important; /* 16px to prevent iOS auto-zoom */
  width: 100%;
  box-sizing: border-box;
}

.director-input-brand {
  background: #1e293b !important;
  color: #38bdf8 !important;
  border: 1px solid #0284c7 !important;
  font-weight: 700 !important;
  min-height: 44px;
  height: 44px;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  font-size: 1rem !important; /* 16px to prevent iOS auto-zoom */
  width: 100%;
  box-sizing: border-box;
}

.director-btn-filter {
  background: #38bdf8 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border: none !important;
  min-height: 44px;
  height: 44px;
  padding: 0.5rem 1.25rem !important;
  border-radius: 8px;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.director-btn-filter:hover {
  background: #7dd3fc !important;
  color: #0c4a6e !important;
}

/* Progressive enhancement for toolbar: Tablet & Desktop */
@media (min-width: 768px) {
  .director-toolbar {
    padding: 1.25rem 1.5rem;
  }

  .director-toolbar-controls {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
  }

  .director-filter-group {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    width: auto;
  }

  .director-period-group {
    width: auto;
  }

  .director-input-brand {
    width: auto;
    min-width: 220px;
  }

  .director-period-group select:first-child {
    width: auto;
    min-width: 130px;
  }

  .director-period-group select:last-child {
    width: auto;
    min-width: 95px;
  }

  .director-btn-filter {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .director-toolbar-form {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .director-toolbar-brand {
    flex: 1;
    min-width: 320px;
  }

  .director-toolbar-controls {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    width: auto;
  }
}

/* Mobile-First Grid Systems (no max-width queries) */
.grid-4-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.grid-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .grid-4-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .grid-2-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4-col {
    grid-template-columns: repeat(4, 1fr);
  }
}
.sub-kpi-box {
  background: var(--slate-50);
  padding: 1rem;
  border-radius: var(--radius-md);
  text-align: center;
}

/* ==========================================
   Library & Resource Center Module
   Mobile-First Architecture & Design System
   ========================================== */
.library-hero-card {
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid #1e293b;
}
.library-hero-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.library-hero-icon {
  font-size: 2rem;
  line-height: 1;
}
.library-hero-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}
.library-hero-subtitle {
  font-size: 0.8125rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}
.library-headcount-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 700;
}
.library-headcount-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
.badge-library-available {
  background: #dcfce7 !important;
  color: #15803d !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border: 1px solid #86efac !important;
}
.badge-library-borrowed {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border: 1px solid #bae6fd !important;
}
.badge-library-overdue {
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border: 1px solid #fca5a5 !important;
}
.badge-library-lost {
  background: #fef2f2 !important;
  color: #7f1d1d !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border: 1px solid #f87171 !important;
}
.badge-library-damaged {
  background: #fef3c7 !important;
  color: #92400e !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border: 1px solid #fde68a !important;
}
.badge-library-refonly {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border: 1px solid #d8b4fe !important;
}
.badge-library-staff {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}
.badge-library-student {
  background: #f0fdf4 !important;
  color: #15803d !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}
.library-copy-tag {
  font-family: monospace;
  font-weight: 700;
  font-size: 0.8125rem;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  color: #334155;
}
.library-clearance-box-cleared {
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
}
.library-clearance-box-blocked {
  background: #fef2f2;
  border: 2px solid #fca5a5;
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.library-toolbar {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.library-toolbar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .library-toolbar-grid {
    grid-template-columns: 2fr 1fr 1fr auto;
    align-items: center;
  }
}
.library-form-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .library-form-card {
    padding: 2rem;
  }
}
.library-clockout-btn {
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
}
.library-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .library-detail-grid {
    grid-template-columns: 2fr 1fr;
  }
}
.library-copy-item-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem;
  border-bottom: 1px solid var(--slate-100);
}
@media (min-width: 640px) {
  .library-copy-item-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Attendance History Filter Toolbar (Mobile-First) */
.history-filter-card {
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.25rem 1.75rem 1.25rem;
  margin-bottom: 2.25rem;
  box-shadow: var(--shadow-sm);
}

.history-filter-form {
  width: 100%;
}

.history-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: 100%;
}

.history-filter-field {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.history-filter-field .form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--slate-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.45rem;
}

.history-filter-field .form-control,
.history-filter-field .form-select {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
}

.history-filter-search-wrap {
  position: relative;
  width: 100%;
}

.history-filter-search-wrap .form-control {
  min-height: 48px;
  font-size: 1rem;
  padding-right: 2.5rem;
}

.history-filter-search-wrap .picker-spinner {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  font-size: 1rem;
  pointer-events: none;
}

.history-custom-dates-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
}

.history-custom-dates-box .form-control {
  min-height: 48px;
  font-size: 0.98rem;
}

.history-grid-actions {
  margin-top: 0.75rem;
  padding-bottom: 0.5rem;
}

.history-filter-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.history-filter-actions .btn {
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 600;
}

.selected-student-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  color: var(--primary-800);
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.selected-student-pill button {
  background: transparent;
  border: none;
  color: var(--primary-600);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

.selected-student-pill button:hover {
  color: var(--danger-600);
}

@media (min-width: 640px) {
  .history-custom-dates-box {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
  .history-filter-actions {
    flex-direction: row;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .history-filter-card {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }

  .history-filter-grid {
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
    gap: 1.25rem;
  }

  .history-grid-search {
    grid-column: span 5;
  }

  .history-grid-date-filter {
    grid-column: span 4;
  }

  .history-grid-attendee-type {
    grid-column: span 3;
  }

  .history-grid-custom-dates {
    grid-column: span 12;
  }

  .history-grid-purpose {
    grid-column: span 4;
  }

  .history-grid-status {
    grid-column: span 4;
  }

  .history-grid-actions {
    grid-column: span 4;
    margin-top: 0;
    padding-bottom: 0;
  }
}

/* ==========================================================
   PROGRESSIVE HUMAN CHALLENGE (LOGIN SECURITY)
   ========================================================== */

.human-challenge-box {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.human-challenge-box:focus-within {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.human-challenge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.human-challenge-title-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.human-challenge-icon {
  font-size: 1.15rem;
}

.human-challenge-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #92400e;
}

.human-challenge-desc {
  font-size: 0.8rem;
  color: #78350f;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.human-challenge-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .human-challenge-body {
    flex-direction: row;
    align-items: flex-end;
  }
}

.human-challenge-math-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #fef3c7;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  gap: 0.75rem;
  flex: 1;
  min-height: 44px;
}

.human-challenge-math {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 800;
  color: #b45309;
  letter-spacing: 0.05em;
  user-select: none;
}

.human-challenge-refresh-btn {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  min-height: 36px;
  min-width: 36px;
  padding: 0.3rem 0.6rem !important;
  border-radius: 6px !important;
  border-color: #fde68a !important;
  color: #92400e !important;
  background: #fffbeb !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.human-challenge-refresh-btn:hover {
  background: #fde68a !important;
  border-color: #f59e0b !important;
  color: #78350f !important;
}

.human-challenge-input-group {
  flex: 1;
}

.human-challenge-input {
  min-height: 44px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  color: #111827;
}

.human-challenge-input:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}

/* Print Styles */

.print-only {
  display: none;
}
@media print {
  body {
    background: white !important;
    font-size: 11pt !important;
    color: black !important;
  }
  .sidebar,
  .top-bar,
  .mobile-top-header,
  .mobile-bottom-nav,
  .role-switcher-banner,
  .navbar,
  .breadcrumb-bar,
  .btn,
  .no-print {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  .app-container {
    display: block;
  }

  .main-wrapper {
    background: white;
  }

  .content-body {
    padding: 0;
  }

  .card {
    border: none;
    box-shadow: none;
  }

  .report-paper {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .print-break-inside-avoid {
    break-inside: avoid;
  }
}

/* ==========================================================================
   STUDENT REPORTING & GATE CLEARANCE SYSTEM (MOBILE-FIRST ARCHITECTURE)
   ========================================================================== */

/* Grid & Layout System */
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid-2-col {
    grid-template-columns: 1fr 1fr;
  }
}

.reporting-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .reporting-layout-grid {
    grid-template-columns: 1fr 340px;
    align-items: flex-start;
  }
}

.reporting-main-column {
  min-width: 0;
}

.reporting-sidebar-column {
  min-width: 0;
}

/* Metric / Stat Boxes */
.reporting-stat-box {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  text-align: center;
  min-width: 110px;
}

.reporting-stat-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}

.reporting-stat-lbl {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}

/* Card & Container Overflow Helpers for Floating Dropdowns */
.card-overflow-visible {
  overflow: visible !important;
  position: relative;
  z-index: 30;
}

.card-body-overflow-visible {
  overflow: visible !important;
  position: relative;
}

/* Autocomplete Search Dropdown */
.reporting-search-wrapper {
  position: relative;
  width: 100%;
  z-index: 40;
}

.search-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1.5px solid var(--primary-400);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 35px -4px rgba(0, 0, 0, 0.22), 0 8px 12px -6px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1050;
  margin-top: 0;
}

.search-dropdown-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--slate-100);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: background-color 0.15s ease;
  min-height: 48px;
}

.search-dropdown-item:last-child {
  border-bottom: none;
}

.search-dropdown-item:hover,
.search-dropdown-item:focus {
  background-color: var(--primary-50);
}

.search-dropdown-item:active {
  background-color: var(--primary-100);
}

.search-dropdown-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.search-dropdown-item-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--slate-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-dropdown-item-subtitle {
  font-size: 0.8rem;
  color: var(--slate-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-dropdown-item-action {
  color: var(--primary-600);
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Selected Student Panel */
.selected-student-panel {
  background: var(--slate-50);
  border: 1.5px solid var(--primary-200);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.student-avatar-lg {
  width: 52px;
  height: 52px;
  background: var(--primary-100);
  color: var(--primary-700);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

/* Category Selector Radio Cards */
.reporting-category-selector {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .reporting-category-selector {
    grid-template-columns: 1fr 1fr;
  }
}

.category-radio-card {
  display: flex;
  align-items: center;
  padding: 0.85rem 1rem;
  background: #ffffff;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
}

.category-radio-card input[type="radio"] {
  margin-right: 0.75rem;
  width: 20px;
  height: 20px;
  accent-color: var(--primary-600);
  flex-shrink: 0;
}

.category-radio-card:hover {
  border-color: var(--primary-400);
}

.category-radio-card:has(input[type="radio"]:checked) {
  border-color: var(--primary-600);
  background: var(--primary-50);
}

.category-radio-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Requirement Checklist Row */
.requirement-item-card {
  background: #ffffff;
  transition: all 0.15s ease;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
}

.requirement-item-card:hover {
  border-color: var(--slate-300);
  box-shadow: var(--shadow-sm);
}

.req-checkbox {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  accent-color: var(--primary-600);
  cursor: pointer;
}

/* Head Teacher Override Box */
.headteacher-override-box {
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-radius: var(--radius-md);
  padding: 1rem;
}

/* Clearance Feed */
.clearance-feed-list {
  max-height: 480px;
  overflow-y: auto;
}

.clearance-feed-item:last-child {
  border-bottom: none !important;
}

/* Custom Modals (Mobile-First) */
.modal-backdrop-custom {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-dialog-custom {
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-content-custom {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--slate-200);
}

.modal-header-custom {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title-custom {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--slate-400);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  color: var(--slate-800);
}

.modal-body-custom {
  padding: 1.25rem;
  overflow-y: auto;
}

.modal-footer-custom {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--slate-200);
  background: var(--slate-50);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ==========================================================================
   OFFICIAL GATE ENTRY PASS / PRINTABLE CLEARANCE SLIP
   ========================================================================== */
.gate-pass-body {
  background: var(--slate-100);
  font-family: inherit;
  margin: 0;
  padding: 1rem;
  color: var(--slate-900);
}

.gate-pass-actions {
  max-width: 720px;
  margin: 0 auto 1rem auto;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.gate-pass-slip {
  max-width: 720px;
  margin: 0 auto;
  background: #ffffff;
  border: 2px solid var(--slate-300);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
}

.gate-pass-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}

.gate-pass-school-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--slate-900);
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.01em;
}

.gate-pass-school-subtitle {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem 0;
}

.gate-pass-term-badge {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--slate-100);
  color: var(--slate-700);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

.gate-pass-code-box {
  background: var(--slate-900);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  text-align: center;
}

.gate-pass-code-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-400);
}

.gate-pass-code-val {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-family: monospace;
}

.gate-pass-barcode-strip {
  font-family: monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--slate-400);
  margin-top: 0.2rem;
}

.gate-pass-divider {
  height: 2px;
  background: var(--slate-200);
  margin: 1.25rem 0;
}

.gate-pass-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .gate-pass-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.gate-pass-field-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.gate-pass-section-box {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-top: 1rem;
}

.gate-pass-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--slate-700);
  letter-spacing: 0.04em;
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

.gate-pass-override-box {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin-top: 1rem;
}

.gate-pass-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 2rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.gate-pass-sig-block {
  min-width: 220px;
}

.gate-pass-sig-line {
  width: 100%;
  height: 1px;
  background: var(--slate-400);
  margin-bottom: 0.5rem;
}

.gate-pass-stamp-circle {
  width: 100px;
  height: 100px;
  border: 2px dashed var(--primary-600);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--primary-700);
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0.75;
}

.gate-pass-notice {
  font-size: 0.7rem;
  color: var(--slate-400);
  text-align: center;
  margin-top: 1.5rem;
  border-top: 1px solid var(--slate-200);
  padding-top: 0.75rem;
}

/* Sizing Helpers */
.w-70-px { width: 70px !important; }
.w-120-px { width: 120px !important; }
.fs-10 { font-size: 0.65rem !important; }
.fs-11 { font-size: 0.7rem !important; }
.fs-12 { font-size: 0.75rem !important; }
.fs-13 { font-size: 0.82rem !important; }
.fs-14 { font-size: 0.88rem !important; }
.fs-15 { font-size: 0.94rem !important; }
.fs-16 { font-size: 1rem !important; }
.fs-18 { font-size: 1.15rem !important; }
.fs-20 { font-size: 1.25rem !important; }
.fs-22 { font-size: 1.4rem !important; }
.fs-24 { font-size: 1.55rem !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.table-row-highlight { background-color: var(--primary-50) !important; }
.cursor-pointer { cursor: pointer !important; }

/* ==========================================================================
   Student Photo Avatars & Responsive Capture Widget
   ========================================================================== */

.student-avatar-thumb {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--slate-200);
  background-color: var(--slate-100);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  display: inline-block;
  vertical-align: middle;
}

.student-avatar-fallback {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  background: linear-gradient(135deg, var(--primary-100), var(--primary-200, #c7d2fe));
  color: var(--primary-800);
  border: 2px solid var(--primary-300, #a5b4fc);
  user-select: none;
  vertical-align: middle;
}

.student-avatar-fallback-boy {
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  color: #0369a1;
  border-color: #7dd3fc;
}

.student-avatar-fallback-girl {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #be185d;
  border-color: #f472b6;
}

.student-avatar-lg {
  width: 100px;
  height: 100px;
  min-width: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--card-bg, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-color: var(--slate-100);
  display: block;
}

.student-avatar-fallback-lg {
  width: 100px;
  height: 100px;
  min-width: 100px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 2rem;
  background: linear-gradient(135deg, var(--primary-100), var(--primary-200, #c7d2fe));
  color: var(--primary-800);
  border: 4px solid var(--card-bg, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  user-select: none;
}

/* Form Photo Capture Box */
.photo-capture-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  background: var(--slate-50);
  border: 2px dashed var(--slate-300);
  border-radius: 12px;
  gap: 1rem;
  width: 100%;
}

.photo-preview-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--primary-500);
  background: var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.photo-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-preview-placeholder {
  font-size: 2.75rem;
  color: var(--slate-400);
  user-select: none;
}

.photo-action-btn-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.photo-action-btn {
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}

.photo-badge-status {
  font-size: 0.75rem;
  color: var(--slate-500);
}

@media (min-width: 640px) {
  .photo-action-btn-group {
    flex-direction: row;
    justify-content: center;
    width: auto;
  }
}