/* ============================================================
   Alumni Professional Details Update Management System
   Main Stylesheet – Production Quality
   ============================================================
   Tailwind CSS CDN (include in HTML):
   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

   Chart.js CDN (include in HTML if needed):
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. GOOGLE FONTS – Poppins
   ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ────────────────────────────────────────────────────────────
   2. TAILWIND DIRECTIVES (Disabled for Vanilla CSS compatibility)
   ──────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────
   3. CSS CUSTOM PROPERTIES (DESIGN SYSTEM)
   ──────────────────────────────────────────────────────────── */
:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #DBEAFE;
  --secondary: #0F172A;
  --bg-white: #FFFFFF;
  --bg-light: #F8FAFC;
  --text-dark: #1E293B;
  --text-muted: #64748B;
  --border: #E2E8F0;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --navbar-height: 64px;
  --transition-speed: 0.3s;
}

/* ────────────────────────────────────────────────────────────
   4. BASE / RESET
   ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-y: auto;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: var(--primary);
  transition: color var(--transition-speed) ease;
}

a:hover {
  color: var(--primary-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────
   5. SCROLLBAR STYLING
   ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 10px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

/* ────────────────────────────────────────────────────────────
   6. GLASS CARD (Login, modals, etc.)
   ──────────────────────────────────────────────────────────── */
.glass-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.glass-card-dark {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
}

/* ────────────────────────────────────────────────────────────
   7. SIDEBAR
   ──────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--secondary);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  transition: width var(--transition-speed) ease, transform var(--transition-speed) ease;
  overflow: hidden;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  min-height: var(--navbar-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-brand-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary), #7C3AED);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.sidebar-brand-text {
  opacity: 1;
  transition: opacity var(--transition-speed) ease;
}

.sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 8px 16px;
  flex-shrink: 0;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 12px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.sidebar-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
  padding: 16px 12px 6px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 2px 0;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.sidebar-item.active {
  background: rgba(37, 99, 235, 0.2);
  color: #93C5FD;
}

.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}

.sidebar-item i,
.sidebar-item svg,
.sidebar-item .icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.sidebar-item .badge {
  margin-left: auto;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--danger);
  color: #fff;
  flex-shrink: 0;
}

.sidebar-item-text {
  opacity: 1;
  transition: opacity var(--transition-speed) ease;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}

.sidebar-user:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #FFFFFF;
}

.sidebar-user-role {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Sidebar collapsed state (desktop) */
.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed) !important;
}

.sidebar-collapsed .sidebar-brand-text,
.sidebar-collapsed .sidebar-item-text,
.sidebar-collapsed .sidebar-label,
.sidebar-collapsed .sidebar-user-info,
.sidebar-collapsed .sidebar-user-name,
.sidebar-collapsed .sidebar-user-role,
.sidebar-collapsed .sidebar-item .badge,
.sidebar-collapsed .nav-item-text,
.sidebar-collapsed .nav-section-text,
.sidebar-collapsed .nav-item .badge,
.sidebar-collapsed .sidebar-item i::after,
.sidebar-collapsed .sidebar-item svg::after,
.sidebar-collapsed .sidebar-item .fa-chevron-down {
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0 !important;
  margin: 0 !important;
  display: none !important;
  overflow: hidden;
}

.sidebar-collapsed .submenu {
  padding-left: 0 !important;
}
.sidebar-collapsed .submenu {
  display: none !important;
}

.sidebar-collapsed .submenu .sidebar-item {
  padding: 10px 0;
  justify-content: center;
}

.sidebar-collapsed .sidebar-item,
.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 10px 0;
}

.sidebar-collapsed .sidebar-item i,
.sidebar-collapsed .sidebar-item svg,
.sidebar-collapsed .sidebar-item .icon,
.sidebar-collapsed .nav-item i {
  margin: 0;
}

.sidebar-collapsed .sidebar-brand {
  display: none !important;
}

.sidebar-collapsed .sidebar-header {
  padding: 18px 0;
  justify-content: center;
}

.sidebar-collapsed .sidebar-user {
  justify-content: center;
  padding: 8px 0;
}

.sidebar-collapsed .sidebar-user-avatar {
  margin: 0;
}

.sidebar-collapsed .sidebar-divider {
  margin: 8px 12px;
}

/* Sidebar toggle button */
.sidebar-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1035;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
  pointer-events: none;
}

.sidebar-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* ────────────────────────────────────────────────────────────
   8. MAIN CONTENT / PAGE WRAPPER
   ──────────────────────────────────────────────────────────── */
.page-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left var(--transition-speed) ease;
}

.sidebar-collapsed .page-wrapper,
.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed) !important;
}

.page-content {
  padding-top: var(--navbar-height);
  padding: calc(var(--navbar-height) + 24px) 32px 32px;
  min-height: 100vh;
}

/* ────────────────────────────────────────────────────────────
   9. TOP NAVBAR
   ──────────────────────────────────────────────────────────── */
.top-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-width);
  z-index: 1030;
  height: var(--navbar-height);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  transition: left var(--transition-speed) ease;
  box-shadow: var(--shadow-sm);
}

.sidebar-collapsed .top-navbar {
  left: var(--sidebar-collapsed);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-search {
  position: relative;
  width: 320px;
}

.navbar-search .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.95rem;
  pointer-events: none;
}

.navbar-search input {
  width: 100%;
  padding: 9px 16px 9px 40px;
  border: 1px solid var(--border);
  border-radius: 50px;
  background: var(--bg-light);
  color: var(--text-dark);
  font-size: 0.85rem;
  font-family: 'Poppins', sans-serif;
  transition: all 0.2s ease;
  outline: none;
}

.navbar-search input:focus {
  border-color: var(--primary);
  background: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.navbar-search input::placeholder {
  color: var(--text-muted);
}

.navbar-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  font-size: 1.15rem;
}

.navbar-btn:hover {
  background: var(--bg-light);
  color: var(--text-dark);
}

.navbar-btn .notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--bg-white);
}

.navbar-btn .notification-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-white);
}

.notification-dropdown,
.notification-menu,
.notification-list,
.notification-body,
#notificationDropdown,
#notificationListContainer,
#notifMenu {
  max-height: 380px !important;
  overflow-y: auto !important;
  scroll-behavior: smooth;
}

.navbar-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.2s ease;
  border: none;
  background: transparent;
  font-family: 'Poppins', sans-serif;
}

.navbar-profile:hover {
  background: var(--bg-light);
}

.navbar-profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.navbar-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.navbar-profile-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dark);
}

/* Hamburger for mobile */
.navbar-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-dark);
  cursor: pointer;
  font-size: 1.3rem;
  transition: background 0.2s ease;
}

.navbar-hamburger:hover {
  background: var(--bg-light);
}

/* ────────────────────────────────────────────────────────────
   10. PAGE HEADER / BREADCRUMBS
   ──────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-header-left h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.3;
}

.page-header-left p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--primary);
}

.breadcrumb .separator {
  color: #CBD5E1;
  font-size: 0.7rem;
}

.breadcrumb .current {
  color: var(--text-dark);
  font-weight: 500;
}

/* ────────────────────────────────────────────────────────────
   11. DASHBOARD CARDS
   ──────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  overflow: hidden;
}

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

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.card-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-dark);
}

.card-body {
  padding: 22px;
}

.card-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-light);
}

/* Dashboard stat cards */
.stat-card {
  background: var(--bg-white);
  border-radius: var(--radius);
  padding: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

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

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

.stat-card-icon.blue {
  background: var(--primary-light);
  color: var(--primary);
}

.stat-card-icon.green {
  background: #D1FAE5;
  color: var(--success);
}

.stat-card-icon.yellow {
  background: #FEF3C7;
  color: var(--warning);
}

.stat-card-icon.red {
  background: #FEE2E2;
  color: var(--danger);
}

.stat-card-icon.purple {
  background: #EDE9FE;
  color: #7C3AED;
}

.stat-card-content {
  flex: 1;
  min-width: 0;
}

.stat-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 0;
}

.stat-card-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.stat-card-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 20px;
}

.stat-card-change.up {
  background: #D1FAE5;
  color: #059669;
}

.stat-card-change.down {
  background: #FEE2E2;
  color: #DC2626;
}

/* ────────────────────────────────────────────────────────────
   12. BUTTONS
   ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus {
  outline: none;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.8rem;
}

.btn-lg {
  padding: 14px 30px;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
}

/* Ripple effect */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0%;
  transition: background-size 0.4s, opacity 0.4s;
  opacity: 0;
  pointer-events: none;
}

.btn:active::after {
  background-size: 1000%;
  opacity: 1;
  transition: none;
}

/* Primary button */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #3B82F6, var(--primary-dark));
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
  color: #FFFFFF;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Secondary button */
.btn-secondary {
  background: var(--bg-white);
  color: var(--text-dark);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--bg-light);
  border-color: #CBD5E1;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Outline button */
.btn-outline, #saveDraftBtn {
  background: transparent;
  color: var(--primary, #2563EB) !important;
  border: 1.5px solid var(--primary, #2563EB);
  transition: all 0.2s ease;
}

.btn-outline:hover, .btn-outline:focus, .btn-outline:active,
#saveDraftBtn:hover, #saveDraftBtn:focus, #saveDraftBtn:active {
  background: var(--primary, #2563EB) !important;
  color: #FFFFFF !important;
  border-color: var(--primary, #2563EB) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.btn-outline:hover *, .btn-outline:focus *, .btn-outline:active *,
#saveDraftBtn:hover *, #saveDraftBtn:focus *, #saveDraftBtn:active * {
  color: #FFFFFF !important;
}

/* Danger button */
.btn-danger {
  background: linear-gradient(135deg, var(--danger), #DC2626);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.btn-danger:hover {
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
  transform: translateY(-1px);
  color: #FFFFFF;
}

/* Success button */
.btn-success {
  background: linear-gradient(135deg, var(--success), #059669);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
  color: #FFFFFF;
}

/* Warning button */
.btn-warning {
  background: linear-gradient(135deg, var(--warning), #D97706);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.btn-warning:hover {
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
  color: #FFFFFF;
}

/* Ghost button */
.btn-ghost {
  background: transparent;
  color: var(--text-dark);
  border: none;
}

.btn-ghost:hover {
  background: var(--bg-light);
}

/* Icon button */
.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Button group */
.btn-group {
  display: inline-flex;
  gap: 0;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.btn-group .btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.btn-group .btn+.btn {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* ────────────────────────────────────────────────────────────
   13. FORMS – FLOATING LABELS & INPUTS
   ──────────────────────────────────────────────────────────── */
.form-group {
  position: relative;
  margin-bottom: 22px;
}

.form-group .floating-label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: var(--text-muted);
  pointer-events: none;
  transition: all 0.2s ease;
  background: transparent;
  padding: 0 4px;
  font-family: 'Poppins', sans-serif;
}

.form-group.floating textarea~.floating-label {
  top: 18px;
  transform: none;
}

.form-control {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text-dark);
  font-size: 0.875rem;
  font-family: 'Poppins', sans-serif;
  transition: all 0.2s ease;
  outline: none;
}

.form-control:hover {
  border-color: #CBD5E1;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-control::placeholder {
  color: transparent;
}

.form-control:focus::placeholder {
  color: #CBD5E1;
}

select.form-control ~ .floating-label,
.form-control:not(:placeholder-shown)~.floating-label,
.form-control:focus~.floating-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.7rem;
  background: var(--bg-white);
  color: var(--primary);
  padding: 0 6px;
}

.form-control.error {
  border-color: var(--danger);
}

.form-control.error~.floating-label {
  color: var(--danger);
}

.form-control.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.form-error {
  font-size: 0.75rem;
  color: var(--danger);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Select styling */
select, .filter-select, .form-select {
  background-color: #ffffff;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--text-dark, #1E293B);
  outline: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

select:hover, .filter-select:hover, .form-select:hover {
  border-color: var(--primary, #2563EB);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

select:focus, .filter-select:focus, .form-select:focus {
  border-color: var(--primary, #2563EB);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Textarea */
textarea.form-control {
  min-height: 100px;
  resize: vertical;
  padding-top: 18px;
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-dark);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.form-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.form-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-switch .slider {
  width: 44px;
  height: 24px;
  background: #CBD5E1;
  border-radius: 30px;
  transition: all 0.3s ease;
  position: relative;
  flex-shrink: 0;
}

.form-switch .slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.form-switch input:checked+.slider {
  background: var(--primary);
}

.form-switch input:checked+.slider::before {
  left: 23px;
}

/* Password visibility toggle */
.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.password-toggle:hover {
  color: var(--text-dark);
}

.form-group.floating .password-toggle {
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* ────────────────────────────────────────────────────────────
   14. TABLES
   ──────────────────────────────────────────────────────────── */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

.table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
  vertical-align: middle;
}

.table tbody tr {
  transition: background 0.15s ease;
}

.table tbody tr:hover {
  background: #F1F5F9;
}

.table tbody tr:nth-child(even) {
  background: #FAFBFC;
}

.table tbody tr:nth-child(even):hover {
  background: #F1F5F9;
}

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

.table-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.table-actions .btn {
  padding: 4px 10px;
  font-size: 0.75rem;
}

/* Table sortable headers */
.table th.sortable {
  cursor: pointer;
  user-select: none;
}

.table th.sortable:hover {
  color: var(--primary);
}

.table th.sortable::after {
  content: '';
  margin-left: 4px;
  display: inline-block;
  vertical-align: middle;
}

/* Table empty state */
.table-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

.table-empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.4;
}

.table-empty h4 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin: 0 0 4px;
}

.table-empty p {
  font-size: 0.85rem;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────
   15. BADGES / TAGS
   ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}


.leader-badge {
  background: #EEF2FF;
  color: #4F46E5 !important;
  border: 1px solid #C7D2FE;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
  gap: 3px !important;
}

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

.badge-success {
  background: #D1FAE5;
  color: #059669;
}

.badge-warning {
  background: #FEF3C7;
  color: #D97706;
}

.badge-danger {
  background: #FEE2E2;
  color: #DC2626;
}

.badge-info {
  background: #DBEAFE;
  color: #2563EB;
}

.badge-light {
  background: #F1F5F9;
  color: #64748B;
}

.badge-dark {
  background: #1E293B;
  color: #FFFFFF;
}

.badge-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.badge-dot.green {
  background: var(--success);
}

.badge-dot.yellow {
  background: var(--warning);
}

.badge-dot.red {
  background: var(--danger);
}

.badge-dot.blue {
  background: var(--primary);
}

/* ────────────────────────────────────────────────────────────
   16. PROGRESS BARS
   ──────────────────────────────────────────────────────────── */
.progress {
  width: 100%;
  height: 8px;
  background: #E2E8F0;
  border-radius: 20px;
  overflow: hidden;
}

.progress-sm {
  height: 4px;
}

.progress-lg {
  height: 12px;
}

.progress-bar {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--primary), #7C3AED);
  position: relative;
  overflow: hidden;
  transition: width 0.6s ease;
}

.progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.progress-bar.green {
  background: linear-gradient(90deg, var(--success), #34D399);
}

.progress-bar.yellow {
  background: linear-gradient(90deg, var(--warning), #FBBF24);
}

.progress-bar.red {
  background: linear-gradient(90deg, var(--danger), #F87171);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.progress-label span:last-child {
  font-weight: 600;
  color: var(--text-dark);
}

/* ────────────────────────────────────────────────────────────
   17. MODAL
   ──────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-overlay.show .modal {
  transform: scale(1) translateY(0);
}

.modal-sm {
  max-width: 400px;
}

.modal-lg {
  max-width: 700px;
}

.modal-xl {
  max-width: 900px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.modal-header h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-dark);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--bg-light);
  color: var(--text-dark);
}

.modal-body {
  padding: 20px 24px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* ────────────────────────────────────────────────────────────
   18. TOAST NOTIFICATIONS
   ──────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 14px 18px;
  min-width: 320px;
  max-width: 420px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transform: translateX(120%);
  animation: toastSlideIn 0.4s ease forwards;
  border-left: 4px solid var(--primary);
}

.toast.success {
  border-left-color: var(--success);
}

.toast.warning {
  border-left-color: var(--warning);
}

.toast.danger {
  border-left-color: var(--danger);
}

.toast-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  color: #fff;
  margin-top: 1px;
}

.toast.success .toast-icon {
  background: var(--success);
}

.toast.warning .toast-icon {
  background: var(--warning);
}

.toast.danger .toast-icon {
  background: var(--danger);
}

.toast:not(.success):not(.warning):not(.danger) .toast-icon {
  background: var(--primary);
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.toast-message {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.toast-close:hover {
  color: var(--text-dark);
}

@keyframes toastSlideIn {
  0% {
    transform: translateX(120%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

.toast.exit {
  animation: toastSlideOut 0.3s ease forwards;
}

/* ────────────────────────────────────────────────────────────
   19. SKELETON LOADING
   ──────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-text {
  height: 14px;
  margin-bottom: 10px;
  width: 100%;
}

.skeleton-text-sm {
  height: 10px;
  width: 60%;
}

.skeleton-text-lg {
  height: 20px;
  width: 80%;
}

.skeleton-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.skeleton-thumbnail {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
}

.skeleton-card {
  height: 140px;
  border-radius: var(--radius);
}

.skeleton-table-row {
  height: 48px;
  margin-bottom: 4px;
  border-radius: 4px;
}

/* ────────────────────────────────────────────────────────────
   20. DROPDOWN
   ──────────────────────────────────────────────────────────── */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1100 !important;
  min-width: 200px;
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s ease;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu-left {
  right: auto;
  left: -250px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: background 0.15s ease;
  border: none;
  background: none;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  text-align: left;
}

.dropdown-item:hover {
  background: var(--bg-light);
  color: var(--text-dark);
}

.dropdown-item i,
.dropdown-item svg {
  color: var(--text-muted);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.dropdown-item.danger {
  color: var(--danger);
}

.dropdown-item.danger i {
  color: var(--danger);
}

.dropdown-item.danger:hover {
  background: #FEE2E2;
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

.dropdown-header {
  padding: 8px 14px 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.dropdown-toggle {
  cursor: pointer;
}

/* ────────────────────────────────────────────────────────────
   21. PAGINATION
   ──────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
}

.pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Poppins', sans-serif;
}

.pagination-item:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.pagination-item.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  cursor: default;
}

.pagination-item.active:hover {
  background: var(--primary-dark);
  color: #FFFFFF;
}

.pagination-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-info {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: 12px;
}

/* ────────────────────────────────────────────────────────────
   22. FILTER CHIPS
   ──────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--bg-light);
  color: var(--text-dark);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.chip.active {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

.chip .close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.6rem;
  background: transparent;
  transition: background 0.2s ease;
  cursor: pointer;
  border: none;
  color: inherit;
  padding: 0;
}

.chip .close:hover {
  background: rgba(0, 0, 0, 0.1);
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ────────────────────────────────────────────────────────────
   23. SEARCH BAR (Page-level)
   ──────────────────────────────────────────────────────────── */
.search-bar {
  position: relative;
  width: 100%;
  max-width: 480px;
}

.search-bar .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
  pointer-events: none;
}

.search-bar input {
  width: 100%;
  padding: 11px 16px 11px 42px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text-dark);
  font-size: 0.875rem;
  font-family: 'Poppins', sans-serif;
  transition: all 0.2s ease;
  outline: none;
}

.search-bar input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-bar input::placeholder {
  color: var(--text-muted);
}

/* ────────────────────────────────────────────────────────────
   24. ALERTS / NOTIFICATIONS
   ──────────────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin-bottom: 16px;
  border: 1px solid transparent;
}

.alert-icon {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 1.1rem;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.alert-primary {
  background: var(--primary-light);
  border-color: #BFDBFE;
  color: #1E40AF;
}

.alert-success {
  background: #D1FAE5;
  border-color: #A7F3D0;
  color: #065F46;
}

.alert-warning {
  background: #FEF3C7;
  border-color: #FDE68A;
  color: #92400E;
}

.alert-danger {
  background: #FEE2E2;
  border-color: #FECACA;
  color: #991B1B;
}

.alert-info {
  background: #E0F2FE;
  border-color: #BAE6FD;
  color: #075985;
}

/* ────────────────────────────────────────────────────────────
   25. PROFILE AVATAR
   ──────────────────────────────────────────────────────────── */
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  color: #FFFFFF;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), #7C3AED);
}

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

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
}

.avatar-md {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

.avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 1.3rem;
}

.avatar-xl {
  width: 88px;
  height: 88px;
  font-size: 1.8rem;
}

.avatar-2xl {
  width: 120px;
  height: 120px;
  font-size: 2.5rem;
}

.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group .avatar {
  border: 2px solid var(--bg-white);
  margin-left: -10px;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

.avatar-group .avatar-more {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-light);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: -10px;
}

/* ────────────────────────────────────────────────────────────
   26. CHART CONTAINER
   ──────────────────────────────────────────────────────────── */
.chart-container {
  position: relative;
  width: 100%;
  height: 300px;
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ────────────────────────────────────────────────────────────
   27. LOADING SPINNER / SCREEN
   ──────────────────────────────────────────────────────────── */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity 0.5s ease;
}

.loading-screen.hide {
  opacity: 0;
  pointer-events: none;
}

.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner-sm {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

.spinner-lg {
  width: 60px;
  height: 60px;
  border-width: 5px;
}

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

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

.spinner-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.spinner-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  animation: dotsBounce 1.4s ease-in-out infinite both;
}

.spinner-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.spinner-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.spinner-dots span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes dotsBounce {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

.loading-text {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ────────────────────────────────────────────────────────────
   28. 404 PAGE STYLES
   ──────────────────────────────────────────────────────────── */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
  padding: 40px 20px;
}

.error-code {
  font-size: 8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), #7C3AED);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin: 0;
}

.error-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 8px 0 4px;
}

.error-message {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 400px;
  margin: 0 0 28px;
}

.error-illustration {
  font-size: 6rem;
  margin-bottom: 20px;
  opacity: 0.7;
}

/* ────────────────────────────────────────────────────────────
   29. SESSION TIMEOUT POPUP
   ──────────────────────────────────────────────────────────── */
.session-timeout-overlay {
  position: fixed;
  inset: 0;
  z-index: 1070;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.session-timeout-overlay.show {
  opacity: 1;
  visibility: visible;
}

.session-timeout-card {
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.session-timeout-overlay.show .session-timeout-card {
  transform: scale(1);
}

.session-timeout-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 16px;
  color: var(--warning);
}

.session-timeout-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text-dark);
}

.session-timeout-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.session-timeout-timer {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--danger);
  margin: 12px 0 20px;
  font-variant-numeric: tabular-nums;
}

.session-timeout-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ────────────────────────────────────────────────────────────
   30. UTILITY CLASSES
   ──────────────────────────────────────────────────────────── */
.text-primary {
  color: var(--primary);
}

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-danger {
  color: var(--danger);
}

.text-muted {
  color: var(--text-muted);
}

.text-dark {
  color: var(--text-dark);
}

.bg-primary {
  background: var(--primary);
}

.bg-primary-light {
  background: var(--primary-light);
}

.bg-success {
  background: var(--success);
}

.bg-warning {
  background: var(--warning);
}

.bg-danger {
  background: var(--danger);
}

.bg-light {
  background: var(--bg-light);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gap-xs {
  gap: 4px;
}

.gap-sm {
  gap: 8px;
}

.gap-md {
  gap: 16px;
}

.gap-lg {
  gap: 24px;
}

.gap-xl {
  gap: 32px;
}

/* ────────────────────────────────────────────────────────────
   31. PAGE TRANSITIONS / FADE-IN
   ──────────────────────────────────────────────────────────── */
.fade-in,
.fade-in-up,
.fade-in-down {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered children */
.stagger-children>* {
  opacity: 0;
  animation: fadeInUp 0.4s ease forwards;
}

.stagger-children>*:nth-child(1) {
  animation-delay: 0.05s;
}

.stagger-children>*:nth-child(2) {
  animation-delay: 0.1s;
}

.stagger-children>*:nth-child(3) {
  animation-delay: 0.15s;
}

.stagger-children>*:nth-child(4) {
  animation-delay: 0.2s;
}

.stagger-children>*:nth-child(5) {
  animation-delay: 0.25s;
}

.stagger-children>*:nth-child(6) {
  animation-delay: 0.3s;
}

.stagger-children>*:nth-child(7) {
  animation-delay: 0.35s;
}

.stagger-children>*:nth-child(8) {
  animation-delay: 0.4s;
}

.stagger-children>*:nth-child(9) {
  animation-delay: 0.45s;
}

.stagger-children>*:nth-child(10) {
  animation-delay: 0.5s;
}

/* ────────────────────────────────────────────────────────────
   32. EMPTY STATE
   ──────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-state-icon {
  font-size: 4rem;
  color: var(--border);
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-state h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 4px;
}

.empty-state p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 20px;
  max-width: 320px;
}

/* ────────────────────────────────────────────────────────────
   33. TOOLTIP
   ──────────────────────────────────────────────────────────── */
.tooltip {
  position: relative;
  display: inline-flex;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--secondary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  font-family: 'Poppins', sans-serif;
}

.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

/* ────────────────────────────────────────────────────────────
   34. TABS
   ──────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab-item {
  padding: 12px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  font-family: 'Poppins', sans-serif;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
}

.tab-item:hover {
  color: var(--text-dark);
}

.tab-item.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* ────────────────────────────────────────────────────────────
   35. DIVIDER
   ──────────────────────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 20px 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ────────────────────────────────────────────────────────────
   36. ACCORDION
   ──────────────────────────────────────────────────────────── */
.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--bg-light);
  transition: background 0.2s ease;
  user-select: none;
}

.accordion-header:hover {
  background: #F1F5F9;
}

.accordion-header .chevron {
  transition: transform 0.3s ease;
  color: var(--text-muted);
}

.accordion-item.open .accordion-header .chevron {
  transform: rotate(180deg);
}

.accordion-body {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.accordion-item.open .accordion-body {
  padding: 16px 18px;
  max-height: 500px;
}

/* ────────────────────────────────────────────────────────────
   37. RESPONSIVE BREAKPOINTS
   ──────────────────────────────────────────────────────────── */

/* Tablets and below (< 1024px) */
@media (max-width: 1023px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width);
  }

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

  .sidebar-collapsed .sidebar {
    width: var(--sidebar-width);
  }

  .sidebar-overlay {
    display: block;
  }

  .page-wrapper {
    margin-left: 0;
  }

  .sidebar-collapsed .page-wrapper {
    margin-left: 0;
  }

  .top-navbar {
    left: 0;
  }

  .sidebar-collapsed .top-navbar {
    left: 0;
  }

  .navbar-hamburger {
    display: flex;
  }

  .page-content {
    padding: calc(var(--navbar-height) + 20px) 20px 28px;
  }

  .navbar-search {
    width: 200px;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .sidebar {
    width: 100%;
    max-width: 300px;
  }

  .page-content {
    padding: calc(var(--navbar-height) + 16px) 16px 24px;
  }

  .top-navbar {
    padding: 0 16px;
  }

  .navbar-search {
    display: none;
  }

  .navbar-profile-name {
    display: none;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header-left h1 {
    font-size: 1.25rem;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-card-value {
    font-size: 1.4rem;
  }

  .card-body {
    padding: 16px;
  }

  .card-header {
    padding: 14px 16px;
  }

  .modal {
    max-width: 100%;
    margin: 10px;
  }

  .toast {
    min-width: auto;
    max-width: calc(100vw - 32px);
  }

  .toast-container {
    right: 16px;
    left: 16px;
  }

  .table th,
  .table td {
    padding: 10px 12px;
  }

  .table-container {
    margin: 0 -16px;
    padding: 0 16px;
    width: calc(100% + 32px);
  }

  .pagination {
    flex-wrap: wrap;
  }

  .pagination-info {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }

  .session-timeout-card {
    margin: 0 16px;
    padding: 28px 24px 24px;
  }

  .session-timeout-timer {
    font-size: 2rem;
  }

  .error-code {
    font-size: 5rem;
  }

  .btn-lg {
    padding: 12px 24px;
    font-size: 0.9rem;
  }

  .search-bar {
    max-width: 100%;
  }

  .chart-container {
    height: 220px;
  }
}

/* Small mobile (< 480px) */
@media (max-width: 479px) {
  .page-content {
    padding: calc(var(--navbar-height) + 12px) 12px 20px;
  }

  .stat-card-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .stat-card-value {
    font-size: 1.2rem;
  }

  .btn {
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  .btn-sm {
    padding: 4px 10px;
    font-size: 0.75rem;
  }

  .modal-header {
    padding: 16px 18px 0;
  }

  .modal-body {
    padding: 16px 18px;
  }

  .modal-footer {
    padding: 12px 18px;
  }

  .table th,
  .table td {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }

  .avatar-xl {
    width: 64px;
    height: 64px;
    font-size: 1.4rem;
  }

  .empty-state {
    padding: 40px 16px;
  }

  .empty-state-icon {
    font-size: 3rem;
  }
}

/* Large screens (> 1400px) */
@media (min-width: 1400px) {
  .page-content {
    padding: calc(var(--navbar-height) + 28px) 48px 40px;
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* ────────────────────────────────────────────────────────────
   38. PRINT STYLES
   ──────────────────────────────────────────────────────────── */
@media print {

  .sidebar,
  .top-navbar,
  .toast-container,
  .modal-overlay,
  .session-timeout-overlay,
  .loading-screen,
  .navbar-btn,
  .btn {
    display: none !important;
  }

  .page-wrapper {
    margin-left: 0 !important;
  }

  .page-content {
    padding: 20px !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }

  body {
    background: #fff;
    font-size: 11pt;
  }
}

/* ────────────────────────────────────────────────────────────
    39. LOGIN PAGE STYLES
    ──────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.login-illustration {
  width: 55%;
  background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 40px;
  overflow: hidden;
}

.login-illustration .college-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: 0.5px;
}

.login-illustration .illustration-icons {
  position: relative;
  width: 320px;
  height: 320px;
}

.login-illustration .illustration-icons .icon-circle {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.15);
  animation: float 6s ease-in-out infinite;
}

.login-illustration .illustration-icons .icon-circle:nth-child(1) {
  top: 20px;
  left: 40px;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  animation-delay: 0s;
}

.login-illustration .illustration-icons .icon-circle:nth-child(2) {
  top: 0;
  right: 40px;
  background: linear-gradient(135deg, #7C3AED, #8B5CF6);
  animation-delay: 1s;
}

.login-illustration .illustration-icons .icon-circle:nth-child(3) {
  bottom: 40px;
  left: 20px;
  background: linear-gradient(135deg, #10B981, #34D399);
  animation-delay: 2s;
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
}

.login-illustration .illustration-icons .icon-circle:nth-child(4) {
  bottom: 10px;
  right: 60px;
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
  animation-delay: 0.5s;
  width: 56px;
  height: 56px;
  font-size: 1.3rem;
}

.login-illustration .illustration-icons .icon-circle:nth-child(5) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  font-size: 2.5rem;
  animation-delay: 1.5s;
  box-shadow: 0 12px 48px rgba(37, 99, 235, 0.25);
}

.login-illustration .illustration-icons .icon-circle:nth-child(6) {
  top: 100px;
  right: 10px;
  background: linear-gradient(135deg, #EC4899, #F472B6);
  animation-delay: 2.5s;
  width: 48px;
  height: 48px;
  font-size: 1.1rem;
}

.login-illustration .illustration-icons .icon-circle:nth-child(7) {
  bottom: 90px;
  right: 0;
  background: linear-gradient(135deg, #06B6D4, #22D3EE);
  animation-delay: 1.8s;
  width: 52px;
  height: 52px;
  font-size: 1.2rem;
}

.login-illustration .illustration-text {
  margin-top: 48px;
  text-align: center;
  max-width: 400px;
}

.login-illustration .illustration-text h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.login-illustration .illustration-text p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* Login form right side */
.login-form-wrapper {
  width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #F8FAFC;
  position: relative;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 40px 36px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: fadeInUp 0.6s ease;
}

.login-card .logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.login-card .logo-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
}

.login-card .login-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
  margin: 0 0 6px;
  line-height: 1.4;
}

.login-card .login-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 28px;
}

.login-card .form-group {
  margin-bottom: 20px;
}

.login-card .form-group .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 2;
}

.login-card .form-group .form-control {
  padding-left: 42px;
}

.login-card .form-group .floating-label {
  left: 42px;
}

.login-card .form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.login-card .form-options .form-check {
  font-size: 0.8rem;
  color: var(--text-dark);
}

.login-card .form-options .forgot-link {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 500;
  transition: color 0.2s ease;
}

.login-card .form-options .forgot-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.login-card .btn-login {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
  position: relative;
  overflow: hidden;
}

.login-card .btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.4);
}

.login-card .btn-login:active {
  transform: translateY(0);
}

.login-card .btn-login:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.login-card .btn-login .btn-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.login-card .btn-login.loading .btn-spinner {
  display: inline-block;
}

.login-card .btn-login.loading .btn-text {
  opacity: 0.8;
}

.login-card .form-select {
  padding-left: 42px;
}

.login-card .form-group.select-group .input-icon {
  z-index: 3;
}

/* Loading overlay for login */
.login-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.login-loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.login-loading-overlay .loading-spinner {
  width: 56px;
  height: 56px;
  border: 5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.login-loading-overlay .loading-text {
  font-size: 1rem;
  color: var(--text-dark);
  font-weight: 500;
}

.login-loading-overlay .loading-subtext {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* Responsive for login page */
@media (max-width: 1023px) {
  .login-illustration {
    display: none;
  }

  .login-form-wrapper {
    width: 100%;
    padding: 24px 20px;
    min-height: 100vh;
  }

  .login-card {
    max-width: 400px;
    padding: 32px 28px;
  }
}

@media (max-width: 479px) {
  .login-card {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .login-card .login-title {
    font-size: 1rem;
  }

  .login-card .logo-circle {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}

/* Disable all animations and transitions globally for instant UI response (disabled for dev) */
/* 
*,
*::before,
*::after {
  transition: none !important;
  animation: none !important;
}

.stagger-children>* {
  opacity: 1 !important;
} 
*/

/* ────────────────────────────────────────────────────────────
   CIRCULAR RIPPLE THEME TRANSITION ANIMATION
   ──────────────────────────────────────────────────────────── */
.theme-ripple-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
  overflow: hidden;
}

.theme-ripple-circle {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: themeRippleExpand 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes themeRippleExpand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

/* ────────────────────────────────────────────────────────────
   DARK MODE COMPONENT OVERRIDES
   ──────────────────────────────────────────────────────────── */
body.dark-mode {
  /* Admin & Team Leader variables */
  --bg-white: #1E293B;
  --bg-light: #0F172A;
  --text-dark: #F8FAFC;
  --text-muted: #94A3B8;
  --border: #334155;
  --secondary: #0B0F19;

  /* Team Member variables */
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --border-color: #334155;
  --bg-sidebar: #0B0F19;

  background-color: #0F172A !important;
  color: #F8FAFC !important;
}

body.dark-mode .top-navbar,
body.dark-mode .topbar,
body.dark-mode .page-wrapper,
body.dark-mode .main-content {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
}

body.dark-mode .card,
body.dark-mode .stat-card,
body.dark-mode .quick-action-btn,
body.dark-mode .dropdown-menu,
body.dark-mode .modal,
body.dark-mode .modal-content,
body.dark-mode .table-card {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5) !important;
}

body.dark-mode .modal-body,
body.dark-mode .modal-header,
body.dark-mode .modal-footer,
body.dark-mode #todayTasksModal .modal-body,
body.dark-mode #todayTasksModal div[style*="background:#F8FAFC"],
body.dark-mode #welcomeTourModal div[style*="background:#F8FAFC"],
body.dark-mode #reopenConfirmModal div[style*="background:#F8FAFC"] {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body.dark-mode #todayContextBanner {
  background-color: #064E3B !important;
  border-color: #059669 !important;
  color: #A7F3D0 !important;
}

body.dark-mode #todayContextBanner span,
body.dark-mode #todayContextBanner i {
  color: #A7F3D0 !important;
}

body.dark-mode #todayTasksList > div {
  background-color: #0F172A !important;
  border-color: #334155 !important;
}

body.dark-mode #tourStepContent {
  color: #E2E8F0 !important;
}

body.dark-mode #tourMotivationBanner {
  background-color: #064E3B !important;
  color: #A7F3D0 !important;
  border-left-color: #10B981 !important;
}

body.dark-mode #welcomeTourModal label,
body.dark-mode #welcomeTourModal input + span {
  color: #94A3B8 !important;
}

body.dark-mode #tourPrevBtn {
  background-color: #334155 !important;
  color: #F8FAFC !important;
  border-color: #475569 !important;
}

body.dark-mode .card-value,
body.dark-mode .quick-action-btn span,
body.dark-mode .modal-header h3,
body.dark-mode .modal-header h4,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5 {
  color: #F8FAFC !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body.dark-mode th {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
  border-bottom-color: #334155 !important;
}

body.dark-mode td {
  border-bottom-color: #334155 !important;
  color: #E2E8F0 !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: #334155 !important;
  background-color: #1E293B !important;
}

/* ── Attendance & Alumni Analysis Dark Mode Overrides ── */
body.dark-mode .attendance-section,
body.dark-mode .analysis-section {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
}

/* Ensure charts render with dark background */
body.dark-mode .chartjs-render-monitor canvas {
  background-color: #1E293B !important;
}

/* Attendance table rows */
body.dark-mode .attendance-table tbody tr {
  background-color: #1E293B !important;
}

/* Attendance table header */
body.dark-mode .attendance-table thead th {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
}

body.dark-mode .toast {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .topbar-btn,
body.dark-mode .navbar-btn {
  background: #334155 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body.dark-mode .notif-dropdown,
body.dark-mode .dropdown-menu {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body.dark-mode .notif-item,
body.dark-mode .dropdown-item {
  border-bottom-color: #334155 !important;
  color: #E2E8F0 !important;
}

body.dark-mode .notif-item:hover,
body.dark-mode .dropdown-item:hover {
  background-color: #334155 !important;
}

/* ── Sidebar ── */
body.dark-mode .sidebar,
body.dark-mode .navbar {
  background: #0B0F19 !important;
  border-right-color: #334155 !important;
}

body.dark-mode .sidebar-item,
body.dark-mode .nav-link {
  color: #CBD5E1 !important;
}

body.dark-mode .sidebar-item:hover,
body.dark-mode .sidebar-item.active {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #818CF8 !important;
}

body.dark-mode .sidebar-section-title {
  color: #64748B !important;
}

/* ── Content sections ── */
body.dark-mode .content-section,
body.dark-mode .dashboard-section {
  color: #F8FAFC !important;
}

body.dark-mode .section-header h2,
body.dark-mode .section-title {
  color: #F8FAFC !important;
}

body.dark-mode .breadcrumb-item,
body.dark-mode .breadcrumb-sep {
  color: #94A3B8 !important;
}

/* ── Form labels & helpers ── */
body.dark-mode label,
body.dark-mode .form-label {
  color: #CBD5E1 !important;
}

body.dark-mode .form-text,
body.dark-mode .text-muted {
  color: #94A3B8 !important;
}

/* ── Search bars & Input groups ── */
body.dark-mode .search-bar,
body.dark-mode .table-search,
body.dark-mode .table-actions input {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body.dark-mode .search-bar input {
  background-color: transparent !important;
  color: #F8FAFC !important;
}

body.dark-mode .search-icon {
  color: #94A3B8 !important;
}

/* ── Badges ── */
body.dark-mode .badge {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .badge-record-count {
  background: #1E293B !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body.dark-mode .leader-badge {
  background: rgba(37, 99, 235, 0.25) !important;
  color: #60A5FA !important;
  border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

/* ── Pagination ── */
body.dark-mode .pagination button,
body.dark-mode .pagination-item {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #CBD5E1 !important;
}

body.dark-mode .pagination button.active,
body.dark-mode .pagination-item.active {
  background: #4F46E5 !important;
  color: #fff !important;
  border-color: #4F46E5 !important;
}

body.dark-mode .pagination button:hover:not(:disabled),
body.dark-mode .pagination-item:hover:not(:disabled) {
  background: #334155 !important;
}

/* ── Settings & Tabs ── */
body.dark-mode .settings-tab-btn,
body.dark-mode .tab-item {
  background: #1E293B !important;
  color: #94A3B8 !important;
  border-color: #334155 !important;
}

body.dark-mode .settings-tab-btn.active,
body.dark-mode .tab-item.active {
  background: #4F46E5 !important;
  color: #fff !important;
}

/* ── Tables & Spreadsheet Headers ── */
body.dark-mode .spreadsheet-table thead,
body.dark-mode .spreadsheet-table th,
body.dark-mode #ssTableHeadRow th {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body.dark-mode .sticky-col {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
}

/* ── Avatar / profile initials ── */
body.dark-mode .member-avatar,
body.dark-mode .alumni-avatar {
  background: linear-gradient(135deg, #4F46E5, #818CF8) !important;
}

/* ── Table row hover ── */
body.dark-mode tbody tr:hover {
  background: rgba(99, 102, 241, 0.08) !important;
}

/* ── Status cards in member dashboard ── */
body.dark-mode .status-card {
  background: #1E293B !important;
  border-color: #334155 !important;
}

/* ── Live clock widget ── */
body.dark-mode #universalLiveClock {
  color: #94A3B8 !important;
}

/* ── COMPREHENSIVE DARK MODE OVERRIDES (FIX WHITE REFLECTIONS) ── */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .modal-header h3,
body.dark-mode .modal-header-left h3,
body.dark-mode #modalTitle {
  color: #F8FAFC !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode .modal-subtitle,
body.dark-mode #modalSubtitle {
  color: #CBD5E1 !important;
}

body.dark-mode .modal,
body.dark-mode .modal-content {
  background-color: #1E293B !important;
  background: #1E293B !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .modal-body,
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  background-color: #1E293B !important;
  background: #1E293B !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body.dark-mode .detail-row,
body.dark-mode .info-row,
body.dark-mode .profile-detail-item {
  border-color: #334155 !important;
  background-color: #1E293B !important;
}

body.dark-mode .info-label {
  color: #94A3B8 !important;
}

body.dark-mode .info-value {
  color: #F8FAFC !important;
}

body.dark-mode .card,
body.dark-mode .stat-card,
body.dark-mode .card-body,
body.dark-mode .table-card {
  background-color: #1E293B !important;
  background: #1E293B !important;
  border-color: #334155 !important;
}

body.dark-mode .card-header,
body.dark-mode .card-footer {
  background-color: #1E293B !important;
  background: #1E293B !important;
  border-color: #334155 !important;
}

body.dark-mode table,
body.dark-mode th,
body.dark-mode td {
  border-color: #334155 !important;
}

body.dark-mode tbody tr {
  background-color: #1E293B !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #0F172A !important;
  background: #0F172A !important;
  color: #F8FAFC !important;
}

/* ── Dark Mode Badge Color Override ── */
body.dark-mode .badge-success,
body.dark-mode .status-badge.completed {
  background-color: rgba(16, 185, 129, 0.15) !important;
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D399 !important;
}
body.dark-mode .badge-warning,
body.dark-mode .status-badge.draft {
  background-color: rgba(245, 158, 11, 0.15) !important;
  background: rgba(245, 158, 11, 0.15) !important;
  color: #FBBF24 !important;
}
body.dark-mode .badge-danger,
body.dark-mode .status-badge.pending {
  background-color: rgba(239, 68, 68, 0.15) !important;
  background: rgba(239, 68, 68, 0.15) !important;
  color: #FCA5A5 !important;
}
body.dark-mode .badge-info {
  background-color: rgba(59, 130, 246, 0.15) !important;
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60A5FA !important;
}
body.dark-mode .badge-primary {
  background-color: rgba(79, 70, 229, 0.15) !important;
  background: rgba(79, 70, 229, 0.15) !important;
  color: #818CF8 !important;
}
body.dark-mode .badge-light {
  background-color: rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94A3B8 !important;
}
body.dark-mode .badge-purple {
  background-color: rgba(139, 92, 246, 0.15) !important;
  background: rgba(139, 92, 246, 0.15) !important;
  color: #A78BFA !important;
}

/* ── Drag & Drop / Upload Zone overrides ── */
body.dark-mode .upload-zone,
body.dark-mode #uploadZone {
  background-color: #0F172A !important;
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

/* ── Inline Style Overrides ── */
body.dark-mode [style*="color:#1E293B"],
body.dark-mode [style*="color: #1E293B"],
body.dark-mode [style*="color:#0F172A"],
body.dark-mode [style*="color: #0F172A"] {
  color: #F8FAFC !important;
}
body.dark-mode [style*="color:#64748B"],
body.dark-mode [style*="color: #64748B"] {
  color: #CBD5E1 !important;
}
body.dark-mode [style*="background:#F8FAFC"],
body.dark-mode [style*="background: #F8FAFC"] {
  background-color: #0F172A !important;
  background: #0F172A !important;
}
body.dark-mode [style*="background:#FFFBEB"],
body.dark-mode [style*="background: #FFFBEB"] {
  background-color: rgba(245, 158, 11, 0.1) !important;
  background: rgba(245, 158, 11, 0.1) !important;
  color: #FBBF24 !important;
}
body.dark-mode [style*="color:#92400E"],
body.dark-mode [style*="color: #92400E"] {
  color: #FBBF24 !important;
}
body.dark-mode [style*="border:1px solid #FDE68A"],
body.dark-mode [style*="border: 1px solid #FDE68A"],
body.dark-mode [style*="border:1px solid #FCD34D"],
body.dark-mode [style*="border: 1px solid #FCD34D"] {
  border-color: rgba(245, 158, 11, 0.3) !important;
}
body.dark-mode [style*="background:#F0FDF4"],
body.dark-mode [style*="background: #F0FDF4"] {
  background-color: rgba(16, 185, 129, 0.1) !important;
  background: rgba(16, 185, 129, 0.1) !important;
}
body.dark-mode [style*="background:#FEF2F2"],
body.dark-mode [style*="background: #FEF2F2"] {
  background-color: rgba(239, 68, 68, 0.1) !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Extra dark mode fixes for admin and leader dashboards */
body.dark-mode .stat-info h3,
body.dark-mode .stat-card h3 {
  color: #94A3B8 !important;
}
body.dark-mode .stat-info p,
body.dark-mode .stat-card p {
  color: #F8FAFC !important;
}
body.dark-mode .navbar-profile-name,
body.dark-mode .topbar-profile span,
body.dark-mode .profile-name {
  color: #F8FAFC !important;
}
body.dark-mode .top-navbar,
body.dark-mode .topbar {
  background-color: #1E293B !important;
  background: #1E293B !important;
  border-bottom-color: #334155 !important;
}
body.dark-mode .dropdown-menu {
  background-color: #1E293B !important;
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}
body.dark-mode .dropdown-item {
  color: #CBD5E1 !important;
}
body.dark-mode .dropdown-item:hover {
  background-color: #334155 !important;
  color: #F8FAFC !important;
}
body.dark-mode .dropdown-header {
  color: #94A3B8 !important;
  border-bottom-color: #334155 !important;
}
body.dark-mode .sidebar-header {
  border-bottom-color: #334155 !important;
}
body.dark-mode .sidebar-divider {
  border-top-color: #334155 !important;
}
body.dark-mode .sidebar-user-name {
  color: #F8FAFC !important;
}
body.dark-mode .sidebar-user-role {
  color: #94A3B8 !important;
}
body.dark-mode .sidebar-toggle,
body.dark-mode .topbar-btn {
  color: #CBD5E1 !important;
}
body.dark-mode .sidebar-toggle:hover,
body.dark-mode .topbar-btn:hover {
  background-color: #334155 !important;
  color: #F8FAFC !important;
}
body.dark-mode #lockStatusBadge span {
  color: inherit !important;
}

body.dark-mode .stat-card-change.up {
  color: #34D399 !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
  background: rgba(16, 185, 129, 0.15) !important;
}

body.dark-mode .stat-card-change.down {
  color: #FCA5A5 !important;
  background-color: rgba(239, 68, 68, 0.15) !important;
  background: rgba(239, 68, 68, 0.15) !important;
}

/* Drawer styles */
.drawer-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.drawer-content {
  width: 450px;
  max-width: 90%;
  height: 100%;
  background: var(--bg-white);
  box-shadow: -5px 0 25px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.drawer-overlay.show .drawer-content {
  transform: translateX(0);
}

/* Spreadsheet specific styles */
.spreadsheet-table th, .spreadsheet-table td {
  border: 1px solid var(--border) !important;
  white-space: nowrap;
}
.spreadsheet-table th {
  background: var(--bg-light) !important;
  font-weight: 600;
  position: relative;
}
.spreadsheet-table td.sticky-col, .spreadsheet-table th.sticky-col {
  position: sticky;
  left: 0;
  background: var(--bg-white) !important;
  z-index: 2;
  box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}
.spreadsheet-table th.sticky-col {
  background: var(--bg-light) !important;
  z-index: 4; /* Above header rows */
}
body.dark-mode .spreadsheet-table td.sticky-col {
  background: #1e293b !important;
}
body.dark-mode .spreadsheet-table th.sticky-col {
  background: #334155 !important;
}
body.dark-mode .drawer-content {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-left: 1px solid #334155 !important;
}

.resizer {
  background: transparent;
  transition: background 0.2s;
  width: 6px !important;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  cursor: col-resize;
  user-select: none;
  z-index: 10;
}
.resizer:hover, .resizer.resizing {
  background: var(--primary) !important;
}




/* ============================================================
   DRAWER STYLES (Assignment History & More)
   ============================================================ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  display: none;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}

.drawer-overlay.open,
.drawer-overlay.show {
  display: flex !important;
  opacity: 1 !important;
}

.drawer-content {
  position: fixed;
  right: -100%;
  top: 0;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-white);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: 1051;
  transition: right var(--transition-speed) ease;
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.drawer-overlay.open .drawer-content,
.drawer-overlay.show .drawer-content {
  right: 0 !important;
}

.drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-light);
  flex-shrink: 0;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  gap: 12px;
}

/* ============================================================
   SPREADSHEET COLUMN RESIZER
   ============================================================ */
.column-resizer {
  position: absolute;
  right: -4px;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background: transparent;
  transition: background 0.2s ease;
}

.column-resizer:hover {
  background: var(--primary);
  opacity: 0.6;
}

.column-resizer.dragging {
  background: var(--primary);
  opacity: 1;
}

th {
  position: relative;
}

/* ============================================================
   COLUMN VISIBILITY MENU (DROPDOWN)
   ============================================================ */
.column-visibility-menu,
#columnVisibilityMenu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  min-width: 200px;
  max-height: 350px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.column-visibility-menu.show,
#columnVisibilityMenu.show {
  display: flex;
}

.column-visibility-item,
.column-check-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  gap: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-dark);
  font-family: 'Poppins', sans-serif;
}

.column-visibility-item:hover,
.column-check-item:hover {
  background: var(--bg-light);
}

.column-visibility-item input[type="checkbox"],
.column-check-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
}

/* ============================================================
   SUBMENU VISIBILITY WITH SIDEBAR COLLAPSE
   ============================================================ */
.sidebar.sidebar-collapsed .submenu {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sidebar:not(.sidebar-collapsed) .submenu {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   SPREADSHEET TABLE ENHANCEMENTS
   ============================================================ */
.spreadsheet-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.spreadsheet-table thead {
  background: #E2E8F0;
  position: sticky;
  top: 0;
  z-index: 3;
}

.spreadsheet-table th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
  position: relative;
}

.spreadsheet-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-dark);
}

.spreadsheet-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.05);
}

.spreadsheet-table tbody tr.selected {
  background: rgba(37, 99, 235, 0.15);
}

/* ============================================================
   FORM ENHANCEMENTS - Loading States
   ============================================================ */
.btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ============================================================
   RESPONSIVE DRAWER
   ============================================================ */
@media (max-width: 767px) {
  .drawer-content {
    width: 100%;
    max-width: none;
    border-radius: 0;
  }
}


/* ────────────────────────────────────────────────────────────
   22. DRAWER OVERLAY & STYLES (for sidebars, modals, etc.)
   ──────────────────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.drawer-overlay.show {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  z-index: 1050;
  background: var(--bg-white);
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
}

.drawer-top {
  top: var(--navbar-height);
  right: 0;
  left: var(--sidebar-width);
  max-height: 50vh;
  overflow-y: auto;
}

.drawer-right {
  top: 0;
  right: -360px;
  width: 360px;
  height: 100vh;
  transition: right 0.3s ease;
}

.drawer-right.show {
  right: 0;
}

.drawer-left {
  top: 0;
  left: -360px;
  width: 360px;
  height: 100vh;
  transition: left 0.3s ease;
}

.drawer-left.show {
  left: 0;
}

.drawer-bottom {
  bottom: -400px;
  left: 0;
  right: 0;
  max-height: 400px;
  overflow-y: auto;
  transition: bottom 0.3s ease;
  border-radius: var(--radius) var(--radius) 0 0;
}

.drawer-bottom.show {
  bottom: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.drawer-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
}

.drawer-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.drawer-close:hover {
  background: var(--bg-light);
  color: var(--text-dark);
}

.drawer-body {
  padding: 20px;
}

.drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────
   23. TABLE COLUMN RESIZER & VISIBILITY
   ──────────────────────────────────────────────────────────── */
.table-col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background: transparent;
  transition: background 0.2s ease;
}

.table-col-resizer:hover,
.table-col-resizer.dragging {
  background: var(--primary);
}

.table th {
  position: relative;
  user-select: none;
}

.table th.resizable {
  padding-right: 0;
}

/* Column visibility toggle */
.column-visibility-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.95rem;
  position: relative;
}

.column-visibility-toggle:hover {
  background: var(--bg-light);
  border-color: #CBD5E1;
  color: var(--text-dark);
}

/* Column visibility menu */
.column-visibility-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1100;
  min-width: 220px;
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s ease;
}

.column-visibility-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.column-visibility-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.column-visibility-item:hover {
  background: var(--bg-light);
}

.column-visibility-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.column-visibility-item label {
  flex: 1;
  cursor: pointer;
  font-size: 0.85rem;
  margin: 0;
}

.column-visibility-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.column-visibility-action {
  padding: 8px 10px;
  display: flex;
  gap: 6px;
}

.column-visibility-action .btn {
  flex: 1;
  padding: 6px 12px;
  font-size: 0.75rem;
}

/* ────────────────────────────────────────────────────────────
   24. SPREADSHEET ENHANCEMENTS
   ──────────────────────────────────────────────────────────── */
.spreadsheet-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.spreadsheet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.spreadsheet-toolbar-left,
.spreadsheet-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.spreadsheet-table {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.spreadsheet-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.spreadsheet-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
  position: relative;
}

.spreadsheet-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
  vertical-align: middle;
}

.spreadsheet-table tbody tr {
  transition: background 0.15s ease;
}

.spreadsheet-table tbody tr:hover {
  background: var(--bg-light);
}

.spreadsheet-table tbody tr:nth-child(even) {
  background: #FAFBFC;
}

.spreadsheet-table tbody tr:nth-child(even):hover {
  background: var(--bg-light);
}

.spreadsheet-table tbody tr:last-child td {
  border-bottom: 1px solid var(--border);
}

/* Table sort indicators */
.spreadsheet-table th.sortable {
  cursor: pointer;
}

.spreadsheet-table th.sortable:hover {
  background: #F8FAFC;
  color: var(--primary);
}

.spreadsheet-table th.sort-asc::after {
  content: ' ↑';
  color: var(--primary);
}

.spreadsheet-table th.sort-desc::after {
  content: ' ↓';
  color: var(--primary);
}

/* Spreadsheet pagination */
.spreadsheet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: var(--bg-light);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.pagination-info {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-controls .btn {
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* Row selection */
.spreadsheet-table thead th.checkbox-col,
.spreadsheet-table tbody td.checkbox-col {
  width: 40px;
  padding: 12px;
  text-align: center;
}

.spreadsheet-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Spreadsheet cell actions */
.spreadsheet-cell-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.spreadsheet-table tbody tr:hover .spreadsheet-cell-actions {
  opacity: 1;
}

.spreadsheet-cell-actions .btn {
  padding: 4px 8px;
  font-size: 0.75rem;
  height: 28px;
}

/* ────────────────────────────────────────────────────────────
   25. FORM LOADING STATES
   ──────────────────────────────────────────────────────────── */
.btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.loading::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  margin-left: -7px;
  margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: rgba(255, 255, 255, 0.8);
  animation: spin 0.6s linear infinite;
}

.btn-secondary.loading::before {
  border-color: rgba(30, 41, 59, 0.3);
  border-top-color: rgba(30, 41, 59, 0.8);
}



.form-group.loading .form-control {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.form-group.loading {
  position: relative;
}

.form-group.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: not-allowed;
  pointer-events: none;
}

/* Disabled state */
.form-control:disabled,
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Field error state */
.form-group.has-error .form-control {
  border-color: var(--danger);
}

.form-group.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* ────────────────────────────────────────────────────────────
   26. RESPONSIVE MEDIA QUERIES
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root {
    --sidebar-width: 240px;
  }

  .page-content {
    padding: calc(var(--navbar-height) + 20px) 24px 24px;
  }

  .navbar-search {
    width: 280px;
  }
}

@media (max-width: 992px) {
  :root {
    --sidebar-width: 220px;
  }

  .page-content {
    padding: calc(var(--navbar-height) + 16px) 20px 20px;
  }

  .navbar-search {
    display: none;
  }

  .stat-card {
    flex-direction: column;
    text-align: center;
  }

  .stat-card-icon {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 72px;
  }

  .sidebar {
    width: var(--sidebar-collapsed);
  }

  .sidebar-brand-text,
  .sidebar-item-text,
  .sidebar-label,
  .sidebar-user-info {
    display: none;
  }

  .sidebar-item {
    justify-content: center;
    padding: 10px 0;
  }

  .sidebar-item i,
  .sidebar-item svg,
  .sidebar-item .icon {
    margin: 0;
  }

  .sidebar-brand {
    justify-content: center;
  }

  .sidebar-header {
    padding: 18px 0;
    justify-content: center;
  }

  .sidebar-user {
    justify-content: center;
    padding: 8px 0;
  }

  .sidebar-user-avatar {
    margin: 0;
  }

  .sidebar-overlay {
    display: flex;
  }

  .sidebar.show {
    width: var(--sidebar-width);
  }

  .sidebar.show .sidebar-brand-text,
  .sidebar.show .sidebar-item-text,
  .sidebar.show .sidebar-label,
  .sidebar.show .sidebar-user-info {
    display: block;
  }

  .sidebar.show .sidebar-item {
    justify-content: flex-start;
    padding: 10px 14px;
  }

  .sidebar.show .sidebar-item i,
  .sidebar.show .sidebar-item svg,
  .sidebar.show .sidebar-item .icon {
    margin: 0;
  }

  .page-wrapper {
    margin-left: 0;
  }

  .top-navbar {
    left: 0;
  }

  .navbar-hamburger {
    display: flex;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header-right {
    width: 100%;
  }

  .page-header-right .btn-group,
  .page-header-right button {
    width: 100%;
  }

  .table-container {
    margin: 0 -20px;
    border-radius: 0;
  }

  .table {
    font-size: 0.8rem;
  }

  .table th,
  .table td {
    padding: 10px 12px;
  }

  .table-actions .btn {
    padding: 2px 6px;
    font-size: 0.7rem;
  }

  .modal {
    max-width: 90vw;
    border-radius: 12px 12px 0 0;
    max-height: 90vh;
  }

  .spreadsheet-toolbar,
  .spreadsheet-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .spreadsheet-toolbar-left,
  .spreadsheet-toolbar-right {
    width: 100%;
  }

  .column-visibility-menu {
    left: 0;
    right: auto;
  }

  .drawer-right,
  .drawer-left {
    width: 100%;
  }
}

@media (max-width: 640px) {
  :root {
    --navbar-height: 56px;
  }

  .page-content {
    padding: calc(var(--navbar-height) + 12px) 16px 16px;
  }

  .page-header h1 {
    font-size: 1.25rem;
  }

  .card-header,
  .card-body,
  .card-footer {
    padding: 14px;
  }

  .stat-card {
    padding: 14px;
  }

  .btn {
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  .table {
    font-size: 0.75rem;
  }

  .table th,
  .table td {
    padding: 8px 10px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 14px;
  }

  .modal {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
  }

  .toast {
    min-width: 280px;
    max-width: calc(100vw - 20px);
  }

  .navbar-search {
    width: 100%;
  }

  .breadcrumb {
    font-size: 0.75rem;
  }
}

/* ────────────────────────────────────────────────────────────
   27. UTILITY CLASSES
   ──────────────────────────────────────────────────────────── */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-muted {
  color: var(--text-muted);
}

.text-dark {
  color: var(--text-dark);
}

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

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-danger {
  color: var(--danger);
}

.text-white {
  color: #FFFFFF;
}

.text-sm {
  font-size: 0.8rem;
}

.text-lg {
  font-size: 1.1rem;
}

.text-bold {
  font-weight: 600;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.d-none {
  display: none;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gap-1 {
  gap: 4px;
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 12px;
}

.gap-4 {
  gap: 16px;
}

.gap-5 {
  gap: 20px;
}

.m-0 {
  margin: 0;
}

.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.mt-4 {
  margin-top: 16px;
}

.mb-1 {
  margin-bottom: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-3 {
  margin-bottom: 12px;
}

.mb-4 {
  margin-bottom: 16px;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: 4px;
}

.p-2 {
  padding: 8px;
}

.p-3 {
  padding: 12px;
}

.p-4 {
  padding: 16px;
}

.px-1 {
  padding-left: 4px;
  padding-right: 4px;
}

.px-2 {
  padding-left: 8px;
  padding-right: 8px;
}

.py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.rounded {
  border-radius: var(--radius);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-none {
  border-radius: 0;
}

.rounded-full {
  border-radius: 9999px;
}

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

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.user-select-none {
  user-select: none;
}

.pointer-events-none {
  pointer-events: none;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.transition-none {
  transition: none;
}

.transition-all {
  transition: all var(--transition-speed) ease;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.max-w-sm {
  max-width: 400px;
}

.max-w-md {
  max-width: 500px;
}

.max-w-lg {
  max-width: 700px;
}

.max-w-xl {
  max-width: 900px;
}

.min-h-screen {
  min-height: 100vh;
}

/* ────────────────────────────────────────────────────────────
   28. PRINT STYLES
   ──────────────────────────────────────────────────────────── */
@media print {
  .sidebar,
  .top-navbar,
  .page-header-right,
  .card-footer,
  .modal-overlay,
  .toast-container,
  .btn:not(.print-visible) {
    display: none !important;
  }

  .page-wrapper {
    margin-left: 0;
  }

  .page-content {
    padding: 0;
    background: #FFFFFF;
  }

  .card,
  .table {
    box-shadow: none;
    border: 1px solid #000;
  }

  .btn-print {
    display: inline-block;
  }
}

/* End of stylesheet */

.badge-record-count {
  font-size: 0.9rem;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.1) !important;
  color: var(--primary) !important;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  display: inline-block;
  transition: all 0.3s ease;
}

body.dark-mode .badge-record-count {
  background: rgba(165, 180, 252, 0.15) !important;
  color: #c7d2fe !important;
  border-color: rgba(165, 180, 252, 0.3) !important;
}

/* Full Screen Spreadsheet styling */
.spreadsheet-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9990 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  padding: 20px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.dark-mode .spreadsheet-fullscreen {
  background: #0f172a !important;
}

.spreadsheet-fullscreen .card:not(.spreadsheet-card),
.spreadsheet-fullscreen .page-header {
  flex-shrink: 0 !important;
}

.spreadsheet-fullscreen .spreadsheet-card,
.spreadsheet-fullscreen .card.spreadsheet-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 350px !important;
  overflow: hidden !important;
}

.spreadsheet-fullscreen .table-responsive,
.spreadsheet-fullscreen .table-container {
  flex: 1 !important;
  overflow: auto !important;
  max-height: none !important;
}

/* Guidelines alert box styling */
.guidelines-box {
  margin-top: 24px;
  padding: 16px;
  background-color: #FFFBEB;
  border-radius: 8px;
  border: 1px solid #FDE68A;
  color: #92400E;
}

.guidelines-box h5 {
  font-size: 0.85rem;
  font-weight: 600;
  color: #92400E;
  margin-bottom: 8px;
}

.guidelines-box ul {
  font-size: 0.8rem;
  color: #92400E;
  list-style: disc;
  padding-left: 20px;
  line-height: 1.8;
}

/* Dark mode overrides for guidelines alert box */
body.dark-mode .guidelines-box {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

body.dark-mode .guidelines-box h5,
body.dark-mode .guidelines-box ul,
body.dark-mode .guidelines-box li {
  color: #FFFFFF !important;
}

/* ────────────────────────────────────────────────────────────
   GLOBAL TUTORIAL & SHORTCUTS STYLING
   ──────────────────────────────────────────────────────────── */
.welcome-banner {
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid #BFDBFE;
  transition: all 0.3s ease;
}

.welcome-banner h4 {
  margin: 0 0 6px !important;
  color: #1E40AF !important;
}

.welcome-banner p {
  margin: 0 !important;
  font-size: 0.88rem;
  color: #1E3A8A !important;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 0.82rem;
}

.shortcut-card {
  background: #F8FAFC;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  transition: all 0.3s ease;
}

.shortcut-card kbd {
  background: #E2E8F0;
  color: #1E293B !important;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.shortcut-card .shortcut-desc {
  color: var(--text-muted);
  margin-top: 2px;
}

/* Dark mode overrides for tutorial & shortcuts */
body.dark-mode .welcome-banner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(30, 58, 138, 0.45)) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

body.dark-mode .welcome-banner h4 {
  color: #60A5FA !important;
}

body.dark-mode .welcome-banner p {
  color: #93C5FD !important;
}

body.dark-mode .shortcut-card {
  background: #0F172A !important;
  border-color: #334155 !important;
}

body.dark-mode .shortcut-card kbd {
  background: #334155 !important;
  color: #F8FAFC !important;
}

body.dark-mode .shortcut-card .shortcut-desc {
  color: #94A3B8 !important;
}

/* ──────────────────────────────────────────────────
   FILTER ACTIVE DOT INDICATOR (Global)
   Shows a pulsing dot on filter buttons when active
   ────────────────────────────────────────────────── */
.filter-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.filter-btn-wrap .filter-active-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: #F59E0B;
  border-radius: 50%;
  border: 2px solid #fff;
  display: none;
  z-index: 10;
  animation: filterDotPulse 1.8s ease-in-out infinite;
}

.filter-btn-wrap.has-active-filter .filter-active-dot {
  display: block;
}

@keyframes filterDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px rgba(245,158,11,0); transform: scale(1.15); }
}

/* Floating Modal Side Navigation Arrows (Positioned Outside Modal Container) */
.floating-modal-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #1E293B;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 100050;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.floating-modal-nav-btn:hover {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.45);
  transform: translateY(-50%) scale(1.15);
}
.floating-modal-nav-btn.left-nav-btn {
  left: -78px;
}
.floating-modal-nav-btn.right-nav-btn {
  right: -78px;
}
@media (max-width: 1080px) {
  .floating-modal-nav-btn.left-nav-btn { left: 10px; }
  .floating-modal-nav-btn.right-nav-btn { right: 10px; }
}

@keyframes popIn {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Modal Scroll Fix */
#updateModal .modal-body,
.modal-overlay .modal-body {
  max-height: calc(85vh - 120px) !important;
  overflow-y: auto !important;
  padding: 20px 24px;
}

/* ──────────────────────────────────────────────────────────────
   REMOVE: Right-side floating bell, edge pull tab, and all dark
   backdrop overlays / vignettes
   ──────────────────────────────────────────────────────────── */

/* Hide floating notification bell & chat button completely */
#ntfFloatBtn,
#cpFloatBtn,
.chat-launcher-btn {
  display: none !important;
}

/* Hide chat edge pull-tab (right side dark shadow bar) */
.chat-edge-tab {
  display: none !important;
}

/* Remove dark backdrop overlays */
.chat-drawer-backdrop,
#ntfBackdrop,
.sidebar-overlay {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

/* Remove all box-shadows from page structure */
body::after, body::before,
.main-content::after, .main-content::before,
.page-wrapper::after, .page-wrapper::before,
.content-wrapper::after, .content-wrapper::before {
  display: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* Remove green and info toast popups completely */
.toast.success,
.toast.info {
  display: none !important;
}

/* ================================================================
   PHASE 3 — NOTION-INSPIRED UI POLISH
   Clean, minimal, spacious — global overrides
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-notion: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --surface-0: #FFFFFF;
  --surface-1: #F9FAFB;
  --surface-2: #F1F5F9;
  --surface-border: #E5E7EB;
  --text-heading: #111827;
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-light: #EFF6FF;
  --accent-ring: rgba(37, 99, 235, 0.15);
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-focus: 0 0 0 3px var(--accent-ring);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;
}

body {
  font-family: var(--font-notion);
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-notion);
  color: var(--text-heading);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Cards */
.card,
.stat-card,
.dashboard-card,
.info-card,
.chart-card,
.section-card {
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

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

.stat-card .card-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-heading); }
.stat-card .card-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }

/* Tables */
.table-container {
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
}

table { border-collapse: collapse; width: 100%; }

thead {
  background: var(--surface-1);
  position: sticky;
  top: 0;
  z-index: 1;
}

thead th {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 11px 14px;
  border-bottom: 1.5px solid var(--surface-border);
  white-space: nowrap;
}

tbody tr { border-bottom: 1px solid var(--surface-2); transition: background var(--dur) var(--ease); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--accent-light); }
tbody td { padding: 11px 14px; font-size: 0.86rem; vertical-align: middle; }

/* Sidebar */
.sidebar-item, .nav-item {
  border-radius: var(--radius-sm) !important;
  margin: 1px 8px !important;
  padding: 9px 12px !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease) !important;
}
.sidebar-item:hover, .nav-item:hover { background: rgba(255,255,255,0.08) !important; }
.sidebar-item.active, .nav-item.active { background: rgba(37,99,235,0.18) !important; color: #93C5FD !important; font-weight: 600 !important; }
.sidebar-item.active i, .nav-item.active i { color: #60A5FA !important; }

/* Buttons */
.btn { font-family: var(--font-notion); font-size: 0.85rem; font-weight: 600; border-radius: var(--radius-sm); transition: all var(--dur) var(--ease); }
.btn-primary:hover { box-shadow: 0 2px 8px rgba(37,99,235,0.3); }

/* Forms */
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  font-family: var(--font-notion);
  font-size: 0.87rem;
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}

/* Modal */
.modal { border-radius: var(--radius-xl) !important; box-shadow: 0 24px 48px rgba(0,0,0,0.14) !important; }
.modal-header { padding: 18px 24px !important; border-bottom: 1px solid var(--surface-border) !important; }
.modal-body { padding: 20px 24px !important; }
.modal-footer { padding: 14px 24px !important; border-top: 1px solid var(--surface-border) !important; background: var(--surface-1) !important; }

/* Badges */
.badge-primary { background: var(--accent-light); color: var(--accent); }
.badge-success { background: #D1FAE5; color: #059669; }
.badge-warning { background: #FEF3C7; color: #D97706; }
.badge-danger  { background: #FEE2E2; color: #DC2626; }

/* Navbar */
.top-navbar, .topbar {
  background: var(--surface-0) !important;
  border-bottom: 1px solid var(--surface-border) !important;
  box-shadow: var(--shadow-1) !important;
}

/* Dropdowns */
.dropdown-menu, .notif-dropdown {
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-3) !important;
}

/* Section fade-in */
@keyframes notionFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.content-section.active { animation: notionFadeIn 0.22s var(--ease) forwards; }

/* Chat section sizing & clean full-page embedding */
#section-chat,
.content-wrapper #section-chat {
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

@media (max-width: 1024px) {
  #section-chat,
  .content-wrapper #section-chat {
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  #section-chat,
  .content-wrapper #section-chat {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ============================================================
   FULL-PAGE CHAT SECTION (PAGE-LEVEL EMBEDDED CHAT)
   ============================================================ */
/* ============================================================
   FULL-PAGE CHAT SECTION (PAGE-LEVEL EMBEDDED CHAT)
   ============================================================ */
body.chat-active {
  overflow: hidden !important;
  height: 100vh !important;
}

body.chat-active .main-content {
  margin-left: 260px !important;
  overflow: hidden !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

body.sidebar-collapsed.chat-active .main-content {
  margin-left: var(--sidebar-collapsed, 70px) !important;
}

body.chat-active .topbar,
body.chat-active .top-bar,
body.chat-active .top-header,
body.chat-active .top-navbar,
body.chat-active #topNavbar {
  flex-shrink: 0 !important;
}

body.chat-active footer,
body:has(#section-chat.active) footer {
  display: none !important;
}

.page-content:has(#section-chat.active),
body:has(#section-chat.active) .page-content,
body:has(#section-chat.active) .content-wrapper,
body.chat-active .page-content,
body.chat-active .content-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: calc(100vh - 60px) !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Hide floating launcher button when full-page chat section is open */
body.chat-active .chat-launcher-btn,
body:has(#section-chat.active) .chat-launcher-btn {
  display: none !important;
}

#section-chat {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#section-chat.active {
  display: flex !important;
  flex-direction: column !important;
}

#chatPageApp {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

#chatPageApp .whatsapp-app-container {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
}

/* Collapsible Mini Icon Rail Sidebar for Chat */
.chat-sidebar-left {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  flex-shrink: 0 !important;
  background: #F8FAFC !important;
  border-right: 1px solid #E2E8F0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.chat-sidebar-left.collapsed {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.chat-sidebar-left.collapsed .chat-self-info,
.chat-sidebar-left.collapsed .chat-search-bar-container,
.chat-sidebar-left.collapsed .chat-section-label,
.chat-sidebar-left.collapsed .chat-channel-item > div:not(:first-child) {
  display: none !important;
}

.chat-sidebar-left.collapsed .chat-profile-header {
  padding: 14px 10px !important;
  justify-content: center !important;
}

.chat-sidebar-left.collapsed .chat-channel-item {
  padding: 10px 0 !important;
  justify-content: center !important;
  margin: 6px auto !important;
  width: 48px !important;
  height: 48px !important;
  border-left: none !important;
  border-radius: 50% !important;
}

.chat-sidebar-left.collapsed .chat-channel-item.active {
  border-left: none !important;
  box-shadow: 0 0 0 3px #818CF8, 0 4px 14px rgba(79, 70, 229, 0.5) !important;
}

.chat-main-right {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: #F8FAFC !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.chat-channel-item {
  transition: all 0.2s ease-in-out !important;
  border-left: 3px solid transparent !important;
  border-radius: 10px !important;
  margin: 2px 10px !important;
  padding: 10px 14px !important;
  color: #334155 !important;
}

.chat-channel-item:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  transform: translateX(2px);
}

.chat-channel-item.active {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%) !important;
  border-left: 4px solid #4F46E5 !important;
  color: #4338CA !important;
  box-shadow: none !important;
}

.chat-send-btn {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  background: linear-gradient(135deg, #4F46E5 0%, #3B82F6 100%) !important;
}

.chat-send-btn:hover {
  transform: scale(1.08) rotate(-3deg) !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5) !important;
}

.chat-send-btn:active {
  transform: scale(0.95) !important;
}

/* Ultra-Premium Chat Feed Background Wallpaper */
.chat-feed-wallpaper {
  background-color: #F1F5F9 !important;
  background-image: 
    radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.09) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.09) 0px, transparent 50%),
    linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 50%, #F1F5F9 100%) !important;
  background-attachment: fixed !important;
}

body.dark-mode .chat-feed-wallpaper {
  background-color: #0F172A !important;
  background-image: 
    radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.18) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.18) 0px, transparent 50%),
    linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%) !important;
}

/* Glassmorphic Date Separator */
.chat-date-chip {
  background: linear-gradient(135deg, #FFFFFF, #F8FAFC) !important;
  color: #475569 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 5px 16px !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid #E2E8F0 !important;
  letter-spacing: 0.5px !important;
}

/* User Mention Highlight */
.chat-mention-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
}

.chat-mention-badge-other {
  background: linear-gradient(135deg, #EEF2FF, #E0E7FF) !important;
  color: #4338CA !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
}

/* Dark Mode support for Chat Application */
body.dark-mode #chatPageApp .whatsapp-app-container {
  background: #0F172A !important;
  border-color: #334155 !important;
}

body.dark-mode .chat-sidebar-left {
  background: #0F172A !important;
  border-color: #1E293B !important;
}

body.dark-mode .chat-channel-item:hover {
  background: #1E293B !important;
}

body.dark-mode .chat-channel-item.active {
  background: linear-gradient(135deg, #1E1B4B, #312E81) !important;
  border-left-color: #818CF8 !important;
}

body.dark-mode .chat-main-right {
  background: #090D16 !important;
}

body.dark-mode #chatMessagesArea {
  background-color: #0B0F19 !important;
  background-image: radial-gradient(#334155 1.2px, transparent 1.2px) !important;
}

body.dark-mode #chatHeaderBar {
  background: #1E293B !important;
  border-bottom-color: #334155 !important;
}

body.dark-mode #chatHeaderTitle {
  color: #F8FAFC !important;
}

body.dark-mode .chat-input-bar {
  background: #1E293B !important;
  border-top-color: #334155 !important;
}

body.dark-mode #chatMessageInput {
  background: #0F172A !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

/* Dark mode fixes for full-page chat sidebar / contacts / profile */
body.dark-mode .chat-sidebar-left .chat-channel-item {
  color: #CBD5E1 !important;
}
body.dark-mode .chat-sidebar-left .chat-channel-item:hover {
  color: #F8FAFC !important;
}
body.dark-mode .chat-sidebar-left .chat-channel-item.active {
  color: #F8FAFC !important;
}
body.dark-mode #chatSearchInput {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #F1F5F9 !important;
}
body.dark-mode #chatSearchInput::placeholder {
  color: #94A3B8 !important;
}
body.dark-mode #chatPrivateList {
  color: #CBD5E1 !important;
}
body.dark-mode #mentionDropdown {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}
body.dark-mode #userProfileModal {
  background: #0F172A !important;
  border-left-color: #334155 !important;
}
body.dark-mode #userProfileModal [id^="modalUser"] {
  color: #F1F5F9 !important;
}

/* Dark mode: Alumni Analysis & Attendance pages (inline white surfaces) */
body.dark-mode #section-alumniAnalysis .card[style*="background:#fff"],
body.dark-mode #section-attendance .card[style*="background:#fff"],
body.dark-mode #section-alumniCategory .card[style*="background:#fff"] {
  background: #0F172A !important;
  border-color: #1E293B !important;
  box-shadow: none !important;
  color: #E2E8F0 !important;
}
body.dark-mode #section-alumniAnalysis .card input,
body.dark-mode #section-alumniAnalysis .card select,
body.dark-mode #section-attendance .card input,
body.dark-mode #section-attendance .card select {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #F1F5F9 !important;
}
body.dark-mode #section-alumniAnalysis .table thead tr,
body.dark-mode #section-attendance .table thead tr {
  background: #1E293B !important;
  border-bottom-color: #334155 !important;
  color: #CBD5E1 !important;
}
body.dark-mode #section-alumniAnalysis .table,
body.dark-mode #section-attendance .table {
  color: #E2E8F0 !important;
}
/* Force dark-on-white inline text to be light in dark mode for these tables */
body.dark-mode #section-alumniAnalysis .table td,
body.dark-mode #section-alumniAnalysis .table th,
body.dark-mode #section-attendance .table td,
body.dark-mode #section-attendance .table th {
  color: #E2E8F0 !important;
}
body.dark-mode #section-attendance .card .form-label {
  color: #CBD5E1 !important;
}

/* ============================================================
   COMPREHENSIVE DARK MODE FIXES - CHAT, ALUMNI ANALYSIS & ATTENDANCE
   Override hardcoded inline light-mode colors in HTML & JS-rendered content
   ============================================================ */

/* ── CHAT PAGE: Received message bubbles ── */
body.dark-mode .chat-msg-wrapper div[style*="background:#FFFFFF"],
body.dark-mode .chat-msg-wrapper div[style*="background:#fff"] {
  background: #1E293B !important;
  color: #E2E8F0 !important;
  border-color: #334155 !important;
}

/* ── CHAT PAGE: Sender name labels & Role Badges ── */
body.dark-mode .chat-msg-wrapper div[style*="color:#0F172A"],
body.dark-mode .chat-msg-wrapper div[style*="color:#2563EB"] {
  color: #60A5FA !important;
}

body.dark-mode .chat-msg-wrapper div[style*="color:#0F172A"] > span:first-child,
body.dark-mode .chat-msg-wrapper div[style*="color:#2563EB"] > span:first-child {
  color: #F8FAFC !important;
}

/* Member role badge in dark mode */
body.dark-mode .chat-role-pill.chat-role-member,
body.dark-mode .chat-msg-wrapper span[style*="background:#DBEAFE"],
body.dark-mode .chat-msg-wrapper span[style*="background: #DBEAFE"] {
  background: rgba(59, 130, 246, 0.22) !important;
  color: #93C5FD !important;
  border: 1px solid rgba(147, 197, 253, 0.3) !important;
}

/* Leader role badge in dark mode */
body.dark-mode .chat-role-pill.chat-role-leader,
body.dark-mode .chat-msg-wrapper span[style*="background:#EDE9FE"],
body.dark-mode .chat-msg-wrapper span[style*="background: #EDE9FE"] {
  background: rgba(139, 92, 246, 0.25) !important;
  color: #C4B5FD !important;
  border: 1px solid rgba(196, 181, 253, 0.3) !important;
}

/* Admin role badge in dark mode */
body.dark-mode .chat-role-pill.chat-role-admin,
body.dark-mode .chat-msg-wrapper span[style*="background:#FEF3C7"],
body.dark-mode .chat-msg-wrapper span[style*="background: #FEF3C7"] {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #FDE68A !important;
  border: 1px solid rgba(253, 230, 138, 0.3) !important;
}

/* ── CHAT PAGE: Message text in received bubbles ── */
body.dark-mode .chat-msg-wrapper span[style*="color:#0F172A"] {
  color: #E2E8F0 !important;
}

/* ── CHAT PAGE: Input bar ── */
body.dark-mode .chat-input-bar,
body.dark-mode div[style*="background:#FFFFFF"][style*="border-top"] {
  background: #1E293B !important;
  border-top-color: #334155 !important;
}

/* ── CHAT PAGE: Chat textarea ── */
body.dark-mode .chat-textarea {
  background: #0F172A !important;
  color: #F1F5F9 !important;
  border-color: #334155 !important;
}
body.dark-mode .chat-textarea:focus {
  border-color: #6366F1 !important;
  background: #0B0F19 !important;
  box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.25) !important;
}
body.dark-mode .chat-textarea::placeholder {
  color: #64748B !important;
}

/* ── CHAT PAGE: Chat header subtitle ── */
body.dark-mode #chatHeaderSubtitle {
  color: #34D399 !important;
}
body.dark-mode #chatHeaderActionInfo {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #A5B4FC !important;
}

/* ── CHAT PAGE: Header toggle button ── */
body.dark-mode #chatMainSidebarToggleBtn {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #A5B4FC !important;
}
body.dark-mode #chatMainSidebarToggleBtn:hover {
  background: rgba(99, 102, 241, 0.3) !important;
}

/* ── CHAT PAGE: Date separator chips ── */
body.dark-mode .chat-date-chip,
body.dark-mode span[style*="background:#FFFFFF"][style*="border-radius:10px"] {
  background: #1E293B !important;
  color: #CBD5E1 !important;
  border-color: #334155 !important;
}

/* ── CHAT PAGE: Mention dropdown ── */
body.dark-mode #mentionDropdown {
  background: #0F172A !important;
  border-color: #334155 !important;
}
body.dark-mode #mentionDropdown div[style*="background:#F8FAFC"] {
  background: #1E293B !important;
  color: #94A3B8 !important;
  border-bottom-color: #334155 !important;
}
body.dark-mode #mentionDropdown .mention-item {
  border-bottom-color: #1E293B !important;
}
body.dark-mode #mentionDropdown .mention-item div[style*="color:#0F172A"] {
  color: #F1F5F9 !important;
}
body.dark-mode #mentionDropdown .mention-item div[style*="color:#64748B"] {
  color: #94A3B8 !important;
}
body.dark-mode .mention-item:hover {
  background: #1E293B !important;
}
body.dark-mode .mention-item.active-nav {
  background: rgba(99, 102, 241, 0.15) !important;
  border-left-color: #818CF8 !important;
}

/* ── CHAT PAGE: User Profile Modal ── */
body.dark-mode #userProfileModal {
  background: #0F172A !important;
  border-left-color: #334155 !important;
}
body.dark-mode #userProfileModal div[style*="background:#F8FAFC"] {
  background: #0B0F19 !important;
}
body.dark-mode #userProfileModal div[style*="background:#fff"],
body.dark-mode #userProfileModal div[style*="background:#FFFFFF"] {
  background: #1E293B !important;
  border-color: #334155 !important;
}
body.dark-mode #userProfileModal h3[style*="color:#0F172A"],
body.dark-mode #userProfileModal div[style*="color:#0F172A"],
body.dark-mode #modalUserName {
  color: #F1F5F9 !important;
}
body.dark-mode #userProfileModal div[style*="color:#1E293B"] {
  color: #CBD5E1 !important;
}

/* ── CHAT PAGE: Empty state / loading messages ── */
body.dark-mode #chatMessagesArea div[style*="background:rgba(255,255,255"] {
  background: rgba(30, 41, 59, 0.85) !important;
  color: #94A3B8 !important;
}

/* ── CHAT PAGE: Scroll-to-bottom button ── */
body.dark-mode .chat-scroll-bottom-btn {
  background: #1E293B !important;
  color: #A5B4FC !important;
  border-color: #334155 !important;
}
body.dark-mode .chat-scroll-bottom-btn:hover {
  background: #4F46E5 !important;
  color: #FFFFFF !important;
  border-color: #4F46E5 !important;
}

/* ── CHAT PAGE: Sidebar search area border ── */
body.dark-mode .chat-search-bar-container {
  border-bottom-color: #1E293B !important;
}

/* ── CHAT PAGE: Section label (Direct Messages header) ── */
body.dark-mode .chat-section-label {
  color: #818CF8 !important;
}

/* ── CHAT PAGE: Sidebar channel text colors ── */
body.dark-mode .chat-sidebar-left div[style*="font-weight:700"][style*="font-size:0.84rem"] {
  color: #E2E8F0 !important;
}
body.dark-mode .chat-sidebar-left div[style*="opacity:0.75"] {
  color: #64748B !important;
}

/* ── CHAT PAGE: Alumni card popups in chat ── */
body.dark-mode .chat-msg-wrapper div[style*="border-radius:14px"] {
  background: #1E293B !important;
  border-color: #334155 !important;
}
body.dark-mode .chat-msg-wrapper div[style*="border-radius:14px"] div[style*="background:#F8FAFC"] {
  background: #0F172A !important;
}
body.dark-mode .chat-msg-wrapper div[style*="border-radius:14px"] div[style*="background:#FAFAFA"] {
  background: #1E293B !important;
}
body.dark-mode .chat-msg-wrapper div[style*="border-radius:14px"] span[style*="color:#0F172A"] {
  color: #F8FAFC !important;
}
body.dark-mode .chat-msg-wrapper div[style*="border-radius:14px"] span[style*="color:#64748B"] {
  color: #94A3B8 !important;
}
body.dark-mode .chat-msg-wrapper div[style*="border-radius:14px"] div[style*="border-bottom:1px solid #F1F5F9"] {
  border-bottom-color: #334155 !important;
}
body.dark-mode .chat-msg-wrapper button[style*="background:#F8FAFC"],
body.dark-mode .chat-msg-wrapper button[style*="background: #F8FAFC"] {
  background: #0F172A !important;
  color: #CBD5E1 !important;
  border-color: #334155 !important;
}

/* ── ALUMNI ALERT SIDE PANEL (Alumni Detail Found) - DARK MODE ── */
body.dark-mode #alumniAlertSidePanel {
  background: #0F172A !important;
  border-left-color: #334155 !important;
  color: #F8FAFC !important;
}

body.dark-mode #alumniAlertSidePanel div[style*="background:#FEF3C7"] {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

body.dark-mode #alumniAlertSidePanel div[style*="background:#FEF3C7"] p {
  color: #FDE68A !important;
}

body.dark-mode #alumniAlertSidePanel div[style*="background:#F1F5F9"] {
  background: #1E293B !important;
  border-color: #334155 !important;
}

body.dark-mode #alumniAlertSidePanel label {
  color: #94A3B8 !important;
}

body.dark-mode #alumniAlertSidePanel input,
body.dark-mode #alumniAlertSidePanel select,
body.dark-mode #alumniAlertSidePanel textarea {
  background: #0F172A !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body.dark-mode #alumniAlertSidePanel input:focus,
body.dark-mode #alumniAlertSidePanel select:focus,
body.dark-mode #alumniAlertSidePanel textarea:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

body.dark-mode #alumniAlertSidePanel div[style*="background:#fff"] {
  background: #1E293B !important;
  border-top-color: #334155 !important;
}

/* ── CHAT PAGE: Edit message textarea ── */
body.dark-mode textarea[id^="edit-input-"] {
  background: #0F172A !important;
  color: #F1F5F9 !important;
  border-color: #818CF8 !important;
}
body.dark-mode button[onclick^="cancelEditChatMessage"] {
  background: #1E293B !important;
  color: #CBD5E1 !important;
  border-color: #334155 !important;
}

/* ── CHAT PAGE: Reaction popover ── */
body.dark-mode .chat-reaction-popover {
  background: #1E293B !important;
  border-color: #334155 !important;
}
body.dark-mode .chat-reaction-pill {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #CBD5E1 !important;
}
body.dark-mode .chat-reaction-pill.user-reacted {
  background: rgba(99, 102, 241, 0.2) !important;
  border-color: #818CF8 !important;
  color: #A5B4FC !important;
}

/* ── CHAT PAGE: Message action buttons ── */
body.dark-mode .chat-msg-action-btn {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
}
body.dark-mode .chat-msg-action-btn.edit-btn:hover {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #A5B4FC !important;
  border-color: #818CF8 !important;
}
body.dark-mode .chat-msg-action-btn.delete-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #FCA5A5 !important;
  border-color: #FCA5A5 !important;
}

/* ── CHAT PAGE: Reaction button on hover ── */
body.dark-mode .chat-msg-reaction-btn {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
}
body.dark-mode .chat-msg-reaction-btn:hover {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #A5B4FC !important;
  border-color: #818CF8 !important;
}

/* ============================================================
   ALUMNI ANALYSIS SECTION - DARK MODE
   ============================================================ */

/* ── Page header buttons ── */
body.dark-mode #section-alumniAnalysis .btn-outline,
body.dark-mode #section-alumniAnalysis button[style*="color:#1E293B"] {
  color: #CBD5E1 !important;
  border-color: #475569 !important;
}
body.dark-mode #section-alumniAnalysis .btn-outline:hover {
  background: #334155 !important;
  color: #F1F5F9 !important;
}

/* ── Filter bar card ── */
body.dark-mode #section-alumniAnalysis .card[style*="background:#fff"][style*="display:flex"] {
  background: #1E293B !important;
  border-color: #334155 !important;
}

/* ── View toggle buttons container ── */
body.dark-mode #section-alumniAnalysis div[style*="background:#F1F5F9"][style*="border-radius:8px"] {
  background: #0F172A !important;
}
body.dark-mode #section-alumniAnalysis #btnAnalysisViewCards,
body.dark-mode #section-alumniAnalysis #btnAnalysisViewTable {
  color: #CBD5E1 !important;
}
body.dark-mode #section-alumniAnalysis #btnAnalysisViewCards[style*="background:#fff"] {
  background: #334155 !important;
  color: #A5B4FC !important;
}

/* ── Spreadsheet / data table card ── */
body.dark-mode #section-alumniAnalysis .spreadsheet-card,
body.dark-mode #section-alumniAnalysis .card[style*="background:#fff"][style*="border-radius:12px"] {
  background: #1E293B !important;
  border-color: #334155 !important;
}

/* ── Table header row ── */
body.dark-mode #section-alumniAnalysis .table thead tr,
body.dark-mode #section-alumniAnalysis .table thead tr[style*="background:#F8FAFC"] {
  background: #0F172A !important;
  border-bottom-color: #334155 !important;
}
body.dark-mode #section-alumniAnalysis .table thead th {
  color: #94A3B8 !important;
}

/* ── Table body rows ── */
body.dark-mode #section-alumniAnalysis .table tbody tr {
  border-bottom-color: #334155 !important;
}
body.dark-mode #section-alumniAnalysis .table tbody tr:hover {
  background: rgba(30, 41, 59, 0.5) !important;
}
body.dark-mode #section-alumniAnalysis .table td {
  color: #E2E8F0 !important;
}
body.dark-mode #section-alumniAnalysis .table td strong {
  color: #F1F5F9 !important;
}
body.dark-mode #section-alumniAnalysis .table td span[style*="color:#64748B"],
body.dark-mode #section-alumniAnalysis .table td span[style*="color:#475569"] {
  color: #94A3B8 !important;
}
body.dark-mode #section-alumniAnalysis .table td strong[style*="color:#2563EB"] {
  color: #60A5FA !important;
}

/* ── Alumni cards (dynamic JS rendered) ── */
body.dark-mode #section-alumniAnalysis .alumni-card,
body.dark-mode #section-alumniAnalysis div[style*="background:#fff"][style*="border-radius:12px"][style*="padding:16px"] {
  background: #1E293B !important;
  border-color: #334155 !important;
}
body.dark-mode #section-alumniAnalysis .alumni-card h4[style*="color:#0F172A"],
body.dark-mode #section-alumniAnalysis div[style*="padding:16px"] h4[style*="color:#0F172A"] {
  color: #F1F5F9 !important;
}
body.dark-mode #section-alumniAnalysis .alumni-card span[style*="color:#64748B"],
body.dark-mode #section-alumniAnalysis div[style*="padding:16px"] span[style*="color:#64748B"] {
  color: #94A3B8 !important;
}

/* ── Alumni card inner detail box ── */
body.dark-mode #section-alumniAnalysis div[style*="background:#F8FAFC"][style*="border-radius:8px"] {
  background: #0F172A !important;
  border-color: #1E293B !important;
}
body.dark-mode #section-alumniAnalysis div[style*="color:#334155"] {
  color: #CBD5E1 !important;
}

/* ── Alumni card contact links ── */
body.dark-mode #section-alumniAnalysis a[style*="color:#0F172A"] {
  color: #CBD5E1 !important;
}

/* ── Alumni card footer / status ── */
body.dark-mode #section-alumniAnalysis div[style*="border-top:1px solid #F1F5F9"] {
  border-top-color: #334155 !important;
}
body.dark-mode #section-alumniAnalysis span[style*="color:#94A3B8"] strong[style*="color:#1E293B"] {
  color: #E2E8F0 !important;
}

/* ── Pagination info text ── */
body.dark-mode #analysisPaginationInfo,
body.dark-mode #attPaginationInfo {
  color: #94A3B8 !important;
}
body.dark-mode #analysisPaginationBtns .btn,
body.dark-mode #attPaginationBtns .btn {
  color: #CBD5E1 !important;
  border-color: #475569 !important;
}
body.dark-mode #analysisPaginationBtns .btn:hover,
body.dark-mode #attPaginationBtns .btn:hover {
  background: #334155 !important;
  color: #F1F5F9 !important;
}
body.dark-mode #analysisPaginationBtns span,
body.dark-mode #attPaginationBtns span {
  color: #CBD5E1 !important;
}

/* ── Table border-top separator in pagination area ── */
body.dark-mode #section-alumniAnalysis div[style*="border-top:1px solid #E2E8F0"],
body.dark-mode #section-attendance div[style*="border-top:1px solid #E2E8F0"] {
  border-top-color: #334155 !important;
}

/* ── Search highlight marks ── */
body.dark-mode #section-alumniAnalysis mark {
  background: #854D0E !important;
  color: #FEF08A !important;
}

/* ============================================================
   ATTENDANCE SECTION - DARK MODE
   ============================================================ */

/* ── Date select card ── */
body.dark-mode #section-attendance .card[style*="background:#fff"] {
  background: #1E293B !important;
  border-color: #334155 !important;
}

/* ── Date input ── */
body.dark-mode #attDateSelect {
  background: #0F172A !important;
  color: #F1F5F9 !important;
  border-color: #334155 !important;
}

/* ── Summary stat cards (keep their distinctive colors but darken) ── */
body.dark-mode #section-attendance .card[style*="background:#ECFDF5"] {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #34D399 !important;
}
body.dark-mode #section-attendance .card[style*="background:#FFFBEB"] {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #FBBF24 !important;
}
body.dark-mode #section-attendance .card[style*="background:#FEF2F2"] {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #FCA5A5 !important;
}

/* ── Attendance table heading text ── */
body.dark-mode #section-attendance h3[style*="color:#1E293B"] {
  color: #F1F5F9 !important;
}

/* ── Table header row ── */
body.dark-mode #section-attendance .table thead tr,
body.dark-mode #section-attendance .table thead tr[style*="background:#F8FAFC"] {
  background: #0F172A !important;
  border-bottom-color: #334155 !important;
}
body.dark-mode #section-attendance .table thead th {
  color: #94A3B8 !important;
}

/* ── Table body rows ── */
body.dark-mode #section-attendance .table tbody tr {
  border-bottom-color: #334155 !important;
}
body.dark-mode #section-attendance .table tbody tr:hover {
  background: rgba(30, 41, 59, 0.5) !important;
}

/* ── Table cell text ── */
body.dark-mode #section-attendance .table td {
  color: #E2E8F0 !important;
}
body.dark-mode #section-attendance .table td[style*="color:#1E293B"] {
  color: #F1F5F9 !important;
}
body.dark-mode #section-attendance .table td[style*="color:#64748B"] {
  color: #94A3B8 !important;
}

/* ── Filter select dropdowns ── */
body.dark-mode #attFilterStatus,
body.dark-mode #attFilterRole {
  background: #0F172A !important;
  color: #F1F5F9 !important;
  border-color: #334155 !important;
}

/* ── Filter select options ── */
body.dark-mode #attFilterStatus option,
body.dark-mode #attFilterRole option {
  background: #1E293B !important;
  color: #F1F5F9 !important;
}

/* Alumni analytics toolbar */
.alumni-analytics-toolbar {
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* Alumni cards */
.alumni-card {
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.alumni-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.alumni-card .alumni-name { font-size: 0.95rem; font-weight: 700; color: var(--text-heading); }
.alumni-card .alumni-role { font-size: 0.82rem; font-weight: 600; color: var(--accent); margin-top: 4px; }

/* Attendance */
.attendance-item { background: var(--surface-0); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-1); }
.attendance-item.present { border-left: 3px solid #10B981; }
.attendance-item.absent  { border-left: 3px solid #EF4444; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; }
/* ── END PHASE 3 NOTION UI POLISH ──────────────────────────────── */

/* ============================================================
   ELEGANT MODAL FORM LAYOUT (BALANCED SPACIOUS LAYOUT)
   ============================================================ */
#updateModal .modal-body {
  padding: 24px 32px !important;
}

#updateModal .update-status-row {
  margin-bottom: 18px !important;
}

#updateModal .smart-parser-box {
  margin-bottom: 18px !important;
  padding: 14px 18px !important;
}

#updateModal .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px 24px !important;
  margin-bottom: 18px !important;
}

#updateModal .form-row.form-row-3col {
  grid-template-columns: 1.1fr 1fr 0.8fr !important;
  gap: 18px 20px !important;
}

#updateModal .form-group {
  margin-bottom: 0 !important;
}

#updateModal .form-group label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  margin-bottom: 6px !important;
}

#updateModal .form-group input,
#updateModal .form-group select {
  width: 100% !important;
  padding: 9px 13px !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  height: 40px !important;
}

#updateModal .form-group textarea {
  width: 100% !important;
  padding: 9px 13px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

#updateModal .submit-row {
  padding-top: 18px !important;
  margin-top: 10px !important;
}

/* ============================================================
   CUSTOM SEARCHABLE SELECT DROPDOWN COMPONENT
   ============================================================ */
.custom-searchable-select {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.custom-searchable-select .select-trigger {
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #1E293B;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  text-align: left;
}

.custom-searchable-select .select-trigger:focus,
.custom-searchable-select.open .select-trigger {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.custom-searchable-select.disabled .select-trigger {
  background: #F8FAFC;
  color: #94A3B8;
  cursor: not-allowed;
  border-color: #E2E8F0;
}

.custom-searchable-select .select-arrow {
  font-size: 0.75rem;
  color: #64748B;
  transition: transform 0.2s ease;
  margin-left: 8px;
}

.custom-searchable-select.open .select-arrow {
  transform: rotate(180deg);
}

.custom-searchable-select .select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff !important;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  z-index: 100500;
  display: none;
  overflow: hidden;
  animation: dropdownFadeIn 0.15s ease;
}

.custom-searchable-select.open .select-dropdown {
  display: block !important;
}

.custom-searchable-select .select-search-wrap {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid #E2E8F0;
  background: #F8FAFC;
}

.custom-searchable-select .select-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  font-size: 0.8rem;
}

.custom-searchable-select .select-search-input {
  width: 100%;
  padding: 6px 10px 6px 32px;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  font-size: 0.82rem;
  outline: none;
  background: #ffffff !important;
  color: #0F172A !important;
  box-sizing: border-box;
}

.custom-searchable-select .select-search-input:focus {
  border-color: #2563EB;
}

.custom-searchable-select .select-options-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
  background: #ffffff !important;
}

.custom-searchable-select .select-option {
  padding: 8px 12px;
  font-size: 0.83rem;
  color: #334155 !important;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-searchable-select .select-option:hover,
.custom-searchable-select .select-option.highlighted {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  font-weight: 600;
}

.custom-searchable-select .select-option.selected {
  background: #2563EB !important;
  color: #ffffff !important;
  font-weight: 600;
}

.custom-searchable-select .select-no-results {
  padding: 12px;
  font-size: 0.82rem;
  color: #94A3B8;
  text-align: center;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── DARK MODE FOR CUSTOM SEARCHABLE SELECT (CASCADING LOCATION DROPDOWNS) ── */
body.dark-mode .custom-searchable-select .select-trigger {
  background: #0F172A !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body.dark-mode .custom-searchable-select.open .select-trigger,
body.dark-mode .custom-searchable-select .select-trigger:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

body.dark-mode .custom-searchable-select.disabled .select-trigger {
  background: #1E293B !important;
  color: #64748B !important;
  border-color: #334155 !important;
}

body.dark-mode .custom-searchable-select .select-arrow {
  color: #94A3B8 !important;
}

body.dark-mode .custom-searchable-select .select-dropdown {
  background: #0F172A !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .custom-searchable-select .select-search-wrap {
  background: #1E293B !important;
  border-bottom-color: #334155 !important;
}

body.dark-mode .custom-searchable-select .select-search-icon {
  color: #94A3B8 !important;
}

body.dark-mode .custom-searchable-select .select-search-input {
  background: #0F172A !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

body.dark-mode .custom-searchable-select .select-search-input:focus {
  border-color: #3B82F6 !important;
}

body.dark-mode .custom-searchable-select .select-options-list {
  background: #0F172A !important;
}

body.dark-mode .custom-searchable-select .select-option {
  color: #CBD5E1 !important;
}

body.dark-mode .custom-searchable-select .select-option:hover,
body.dark-mode .custom-searchable-select .select-option.highlighted {
  background: #1E293B !important;
  color: #60A5FA !important;
}

body.dark-mode .custom-searchable-select .select-option.selected {
  background: #2563EB !important;
  color: #FFFFFF !important;
}

body.dark-mode .custom-searchable-select .select-no-results {
  color: #64748B !important;
}

/* ============================================================
   ENTERPRISE UI POLISH & COMPLEXITY REDUCTION
   ============================================================ */

/* 1. Sleek Cards & Container Cards */
.card, .stat-card, .alumni-card, .dashboard-card {
  border-radius: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card:hover, .stat-card:hover, .alumni-card:hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
}

/* 2. Simplified Clean Inputs & Select Dropdowns */
.form-control, input[type="text"], input[type="email"], input[type="password"], select, textarea {
  border-radius: 8px !important;
  font-family: inherit !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* 3. Modern Sleek Badges */
.badge {
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* 4. Decluttered Table Layouts */
.table thead th {
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.6px !important;
  font-weight: 700 !important;
  padding: 12px 14px !important;
}

.table tbody td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

/* 5. Smooth Scrollbars Across Application */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border-radius: 10px !important;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #334155 !important;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #475569 !important;
}