/* Custom CSS Properties */
:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --shadow-soft: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-large: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --border-radius: 1rem;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Light Mode Colors */
  --bg-primary: #a8d4e5;
  --bg-secondary: #9bc4d4;
  --bg-card: rgba(255, 255, 255, 0.7);
  --bg-card-hover: rgba(255, 255, 255, 0.8);
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border-primary: rgba(255, 255, 255, 0.5);
  --border-secondary: #e2e8f0;
  --accent-primary: #6366f1;
  --accent-secondary: #8b5cf6;
}

/* Dark Mode Colors */
[data-theme="dark"] {
  --bg-primary: #005b8a;
  --bg-secondary: #004d73;
  --bg-card: rgba(0, 91, 138, 0.7);
  --bg-card-hover: rgba(0, 91, 138, 0.8);
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-primary: rgba(0, 91, 138, 0.5);
  --border-secondary: #0077b3;
  --accent-primary: #818cf8;
  --accent-secondary: #a78bfa;
}

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

/* Light mode hero section text */
.text-4xl.font-bold.text-blue-400 {
  color: #005b8a !important;
}

.text-xl.text-blue-300 {
  color: #005b8a !important;
}

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

/* Dark Mode Background Gradients */
body[data-theme="dark"] {
  background: #005b8a;
}

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

/* Enhanced Form Elements */
input, textarea, select {
  transition: var(--transition);
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-secondary);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  transform: translateY(-1px);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Dark mode form focus */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2);
}

/* Custom Button Styles */
.btn-primary {
  background: var(--primary-gradient);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 2px solid var(--border-secondary);
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-secondary);
  transform: translateY(-1px);
}

/* Enhanced Card Styles */
.card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-primary);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-large);
  border-color: var(--border-primary);
}

/* Glassmorphism Effect */
.glass {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-primary);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Enhanced Table Styles */
table {
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-secondary);
  color: var(--text-primary);
}

th {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  font-weight: 600;
  color: var(--text-secondary);
  position: relative;
}

th:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border-secondary), transparent);
}

/* Enhanced Form Labels */
label {
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  display: block;
}

/* Enhanced Input Fields */
.form-input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid var(--border-secondary);
  border-radius: 1rem;
  font-size: 0.875rem;
  transition: var(--transition);
  background: var(--bg-card);
  color: var(--text-primary);
}

.form-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
  background: var(--bg-card-hover);
}

/* Dark mode input focus */
[data-theme="dark"] .form-input:focus {
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2);
}

/* Enhanced Textarea */
.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Status Indicators */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.status-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.status-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

/* Enhanced Buttons with Icons */
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  text-decoration: none;
}

.btn-with-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Loading States */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { left: -100%; }
  100% { left: 100%; }
}

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

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

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

/* Animation Classes */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

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

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

/* Enhanced Hover Effects */
.hover-lift {
  transition: var(--transition);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-large);
}

/* Enhanced Focus States */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Dark mode focus ring */
[data-theme="dark"] .focus-ring:focus {
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2);
}

/* Enhanced Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--border-secondary) 0%, var(--text-muted) 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--text-muted) 0%, var(--text-secondary) 100%);
}

/* Enhanced Selection */
::selection {
  background: rgba(99, 102, 241, 0.2);
  color: var(--text-primary);
}

/* Dark mode selection */
[data-theme="dark"] ::selection {
  background: rgba(129, 140, 248, 0.2);
}

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

/* Enhanced Disabled States */
button:disabled,
input:disabled,
textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Enhanced Placeholder */
::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Enhanced Audio Controls */
audio {
  border-radius: 1rem;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Enhanced Tooltips */
.tooltip {
  position: relative;
  cursor: help;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--bg-primary);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  z-index: 1000;
}

.tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* Dark Mode Specific Styles */
[data-theme="dark"] {
  /* Header dark mode */
  header {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(30, 41, 59, 0.5);
  }
  
  /* Hero section text in dark mode */
  .text-4xl.font-bold.text-blue-400 {
    color: white !important;
  }
  
  .text-xl.text-blue-300 {
    color: white !important;
  }
  
  /* Form elements dark mode */
  input, textarea, select {
    background: rgba(30, 41, 59, 0.8);
    color: #f1f5f9;
    border-color: #334155;
  }
  
  /* Cards dark mode */
  .bg-white\/70 {
    background: rgba(30, 41, 59, 0.7);
  }
  
  .bg-white\/80 {
    background: rgba(30, 41, 59, 0.8);
  }
  
  .bg-white\/50 {
    background: rgba(30, 41, 59, 0.5);
  }
  
  /* Borders dark mode */
  .border-white\/50 {
    border-color: rgba(30, 41, 59, 0.5);
  }
  
  .border-slate-200 {
    border-color: #334155;
  }
  
  /* Text colors dark mode - FIXED VISIBILITY ISSUES */
  .text-slate-800 {
    color: #f1f5f9 !important;
  }
  
  .text-slate-700 {
    color: #e2e8f0 !important;
  }
  
  .text-slate-600 {
    color: #cbd5e1 !important;
  }
  
  .text-slate-500 {
    color: #94a3b8 !important;
  }
  
  /* Background colors dark mode */
  .bg-slate-50 {
    background: #1e293b;
  }
  
  .bg-slate-100 {
    background: #334155;
  }
  
  .bg-slate-200 {
    background: #475569;
  }
  
  /* Table headers dark mode */
  .bg-gradient-to-r.from-slate-50.to-blue-50 {
    background: linear-gradient(135deg, #1e293b 0%, #1e3a8a 100%);
  }
  
  /* Hover states dark mode */
  .hover\:bg-slate-50:hover {
    background: #334155;
  }
  
  /* Button backgrounds dark mode */
  .bg-slate-100 {
    background: #334155;
  }
  
  .hover\:bg-slate-200:hover {
    background: #475569;
  }
  
  /* Status badges dark mode */
  .bg-emerald-100 {
    background: #064e3b;
  }
  
  .bg-blue-100 {
    background: #1e3a8a;
  }
  
  .text-emerald-600 {
    color: #10b981;
  }
  
  .text-blue-600 {
    color: #3b82f6;
  }
  
  /* Enhanced table text visibility in dark mode */
  table th {
    color: #e2e8f0 !important;
  }
  
  table td {
    color: #f1f5f9 !important;
  }
  
  /* Ensure differentiation card titles are visible */
  .text-lg.font-bold.text-slate-800 {
    color: #f1f5f9 !important;
  }
  
  /* Ensure all text in cards has proper contrast */
  .prose-sm.space-y-3.text-slate-700 {
    color: #e2e8f0 !important;
  }
  
  /* Fix rubric table text visibility */
  .border-r.border-slate-200.p-4.align-top.font-semibold.text-slate-800 {
    color: #f1f5f9 !important;
  }
  
  .border-r.border-slate-200.p-4.align-top.text-slate-700 {
    color: #e2e8f0 !important;
  }
  
  .p-4.align-top.text-slate-700 {
    color: #e2e8f0 !important;
  }
  
  /* Fix differentiation content background colors in dark mode */
  .bg-emerald-50 {
    background: #064e3b !important;
  }
  
  .bg-blue-50 {
    background: #1e3a8a !important;
  }
  
  .bg-purple-50 {
    background: #581c87 !important;
  }
  
  /* Fix differentiation content border colors in dark mode */
  .border-emerald-200 {
    border-color: #065f46 !important;
  }
  
  .border-blue-200 {
    border-color: #1e40af !important;
  }
  
  .border-purple-200 {
    border-color: #7c3aed !important;
  }
  
  /* Ensure proper text contrast in differentiation content areas */
  .p-3.bg-emerald-50.rounded-xl.border.border-emerald-200.text-slate-700 {
    color: #d1fae5 !important;
  }
  
  .p-3.bg-blue-50.rounded-xl.border.border-blue-200.text-slate-700 {
    color: #dbeafe !important;
  }
  
  .p-3.bg-purple-50.rounded-xl.border.border-purple-200.text-slate-700 {
    color: #e9d5ff !important;
  }
  
  /* Fix Assessment Rubric table text visibility in dark mode */
  .bg-white\/70.backdrop-blur-sm.rounded-3xl.shadow-xl.border.border-white\/50.p-6 h3 {
    color: #f1f5f9 !important;
  }
  
  /* Fix table body background and text in dark mode */
  .bg-white {
    background: #1e293b !important;
  }
  
  /* Ensure all table text is visible in dark mode */
  table tbody td {
    color: #f1f5f9 !important;
  }
  
  /* Fix hover states for table rows in dark mode */
  .hover\:bg-slate-50:hover {
    background: #334155 !important;
  }
  
  /* Fix Feedback Bank text visibility in dark mode */
  .bg-gradient-to-r.from-indigo-100.to-purple-100 {
    background: linear-gradient(135deg, #312e81 0%, #581c87 100%) !important;
    color: #e2e8f0 !important;
  }
  
  .bg-gradient-to-r.from-indigo-100.to-purple-100:hover {
    background: linear-gradient(135deg, #3730a3 0%, #6b21a8 100%) !important;
  }
  
  /* Fix Feedback Bank button text and borders */
  .px-4.py-2.rounded-full.bg-gradient-to-r.from-indigo-100.to-purple-100.hover\:from-indigo-200.hover\:to-purple-200.text-slate-700 {
    color: #e2e8f0 !important;
  }
  
  .border.border-indigo-200 {
    border-color: #4338ca !important;
  }
  
  .hover\:border-indigo-300:hover {
    border-color: #6366f1 !important;
  }
  
  /* Fix Family Communication section text visibility */
  .block.text-sm.font-semibold.text-slate-700 {
    color: #e2e8f0 !important;
  }
  
  /* Fix textarea text in dark mode */
  textarea {
    color: #f1f5f9 !important;
  }
  
  /* Fix placeholder text in dark mode */
  textarea::placeholder {
    color: #94a3b8 !important;
  }
  
  /* Fix Copy buttons in Family Communication */
  .bg-slate-100.hover\:bg-slate-200.text-slate-700 {
    color: #e2e8f0 !important;
  }
  
  /* Fix saved time indicator in dark mode */
  .text-xs.text-emerald-600.bg-emerald-100 {
    background: #064e3b !important;
    color: #10b981 !important;
  }
  
  /* Fix demo notice section text in dark mode */
  .text-blue-800 {
    color: #dbeafe !important;
  }
  
  .text-blue-700 {
    color: #bfdbfe !important;
  }
  
  /* Fix demo notice background in dark mode */
  .bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%) !important;
  }
  
  .border-blue-200 {
    border-color: #1e40af !important;
  }
  
  /* Fix formative checks section text */
  .font-semibold.text-slate-800.text-lg {
    color: #f1f5f9 !important;
  }
  
  .text-sm.text-slate-700.whitespace-pre-wrap.leading-relaxed {
    color: #e2e8f0 !important;
  }
  
  .text-xs.text-slate-600.whitespace-pre-wrap.bg-slate-50 {
    color: #cbd5e1 !important;
    background: #334155 !important;
  }
  
  /* Fix formative checks card backgrounds */
  .bg-white\/80.backdrop-blur-sm.rounded-2xl.border.border-slate-200 {
    background: rgba(30, 41, 59, 0.8) !important;
  }
  
  /* Fix mini-lesson script section */
  .text-xl.font-bold.text-slate-800.mb-4 {
    color: #f1f5f9 !important;
  }
  
  /* Fix real-time coach section */
  .text-xl.font-bold.text-slate-800 {
    color: #f1f5f9 !important;
  }
  
  .text-xs.text-slate-500.bg-blue-100 {
    background: #1e3a8a !important;
    color: #93c5fd !important;
  }
  
  /* Fix action buttons section */
  .text-sm.text-slate-500.bg-slate-100 {
    color: #cbd5e1 !important;
    background: #334155 !important;
  }
  
  /* Fix footer text in dark mode */
  .text-sm.text-slate-500.bg-white\/50 {
    color: #94a3b8 !important;
    background: rgba(30, 41, 59, 0.5) !important;
  }
  
  /* Fix new form elements in dark mode */
  input[type="checkbox"], input[type="radio"] {
    background: #1e293b !important;
    border-color: #334155 !important;
  }
  
  input[type="checkbox"]:checked, input[type="radio"]:checked {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
  }
  
  /* Fix checkbox/radio labels in dark mode */
  .text-sm.font-medium.text-slate-700 {
    color: #e2e8f0 !important;
  }
  
  /* Fix form field borders in dark mode */
  .border-slate-200 {
    border-color: #334155 !important;
  }
  
  .hover\:border-indigo-300:hover {
    border-color: #6366f1 !important;
  }
  
  /* Additional fixes for Assessment Rubric table headers */
  .bg-gradient-to-r.from-slate-50.to-blue-50 th {
    color: #e2e8f0 !important;
  }
  
  /* Fix specific table header text */
  .text-left.p-4.border-r.border-slate-200.font-semibold.text-slate-700 {
    color: #e2e8f0 !important;
  }
  
  /* Fix table cell text with more specific selectors */
  .border-r.border-slate-200.p-4.align-top.text-slate-700 {
    color: #f1f5f9 !important;
  }
  
  /* Fix all text-slate-800 instances in dark mode */
  [data-theme="dark"] .text-slate-800 {
    color: #f1f5f9 !important;
  }
  
  /* Fix all text-slate-700 instances in dark mode */
  [data-theme="dark"] .text-slate-700 {
    color: #e2e8f0 !important;
  }
  
  /* Fix all text-slate-600 instances in dark mode */
  [data-theme="dark"] .text-slate-600 {
    color: #cbd5e1 !important;
  }
  
  /* Fix all text-slate-500 instances in dark mode */
  [data-theme="dark"] .text-slate-500 {
    color: #94a3b8 !important;
  }
  
  /* Fix table borders in dark mode */
  [data-theme="dark"] .border-slate-200 {
    border-color: #334155 !important;
  }
  
  /* Fix table background colors in dark mode */
  [data-theme="dark"] .bg-white {
    background: #1e293b !important;
  }
  
  [data-theme="dark"] .bg-slate-50 {
    background: #334155 !important;
  }
  
  /* Fix hover states in dark mode */
  [data-theme="dark"] .hover\:bg-slate-50:hover {
    background: #475569 !important;
  }
  
  /* Fix content review section in dark mode */
  .bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%) !important;
  }
  
  .text-blue-800 {
    color: #dbeafe !important;
  }
  
  .text-blue-700 {
    color: #bfdbfe !important;
  }
  
  .border-blue-200 {
    border-color: #1e40af !important;
  }
  
  .bg-slate-50 {
    background: #334155 !important;
  }
  
  /* Fix download buttons in dark mode */
  .bg-red-600 {
    background: #dc2626 !important;
  }
  
  .hover\:bg-red-700:hover {
    background: #b91c1c !important;
  }
  
  .bg-orange-600 {
    background: #ea580c !important;
  }
  
  .hover\:bg-orange-700:hover {
    background: #c2410c !important;
  }
  
  .bg-blue-600 {
    background: #2563eb !important;
  }
  
  .hover\:bg-blue-700:hover {
    background: #1d4ed8 !important;
  }
  
  .bg-purple-600 {
    background: #7c3aed !important;
  }
  
  .hover\:bg-purple-700:hover {
    background: #6d28d9 !important;
  }
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
  .card {
    margin: 1rem 0;
  }
  
  .btn-with-icon {
    width: 100%;
    justify-content: center;
  }
  
  .grid {
    grid-template-columns: 1fr;
  }
}

/* Enhanced Print Styles */
@media print {
  header, 
  #lesson-form button, 
  #btn-voice, 
  footer,
  .btn-with-icon,
  .status-indicator,
  #theme-toggle { 
    display: none !important; 
  }
  
  body { 
    background: #fff !important;
    color: #000 !important;
  }
  
  .shadow, 
  .shadow-lg, 
  .shadow-xl, 
  .shadow-2xl { 
    box-shadow: none !important; 
  }
  
  .rounded-2xl, 
  .rounded-3xl { 
    border-radius: 0 !important; 
  }
  
  .bg-white\/70, 
  .bg-white\/50 { 
    background: #fff !important; 
  }
  
  .text-slate-500, 
  .text-slate-600, 
  .text-slate-700 { 
    color: #000 !important; 
  }
  
  .backdrop-blur-sm, 
  .backdrop-blur-md { 
    backdrop-filter: none !important; 
  }
  
  .border-white\/50, 
  .border-slate-200 { 
    border: 1px solid #000 !important; 
  }
  
  /* Ensure table borders print properly */
  table, th, td {
    border: 1px solid #000 !important;
  }
  
  /* Remove gradients for print */
  .bg-gradient-to-r,
  .bg-gradient-to-br {
    background: #f0f0f0 !important;
  }
}