/**
 * MBIT Editor - Accessibility Enhancements
 * WCAG AAA + Neurodivergent-Friendly Styles
 *
 * Version: 1.0.0
 * Last Updated: 2026-02-19
 *
 * Consolidates:
 * - WCAG AAA focus indicators and target sizes
 * - Neurodivergent reading modes (dyslexia, ADHD, focus)
 * - User accessibility preferences (fonts, text size, spacing)
 *
 * Requires: mbit-editor.css (core styles)
 */

/* =============================================================================
   FONT IMPORTS
   ============================================================================= */

/* Atkinson Hyperlegible - Designed for low vision readers (Google Fonts CDN) */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Note: OpenDyslexic loaded via CDN in dyslexia mode section below.
   Lexie Readable removed — not freely available via CDN. */

/* =============================================================================
   WCAG AAA FOCUS INDICATORS — non-editor only
   =============================================================================
   Editor.js v2.31's bundled CSS already provides WCAG-AAA focus rings,
   touch targets, and text spacing on its own UI (toolbar, popover, inline
   toolbar, settings). Earlier revisions of this file enforced these on
   .ce-* / .cdx-* selectors — but the bundle has its own a11y profiles
   and our overrides ended up *breaking* layout (popovers forced to 44×44
   in a 100px container collapse into a vertical stack, etc.).
   We now only style our app's own widgets and let the editor.js bundle
   own everything inside .codex-editor. */

/* =============================================================================
   FONT PREFERENCE CLASSES (apply outside the editor too)
   ============================================================================= */

/* =============================================================================
   FONT PREFERENCE CLASSES
   ============================================================================= */

.rm-font-opendyslexic,
.rm-font-opendyslexic * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', system-ui, sans-serif !important;
}

.rm-font-atkinson,
.rm-font-atkinson * {
  font-family: 'Atkinson Hyperlegible', Arial, sans-serif !important;
}

.rm-font-lexie,
.rm-font-lexie * {
  font-family: 'Lexie Readable', Georgia, serif !important;
}

/* =============================================================================
   TEXT SIZE CLASSES
   ============================================================================= */

:root {
  --rm-text-base: 1rem;
  --rm-text-scale-small: 0.875;
  --rm-text-scale-large: 1.25;
  --rm-text-scale-xlarge: 1.5;
}

/* Small text */
.rm-text-small {
  font-size: calc(var(--rm-text-base) * var(--rm-text-scale-small)) !important;
}

.rm-text-small h1 { font-size: 1.75rem !important; }
.rm-text-small h2 { font-size: 1.5rem !important; }
.rm-text-small h3 { font-size: 1.25rem !important; }
.rm-text-small p, .rm-text-small li { font-size: 0.875rem !important; }

/* Large text */
.rm-text-large {
  font-size: calc(var(--rm-text-base) * var(--rm-text-scale-large)) !important;
}

.rm-text-large h1 { font-size: 2.75rem !important; }
.rm-text-large h2 { font-size: 2.25rem !important; }
.rm-text-large h3 { font-size: 1.875rem !important; }
.rm-text-large p, .rm-text-large li { font-size: 1.25rem !important; }

/* Extra Large text */
.rm-text-xlarge {
  font-size: calc(var(--rm-text-base) * var(--rm-text-scale-xlarge)) !important;
}

.rm-text-xlarge h1 { font-size: 3.25rem !important; }
.rm-text-xlarge h2 { font-size: 2.75rem !important; }
.rm-text-xlarge h3 { font-size: 2.25rem !important; }
.rm-text-xlarge p, .rm-text-xlarge li { font-size: 1.5rem !important; }

/* Scale form elements with text size */
.rm-text-large input,
.rm-text-large select,
.rm-text-large textarea,
.rm-text-large button {
  font-size: 1.25rem !important;
  padding: 0.75rem 1rem !important;
}

.rm-text-xlarge input,
.rm-text-xlarge select,
.rm-text-xlarge textarea,
.rm-text-xlarge button {
  font-size: 1.5rem !important;
  padding: 1rem 1.25rem !important;
}

/* =============================================================================
   LINE SPACING CLASSES
   ============================================================================= */

.rm-spacing-compact {
  line-height: 1.3 !important;
}

.rm-spacing-compact p,
.rm-spacing-compact li,
.rm-spacing-compact div {
  line-height: 1.3 !important;
  margin-bottom: 0.5em !important;
}

.rm-spacing-relaxed {
  line-height: 1.8 !important;
}

.rm-spacing-relaxed p,
.rm-spacing-relaxed li,
.rm-spacing-relaxed div {
  line-height: 1.8 !important;
  margin-bottom: 1.25em !important;
}

.rm-spacing-very-relaxed {
  line-height: 2.0 !important;
}

.rm-spacing-very-relaxed p,
.rm-spacing-very-relaxed li,
.rm-spacing-very-relaxed div {
  line-height: 2.0 !important;
  margin-bottom: 1.5em !important;
}

.rm-spacing-relaxed,
.rm-spacing-very-relaxed {
  word-spacing: 0.05em;
  letter-spacing: 0.02em;
}

/* =============================================================================
   HIGH CONTRAST MODE
   ============================================================================= */

.rm-high-contrast {
  --rm-bg-primary: #000000 !important;
  --rm-bg-secondary: #1a1a1a !important;
  --rm-text-primary: #ffffff !important;
  --rm-text-secondary: #ffff00 !important;
  --rm-link-color: #00ffff !important;
  --rm-border-color: #ffffff !important;
  --rm-focus-ring: #ffff00 !important;
}

.rm-high-contrast,
.rm-high-contrast * {
  background-color: var(--rm-bg-primary, #000000) !important;
  color: var(--rm-text-primary, #ffffff) !important;
  border-color: var(--rm-border-color, #ffffff) !important;
}

.rm-high-contrast a {
  color: var(--rm-link-color, #00ffff) !important;
  text-decoration: underline !important;
}

.rm-high-contrast a:hover,
.rm-high-contrast a:focus {
  color: var(--rm-text-secondary, #ffff00) !important;
  outline: 3px solid var(--rm-focus-ring, #ffff00) !important;
  outline-offset: 2px !important;
}

.rm-high-contrast button,
.rm-high-contrast input[type="submit"],
.rm-high-contrast input[type="button"] {
  background-color: var(--rm-bg-secondary, #1a1a1a) !important;
  color: var(--rm-text-primary, #ffffff) !important;
  border: 2px solid var(--rm-border-color, #ffffff) !important;
}

.rm-high-contrast button:hover,
.rm-high-contrast button:focus {
  background-color: var(--rm-text-secondary, #ffff00) !important;
  color: var(--rm-bg-primary, #000000) !important;
}

.rm-high-contrast input,
.rm-high-contrast select,
.rm-high-contrast textarea {
  background-color: var(--rm-bg-secondary, #1a1a1a) !important;
  color: var(--rm-text-primary, #ffffff) !important;
  border: 2px solid var(--rm-border-color, #ffffff) !important;
}

.rm-high-contrast input:focus,
.rm-high-contrast select:focus,
.rm-high-contrast textarea:focus {
  outline: 3px solid var(--rm-focus-ring, #ffff00) !important;
  outline-offset: 2px !important;
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

.rm-reduced-motion,
.rm-reduced-motion * {
  animation: none !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   NEURODIVERGENT READING MODES
   ============================================================================= */

/* Base neurodivergent-friendly defaults */
.learning-content,
.course-content,
.module-content {
  max-width: 70ch;
  margin-inline: auto;
  padding: var(--spacing-lg, 24px);
  line-height: 1.7;
  word-spacing: 0.05em;
  letter-spacing: 0.01em;
}

/* Focus indicators */
.learning-content a:focus,
.learning-content button:focus,
.learning-content input:focus {
  outline: 3px solid var(--focus-ring-color, #388ae5);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Dyslexia-friendly mode */
[data-reading-mode="dyslexia"] {
  font-family: 'Atkinson Hyperlegible', 'Comic Sans MS', system-ui, sans-serif;
}

[data-reading-mode="dyslexia"] .learning-content,
[data-reading-mode="dyslexia"] .course-content,
[data-reading-mode="dyslexia"] .module-content {
  word-spacing: 0.15em;
  letter-spacing: 0.05em;
  line-height: 2;
  font-size: 1.1rem;
  text-align: left;
  background-color: #faf8f5;
  color: #333;
  padding: var(--spacing-xl, 32px);
  border-radius: var(--radius-lg, 12px);
}

[data-reading-mode="dyslexia"] p {
  margin-bottom: 1.5em;
}

[data-reading-mode="dyslexia"] h1,
[data-reading-mode="dyslexia"] h2,
[data-reading-mode="dyslexia"] h3 {
  margin-top: 2em;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--accent-soft, #e1f2ff);
}

[data-reading-mode="dyslexia"] * {
  text-transform: none !important;
}

/* ADHD-friendly mode */
[data-reading-mode="adhd"] {
  --animation-duration: 0s;
}

[data-reading-mode="adhd"] .learning-content,
[data-reading-mode="adhd"] .course-content,
[data-reading-mode="adhd"] .module-content {
  background-color: #ffffff;
  border-left: 4px solid var(--accent-primary, #388ae5);
  padding-left: var(--spacing-xl, 32px);
  line-height: 1.8;
}

[data-reading-mode="adhd"] .progress-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary, #388ae5), #22c55e);
  z-index: 1000;
  transition: width 0.1s ease-out;
}

[data-reading-mode="adhd"] .sidebar:not(.sidebar--visible),
[data-reading-mode="adhd"] .notification:not(.notification--important),
[data-reading-mode="adhd"] .related-content {
  display: none;
}

[data-reading-mode="adhd"] section,
[data-reading-mode="adhd"] article {
  margin-bottom: 2em;
  padding: var(--spacing-lg, 24px);
  background: var(--surface-muted, #f8f9fa);
  border-radius: var(--radius-md, 8px);
}

[data-reading-mode="adhd"] h2::before {
  content: "\2192 ";
  color: var(--accent-primary, #388ae5);
}

/* Focus mode */
[data-reading-mode="focus"] body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 998;
  pointer-events: none;
}

[data-reading-mode="focus"] .learning-content,
[data-reading-mode="focus"] .course-content,
[data-reading-mode="focus"] .module-content {
  position: relative;
  z-index: 999;
  background: #ffffff;
  box-shadow: 0 0 100px 50px rgba(255, 255, 255, 0.9);
  max-width: 60ch;
  padding: var(--spacing-xl, 32px);
  border-radius: var(--radius-lg, 12px);
}

[data-reading-mode="focus"] header:not(.content-header),
[data-reading-mode="focus"] footer,
[data-reading-mode="focus"] nav:not(.content-nav),
[data-reading-mode="focus"] aside {
  opacity: 0;
  pointer-events: none;
}

/* Sepia mode */
[data-reading-mode="sepia"] {
  --text-primary: #5b4636;
  --surface-base: #f4ecd8;
}

[data-reading-mode="sepia"] body {
  background-color: #faf3e0;
}

[data-reading-mode="sepia"] .learning-content,
[data-reading-mode="sepia"] .course-content,
[data-reading-mode="sepia"] .module-content {
  background-color: var(--surface-base);
  color: var(--text-primary);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.8;
}

/* =============================================================================
   UNIFIED READING MODE CLASSES (rm-mode-*)
   Used by useAccessibility composable - applies to ALL views including editor
   ============================================================================= */

/* Content selectors that apply across all views */
.rm-content-target,
.lesson-content,
.content-body,
.module-content,
.course-content,
.learning-content,
.guide-content,
.editorjs-container,
.ce-block__content,
.ce-paragraph,
.module-viewer,
.module-editor-view,
.guide-detail-view,
.lesson-page,
.course-detail,
.course-catalog,
.learning-path-detail,
.dashboard-page {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* =============================================================================
   READING MODES
   All modes work by overriding --ml-* design tokens on <html>.
   Components using var(--ml-*) automatically adapt.
   ============================================================================= */

/* ----- DYSLEXIA MODE ----- */
.rm-mode-dyslexia {
  --ml-font-body: 'Atkinson Hyperlegible', 'Comic Sans MS', system-ui, sans-serif;
}

.rm-mode-dyslexia body,
.rm-mode-dyslexia .mbit-learning {
  font-family: var(--ml-font-body) !important;
  word-spacing: 0.12em;
  letter-spacing: 0.04em;
}

.rm-mode-dyslexia p,
.rm-mode-dyslexia li,
.rm-mode-dyslexia td {
  line-height: 2 !important;
  margin-bottom: 1em;
}

.rm-mode-dyslexia * {
  text-transform: none !important;
}

/* ----- ADHD MODE ----- */
/* Reduces distractions: kills animations, narrows content width */
.rm-mode-adhd *,
.rm-mode-adhd *::before,
.rm-mode-adhd *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

.rm-mode-adhd .app-main {
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* ----- FOCUS MODE ----- */
/* Dims header/footer, narrows reading width */
.rm-mode-focus .app-header,
.rm-mode-focus .app-footer {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.rm-mode-focus .app-header:hover,
.rm-mode-focus .app-header:focus-within,
.rm-mode-focus .app-footer:hover {
  opacity: 1;
}

.rm-mode-focus .app-main {
  max-width: 65ch;
  margin: 0 auto;
}

/* ----- SEPIA MODE ----- */
/* Warm tones via design token overrides */
.rm-mode-sepia {
  --ml-bg: #faf3e0;
  --ml-bg-subtle: #f4ecd8;
  --ml-surface: #f8f1e3;
  --ml-text: #5b4636;
  --ml-text-muted: #7a6652;
  --ml-border: #e0d5c1;
  --ml-primary: #8b5a2b;
  --ml-primary-hover: #6d4722;
}

.rm-mode-sepia body {
  background-color: var(--ml-bg) !important;
  color: var(--ml-text) !important;
}

/* =============================================================================
   THEME OVERRIDE CLASSES
   --------------------------------------------------------------------------
   Dark mode is handled entirely by --ml-* design tokens in design-tokens.css.
   Components using var(--ml-*) automatically adapt. No hardcoded colors needed.

   Only color-scheme hints are kept here for proper scrollbar/form theming.
   ============================================================================= */

.rm-theme-light,
.rm-theme-light body {
  color-scheme: light;
}

[data-theme-mode="dark"],
[data-theme-mode="dark"] body {
  color-scheme: dark;
}

/* =============================================================================
   READING LINE GUIDE
   ============================================================================= */

[data-reading-guide="line"] {
  --guide-height: 2.5em;
  --guide-color: rgba(255, 255, 0, 0.3);
}

[data-reading-guide="line"] .learning-content::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: var(--guide-height);
  background: var(--guide-color);
  pointer-events: none;
  z-index: 1000;
  top: calc(var(--cursor-y, 50%) - var(--guide-height) / 2);
  transition: top 0.05s ease-out;
}

/* =============================================================================
   PROGRESS INDICATORS
   ============================================================================= */

.rm-progress-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.rm-progress-bar {
  flex: 1;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.rm-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.rm-progress-text {
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 3rem;
  text-align: right;
}

/* =============================================================================
   KEYBOARD NAVIGATION HINTS
   ============================================================================= */

.rm-keyboard-hint {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  margin-left: 0.5rem;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.75rem;
  color: #666;
  vertical-align: middle;
}

.rm-show-keyboard-hints *:focus .rm-keyboard-hint {
  opacity: 1;
}

/* =============================================================================
   READING MODE TOGGLE UI
   Styles are now handled by the Vue ReadingModeToggle.vue component (scoped).
   Only print-hide rule kept here.
   ============================================================================= */

/* =============================================================================
   CONTENT TYPE INDICATORS
   ============================================================================= */

.rm-content-simplified::before {
  content: 'Vereinfachte Version';
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-bottom: 1rem;
  background-color: #4caf50;
  color: white;
  font-size: 0.875rem;
  font-weight: bold;
  border-radius: 4px;
}

html[lang="en"] .rm-content-simplified::before {
  content: 'Simplified Version';
}

.rm-has-audio::after {
  content: ' \1f50a';
  font-size: 1.25em;
  vertical-align: middle;
}

.rm-has-sign-language::after {
  content: ' \1f91f';
  font-size: 1.25em;
  vertical-align: middle;
}

/* =============================================================================
   BREAK REMINDER
   ============================================================================= */

.rm-break-reminder {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 400px;
}

.rm-break-reminder h2 {
  margin-bottom: 1rem;
  color: #2196f3;
}

.rm-break-reminder p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.rm-break-reminder button {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin: 0 0.5rem;
}

.rm-break-reminder .btn-primary {
  background: #4caf50;
  color: white;
}

.rm-break-reminder .btn-secondary {
  background: #f5f5f5;
  color: #333;
}

.rm-break-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
  .rm-text-large button,
  .rm-text-large a,
  .rm-text-xlarge button,
  .rm-text-xlarge a {
    min-height: 48px;
    min-width: 48px;
  }

  .rm-focus-mode .sidebar,
  .rm-focus-mode aside {
    display: none !important;
  }

  .reading-mode-toggle {
    bottom: 10px;
    left: 10px;
    padding: 0;
  }
}

@media (max-width: 480px) {
  .rm-text-xlarge h1 { font-size: 2rem !important; }
  .rm-text-xlarge h2 { font-size: 1.75rem !important; }
  .rm-text-xlarge h3 { font-size: 1.5rem !important; }
  .rm-text-xlarge p, .rm-text-xlarge li { font-size: 1.25rem !important; }
}

/* =============================================================================
   READING MODE: Frappe CSS Variable Integration
   reading-mode.js sets inline --var overrides on :root for Sepia/High Contrast.
   These classes handle Dyslexia, ADHD, Focus modes + text size/spacing.
   ============================================================================= */

/* --- Text Size classes (set by reading-mode.js on <html>) ---
   Frappe uses rem units everywhere. Changing html font-size scales everything. */
html.rm-text-small { font-size: 14px !important; }
/* html default is 16px = rm-text-medium */
html.rm-text-large { font-size: 18px !important; }
html.rm-text-x-large { font-size: 20px !important; }
html.rm-text-xx-large { font-size: 24px !important; }

/* --- Line Spacing classes (set by reading-mode.js on <body>) --- */
body.rm-spacing-compact,
body.rm-spacing-compact .page-container,
body.rm-spacing-compact .layout-main-section,
body.rm-spacing-compact p, body.rm-spacing-compact li {
  line-height: 1.4 !important;
}
body.rm-spacing-relaxed,
body.rm-spacing-relaxed .page-container,
body.rm-spacing-relaxed .layout-main-section,
body.rm-spacing-relaxed p, body.rm-spacing-relaxed li {
  line-height: 1.8 !important;
}
body.rm-spacing-loose,
body.rm-spacing-loose .page-container,
body.rm-spacing-loose .layout-main-section,
body.rm-spacing-loose p, body.rm-spacing-loose li {
  line-height: 2.0 !important;
}

/* --- Dyslexia Mode (class: rm-dyslexia) ---
   OpenDyslexic loaded on-demand via JS when dyslexia mode is activated.
   Falls back to Atkinson Hyperlegible (loaded above) → Comic Sans MS → system fonts. */
.rm-dyslexia,
.rm-dyslexia .page-container,
.rm-dyslexia .layout-main-section,
.rm-dyslexia .codex-editor,
.rm-dyslexia .widget,
.rm-dyslexia .widget-body,
.rm-dyslexia .sidebar-menu,
.rm-dyslexia .navbar {
  font-family: 'OpenDyslexic', 'Atkinson Hyperlegible', 'Comic Sans MS', system-ui, sans-serif !important;
  word-spacing: 0.12em;
  letter-spacing: 0.04em;
}

.rm-dyslexia p,
.rm-dyslexia li,
.rm-dyslexia .ce-paragraph,
.rm-dyslexia .ce-header,
.rm-dyslexia .widget-label,
.rm-dyslexia .shortcut-widget-box .widget-label {
  line-height: 1.8 !important;
}

.rm-dyslexia * {
  text-transform: none !important;
}

/* --- ADHD Mode (class: rm-adhd) --- */
.rm-adhd *,
.rm-adhd *::before,
.rm-adhd *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

.rm-adhd .layout-main-section {
  max-width: 900px;
  margin-inline: auto;
}

/* --- Focus Mode (class: rm-focus) --- */
.rm-focus .layout-side-section,
.rm-focus .sidebar-menu {
  opacity: 0.15;
  transition: opacity 0.3s ease;
}

.rm-focus .layout-side-section:hover,
.rm-focus .layout-side-section:focus-within,
.rm-focus .sidebar-menu:hover,
.rm-focus .sidebar-menu:focus-within {
  opacity: 1;
}

.rm-focus .layout-main-section {
  position: relative;
  z-index: 2;
}

/* --- High Contrast (class: rm-high-contrast) ---
   CSS variables on :root handle var()-based elements.
   These rules force colors on elements that use compiled SCSS ($text-muted etc). */

/* Force all text white, all backgrounds black */
.rm-high-contrast {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.rm-high-contrast .page-container,
.rm-high-contrast .layout-main-section,
.rm-high-contrast .layout-side-section,
.rm-high-contrast .col-lg-2,
.rm-high-contrast .desk-sidebar,
.rm-high-contrast .standard-sidebar-section,
.rm-high-contrast .sidebar-menu {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Navbar */
.rm-high-contrast .navbar,
.rm-high-contrast .navbar .navbar-nav .nav-link,
.rm-high-contrast #navbar-breadcrumbs a,
.rm-high-contrast .navbar .search-bar {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Sidebar links */
.rm-high-contrast .sidebar-menu .sidebar-menu-item a,
.rm-high-contrast .sidebar-menu .sidebar-label,
.rm-high-contrast .desk-sidebar .sidebar-menu a,
.rm-high-contrast .standard-sidebar-section .sidebar-label {
  color: #ffffff !important;
}

.rm-high-contrast .sidebar-menu .sidebar-menu-item a:hover,
.rm-high-contrast .sidebar-menu .sidebar-menu-item.selected a {
  color: #00ffff !important;
  background-color: #1a1a1a !important;
}

/* Widgets (cards, shortcuts, number cards, charts) */
.rm-high-contrast .widget {
  background-color: #0a0a0a !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

.rm-high-contrast .widget-head,
.rm-high-contrast .widget-body,
.rm-high-contrast .widget-title,
.rm-high-contrast .widget-label,
.rm-high-contrast .widget-subtitle,
.rm-high-contrast .widget-footer {
  color: #ffffff !important;
}

/* Shortcut widgets */
.rm-high-contrast .shortcut-widget-box .widget-label,
.rm-high-contrast .shortcut-widget-box .widget-title,
.rm-high-contrast .shortcut-widget-box a {
  color: #ffffff !important;
}

/* Widget group headings */
.rm-high-contrast .widget-group-title,
.rm-high-contrast .widget-group-head {
  color: #ffffff !important;
}

/* Number card */
.rm-high-contrast .number-widget-box .number,
.rm-high-contrast .number-widget-box .widget-content {
  color: #ffffff !important;
}

/* Quick list */
.rm-high-contrast .quick-list-item,
.rm-high-contrast .quick-list-item .ellipsis {
  color: #ffffff !important;
}

/* Links */
.rm-high-contrast a {
  color: #00ffff !important;
  text-decoration: underline !important;
}

.rm-high-contrast a:hover,
.rm-high-contrast a:focus {
  color: #ffff00 !important;
}

/* Muted text → yellow for contrast */
.rm-high-contrast .text-muted,
.rm-high-contrast .text-light,
.rm-high-contrast .text-extra-muted,
.rm-high-contrast .indicator-pill,
.rm-high-contrast .text-secondary {
  color: #ffff00 !important;
}

/* Headings */
.rm-high-contrast h1, .rm-high-contrast h2,
.rm-high-contrast h3, .rm-high-contrast h4,
.rm-high-contrast h5, .rm-high-contrast h6,
.rm-high-contrast .ce-header {
  color: #ffffff !important;
}

/* Forms and controls */
.rm-high-contrast input,
.rm-high-contrast select,
.rm-high-contrast textarea,
.rm-high-contrast .form-control,
.rm-high-contrast .awesomebar .search-bar-icon,
.rm-high-contrast .search-bar input {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Focus indicators */
.rm-high-contrast *:focus-visible {
  outline: 3px solid #ffff00 !important;
  outline-offset: 2px;
}

/* Buttons */
.rm-high-contrast .btn-default,
.rm-high-contrast .btn-secondary {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

.rm-high-contrast .btn-primary,
.rm-high-contrast .btn-primary-dark {
  background-color: #00ffff !important;
  color: #000000 !important;
  border-color: #00ffff !important;
}

/* --- Sepia (class: rm-sepia) ---
   CSS variables on :root handle var()-based elements.
   These rules force colors on elements that use compiled SCSS values. */
.rm-sepia {
  background-color: #f4ecd8 !important;
  color: #5b4636 !important;
}

.rm-sepia .page-container,
.rm-sepia .layout-main-section,
.rm-sepia .layout-side-section {
  background-color: #f4ecd8 !important;
}

.rm-sepia .navbar {
  background-color: #e8dcc4 !important;
}

.rm-sepia .widget {
  background-color: #f8f1e3 !important;
  border-color: #d4c9b5 !important;
}

.rm-sepia .widget-title,
.rm-sepia .widget-label,
.rm-sepia .widget-group-title,
.rm-sepia h1, .rm-sepia h2,
.rm-sepia h3, .rm-sepia h4 {
  color: #3d3226 !important;
}

.rm-sepia .text-muted,
.rm-sepia .text-light,
.rm-sepia .widget-subtitle {
  color: #7a6652 !important;
}

.rm-sepia .sidebar-menu a,
.rm-sepia .sidebar-label {
  color: #5b4636 !important;
}

.rm-sepia a:not(.btn) {
  color: #8b5a2b !important;
}

.rm-sepia .ce-paragraph,
.rm-sepia .widget-label,
.rm-sepia p,
.rm-sepia li {
  font-family: Georgia, 'Times New Roman', serif;
}

.rm-sepia input,
.rm-sepia select,
.rm-sepia textarea,
.rm-sepia .form-control {
  background-color: #efe5d0 !important;
  color: #5b4636 !important;
  border-color: #d4c9b5 !important;
}

/* --- Reading Guide (line following cursor) --- */
[data-reading-guide="line"]::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 2.5em;
  background: rgba(255, 255, 0, 0.2);
  pointer-events: none;
  z-index: 10000;
  top: calc(var(--cursor-y, 50%) - 1.25em);
  transition: top 0.05s ease-out;
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
  .rm-high-contrast,
  .rm-high-contrast * {
    background: white !important;
    color: black !important;
  }

  .rm-focus-mode::after {
    display: none !important;
  }

  .rm-break-reminder,
  .rm-break-overlay,
  .reading-mode-toggle {
    display: none !important;
  }

  [data-reading-mode] {
    all: unset;
  }

  .learning-content,
  .course-content,
  .module-content {
    max-width: 100%;
    padding: 0;
    background: white;
    color: black;
    font-size: 12pt;
    line-height: 1.5;
  }
}

/* =============================================================================
   DARK MODE BRIDGE
   design-tokens.css handles all --ml-* dark mode values on :root.
   Body inherits via var(--ml-bg) / var(--ml-text) set in App.vue.
   No hardcoded colors needed here.
   ============================================================================= */