/* ================================================================
   DISPLAY.CSS
   ================================================================
   Trame display content styling for PCA-App
   
   Used in: templates/trame/display.html
   
   TABLE OF CONTENTS:
   ------------------
   1. TRAME DISPLAY CONTAINER
   2. NAVIGATION ELEMENTS
      2.1 Breadcrumbs
      2.2 Back Button Wrapper
   3. CONTENT WIDTH VARIANTS
      3.1 Wide Content (Drafts, Blockquotes, Tables, Images, Diagraphe)
      3.2 Standard Content (Divs, MCQ, Teachers)
      3.3 Nested Content Width Constraints
   4. SPECIAL CONTENT BLOCKS
      4.1 Paragraphs & Overflow
      4.2 Diagraphe Graph Placeholders
      4.3 MCQ Radio Buttons
      4.4 Tables
      4.5 Blockquotes
      4.6 Draft Pre Blocks
      4.7 Images
      4.8 Lists
   5. TYPOGRAPHY
      5.1 Superscript & Strong
      5.2 Headings Base (h1-h4)
      5.3 Heading Sizes (h1, h2, h3, h4)
      5.4 Paragraphs
      5.5 Lists
   6. LINKS
      6.1 Paragraph Links
      6.2 List Links
   7. SPECIFIC COMPONENTS
      7.1 GDPR Model Registry
      7.2 Sticky Header
   8. RESPONSIVE / MEDIA QUERIES
      8.1 Mobile (<768px) - Padding & Spacing
      8.2 Mobile (<768px) - Blockquotes
   
   CSS VARIABLES USED:
   -------------------
   - --trame-display-content-width
   - --trame-display-bigger-content-width
   - --trame-display-vertical-space-between-pieces-sm
   - --trame-display-vertical-space-between-pieces-lg
   - --trame-display-vertical-space-between-pieces-xl
   - --trame-display-vertical-space-between-pieces-2xl
   - --trame-display-title-line-height
   - --trame-display-h1-font-size / h2 / h3 / h4
   - --trame-display-h1-font-weight / h2 / h3 / h4
   - --trame-display-p-font-size
   - --trame-display-p-font-weight
   - --trame-padding-safe-total
   - --trame-padding-safe-outer
   - --font-heading
   - --font-body
   - --color-* (DaisyUI theme variables)
   ================================================================ */


/* ================================================================
   SECTION 1: TRAME DISPLAY CONTAINER
   ================================================================
   Root container for all trame display content.
   Currently minimal - flex layout commented out for future use.
   
   Selectors:
   - #trame-display
   ================================================================ */



   /* .capacitor-mode * {
    transition: none !important;
    animation: none !important;
  } */

   #trame-display {
    font-size: var(--trame-display-p-font-size);
   }

/* #trame-display - flex layout available if needed:
   display: flex;
   flex-direction: column;
   gap: 0rem;
*/


/* ================================================================
   SECTION 2: NAVIGATION ELEMENTS
   ================================================================
   Top-level navigation components: breadcrumbs and back button.
   Centered with max-width constraint.
   
   Selectors:
   - #trame-display-breadcrumbs
   - #trame-display-back-button-wrapper
   ================================================================ */

/* ------------------------------------------
   2.1 Breadcrumbs
   ------------------------------------------ */

#trame-display-breadcrumbs {
  max-width: var(--trame-display-content-width);
  margin: 0 auto;
}

/* ------------------------------------------
   2.2 Back Button Wrapper
   ------------------------------------------ */

#trame-display-back-button-wrapper {
  max-width: var(--trame-display-content-width);
  margin: 0 auto;
}


/* ================================================================
   SECTION 3: CONTENT WIDTH VARIANTS
   ================================================================
   Different content types have different max-width constraints:
   - Wide content: bigger-content-width (drafts, blockquotes, tables, images, diagraphe)
   - Standard content: content-width (divs, mcq, teachers)
   - Nested content inherits parent constraints
   
   Selectors by type:
   - [data-pca-nature="draft"]
   - [data-piece-type="blockquote"]
   - [data-piece-type="table"]
   - [data-piece-type="img"]
   - [data-pca-nature="diagraphe"]
   - [data-piece-type="div"]
   - [data-pca-nature="mcq_radio"]
   - [data-pca-nature="teachers"]
   ================================================================ */

/* ------------------------------------------
   3.1 Wide Content (Bigger Width)
   ------------------------------------------ */

#trame-display [data-pca-nature="draft"],
#trame-display [data-piece-type="blockquote"],
#trame-display [data-piece-type="table"],
#trame-display [data-piece-type="img"],
#trame-display [data-pca-nature="diagraphe"] {
  max-width: var(--trame-display-bigger-content-width);
  margin: var(--trame-display-vertical-space-between-pieces-lg) auto;
}

/* ------------------------------------------
   3.2 Standard Content (Regular Width)
   ------------------------------------------ */

#trame-display [data-piece-type="div"] {
  max-width: var(--trame-display-content-width);
  margin: var(--trame-display-vertical-space-between-pieces-sm) auto;
}

#trame-display [data-pca-nature="mcq_radio"],
#trame-display [data-pca-nature="teachers"] {
  max-width: var(--trame-display-content-width);
  margin: var(--trame-display-vertical-space-between-pieces-2xl) auto;
}

#trame-display [data-pca-nature="teachers"] .teachers-statement-body,
#trame-display [data-pca-nature="mcq_radio"] .mcq-radio-statement-body {
  font-size: var(--trame-display-p-font-size) !important;
  padding-top: var(--trame-display-vertical-space-between-pieces-sm) !important;
  padding-bottom: var(--trame-display-vertical-space-between-pieces-sm) !important;
}




/* Teachers nested div - no constraints needed currently */

/* ------------------------------------------
   3.3 Nested Content Width Constraints
   ------------------------------------------ */

#trame-display [data-piece-type="div"] div,
#trame-display [data-piece-type="ul"] ul,
#trame-display [data-pca-nature="diagraphe"] .graph-placeholder {
  max-width: var(--trame-display-content-width);
  margin: 0 auto;
}

#trame-display [data-pca-nature="diagraphe"] .graph-placeholder {
  width: fit-content;
}



.dg-safe-text {
  /* white-space: nowrap; */
  border-radius: var(--radius-box);
  border: 1px solid var(--color-base-300);
  background-color: color-mix(in srgb, var(--color-base-100), transparent 10%) !important;
  padding: 0.15rem !important;
  white-space: nowrap;
}

.dg-safe-text.text-primary {
  border: 1px dashed var(--color-primary);
}


/* ================================================================
   SECTION 4: SPECIAL CONTENT BLOCKS
   ================================================================
   Styling for specific content types: paragraphs, diagraphe,
   MCQ buttons, tables, blockquotes, drafts, images, and lists.
   ================================================================ */

/* ------------------------------------------
   4.1 Paragraphs & Overflow
   ------------------------------------------ */

#trame-display [data-piece-type="p"] {
  overflow-x: auto !important;
}

/* ------------------------------------------
   4.2 Diagraphe Graph Placeholders
   ------------------------------------------ */

#trame-display [data-pca-nature="diagraphe"] .graph-placeholder {
  width: fit-content;
  padding: 0.5rem;
  border-radius: var(--radius-box);
}

/* ------------------------------------------
   4.3 MCQ Radio Buttons
   ------------------------------------------ */

#trame-display [data-pca-nature="mcq_radio"] .choice-btn {
  border-color: var(--color-base-300);
  border-radius: var(--radius-field);

  &:hover {
    border-color: var(--color-primary);
  }
}

/* ------------------------------------------
   4.3.1 Custom Radio Visual (iOS Performance)
   ------------------------------------------ 
   
   CRITICAL: We don't use native :checked styling because iOS WebKit
   has internal delays when processing :checked state changes.
   
   Instead, we control the visual ENTIRELY via .is-checked class
   that we toggle in JS on pointerdown. This guarantees instant feedback.
   
   Same pattern as keyboard and buttons - DOM control, not browser state.
*/

/* Screen-reader only - hides native radio visually but keeps it accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* The outer ring */
.mcq-radio-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--color-base-300);
  background-color: var(--color-base-100);
  flex-shrink: 0;
  /* No transitions - instant on iOS */
}

/* The inner dot - hidden by default */
.mcq-radio-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  /* Hidden by default - controlled via .is-checked on parent */
  opacity: 0;
  transform: scale(0);
  /* No transitions - instant on iOS */
}

/* When checked - controlled via JS class toggle */
.mcq-radio-visual.is-checked {
  border-color: var(--color-primary);
}

.mcq-radio-visual.is-checked .mcq-radio-dot {
  opacity: 1;
  transform: scale(1);
}

/* Choice button selected state - instant visual feedback */
.mcq-radio-choice-btn.is-selected {
  border-color: var(--color-primary);
  background-color: color-mix(in oklch, var(--color-primary) 5%, transparent);
}

#trame-display [data-pca-nature="mcq_radio"] .mcq-radio-wrapper {
  max-width: var(--trame-display-content-width);
  margin: 0 auto;
}

/* MCQ option labels - use input-specific font size */
/* Only target direct text spans, not KaTeX spans */
#trame-display [data-pca-nature="mcq_radio"] .mcq-radio-choice-btn > span:not(.katex) {
  font-size: var(--trame-mcq-option-font-size);
}

/* MCQ statement keeps content font size */
#trame-display [data-pca-nature="mcq_radio"] .mcq-radio-statement-body {
  font-size: var(--trame-mcq-statement-font-size);
}

/* MCQ feedback text - make it bigger and more readable */
#trame-display [data-pca-nature="mcq_radio"] .mcq-radio-specific-feedback-text {
  font-size: var(--trame-display-p-font-size);
}

#trame-display [data-pca-nature="mcq_radio"] .mcq-radio-general-feedback {
  font-size: var(--trame-display-p-font-size) !important;
}

/* Teachers feedback text - match MCQ feedback sizing */
#trame-display [data-pca-nature="teachers"] .teachers-validation-feedback-text {
  font-size: var(--trame-display-p-font-size);
}

#trame-display [data-pca-nature="teachers"] .teachers-detailed-feedback {
  font-size: var(--trame-display-p-font-size) !important;
}

#trame-display [data-pca-nature="teachers"] .teachers-feedback-section {
  max-width: var(--trame-display-content-width) !important;
  margin: 0 auto;
}


/* ------------------------------------------
   4.4 Tables
   ------------------------------------------ */

#trame-display [data-piece-type="table"] {
  border: 1px solid var(--color-base-300) !important;
  background-color: var(--color-base-100) !important;
  border-radius: var(--radius-box);
  padding: 0.5rem;
}

#trame-display table {
  font-family: var(--font-body);
  line-height: 1.5;
  max-width: var(--trame-display-content-width);
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}

/* thead - no custom styling needed currently */

#trame-display th {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 500;
  color: color-mix(
    in oklch,
    var(--color-base-content) 80%,
    var(--color-base-200)
  );
  border-bottom: 1px solid var(--color-base-300);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#trame-display td {
  border-bottom: 1px solid var(--color-base-300);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#trame-display tbody tr:last-child td {
  border-bottom: none;
}

/* ------------------------------------------
   4.5 Blockquotes
   ------------------------------------------ */

#trame-display [data-piece-type="blockquote"] {
  background-color: color-mix(
    in oklab,
    var(--color-base-100) 30%,
    var(--color-base-200)
  );
  border-left: 4px solid var(--color-base-300);
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: var(--radius-box);
}

#trame-display blockquote {
  font-family: var(--font-body);
  line-height: 1.5;
  max-width: var(--trame-display-content-width);
  margin: 0 auto;
}

/* ------------------------------------------
   4.6 Draft Pre Blocks
   ------------------------------------------ */

#trame-display [data-pca-nature="draft"] pre {
  max-width: var(--trame-display-content-width);
}

/* ------------------------------------------
   4.7 Images
   ------------------------------------------ */

#trame-display [data-piece-type="img"] img {
  max-width: var(--trame-display-content-width);
  margin: 0 auto;
  border-radius: var(--radius-box);
  /* Avoid the image being too wide (if small images) */
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------
   4.8 Lists
   ------------------------------------------ */

#trame-display [data-piece-type="ul"] ul li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}


/* ================================================================
   SECTION 5: TYPOGRAPHY
   ================================================================
   Text styling: headings (h1-h4), paragraphs, lists.
   Uses CSS variables for consistent sizing and spacing.
   
   CSS Variables:
   - --font-heading, --font-body
   - --trame-display-title-line-height
   - --trame-display-h*-font-size / font-weight
   - --trame-display-p-font-size / font-weight
   ================================================================ */

/* ------------------------------------------
   5.1 Superscript & Strong
   ------------------------------------------ */

#trame-display p sup {
  background-color: var(--color-secondary-soft);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  border-radius: 0.25rem;
  font-weight: 600;
}

#trame-display p strong {
  font-weight: 500;
}

/* ------------------------------------------
   5.2 Headings Base (h1-h4)
   ------------------------------------------ */

#trame-display h1,
#trame-display h2,
#trame-display h3,
#trame-display h4,
#trame-display p,
#trame-display ul {
  max-width: var(--trame-display-content-width);
  margin: var(--trame-display-vertical-space-between-pieces-sm) auto;
}

#trame-display h1,
#trame-display h2,
#trame-display h3,
#trame-display h4 {
  font-family: var(--font-heading);
  line-height: var(--trame-display-title-line-height);
}

/* ------------------------------------------
   5.3 Heading Sizes (h1, h2, h3, h4)
   ------------------------------------------ */

#trame-display h1 {
  font-size: var(--trame-display-h1-font-size);
  font-weight: var(--trame-display-h1-font-weight);
  margin-top: var(--trame-display-vertical-space-between-pieces-lg);
}

#trame-display h2 {
  font-size: var(--trame-display-h2-font-size);
  font-weight: var(--trame-display-h2-font-weight);
  margin-top: var(--trame-display-vertical-space-between-pieces-xl);
  /* margin-bottom: var(--trame-display-vertical-space-between-pieces-xl) !important; */
}

#trame-display h3 {
  font-size: var(--trame-display-h3-font-size);
  font-weight: var(--trame-display-h3-font-weight);
  margin-top: var(--trame-display-vertical-space-between-pieces-xl);
}

#trame-display h4 {
  font-size: var(--trame-display-h4-font-size);
  font-weight: var(--trame-display-h4-font-weight);
}

/* ------------------------------------------
   5.4 Paragraphs
   ------------------------------------------ */

#trame-display p {
  font-family: var(--font-body);
  line-height: 1.5;
  font-size: var(--trame-display-p-font-size);
  font-weight: var(--trame-display-p-font-weight);
}

/* ------------------------------------------
   5.5 Lists
   ------------------------------------------ */

#trame-display ul {
  list-style-type: square;
  list-style-position: inside !important;
  padding-left: 0.25rem;
  font-size: var(--trame-display-p-font-size);
}

/* Nested list level 2 */
#trame-display ul ul {
  padding-left: 0.5rem;
  list-style-type: disc;
  margin-top: 0;
  margin-bottom: 0;
}

/* Nested list level 3+ */
#trame-display ul ul ul {
  padding-left: 0.5rem;
  margin-top: 0;
  margin-bottom: 0;
}


/* ================================================================
   SECTION 6: LINKS
   ================================================================
   Link styling for paragraphs and lists.
   Uses color-mix for subtle primary tint, hover reveals full primary.
   
   Selectors:
   - #trame-display p a
   - #trame-display ul a
   ================================================================ */

/* ------------------------------------------
   6.1 Paragraph Links
   ------------------------------------------ */

#trame-display p a {
  text-decoration: underline;
  position: relative;
  color: color-mix(
    in oklch,
    var(--color-primary) 50%,
    var(--color-base-content)
  );

  &:hover {
    color: var(--color-primary);

    &::before {
      left: 0.1em;
    }
  }
}

/* ------------------------------------------
   6.2 List Links
   ------------------------------------------ */

#trame-display ul a {
  text-decoration: underline;
  position: relative;
  color: color-mix(
    in oklch,
    var(--color-primary) 50%,
    var(--color-base-content)
  );

  &:hover {
    color: var(--color-primary);
  }
}


/* ================================================================
   SECTION 7: SPECIFIC COMPONENTS
   ================================================================
   Specialized styling for specific use-cases:
   GDPR registry tables and sticky headers.
   ================================================================ */

/* ------------------------------------------
   7.1 GDPR Model Registry
   ------------------------------------------ */

#trame-display [data-pca-nature="gdpr_model_registry"] th {
  font-weight: 400;
}

#trame-display [data-pca-nature="gdpr_model_registry"] td {
  vertical-align: top;
}

/* ------------------------------------------
   7.2 Sticky Header
   ------------------------------------------ */

/* .is-stuck {
  position: sticky;
  top: 0;
  background-color: var(--color-base-200);
  z-index: 100;
} */


/* ================================================================
   SECTION 8: RESPONSIVE / MEDIA QUERIES
   ================================================================
   Mobile-first responsive adjustments.
   Adds safe-area padding for edge-to-edge displays.
   
   Breakpoints:
   - max-width: 767px (mobile/tablet portrait)
   ================================================================ */

/* ------------------------------------------
   8.1 Mobile (<768px) - Padding & Spacing
   ------------------------------------------ */

@media (max-width: 767px) {
  #trame-display-breadcrumbs {
    padding-left: var(--trame-padding-safe-total);
    padding-right: var(--trame-padding-safe-total);
  }

  #trame-display h1,
  #trame-display h2,
  #trame-display h3,
  #trame-display h4,
  #trame-display p,
  #trame-display ul {
    padding-left: var(--trame-padding-safe-total);
    padding-right: var(--trame-padding-safe-total);
  }

  #trame-display ul {
    margin-left: var(--trame-padding-safe-total);
    margin-right: var(--trame-padding-safe-total);
  }

  #trame-display [data-pca-nature="mcq_radio"] {
    padding-left: var(--trame-padding-safe-total);
    padding-right: var(--trame-padding-safe-total);
  }

  #trame-display [data-pca-nature="teachers"] {
    padding-left: var(--trame-padding-safe-total);
    padding-right: var(--trame-padding-safe-total);
  }

/* 
  #trame-display [data-pca-nature="teachers"] .teachers-header,
  #trame-display [data-pca-nature="teachers"] .teachers-statement {
    padding-left: var(--trame-padding-safe-outer) !important;
    padding-right: var(--trame-padding-safe-outer) !important;
  } */

  /* #trame-display [data-pca-nature="teachers"] .teacher-math-field-block-wrapper {
    padding-left: var(--trame-padding-safe-outer) !important;
    padding-right: var(--trame-padding-safe-outer) !important;
  } */

  /* #trame-display [data-pca-nature="teachers"] .teacher-math-field-block {
    padding-left: var(--trame-padding-safe-inner) !important;
    padding-right: var(--trame-padding-safe-inner) !important;
  } */

  /* #trame-display [data-pca-nature="teachers"] .teachers-statement {
    margin-left: var(--trame-padding-safe-outer) !important;
    margin-right: var(--trame-padding-safe-outer) !important;
  } */

  #trame-display [data-pca-nature="teachers"] .teachers-statement-body {
    /* padding-left: var(--trame-padding-safe-inner) !important;
    padding-right: var(--trame-padding-safe-inner) !important; */
  }

  /* #trame-display [data-pca-nature="teachers"] .teachers-controls-row {
    padding-left: var(--trame-padding-safe-outer) !important;
    padding-right: var(--trame-padding-safe-outer) !important;
  } */

  /* #trame-display [data-pca-nature="teachers"] .teachers-feedback-section {
    padding-left: var(--trame-padding-safe-outer) !important;
    padding-right: var(--trame-padding-safe-outer) !important;
  } */

  /* Teachers padding - currently disabled
  #trame-display [data-pca-nature="teachers"] {
    padding-left: var(--trame-padding-safe-total);
    padding-right: var(--trame-padding-safe-total);
  }
  */
}

/* ------------------------------------------
   8.2 Mobile (<768px) - Blockquotes
   ------------------------------------------ */

@media (max-width: 767px) {
  #trame-display [data-piece-type="blockquote"] {
    margin-left: var(--trame-padding-safe-outer);
    margin-right: var(--trame-padding-safe-outer);
  }
}


/* ================================================================
   SECTION 9: iOS PERFORMANCE OPTIMIZATIONS
   ================================================================
   Critical performance fixes for iOS/Capacitor.
   
   Problem: DaisyUI components have CSS transitions that cause
   noticeable lag on iOS WebKit when interacting with form elements.
   
   Solution: Kill all transitions on interactive elements.
   Same pattern used throughout the app for iOS performance.
   
   See: IOS_KEYBOARD_PERFORMANCE.md for full documentation.
   ================================================================ */

/* ------------------------------------------
   9.1 MCQ Radio Inputs - Kill DaisyUI Transitions
   ------------------------------------------ */

/* 
 * DaisyUI's .radio class has transitions for the checked state
 * (the dot appearing). On iOS, this creates visible lag between
 * tap and visual feedback.
 * 
 * This selector targets all radio inputs within MCQ blocks.
 * Inline styles in mcq_radio.html provide belt-and-suspenders backup.
 */
#trame-display [data-pca-nature="mcq_radio"] .radio,
#trame-display [data-pca-nature="mcq_radio"] input[type="radio"] {
  transition: none !important;
  -webkit-transition: none !important;
}

/* ------------------------------------------
   9.2 MCQ Choice Labels - Kill Hover/Active Transitions
   ------------------------------------------ */

/*
 * Labels wrapping radio inputs may also have transitions
 * for hover/active states. Kill them for instant feedback.
 */
#trame-display [data-pca-nature="mcq_radio"] .mcq-radio-choice-btn {
  transition: none !important;
  -webkit-transition: none !important;
}

/* ------------------------------------------
   9.3 MCQ Validate Button - Kill Transitions
   ------------------------------------------ */

/*
 * Button state changes (default → success/error) should be instant.
 * Button uses pre-rendered states toggled via CSS class.
 */
#trame-display [data-pca-nature="mcq_radio"] .mcq-radio-validate-btn {
  transition: none !important;
  -webkit-transition: none !important;
}

/* ------------------------------------------
   9.4 Teachers Validate Button - Kill Transitions
   ------------------------------------------ */

/*
 * Same pattern as MCQ button.
 */
#trame-display [data-pca-nature="teachers"] .teachers-validate-btn {
  transition: none !important;
  -webkit-transition: none !important;
}


/* ================================================================
   ARCHIVED / COMMENTED CODE
   ================================================================
   Preserved for reference - alternative link underline styling
   using ::after pseudo-element.
   
   #trame-display ul a {
     text-decoration: none !important;
     position: relative;
   }
   
   #trame-display ul a::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 1px;
     background-color: currentColor;
   }
   ================================================================ */