/* styles.css */

/* Fonts import: Space Grotesk (headings), Bebas Neue (nav/labels), Manrope (body), JetBrains Mono (typing practice) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Bebas+Neue&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Light Mode Colors (default) */
  --color-background: #f8fafc;             /* Slate 50 background */
  --color-background-offset: #f1f5f9;      /* Slate 100 offset */
  --color-surface: #ffffff;                /* Pure white surface */
  --color-surface-container: #f1f5f9;      /* Container background */
  --color-surface-container-low: #f8fafc;  
  --color-surface-container-lowest: #ffffff;
  --color-surface-variant: #e2e8f0;        /* Slate 200 variant */
  --color-on-background: #0f172a;          /* Slate 900 text */
  --color-on-surface: #0f172a;
  --color-on-surface-variant: #475569;      /* Slate 600 muted text */
  --color-outline: #cbd5e1;                /* Slate 300 thin borders */
  --color-outline-variant: #cbd5e1;
  
  /* Brand accents - Premium Indigo */
  --color-primary: #4f46e5;                /* Indigo 600 */
  --color-primary-container: #ede9fe;      /* Indigo 100 */
  --color-on-primary-container: #4f46e5;
  
  /* Accent Secondary - Sky Blue / Cyan */
  --color-secondary: #0ea5e9;              /* Sky 500 */
  --color-secondary-container: #e0f2fe;    /* Sky 100 */
  --color-on-secondary-container: #0369a1; /* Sky 700 */
  
  /* Error - Crimson / Blood Red */
  --color-error: #ef4444;                  /* Red 500 */
  --color-error-container: #fee2e2;        /* Red 100 */
  --color-on-error-container: #b91c1c;     /* Red 700 */
  
  /* Tertiary & Success */
  --color-tertiary: #f59e0b;               /* Amber 500 */
  --color-on-tertiary-container: #b45309;  /* Amber 700 */
  --color-success: #10b981;                /* Emerald 500 */
  --color-tertiary-fixed-dim: #10b981;     /* Correct text green */
}

html.dark {
  /* Dark Mode Colors */
  --color-background: #0b0f19;             /* Very dark slate/navy */
  --color-background-offset: #111827;      /* Grey 900 */
  --color-surface: #1e293b;                /* Slate 800 surface */
  --color-surface-container: #1e293b;      
  --color-surface-container-low: #111827;  
  --color-surface-container-lowest: #0f172a;
  --color-surface-variant: #334155;        /* Slate 700 variant */
  --color-on-background: #f8fafc;          /* Slate 50 text */
  --color-on-surface: #f8fafc;
  --color-on-surface-variant: #94a3b8;      /* Slate 400 muted text */
  --color-outline: #334155;                /* Slate 700 thin borders */
  --color-outline-variant: #475569;        /* Slate 600 border offset */
  
  /* Brand accents - Premium Indigo */
  --color-primary: #818cf8;                /* Indigo 400 */
  --color-primary-container: #1e1b4b;      /* Indigo 950 */
  --color-on-primary-container: #c7d2fe;   /* Indigo 200 */
  
  /* Accent Secondary - Sky Blue / Cyan */
  --color-secondary: #38bdf8;              /* Sky 400 */
  --color-secondary-container: #0c4a6e;    /* Sky 900 */
  --color-on-secondary-container: #bae6fd; /* Sky 200 */
  
  /* Error */
  --color-error: #f87171;                  /* Red 400 */
  --color-error-container: #7f1d1d;        /* Red 950 */
  --color-on-error-container: #fecaca;     /* Red 200 */
  
  /* Tertiary & Success */
  --color-tertiary: #fbbf24;               /* Amber 400 */
  --color-on-tertiary-container: #fef08a;  /* Amber 200 */
  --color-success: #34d399;                /* Emerald 400 */
  --color-tertiary-fixed-dim: #34d399;     /* Correct text green */
}

body {
  font-family: 'Manrope', sans-serif;
  background-color: var(--color-background);
  color: var(--color-on-background);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, .font-display-lg {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.heading-bebas, nav a {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
}

/* Typing Arena Typography and Animations */
.typing-arena-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  line-height: 2.6rem;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
}

/* Character highlight states for Inverted Cream theme */
.char-untyped {
  color: var(--color-on-surface-variant);
  opacity: 0.55;
}

.char-correct {
  color: var(--color-success); /* Modern green for correct inputs */
  background-color: rgba(16, 185, 129, 0.1);
  border-radius: 4px;
  padding: 0 1px;
  transition: background-color 0.1s ease;
}

.char-incorrect {
  color: var(--color-error); /* Crimson Red for errors */
  background-color: var(--color-error-container);
  border-radius: 4px;
  text-decoration: line-through;
  padding: 0 1px;
}

.char-current {
  color: #ffffff;
  background-color: var(--color-primary); /* Indigo highlighted block cursor */
  border-radius: 3px;
  animation: cursor-block-blink 1s infinite;
}

@keyframes cursor-block-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Focus Ring for practice inputs */
.typing-input-focus:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Subtle modern grid pattern */
.hero-pattern {
  background-color: var(--color-background);
  background-image: radial-gradient(var(--color-outline) 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
}

/* Premium Box Shadows replacing thick black borders */
.underground-shadow {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  border: 1px solid var(--color-outline);
}

.underground-shadow-primary {
  box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.12);
  border: 1px solid var(--color-primary);
}

.underground-shadow-error {
  box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.12);
  border: 1px solid var(--color-error);
}

.underground-card-hover {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--color-outline) !important;
}

.underground-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  border-color: var(--color-primary) !important;
}

/* Table Row Stripping */
.table-stripped tr:nth-child(even) {
  background-color: var(--color-background-offset);
}

.table-stripped tr {
  border-bottom: 1px solid var(--color-outline);
}

.table-stripped tr:hover {
  background-color: var(--color-surface-container-low);
  transition: background-color 0.2s ease;
}

/* Visual Keyboard Styling - Clean & Modern Style */
.keyboard-key {
  background: var(--color-surface);
  color: var(--color-on-background);
  border: 1px solid var(--color-outline);
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--color-outline);
  transition: all 0.08s ease;
  user-select: none;
}

.keyboard-key.active {
  background: var(--color-primary);
  color: #ffffff !important;
  transform: translateY(2px);
  box-shadow: none;
  border-color: var(--color-primary);
}

.keyboard-key.active span {
  color: #ffffff !important;
}

/* Transition for Navigation Views */
.app-view {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.app-view.active {
  display: block;
  opacity: 1;
}

/* Ticker loop animations */
@keyframes ticker-loop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
}

.ticker-content {
  display: inline-block;
  animation: ticker-loop 35s linear infinite;
}

/* Animated slide-down entry for navigation */
@keyframes nav-slide-down {
  0% { transform: translateY(-100%); opacity: 0.8; }
  100% { transform: translateY(0); opacity: 1; }
}

.animate-slide-down {
  animation: nav-slide-down 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Admin Sidebar Utilities */
.admin-sidebar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 8px;
}

.admin-sidebar-btn:hover {
  background-color: var(--color-background-offset);
  color: var(--color-primary);
}

.admin-sidebar-btn.active {
  background-color: var(--color-primary-container) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Navigation Zoom Hover Animation */
#main-navbar a {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.15s ease, border-color 0.15s ease !important;
  display: inline-flex;
}
#main-navbar a:hover {
  transform: scale(1.05) translateY(-1px);
}
#mobile-menu a:hover {
  transform: scale(1.02) translateX(4px);
}

/* Custom Scrollbar for premium feel */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-background);
}
::-webkit-scrollbar-thumb {
  background: var(--color-outline);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-on-surface-variant);
}

/* Transcription Diff Evaluation Highlighting */
.correct-word {
  color: var(--color-success) !important;
  background-color: transparent !important;
  font-weight: bold;
}

.wrong-word {
  color: var(--color-error) !important;
  text-decoration: underline !important;
  font-weight: bold;
  background-color: transparent !important;
}

.omitted-word {
  background-color: #fef08a !important; /* Yellow background */
  color: #854d0e !important;             /* Dark yellow text */
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

html.dark .omitted-word {
  background-color: #ca8a04 !important; /* Muted dark yellow background */
  color: #fef08a !important;             /* Light yellow text */
}

/* Distraction-Free zone styling when dictation-typing-active class is on body */
body.dictation-typing-active {
  background-color: var(--color-background) !important;
  overflow: hidden !important;
}

body.dictation-typing-active #main-navbar,
body.dictation-typing-active #mobile-menu,
body.dictation-typing-active #background-watermark,
body.dictation-typing-active footer,
body.dictation-typing-active #main-view-container > div:not(#audio-view),
body.dictation-typing-active #audio-view .text-center.mb-8,
body.dictation-typing-active #dictation-list-container,
body.dictation-typing-active #dictation-active-container > div:not(#dictation-typing-stage),
body.dictation-typing-active #dictation-instructions-card {
  display: none !important;
}

body.dictation-typing-active #audio-view section {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
  max-width: 100% !important;
  margin: 0 !important;
  width: 100% !important;
}

body.dictation-typing-active #dictation-typing-stage {
  display: block !important;
  width: 96% !important;
  margin: 0 auto !important;
  max-width: 1400px !important;
}

/* Force solid colors and borders */
body.dictation-typing-active #dictation-typing-stage .bg-surface {
  background-color: var(--color-surface) !important;
  border: 2px solid var(--color-outline) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

body.dictation-typing-active #dictation-transcription-input {
  background-color: var(--color-surface-container) !important;
  border: 2px solid var(--color-outline) !important;
  color: var(--color-on-background) !important;
  box-shadow: none !important;
  outline: none !important;
}