/**
 * Galilee custom styles for mathalea exercises.
 * Loaded via <link> in container index.html.
 */

/* === IFRAME HEIGHT FIX: Break the scroll containment chain === */
/* The Svelte SPA renders #exercisesPart as absolute+h-full+overflow-y-auto,
   trapping content in a scroll container. We override the entire chain so
   body.scrollHeight reflects the true content height. */

html {
    background: transparent !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 0 !important;
}
body {
    background: transparent !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
}
:root, [data-theme] { background: #ffffff00 !important; }
:root { --color-coopmaths-canvas: #fff !important; }
/* Override canvas backgrounds to transparent (but keep --color-coopmaths-canvas
   as #fff so text-coopmaths-canvas stays readable on colored backgrounds like
   the "Correction" label which uses bg-coopmaths-struct + text-coopmaths-canvas) */
.bg-coopmaths-canvas,
.bg-coopmaths-canvas-dark { background-color: transparent !important; }
/* Keep form inputs white */
input, select, textarea { background-color: #fff !important; }
/* Standalone math-field inputs: white background */
math-field { background-color: #fff !important; }
/* Inline math-field with prompts (fillInTheBlanks): transparent overall */
math-field[readonly] { background-color: transparent !important; }

/* #appMathalea is now a transparent wrapper — cards are per-exercise */
#appMathalea {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
#appMathalea > div {
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}
/* Kill viewport-relative sizing — prevents circular dependency in iframes */
[class*="min-h-screen"],
[class*="h-screen"] {
    min-height: 0 !important;
    height: auto !important;
}

/* Break scroll containment inside #startComponent */
#startComponent > div {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
}
#startComponent > div > div {
    height: auto !important;
    position: static !important;
}

/* THE CRITICAL FIX: #exercisesPart — remove absolute positioning and scroll trap */
#exercisesPart {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
}

/* Don't let flex-1 constrain exercise content wrapper height */
#exercisesPart > .z-0.flex-1 {
    flex: none !important;
    height: auto !important;
}

/* Remove Tailwind side padding from exercises container */
#exercises-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Per-exercise "Exercice N" header (injected by mathalea-inject.js) */
.galilee-exercice-header {
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
    margin-bottom: 0.25rem;
}
.galilee-exercice-label {
    font-size: 25px;
    font-family: Roboto, sans-serif;
    color: #545454;
}
.galilee-exercice-num {
    color: #0e5c4b;
    font-family: Roboto, sans-serif;
}

/* Per-exercise card styling (class added by mathalea-inject.js) */
.galilee-exercise-card {
    background: #f4f4f4d6 !important;
    border: 1px solid #909293 !important;
    border-radius: 17px !important;
    padding: 0.75rem 1.25rem !important;
    color: #202020 !important;
    font-family: Roboto, sans-serif !important;
    transition: opacity 0.3s ease !important;
}
.galilee-exercise-card.galilee-fading {
    opacity: 0 !important;
}
/* Spacing between exercise cards — applied to the wrapper, not the card,
   because each card is :last-child of its own .break-inside-avoid-column parent */
#exercises-list > .break-inside-avoid-column + .break-inside-avoid-column {
    margin-top: 1rem !important;
}

/* Hide the navigation header with "Exercice 1" tab */
#navigationHeaderID { display: none !important; }

/* Hide all exercise title IDs (exerciseTitleID0, exerciseTitleID20, etc.) */
[id^="exerciseTitleID"] { display: none !important; }

/* Hide the exercise code/reference line (e.g. "can6C44 YH5m") */
[id^="headerExoVueEleve"] { display: none !important; }
[id^="exerciceHeader"] { display: none !important; }

/* Hide old JS-created Recommencer container (bundled in Docker) */
#galilee-recommencer-container { display: none !important; }

/* Hide unwanted toolbar buttons */
button[aria-label="Afficher / Masquer la correction"],
button[aria-label="Dupliquer l'exercice"],
button[aria-label="Paramètres de l'exercice"],
button[aria-label="pdf"] {
    display: none !important;
}

/* Hide setup/export/config button bars */
#setupButtonsBar, #exportButtonsBar, #barre-boutons,
#btn_config, #btn-back-to-top, #sidenav,
#headerStart, #headerCapytale { display: none !important; }

/* Hide footer, copyright, branding */
footer { display: none !important; }
a[href*="coopmaths"] { display: none !important; }

/* Hide the score display area */
#score { display: none !important; }
[id^="divScoreEx"] { display: none !important; }

/* Hide the per-exercise toolbar row (Nouvel Énoncé, etc.) */
[id^="exercice"] > div.flex.flex-row.justify-start.items-center {
    display: none !important;
}

/* Hide the native "Vérifier" button — replaced by galilee-action-btn in JS */
[id^="buttonScoreEx"] { display: none !important; }

/* Hide column +/- buttons */
button[aria-label="Réduire le nombre de colonnes"],
button[aria-label="Augmenter le nombre de colonnes"] {
    display: none !important;
}
/* Hide the columns icon row */
.bx-columns { display: none !important; }

/* Mathalea's Svelte keyboard is moved to parent window by mathalea-inject.js */

/* Hide fixed font size +/- buttons (bottom-right) */
button[aria-label="Réduire la taille du texte"],
button[aria-label="Augmenter la taille du texte"] {
    display: none !important;
}
/* Also hide their fixed container */
div.fixed.z-20.bottom-4.right-2 { display: none !important; }

/* Per-exercise Galilee action buttons (created by mathalea-inject.js) */
.galilee-action-btn {
    display: block !important;
    margin: 16px 0 16px 12px !important;
    background-color: #0e5c4b !important;
    color: #fafcfb !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 0.3rem !important;
    font-family: Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    padding: 8px 20px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.galilee-action-btn:hover {
    background-color: #0a4a3c !important;
    color: #fff !important;
}