/* Modern clean styles */
html {
  scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Tense highlighting transitions */
.tense-highlight {
  transition: all 0.2s ease;
}

.sentence-card:hover .tense-highlight {
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
}

/* Card flip animation */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  min-height: 120px;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 1rem;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* Pronunciation speaker icon button */
.speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease, background-color 0.15s ease;
  user-select: none;
}

.speak-btn:hover {
  transform: scale(1.15);
}

.speak-btn:active {
  transform: scale(0.92);
}

.speak-btn img {
  pointer-events: none;
}

/* ==========================================
   DARK MODE OPTIONAL SETTING
   ========================================== */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #0b1120 !important;
  color: #f1f5f9 !important;
}

/* Smooth color transitions for theme switching */
body, header, aside, main, .bg-white, .bg-slate-50, .bg-slate-100 {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Header & Sidebar in Dark Mode */
html.dark header {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: #1e293b !important;
}

html.dark aside#appSidebar {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}

html.dark main {
  background-color: #0b1120 !important;
}

/* Cards & Elevated Containers */
html.dark .bg-white {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* Base Surfaces & Tinted Backgrounds */
html.dark .bg-slate-50 {
  background-color: #0f172a !important;
}

html.dark .bg-slate-100 {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}

/* Borders & Separators */
html.dark .border-slate-200,
html.dark .border-slate-100 {
  border-color: #334155 !important;
}

html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #334155 !important;
}

/* Text Colors */
html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #f8fafc !important;
}

html.dark .text-slate-700 {
  color: #e2e8f0 !important;
}

html.dark .text-slate-600 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-500 {
  color: #94a3b8 !important;
}

html.dark .text-slate-400 {
  color: #64748b !important;
}

/* Tables in Dark Mode */
html.dark table thead {
  background-color: #1e293b !important;
}

html.dark table thead th {
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html.dark table tbody tr {
  border-color: #334155 !important;
}

html.dark table tbody tr:hover {
  background-color: rgba(51, 65, 85, 0.4) !important;
}

html.dark table tbody td {
  border-color: #334155 !important;
}

/* Accent Callouts & Tinted Boxes */
/* Blue */
html.dark .bg-blue-50 {
  background-color: rgba(30, 58, 138, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}
html.dark .text-blue-900,
html.dark .text-blue-800,
html.dark .text-blue-700 {
  color: #93c5fd !important;
}
html.dark .text-blue-600,
html.dark .text-blue-500 {
  color: #60a5fa !important;
}

/* Emerald / Green */
html.dark .bg-emerald-50,
html.dark .bg-green-50 {
  background-color: rgba(6, 78, 59, 0.25) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
html.dark .text-emerald-900,
html.dark .text-emerald-800,
html.dark .text-emerald-700,
html.dark .text-green-800,
html.dark .text-green-700 {
  color: #6ee7b7 !important;
}

/* Amber / Yellow */
html.dark .bg-amber-50,
html.dark .bg-yellow-50 {
  background-color: rgba(120, 53, 15, 0.25) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
html.dark .text-amber-900,
html.dark .text-amber-800,
html.dark .text-amber-700,
html.dark .text-yellow-800 {
  color: #fde68a !important;
}

/* Purple / Indigo */
html.dark .bg-purple-50,
html.dark .bg-indigo-50 {
  background-color: rgba(76, 29, 149, 0.25) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
}
html.dark .text-purple-900,
html.dark .text-purple-800,
html.dark .text-purple-700,
html.dark .text-indigo-900,
html.dark .text-indigo-800 {
  color: #c4b5fd !important;
}

/* Rose / Red */
html.dark .bg-rose-50,
html.dark .bg-red-50 {
  background-color: rgba(136, 19, 55, 0.25) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
}
html.dark .text-rose-900,
html.dark .text-rose-800,
html.dark .text-rose-700,
html.dark .text-red-700 {
  color: #fda4af !important;
}

/* Cyan / Teal */
html.dark .bg-cyan-50,
html.dark .bg-teal-50 {
  background-color: rgba(19, 78, 74, 0.25) !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
}
html.dark .text-cyan-900,
html.dark .text-cyan-800,
html.dark .text-teal-900,
html.dark .text-teal-800 {
  color: #5eead4 !important;
}

/* Form Inputs & Controls */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  background-color: #1e293b !important;
  border-color: #3b82f6 !important;
}

html.dark input::placeholder {
  color: #64748b !important;
}

/* Lock Screen in Dark Mode */
html.dark #lockScreen {
  background-color: #0b1120 !important;
}
html.dark #lockScreen > div {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* Sidebar Navigation Items */
html.dark .nav-item {
  color: #94a3b8 !important;
}
html.dark .nav-item:hover {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}
html.dark .nav-item.active {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

/* Code & Badges */
html.dark code {
  background-color: #0f172a !important;
  color: #93c5fd !important;
  border-color: #334155 !important;
}

/* Flip Cards */
html.dark .flip-card-front {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark .flip-card-back {
  background-color: #0f172a !important;
  border-color: #3b82f6 !important;
  color: #f8fafc !important;
}

/* Speaker Pronunciation Button */
html.dark .speak-btn:hover {
  background-color: rgba(59, 130, 246, 0.25) !important;
}

/* ==========================================
   STORY BOXES, INSET TEXT CARDS & HIGHLIGHTS
   ========================================== */

/* Outer gradient containers in dark mode */
html.dark [class*="bg-gradient-"] {
  background-image: linear-gradient(to bottom right, #1e293b, #0f172a) !important;
  border-color: #334155 !important;
}

html.dark [class*="to-white"] {
  --tw-gradient-to: #0f172a !important;
}

/* Inset text boxes (bg-white/80, bg-white/70, bg-white) */
html.dark [class*="bg-white/"],
html.dark div[class*="bg-white"] {
  background-color: #0b1120 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* Box titles with dark 950 colors */
html.dark [class*="text-amber-950"],
html.dark [class*="text-amber-900"] {
  color: #fde68a !important;
}

html.dark [class*="text-emerald-950"],
html.dark [class*="text-emerald-900"] {
  color: #6ee7b7 !important;
}

html.dark [class*="text-purple-950"],
html.dark [class*="text-purple-900"] {
  color: #d8b4fe !important;
}

html.dark [class*="text-indigo-950"],
html.dark [class*="text-indigo-900"] {
  color: #c7d2fe !important;
}

html.dark [class*="text-sky-950"],
html.dark [class*="text-sky-900"] {
  color: #7dd3fc !important;
}

html.dark [class*="text-teal-950"],
html.dark [class*="text-teal-900"] {
  color: #5eead4 !important;
}

html.dark [class*="text-rose-950"],
html.dark [class*="text-rose-900"] {
  color: #fda4af !important;
}

/* Tense & grammar word highlight tags inside reading text */
html.dark [class*="bg-amber-100"],
html.dark [class*="bg-yellow-100"] {
  background-color: rgba(245, 158, 11, 0.25) !important;
  color: #fde68a !important;
}

html.dark [class*="bg-blue-100"] {
  background-color: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
}

html.dark [class*="bg-purple-100"] {
  background-color: rgba(168, 85, 247, 0.25) !important;
  color: #d8b4fe !important;
}

html.dark [class*="bg-indigo-100"] {
  background-color: rgba(99, 102, 241, 0.25) !important;
  color: #c7d2fe !important;
}

html.dark [class*="bg-rose-100"],
html.dark [class*="bg-red-100"] {
  background-color: rgba(244, 63, 94, 0.25) !important;
  color: #fda4af !important;
}

html.dark [class*="bg-teal-100"],
html.dark [class*="bg-cyan-100"] {
  background-color: rgba(20, 184, 166, 0.25) !important;
  color: #5eead4 !important;
}

html.dark [class*="bg-emerald-100"],
html.dark [class*="bg-green-100"] {
  background-color: rgba(16, 185, 129, 0.25) !important;
  color: #6ee7b7 !important;
}

/* Border accents on story cards */
html.dark [class*="border-amber-"],
html.dark [class*="border-emerald-"],
html.dark [class*="border-purple-"],
html.dark [class*="border-indigo-"],
html.dark [class*="border-sky-"],
html.dark [class*="border-teal-"],
html.dark [class*="border-rose-"] {
  border-color: #334155 !important;
}

/* ==========================================
   SIDEBAR MENU HEADINGS & ACTIVE HIGHLIGHTS
   ========================================== */
/* Default accordion header (consistent with 1010) */
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgba(239, 246, 255, 0.85); /* blue-50 matching 1010 */
  color: #172554; /* blue-950 */
  border: 1px solid rgba(219, 234, 254, 0.8);
}

.acc-head:hover {
  background-color: #dbeafe;
}

.acc-head .acc-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: #2563eb; /* blue-600 */
  transition: background-color 0.2s ease;
}

.acc-head .acc-icon {
  font-size: 10px;
  font-weight: 700;
  color: #2563eb;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Dark Mode Default Header (Consistent blue/slate tone matching 1010) */
html.dark .acc-head {
  background-color: rgba(30, 58, 138, 0.25) !important;
  color: #bfdbfe !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

html.dark .acc-head:hover {
  background-color: rgba(30, 58, 138, 0.45) !important;
  color: #ffffff !important;
}

html.dark .acc-head .acc-dot {
  background-color: #60a5fa !important;
}

html.dark .acc-head .acc-icon {
  color: #60a5fa !important;
}

/* Active / Selected Accordion Header (Turns into Emerald Green like 1090) */
.acc-head.active-section {
  background-color: #ecfdf5 !important; /* emerald-50 */
  color: #064e3b !important; /* emerald-900 */
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 1px 3px 0 rgba(16, 185, 129, 0.15) !important;
}

.acc-head.active-section:hover {
  background-color: #d1fae5 !important; /* emerald-100 */
}

.acc-head.active-section .acc-dot {
  background-color: #059669 !important; /* emerald-600 */
}

.acc-head.active-section .acc-icon {
  color: #059669 !important;
}

/* Dark Mode Active / Selected Accordion Header (Emerald Green) */
html.dark .acc-head.active-section {
  background-color: rgba(6, 78, 59, 0.45) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(52, 211, 153, 0.45) !important;
  box-shadow: 0 0 12px -2px rgba(16, 185, 129, 0.25) !important;
}

html.dark .acc-head.active-section:hover {
  background-color: rgba(6, 78, 59, 0.65) !important;
  color: #a7f3d0 !important;
}

html.dark .acc-head.active-section .acc-dot {
  background-color: #34d399 !important;
}

html.dark .acc-head.active-section .acc-icon {
  color: #34d399 !important;
}

/* Nav Item Sub-buttons */
.nav-item {
  width: 100%;
  text-align: left;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: #475569;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
}

.nav-item:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

html.dark .nav-item {
  color: #94a3b8 !important;
}

html.dark .nav-item:hover {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

/* Active Nav Item: Pure Emerald Green Accent */
.nav-item.active {
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
  font-weight: 700 !important;
  border-left: 3px solid #10b981 !important;
}

html.dark .nav-item.active {
  background-color: rgba(6, 78, 59, 0.4) !important;
  color: #6ee7b7 !important;
  font-weight: 700 !important;
  border-left: 3px solid #34d399 !important;
}