/* ================================================================
   MATHFIELD.CSS
   ================================================================
   MathLive <math-field> component styling for PCA-App
   
   Used in: templates/trame/teachers.html
   
   TABLE OF CONTENTS:
   ------------------
   1. MATH-FIELD BASE ELEMENT
   2. SELECTION & FOCUS STATES
   3. MATH-FIELD VARIANTS
   4. TEACHER MATH-FIELD BLOCK
   5. OVERFLOW & CLIPPING FIXES
   6. KEYBOARD CONTAINERS
   7. VIRTUAL KEYBOARD
      7.1 Toolbar & Plate (Hidden)
      7.2 Keyboard Base & CSS Variables
      7.3 Keyboard Overflow & Padding
      7.4 Rows & Layout
      7.5 Keycaps Base
      7.6 Keycap Shadows & Depth Effects
      7.7 Keycap Variants (Control, Fraction)
      7.8 Separators (Excluded from Effects)
      7.9 Responsive / Media Queries
   
   BEHAVIOR NOTES:
   ---------------
   - If commenting all options below, the behaviour is interesting:
   - Native button leads to full-screen display of selected high-school keyboard
   - But "Afficher le clavier" (custom toggle) leads to usage of keyboard-container
   ================================================================ */


/* ================================================================
   SECTION 1: MATH-FIELD BASE ELEMENT
   ================================================================
   Core styling for the <math-field> custom element.
   Sets dimensions, typography, display mode, and removes default borders.
   
   Selectors:
   - math-field
   ================================================================ */

/* Math-field without its own border/background */
math-field {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  overflow: visible !important;
  /* display: block; */
  height: 100% !important;
  padding: 0rem;
  min-height: 5.5rem;
  display: flex !important;
  align-items: center;
  justify-content: left;
}


/* ================================================================
   SECTION 2: SELECTION & FOCUS STATES
   ================================================================
   Handles text selection visibility and focus highlighting.
   Uses theme CSS variables for consistent colors.
   
   Selectors:
   - math-field::selection
   - math-field *::selection
   - math-field::part(content)::selection
   - .ML__content::selection
   - .ML__latex::selection
   - .ML__selected
   - .ML__selection
   - .ML__focused
   - .ML__contains-caret
   
   CSS Variables set on math-field:
   - --selection-background-color
   - --selection-color
   - --contains-highlight-background-color
   - --caret-color
   ================================================================ */

/* ------------------------------------------
   2.1 Text Selection Visibility
   ------------------------------------------ */

/* Fix text selection visibility */
math-field::selection,
math-field *::selection {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
}

/* ------------------------------------------
   2.2 MathLive Internal Selection Styling
   ------------------------------------------ */

/* For MathLive's internal selection styling */
math-field::part(content)::selection,
.ML__content::selection,
.ML__latex::selection {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
}

/* Override MathLive's selection and focus backgrounds */
.ML__selected,
.ML__selection {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
}

/* ------------------------------------------
   2.3 Focus Backgrounds (Fractions, etc.)
   ------------------------------------------ */

/* Fix dark background on focused/active math elements (fractions, etc) */
.ML__focused,
.ML__contains-caret,
math-field::part(content) .ML__focused,
math-field::part(content) .ML__contains-caret {
  background-color: color-mix(in oklch, var(--color-primary) 20%, transparent) !important;
  color: var(--color-base-content) !important;
}

/* ------------------------------------------
   2.4 Selection CSS Variables
   ------------------------------------------ */

/* Override MathLive's default dark selection background */
math-field {
  --selection-background-color: color-mix(in oklch, var(--color-primary) 30%, transparent) !important;
  --selection-color: var(--color-base-content) !important;
  --contains-highlight-background-color: color-mix(in oklch, var(--color-primary) 15%, transparent) !important;
  --caret-color: var(--color-primary) !important;
}


/* ================================================================
   SECTION 3: MATH-FIELD VARIANTS
   ================================================================
   Different types of math-field usage:
   - Mask: readonly display of prefix (e.g., "m=")
   - Input: editable field for user input
   
   Selectors:
   - math-field::part(virtual-keyboard-toggle)
   - math-field::part(menu-toggle)
   - .math-field-mask
   - .math-field-input
   - math-field.math-field-input::part(virtual-keyboard-target)
   - math-field.math-field-input:focus
   - math-field.math-field-input:focus-visible
   - math-field::part(content)
   - math-field::part(container)
   ================================================================ */

/* ------------------------------------------
   3.1 Hidden Toggle Icons
   ------------------------------------------ */

/* Hide toggle icons */
math-field::part(virtual-keyboard-toggle),
math-field::part(menu-toggle) {
  display: none !important;
}

/* ------------------------------------------
   3.2 Math-Field Mask (Readonly Prefix)
   ------------------------------------------ */

.math-field-mask {
  pointer-events: none;
  width: fit-content;
  padding-left: 0.5rem;
}

/* ------------------------------------------
   3.3 Math-Field Input (Editable)
   ------------------------------------------ */

.math-field-input {
  display: block;
  border: 1px solid var(--color-base-100);
  border-radius: var(--radius-field);
  /* background-color: var(--color-primary-soft); */
  box-sizing: border-box;
  overflow: visible;
  border: 2px solid transparent;
  padding-left: 0.5rem;
}

/* ------------------------------------------
   3.4 Focus Outline Removal
   ------------------------------------------ */

/* Completely remove MathLive's default focus outline/blue ring */
math-field.math-field-input::part(virtual-keyboard-target),
math-field.math-field-input:focus,
math-field.math-field-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Optional: also hide any internal focus indicators MathLive might add */
math-field::part(content),
math-field::part(container) {
  outline: none !important;
}


/* ================================================================
   SECTION 4: TEACHER MATH-FIELD BLOCK
   ================================================================
   Container wrapper that holds both math-fields (mask + input).
   Provides unified border, hover, and focus effects around the pair.
   
   Selectors:
   - .teacher-math-field-block
   - .teacher-math-field-block:hover
   - .teacher-math-field-block.focused
   - .teacher-math-field-block math-field
   ================================================================ */

/* ------------------------------------------
   4.1 Base Container Styling
   ------------------------------------------ */

/* The container that wraps both math-fields */
.teacher-math-field-block {
  border: 2px solid var(--color-primary-soft); /* base state */
  border-radius: var(
    --radius-field,
    0.5rem
  ); /* match your usual field radius */
  /* No transition - instant for mobile performance */
  background-color: hsl(
    var(--color-base-content, var(--color-base-100)) / 0.7
  ); /* subtle bg if needed */
}

/* ------------------------------------------
   4.2 Hover Effect
   ------------------------------------------ */

/* Hover effect on the whole math line */
.teacher-math-field-block:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px
    hsl(var(--color-base-content, var(--color-primary)) );
}

/* ------------------------------------------
   4.3 Focus Effect (via JS .focused class)
   ------------------------------------------ */

/* Focus effect (when the math-field-input is focused) */
.teacher-math-field-block.focused {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px
    hsl(var(--color-base-content, var(--color-primary)) / 0.25);
  outline: none;
}

/* ------------------------------------------
   4.4 Nested Math-Fields Reset
   ------------------------------------------ */

/* Remove any default borders from the individual math-fields */
.teacher-math-field-block math-field {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* ================================================================
   SECTION 5: OVERFLOW & CLIPPING FIXES
   ================================================================
   CRITICAL: Prevents clipping of tall math expressions (fractions, etc.)
   Works with font-size: 1.2rem and above.
   
   Targets both:
   - Shadow DOM parts (::part)
   - MathLive internal classes (.ML__)
   
   Selectors:
   - math-field::part(container)
   - math-field::part(content)
   - .ML__container
   - .ML__content
   - .ML__latex
   - .ML__base
   - .ML__strut
   - .ML__strut--bottom
   - .ML__mfrac
   - .ML__vlist
   - .ML__vlist-t
   - .ML__vlist-r
   ================================================================ */

/* ------------------------------------------
   5.1 Shadow DOM Parts Overflow
   ------------------------------------------ */

/* Target shadow DOM parts */
math-field::part(container) {
  overflow: visible !important;
  padding: 0.5em 0 !important;
}

/* Target shadow DOM parts */
math-field::part(content) {
  overflow: visible !important;
  padding: 0.5em 0 !important;
}

/* ------------------------------------------
   5.2 MathLive Container & Content
   ------------------------------------------ */

.ML__container {
  overflow: visible !important;
  min-height: 3em !important;
  padding: 0.5em 0 !important;
}

.ML__content {
  overflow: visible !important;
  min-height: 3em !important;
  padding: 0.5em 0 !important;
  line-height: normal !important;
}

/* ------------------------------------------
   5.3 MathLive Internal Elements
   ------------------------------------------ */

/* Ensure all MathLive internal elements can overflow */
.ML__latex,
.ML__base,
.ML__strut,
.ML__strut--bottom {
  overflow: visible !important;
}

/* ------------------------------------------
   5.4 Fraction Containers
   ------------------------------------------ */

/* Make sure fraction containers don't clip */
.ML__mfrac,
.ML__vlist,
.ML__vlist-t,
.ML__vlist-r {
  overflow: visible !important;
}


/* ================================================================
   SECTION 6: GLOBAL KEYBOARD CONTAINER
   ================================================================
   Single global container for the virtual keyboard.
   Fixed at bottom of viewport, always rendered but CSS-controlled visibility.
   
   ARCHITECTURE:
   - ONE container for the entire app (set once, never reassigned)
   - Keyboard is ALWAYS shown via MathLive API (called once at init)
   - Visibility controlled purely via CSS (opacity + pointer-events)
   - This avoids MathLive's slow show/hide overhead (critical for iOS)
   
   PERFORMANCE:
   - No transform animations = no layout thrashing
   - opacity + pointer-events = instant GPU-composited toggle
   - inert attribute = prevents focus stealing when hidden
   
   Selectors:
   - .global-math-keyboard
   - .global-math-keyboard.visible
   ================================================================ */

/* ------------------------------------------
   6.1 Global Keyboard Container
   ------------------------------------------ */

.global-math-keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: color-mix(in oklab, var(--color-primary-soft) 80%, var(--color-base-100) 20%) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  
  /* ====== iOS PERFORMANCE CRITICAL ====== */
  /* Hidden by default - triple-layer hiding for instant toggle */
  opacity: 0;
  visibility: hidden;           /* Tells browser to skip rendering entirely */
  pointer-events: none;         /* Prevents touch/click interception */
  
  /* Force GPU compositing layer (iOS WebKit) */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;  /* Prevents iOS flickering */
  backface-visibility: hidden;
  
  /* Isolate from document reflows */
  contain: layout style;
  
  /* CRITICAL: No transitions - instant show/hide */
  transition: none !important;
  -webkit-transition: none !important;
  /* ====================================== */
  
  /* Ensure keyboard content is visible */
  overflow: visible;
  
  /* Safe area for iOS devices with home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0);
  
  /* iOS FIX: Only round top corners - bottom must be flush for proper docking */
  border-top-left-radius: var(--radius-box);
  border-top-right-radius: var(--radius-box);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Visible state - instant toggle */
.global-math-keyboard.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* On desktop/tablet, constrain width and center */
@media (min-width: 768px) {
  .global-math-keyboard {
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    max-width: var(--trame-display-bigger-content-width);
    border-radius: 12px 12px 0 0;
  }
}

/* ------------------------------------------
   6.2 Legacy Container Styles (deprecated)
   ------------------------------------------ */

/* Keep for backwards compatibility, but no longer used */
.keyboard-container-relative {
  display: none;
}

.keyboard-container-absolute {
  display: none;
}


/* ================================================================
   SECTION 7: VIRTUAL KEYBOARD
   ================================================================
   Complete styling for MathLive's virtual keyboard.
   Adapted to theme: light background, subtle shadows, good readability.
   Minimalistic look: smaller keycaps, softer colors, no heavy borders.
   Uses theme variables (base-200 for bg, base-content for text, primary for accents).
   ================================================================ */


/* ------------------------------------------
   7.1 Toolbar & Plate (Hidden)
   ------------------------------------------ */

/* Optional: Hide toolbar and plate for even more minimal look */
.MLK__toolbar,
.ML__keyboard--plate {
  display: none !important;
}




.ML__keyboard.is-visible > .MLK__backdrop {
  /* transform: translate(0, calc(-1 * var(--_keyboard-height))); */
  /* opacity: 1; */
  /* visibility: visible; */
  padding-top: 0 !important;
}




/* ------------------------------------------
   7.2 Keyboard Base & CSS Variables
   ------------------------------------------ */

/* The actual keyboard element - additional overrides for minimalistic feel */
.ML__keyboard {
  z-index: 50 !important;
  border-radius: var(--radius-box);
  overflow-y: visible;
  /* min-height: 230px !important; */
  /* background: var(--color-base-300) !important; */

  /* --_background: var(--color-base-300) !important; */
  --_border: 1px solid color-mix(in oklch, var(--color-base-content) 30%, transparent) !important;
  --_keycap-background:  var(--color-info-soft);
  --_keycap-background-active: var(--color-neutral) !important;
  --_keycap-background-pressed: var(--color-base-200) !important;
  --_keycap-modifier-background: color-mix(
    in oklch,
    var(--color-neutral) 80%,
    transparent
  ) !important;
  --_keycap-font-size: 1.1rem !important;

  /* -------- Theme-Aware Virtual Keyboard Variables -------- */
  --keyboard-accent-color: var(--color-primary);
  --keyboard-background: color-mix(in oklab, var(--color-primary-soft) 80%, var(--color-base-100) 20%) !important;
  --keyboard-border: color-mix(
    in oklch,
    var(--color-base-content) 30%,
    transparent
  );
  /* --keyboard-toolbar-text: var(--color-base-content); */
  /* --keyboard-toolbar-background-hover: var(--color-base-200); */
  --keyboard-horizontal-rule: 1px solid
    color-mix(in oklch, var(--color-base-content) 30%, transparent);
  --keycap-background: var(--color-base-100);
  --keycap-background-hover: var(--color-base-200);
  --keycap-text: var(--color-base-content);
  --keycap-font-size: var(--_keycap-font-size);
  --keycap-secondary-background: color-mix(
    in oklch,
    var(--color-neutral) 80%,
    transparent
  );
  --keycap-secondary-background-hover: var(--color-neutral);
  --keycap-secondary-text: var(--color-neutral-content);
  --keycap-secondary-border: color-mix(
    in oklch,
    var(--color-base-content) 30%,
    transparent
  );
  --keycap-secondary-border-bottom: color-mix(
    in oklch,
    var(--color-base-content) 30%,
    transparent
  );
  --variant-panel-background: var(--color-base-100);
  --variant-keycap-text-active: var(--color-base-content);

  /* -------- Internal MathLive Variable Mappings -------- */
  --_accent-color: var(--keyboard-accent-color);
  --_background: var(--keyboard-background);
  --_toolbar-text: var(--keyboard-toolbar-text);
  --_toolbar-background-hover: var(--keyboard-toolbar-background-hover);
  --_horizontal-rule: var(--keyboard-horizontal-rule);
  --_keycap-background: var(--keycap-background);
  --_keycap-background-hover: var(--keycap-background-hover);

  --keyboard-border-radius: 8px;
}


/* ------------------------------------------
   7.3 Keyboard Overflow & Padding
   ------------------------------------------ */

/* Very important for non-cropped keyboard */
.ML__keyboard,
.MLK__rows {
  overflow: visible !important;
}

/* Keyboard rows padding */
.MLK__rows {
  padding: 1rem !important;
}

/* Mobile: moderate horizontal padding for breathing room */
@media (max-width: 640px) {
  .MLK__rows {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}


/* ------------------------------------------
   7.4 Rows & Layout
   ------------------------------------------ */

/* All keyboard divs should be clickable */
.ML__keyboard :where(div) {
  cursor: pointer !important;
}

/* Row full width */
.MLK__rows > .row {
  width: 100% !important;
}

/* Last row bottom padding */
.MLK__rows > .row:last-child > div {
  padding-bottom: 1rem !important;
}

/* Individual key cells */
.MLK__rows > .row div {
  min-width: 4% !important;
  max-height: 25px !important;
  color: var(--color-base-content) !important;
  border-radius: 6px !important;
  position: relative !important;
}


/* ------------------------------------------
   7.5 Keycaps Base
   ------------------------------------------ */

.keycap {
  cursor: pointer !important;
  border-radius: 6px !important;
  position: relative !important;
}

/* Fraction keycaps need extra top padding */
.keycap-fraction {
  padding-top: 0.25rem !important;
}


/* ------------------------------------------
   7.6 Keycap Shadows & Depth Effects
   ------------------------------------------ */

/* Apply shadow and border to keycaps for 3D depth effect */
.ML__keyboard .MLK__keycap,
.ML__keyboard [class*="keycap"],
.MLK__rows > .row div:not(.separator):not(.keycap-small) {
  box-shadow: 0 1px 0 0
    color-mix(in oklch, var(--color-base-content) 25%, transparent) !important;
  border: 1px solid
    color-mix(in oklch, var(--color-base-content) 25%, transparent) !important;
  /* No transition - instant for mobile performance */
}

/* Force text color on active/pressed states (MathLive defaults to white) */
.ML__keyboard .MLK__keycap:active,
.ML__keyboard [class*="keycap"]:active,
.MLK__rows > .row div:active,
.ML__keyboard .MLK__keycap.is-pressed,
.ML__keyboard [class*="keycap"].is-pressed,
.MLK__rows > .row div.is-pressed {
  color: var(--color-base-content) !important;
}


/* ------------------------------------------
   7.7 Keycap Variants (Control Keys)
   ------------------------------------------ */

/* Control keycaps (backspace, shift, etc.) */
.keycap-control {
  background-color: var(--color-neutral) !important;
  color: var(--color-neutral-content) !important;
  box-shadow: 0 1px 0 0
      color-mix(in oklch, var(--color-base-content) 25%, transparent),
    0 1px 2px -1px color-mix(in oklch, var(--color-base-content) 15%, transparent) !important;
}

/* Control keycap hover state */
.keycap-control:hover {
  background-color: color-mix(
    in oklch,
    var(--color-neutral) 90%,
    transparent
  ) !important;
  box-shadow: 0 2px 0 0
      color-mix(in oklch, var(--color-base-content) 30%, transparent),
    0 2px 3px -1px color-mix(in oklch, var(--color-base-content) 20%, transparent) !important;
  transform: translateY(-1px) !important;
}

/* Control keycap active/pressed state */
/* .keycap-control:active {
  background-color: color-mix(
    in oklch,
    var(--color-neutral) 80%,
    transparent
  ) !important;
  box-shadow: 0 0 0 0
      color-mix(in oklch, var(--color-base-content) 20%, transparent),
    0 1px 1px color-mix(in oklch, var(--color-base-content) 15%, transparent) !important;
  transform: translateY(1px) !important;
} */


/* ------------------------------------------
   7.8 Separators (Excluded from Effects)
   ------------------------------------------ */

/* Exclude separators and small elements from shadow effects */
.MLK__rows > .row div.separator,
.MLK__rows > .row div.keycap-small,
.MLK__rows > .row .separator,
.MLK__rows > .row .keycap-small,
.separator,
.keycap-small {
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
  background: transparent !important;
}

/* Force separators to never have any effects */
.ML__keyboard .separator,
.ML__keyboard .keycap-small {
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
  background: transparent !important;
  transition: none !important;
}

/* Separator hover/active states - ensure no effects */
.ML__keyboard .separator:hover,
.ML__keyboard .keycap-small:hover,
.ML__keyboard .separator:active,
.ML__keyboard .keycap-small:active {
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
  background: transparent !important;
}

/* Ultra-specific separator override (attribute selector) */
.MLK__rows > .row div[class*="separator"],
.MLK__rows > .row div[class*="keycap-small"] {
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
  background: transparent !important;
  transition: none !important;
}

/* Ultra-specific separator hover/active override */
.MLK__rows > .row div[class*="separator"]:hover,
.MLK__rows > .row div[class*="separator"]:active,
.MLK__rows > .row div[class*="keycap-small"]:hover,
.MLK__rows > .row div[class*="keycap-small"]:active {
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
  background: transparent !important;
}


/* ------------------------------------------
   7.9 Responsive / Media Queries
   ------------------------------------------ */

/* Tablet and below: slightly smaller keycap font */
@media screen and (min-width: 0px) and (max-width: 640px) {
  .ML__keyboard {
    --_keycap-font-size: 1rem !important;
  }
}

/* Small mobile: even smaller font, narrower separators */
@media (max-width: 640px) {
  .ML__keyboard {
    --_keycap-font-size: 0.95rem !important;
  }
  .separator {
    width: 6px !important;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .ML__keyboard {
    --_keycap-font-size: 0.95rem !important;
  }
}

/* Very small mobile */
@media (max-width: 380px) {
  .ML__keyboard {
    --_keycap-font-size: 0.85rem !important;
  }
}

/* ------------------------------------------
   7.10 Desktop: Key Spacing
   ------------------------------------------ */

/* Desktop/Tablet: more breathing room between keys */
@media (min-width: 641px) {
  /* Try multiple selectors for MathLive keyboard spacing */
  .ML__keyboard .MLK__keycap,
  .ML__keyboard .keycap,
  .ML__keyboard [class*="keycap"]:not(.keycap-small) {
    margin: 0 0.12rem !important;
  }
  
  /* Alternative: target row flex spacing */
  .ML__keyboard .MLK__rows .row {
    column-gap: 0.25rem !important;
  }
}


/* ================================================================
   SECTION 8: VALIDATE BUTTON STATES
   ================================================================
   iOS Performance Optimization: All button states pre-rendered in DOM.
   No innerHTML changes - just CSS class toggles for instant response.
   
   Same pattern as keyboard: DOM always present, CSS controls visibility.
   
   States:
   - default: "Valider" text
   - loading: spinner
   - success: "✓ Correct"
   - error: "✗ Incorrect"
   - empty: "Aucun contenu"
   ================================================================ */

/* ------------------------------------------
   8.1 Button State Container
   ------------------------------------------ */

.teachers-validate-btn {
  position: relative;
  min-width: 8rem; /* Prevent size changes between states */
}

/* ------------------------------------------
   8.2 All States Hidden by Default
   ------------------------------------------ */

.teachers-validate-btn .btn-state {
  display: none;
}

/* ------------------------------------------
   8.3 Default State (Valider)
   ------------------------------------------ */

.teachers-validate-btn .btn-state-default {
  display: inline;
}

/* ------------------------------------------
   8.4 Loading State
   ------------------------------------------ */

.teachers-validate-btn.is-loading .btn-state {
  display: none;
}

.teachers-validate-btn.is-loading .btn-state-loading {
  display: inline-flex;
}

/* ------------------------------------------
   8.5 Success State
   ------------------------------------------ */

.teachers-validate-btn.is-success {
  /* Override btn-primary btn-soft with success colors */
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--color-success-content) !important;
}

.teachers-validate-btn.is-success .btn-state {
  display: none;
}

.teachers-validate-btn.is-success .btn-state-success {
  display: inline;
}

/* ------------------------------------------
   8.6 Error State
   ------------------------------------------ */

.teachers-validate-btn.is-error {
  /* Override btn-primary btn-soft with error colors */
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
  color: var(--color-error-content) !important;
}

.teachers-validate-btn.is-error .btn-state {
  display: none;
}

.teachers-validate-btn.is-error .btn-state-error {
  display: inline;
}

/* ------------------------------------------
   8.7 Empty State (No Content)
   ------------------------------------------ */

.teachers-validate-btn.is-empty {
  /* Override btn-primary btn-soft with error colors */
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
  color: var(--color-error-content) !important;
}

.teachers-validate-btn.is-empty .btn-state {
  display: none;
}

.teachers-validate-btn.is-empty .btn-state-empty {
  display: inline;
}


/* ================================================================
   SECTION 9: MCQ RADIO BUTTON STATES
   ================================================================
   Same pattern as teachers button - all states pre-rendered.
   ================================================================ */

/* ------------------------------------------
   9.1 Button State Container
   ------------------------------------------ */

.mcq-radio-validate-btn {
  position: relative;
  min-width: 8rem;
}

/* ------------------------------------------
   9.2 All States Hidden by Default
   ------------------------------------------ */

.mcq-radio-validate-btn .btn-state {
  display: none;
}

/* ------------------------------------------
   9.3 Default State (Valider)
   ------------------------------------------ */

.mcq-radio-validate-btn .btn-state-default {
  display: inline;
}

/* ------------------------------------------
   9.4 Success State
   ------------------------------------------ */

.mcq-radio-validate-btn.is-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--color-success-content) !important;
}

.mcq-radio-validate-btn.is-success .btn-state {
  display: none;
}

.mcq-radio-validate-btn.is-success .btn-state-success {
  display: inline;
}

/* ------------------------------------------
   9.5 Error State
   ------------------------------------------ */

.mcq-radio-validate-btn.is-error {
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
  color: var(--color-error-content) !important;
}

.mcq-radio-validate-btn.is-error .btn-state {
  display: none;
}

.mcq-radio-validate-btn.is-error .btn-state-error {
  display: inline;
}