/* Fix thèmes WP qui cassent les tables => FullCalendar affiche 1 seul jour */
#ela-planning-root .fc table { display: table !important; width: 100% !important; }
#ela-planning-root .fc thead { display: table-header-group !important; }
#ela-planning-root .fc tbody { display: table-row-group !important; }
#ela-planning-root .fc tr { display: table-row !important; }
#ela-planning-root .fc th,
#ela-planning-root .fc td { display: table-cell !important; }

/* sécurise la grille */
#ela-planning-root .fc .fc-scrollgrid,
#ela-planning-root .fc .fc-scrollgrid table {
  table-layout: fixed !important;
}

/* Bouton "Imprimer" : icône uniquement */
#ela-planning-root .fc .fc-printWeek-button.ela-print-week-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 10px 13px !important;
}
#ela-planning-root .fc .fc-printWeek-button.ela-print-week-btn i {
  font-size: 1.7rem;
  line-height: 1;
}


/* =========================================================
   Impression : calendrier hebdomadaire sur A4 paysage

   Stratégie qui marche enfin :
   1. La carte est forcée à la taille A4 paysage utile
      (285×198mm) DÈS L'AJOUT DE LA CLASSE `ela-printing`
      (donc à l'écran ET en print). Le ResizeObserver de
      FullCalendar voit son parent rétrécir → il refait
      son layout interne comme à un redimensionnement de
      fenêtre : tableaux header et body re-synchronisés,
      colonnes redistribuées sur 285 mm, alignées entre elles.
   2. La compression verticale (16h sur 198mm) se fait par
      `transform: scaleY(...)` calculé dynamiquement en JS.
   3. Le shell est rendu invisible PENDANT le bref moment
      écran entre le clic et l'aperçu d'impression, pour
      éviter le flash visuel.
   ========================================================= */

@page ela-print-week {
  size: A4 portrait;
  margin: 6mm;
}

/* === GÉOMÉTRIE : appliquée à l'écran + en print ===
   La carte devient une fenêtre exactement de la zone
   imprimable. FullCalendar (width:100%) va donc se
   réajuster sur 285 mm via son ResizeObserver. */
body.ela-printing .ela-card.ela-calendar-card {
  width: 198mm !important;
  height: 298mm !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  overflow: hidden !important;
  position: relative !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

body.ela-printing,
body.ela-printing .site,
body.ela-printing #page,
body.ela-printing #primary,
body.ela-printing .container-fluid,
body.ela-printing .ela-planning-page,
body.ela-printing .ela-shell,
body.ela-printing #ela-planning-root {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: #fff !important;
  overflow: visible !important;
}

body.ela-printing #ela-planning-root .fc {
  width: 100% !important;
  color: #000 !important;
}

/* === ÉCRAN : on cache tout pendant le bref moment où
   `ela-printing` est actif avant l'aperçu d'impression,
   pour que l'utilisateur ne voie pas le glitch
   (carte qui rétrécit, recalcul FullCalendar). */
@media screen {
  body.ela-printing .ela-shell,
  body.ela-printing #wpadminbar,
  body.ela-printing #site-header,
  body.ela-printing #mainMenu,
  body.ela-printing footer,
  body.ela-printing #colophon {
    visibility: hidden !important;
  }
}

/* === PRINT : visuel uniquement (couleurs, fontes, masquage
   du chrome WordPress) + compression verticale via scaleY. */
@media print {
  body.ela-printing {
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    page: ela-print-week;
  }

  /* Cacher tout sauf le calendrier */
  body.ela-printing .ela-topbar,
  body.ela-printing .ela-fab-stack,
  body.ela-printing .ela-fab-create,
  body.ela-printing .ela-fab-nav,
  body.ela-printing .ela-modal,
  body.ela-printing .modal,
  body.ela-printing .modal-backdrop,
  body.ela-printing .offcanvas,
  body.ela-printing .offcanvas-backdrop,
  body.ela-printing #wpadminbar,
  body.ela-printing #site-header,
  body.ela-printing #mainMenu,
  body.ela-printing .site-logo-container,
  body.ela-printing .headerTop,
  body.ela-printing .so-login-btn,
  body.ela-printing #sidebarCollapse,
  body.ela-printing .toggle-wrapper.nav-toggle-wrapper,
  body.ela-printing .so-account-menu-item,
  body.ela-printing .so-account-menu-button,
  body.ela-printing .header-footer-group,
  body.ela-printing footer,
  body.ela-printing .site-footer,
  body.ela-printing #colophon {
    display: none !important;
  }

  /* Le shell doit être visible en print (override du screen) */
  body.ela-printing .ela-shell {
    visibility: visible !important;
  }

  /* Compression verticale uniquement : scaleY préserve
     entièrement le layout horizontal de FullCalendar. */
  body.ela-printing #ela-planning-root .fc {
    transform: scale(var(--ela-print-scale-y, 0.49));
    transform-origin: top left;
  }

  /* Toolbar : on garde uniquement le titre (date semaine) */
  body.ela-printing #ela-planning-root .fc-toolbar.fc-header-toolbar {
    margin: 0 0 3mm 0 !important;
    padding: 0 !important;
  }
  body.ela-printing #ela-planning-root .fc-toolbar-chunk:first-child,
  body.ela-printing #ela-planning-root .fc-toolbar-chunk:last-child,
  body.ela-printing #ela-planning-root .ela-goto-calendar-btn {
    display: none !important;
  }
  body.ela-printing #ela-planning-root .fc-toolbar-chunk:nth-child(2) {
    flex: 1 1 100% !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  body.ela-printing #ela-planning-root .fc-toolbar-title {
    text-align: center !important;
    width: 100% !important;
    color: #000 !important;
  }

  /* Préserver les couleurs des évènements à l'impression */
  body.ela-printing #ela-planning-root .fc .fc-event,
  body.ela-printing #ela-planning-root .fc .fc-event-main {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Cacher l'indicateur "now" (parasite à l'impression) */
  body.ela-printing #ela-planning-root .fc-timegrid-now-indicator-line,
  body.ela-printing #ela-planning-root .fc-timegrid-now-indicator-arrow {
    display: none !important;
  }
}


/* =========================================================
   IMPRESSION V2 — Vue dédiée
   ---------------------------------------------------------
   `<CalendarPrintView>` monte sa propre instance FullCalendar
   dans `.ela-print-view-wrapper`. Le wrapper est planqué hors
   écran tant que `body.ela-print-mode-2` n'est pas active.
   En print + cette classe, on cache tout le reste et on remet
   le wrapper en flux normal à la taille A4 paysage.
   FullCalendar rend lui-même à 285 mm → pas de transform.
   ========================================================= */

@page ela-print-week-v2 {
  size: A4 landscape;
  margin: 6mm;
}

/* Hors print : le wrapper existe dans le DOM mais est invisible
   et hors flux. FullCalendar peut quand même se monter et mesurer
   ses dimensions via la `width: 285mm` explicite. */
.ela-print-view-wrapper {
  position: fixed;
  left: -100000px;
  top: 0;
  width: 285mm;
  background: #fff;
  pointer-events: none;
  z-index: -1;
}

@media print {
  body.ela-print-mode-2 {
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    page: ela-print-week-v2;
  }

  /* Tout cacher : chrome WP + UI app + calendrier principal */
  body.ela-print-mode-2 .ela-shell,
  body.ela-print-mode-2 .ela-fab-stack,
  body.ela-print-mode-2 .ela-fab-create,
  body.ela-print-mode-2 .ela-fab-nav,
  body.ela-print-mode-2 .ela-modal,
  body.ela-print-mode-2 .modal,
  body.ela-print-mode-2 .modal-backdrop,
  body.ela-print-mode-2 .offcanvas,
  body.ela-print-mode-2 .offcanvas-backdrop,
  body.ela-print-mode-2 #wpadminbar,
  body.ela-print-mode-2 #site-header,
  body.ela-print-mode-2 #mainMenu,
  body.ela-print-mode-2 .site-logo-container,
  body.ela-print-mode-2 .headerTop,
  body.ela-print-mode-2 .so-login-btn,
  body.ela-print-mode-2 #sidebarCollapse,
  body.ela-print-mode-2 .toggle-wrapper.nav-toggle-wrapper,
  body.ela-print-mode-2 .so-account-menu-item,
  body.ela-print-mode-2 .so-account-menu-button,
  body.ela-print-mode-2 .header-footer-group,
  body.ela-print-mode-2 footer,
  body.ela-print-mode-2 .site-footer,
  body.ela-print-mode-2 #colophon {
    display: none !important;
  }

  /* Reset des conteneurs externes */
  body.ela-print-mode-2,
  body.ela-print-mode-2 .site,
  body.ela-print-mode-2 #page,
  body.ela-print-mode-2 #primary,
  body.ela-print-mode-2 .container-fluid,
  body.ela-print-mode-2 .ela-planning-page,
  body.ela-print-mode-2 #ela-planning-root {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background: #fff !important;
    overflow: visible !important;
    visibility: visible !important;
    display: block !important;
  }

  /* Le wrapper de la vue dédiée revient en flux normal,
     plein papier. FullCalendar a déjà rendu à 285 mm. */
  body.ela-print-mode-2 .ela-print-view-wrapper {
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    width: 285mm !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Préserver les couleurs des évènements */
  body.ela-print-mode-2 .ela-print-view-wrapper .fc-event,
  body.ela-print-mode-2 .ela-print-view-wrapper .fc-event-main {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  body.ela-print-mode-2 .ela-print-view-wrapper .fc {
    color: #000 !important;
  }

  /* Pas d'indicateur "now" en print */
  body.ela-print-mode-2 .ela-print-view-wrapper .fc-timegrid-now-indicator-line,
  body.ela-print-mode-2 .ela-print-view-wrapper .fc-timegrid-now-indicator-arrow {
    display: none !important;
  }
}