/* VIBGYOR Class Updates Stylesheet */
@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@300;400;500;600;700;800&display=swap");

:root {
  --font-sans:
    "Commissioner", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --vib-purple: #4f46e5;
  --vib-indigo: #3730a3;
  --vib-pink: #ec4899;
  --vib-orange: #f97316;
  --vib-yellow: #eab308;
  --vib-green: #10b981;
  --vib-blue: #0ea5e9;
}

body {
  font-family: var(--font-sans);
  background-color: #f8fafc;
  color: #0f172a;
}

/* VIBGYOR Pride Accent Rainbow Strip */
.vibgyor-strip {
  height: 4px;
  background: linear-gradient(
    90deg,
    #7c3aed 0%,
    #2563eb 20%,
    #06b6d4 40%,
    #10b981 60%,
    #eab308 80%,
    #ef4444 100%
  );
}

/* Word of the day flashcard styling */
.flashcard-gradient {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #818cf8 100%);
}

.word-chip {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Period badges based on subject */
.subject-badge-math {
  background-color: #dbeafe;
  color: #1e40af;
  border-color: #bfdbfe;
}
.subject-badge-english {
  background-color: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.subject-badge-science {
  background-color: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.subject-badge-robotics {
  background-color: #f3e8ff;
  color: #6b21a8;
  border-color: #e9d5ff;
}
.subject-badge-kannada {
  background-color: #ffedd5;
  color: #9a3412;
  border-color: #fed7aa;
}
.subject-badge-hindi {
  background-color: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.subject-badge-spa {
  background-color: #fce7f3;
  color: #9d174d;
  border-color: #fbcfe8;
}
.subject-badge-computers {
  background-color: #e0e7ff;
  color: #3730a3;
  border-color: #c7d2fe;
}
.subject-badge-default {
  background-color: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
}

/* Subject Card Headers matching pill colors */
.subject-header-math {
  background-color: #e0edff;
  color: #1e3a8a;
  border-color: #bfdbfe;
}
.subject-header-english {
  background-color: #fef3c7;
  color: #78350f;
  border-color: #fde68a;
}
.subject-header-science {
  background-color: #dcfce7;
  color: #14532d;
  border-color: #bbf7d0;
}
.subject-header-robotics {
  background-color: #f3e8ff;
  color: #581c87;
  border-color: #e9d5ff;
}
.subject-header-kannada {
  background-color: #ffedd5;
  color: #7c2d12;
  border-color: #fed7aa;
}
.subject-header-hindi {
  background-color: #fee2e2;
  color: #7f1d1d;
  border-color: #fecaca;
}
.subject-header-spa {
  background-color: #fce7f3;
  color: #831843;
  border-color: #fbcfe8;
}
.subject-header-computers {
  background-color: #e0e7ff;
  color: #312e81;
  border-color: #c7d2fe;
}
.subject-header-default {
  background-color: #f1f5f9;
  color: #1e293b;
  border-color: #e2e8f0;
}

/* Dark Mode: Subject Card Headers */
.dark .subject-header-math {
  background-color: rgba(30, 58, 138, 0.4);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}
.dark .subject-header-english {
  background-color: rgba(120, 53, 15, 0.4);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.35);
}
.dark .subject-header-science {
  background-color: rgba(20, 83, 45, 0.4);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.35);
}
.dark .subject-header-robotics {
  background-color: rgba(88, 28, 135, 0.4);
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.35);
}
.dark .subject-header-kannada {
  background-color: rgba(124, 45, 18, 0.4);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.35);
}
.dark .subject-header-hindi {
  background-color: rgba(127, 29, 29, 0.4);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}
.dark .subject-header-spa {
  background-color: rgba(131, 24, 67, 0.4);
  color: #f9a8d4;
  border-color: rgba(236, 72, 153, 0.35);
}
.dark .subject-header-computers {
  background-color: rgba(49, 46, 129, 0.4);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.35);
}
.dark .subject-header-default {
  background-color: rgba(30, 41, 59, 0.7);
  color: #cbd5e1;
  border-color: #334155;
}

/* Dark Mode: Subject Badges */
.dark .subject-badge-math {
  background-color: rgba(30, 58, 138, 0.45);
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, 0.4);
}
.dark .subject-badge-english {
  background-color: rgba(120, 53, 15, 0.45);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.4);
}
.dark .subject-badge-science {
  background-color: rgba(20, 83, 45, 0.45);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.4);
}
.dark .subject-badge-robotics {
  background-color: rgba(88, 28, 135, 0.45);
  color: #e9d5ff;
  border-color: rgba(168, 85, 247, 0.4);
}
.dark .subject-badge-kannada {
  background-color: rgba(124, 45, 18, 0.45);
  color: #fed7aa;
  border-color: rgba(249, 115, 22, 0.4);
}
.dark .subject-badge-hindi {
  background-color: rgba(127, 29, 29, 0.45);
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.4);
}
.dark .subject-badge-spa {
  background-color: rgba(131, 24, 67, 0.45);
  color: #fbcfe8;
  border-color: rgba(236, 72, 153, 0.4);
}
.dark .subject-badge-computers {
  background-color: rgba(49, 46, 129, 0.45);
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.4);
}
.dark .subject-badge-default {
  background-color: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

/* Homework indicator dot animation */
@keyframes hw-pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}
.hw-pulse-dot {
  animation: hw-pulse-ring 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Custom Checkbox */
.hw-checkbox {
  width: 1.35rem;
  height: 1.35rem;
  accent-color: #10b981;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.hw-checkbox:hover {
  transform: scale(1.1);
}

/* Never let a wide child force the page (and the sticky header) to scroll sideways */
html,
body {
  overflow-x: hidden;
}

/* Horizontally scrollable strips (e.g. the tab bar) without a visible scrollbar */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Tabs must not shrink/wrap inside the scrollable strip */
#tabs-bar > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Tab Active Indicator */
.tab-active {
  border-bottom: 3px solid #4f46e5;
  color: #4f46e5;
  font-weight: 700;
}
.dark .tab-active {
  border-bottom-color: #818cf8;
  color: #818cf8;
}

.tab-inactive {
  border-bottom: 3px solid transparent;
  color: #64748b;
  font-weight: 500;
}
.dark .tab-inactive {
  color: #94a3b8;
}

.tab-inactive:hover {
  color: #334155;
  border-bottom-color: #cbd5e1;
}
.dark .tab-inactive:hover {
  color: #f1f5f9;
  border-bottom-color: #475569;
}

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

/* Toast alert notification */
#toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}