/* UniQuest - Professional Business Design */

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

/* Color Palette - Professional Business */
:root {
  --primary-color: #6f4e37;
  --primary-dark: #4e3424;
  --primary-light: #8a674f;
  --secondary-color: #64748b;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --info-color: #06b6d4;
  
  --bg-primary: #ffffff;
  --bg-secondary: #f7f3ef;
  --bg-tertiary: #efe6de;
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main.container {
  max-width: 1220px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

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

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

/* Navigation */
.site-navbar {
  background: rgba(78, 52, 36, 0.96) !important;
  box-shadow: var(--shadow-md);
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

.navbar-brand {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #f6ede5 !important;
  display: flex;
  align-items: center;
}

.navbar-brand:hover {
  color: #ffffff !important;
}

.nav-link {
  font-weight: 500;
  color: #efe6de !important;
  padding: 0.5rem 1rem !important;
  margin: 0 0.25rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08);
}

.nav-link i {
  margin-right: 0.5rem;
}

/* Hero Section */
.site-hero {
  background: linear-gradient(135deg, #6f4e37 0%, #8a674f 100%);
  color: white;
  padding: 3.5rem 0;
  margin-bottom: 1.25rem;
}

.site-hero h1, .site-hero h2, .site-hero h3 {
  color: white;
}

.site-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.125rem;
}

/* Buttons - Professional Style */
.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  color: white;
}

.btn-success {
  background-color: var(--success-color);
  color: white;
}

.btn-success:hover {
  background-color: #059669;
  color: white;
}

.btn-outline-primary {
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  background: transparent;
}

.btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: white;
}

.btn-outline-success {
  border: 2px solid var(--success-color);
  color: var(--success-color);
  background: transparent;
}

.btn-outline-success:hover {
  background-color: var(--success-color);
  color: white;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn-compact {
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  min-width: 135px;
}

.landing-actions {
  align-items: center;
}

/* Cards - Clean Professional */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: #dccab8;
}

.card-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.card-body {
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.card-text {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.card-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 1rem 1.5rem;
}

/* Forms - Professional Style */
.form-control,
.form-select {
  font-family: 'Inter', sans-serif;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: all 0.2s ease;
  font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  background-color: var(--bg-primary);
}

.form-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-text {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Alerts */
.alert {
  border-radius: 8px;
  border: none;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
}

.alert-success {
  background-color: #d1fae5;
  color: #065f46;
  border-left: 4px solid var(--success-color);
}

.alert-danger {
  background-color: #fee2e2;
  color: #991b1b;
  border-left: 4px solid var(--danger-color);
}

.alert-warning {
  background-color: #fef3c7;
  color: #92400e;
  border-left: 4px solid var(--warning-color);
}

.alert-info {
  background-color: #cffafe;
  color: #164e63;
  border-left: 4px solid var(--info-color);
}

/* Tables - Professional */
.table {
  background: var(--bg-primary);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table thead {
  background: var(--bg-secondary);
}

.table thead th {
  font-weight: 600;
  color: var(--text-primary);
  text-transform: none;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  padding: 1rem;
  border-bottom: 2px solid var(--border-color);
}

.table tbody td {
  padding: 1rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.table tbody tr:hover {
  background-color: #fbf7f2;
}

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

/* Badges */
.badge {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0.5px;
}

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

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

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

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

/* Stats Cards */
.stats-card {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  color: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

.stats-card h3 {
  color: white;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.stats-card p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Footer */
.site-footer {
  background: #4e3424;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 4rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: white;
}

.social-links a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.social-links a:hover {
  background: var(--primary-color);
  transform: none;
}

/* Utility Classes */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-light { background-color: var(--bg-secondary) !important; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

.border-radius { border-radius: 8px !important; }
.border-radius-lg { border-radius: 12px !important; }

/* Dashboard Specific */
.dashboard-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--primary-light);
}

.dashboard-card h5 {
  margin-bottom: 1rem;
  color: var(--text-primary);
  font-weight: 600;
}

/* Progress Bars */
.progress {
  height: 10px;
  border-radius: 10px;
  background-color: var(--bg-tertiary);
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-light) 100%);
  border-radius: 10px;
}

/* Profile */
.profile-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 3rem 0;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid white;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

/* Course Cards */
.course-card {
  transition: all 0.3s ease;
  height: 100%;
}

.course-card:hover {
  transform: none;
  box-shadow: var(--shadow-lg);
}

.course-card .card-img-top {
  height: 200px;
  object-fit: cover;
}

/* Schedule */
.schedule-item {
  background: var(--bg-primary);
  border-left: 4px solid var(--primary-color);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.schedule-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

/* Grades Table */
.grade-excellent { color: var(--success-color); font-weight: 600; }
.grade-good { color: var(--info-color); font-weight: 600; }
.grade-average { color: var(--warning-color); font-weight: 600; }
.grade-poor { color: var(--danger-color); font-weight: 600; }

/* Responsive Design */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  
  .site-hero {
    padding: 2rem 0;
  }
  
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
  
  .stats-card h3 {
    font-size: 2rem;
  }

  .landing-actions {
    flex-wrap: wrap !important;
  }

  .btn-compact {
    min-width: 120px;
  }

  .hero-gallery {
    grid-template-columns: 1fr;
  }

  .hero-gallery-item-lg {
    grid-row: auto;
  }

  .hero-gallery-item img,
  .hero-gallery-item-lg img {
    min-height: 170px;
    height: 170px;
  }
}

/* Loading Spinner */
.spinner {
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

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

/* Animations */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

.kpi-box {
  background: linear-gradient(180deg, #fff 0%, #fbf7f2 100%);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.kpi-title {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.kpi-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1.1;
}

.subject-chip {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.hero-media img {
  height: 250px;
  width: 100%;
  object-fit: cover;
}

.hero-gallery {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0.75rem;
}

.hero-gallery-item {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  box-shadow: 0 12px 24px rgba(38, 28, 21, 0.25);
}

.hero-gallery-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.hero-img-dark {
  display: none;
}

:root:not([data-theme="light"]) .hero-img-light {
  display: none;
}

:root:not([data-theme="light"]) .hero-img-dark {
  display: block;
}

.hero-gallery-item-lg {
  grid-row: span 2;
}

.hero-gallery-item-lg img {
  height: 100%;
  min-height: 310px;
}

.hero-gallery-item.is-active {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 18px 32px rgba(38, 28, 21, 0.35);
}

.list-group-item {
  border-color: var(--border-light);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-up {
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Print Styles */
@media print {
  .site-navbar,
  .site-footer,
  .btn,
  .no-print {
    display: none !important;
  }
  
  body {
    background: white;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
  /* Dark mode styles can be added here if needed */
}

/* ===== Futuristic Neon Academic Override ===== */
:root {
  --primary-color: #a855f7;
  --primary-dark: #7e22ce;
  --primary-light: #d8b4fe;
  --secondary-color: #3b82f6;
  --warning-color: #fde047;
  --neon-yellow: #facc15;
  --neon-yellow-soft: #fef08a;
  --bg-primary: #141127;
  --bg-secondary: #0f0d1f;
  --bg-tertiary: #1f1736;
  --text-primary: #f1eafe;
  --text-secondary: #ddd0fb;
  --text-muted: #b8a9df;
  --border-color: #3a2f5f;
  --border-light: #2a2146;
  --text-bright: #f3ecff;
  --text-bright-soft: #e9dcff;
  --neon-cyan: #38bdf8;
  --neon-cyan-soft: #7dd3fc;
}

body {
  background:
    radial-gradient(circle at 8% -10%, rgba(250, 204, 21, 0.34), transparent 34%),
    radial-gradient(circle at 12% 32%, rgba(56, 189, 248, 0.24), transparent 32%),
    radial-gradient(circle at 28% 8%, rgba(168, 85, 247, 0.34), transparent 36%),
    radial-gradient(circle at 86% 2%, rgba(56, 189, 248, 0.34), transparent 33%),
    radial-gradient(circle at 84% 74%, rgba(196, 181, 253, 0.2), transparent 34%),
    radial-gradient(circle at 74% 78%, rgba(125, 211, 252, 0.24), transparent 34%),
    radial-gradient(circle at 56% 120%, rgba(250, 204, 21, 0.24), transparent 40%),
    linear-gradient(156deg, #120f22 0%, #140f29 42%, #1a1233 100%);
}

.site-navbar {
  background: linear-gradient(90deg, rgba(35, 19, 64, 0.62), rgba(14, 28, 58, 0.58)) !important;
  border-bottom: 1px solid rgba(125, 211, 252, 0.42);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 10px 24px rgba(10, 8, 24, 0.45), 0 0 18px rgba(168, 85, 247, 0.2), 0 0 16px rgba(56, 189, 248, 0.24);
}

/* Global typography glow for dark theme (no pure white) */
body,
body p,
body li,
body label,
body .small,
body .text-muted {
  color: var(--text-secondary);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: var(--text-primary);
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.22);
}

a,
.nav-link,
.navbar-brand {
  color: #e9d5ff !important;
}

a:hover,
.nav-link:hover,
.navbar-brand:hover {
  color: #fde68a !important;
}

.site-hero {
  background:
    radial-gradient(circle at 16% 14%, rgba(250, 204, 21, 0.32), transparent 34%),
    radial-gradient(circle at 22% 62%, rgba(56, 189, 248, 0.2), transparent 30%),
    radial-gradient(circle at 34% 8%, rgba(196, 181, 253, 0.28), transparent 30%),
    radial-gradient(circle at 34% 8%, rgba(168, 85, 247, 0.46), transparent 39%),
    radial-gradient(circle at 78% 20%, rgba(56, 189, 248, 0.38), transparent 36%),
    linear-gradient(120deg, #1a1432 0%, #1a1636 52%, #211948 100%);
  border-top: 1px solid rgba(250, 204, 21, 0.2);
  border-bottom: 1px solid rgba(59, 130, 246, 0.24);
  box-shadow: inset 0 1px 0 rgba(254, 240, 138, 0.12), inset 0 -1px 0 rgba(250, 204, 21, 0.1);
}

.nav-link:hover {
  background-color: rgba(168, 85, 247, 0.18);
  box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.3);
}

.card {
  background: linear-gradient(180deg, rgba(36, 23, 66, 0.58) 0%, rgba(16, 18, 42, 0.5) 100%);
  border: 1px solid rgba(125, 211, 252, 0.28);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(168, 85, 247, 0.22),
    0 12px 28px rgba(17, 11, 31, 0.55),
    0 0 24px rgba(56, 189, 248, 0.18),
    0 0 20px rgba(250, 204, 21, 0.14);
}

.card:hover {
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.42),
    0 14px 30px rgba(17, 11, 31, 0.65),
    0 0 30px rgba(250, 204, 21, 0.28),
    0 0 28px rgba(168, 85, 247, 0.34),
    0 0 20px rgba(196, 181, 253, 0.22),
    0 0 20px rgba(56, 189, 248, 0.2);
}

.card-title,
.card-header,
.card-header h5,
.card-header h6 {
  color: #f2ddff;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

.card-header {
  background: linear-gradient(90deg, rgba(196, 181, 253, 0.22), rgba(168, 85, 247, 0.3), rgba(250, 204, 21, 0.14));
  border-bottom: 1px solid rgba(124, 97, 181, 0.38);
}

.dashboard-card {
  border-left: 3px solid #7dd3fc;
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.2),
    0 8px 20px rgba(6, 12, 28, 0.45);
}

.dashboard-card h3,
.stats-card h3,
.kpi-value {
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.25);
}

.btn {
  border-radius: 10px;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(120deg, #a855f7 0%, #8b5cf6 48%, #facc15 128%);
  border: 1px solid rgba(250, 204, 21, 0.45);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.36), 0 0 24px rgba(250, 204, 21, 0.34);
  color: #f5e9ff;
}

.btn-primary:hover {
  background: linear-gradient(120deg, #9333ea 0%, #a855f7 58%, #fde047 126%);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.4), 0 0 30px rgba(250, 204, 21, 0.46), 0 0 20px rgba(56, 189, 248, 0.3);
}

.btn-outline-primary {
  border: 1px solid rgba(125, 211, 252, 0.58);
  color: #efe2ff;
  background: rgba(59, 130, 246, 0.14);
}

.btn-outline-primary:hover {
  background: linear-gradient(120deg, rgba(59, 130, 246, 0.35), rgba(250, 204, 21, 0.2));
  color: var(--text-bright);
}

.btn-outline-success {
  border: 1px solid #22c55e;
  color: #d9f99d;
  background: rgba(34, 197, 94, 0.08);
}

.btn-outline-success:hover {
  background: rgba(34, 197, 94, 0.22);
  color: var(--text-bright);
}

.form-control,
.form-select {
  background: rgba(16, 24, 47, 0.6);
  border-color: rgba(125, 211, 252, 0.32);
  color: #f1eafe;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.form-label {
  color: #f2ddff;
}

.form-control:focus,
.form-select:focus {
  border-color: #7dd3fc;
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.2), 0 0 16px rgba(168, 85, 247, 0.26), 0 0 14px rgba(56, 189, 248, 0.2);
}

.table tbody tr:hover {
  background-color: rgba(168, 85, 247, 0.1);
}

.kpi-box {
  background: linear-gradient(180deg, rgba(22, 31, 58, 0.94) 0%, rgba(12, 19, 39, 0.98) 100%);
  border: 1px solid rgba(82, 102, 149, 0.45);
}

.kpi-value {
  color: #f4e3ff;
  text-shadow: 0 0 14px rgba(250, 204, 21, 0.28), 0 0 10px rgba(168, 85, 247, 0.3);
}

.site-footer {
  background: #060a18;
  border-top: 1px solid rgba(100, 116, 180, 0.35);
}

.badge.bg-warning,
.btn-warning,
.text-warning {
  color: #111827 !important;
  text-shadow: none !important;
}

.badge.bg-warning {
  background: linear-gradient(120deg, #facc15, #fde047) !important;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.4);
}

.badge.bg-primary,
.bg-primary.badge {
  background: linear-gradient(120deg, #9333ea, #7c3aed) !important;
  color: #f5e9ff !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.32);
}

.badge.bg-info,
.bg-info.badge {
  background: linear-gradient(120deg, #3b82f6, #38bdf8) !important;
  color: #f3e8ff !important;
}

.text-primary {
  color: #d8b4fe !important;
}

.text-info {
  color: #93c5fd !important;
}

.text-success {
  color: #d9f99d !important;
}

/* Light theme variables (toggle via data-theme) */
:root[data-theme="light"] {
  --primary-color: #8b7cf6;
  --primary-dark: #6f62db;
  --primary-light: #d8d0ff;
  --secondary-color: #72b5ff;
  --warning-color: #ffd9b8;
  --bg-primary: #f8fbff;
  --bg-secondary: #f3f7ff;
  --bg-tertiary: #edf3ff;
  --text-primary: #17263f;
  --text-secondary: #2f4666;
  --text-muted: #5f7698;
  --border-color: #d9e4f5;
  --border-light: #e7eef9;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 8% -6%, rgba(255, 214, 182, 0.16), transparent 34%),
    radial-gradient(circle at 28% 2%, rgba(180, 201, 255, 0.2), transparent 36%),
    radial-gradient(circle at 86% 4%, rgba(197, 185, 255, 0.2), transparent 34%),
    radial-gradient(circle at 74% 78%, rgba(174, 236, 217, 0.14), transparent 32%),
    linear-gradient(180deg, #fbfdff 0%, #f5f9ff 55%, #f2f7ff 100%);
  color: var(--text-secondary);
}

:root[data-theme="light"] .site-navbar {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(245, 250, 255, 0.82)) !important;
  border-bottom: 1px solid rgba(215, 227, 245, 0.9);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 8px 20px rgba(160, 184, 214, 0.22);
}

:root[data-theme="light"] .navbar-brand,
:root[data-theme="light"] .nav-link {
  color: #1f3353 !important;
}

:root[data-theme="light"] .nav-link:hover {
  background-color: rgba(216, 208, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(170, 189, 232, 0.45), 0 4px 12px rgba(162, 176, 214, 0.18);
  transform: translateY(-1px);
}

:root[data-theme="light"] .site-hero {
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 205, 167, 0.3), transparent 34%),
    radial-gradient(circle at 36% 8%, rgba(202, 188, 255, 0.28), transparent 34%),
    radial-gradient(circle at 78% 20%, rgba(169, 213, 255, 0.25), transparent 36%),
    linear-gradient(120deg, #fefcff 0%, #f1f8ff 58%, #f2efff 100%);
  border-top: 1px solid rgba(230, 238, 250, 0.95);
  border-bottom: 1px solid rgba(218, 230, 247, 0.88);
}

:root[data-theme="light"] .site-hero h1,
:root[data-theme="light"] .site-hero h2,
:root[data-theme="light"] .site-hero h3,
:root[data-theme="light"] .site-hero p {
  color: #1f3353;
}

:root[data-theme="light"] .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(244, 250, 255, 0.9) 100%);
  border: 1px solid rgba(216, 228, 246, 0.92);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px rgba(157, 178, 208, 0.2);
}

:root[data-theme="light"] .card-header {
  background: linear-gradient(90deg, rgba(216, 208, 255, 0.28), rgba(180, 201, 255, 0.24), rgba(255, 226, 197, 0.2));
  border-bottom: 1px solid rgba(221, 232, 247, 0.9);
}

:root[data-theme="light"] .dashboard-card {
  border-left: 3px solid #a8d3ff;
  box-shadow: 0 0 0 1px rgba(187, 202, 234, 0.28), 0 10px 20px rgba(156, 176, 205, 0.18);
}

:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-select {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(214, 227, 246, 0.9);
  color: #1f3353;
  border-radius: 14px;
}

:root[data-theme="light"] .form-control:focus,
:root[data-theme="light"] .form-select:focus {
  border-color: #b8c9ff;
  box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.2), 0 0 14px rgba(173, 216, 255, 0.24);
}

:root[data-theme="light"] .table tbody tr:hover {
  background-color: rgba(224, 236, 255, 0.45);
}

:root[data-theme="light"] .kpi-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(242, 248, 255, 0.95) 100%);
  border: 1px solid rgba(216, 228, 246, 0.92);
  box-shadow: 0 8px 18px rgba(162, 184, 214, 0.16);
}

:root[data-theme="light"] .kpi-value {
  color: #7264d9;
}

:root[data-theme="light"] .site-footer {
  background: linear-gradient(180deg, rgba(246, 251, 255, 0.96) 0%, rgba(241, 247, 255, 0.96) 100%);
  color: #4b607b;
  border-top: 1px solid rgba(219, 231, 248, 0.9);
}

:root[data-theme="light"] .btn {
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(168, 187, 214, 0.2);
}

:root[data-theme="light"] .btn:hover {
  transform: translateY(-1px) scale(1.01);
}

:root[data-theme="light"] .btn-primary {
  background: linear-gradient(120deg, #bccdff 0%, #d8d0ff 52%, #ffd8bc 100%);
  border: 1px solid rgba(187, 203, 238, 0.9);
  color: #31405d;
}

:root[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(120deg, #acc3ff 0%, #cbc0ff 52%, #ffcfae 100%);
  box-shadow: 0 8px 18px rgba(168, 184, 214, 0.24);
}

:root[data-theme="light"] .bg-light,
:root[data-theme="light"] .card.bg-light,
:root[data-theme="light"] .badge.bg-light {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(242, 248, 255, 0.94) 100%) !important;
  border: 1px solid rgba(219, 231, 248, 0.92);
  color: #27405f !important;
}

:root[data-theme="light"] .bg-white,
:root[data-theme="light"] [class*=" bg-white"],
:root[data-theme="light"] [class^="bg-white"] {
  background-color: #fbfeff !important;
}

:root[data-theme="light"] .badge {
  border-radius: 999px;
}

:root[data-theme="light"] .badge.bg-primary,
:root[data-theme="light"] .bg-primary.badge {
  background: linear-gradient(120deg, #cbc0ff, #aec8ff) !important;
  color: #1f3353 !important;
  box-shadow: 0 4px 10px rgba(180, 194, 225, 0.26);
}

:root[data-theme="light"] .badge.bg-info,
:root[data-theme="light"] .bg-info.badge {
  background: linear-gradient(120deg, #bde5ff, #c7f3ea) !important;
  color: #1f4763 !important;
}

:root[data-theme="light"] .badge.bg-warning {
  background: linear-gradient(120deg, #ffe2c6, #fff1cf) !important;
  color: #5f432e !important;
}

/* Brighter, higher-contrast typography for light theme */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6,
:root[data-theme="light"] .card-title,
:root[data-theme="light"] .card-header,
:root[data-theme="light"] .table thead th,
:root[data-theme="light"] .kpi-value {
  color: #14233b !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

:root[data-theme="light"] p,
:root[data-theme="light"] li,
:root[data-theme="light"] .card-text,
:root[data-theme="light"] .table tbody td,
:root[data-theme="light"] label,
:root[data-theme="light"] .form-label {
  color: #2b4363 !important;
}

:root[data-theme="light"] .text-muted,
:root[data-theme="light"] .form-text,
:root[data-theme="light"] small {
  color: #4f688b !important;
}

:root[data-theme="light"] a {
  color: #355fa8;
  font-weight: 500;
}

:root[data-theme="light"] a:hover {
  color: #284b87;
}

/* Force bright text across all light-theme UI */
:root[data-theme="light"] body,
:root[data-theme="light"] body * {
  color: #2b4363 !important;
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6,
:root[data-theme="light"] strong,
:root[data-theme="light"] b,
:root[data-theme="light"] th,
:root[data-theme="light"] .card-title,
:root[data-theme="light"] .kpi-value {
  color: #223a5b !important;
}

:root[data-theme="light"] .text-muted,
:root[data-theme="light"] .form-text,
:root[data-theme="light"] small,
:root[data-theme="light"] .small,
:root[data-theme="light"] .text-secondary,
:root[data-theme="light"] .text-body-secondary {
  color: #4d6687 !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .text-dark,
:root[data-theme="light"] .text-black,
:root[data-theme="light"] .text-body,
:root[data-theme="light"] .text-primary,
:root[data-theme="light"] .text-info,
:root[data-theme="light"] .text-success,
:root[data-theme="light"] .text-warning,
:root[data-theme="light"] .text-danger,
:root[data-theme="light"] .text-light,
:root[data-theme="light"] .text-white {
  color: #2b4363 !important;
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
  color: #6a82a1 !important;
  opacity: 1;
}

:root[data-theme="light"] a,
:root[data-theme="light"] .nav-link,
:root[data-theme="light"] .navbar-brand {
  color: #355b8c !important;
}

:root[data-theme="light"] a:hover,
:root[data-theme="light"] .nav-link:hover,
:root[data-theme="light"] .navbar-brand:hover {
  color: #2b4c77 !important;
}

:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .dropdown-menu,
:root[data-theme="light"] .offcanvas {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(243, 249, 255, 0.95) 100%);
  border: 1px solid rgba(219, 231, 248, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 26px rgba(166, 186, 214, 0.24);
}

/* Dark theme hard overrides: remove pure white usage */
:root:not([data-theme="light"]) .text-white,
:root:not([data-theme="light"]) .btn[class*="text-white"],
:root:not([data-theme="light"]) .badge[class*="text-white"] {
  color: var(--text-bright-soft) !important;
}

:root:not([data-theme="light"]) .navbar-brand:hover,
:root:not([data-theme="light"]) .nav-link:hover,
:root:not([data-theme="light"]) .site-footer a:hover,
:root:not([data-theme="light"]) .site-hero,
:root:not([data-theme="light"]) .site-hero h1,
:root:not([data-theme="light"]) .site-hero h2,
:root:not([data-theme="light"]) .site-hero h3,
:root:not([data-theme="light"]) .stats-card,
:root:not([data-theme="light"]) .stats-card h3,
:root:not([data-theme="light"]) .profile-header {
  color: var(--text-bright) !important;
}

:root:not([data-theme="light"]) .profile-avatar {
  border-color: rgba(233, 220, 255, 0.78);
}

:root:not([data-theme="light"]) .bg-light,
:root:not([data-theme="light"]) .card.bg-light,
:root:not([data-theme="light"]) .badge.bg-light,
:root:not([data-theme="light"]) [class*=" bg-light"],
:root:not([data-theme="light"]) [class^="bg-light"] {
  background: linear-gradient(180deg, rgba(18, 27, 52, 0.94) 0%, rgba(11, 18, 37, 0.98) 100%) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(82, 102, 149, 0.45) !important;
}

:root:not([data-theme="light"]) .text-dark,
:root:not([data-theme="light"]) .badge.text-dark,
:root:not([data-theme="light"]) [class*=" text-dark"] {
  color: var(--text-bright-soft) !important;
}

:root:not([data-theme="light"]) .input-group-text {
  background: rgba(59, 130, 246, 0.14) !important;
  border-color: #31456e !important;
  color: var(--text-bright-soft) !important;
}

:root:not([data-theme="light"]) .list-group-item {
  background-color: rgba(15, 23, 45, 0.88);
  color: var(--text-secondary);
  border-color: var(--border-light);
}

:root:not([data-theme="light"]) .btn-close {
  filter: invert(88%) sepia(13%) saturate(464%) hue-rotate(199deg) brightness(101%) contrast(98%);
  opacity: 0.8;
}

:root:not([data-theme="light"]) .btn-close:hover {
  opacity: 1;
}

:root:not([data-theme="light"]) {
  --bs-body-bg: #120f22;
  --bs-body-color: #ddd0fb;
  --bs-card-bg: #1a1432;
  --bs-card-color: #f1eafe;
  --bs-tertiary-bg: #22183c;
  --bs-secondary-bg: #1a1432;
  --bs-border-color: #3a2f5f;
  --bs-light-rgb: 26, 20, 50;
}

:root:not([data-theme="light"]) .bg-white,
:root:not([data-theme="light"]) [class*=" bg-white"],
:root:not([data-theme="light"]) [class^="bg-white"] {
  background: linear-gradient(180deg, rgba(18, 27, 52, 0.96) 0%, rgba(10, 16, 34, 0.98) 100%) !important;
  color: var(--text-secondary) !important;
}

:root:not([data-theme="light"]) .border,
:root:not([data-theme="light"]) [class*=" border"] {
  border-color: rgba(125, 211, 252, 0.3) !important;
}

:root:not([data-theme="light"]) .table {
  --bs-table-bg: rgba(13, 20, 41, 0.94);
  --bs-table-color: #ddd0fb;
  --bs-table-border-color: #253152;
  --bs-table-striped-bg: rgba(30, 41, 70, 0.45);
  --bs-table-hover-bg: rgba(139, 92, 246, 0.12);
  --bs-table-hover-color: #f1eafe;
}

:root:not([data-theme="light"]) .modal-content,
:root:not([data-theme="light"]) .dropdown-menu,
:root:not([data-theme="light"]) .offcanvas,
:root:not([data-theme="light"]) .popover,
:root:not([data-theme="light"]) .tooltip-inner {
  background: linear-gradient(180deg, rgba(36, 23, 66, 0.62) 0%, rgba(16, 18, 42, 0.58) 100%) !important;
  color: var(--text-secondary) !important;
  border: 1px solid rgba(125, 211, 252, 0.32) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 14px 28px rgba(17, 11, 31, 0.58), 0 0 20px rgba(168, 85, 247, 0.24), 0 0 16px rgba(56, 189, 248, 0.18), 0 0 18px rgba(250, 204, 21, 0.18);
}

:root:not([data-theme="light"]) .site-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 30%, rgba(250, 204, 21, 0.16) 0%, transparent 28%),
    radial-gradient(circle at 68% 24%, rgba(56, 189, 248, 0.14) 0%, transparent 30%),
    radial-gradient(circle at 48% 72%, rgba(168, 85, 247, 0.14) 0%, transparent 32%);
  mix-blend-mode: screen;
}

:root:not([data-theme="light"]) .site-hero {
  position: relative;
}

:root:not([data-theme="light"]) .badge.bg-warning,
:root:not([data-theme="light"]) .btn-warning {
  background: linear-gradient(120deg, #facc15, #fde047) !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.5), 0 0 12px rgba(56, 189, 248, 0.2);
}

:root:not([data-theme="light"]) .badge.bg-info,
:root:not([data-theme="light"]) .bg-info.badge {
  background: linear-gradient(120deg, #38bdf8, #7dd3fc) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45), 0 0 10px rgba(168, 85, 247, 0.25);
}

/* More rounded geometry for premium glass UI */
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .dashboard-card,
:root:not([data-theme="light"]) .kpi-box,
:root:not([data-theme="light"]) .schedule-item,
:root:not([data-theme="light"]) .modal-content,
:root:not([data-theme="light"]) .dropdown-menu,
:root:not([data-theme="light"]) .offcanvas,
:root:not([data-theme="light"]) .alert,
:root:not([data-theme="light"]) .table,
:root:not([data-theme="light"]) .card-header,
:root:not([data-theme="light"]) .card-footer {
  border-radius: 18px !important;
}

:root:not([data-theme="light"]) .btn,
:root:not([data-theme="light"]) .badge,
:root:not([data-theme="light"]) .form-control,
:root:not([data-theme="light"]) .form-select,
:root:not([data-theme="light"]) .input-group-text,
:root:not([data-theme="light"]) .nav-link {
  border-radius: 14px !important;
}

:root:not([data-theme="light"]) .rounded-circle.bg-primary {
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.28), 0 0 16px rgba(168, 85, 247, 0.3);
}

:root:not([data-theme="light"]) .alert-success {
  background: rgba(16, 185, 129, 0.15);
  color: #bbf7d0;
}

:root:not([data-theme="light"]) .alert-danger {
  background: rgba(239, 68, 68, 0.16);
  color: #fecaca;
}

:root:not([data-theme="light"]) .alert-warning {
  background: rgba(250, 204, 21, 0.18);
  color: #fef08a;
}

:root:not([data-theme="light"]) .alert-info {
  background: rgba(56, 189, 248, 0.15);
  color: #bae6fd;
}