/* Simple animation for new items */
/* Dark mode support */
.hidden {
  display: none !important;
}

.dark .bg-white {
  background-color: #1f2937 !important;
}
.dark .text-gray-800 {
  color: #f3f4f6 !important;
}
.dark .text-gray-700 {
  color: #e5e7eb !important;
}
.dark .text-gray-600 {
  color: #d1d5db !important;
}
.dark .border-gray-200 {
  border-color: #374151 !important;
}
.dark .border-gray-300 {
  border-color: #4b5563 !important;
}

/* Markdown styling */
.ai-message-content h1,
.ai-message-content h2,
.ai-message-content h3 {
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
}
.ai-message-content h1 {
  font-size: 1.5em;
}
.ai-message-content h2 {
  font-size: 1.3em;
}
.ai-message-content h3 {
  font-size: 1.1em;
}
.ai-message-content code {
  background-color: #f3f4f6;
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-family: "Courier New", monospace;
  font-size: 0.9em;
}
.dark .ai-message-content code {
  background-color: #374151;
  color: #f3f4f6;
}
.ai-message-content pre {
  background-color: #f3f4f6;
  padding: 1em;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1em 0;
}
.dark .ai-message-content pre {
  background-color: #374151;
}
.ai-message-content pre code {
  background-color: transparent;
  padding: 0;
}
.ai-message-content ul,
.ai-message-content ol {
  margin-left: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.ai-message-content li {
  margin: 0.25em 0;
}
.ai-message-content blockquote {
  border-left: 4px solid #9333ea;
  padding-left: 1em;
  margin: 1em 0;
  font-style: italic;
}
.ai-message-content a {
  color: #9333ea;
  text-decoration: underline;
}
.ai-message-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1em 0;
}
.ai-message-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}
.ai-message-content table th,
.ai-message-content table td {
  border: 1px solid #e5e7eb;
  padding: 0.5em;
  text-align: left;
}
.dark .ai-message-content table th,
.dark .ai-message-content table td {
  border-color: #4b5563;
}
.ai-message-content table th {
  background-color: #f3f4f6;
  font-weight: bold;
}
.dark .ai-message-content table th {
  background-color: #374151;
}

/* Message actions hover */
.message-actions {
  transition: opacity 0.2s;
}

/* File dropzone */
#teacher-ai-agent-file-dropzone {
  transition: all 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.new-item,
.chat-message {
  animation: fadeIn 0.4s ease-out;
}
/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
}
::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Google Classroom Style */
#classrooms-fullscreen-view,
#classroom-fullscreen-view {
  font-family: "Google Sans", "Roboto", Arial, sans-serif;
}

.classroom-tab-btn {
  transition: all 0.2s;
  position: relative;
  border-bottom: 2px solid transparent;
}

.classroom-tab-btn.active {
  border-bottom-color: #1a73e8;
  color: #1a73e8;
}

.classroom-tab-btn:hover:not(.active) {
  color: #202124;
  background-color: transparent;
}

/* Smooth scrolling */
#classrooms-fullscreen-view > div:last-child,
#classroom-fullscreen-view > div:last-child {
  scroll-behavior: smooth;
}

/* Card hover effects - Google Classroom style */
.classroom-card {
  transition: all 0.2s;
  border-radius: 8px;
}

.classroom-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Google Classroom card styling */
.gc-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
  transition: box-shadow 0.2s;
  border: 1px solid #dadce0;
}

.gc-card:hover {
  box-shadow: 0 2px 4px 0 rgba(60, 64, 67, 0.3),
    0 4px 8px 3px rgba(60, 64, 67, 0.15);
}

/* Stream post cards - Google Classroom style */
.stream-post-card {
  background: white;
  border-radius: 8px;
  border: 1px solid #dadce0;
  padding: 16px;
  margin-bottom: 16px;
  transition: box-shadow 0.2s;
}

.stream-post-card:hover {
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

/* Assignment cards - Google Classroom style */
.assignment-card {
  background: white;
  border-radius: 8px;
  border: 1px solid #dadce0;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s;
}

.assignment-card:hover {
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
}
.chat-bubble-bot {
  background-color: #e5e7eb; /* gray-200 */
  align-self: flex-start;
}
.chat-bubble-user {
  background-color: #4f46e5; /* indigo-600 */
  color: white;
  align-self: flex-end;
}
.typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: #9ca3af; /* gray-400 */
  display: inline-block;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}
.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}
@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Phase 1: Advanced Dashboard Animations */
@keyframes gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes count-up {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-slow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

@keyframes pulse-glow-soft {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(79, 70, 229, 0.2);
  }
}

/* Animation Classes */
.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

.animate-slide-in-left {
  animation: slide-in-left 0.6s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 0.5s ease-out;
}

.animate-count-up {
  animation: count-up 0.8s ease-out;
}

.animate-bounce-slow {
  animation: bounce-slow 2s ease-in-out infinite;
}

/* Stagger Animation for Cards */
.stat-card {
  opacity: 0;
  animation: fade-in-up 0.6s ease-out forwards;
}

.stat-card:nth-child(1) {
  animation-delay: 0.1s;
}
.stat-card:nth-child(2) {
  animation-delay: 0.2s;
}
.stat-card:nth-child(3) {
  animation-delay: 0.3s;
}
.stat-card:nth-child(4) {
  animation-delay: 0.4s;
}

.quick-action-card {
  opacity: 0;
  animation: fade-in-up 0.6s ease-out forwards;
}

.quick-action-card:nth-child(1) {
  animation-delay: 0.15s;
}
.quick-action-card:nth-child(2) {
  animation-delay: 0.25s;
}
.quick-action-card:nth-child(3) {
  animation-delay: 0.35s;
}
.quick-action-card:nth-child(4) {
  animation-delay: 0.45s;
}

/* 3D Transform Effects */
.quick-action-card {
  transform-style: preserve-3d;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-action-card:hover {
  transform: translateY(-8px) scale(1.02);
}

/* Glassmorphism */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Ripple Effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
}

/* Stat Card Hover Effects */
.stat-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Shimmer Effect for Loading */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

/* Phase 2: Dark Mode Support */

/* Phase 2: Activity Feed Widget */
.activity-feed-item {
  animation: fade-in-up 0.4s ease-out;
  transition: all 0.2s ease;
}

.activity-feed-item:hover {
  transform: translateX(4px);
  background-color: rgba(59, 130, 246, 0.05);
}

[data-theme="dark"] .activity-feed-item:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

/* Phase 2: Notification Center */
.notification-item {
  animation: slide-in-right 0.3s ease-out;
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.notification-badge {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Phase 2: Dashboard Customization */
.widget-drag-handle {
  cursor: grab;
}

.widget-drag-handle:active {
  cursor: grabbing;
}

.widget-hidden {
  display: none !important;
}

/* Phase 2: Advanced Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
  }
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  appearance: none;
  background-color: #cbd5e1;
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-switch:checked {
  background-color: #3b82f6;
}

.toggle-switch::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background-color: white;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch:checked::before {
  transform: translateX(20px);
}

/* Phase 3: Drag and Drop Widget Reordering */
.widget-draggable {
  cursor: grab;
  transition: transform 0.2s ease;
}

.widget-draggable:active {
  cursor: grabbing;
}

.widget-dragging {
  opacity: 0.5;
  transform: scale(0.95);
  z-index: 1000;
}

.widget-drop-zone {
  border: 2px dashed #3b82f6;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  min-height: 100px;
  transition: all 0.2s ease;
}

.widget-drag-handle {
  cursor: grab;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.widget-drag-handle:hover {
  opacity: 1;
}

.widget-drag-handle:active {
  cursor: grabbing;
}

/* Phase 3: Widget Size Customization */
.widget-size-small {
  grid-column: span 1;
}

.widget-size-medium {
  grid-column: span 2;
}

.widget-size-large {
  grid-column: span 3;
}

.widget-size-full {
  grid-column: span 4;
}

/* Phase 3: Advanced Filter Styles */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background-color: #e0e7ff;
  border: 1px solid #c7d2fe;
  border-radius: 16px;
  font-size: 0.875rem;
  color: #4338ca;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-chip:hover {
  background-color: #c7d2fe;
}

.filter-chip.active {
  background-color: #4338ca;
  color: white;
  border-color: #4338ca;
}

.filter-chip .remove {
  margin-left: 4px;
  opacity: 0.7;
}

.filter-chip .remove:hover {
  opacity: 1;
}

/* Phase 3: Widget Settings Panel */
.widget-settings-panel {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 12px;
  min-width: 200px;
  z-index: 50;
  margin-top: 4px;
}

[data-theme="dark"] .widget-settings-panel {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
}

/* Phase 3: Size Selector */
.size-selector {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.size-option {
  flex: 1;
  padding: 8px;
  text-align: center;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.75rem;
}

.size-option:hover {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.size-option.active {
  border-color: #3b82f6;
  background-color: #3b82f6;
  color: white;
}

/* ========== ADVANCED DASHBOARD ANIMATIONS ========== */

/* Parallax Background Effect */
@keyframes parallax-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.parallax-bg {
  background-size: 200% 200%;
  animation: parallax-shift 15s ease infinite;
}

/* 3D Card Transform */
@keyframes card-3d-rotate {
  0% {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  }
  50% {
    transform: perspective(1000px) rotateY(5deg) rotateX(2deg);
  }
  100% {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  }
}

.stat-card-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.stat-card-3d:hover {
  transform: perspective(1000px) rotateY(5deg) rotateX(-5deg) translateZ(20px);
}

/* Magnetic Hover Effect */
.magnetic-hover {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.magnetic-hover:hover {
  transform: scale(1.05) translateY(-8px);
}

/* Particle Background */
@keyframes particle-float {
  0%,
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0.3;
  }
  33% {
    transform: translateY(-30px) translateX(20px) rotate(120deg);
    opacity: 0.6;
  }
  66% {
    transform: translateY(30px) translateX(-20px) rotate(240deg);
    opacity: 0.3;
  }
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: particle-float 8s infinite ease-in-out;
}

/* Staggered Entrance Animation */
@keyframes stagger-fade-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.stagger-animate {
  opacity: 0;
  animation: stagger-fade-in 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.stagger-animate:nth-child(1) {
  animation-delay: 0.1s;
}
.stagger-animate:nth-child(2) {
  animation-delay: 0.2s;
}
.stagger-animate:nth-child(3) {
  animation-delay: 0.3s;
}
.stagger-animate:nth-child(4) {
  animation-delay: 0.4s;
}

/* Glow Pulse Animation */
@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4),
      0 0 40px rgba(59, 130, 246, 0.2), 0 0 60px rgba(59, 130, 246, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6),
      0 0 60px rgba(59, 130, 246, 0.4), 0 0 90px rgba(59, 130, 246, 0.2);
  }
}

.glow-pulse {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* Wave Animation */
@keyframes wave {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-10px) scaleY(1.1);
  }
}

.wave-animate {
  animation: wave 2s ease-in-out infinite;
}

/* Slide In from Different Directions */
@keyframes slide-in-top {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-bottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left-enhanced {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right-enhanced {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-top {
  animation: slide-in-top 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.animate-slide-bottom {
  animation: slide-in-bottom 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.animate-slide-left-enhanced {
  animation: slide-in-left-enhanced 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.animate-slide-right-enhanced {
  animation: slide-in-right-enhanced 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Rotate and Scale */
@keyframes rotate-scale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.rotate-scale {
  animation: rotate-scale 4s linear infinite;
}

/* ========== ENHANCED DARK MODE ========== */

[data-theme="dark"] {
  --bg-primary: #0b1220;
  --bg-secondary: #111a2b;
  --bg-tertiary: #1b2537;
  --text-primary: #f5f7fb;
  --text-secondary: #cfd6e3;
  --text-tertiary: #9da8bd;
  --border-color: #2c3750;
  --shadow-color: rgba(0, 0, 0, 0.45);
  --accent-color: #4f8bff;
  --accent-hover: #3b6fe0;
}

:root {
  --transition-speed: 180ms;
}

a,
button,
.stat-card,
.quick-action-card,
.nav-item,
.filter-chip {
  transition: background-color var(--transition-speed) ease,
    color var(--transition-speed) ease,
    border-color var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease,
    transform var(--transition-speed) ease;
}

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

[data-theme="dark"] body {
  background: radial-gradient(
    circle at 20% 20%,
    #0f1828 0%,
    #0b1220 45%,
    #0a0f1c 100%
  );
  color: var(--text-primary);
}

[data-theme="dark"] #teacher-dashboard {
  background: var(--bg-secondary);
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 8px 24px var(--shadow-color);
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .quick-action-card {
  background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
  box-shadow: 0 14px 30px var(--shadow-color);
}

[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .quick-action-card:hover {
  box-shadow: 0 20px 40px var(--shadow-color), 0 0 24px rgba(79, 139, 255, 0.25);
  transform: translateY(-3px);
}

[data-theme="dark"] .quick-action-card {
  box-shadow: 0 14px 30px var(--shadow-color);
}

[data-theme="dark"] .quick-action-card:hover {
  box-shadow: 0 20px 40px var(--shadow-color), 0 0 24px rgba(79, 139, 255, 0.25);
}

[data-theme="dark"] .glass-effect {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .text-gray-800 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-600 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-500 {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .border-gray-200 {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .activity-feed-item {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="dark"] .activity-feed-item:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-color);
  box-shadow: 0 4px 12px rgba(79, 139, 255, 0.2);
}

[data-theme="dark"] .filter-chip {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .filter-chip:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-color);
}

[data-theme="dark"] .filter-chip.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #0b1220;
}

/* Dark Mode Welcome Hero */
[data-theme="dark"] .animate-gradient-shift {
  background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #9f1239 100%);
  opacity: 0.9;
}

/* Dark Mode Top Bar */
[data-theme="dark"] #teacher-topbar {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 2px 8px var(--shadow-color);
}

/* Dark Mode Sidebar */
[data-theme="dark"] .bg-indigo-600 {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .nav-item {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .nav-item:hover {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Assessment Modal - Ensure it covers everything */
#assessment-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: linear-gradient(to bottom right, #f9fafb, #f3f4f6) !important;
}

/* Hide teacher dashboard when assessment modal is open */
#assessment-modal[style*="flex"] ~ #teacher-dashboard,
body:has(#assessment-modal[style*="flex"]) #teacher-dashboard {
  display: none !important;
  visibility: hidden !important;
}

/* Dark Mode Assignment Dashboard */
[data-theme="dark"] #teacher-assessment-dashboard {
  background: var(--bg-secondary);
}

[data-theme="dark"] #teacher-assessment-dashboard h3 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #teacher-assessment-dashboard p {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] #manual-create-test-btn,
[data-theme="dark"] #ai-create-test-btn {
  box-shadow: 0 4px 12px var(--shadow-color);
}

[data-theme="dark"] #manual-create-test-btn {
  background: var(--bg-tertiary) !important;
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
}

[data-theme="dark"] #manual-create-test-btn:hover {
  background: var(--accent-color) !important;
  color: white !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] #ai-create-test-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] #ai-create-test-btn:hover {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* Dark Mode Welcome Card */
[data-theme="dark"] .dark-mode-welcome-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .dark-mode-welcome-card .bg-gradient-to-br {
  background: linear-gradient(
    135deg,
    #1e293b 0%,
    #0f172a 50%,
    #1e293b 100%
  ) !important;
}

/* Dark Mode Assessment Cards */
[data-theme="dark"] .dark-mode-assessment-card {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 6px var(--shadow-color);
}

[data-theme="dark"] .dark-mode-assessment-card:hover {
  box-shadow: 0 8px 16px var(--shadow-color), 0 0 20px rgba(59, 130, 246, 0.2);
  border-color: var(--accent-color) !important;
}

[data-theme="dark"] .dark-mode-text-primary {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #assessment-list-container .bg-white {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 6px var(--shadow-color);
}

[data-theme="dark"] #assessment-list-container .bg-white:hover {
  box-shadow: 0 8px 16px var(--shadow-color), 0 0 20px rgba(59, 130, 246, 0.2);
  border-color: var(--accent-color) !important;
}

[data-theme="dark"] #assessment-list-container h4 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #assessment-list-container .text-gray-600,
[data-theme="dark"] #assessment-list-container .text-gray-500 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] #assessment-list-container .bg-gray-100 {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}

[data-theme="dark"] #assessment-list-container .bg-indigo-100 {
  background: rgba(59, 130, 246, 0.2) !important;
  color: var(--accent-color) !important;
}

/* Dark Mode Forms and Inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] input[type="time"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-tertiary) !important;
}

/* Dark Mode AI Assessment Creator - Complete Styling */
[data-theme="dark"] #ai-assessment-creator {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] #ai-assessment-creator .bg-white,
[data-theme="dark"] #ai-assessment-creator .bg-gradient-to-br {
  background: #1e293b !important;
}

[data-theme="dark"] #ai-assessment-creator .bg-gray-50 {
  background: #0f172a !important;
}

[data-theme="dark"] #ai-assessment-creator .border-gray-200 {
  border-color: #334155 !important;
}

[data-theme="dark"] #ai-assessment-creator h3,
[data-theme="dark"] #ai-assessment-creator h4 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #ai-assessment-creator p,
[data-theme="dark"] #ai-assessment-creator label,
[data-theme="dark"] #ai-assessment-creator .text-gray-500,
[data-theme="dark"] #ai-assessment-creator .text-gray-600,
[data-theme="dark"] #ai-assessment-creator .text-gray-700 {
  color: #cbd5e1 !important;
}

[data-theme="dark"] #ai-assessment-creator .text-gray-800,
[data-theme="dark"] #ai-assessment-creator .text-gray-900 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #ai-assessment-creator input,
[data-theme="dark"] #ai-assessment-creator select,
[data-theme="dark"] #ai-assessment-creator textarea {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] #ai-assessment-creator input:focus,
[data-theme="dark"] #ai-assessment-creator select:focus,
[data-theme="dark"] #ai-assessment-creator textarea:focus {
  background: #1e293b !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  outline: none !important;
}

[data-theme="dark"] #ai-assessment-creator input::placeholder,
[data-theme="dark"] #ai-assessment-creator textarea::placeholder {
  color: #64748b !important;
}

[data-theme="dark"] #ai-assessment-creator .bg-white\/95 {
  background: rgba(30, 41, 59, 0.95) !important;
}

[data-theme="dark"] #ai-assessment-creator .border-green-200 {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .ai-tab-btn {
  color: #94a3b8 !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
}

[data-theme="dark"] .ai-tab-btn.border-green-600 {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border-bottom-color: #10b981 !important;
}

[data-theme="dark"] .ai-tab-btn:hover {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] #ai-assessment-creator .bg-green-50 {
  background: rgba(16, 185, 129, 0.1) !important;
}

[data-theme="dark"] #ai-assessment-creator button.bg-white {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] #ai-assessment-creator button.bg-white:hover {
  background: #475569 !important;
  border-color: #64748b !important;
}

[data-theme="dark"] #ai-assessment-creator .border-t,
[data-theme="dark"] #ai-assessment-creator .border-b,
[data-theme="dark"] #ai-assessment-creator hr {
  border-color: #334155 !important;
}

[data-theme="dark"] #ai-assessment-creator .bg-red-100 {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] #ai-assessment-creator .text-red-700 {
  color: #fca5a5 !important;
}

[data-theme="dark"] #ai-assessment-creator input[type="checkbox"],
[data-theme="dark"] #ai-assessment-creator input[type="radio"] {
  accent-color: #10b981 !important;
}

/* Dark Mode Manual Assessment Creator - Complete Styling */
[data-theme="dark"] #manual-assessment-creator {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] #manual-assessment-creator .bg-white,
[data-theme="dark"] #manual-assessment-creator .bg-gradient-to-br {
  background: #1e293b !important;
}

[data-theme="dark"] #manual-assessment-creator .bg-gray-50 {
  background: #0f172a !important;
}

[data-theme="dark"] #manual-assessment-creator .bg-gray-200 {
  background: #334155 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] #manual-assessment-creator .bg-gray-200:hover {
  background: #475569 !important;
}

[data-theme="dark"] #manual-assessment-creator .border-gray-200 {
  border-color: #334155 !important;
}

[data-theme="dark"] #manual-assessment-creator h3,
[data-theme="dark"] #manual-assessment-creator h4 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #manual-assessment-creator p,
[data-theme="dark"] #manual-assessment-creator label,
[data-theme="dark"] #manual-assessment-creator .text-gray-500,
[data-theme="dark"] #manual-assessment-creator .text-gray-600,
[data-theme="dark"] #manual-assessment-creator .text-gray-700 {
  color: #cbd5e1 !important;
}

[data-theme="dark"] #manual-assessment-creator .text-gray-800,
[data-theme="dark"] #manual-assessment-creator .text-gray-900 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #manual-assessment-creator input,
[data-theme="dark"] #manual-assessment-creator select,
[data-theme="dark"] #manual-assessment-creator textarea {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] #manual-assessment-creator input:focus,
[data-theme="dark"] #manual-assessment-creator select:focus,
[data-theme="dark"] #manual-assessment-creator textarea:focus {
  background: #1e293b !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

[data-theme="dark"] #manual-assessment-creator input::placeholder,
[data-theme="dark"] #manual-assessment-creator textarea::placeholder {
  color: #64748b !important;
}

[data-theme="dark"] #manual-assessment-creator .bg-white\/95 {
  background: rgba(30, 41, 59, 0.95) !important;
}

[data-theme="dark"] #manual-assessment-creator .border-blue-200 {
  border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .tab-btn {
  color: #94a3b8 !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
}

[data-theme="dark"] .tab-btn.border-indigo-600 {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #6366f1 !important;
  border-bottom-color: #6366f1 !important;
}

[data-theme="dark"] .tab-btn:hover {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] #manual-assessment-creator .bg-indigo-50 {
  background: rgba(99, 102, 241, 0.1) !important;
}

[data-theme="dark"] #manual-assessment-creator button.bg-white {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] #manual-assessment-creator button.bg-white:hover {
  background: #475569 !important;
  border-color: #64748b !important;
}

[data-theme="dark"] #manual-assessment-creator .border-t,
[data-theme="dark"] #manual-assessment-creator .border-b,
[data-theme="dark"] #manual-assessment-creator hr {
  border-color: #334155 !important;
}

[data-theme="dark"] #manual-assessment-creator .bg-red-100 {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] #manual-assessment-creator .text-red-700 {
  color: #fca5a5 !important;
}

[data-theme="dark"] #manual-assessment-creator input[type="checkbox"],
[data-theme="dark"] #manual-assessment-creator input[type="radio"] {
  accent-color: #6366f1 !important;
}

/* Dark Mode Modals */
[data-theme="dark"] .bg-gray-800.bg-opacity-75 {
  background: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] #assessment-modal .bg-white,
[data-theme="dark"] #gradebook-modal .bg-white,
[data-theme="dark"] #attendance-modal .bg-white,
[data-theme="dark"] #ai-assistant-modal .bg-white,
[data-theme="dark"] #student-details-modal .bg-white,
[data-theme="dark"] #what-if-modal .bg-white,
[data-theme="dark"] #add-user-modal .bg-white,
[data-theme="dark"] #assign-test-modal .bg-white,
[data-theme="dark"] #grade-details-modal .bg-white,
[data-theme="dark"] #assignment-details-modal .bg-white,
[data-theme="dark"] #schedule-manager-modal .bg-white,
[data-theme="dark"] #confirmation-modal .bg-white,
[data-theme="dark"] #password-modal .bg-white,
[data-theme="dark"] #bulk-grade-entry-modal .bg-white,
[data-theme="dark"] #grade-analytics-modal .bg-white,
[data-theme="dark"] #csv-import-modal .bg-white,
[data-theme="dark"] #missing-assignment-tracker-modal .bg-white,
[data-theme="dark"] #grade-templates-modal .bg-white,
[data-theme="dark"] #create-template-modal .bg-white,
[data-theme="dark"] #messaging-modal .bg-white {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-scroll-area {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .modal-scroll-area::-webkit-scrollbar-track {
  background: var(--bg-secondary) !important;
}

[data-theme="dark"] .modal-scroll-area::-webkit-scrollbar-thumb {
  background: var(--border-color) !important;
}

[data-theme="dark"] .modal-scroll-area::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary) !important;
}

/* Dark Mode Buttons */
[data-theme="dark"] button.bg-blue-600,
[data-theme="dark"] button.bg-green-600,
[data-theme="dark"] button.bg-red-600,
[data-theme="dark"] button.bg-yellow-600,
[data-theme="dark"] button.bg-indigo-600 {
  box-shadow: 0 4px 12px var(--shadow-color);
}

[data-theme="dark"] button.bg-blue-600:hover,
[data-theme="dark"] button.bg-green-600:hover,
[data-theme="dark"] button.bg-red-600:hover,
[data-theme="dark"] button.bg-yellow-600:hover,
[data-theme="dark"] button.bg-indigo-600:hover {
  box-shadow: 0 6px 20px var(--shadow-color);
}

[data-theme="dark"] button.bg-white {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] button.bg-white:hover {
  background: var(--bg-secondary) !important;
}

/* Dark Mode Tables */
[data-theme="dark"] table {
  color: var(--text-primary) !important;
}

[data-theme="dark"] thead.bg-gray-100 {
  background: var(--bg-secondary) !important;
}

[data-theme="dark"] tbody.bg-white {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] th {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] td {
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Dark Mode Cards and Containers */
[data-theme="dark"] .rounded-xl,
[data-theme="dark"] .rounded-lg,
[data-theme="dark"] .rounded-md {
  box-shadow: 0 4px 6px var(--shadow-color);
}

[data-theme="dark"] .shadow-md {
  box-shadow: 0 4px 6px var(--shadow-color) !important;
}

[data-theme="dark"] .shadow-lg {
  box-shadow: 0 10px 15px var(--shadow-color) !important;
}

[data-theme="dark"] .shadow-xl {
  box-shadow: 0 20px 25px var(--shadow-color) !important;
}

[data-theme="dark"] .shadow-2xl {
  box-shadow: 0 25px 50px var(--shadow-color) !important;
}

/* Dark Mode Badges and Tags */
[data-theme="dark"] .bg-gray-100 {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .bg-blue-100 {
  background: rgba(59, 130, 246, 0.2) !important;
  color: var(--accent-color) !important;
}

[data-theme="dark"] .bg-green-100 {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
}

[data-theme="dark"] .bg-red-100 {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
}

[data-theme="dark"] .bg-yellow-100 {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #eab308 !important;
}

[data-theme="dark"] .bg-indigo-100 {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #6366f1 !important;
}

/* Dark Mode Links */
[data-theme="dark"] a.text-blue-600 {
  color: var(--accent-color) !important;
}

[data-theme="dark"] a.text-blue-600:hover {
  color: var(--accent-hover) !important;
}

/* Dark Mode Dividers */
[data-theme="dark"] .border-gray-200 {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .divide-gray-200 > * {
  border-color: var(--border-color) !important;
}

/* Dark Mode Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-secondary) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-color) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary) !important;
}

/* ========== PROFESSIONAL DARK MODE FOR SPECIFIC MODALS ========== */

/* Gradebook Dark Mode - Clean & Professional */
[data-theme="dark"] #gradebook-modal {
  background: #0f172a !important;
}

[data-theme="dark"] #gradebook-modal .bg-white {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] #gradebook-modal .p-4.border-b {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #gradebook-modal #gradebook-title {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] #gradebook-modal .bg-gray-50 {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] #gradebook-modal .bg-gray-50:hover {
  background: #334155 !important;
  border-color: #3b82f6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

[data-theme="dark"] #gradebook-modal table {
  background: #1e293b !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

[data-theme="dark"] #gradebook-modal thead {
  background: #0f172a !important;
}

[data-theme="dark"] #gradebook-modal thead th {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-bottom: 2px solid #334155 !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
}

[data-theme="dark"] #gradebook-modal tbody tr {
  background: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] #gradebook-modal tbody tr:hover {
  background: #334155 !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] #gradebook-modal tbody td {
  color: #cbd5e1 !important;
  border-color: #334155 !important;
  padding: 12px 16px !important;
}

[data-theme="dark"] #gradebook-modal .bg-white.rounded-lg.shadow-md {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #gradebook-modal input.grade-input,
[data-theme="dark"] #gradebook-modal select {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] #gradebook-modal input.grade-input:focus,
[data-theme="dark"] #gradebook-modal select:focus {
  background: #1e293b !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

[data-theme="dark"] #gradebook-modal .text-gray-600,
[data-theme="dark"] #gradebook-modal .text-gray-500 {
  color: #94a3b8 !important;
}

[data-theme="dark"] #gradebook-modal .text-gray-800 {
  color: #e2e8f0 !important;
}

[data-theme="dark"]
  #gradebook-modal
  button:not(.bg-blue-600):not(.bg-green-600):not(.bg-red-600) {
  background: #334155 !important;
  color: #e2e8f0 !important;
  border: 1px solid #475569 !important;
}

[data-theme="dark"]
  #gradebook-modal
  button:hover:not(.bg-blue-600):not(.bg-green-600):not(.bg-red-600) {
  background: #475569 !important;
  border-color: #3b82f6 !important;
}

/* Attendance Modal Dark Mode Enhancements */
[data-theme="dark"] #attendance-modal {
  background: rgba(0, 0, 0, 0.85) !important;
}

[data-theme="dark"] #attendance-modal .p-4.border-b {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] #attendance-modal h2,
[data-theme="dark"] #attendance-modal h3 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #attendance-modal .bg-white.rounded-lg.shadow-md {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 6px var(--shadow-color) !important;
}

[data-theme="dark"] #attendance-stats-cards .bg-white {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] #attendance-stats-cards .text-gray-600 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] #attendance-modal table thead th {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] #attendance-modal table tbody {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] #attendance-modal table tbody tr {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] #attendance-modal table tbody tr:hover {
  background: var(--bg-secondary) !important;
}

[data-theme="dark"] #attendance-modal .attendance-btn {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  transition: all 0.2s ease;
}

[data-theme="dark"] #attendance-modal .attendance-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

[data-theme="dark"] #attendance-modal .attendance-p {
  background-color: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
  border-color: #10b981 !important;
}

[data-theme="dark"] #attendance-modal .attendance-a {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}

[data-theme="dark"] #attendance-modal .attendance-t {
  background-color: rgba(234, 179, 8, 0.2) !important;
  color: #eab308 !important;
  border-color: #eab308 !important;
}

[data-theme="dark"] #attendance-modal .bg-red-50 {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] #attendance-modal .text-red-800,
[data-theme="dark"] #attendance-modal .text-red-600 {
  color: #fca5a5 !important;
}

[data-theme="dark"] #attendance-modal input[type="date"] {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] #attendance-modal input[type="date"]:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Messaging Modal Dark Mode - Clean & Professional */
[data-theme="dark"] #messaging-modal {
  background: rgba(0, 0, 0, 0.9) !important;
}

[data-theme="dark"] #messaging-modal .bg-white {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] #messaging-modal .p-4.border-b {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #messaging-modal h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .messaging-sidebar {
  background: #0f172a !important;
  border-right: 1px solid #334155 !important;
}

[data-theme="dark"] .compose-button {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] .compose-button:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-2px) !important;
}

[data-theme="dark"] .folder-button {
  color: #94a3b8 !important;
  border-color: transparent !important;
  transition: all 0.2s ease !important;
  border-radius: 8px !important;
  margin: 2px 0 !important;
}

[data-theme="dark"] .folder-button:hover {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .folder-button.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .folder-badge {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
  border-radius: 12px !important;
}

[data-theme="dark"] .messaging-main {
  background: #0f172a !important;
}

[data-theme="dark"] .messaging-toolbar {
  background: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
  padding: 12px 16px !important;
}

[data-theme="dark"] .messaging-toolbar button {
  color: #94a3b8 !important;
  transition: all 0.2s ease !important;
  border-radius: 6px !important;
}

[data-theme="dark"] .messaging-toolbar button:hover {
  background: #334155 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .messaging-toolbar input {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
}

[data-theme="dark"] .messaging-toolbar input:focus {
  background: #1e293b !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

[data-theme="dark"] .messages-list {
  background: #0f172a !important;
}

[data-theme="dark"] .message-item {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-left: 3px solid transparent !important;
  color: #e2e8f0 !important;
  transition: all 0.2s ease !important;
  margin-bottom: 4px !important;
  border-radius: 6px !important;
}

[data-theme="dark"] .message-item:hover {
  background: #334155 !important;
  border-color: #475569 !important;
  transform: translateX(4px) !important;
}

[data-theme="dark"] .message-item.unread {
  background: rgba(59, 130, 246, 0.1) !important;
  border-left-color: #3b82f6 !important;
}

[data-theme="dark"] .message-item .message-sender {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .message-item .message-subject {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .message-item .message-preview {
  color: #94a3b8 !important;
}

[data-theme="dark"] .compose-view {
  background: #0f172a !important;
}

[data-theme="dark"] .compose-header {
  background: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
  padding: 16px !important;
}

[data-theme="dark"] .compose-header h3 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .compose-view input,
[data-theme="dark"] .compose-view textarea {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
}

[data-theme="dark"] .compose-view input:focus,
[data-theme="dark"] .compose-view textarea:focus {
  background: #334155 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

/* Message Detail View Dark Mode - Complete */
[data-theme="dark"] .message-view {
  background: #0f172a !important;
}

[data-theme="dark"] .message-view .bg-white {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .message-header {
  background: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
  padding: 16px 24px !important;
}

[data-theme="dark"] .message-header-subject {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .message-header-meta {
  color: #94a3b8 !important;
}

[data-theme="dark"] .message-header-meta span,
[data-theme="dark"] .message-header-meta div {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .message-body {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  padding: 20px 24px !important;
  line-height: 1.6 !important;
}

[data-theme="dark"] .message-view h3,
[data-theme="dark"] .message-view h4 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .message-view p,
[data-theme="dark"] .message-view .text-gray-600,
[data-theme="dark"] .message-view .text-gray-500 {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .message-view .text-gray-800 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .message-view .border-gray-200 {
  border-color: #334155 !important;
}

[data-theme="dark"] .message-view button {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .message-view button:hover {
  background: #475569 !important;
  border-color: #3b82f6 !important;
}

/* Complete Messaging Dark Mode - All Components */
[data-theme="dark"] .messaging-container {
  background: #0f172a !important;
}

[data-theme="dark"] .message-checkbox {
  accent-color: #3b82f6 !important;
}

[data-theme="dark"] .star-message-btn {
  color: #94a3b8 !important;
}

[data-theme="dark"] .star-message-btn:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #3b82f6 !important;
}

[data-theme="dark"] .star-message-btn.starred {
  color: #fbbf24 !important;
}

[data-theme="dark"] .message-item.selected {
  background: rgba(59, 130, 246, 0.15) !important;
  border-left: 3px solid #3b82f6 !important;
}

[data-theme="dark"] .message-date {
  color: #94a3b8 !important;
}

[data-theme="dark"] .compose-form {
  background: #0f172a !important;
}

[data-theme="dark"] .compose-field {
  background: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .compose-field:focus {
  background: #334155 !important;
  border-bottom-color: #3b82f6 !important;
}

[data-theme="dark"] .compose-field::placeholder {
  color: #64748b !important;
}

[data-theme="dark"] .compose-body {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: none !important;
}

[data-theme="dark"] .compose-body::placeholder {
  color: #64748b !important;
}

[data-theme="dark"] .compose-body:focus {
  background: #334155 !important;
  outline: none !important;
}

[data-theme="dark"] #compose-to,
[data-theme="dark"] #compose-cc,
[data-theme="dark"] #compose-bcc,
[data-theme="dark"] #compose-subject {
  background: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] #compose-to:focus,
[data-theme="dark"] #compose-cc:focus,
[data-theme="dark"] #compose-bcc:focus,
[data-theme="dark"] #compose-subject:focus {
  background: #334155 !important;
  border-bottom-color: #3b82f6 !important;
}

[data-theme="dark"] #compose-body {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] #compose-body:focus {
  background: #334155 !important;
}

[data-theme="dark"] .message-item .message-checkbox {
  accent-color: #3b82f6 !important;
}

[data-theme="dark"] #message-detail-content {
  background: #0f172a !important;
}

[data-theme="dark"] #message-detail-content .bg-white {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] #messages-list-view {
  background: #0f172a !important;
}

[data-theme="dark"] #search-messages-input::placeholder {
  color: #64748b !important;
}

[data-theme="dark"] .folder-button i {
  color: inherit !important;
}

[data-theme="dark"] .messaging-toolbar .text-gray-600 {
  color: #94a3b8 !important;
}

[data-theme="dark"] .messaging-toolbar .text-blue-600 {
  color: #60a5fa !important;
}

[data-theme="dark"] .messaging-toolbar .text-red-600 {
  color: #f87171 !important;
}

[data-theme="dark"] .messaging-toolbar button.text-gray-600:hover {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .messaging-toolbar button.text-blue-600:hover {
  color: #93c5fd !important;
}

[data-theme="dark"] .messaging-toolbar button.text-red-600:hover {
  color: #fca5a5 !important;
}

[data-theme="dark"] .ai-assistant-panel {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
}

[data-theme="dark"] .ai-assistant-header {
  border-bottom: 1px solid #334155 !important;
  padding: 12px 16px !important;
}

[data-theme="dark"] .ai-assistant-header h4 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .ai-action-btn {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] .ai-action-btn:hover {
  background: #1e293b !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Live Monitor Modal Dark Mode - Clean & Professional */
[data-theme="dark"] #live-monitor-modal {
  background: rgba(0, 0, 0, 0.9) !important;
}

[data-theme="dark"] #live-monitor-modal .bg-white {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] #live-monitor-modal .p-4.border-b {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #live-monitor-modal h2 {
  color: #ffffff !important;
}

[data-theme="dark"] #live-monitor-modal .bg-gray-50 {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] #live-monitor-modal .bg-white.rounded-lg {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #live-monitor-modal .text-gray-600,
[data-theme="dark"] #live-monitor-modal .text-gray-500 {
  color: #94a3b8 !important;
}

[data-theme="dark"] #live-monitor-modal .text-gray-800 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #live-monitor-modal table {
  background: #1e293b !important;
}

[data-theme="dark"] #live-monitor-modal table thead {
  background: #0f172a !important;
}

[data-theme="dark"] #live-monitor-modal table thead th {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-bottom: 2px solid #334155 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] #live-monitor-modal table tbody {
  background: #1e293b !important;
}

[data-theme="dark"] #live-monitor-modal table tbody tr {
  border-bottom: 1px solid #334155 !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] #live-monitor-modal table tbody tr:hover {
  background: #334155 !important;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] #live-monitor-modal table tbody td {
  color: #cbd5e1 !important;
}

[data-theme="dark"] #live-monitor-modal button.bg-white {
  background: #334155 !important;
  border: 2px solid #475569 !important;
  color: #e2e8f0 !important;
  transition: all 0.2s ease !important;
  border-radius: 8px !important;
}

[data-theme="dark"] #live-monitor-modal button.bg-white:hover {
  background: #475569 !important;
  border-color: #6366f1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] #live-monitor-modal .live-monitor-tab-btn {
  color: #94a3b8 !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
}

[data-theme="dark"] #live-monitor-modal .live-monitor-tab-btn:hover {
  color: #e2e8f0 !important;
  background: #1e293b !important;
}

[data-theme="dark"] #live-monitor-modal .live-monitor-tab-btn.border-b-2 {
  border-bottom-color: #6366f1 !important;
  color: #6366f1 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] #live-monitor-modal .live-monitor-tab-content {
  background: #0f172a !important;
}

[data-theme="dark"] #live-monitor-modal .live-monitor-tab-content .bg-white {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
}

[data-theme="dark"] #live-monitor-modal input,
[data-theme="dark"] #live-monitor-modal select,
[data-theme="dark"] #live-monitor-modal textarea {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
}

[data-theme="dark"] #live-monitor-modal input:focus,
[data-theme="dark"] #live-monitor-modal select:focus,
[data-theme="dark"] #live-monitor-modal textarea:focus {
  background: #334155 !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
  outline: none !important;
}

[data-theme="dark"] #live-monitor-chat-container {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
}

[data-theme="dark"] #live-monitor-modal .bg-gray-100 {
  background: #334155 !important;
  color: #e2e8f0 !important;
  border: 1px solid #475569 !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] #live-monitor-modal .bg-gray-100:hover {
  background: #475569 !important;
  border-color: #6366f1 !important;
}

/* Pear Assessment Modal Dark Mode - Clean & Professional */
[data-theme="dark"] #assessment-modal {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

[data-theme="dark"] #assessment-modal .bg-white {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #assessment-modal h2,
[data-theme="dark"] #assessment-modal h3,
[data-theme="dark"] #assessment-modal #assessment-title {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] #assessment-modal p {
  color: #cbd5e1 !important;
}

[data-theme="dark"] #assessment-modal .text-gray-600,
[data-theme="dark"] #assessment-modal .text-gray-500 {
  color: #94a3b8 !important;
}

[data-theme="dark"] #assessment-modal .text-gray-800 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #assessment-modal button.bg-white {
  background: #334155 !important;
  border: 1px solid #475569 !important;
  color: #e2e8f0 !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] #assessment-modal button.bg-white:hover {
  background: #475569 !important;
  border-color: #3b82f6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] #assessment-modal #manual-create-test-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] #assessment-modal #manual-create-test-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-2px) !important;
}

[data-theme="dark"] #assessment-modal #ai-create-test-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] #assessment-modal #ai-create-test-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-2px) !important;
}

[data-theme="dark"] #assessment-modal .bg-blue-50,
[data-theme="dark"] #assessment-modal .bg-green-50,
[data-theme="dark"] #assessment-modal .bg-indigo-50 {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] #assessment-modal .bg-gray-50 {
  background: #0f172a !important;
}

[data-theme="dark"] #assessment-modal .border-gray-200 {
  border-color: #334155 !important;
}

[data-theme="dark"] #assessment-modal #assessment-list-container .bg-white {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"]
  #assessment-modal
  #assessment-list-container
  .bg-white:hover {
  background: #334155 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
  transform: translateY(-2px) !important;
}

[data-theme="dark"] #assessment-modal #assessment-list-container h4 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #assessment-modal #teacher-assessment-dashboard {
  background: #0f172a !important;
}

/* Enhanced Scrollbar for Dark Mode Modals */
[data-theme="dark"] .modal-scroll-area::-webkit-scrollbar {
  width: 10px;
}

[data-theme="dark"] .modal-scroll-area::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

[data-theme="dark"] .modal-scroll-area::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 5px;
}

[data-theme="dark"] .modal-scroll-area::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Dark Mode Close Buttons */
[data-theme="dark"] #close-gradebook-btn,
[data-theme="dark"] #close-attendance-modal-btn,
[data-theme="dark"] #close-messaging-modal-btn,
[data-theme="dark"] #close-live-monitor-btn {
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] #close-gradebook-btn:hover,
[data-theme="dark"] #close-attendance-modal-btn:hover,
[data-theme="dark"] #close-messaging-modal-btn:hover,
[data-theme="dark"] #close-live-monitor-btn:hover {
  color: rgba(255, 255, 255, 1) !important;
  transform: rotate(90deg);
}

/* ========== ADVANCED DARK MODE FEATURES ========== */

/* Dark Mode Theme Variants */
[data-theme="dark"][data-theme-variant="blue"] {
  --bg-primary: #0a1628;
  --bg-secondary: #0f1b2e;
  --bg-tertiary: #1a2332;
  --accent-color: #3b82f6;
}

[data-theme="dark"][data-theme-variant="purple"] {
  --bg-primary: #1a0f2e;
  --bg-secondary: #25143a;
  --bg-tertiary: #2d1b47;
  --accent-color: #8b5cf6;
}

[data-theme="dark"][data-theme-variant="green"] {
  --bg-primary: #0a1f14;
  --bg-secondary: #0f2a1c;
  --bg-tertiary: #1a3524;
  --accent-color: #10b981;
}

/* Dark Mode Intensity Control */
[data-theme="dark"][data-intensity="light"] {
  --bg-primary: #1e293b;
  --bg-secondary: #334155;
  --bg-tertiary: #475569;
}

[data-theme="dark"][data-intensity="medium"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
}

[data-theme="dark"][data-intensity="dark"] {
  --bg-primary: #020617;
  --bg-secondary: #0f172a;
  --bg-tertiary: #1e293b;
}

/* High Contrast Dark Mode */
[data-theme="dark"][data-contrast="high"] {
  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --border-color: #64748b;
}

/* Smooth Theme Transitions */
[data-theme="dark"] * {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Toggle Animation */
.dark-mode-toggle-animation {
  animation: dark-mode-pulse 0.6s ease-out;
}

@keyframes dark-mode-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
  }
  100% {
    transform: scale(1);
  }
}

/* ========== ADVANCED LIVE MONITOR FEATURES ========== */

/* Real-Time Activity Pulse Animation */
@keyframes activity-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

.activity-indicator-active {
  animation: activity-pulse 2s ease-in-out infinite;
  position: relative;
}

.activity-indicator-active::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: activity-pulse 2s ease-in-out infinite;
  opacity: 0.5;
}

/* Activity Heatmap */
.activity-heatmap-cell {
  transition: all 0.3s ease;
  cursor: pointer;
}

.activity-heatmap-cell:hover {
  transform: scale(1.1);
  z-index: 10;
}

.activity-heatmap-cell[data-activity="high"] {
  background: rgba(239, 68, 68, 0.8);
}

.activity-heatmap-cell[data-activity="medium"] {
  background: rgba(234, 179, 8, 0.8);
}

.activity-heatmap-cell[data-activity="low"] {
  background: rgba(16, 185, 129, 0.8);
}

/* Student Activity Card */
.student-activity-card {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.student-activity-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: currentColor;
  transition: width 0.3s ease;
}

.student-activity-card:hover::before {
  width: 100%;
  opacity: 0.1;
}

.student-activity-card.active {
  border-left: 4px solid #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.student-activity-card.idle {
  border-left: 4px solid #eab308;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.2);
}

.student-activity-card.offtask {
  border-left: 4px solid #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

/* Activity Progress Bar */
.activity-progress-bar {
  height: 4px;
  background: rgba(59, 130, 246, 0.2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.activity-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 2px;
  transition: width 0.5s ease;
  position: relative;
}

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

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

/* Activity Timeline */
.activity-timeline {
  position: relative;
  padding-left: 30px;
}

.activity-timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #334155;
}

.activity-timeline-item {
  position: relative;
  padding-bottom: 20px;
}

.activity-timeline-item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #1e293b;
  z-index: 1;
}

/* Risk Alert Badge */
.risk-alert-badge {
  animation: risk-pulse 1.5s ease-in-out infinite;
  position: relative;
}

@keyframes risk-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

/* Screen Thumbnail Preview */
.screen-thumbnail {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
}

.screen-thumbnail:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Activity Graph Container */
.activity-graph-container {
  background: #1e293b;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #334155;
}

/* Filter and Sort Controls */
.live-monitor-filters {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

/* Bulk Action Bar */
.bulk-action-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Activity Stats */
.activity-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.activity-stat-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid #475569;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.activity-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: #3b82f6;
}

/* Dark Mode for Advanced Features */
[data-theme="dark"] .activity-heatmap-cell {
  border: 1px solid #334155;
}

[data-theme="dark"] .student-activity-card {
  background: #1e293b;
  border: 1px solid #334155;
}

[data-theme="dark"] .activity-graph-container {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .live-monitor-filters {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .activity-stat-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-color: #475569;
}

[data-theme="dark"] .activity-timeline::before {
  background: #334155;
}

[data-theme="dark"] .activity-timeline-item::before {
  border-color: #1e293b;
}

/* Screen Monitor Modal Dark Mode */
[data-theme="dark"] #screen-monitor-modal {
  background: rgba(0, 0, 0, 0.9) !important;
}

[data-theme="dark"] #screen-monitor-modal .bg-white {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] #screen-monitor-modal .p-4.border-b {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
  border-bottom: none !important;
}

[data-theme="dark"] #screen-monitor-modal h2 {
  color: #ffffff !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-thumbnail {
  background: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-thumbnail:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-thumbnail.border-blue-500 {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] #screen-monitor-grid .text-gray-800 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #screen-monitor-grid .text-gray-500,
[data-theme="dark"] #screen-monitor-grid .text-gray-400 {
  color: #94a3b8 !important;
}

[data-theme="dark"] #screen-monitor-grid .bg-gray-100,
[data-theme="dark"] #screen-monitor-grid .bg-gradient-to-br {
  background: #0f172a !important;
  border-color: #334155 !important;
}

[data-theme="dark"] #screen-monitor-grid .bg-green-50 {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] #screen-monitor-grid .bg-yellow-50 {
  background: rgba(234, 179, 8, 0.1) !important;
  border-color: rgba(234, 179, 8, 0.3) !important;
}

[data-theme="dark"] #screen-monitor-grid .bg-red-50 {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] #screen-monitor-grid button {
  transition: all 0.2s ease !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-monitor-request-btn {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-monitor-request-btn:hover {
  background: #2563eb !important;
}

[data-theme="dark"]
  #screen-monitor-grid
  .screen-monitor-request-btn.bg-green-600 {
  background: #10b981 !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-monitor-lock-btn {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-monitor-lock-btn:hover {
  background: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-monitor-unlock-btn {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-monitor-unlock-btn:hover {
  background: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-monitor-view-btn {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-monitor-view-btn:hover {
  background: rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] #screen-monitor-grid .screen-monitor-checkbox {
  accent-color: #3b82f6 !important;
}

/* Fullscreen View Modal Dark Mode */
[data-theme="dark"] #student-fullscreen-view-modal {
  background: rgba(0, 0, 0, 0.98) !important;
}

[data-theme="dark"] #student-fullscreen-view-modal .bg-gray-900 {
  background: #0f172a !important;
}

[data-theme="dark"] #student-fullscreen-view-modal .bg-gray-800 {
  background: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] #student-fullscreen-view-modal h2 {
  color: #ffffff !important;
}

[data-theme="dark"] #student-fullscreen-view-modal .text-gray-400 {
  color: #94a3b8 !important;
}

[data-theme="dark"] #student-fullscreen-view-modal .text-gray-500 {
  color: #64748b !important;
}

[data-theme="dark"] #student-fullscreen-view-modal button {
  transition: all 0.2s ease !important;
}

[data-theme="dark"] #student-fullscreen-view-modal #fullscreen-refresh-btn {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

[data-theme="dark"]
  #student-fullscreen-view-modal
  #fullscreen-refresh-btn:hover {
  background: #2563eb !important;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
#gradebook-modal,
#ai-assistant-modal,
#assessment-modal,
#student-details-modal,
#what-if-modal,
#add-user-modal,
#assign-test-modal,
#grade-details-modal,
#assignment-details-modal,
#attendance-modal,
#schedule-manager-modal,
#confirmation-modal,
#password-modal,
#bulk-grade-entry-modal,
#grade-analytics-modal,
#csv-import-modal,
#missing-assignment-tracker-modal,
#grade-templates-modal,
#create-template-modal,
#messaging-modal,
#broadcast-message-modal,
#message-templates-modal,
#schedule-message-modal,
#group-messaging-modal,
#full-calendar-modal,
#global-search-modal,
#student-progress-modal,
#student-calendar-modal,
#study-planner-modal,
#view-your-work-modal,
#gpa-detail-modal,
#gpa-management-modal {
  display: none; /* Hidden by default */
}
/* Smooth scrolling for all modals */
* {
  scroll-behavior: smooth;
}
/* Fullscreen modal scrolling areas */
.modal-scroll-area {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #9ca3af #e5e7eb;
}
.modal-scroll-area::-webkit-scrollbar {
  width: 8px;
}
.modal-scroll-area::-webkit-scrollbar-track {
  background: #e5e7eb;
}
.modal-scroll-area::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 10px;
}
.modal-scroll-area::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}
/* Hide body scrollbar when modals are open */
body.modal-open {
  overflow: hidden;
}
html.modal-open {
  overflow: hidden;
}
/* Scroll-triggered fade-in animations */
.scroll-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Advanced Gradebook Design */
#gradebook-modal .bg-white {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
#gradebook-modal .p-4.border-b {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border-bottom: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
#gradebook-modal #gradebook-title {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#gradebook-modal .bg-gray-50 {
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
#gradebook-modal .bg-gray-50:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
#gradebook-modal table {
  border-collapse: separate;
  border-spacing: 0;
}
#gradebook-modal thead th {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #d1d5db;
}
#gradebook-modal tbody tr {
  transition: all 0.2s ease;
}
#gradebook-modal tbody tr:hover {
  background-color: #f9fafb;
  transform: scale(1.01);
}
#gradebook-modal tbody td {
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 12px;
}

/* Make gradebook header more horizontal/compact */
#gradebook-modal thead {
  height: auto !important;
}

#gradebook-modal thead th {
  padding: 6px 8px !important;
  line-height: 1.2 !important;
  height: auto !important;
  vertical-align: middle !important;
}

#gradebook-modal thead th:first-child {
  padding: 6px 12px !important;
}

#gradebook-modal thead th:last-child {
  padding: 6px 12px !important;
}
#gradebook-modal .bg-white.rounded-lg.shadow-md {
  background: white;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Enhanced button styles for gradebook */
#gradebook-modal button:not(#close-gradebook-btn) {
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#gradebook-modal button:not(#close-gradebook-btn):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
#gradebook-modal #close-gradebook-btn {
  color: white;
  transition: all 0.2s ease;
}
#gradebook-modal #close-gradebook-btn:hover {
  transform: rotate(90deg);
  color: #fee2e2;
}
/* Enhanced input fields */
#gradebook-modal input,
#gradebook-modal select {
  transition: all 0.2s ease;
  border: 1px solid #d1d5db;
}
#gradebook-modal input:focus,
#gradebook-modal select:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
/* Attendance, Live Monitor scroll animations */
#attendance-modal .modal-scroll-area > *,
#live-monitor-modal .modal-scroll-area > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
#attendance-modal .modal-scroll-area > *.visible,
#live-monitor-modal .modal-scroll-area > *.visible {
  opacity: 1;
  transform: translateY(0);
}
#screen-monitor-modal.hidden {
  display: none !important;
}
#screen-monitor-modal:not(.hidden) {
  display: flex !important;
}
.grade-input {
  width: 60px;
  text-align: center;
}
#ai-response-container p,
#ai-response-container li {
  margin-bottom: 0.75rem;
}
#ai-response-container h4 {
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
#ai-response-container ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 1rem;
}
/* Styles for Assessment Tool */
.assessment-option {
  transition: all 0.2s ease-in-out;
}
.assessment-option.selected {
  background-color: #4f46e5; /* indigo-600 */
  color: white;
  border-color: #4f46e5;
}
/* Correct/Incorrect styles for review */
.review-option.correct {
  border-left: 4px solid #22c55e; /* green-500 */
  background-color: #f0fdf4; /* green-50 */
}
.review-option.incorrect {
  border-left: 4px solid #ef4444; /* red-500 */
  background-color: #fef2f2; /* red-50 */
}
.review-option.selected-by-user::before {
  content: "Your Answer";
  font-size: 0.75rem;
  font-weight: 600;
  color: #4f46e5; /* indigo-600 */
  position: absolute;
  top: -10px;
  left: 10px;
  background: white;
  padding: 0 4px;
}

.what-if-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4f46e5;
  cursor: pointer;
  border-radius: 50%;
}
.attendance-btn {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 0.8rem;
  min-width: 32px;
  border: 1px solid transparent;
}
.attendance-btn.active {
  font-weight: 700;
}
.attendance-p {
  background-color: #dcfce7;
  color: #166534;
  border-color: #166534;
}
.attendance-a {
  background-color: #fee2e2;
  color: #991b1b;
  border-color: #991b1b;
}
.attendance-t {
  background-color: #fef9c3;
  color: #854d0e;
  border-color: #854d0e;
}

.timeline {
  position: relative;
  padding-left: 30px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-color: #d1d5db; /* gray-300 */
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #4f46e5; /* indigo-600 */
  border: 2px solid white;
}
/* Tab styling */
.tab-btn {
  transition: all 0.2s ease-in-out;
}
.tab-btn.active {
  border-color: #4f46e5;
  color: #4f46e5;
  font-weight: 600;
}
/* Sticky footer for gradebook */
#teacher-gradebook-view tfoot {
  position: sticky;
  bottom: 0;
  background-color: #e5e7eb; /* gray-200 */
  z-index: 10;
}
.grade-cell {
  cursor: pointer;
  position: relative;
}
.student-name-cell {
  cursor: pointer;
  font-weight: 500;
}
.student-name-cell:hover {
  background-color: #f9fafb; /* gray-50 */
  color: #4f46e5; /* indigo-600 */
}
.status-missing {
  background-color: #fef2f2;
}
.status-late {
  background-color: #fffbeb;
}
.status-excused {
  background-color: #f0fdf4;
}
.status-incomplete {
  background-color: #fafafa;
}
.comment-indicator {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background-color: #4f46e5;
  border-radius: 50%;
}

/* Gmail-like messaging styles */
.messaging-container {
  display: flex;
  height: 100%;
  background: #f8f9fa;
}
.messaging-sidebar {
  width: 220px;
  background: white;
  border-right: 1px solid #e0e0e0;
  padding: 16px 0;
  overflow-y: auto;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
.messaging-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
}
.messaging-toolbar {
  padding: 10px 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.messaging-list {
  flex: 1;
  overflow-y: auto;
  background: white;
}
.message-item {
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s ease;
  position: relative;
}
.message-item:hover {
  background: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.message-item.unread {
  background: #e8f0fe;
  border-left: 3px solid #1a73e8;
  font-weight: 600;
}
.message-item.unread .message-sender {
  color: #1a73e8;
  font-weight: 700;
}
.message-item.selected {
  background: #e8f0fe;
}
.message-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.star-message-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.star-message-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
.message-sender {
  min-width: 180px;
  max-width: 180px;
  font-weight: 500;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-subject {
  flex: 1;
  min-width: 0;
  color: #5f6368;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-preview {
  flex: 1;
  min-width: 0;
  color: #5f6368;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}
.message-date {
  min-width: 80px;
  text-align: right;
  color: #5f6368;
  font-size: 12px;
  font-weight: 500;
}
.compose-button {
  margin: 16px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.compose-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.4);
}
.compose-button:active {
  transform: translateY(0);
}
.folder-button {
  padding: 8px 16px;
  margin: 4px 16px;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #5f6368;
  font-size: 14px;
  transition: background 0.1s;
}
.folder-button:hover {
  background: #f1f3f4;
}
.folder-button.active {
  background: #e8f0fe;
  color: #1a73e8;
  font-weight: 600;
}
.folder-badge {
  margin-left: auto;
  background: #dadce0;
  color: #202124;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.message-view {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: white;
}
.message-header {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.message-header-subject {
  font-size: 22px;
  font-weight: 400;
  color: #202124;
  margin-bottom: 8px;
}
.message-header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: #5f6368;
}
.message-body {
  color: #202124;
  line-height: 1.6;
  white-space: pre-wrap;
}
.compose-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
}
.compose-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.compose-header h3 {
  color: white;
  margin: 0;
  font-weight: 600;
}
.compose-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.compose-field {
  padding: 14px 20px;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.compose-field:focus {
  border-bottom-color: #667eea;
}
.compose-body {
  flex: 1;
  padding: 20px;
  border: none;
  resize: none;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  line-height: 1.6;
}
/* AI Assistant Styles */
.ai-assistant-btn {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(139, 92, 246, 0.5);
  }
  50% {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.8);
  }
}

.ai-assistant-panel {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 2px solid #c4b5fd;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 6px rgba(139, 92, 246, 0.1);
}

.ai-assistant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid #ddd6fe;
}

.ai-assistant-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.ai-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: white;
  border: 2px solid #e9d5ff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
  color: #6b21a8;
}

.ai-action-btn:hover {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
  border-color: #a78bfa;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(139, 92, 246, 0.2);
}

.ai-action-btn i {
  font-size: 20px;
  color: #7c3aed;
}

.ai-assistant-result {
  background: white;
  border: 2px solid #a78bfa;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}

.ai-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9d5ff;
}

.ai-suggestion-text {
  background: #faf5ff;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #7c3aed;
  white-space: pre-wrap;
  line-height: 1.6;
  color: #4c1d95;
  max-height: 200px;
  overflow-y: auto;
}

.ai-assistant-loading {
  text-align: center;
  padding: 20px;
}

.compose-actions {
  padding: 12px 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: #f8f9fa;
}
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 4px;
}
.autocomplete-item {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s;
}
.autocomplete-item:hover {
  background: #f0f0f0;
}
.autocomplete-item.selected {
  background: #e8f0fe;
}

/* Advanced Dashboard Customization Styles */

/* Liquid Glass Effect */
.liquid-glass {
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.liquid-glass-dark {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Advanced Glass Effects */
.glass-effect-advanced {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Particle Background */
.particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
      circle at 20% 50%,
      rgba(99, 102, 241, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(139, 92, 246, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 20%,
      rgba(59, 130, 246, 0.1) 0%,
      transparent 50%
    );
  animation: particle-float 20s ease-in-out infinite;
}

@keyframes particle-float {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  33% {
    transform: translateY(-20px) translateX(10px);
  }
  66% {
    transform: translateY(10px) translateX(-10px);
  }
}

/* Mesh Gradient Background */
.mesh-gradient-bg {
  background: radial-gradient(
      at 0% 0%,
      rgba(99, 102, 241, 0.3) 0px,
      transparent 50%
    ),
    radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.3) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.3) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(236, 72, 153, 0.3) 0px, transparent 50%);
  background-size: 200% 200%;
  animation: mesh-move 15s ease infinite;
}

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

/* Noise Texture */
.noise-texture {
  position: relative;
}

.noise-texture::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
  opacity: 0.3;
  pointer-events: none;
}

/* 3D Card Transform */
.card-3d-transform {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.card-3d-transform:hover {
  transform: perspective(1000px) rotateY(5deg) rotateX(5deg) translateZ(10px);
}

/* Smooth Transitions */
.smooth-transitions * {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme Presets */
#teacher-dashboard[data-theme="dark"] {
  background-color: #1f2937;
  color: #f9fafb;
}

#teacher-dashboard[data-theme="dark"] .bg-white {
  background-color: #111827 !important;
  color: #f9fafb;
}

#teacher-dashboard[data-theme="ocean"] {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

#teacher-dashboard[data-theme="sunset"] {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

#teacher-dashboard[data-theme="forest"] {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

#teacher-dashboard[data-theme="purple"] {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
}

/* Toggle Switch */
.toggle-switch {
  appearance: none;
  width: 44px;
  height: 24px;
  background: #d1d5db;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

.toggle-switch:checked {
  background: #6366f1;
}

.toggle-switch::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}

.toggle-switch:checked::before {
  transform: translateX(20px);
}

/* Range Slider Styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Preview Card Animation */
.preview-card {
  transition: all 0.3s ease;
}

.dashboard-customized .quick-action-card,
.dashboard-customized .bg-white.rounded-xl,
.dashboard-customized .bg-white.rounded-lg {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-preset-btn.active {
  border-color: #6366f1 !important;
  background-color: #eef2ff;
}

/* Grade Analytics Dashboard Enhancements */
#grade-analytics-modal {
  animation: fadeIn 0.3s ease-out;
}

#grade-analytics-modal .bg-gradient-to-r {
  background-attachment: fixed;
}

#grade-analytics-modal canvas {
  max-height: 100%;
}

#grade-analytics-modal .hover\:shadow-xl:hover {
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

#at-risk-students-list .bg-gradient-to-r,
#top-performers-list .bg-gradient-to-r {
  transition: all 0.2s ease;
}

#at-risk-students-list .bg-gradient-to-r:hover,
#top-performers-list .bg-gradient-to-r:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#assignment-statistics-list > div {
  transition: all 0.3s ease;
}

#assignment-statistics-list > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========== STUDY PLANNER PROFESSIONAL DESIGN ========== */

/* Study Planner Container */
#study-planner-modal {
  animation: fadeIn 0.3s ease-out;
}

.study-planner-container {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

/* Header Styles */
.study-planner-header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
  position: relative;
  overflow: hidden;
}

.study-planner-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 25%,
    transparent 25%,
    transparent 75%,
    rgba(255, 255, 255, 0.1) 75%
  );
  background-size: 20px 20px;
  opacity: 0.1;
  pointer-events: none;
}

/* Tab Navigation */
.study-planner-tabs {
  position: relative;
  backdrop-filter: blur(10px);
}

.study-planner-tab {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.study-planner-tab:hover {
  background: linear-gradient(to bottom, rgba(99, 102, 241, 0.05), transparent);
  color: #6366f1;
}

.study-planner-tab.active {
  color: #6366f1;
}

.study-planner-tab-indicator {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.study-planner-tab.active .study-planner-tab-indicator {
  transform: scaleX(1);
}

.study-planner-tab:not(.active) .study-planner-tab-indicator {
  transform: scaleX(0);
}

/* Cards */
.study-planner-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.study-planner-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.5s;
}

.study-planner-card:hover::before {
  left: 100%;
}

.study-planner-card:hover {
  transform: translateY(-4px);
}

/* Upload Area */
.study-planner-upload-area {
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.study-planner-upload-area:hover {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  transform: scale(1.02);
}

/* Empty States */
.study-planner-empty-state {
  animation: fadeIn 0.5s ease-out;
}

/* Scrollbar Styling */
.study-planner-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.study-planner-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}

.study-planner-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
  border-radius: 10px;
  transition: background 0.3s;
}

.study-planner-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4f46e5, #7c3aed);
}

/* Button Animations */
#study-planner-modal button {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#study-planner-modal button:active {
  transform: scale(0.98);
}

/* Input Focus States */
#study-planner-modal input:focus,
#study-planner-modal select:focus,
#study-planner-modal textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Material List Items */
#uploaded-materials-list .material-item,
#classroom-materials-list .material-item {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Chat Messages */
#chatbot-messages .chat-message,
#login-chatbot-messages .chat-message {
  animation: fadeInUp 0.4s ease-out;
}

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

/* Study Plan Items */
#study-plan-list .study-plan-item {
  animation: slideInLeft 0.4s ease-out;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-left: 4px solid #6366f1;
  transition: all 0.3s ease;
}

#study-plan-list .study-plan-item:hover {
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
  transform: translateX(4px);
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Quiz Questions */
#quiz-container .quiz-question {
  animation: fadeIn 0.4s ease-out;
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  border: 2px solid #e9d5ff;
  transition: all 0.3s ease;
}

#quiz-container .quiz-question:hover {
  border-color: #a78bfa;
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

/* Podcast Player */
#podcast-player-container {
  animation: fadeIn 0.5s ease-out;
}

#podcast-audio-player {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Loading States */
.study-planner-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(99, 102, 241, 0.3);
  border-radius: 50%;
  border-top-color: #6366f1;
  animation: spin 1s ease-in-out infinite;
}

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

/* Badge Styles */
.material-badge,
.selected-material-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 2px solid #c7d2fe;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4338ca;
  transition: all 0.2s ease;
}

.material-badge:hover,
.selected-material-badge:hover {
  background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
  transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 768px) {
  .study-planner-header {
    padding: 1rem !important;
  }

  .study-planner-header h2 {
    font-size: 1.5rem !important;
  }

  .study-planner-tabs {
    flex-wrap: wrap;
    padding: 0.5rem !important;
  }

  .study-planner-tab {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* Dark Mode Support for Study Planner */
[data-theme="dark"] #study-planner-modal {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

[data-theme="dark"] .study-planner-header {
  background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #db2777 100%);
}

[data-theme="dark"] .study-planner-card,
[data-theme="dark"] .study-planner-tab-content {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .study-planner-empty-state {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .study-planner-tabs {
  background: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .study-planner-tab {
  color: #94a3b8 !important;
}

[data-theme="dark"] .study-planner-tab.active {
  color: #818cf8 !important;
}

[data-theme="dark"] #study-planner-modal input,
[data-theme="dark"] #study-planner-modal select,
[data-theme="dark"] #study-planner-modal textarea {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] #study-planner-modal input:focus,
[data-theme="dark"] #study-planner-modal select:focus,
[data-theme="dark"] #study-planner-modal textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* Material Card Styles */
.material-card {
  animation: fadeInUp 0.4s ease-out;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.material-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s;
}

.material-card:hover::before {
  left: 100%;
}

.material-card .action-btn {
  transition: all 0.2s ease;
}

.material-card .action-btn:hover {
  transform: translateY(-2px);
}

.material-card .material-action-btn {
  transition: all 0.2s ease;
}

.material-card .material-action-btn:hover {
  transform: scale(1.1);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Admin Dashboard Professional Animations & Styles */

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

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.6);
  }
}

/* ===== Admin Dashboard Container ===== */
#admin-dashboard {
  animation: fadeInUp 0.6s ease-out;
  position: relative;
  overflow-x: hidden;
}

#admin-dashboard::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 50%,
      rgba(99, 102, 241, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(139, 92, 246, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 0;
}

/* ===== School Settings Section ===== */
#school-settings-section {
  animation: fadeInDown 0.8s ease-out;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(99, 102, 241, 0.1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

#school-settings-section:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* ===== Header Section ===== */
#admin-dashboard > div:first-of-type {
  animation: fadeInDown 0.6s ease-out 0.1s both;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(99, 102, 241, 0.1);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

#admin-dashboard > div:first-of-type::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(99, 102, 241, 0.1),
    transparent
  );
  animation: shimmer 3s infinite;
}

/* ===== Action Buttons ===== */
#admin-dashboard button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
}

#admin-dashboard button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

#admin-dashboard button:hover::before {
  width: 300px;
  height: 300px;
}

#admin-dashboard button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#admin-dashboard button:active {
  transform: translateY(0) scale(0.98);
}

/* ===== Analytics Cards ===== */
#admin-dashboard .grid > div[class*="bg-gradient"] {
  animation: scaleIn 0.6s ease-out both;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#admin-dashboard .grid > div[class*="bg-gradient"]::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s;
}

#admin-dashboard .grid > div[class*="bg-gradient"]:hover::before {
  opacity: 1;
}

#admin-dashboard .grid > div[class*="bg-gradient"]:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

#admin-dashboard .grid > div[class*="bg-gradient"]:nth-child(1) {
  animation-delay: 0.1s;
}

#admin-dashboard .grid > div[class*="bg-gradient"]:nth-child(2) {
  animation-delay: 0.2s;
}

#admin-dashboard .grid > div[class*="bg-gradient"]:nth-child(3) {
  animation-delay: 0.3s;
}

#admin-dashboard .grid > div[class*="bg-gradient"]:nth-child(4) {
  animation-delay: 0.4s;
}

/* Icon animations in cards */
#admin-dashboard .grid > div[class*="bg-gradient"] .fa {
  animation: float 3s ease-in-out infinite;
}

#admin-dashboard .grid > div[class*="bg-gradient"]:nth-child(1) .fa {
  animation-delay: 0s;
}

#admin-dashboard .grid > div[class*="bg-gradient"]:nth-child(2) .fa {
  animation-delay: 0.5s;
}

#admin-dashboard .grid > div[class*="bg-gradient"]:nth-child(3) .fa {
  animation-delay: 1s;
}

#admin-dashboard .grid > div[class*="bg-gradient"]:nth-child(4) .fa {
  animation-delay: 1.5s;
}

/* ===== System Health & Search Section ===== */
#admin-dashboard
  .grid
  > div[class*="bg-white"]:not([class*="rounded-xl"]):not([id*="admin"]) {
  animation: fadeInLeft 0.8s ease-out both;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(99, 102, 241, 0.1);
  transition: all 0.3s ease;
}

#admin-dashboard
  .grid
  > div[class*="bg-white"]:not([class*="rounded-xl"]):not([id*="admin"]):hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

#admin-dashboard .grid > div[class*="lg:col-span-2"] {
  animation: fadeInRight 0.8s ease-out both;
}

/* ===== Charts Section ===== */
#admin-dashboard .grid > div canvas {
  animation: fadeInUp 1s ease-out 0.5s both;
}

/* ===== User Lists ===== */
#admin-dashboard #admin-admin-list,
#admin-dashboard #admin-teacher-list,
#admin-dashboard #admin-student-list {
  animation: fadeInUp 0.6s ease-out both;
}

#admin-dashboard #admin-admin-list > div,
#admin-dashboard #admin-teacher-list > div,
#admin-dashboard #admin-student-list > div {
  animation: slideInRight 0.5s ease-out both;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

#admin-dashboard #admin-admin-list > div::before,
#admin-dashboard #admin-teacher-list > div::before,
#admin-dashboard #admin-student-list > div::before {
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(99, 102, 241, 0.1),
    transparent
  );
  transition: left 0.5s;
}

#admin-dashboard #admin-admin-list > div:hover::before,
#admin-dashboard #admin-teacher-list > div:hover::before,
#admin-dashboard #admin-student-list > div:hover::before {
  left: 100%;
}

#admin-dashboard #admin-admin-list > div:hover,
#admin-dashboard #admin-teacher-list > div:hover,
#admin-dashboard #admin-student-list > div:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Stagger animation for list items */
#admin-dashboard #admin-admin-list > div:nth-child(1) {
  animation-delay: 0.1s;
}
#admin-dashboard #admin-admin-list > div:nth-child(2) {
  animation-delay: 0.2s;
}
#admin-dashboard #admin-admin-list > div:nth-child(3) {
  animation-delay: 0.3s;
}
#admin-dashboard #admin-admin-list > div:nth-child(4) {
  animation-delay: 0.4s;
}
#admin-dashboard #admin-admin-list > div:nth-child(5) {
  animation-delay: 0.5s;
}

#admin-dashboard #admin-teacher-list > div:nth-child(1) {
  animation-delay: 0.1s;
}
#admin-dashboard #admin-teacher-list > div:nth-child(2) {
  animation-delay: 0.2s;
}
#admin-dashboard #admin-teacher-list > div:nth-child(3) {
  animation-delay: 0.3s;
}
#admin-dashboard #admin-teacher-list > div:nth-child(4) {
  animation-delay: 0.4s;
}
#admin-dashboard #admin-teacher-list > div:nth-child(5) {
  animation-delay: 0.5s;
}

#admin-dashboard #admin-student-list > div:nth-child(1) {
  animation-delay: 0.1s;
}
#admin-dashboard #admin-student-list > div:nth-child(2) {
  animation-delay: 0.2s;
}
#admin-dashboard #admin-student-list > div:nth-child(3) {
  animation-delay: 0.3s;
}
#admin-dashboard #admin-student-list > div:nth-child(4) {
  animation-delay: 0.4s;
}
#admin-dashboard #admin-student-list > div:nth-child(5) {
  animation-delay: 0.5s;
}

/* ===== Activity Feed ===== */
#activity-feed > div {
  animation: fadeInLeft 0.5s ease-out both;
  transition: all 0.3s ease;
}

#activity-feed > div:hover {
  transform: translateX(5px);
  background-color: #f8fafc;
}

#activity-feed > div:nth-child(1) {
  animation-delay: 0.1s;
}
#activity-feed > div:nth-child(2) {
  animation-delay: 0.2s;
}
#activity-feed > div:nth-child(3) {
  animation-delay: 0.3s;
}
#activity-feed > div:nth-child(4) {
  animation-delay: 0.4s;
}
#activity-feed > div:nth-child(5) {
  animation-delay: 0.5s;
}

/* ===== Scroll-triggered animations ===== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Progress Bars ===== */
#storage-progress {
  position: relative;
  overflow: hidden;
}

#storage-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

/* ===== Badges & Counts ===== */
#admin-dashboard span[class*="bg-"]:not([class*="rounded-full"]) {
  animation: scaleIn 0.5s ease-out both;
}

#admin-dashboard .rounded-full {
  animation: pulse 2s ease-in-out infinite;
}

/* ===== Search Input ===== */
#admin-search {
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

#admin-search:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
  #admin-dashboard .grid > div[class*="bg-gradient"] {
    animation-delay: 0s !important;
  }

  #admin-dashboard #admin-admin-list > div,
  #admin-dashboard #admin-teacher-list > div,
  #admin-dashboard #admin-student-list > div {
    animation-delay: 0s !important;
  }
}

/* ===== Loading States ===== */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ===== Number Counter Animation ===== */
@keyframes countUp {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.count-up {
  animation: countUp 0.5s ease-out;
}

/* ===== Glass Morphism Effect ===== */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===== Smooth Scrolling ===== */
html {
  scroll-behavior: smooth;
}

/* ===== Enhanced Shadows ===== */
.shadow-glow {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.shadow-glow:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
}

/* ===== Parent Portal Styles (Scoped) ===== */
#parent-dashboard {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

#parent-dashboard * {
  box-sizing: border-box;
}

/* Sticky Header */
#parent-dashboard header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

#parent-dashboard .parent-tab {
  transition: all 0.2s ease;
  position: relative;
}

#parent-dashboard .parent-tab:hover {
  background-color: #f9fafb;
}

#parent-dashboard .parent-tab[aria-selected="true"] {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

#parent-dashboard .parent-tab[aria-selected="false"] {
  color: #6b7280;
}

/* Tables */
#parent-dashboard table {
  font-size: 0.875rem;
}

#parent-dashboard table th {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

#parent-dashboard table tbody tr:hover {
  background-color: #f9fafb;
}

/* Print Styles */
@media print {
  #parent-dashboard header,
  #parent-dashboard button,
  #parent-dashboard select {
    display: none !important;
  }

  #parent-dashboard .parent-panel {
    display: block !important;
  }

  #parent-dashboard {
    background: white;
  }

  #parent-dashboard table {
    page-break-inside: avoid;
  }

  #parent-dashboard table thead {
    display: table-header-group;
  }

  #parent-dashboard table tbody tr {
    page-break-inside: avoid;
  }
}

/* Loading States */
#parent-dashboard .loading-skeleton {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background-color: #e5e7eb;
  border-radius: 0.25rem;
}

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

/* Empty States */
#parent-dashboard .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
}

#parent-dashboard .empty-state i {
  opacity: 0.5;
  margin-bottom: 1rem;
}

/* Focus States for Accessibility */
#parent-dashboard button:focus,
#parent-dashboard select:focus,
#parent-dashboard .parent-tab:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 768px) {
  #parent-dashboard header {
    padding: 0.75rem;
  }

  #parent-dashboard .parent-tab {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
  }

  #parent-dashboard table {
    font-size: 0.8125rem;
  }

  #parent-dashboard table th,
  #parent-dashboard table td {
    padding: 0.5rem;
  }
}

/* Data-first styling - clean tables */
#parent-dashboard table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

#parent-dashboard table th {
  background-color: #f9fafb;
  position: sticky;
  top: 0;
  z-index: 10;
}

#parent-dashboard table td {
  border-top: 1px solid #e5e7eb;
}

/* Remove heavy gradients and animations */
#parent-dashboard .bg-gradient-to-br,
#parent-dashboard .bg-gradient-to-r,
#parent-dashboard .animate-gradient-shift,
#parent-dashboard .glow-pulse,
#parent-dashboard .wave-animate,
#parent-dashboard .magnetic-hover,
#parent-dashboard .rotate-scale {
  /* Override with simple styles */
  background: transparent;
  animation: none;
  transform: none;
}

/* ===== Edupoint ParentVUE Sidebar Styles ===== */
.sidebar-bg {
  background: linear-gradient(180deg, #1a252f 0%, #233140 100%);
}

.sidebar-item-active {
  background-color: #34495e;
  border-left-color: #3498db !important;
  color: white !important;
  box-shadow: inset 4px 0 0 0 #3498db;
}

.sidebar-item-hover {
  color: #bdc3c7;
  border-left: 4px solid transparent;
}

.sidebar-item-hover:hover {
  background-color: #2c3e50;
  color: white;
  border-left-color: #3498db;
}

.active-edu-nav {
  background-color: #34495e !important;
  border-left-color: #3498db !important;
  color: white !important;
  box-shadow: inset 4px 0 0 0 #3498db;
}

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

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Synergy/Edupoint Header */
.synergy-header {
  border-bottom: 1px solid #e5e7eb;
}

/* Parent Portal Table Styles */
#parent-dashboard table {
  border-collapse: separate;
  border-spacing: 0;
}

#parent-dashboard table thead th {
  background-color: #f9fafb;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #6b7280;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid #e5e7eb;
}

#parent-dashboard table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
}

#parent-dashboard table tbody tr:hover {
  background-color: #f9fafb;
}

#parent-dashboard table tbody tr:last-child td {
  border-bottom: none;
}

/* Report Type Selector Styling */
.report-type-card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.report-type-card::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;
  pointer-events: none;
}

.report-type-card:hover::before {
  left: 100%;
}

.report-type-card.selected {
  border-color: white !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}

.report-type-card:hover {
  transform: scale(1.05);
}

/* Report Preview Styling */
.report-container {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

.report-header {
  background-size: cover;
  background-position: center;
}

/* Print styles for reports */
@media print {
  .report-container {
    max-width: 100%;
  }

  .report-header {
    page-break-after: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .student-report {
    page-break-after: always;
    page-break-inside: avoid;
  }

  .report-type-card,
  .report-type-preview {
    display: none !important;
  }
}

/* Responsive adjustments for report type cards */
@media (max-width: 768px) {
  #report-type-selector {
    grid-template-columns: 1fr !important;
  }

  .report-type-card {
    padding: 1rem !important;
  }

  .report-type-card h3 {
    font-size: 0.875rem !important;
  }

  .report-type-card p {
    font-size: 0.75rem !important;
  }
}