/* Enhanced CSS Variables — Short aliases bridging to design-tokens.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

:root {
  /* --primary/--secondary/--accent intentionally NOT redeclared here — design-tokens.css
     (loaded on every page that loads this file) already defines them as the real brand
     navy/maroon via its "legacy variable aliases" block. This file used to override them
     with an unrelated blue/indigo/violet placeholder palette, so --accent/--primary
     silently rendered the wrong colour on every page that loaded both files. */

  /* Background system */
  --bg: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  --card-bg: #ffffff;
  
  /* Text colors — aligned with design-tokens gray scale */
  --text: var(--gray-800, #1e293b);
  --text-light: var(--gray-500, #64748b);
  --text-muted: var(--gray-400, #94a3b8);
  
  /* Borders — aligned with design-tokens */
  --border: var(--gray-200, #e2e8f0);
  --border-light: var(--gray-50, #f1f5f9);
  
  /* Shadows */
  --shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);
  --shadow-hover: 0 18px 48px rgba(15, 23, 42, 0.2);
  
  /* Border radius — aligned with design-tokens --radius-md/lg */
  --border-radius: var(--radius-md, 10px);
  --border-radius-lg: var(--radius-xl, 16px);
  
  /* Spacing scale — aligned with design-tokens --space-* */
  --spacing-xs: var(--space-1, 0.25rem);
  --spacing-sm: var(--space-2, 0.5rem);
  --spacing-md: var(--space-4, 1rem);
  --spacing-lg: var(--space-6, 1.5rem);
  --spacing-xl: var(--space-8, 2rem);
  --spacing-2xl: var(--space-12, 3rem);
  
  /* Typography scale */
  --font-xs: 0.75rem;      /* 12px */
  --font-sm: 0.875rem;     /* 14px */
  --font-base: 1rem;       /* 16px */
  --font-lg: 1.125rem;     /* 18px */
  --font-xl: 1.25rem;      /* 20px */
  --font-2xl: 1.5rem;      /* 24px */
  --font-3xl: 1.875rem;    /* 30px */
  
  /* Animation */
  --transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout */
  --nav-height: 64px;
  --nav-bg: var(--primary);
  --nav-fg: #fff;
  
  /* Status colors — aligned with design-tokens */
  --info: var(--info-500, #0ea5e9);
  --success: var(--success-500, #10b981);
  --warning: var(--warning-500, #f59e0b);
  --error: var(--danger-500, #ef4444);
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Out-of-class count styling for escalating severity levels */
.outofclass-count {
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

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

.outofclass-count-yellow {
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
}

.outofclass-count-orange {
  color: #d63384;
  background-color: #ffebd7;
  border: 1px solid #ffb74d;
  font-weight: 600;
}

.outofclass-count-red {
  color: #dc3545;
  background-color: #f8d7da;
  border: 1px solid #f1aeb5;
  font-weight: 600;
}

.outofclass-count-bold-red {
  color: #ffffff;
  background-color: #dc3545;
  border: 1px solid #b02a37;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.outofclass-count-severe {
  color: #ffffff;
  background-color: #dc143c;
  border: 1px solid #8b0000;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  animation: glow 2s ease-in-out infinite alternate;
}

.outofclass-count-critical {
  color: #ffffff;
  background-color: #8b0000;
  border: 1px solid #4b0000;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
  animation: pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(139, 0, 0, 0.6);
}

/* Row styling for high count students */
.row-critical {
  background-color: rgba(139, 0, 0, 0.03) !important;
}

.row-severe {
  background-color: rgba(220, 20, 60, 0.03) !important;
}

/* Enhanced Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 2px 4px rgba(102, 0, 0, 0.3); }
  50% { box-shadow: 0 4px 12px rgba(102, 0, 0, 0.5); }
}

/* Enhanced Global Styles */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

body { 
  font-family: var(--font-primary);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

/* Skip Links for Accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--accent);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 10000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 6px;
}

.skip-links a:focus {
  top: 6px;
}

/* Enhanced Navigation Bar */
.nav-bar { 
  background: var(--nav-bg);
  color: var(--nav-fg);
  padding: 12px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-height);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-logo { 
  height: 40px;
  margin-right: 12px;
  transition: var(--transition);
}

.nav-logo:hover {
  transform: scale(1.05);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  justify-content: flex-end;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

#staffName {
  color: white;
  font-weight: 500;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-title { 
  font-weight: 600;
  font-size: 1.2em;
  letter-spacing: -0.025em;
}

/* ===== FIXED DROPDOWN MENU ===== */
.dropdown {
  position: relative;
  display: inline-block;
}

.nav-links { 
  display: flex;
  align-items: center;
  gap: 16px;
}

#staffName { 
  font-weight: 500;
  padding: 8px 16px;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.theme-btn { 
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--nav-fg);
  padding: 8px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1.2em;
  transition: var(--transition);
  backdrop-filter: blur(10px);
}

.theme-btn:hover { 
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

/* Enhanced Dropdown Menu */
.dropdown { 
  position: relative; 
  display: inline-block; 
}

.dropbtn { 
  background: rgba(255,255,255,0.1);
  color: var(--nav-fg);
  padding: 8px 16px;
  font-size: 1em;
  border: none;
  cursor: pointer;
  border-radius: 20px;
  transition: var(--transition);
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.dropbtn:hover { 
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  background-color: white;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  border-radius: 8px;
  z-index: 2000;
  overflow: hidden;
  
  /* Prevent clipping off screen */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  
  /* Default positioning - will be adjusted by JavaScript */
  right: 0;
}

/* Force dropdown to stay within viewport bounds */
.dropdown-content.adjust-left {
  right: auto;
  left: 0;
}

.dropdown-content.adjust-center {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

/* Ensure dropdown stays within viewport */
@media screen and (max-width: 480px) {
  .dropdown-content {
    right: -20px;
    left: auto;
    min-width: 180px;
  }
}

.dropdown-content a, 
.dropdown-content button {
  padding: 12px 20px;
  text-decoration: none; 
  display: block; 
  color: var(--nav-bg); 
  background: none; 
  border: none; 
  width: 100%; 
  text-align: left; 
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 500;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.dropdown-content a::before,
.dropdown-content button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,48,87,0.05), transparent);
  transition: left 0.3s ease;
}

.dropdown-content a:hover::before,
.dropdown-content button:hover::before {
  left: 100%;
}

.dropdown-content a:hover, 
.dropdown-content button:hover {
  background: rgba(0,48,87,0.08); 
  transform: translateX(4px);
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: block; 
  animation: fadeInUp 0.2s ease;
}

.badge {
  background: var(--accent); 
  color: #fff; 
  border-radius: 50px; 
  padding: 4px 8px; 
  font-size: 0.75em; 
  margin-left: 8px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
  animation: pulse 2s infinite, glow 2s infinite;
  box-shadow: 0 2px 4px rgba(102, 0, 0, 0.3);
}

/* Dark Mode Styles */
.dark-mode {
  --bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --card-bg: #0f3460;
  --text: #e2e8f0;
  --text-light: #a0aec0;
  --text-muted: #718096;
  --border: #2d3748;
  --border-light: #4a5568;
  --nav-bg: #0a1428;
  --nav-fg: #fff;
}

/* Responsive Design */
@media (max-width: 768px) { 
  .nav-bar {
    padding: 10px 16px;
  }
  
  .nav-title {
    font-size: 1.1em;
  }
  
  #staffName {
    display: none;
  }
}

@media (max-width: 480px) {
  .nav-links {
    gap: 8px;
  }
  
  .dropdown-content {
    min-width: 180px;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus styles for keyboard navigation */
.dropbtn:focus,
.theme-btn:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}


/* Enhanced responsive navigation */
@media (max-width: 768px) {
  .nav-bar {
    padding: 8px 16px;
    flex-wrap: wrap;
  }

  .nav-title {
    font-size: 1em;
    order: 1;
  }

  .nav-links {
    gap: 8px;
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    margin-top: 8px;
  }

  #staffName {
    display: none; /* Hide on mobile to save space */
  }
}

@media (max-width: 480px) {
  .nav-bar {
    min-height: 60px;
  }

  .nav-logo {
    height: 32px;
  }

  .dropdown-content {
    min-width: 160px;
    right: 0;
    left: auto;
  }
}

/* Accessibility: Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: var(--border-radius);
  z-index: 1000;
  font-weight: bold;
}

.skip-link:focus {
  top: 6px;
}

/* Enhanced focus visibility */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Loading spinner */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Enhanced loading spinner with gradient */
.loading-spinner-enhanced {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid rgba(14, 165, 233, 0.2);
  border-radius: 50%;
  border-top: 4px solid var(--primary);
  border-right: 4px solid var(--primary-blue-light);
  animation: spin-enhanced 1s linear infinite;
  position: relative;
}

.loading-spinner-enhanced::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
  animation: pulse 2s ease-in-out infinite;
}

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

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Page transition animations */
.page-transition {
  opacity: 0;
  transform: translateY(20px);
  animation: page-enter 0.5s ease-out forwards;
}

@keyframes page-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-exit {
  opacity: 1;
  transform: translateY(0);
  animation: page-leave 0.3s ease-in forwards;
}

@keyframes page-leave {
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

/* Enhanced button interactions */
.btn-enhanced {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  outline: none;
}

.btn-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-enhanced:hover::before {
  left: 100%;
}

.btn-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-enhanced:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Primary button variant */
.btn-primary-enhanced {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-blue-dark) 100%);
  color: white;
  padding: 12px 24px;
  font-size: 15px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: -0.01em;
}

.btn-primary-enhanced:hover {
  background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary) 100%);
}

/* Success button variant */
.btn-success-enhanced {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 12px 24px;
  font-size: 15px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: -0.01em;
}

.btn-success-enhanced:hover {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

/* Enhanced card animations */
.card-enhanced {
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
}

.card-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-blue-light) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.card-enhanced:hover::before {
  transform: scaleX(1);
}

.card-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Enhanced form inputs */
.input-enhanced {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-light);
  border-radius: var(--border-radius);
  font-size: 16px;
  transition: all 0.3s ease;
  background: white;
  outline: none;
}

.input-enhanced:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 72, 141, 0.1);
  transform: translateY(-1px);
}

.input-enhanced:invalid {
  border-color: var(--error-red);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Enhanced notifications */
.notification-enhanced {
  padding: 16px 20px;
  border-radius: var(--border-radius-lg);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: notification-slide-in 0.3s ease-out;
  border-left: 4px solid;
  position: relative;
  overflow: hidden;
}

.notification-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.notification-enhanced:hover::before {
  opacity: 1;
}

@keyframes notification-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.notification-success {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-left-color: var(--success-green);
  color: #166534;
}

.notification-error {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-left-color: var(--error-red);
  color: #991b1b;
}

.notification-warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-left-color: var(--warning-amber);
  color: #92400e;
}

.notification-info {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-left-color: var(--info-blue);
  color: #1e40af;
}

.notification-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
  .card-enhanced:hover {
    transform: none; /* Disable hover lift on mobile */
  }

  .btn-enhanced:hover {
    transform: none; /* Disable hover lift on mobile */
  }

  .notification-enhanced {
    margin-bottom: 12px;
    padding: 12px 16px;
  }

  .input-enhanced {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Enhanced table styling */
.table-enhanced {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.table-enhanced th,
.table-enhanced td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.table-enhanced th {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
  font-weight: 600;
  color: var(--gray-700);
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-enhanced tbody tr {
  transition: background-color 0.2s ease;
}

.table-enhanced tbody tr:hover {
  background: linear-gradient(135deg, var(--gray-50) 0%, rgba(14, 165, 233, 0.02) 100%);
}

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

/* Enhanced modal styling */
.modal-enhanced {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  animation: modal-fade-in 0.3s ease-out forwards;
  backdrop-filter: blur(4px);
}

.modal-enhanced .modal-content {
  background: white;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-2xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  transform: scale(0.9);
  animation: modal-scale-in 0.3s ease-out 0.1s forwards;
  position: relative;
}

@keyframes modal-fade-in {
  to { opacity: 1; }
}

@keyframes modal-scale-in {
  to { transform: scale(1); }
}

/* Enhanced progress bars */
.progress-enhanced {
  width: 100%;
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.progress-enhanced .progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-blue-light) 100%);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-enhanced .progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progress-shimmer 2s infinite;
}

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

/* Enhanced badges */
.badge-enhanced {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-blue-light) 100%);
  color: white;
}

.badge-success {
  background: linear-gradient(135deg, var(--success-green) 0%, var(--accent-teal) 100%);
  color: white;
}

.badge-warning {
  background: linear-gradient(135deg, var(--warning-amber) 0%, #fbbf24 100%);
  color: white;
}

.badge-error {
  background: linear-gradient(135deg, var(--error-red) 0%, #f87171 100%);
  color: white;
}

/* Enhanced tooltips */
.tooltip-enhanced {
  position: relative;
  display: inline-block;
}

.tooltip-enhanced .tooltip-text {
  visibility: hidden;
  background: var(--gray-900);
  color: white;
  text-align: center;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: all 0.3s ease;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
}

.tooltip-enhanced .tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--gray-900);
}

.tooltip-enhanced:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

/* Enhanced dropdown menus */
.dropdown-enhanced {
  position: relative;
  display: inline-block;
}

.dropdown-enhanced .dropdown-content {
  display: none;
  position: absolute;
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  min-width: 200px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  animation: dropdown-slide-down 0.2s ease-out;
}

.dropdown-enhanced:hover .dropdown-content,
.dropdown-enhanced.active .dropdown-content {
  display: block;
}

@keyframes dropdown-slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-enhanced .dropdown-item {
  padding: 12px 16px;
  display: block;
  color: var(--gray-700);
  text-decoration: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border-light);
}

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

.dropdown-enhanced .dropdown-item:hover {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
  color: var(--gray-900);
  transform: translateX(4px);
}

/* Enhanced tabs */
.tabs-enhanced {
  display: flex;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: var(--spacing-lg);
}

.tab-enhanced {
  padding: 12px 24px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 600;
  color: var(--gray-600);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tab-enhanced::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-blue-light) 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.tab-enhanced:hover {
  color: var(--primary);
  background: rgba(0, 72, 141, 0.05);
}

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

.tab-enhanced.active::before {
  transform: scaleX(1);
}

.tab-content-enhanced {
  animation: tab-fade-in 0.3s ease-out;
}

@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Button enhancements */
button, .btn {
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  line-height: 1.2;
  min-height: 44px;
}

button:hover, .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Enhanced Footer Visual Effects */
.enhanced-footer-wrapper {
  position: relative;
  /* Allow footer visual elements (glow, logos) to overflow without being clipped */
  overflow: visible;
}

.enhanced-footer-section {
  position: relative;
  z-index: 2;
}

.enhanced-logo-section {
  position: relative;
}

.enhanced-footer-logo {
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(14, 165, 233, 0.3));
}

.enhanced-footer-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 16px rgba(14, 165, 233, 0.5));
}

.enhanced-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, rgba(14, 165, 233, 0.3), rgba(6, 182, 212, 0.3), rgba(14, 165, 233, 0.3));
  border-radius: 50%;
  opacity: 0;
  animation: logo-glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes logo-glow-pulse {
  0%, 100% { 
    opacity: 0; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.6; 
    transform: scale(1.1);
  }
}

.enhanced-branding {
  position: relative;
}

.enhanced-brand-name {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.enhanced-tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  font-weight: 500;
  margin-top: 0.25rem;
}

.enhanced-build-number {
  color: rgba(96, 165, 250, 0.8);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.enhanced-accent-line {
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.8) 0%, rgba(6, 182, 212, 0.8) 100%);
  border-radius: 1px;
  animation: accent-line-expand 2s ease-out 1s forwards;
}

@keyframes accent-line-expand {
  to { width: 100%; }
}

.enhanced-links-group {
  position: relative;
}

.enhanced-link-title {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.enhanced-footer-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.enhanced-footer-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.enhanced-link-icon {
  font-size: 1.1em;
  transition: transform 0.3s ease;
}

.enhanced-footer-link:hover .enhanced-link-icon {
  transform: scale(1.1);
}

.enhanced-hover-effect {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.8) 0%, rgba(6, 182, 212, 0.8) 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.enhanced-footer-link:hover .enhanced-hover-effect {
  transform: scaleX(1);
}

.enhanced-tech-stack {
  position: relative;
}

.enhanced-tech-title {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.enhanced-tech-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.enhanced-tech-badge {
  padding: 0.25rem 0.75rem;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 6px;
  font-size: clamp(0.625rem, 1vw, 0.75rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.enhanced-tech-badge:hover {
  background: rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.enhanced-credits {
  position: relative;
}

.enhanced-copyright {
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(0.625rem, 1vw, 0.75rem);
  font-weight: 500;
  margin-bottom: 0.25rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.enhanced-developer {
  position: relative;
}

.enhanced-dev-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.enhanced-dev-link:hover {
  color: rgba(14, 165, 233, 1);
  text-shadow: 0 2px 4px rgba(14, 165, 233, 0.5);
}

.enhanced-dev-website {
  margin-left: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1.1em;
}

.enhanced-dev-website:hover {
  color: rgba(6, 182, 212, 1);
  transform: scale(1.2);
}

.enhanced-bg-effects {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.enhanced-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(14, 165, 233, 0.05) 0%, 
    rgba(6, 182, 212, 0.03) 50%,
    rgba(14, 165, 233, 0.05) 100%);
  animation: gradient-shift 8s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.enhanced-pattern-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.02) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px, 20px 20px;
  animation: pattern-float 20s linear infinite;
}

@keyframes pattern-float {
  0% { transform: translate(0, 0); }
  100% { transform: translate(20px, -10px); }
}

.enhanced-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.1) 50%, 
    transparent 100%);
  animation: shimmer-sweep 4s ease-in-out infinite;
}

@keyframes shimmer-sweep {
  0% { left: -100%; }
  100% { left: 100%; }
}

.enhanced-wave-divider {
  position: relative;
  width: 100%;
  height: 60px;
  margin-top: -2px;
  overflow: hidden;
  filter: drop-shadow(0 -2px 8px rgba(14, 165, 233, 0.2));
}

.enhanced-wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: wave-flow 12s ease-in-out infinite;
}

@keyframes wave-flow {
  0%, 100% { 
    transform: translateX(0) scaleY(1); 
  }
  25% { 
    transform: translateX(-10px) scaleY(1.02); 
  }
  50% { 
    transform: translateX(-20px) scaleY(0.98); 
  }
  75% { 
    transform: translateX(-5px) scaleY(1.01); 
  }
}

/* ===== POLISHED EMPTY STATE COMPONENT ===== */
.empty-state-polished {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
  gap: 0.5rem;
  width: 100%;
}

.empty-state-polished .empty-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.25rem;
  opacity: 0.7;
  filter: grayscale(20%);
}

.empty-state-polished .empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light, #64748b);
  margin: 0;
}

.empty-state-polished .empty-desc {
  font-size: 0.875rem;
  color: var(--text-muted, #94a3b8);
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

/* ===== POLISHED LOADING STATE COMPONENT ===== */
.loading-state-polished {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
  gap: 0.75rem;
  width: 100%;
}

.loading-state-polished .loading-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.loading-state-polished .loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary, #0066cc);
  opacity: 0.4;
  animation: loadingDotPulse 1.4s ease-in-out infinite;
}

.loading-state-polished .loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-state-polished .loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.loading-state-polished .loading-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted, #94a3b8);
  margin: 0;
}

@keyframes loadingDotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* ===== REUSABLE MODAL SYSTEM ===== */
.modal-overlay-polished {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15000 !important;
  animation: modal-fade-in 0.2s ease-out;
}

.modal-card-polished {
  background: #ffffff;
  border-radius: 20px;
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: modal-scale-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal-header-polished {
  padding: 1.5rem 2rem;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(135deg, #003057, #00488d);
  color: #ffffff;
}

.modal-header-polished h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.modal-body-polished {
  padding: 1.5rem 2rem;
}

.modal-footer-polished {
  padding: 1rem 2rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background: #f8fafc;
  border-radius: 0 0 20px 20px;
}

.modal-btn {
  padding: 0.65rem 1.5rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.modal-btn-cancel {
  background: #e2e8f0;
  color: #475569;
}

.modal-btn-cancel:hover {
  background: #cbd5e1;
}

.modal-btn-confirm {
  background: linear-gradient(135deg, #003057, #00488d);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 72, 141, 0.3);
}

.modal-btn-confirm:hover {
  box-shadow: 0 4px 12px rgba(0, 72, 141, 0.4);
  transform: translateY(-1px);
}

.modal-btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.modal-btn-success:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

.modal-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 1.5rem;
}

.modal-stat-tile {
  padding: 1.25rem;
  border-radius: 16px;
  text-align: center;
}

.modal-stat-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.modal-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.modal-stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.modal-section-heading {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-list-container {
  max-height: 180px;
  overflow-y: auto;
  background: #f9fafb;
  border-radius: 8px;
  padding: 12px;
}

.modal-list-item {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: white;
  border-radius: 6px;
  font-size: 13px;
  color: #1f2937;
}

.modal-list-item-name {
  font-weight: 600;
  color: #1f2937;
  font-size: 14px;
}

.modal-list-item-meta {
  font-size: 12px;
  color: #6b7280;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-scale-in {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
/* ══════════════════════════════════════════════════════════════
   EMAIL SLIDE PANEL — slides in from the right
   Usage: replaces modal-overlay-polished for email confirmations
   ══════════════════════════════════════════════════════════════ */
.email-slide-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 14900;
  animation: modal-fade-in 0.22s ease;
}

.email-slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(540px, 95vw);
  height: 100vh;
  background: #ffffff;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
  z-index: 14950;
  display: flex;
  flex-direction: column;
  animation: slideInFromRight 0.32s cubic-bezier(0.34, 1.1, 0.64, 1);
  overflow: hidden;
}

@keyframes slideInFromRight {
  from { transform: translateX(100%); opacity: 0.5; }
  to   { transform: translateX(0);    opacity: 1; }
}

.email-slide-panel.closing {
  animation: slideOutToRight 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideOutToRight {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

.email-slide-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: #ffffff;
  position: relative;
}

.email-slide-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.8);
  flex-shrink: 0;
}

.email-slide-title { flex: 1; }
.email-slide-title .slide-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-bottom: 2px;
}
.email-slide-title h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.email-slide-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.email-slide-close:hover { background: rgba(255,255,255,0.35); }

.email-slide-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.email-slide-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

@media (prefers-reduced-motion: reduce) {
  .email-slide-panel { animation: none; }
  .email-slide-panel.closing { animation: none; }
  .email-slide-backdrop { animation: none; }
}