/* ===================================================================
 * Caly-Elec — Classroom mode overrides
 * -------------------------------------------------------------------
 * These rules apply ONLY when the LMS is loaded inside a classroom
 * iframe (host.html or live.html). The `classroom-mode` and
 * `classroom-mode-{host,trainee}` classes are added to the HTML root
 * by the classroom bootstrap in app.js.
 *
 * Layers:
 *   .classroom-mode                  → any classroom iframe
 *   .classroom-mode-host             → host-side LMS iframe
 *   .classroom-mode-trainee          → trainee-side LMS iframe
 *   .classroom-mode-trainee.classroom-sync-on  → trainee + sync mode ON
 * =================================================================== */

/* ── Every classroom iframe: hide the main app footer ── */
.classroom-mode .app-footer,
.classroom-mode #footer,
.classroom-mode #login-overlay {
    display: none !important;
}

/* ── Trainee (ALWAYS hidden) ─────────────────────────────
 * The trainee must never be able to close the course, go back to
 * the LMS home, open the admin panel, or launch another module.
 * Hide EVERY escape hatch inside the LMS viewer.                 */
.classroom-mode-trainee .hab-viewer-back,
.classroom-mode-trainee .hab-viewer-close,
.classroom-mode-trainee .btn-back,
.classroom-mode-trainee .btn-back-floating,
.classroom-mode-trainee .nfx-tabs,
.classroom-mode-trainee .nfx-nav,
.classroom-mode-trainee .hab-resources-panel,
.classroom-mode-trainee #hab-resources-panel,
.classroom-mode-trainee .btn-secondary[onclick*="home-screen"],
.classroom-mode-trainee .btn-back[onclick*="home-screen"],
/* Trainer-only tools must never leak to the trainee side */
.classroom-mode-trainee #trainer-panel,
.classroom-mode-trainee #trainer-fab,
.classroom-mode-trainee .trainer-panel,
.classroom-mode-trainee .trainer-fab,
.classroom-mode-trainee #exam-mode-panel,
.classroom-mode-trainee #exam-mode-fab,
.classroom-mode-trainee #smart-revision-panel,
.classroom-mode-trainee #gamification-panel,
.classroom-mode-trainee .gamification-badge-popup,
.classroom-mode-trainee .hab-viewer-btn[title*="Sommaire"],
.classroom-mode-trainee .hab-viewer-btn[onclick*="toggleDrawer"],
.classroom-mode-trainee #lms-drawer,
.classroom-mode-trainee .lms-drawer,
/* Edit / admin buttons sometimes injected over slides */
.classroom-mode-trainee .slide-edit-btn,
.classroom-mode-trainee .course-edit-btn,
.classroom-mode-trainee [onclick*="editCourse"],
.classroom-mode-trainee [onclick*="openEditor"] {
    display: none !important;
}

/* Disable right-click + text selection to discourage obvious exfil */
.classroom-mode-trainee {
    user-select: none;
    -webkit-user-select: none;
}

/* ── Trainee + sync mode ON: hide slide navigation too ──
 * In synchronous mode the trainee only watches the host's current
 * slide. Local Prev/Next/autoplay/zoom/drawer controls are hidden.  */
.classroom-mode-trainee.classroom-sync-on .hab-viewer-controls,
.classroom-mode-trainee.classroom-sync-on .hab-viewer-header .hab-viewer-header-right {
    display: none !important;
}

/* Trainee in sync mode: make the slide fill more of the viewport by
 * shrinking the viewer header since the trainee no longer needs the
 * nav controls. The slide title bar stays so the trainee knows what
 * course they're watching.                                          */
.classroom-mode-trainee.classroom-sync-on .hab-viewer-header {
    padding: 6px 14px !important;
    min-height: 0 !important;
}
.classroom-mode-trainee.classroom-sync-on .hab-viewer-header h2 {
    font-size: 0.95rem !important;
    margin: 0 !important;
}
.classroom-mode-trainee.classroom-sync-on .hab-viewer-title span {
    font-size: 0.7rem !important;
}

/* ── Remove crops: make the lms-screen & slide area fill the whole
 *     iframe viewport (fixes the "cut at top/bottom" issue on the
 *     trainee side).                                                 */
.classroom-mode #lms-screen,
.classroom-mode .reveal,
.classroom-mode .reveal .slides,
.classroom-mode .reveal-viewport {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    /* Maximize horizontal space — no side padding stealing slide width */
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Host: viewer header + breadcrumb + nominal banner + controls ALL hidden
   → slide fills the entire iframe from y=0 to bottom.
   The base theme (lms-habilec-theme.css:1864) sets:
     #reveal-container { top: 60px; bottom: 70px; height: calc(100vh-130px) }
   to make room for the viewer header (60px) and footer (70px).
   In classroom mode both are hidden, so we override to reclaim 130px.  */
.classroom-mode-host #lms-screen {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.classroom-mode-host #lms-screen.hab-viewer-active #reveal-container {
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
}
/* Hide the breadcrumb navigation bar (Accueil > technique > DDR...)
   + the "Aller a..." jump button + the slide thumbnail preview.
   Actual element IDs/classes confirmed from app.js codebase:       */
.classroom-mode-host #caly-breadcrumbs,
.classroom-mode-host .breadcrumb-nav,
.classroom-mode-host #slide-jump-overlay,
.classroom-mode-host .slide-jump-overlay {
    display: none !important;
}
/* Hide the nominal watermark footer bar ("Document nominatif —
   Diffusion interdite") in classroom mode. Confirmed element:
   #caly-nominal-banner (see frontend/index.html:944).              */
.classroom-mode #caly-nominal-banner {
    display: none !important;
}
/* Hide the watermark canvas overlay (#caly-watermark) and any
   generic watermark-like elements.                                 */
.classroom-mode #caly-watermark,
.classroom-mode .watermark-bar,
.classroom-mode #watermark-bar,
.classroom-mode .document-footer,
.classroom-mode [class*="watermark"] {
    display: none !important;
}
/* Ensure the Reveal slide section fills the available width */
.classroom-mode .reveal .slides > section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 20px !important;
}
/* Don't add flexbox centering to .reveal .slides — Reveal.js
   handles centering internally via CSS transforms. Adding flex
   breaks its layout engine. With top:0 + bottom:0 on the
   container, Reveal.js will center slides correctly on its own. */
.classroom-mode-trainee.classroom-sync-on #lms-screen {
    padding-top: 40px !important; /* just the thin title bar */
    padding-bottom: 0 !important;
}

/* ── Host: hide Retour/Fermer inside the LMS viewer ──
 * In classroom host mode, the iframe is just a rendering surface for
 * the slide capture. The formateur navigates via the dashboard header
 * (📚 Choisir un cours, ← Mes séances). Clicking the in-viewer Retour
 * or Fermer would navigate to /home-screen (the legacy admin panel)
 * which is confusing. Hide them. */
.classroom-mode-host .hab-viewer-back,
.classroom-mode-host .hab-viewer-close,
.classroom-mode-host .btn-back-floating,
.classroom-mode-host .hab-resources-panel,
.classroom-mode-host #hab-resources-panel,
/* Legacy LMS "Vue Présentateur" (F8) — replaced in classroom mode by
   the dedicated Videoprojecteur popup + the sidebar "Notes formateur"
   panel. Hide the floating action button AND the panel itself so
   neither can be opened by accident. */
.classroom-mode-host #trainer-panel,
.classroom-mode-host #trainer-fab,
.classroom-mode-host .trainer-panel,
.classroom-mode-host .trainer-fab,
/* LMS "Plein écran" button inside the iframe toolbar */
.classroom-mode-host .hab-viewer-btn[title*="Plein"],
.classroom-mode-host .hab-viewer-btn[title*="plein"],
.classroom-mode-host .hab-viewer-btn[onclick*="toggleFullscreen"],
.classroom-mode-host .hab-viewer-btn[onclick*="Fullscreen"],
/* LMS "Sommaire" drawer button in the iframe header — opens the
   course sommaire which contains a "Quitter le cours" link that
   would send the host back to the legacy admin panel. Since the
   host navigates via the external footer navbar, the sommaire is
   not needed in classroom mode. */
.classroom-mode-host .hab-viewer-btn[title*="Sommaire"],
.classroom-mode-host .hab-viewer-btn[title*="sommaire"],
.classroom-mode-host .hab-viewer-btn[onclick*="toggleDrawer"],
.classroom-mode-host #lms-drawer,
.classroom-mode-host .lms-drawer,
.classroom-mode-host .hab-drawer {
    display: none !important;
}

/* ── Host: HIDE the in-iframe viewer header entirely ──
 * The breadcrumb, slide counter, "Aller a..." button, and LIVE
 * banner are ALL redundant with the external host dashboard
 * header/toolbar. Hiding the whole header gives the slide ~80px
 * more vertical space. The "LIVE" indicator is integrated into
 * the floating presentation toolbar instead (see host.html).    */
.classroom-mode-host .hab-viewer-header {
    display: none !important;
}

/* Host: the in-iframe reveal controls are completely hidden. We drive
   the slide navigation from host.html via postMessage so the nav
   buttons live OUTSIDE the captured slide area — they never appear
   in the trainee's image. */
.classroom-mode-host .hab-viewer-controls {
    display: none !important;
}
.classroom-mode-host .hab-resources-panel,
.classroom-mode-host #hab-resources-panel {
    display: none !important;
}