/**
 * Estilo de Inteligência Generativa (Generative AI Tech-Inspired Design System)
 * Light Theme Edition - High-Contrast Precision Architecture
 * Based on DESIGN.md specification (https://designmd.app/library/estilo-de-inteligencia-generativa)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces & Canvas */
  --bg-canvas: #F8FAFC !important;
  --bg-surface: #FFFFFF !important;
  --bg-surface-elevated: #FFFFFF !important;
  --bg-surface-subtle: #F1F5F9 !important;
  --bg-surface-muted: #E2E8F0 !important;
  --bg-pill: rgba(255, 255, 255, 0.92) !important;
  --bg-base: #F8FAFC !important;
  --bg-card: #FFFFFF !important;
  --bg-card-hover: #FFFFFF !important;
  --bg-nav: rgba(255, 255, 255, 0.88) !important;
  --bg-sticky: rgba(255, 255, 255, 0.94) !important;
  --bg-body: #F8FAFC !important;

  /* Text & Readability */
  --text-primary: #0F172A !important;
  --text-main: #0F172A !important;
  --text-secondary: #334155 !important;
  --text-muted: #64748B !important;
  --text-subtle: #94A3B8 !important;
  --text-faint: #94A3B8 !important;

  /* Borders & Dividers */
  --border-subtle: #E2E8F0 !important;
  --border-strong: #CBD5E1 !important;
  --border-card: #E2E8F0 !important;
  --border-nav: #E2E8F0 !important;
  --border-focus: #06B6D4 !important;
  --border-hover: #CBD5E1 !important;

  /* Generative AI Semantic Tokens */
  --ai-cyan: #0891B2 !important;
  --ai-cyan-hover: #0E7490 !important;
  --ai-cyan-light: #ECFEFF !important;
  --ai-cyan-border: #A5F3FC !important;
  --brand-primary: #0891B2 !important;
  --brand-primary-hover: #0E7490 !important;
  
  --primary-indigo: #4F46E5 !important;
  --primary-indigo-hover: #4338CA !important;
  --primary-indigo-light: #EEF2FF !important;
  --primary-indigo-border: #C7D2FE !important;
  --brand-accent: #4F46E5 !important;

  --accent-purple: #7C3AED !important;
  --accent-purple-light: #F5F3FF !important;

  --success: #059669 !important;
  --success-light: #ECFDF5 !important;
  --warning: #D97706 !important;
  --warning-light: #FFFBEB !important;
  --danger: #DC2626 !important;
  --danger-light: #FEF2F2 !important;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  --font-code: 'JetBrains Mono', monospace !important;

  /* Elevation & Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05) !important;
  --shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06) !important;
  --shadow-hover: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04) !important;
  --shadow-ai-glow: 0 0 0 1px #06B6D4, 0 4px 16px rgba(6, 182, 212, 0.15) !important;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

/* Base Document Reset */
html, body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #0F172A !important;
  font-family: var(--font-sans) !important;
  letter-spacing: -0.02em;
}

/* ========================================================
   UNIVERSAL OVERRIDES FOR LEGACY DARK CLASSES & STYLES
   ======================================================== */
.dark, 
[data-theme="dark"],
.bg-slate-900,
.bg-slate-950,
.bg-gray-900,
.bg-gray-950,
.bg-zinc-900,
.bg-zinc-950,
.bg-[#030712],
.bg-[#0b0f19],
.bg-[#181818],
.bg-[#1f1f1f],
.bg-[#0e1626],
.bg-[#0a0f1d],
.bg-black {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

body.dark,
body[data-theme="dark"],
html.dark body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* Border overrides */
.border-slate-800,
.border-slate-700,
.border-gray-800,
.border-gray-700,
.border-[#1f2937],
.border-[#313131],
.border-[#334155] {
  border-color: #E2E8F0 !important;
}

/* Secondary dark backgrounds converted to subtle surfaces */
[class*="bg-slate-850"]:not(.preserve-dark),
[class*="bg-slate-800"]:not(.btn-primary):not([class*="bg-indigo-"]):not([class*="bg-blue-"]):not([class*="bg-cyan-"]):not([class*="bg-teal-"]):not([class*="bg-emerald-"]):not([class*="bg-amber-"]):not([class*="bg-sky-"]):not(.preserve-dark) {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
}

/* Hover background traps */
[class*="hover:bg-slate-800"]:hover,
[class*="hover:bg-slate-700"]:hover {
  background-color: #F1F5F9 !important;
}

/* ========================================================
   UNIVERSAL CONTRAST SHIELD (WCAG 2.1 AA / AAA COMPLIANCE)
   ======================================================== */

/* 1. Base rule: Convert isolated white text on light surfaces back to high-contrast slate */
.text-white {
  color: #0F172A !important;
}

/* 2. Preserve crisp white text specifically inside solid colored buttons, badges and accents */
.text-white:is(
  [class*="bg-indigo-"],
  [class*="bg-blue-"],
  [class*="bg-cyan-"],
  [class*="bg-teal-"],
  [class*="bg-emerald-"],
  [class*="bg-purple-"],
  [class*="bg-violet-"],
  [class*="bg-rose-"],
  [class*="bg-red-"],
  [class*="bg-amber-"],
  [class*="bg-sky-"],
  .btn-primary,
  .btn-ai-primary,
  .badge-active
),
.btn-primary,
.btn-ai-primary,
.btn-primary *,
.btn-ai-primary *,
button[class*="bg-indigo"],
button[class*="bg-blue"],
button[class*="bg-cyan"],
button[class*="bg-teal"],
button[class*="bg-emerald"],
button[class*="bg-purple"],
button[class*="bg-violet"],
button[class*="bg-rose"],
button[class*="bg-sky"],
button[class*="bg-indigo"] *,
button[class*="bg-blue"] *,
button[class*="bg-cyan"] *,
button[class*="bg-teal"] *,
button[class*="bg-emerald"] *,
button[class*="bg-purple"] *,
button[class*="bg-violet"] *,
button[class*="bg-rose"] *,
button[class*="bg-sky"] *,
[class*="bg-indigo-500"] .text-white,
[class*="bg-indigo-600"] .text-white,
[class*="bg-blue-500"] .text-white,
[class*="bg-blue-600"] .text-white,
[class*="bg-cyan-600"] .text-white,
[class*="bg-teal-600"] .text-white,
[class*="bg-emerald-600"] .text-white,
[class*="bg-purple-600"] .text-white,
[class*="bg-rose-600"] .text-white,
[class*="bg-sky-500"] .text-white,
[class*="bg-sky-600"] .text-white,
.bg-indigo-600,
.bg-indigo-500,
.bg-cyan-600,
.bg-teal-600,
.badge-active,
#hubBrandLogoBadge {
  color: #FFFFFF !important;
}

/* 3. Anti-hover-to-white trap shield: Prevent elements turning white on hover */
[class*="hover:text-white"]:hover {
  color: #0F172A !important;
}

[class*="hover:text-white"]:hover:is(
  [class*="bg-indigo-"],
  [class*="bg-blue-"],
  [class*="bg-cyan-"],
  [class*="bg-teal-"],
  [class*="bg-emerald-"],
  [class*="bg-purple-"],
  [class*="bg-violet-"],
  [class*="bg-rose-"],
  [class*="bg-red-"],
  [class*="bg-amber-"],
  [class*="bg-sky-"],
  .btn-primary,
  .btn-ai-primary
),
.btn-primary[class*="hover:text-white"]:hover,
.btn-primary [class*="hover:text-white"]:hover,
.btn-ai-primary[class*="hover:text-white"]:hover,
.btn-ai-primary [class*="hover:text-white"]:hover,
#btnResumePractice[class*="hover:text-white"]:hover,
#btnOpenSubmissionsDrawer[class*="hover:text-white"]:hover {
  color: #FFFFFF !important;
}

/* 4. Text overrides: Convert dark-theme white text back to high-contrast slate */
.text-slate-100,
.text-slate-200 {
  color: #1E293B !important;
}

.text-slate-300 {
  color: #334155 !important;
}

.text-gray-100,
.text-gray-200,
.text-zinc-100,
.text-zinc-200 {
  color: #334155 !important;
}

.text-slate-400,
.text-gray-400,
.text-zinc-400 {
  color: #475569 !important;
}

.text-slate-500,
.text-gray-500 {
  color: #64748B !important;
}

/* 5. Accessible Dark-to-Light Accent Mappings (WCAG AA >= 4.5:1) */
.text-sky-300,
.text-sky-400 { color: #0369A1 !important; }
.text-cyan-300,
.text-cyan-400 { color: #0E7490 !important; }
.text-emerald-300,
.text-emerald-400 { color: #047857 !important; }
.text-amber-300,
.text-amber-400 { color: #B45309 !important; }
.text-rose-300,
.text-rose-400 { color: #BE123C !important; }
.text-indigo-300,
.text-indigo-400 { color: #4338CA !important; }
.text-purple-300,
.text-purple-400 { color: #7E22CE !important; }
.text-violet-300,
.text-violet-400 { color: #6D28D9 !important; }
.text-teal-300,
.text-teal-400 { color: #0F766E !important; }

/* ========================================================
   UNIVERSAL CARD & CONTAINER DESIGN
   ======================================================== */
.ai-card,
.glass-card,
.card,
.test-card,
.hub-card,
.passage-card,
.question-card,
.panel {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-card:hover,
.glass-card:hover,
.card:hover,
.test-card:hover {
  border-color: #C7D2FE !important;
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-2px);
}

/* Active AI Card */
.ai-card-active {
  background: #FFFFFF !important;
  border: 1px solid #06B6D4 !important;
  box-shadow: 0 0 0 1px #06B6D4, 0 4px 16px rgba(6, 182, 212, 0.15) !important;
}

/* ========================================================
   STICKY HEADERS, DOCKS & SIDEBARS
   ======================================================== */
header,
nav.fixed,
nav.sticky,
.glass-panel,
.ai-header-nav,
.hub-sticky-filter-bar,
.teacher-module-nav-sticky {
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

/* Desktop 68px Icon Sidebar Rail */
#desktopSidebarRail,
.desktop-sidebar-rail {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  border-right: 1px solid #E2E8F0 !important;
}

.sidebar-rail-btn {
  background: transparent !important;
  color: #64748B !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
}

.sidebar-rail-btn:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

.sidebar-rail-btn.active {
  background: #EEF2FF !important;
  color: #4F46E5 !important;
  border-color: #C7D2FE !important;
}

/* Floating Sidebar Tooltip */
.emh-sidebar-floating-tooltip,
.sidebar-rail-tooltip {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08) !important;
}

/* ========================================================
   READING & LISTENING TEST PLAYER SUITE
   ======================================================== */
/* Split-Screen Reading Passages */
.reading-passage-container,
.passage-pane,
.split-left-pane,
.passage-content {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-md);
  padding: 1.5rem !important;
  line-height: 1.8 !important;
  font-size: 1.0625rem !important;
}

/* Questions Column */
.questions-pane,
.split-right-pane,
.question-container {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-md);
  padding: 1.5rem !important;
}

/* Question Prompt Inputs & Options */
input[type="text"],
input[type="search"],
textarea,
select {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.5rem 0.75rem !important;
  font-family: var(--font-sans) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
  border-color: #06B6D4 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
}

/* Question Option Choices (Radio/Checkbox) */
.option-label,
.choice-item,
.tfng-btn {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  transition: all 0.15s ease;
  cursor: pointer;
}

.option-label:hover,
.choice-item:hover,
.tfng-btn:hover {
  background: #EEF2FF !important;
  border-color: #C7D2FE !important;
  color: #4F46E5 !important;
}

.choice-item.selected,
.tfng-btn.active {
  background: #ECFEFF !important;
  border-color: #06B6D4 !important;
  color: #0891B2 !important;
  font-weight: 600;
}

/* Question Navigation Number Pills (1–40) */
.question-nav-btn,
.q-pill,
.question-number-pill {
  font-family: var(--font-mono) !important;
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}

.question-nav-btn:hover,
.q-pill:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

.question-nav-btn.answered,
.q-pill.answered {
  background: #ECFDF5 !important;
  color: #059669 !important;
  border-color: #A7F3D0 !important;
}

.question-nav-btn.current,
.q-pill.current {
  background: #4F46E5 !important;
  color: #FFFFFF !important;
  border-color: #4F46E5 !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3) !important;
}

/* Countdown Timer Badge */
.timer-display,
.test-timer,
#examTimer {
  font-family: var(--font-mono) !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-full) !important;
  padding: 0.375rem 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ========================================================
   AUDIO PLAYER CONTROLS (LISTENING TEST ENGINE)
   ======================================================== */
.audio-player-container,
.listening-audio-bar {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0.75rem 1rem !important;
}

/* Audio Scrubber */
input[type="range"] {
  accent-color: #06B6D4 !important;
}

/* ========================================================
   AI CRITIQUE & MONOSPACE STREAMING BOXES
   ======================================================== */
.ai-mono-box,
.ai-feedback-container,
.grammar-coach-card {
  font-family: var(--font-mono) !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem !important;
  color: #0F172A !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
}

/* Pulsing Cyan Indicator */
.ai-indicator-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #06B6D4 !important;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6) !important;
  animation: ai-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

@keyframes ai-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* AI Metric Badges */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.25rem 0.625rem !important;
  border-radius: var(--radius-full) !important;
  background: #ECFEFF !important;
  color: #0891B2 !important;
  border: 1px solid #A5F3FC !important;
}

.ai-badge-indigo {
  background: #EEF2FF !important;
  color: #4F46E5 !important;
  border-color: #C7D2FE !important;
}

.ai-badge-purple {
  background: #F5F3FF !important;
  color: #7C3AED !important;
  border-color: #DDD6FE !important;
}

/* Purge Legacy Dark Mode Toggles */
#themeToggleBtn,
#themeToggle,
#theme-toggle,
#theme-toggle-btn,
.theme-toggle,
.btn-theme-toggle,
[data-action="toggle-theme"],
.dark-mode-toggle,
button[title*="dark" i],
button[title*="theme" i],
button[aria-label*="theme" i] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ========================================================
   LIGHT TECH FILTER BUTTONS & PILLS (HIGH-CONTRAST PRECISION)
   ======================================================== */
.filter-btn,
.passage-filter-btn,
.type-filter-btn {
  background-color: #FFFFFF !important;
  color: #334155 !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.filter-btn:hover,
.passage-filter-btn:hover,
.type-filter-btn:hover {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

.filter-btn.active,
.filter-btn.is-active,
.passage-filter-btn.active,
.passage-filter-btn.is-active,
.type-filter-btn.active,
.type-filter-btn.is-active {
  background-color: #4F46E5 !important;
  color: #FFFFFF !important;
  border-color: #4F46E5 !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35) !important;
  font-weight: 700 !important;
}

/* Ensure text inside search wrappers does not collide with absolute icons */
.search-wrapper input.search-input,
.search-wrapper .search-input,
#writingSearchInput {
  padding-left: 2.75rem !important;
  padding-right: 2.5rem !important;
}

/* Ensure transparent inputs in flex search bars have zero border */
#searchBox {
  background-color: transparent !important;
  border: none !important;
  padding: 0.25rem 0.5rem !important;
  box-shadow: none !important;
}


/* ==========================================================================
   PERMANENT LIGHT TECH - HERO SIMULATOR BUTTONS & ACCESSIBLE CONTRAST
   ========================================================================== */
a[href="full-test-simulator.html"],
.hero-sim-btn-light {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
a[href="full-test-simulator.html"]:hover,
.hero-sim-btn-light:hover {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}
a[href*="full-test-simulator.html?mode=real"],
.hero-sim-btn-primary {
  background-color: #4F46E5 !important;
  color: #FFFFFF !important;
  border: 1px solid #4F46E5 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}
a[href*="full-test-simulator.html?mode=real"]:hover,
.hero-sim-btn-primary:hover {
  background-color: #4338CA !important;
}

/* Ensure filter buttons are always light theme with maximum contrast */
.filter-btn, .passage-filter-btn, .type-filter-btn {
  background-color: #FFFFFF !important;
  color: #334155 !important;
  border: 1px solid #E2E8F0 !important;
}
.filter-btn:hover, .passage-filter-btn:hover, .type-filter-btn:hover {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}
.filter-btn.active, .filter-btn.is-active,
.passage-filter-btn.active, .passage-filter-btn.is-active,
.type-filter-btn.active, .type-filter-btn.is-active {
  background-color: #4F46E5 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #4F46E5 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

/* Search input icon padding safety */
.search-input, #writingSearchInput {
  padding-left: 2.75rem !important;
  padding-right: 2.5rem !important;
}