/* ==========================================================
   Layout.css
   Fichier chargé APRES Graphs.css et Tickets.css

   Objectif :
   - centraliser uniquement les règles de disposition globale
   - éviter les règles concurrentes entre Graphs.css et Tickets.css
   - conserver les comportements existants par mode
   ========================================================== */


/* ==========================================================
   Variables communes
   ========================================================== */

html {
  --app-header-height: 64px;
  --app-gap: 10px;

  --max-height-graphs: 50%;
  --max-height-tickets: 50%;
}

main {
  min-height: 0;
}


/* ==========================================================
   Mode 1 : layout-graph-over-tickets
   Graphs au-dessus / tickets en dessous
   ========================================================== */

html.layout-graph-over-tickets {
  --max-height-graphs: 50%;
  --max-height-tickets: 50%;
}

html.layout-graph-over-tickets main {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--app-header-height));
  min-height: 0;
}

html.layout-graph-over-tickets main > section.graphs {
  flex: 1 1 50%;
  min-height: 0;
  max-height: var(--max-height-graphs) !important;
}

html.layout-graph-over-tickets main > section.tickets {
  flex: 1 1 50%;
  min-height: 0;
  max-height: var(--max-height-tickets) !important;
}


/* ==========================================================
   Mode 2 : layout-graph-full
   Graphs plein écran, un seul graph visible
   ========================================================== */

html.layout-graph-full {
  --max-height-graphs: 100%;
  --max-height-tickets: 0%;
}

html.layout-graph-full main {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--app-header-height));
  min-height: 0;
}

html.layout-graph-full main > section.graphs {
  flex: 1 1 100%;
  min-height: 0;
  max-height: var(--max-height-graphs) !important;
}

html.layout-graph-full main > section.tickets {
  flex: 0 0 0%;
  min-height: 0;
  max-height: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* En mode graph-full : un seul graph visible */
html.layout-graph-full main > section.graphs > menu > li.graph,
html.layout-graph-full main > section.graphs.paused > menu > li.graph {
  display: none !important;
}

html.layout-graph-full main > section.graphs > menu > li.graph[data-offset="0"],
html.layout-graph-full main > section.graphs.paused > menu > li.graph[data-offset="0"] {
  display: flex !important;
  width: 96% !important;
  height: 92% !important;
}


/* ==========================================================
   Mode 3 : layout-tickets-full
   Tickets plein écran
   ========================================================== */

html.layout-tickets-full {
  --max-height-graphs: 0%;
  --max-height-tickets: 100%;
}

html.layout-tickets-full main {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--app-header-height));
  min-height: 0;
}

html.layout-tickets-full main > section.graphs {
  flex: 0 0 0%;
  min-height: 0;
  max-height: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}

html.layout-tickets-full main > section.tickets {
  flex: 1 1 100%;
  min-height: 0;
  max-height: var(--max-height-tickets) !important;
}


/* ==========================================================
   Mode 4 : layout-graph-left-stack-tickets
   Nouveau rendu conservant le nom existant :
   - graph en haut
   - tickets en bas
   - un seul graph visible

   IMPORTANT :
   On utilise 70% / 30% en FR units, pas 70svh / 30svh.
   Cela évite l'empiètement, car les rangées se partagent
   la hauteur réelle de main : calc(100svh - header).
   ========================================================== */

html.layout-graph-left-stack-tickets {
  --max-height-graphs: none;
  --max-height-tickets: none;
}

html.layout-graph-left-stack-tickets main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 8fr) minmax(0, 2fr);
  gap: var(--app-gap);

  height: calc(100svh - var(--app-header-height));
  min-height: 0;
  overflow: hidden;
}

/* Zone graph en haut */
html.layout-graph-left-stack-tickets main > section.graphs {
  grid-column: 1;
  grid-row: 1;

  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;

  margin: 0 1em !important;
  align-self: stretch;
  overflow: hidden;
}

/* Zone tickets en bas */
html.layout-graph-left-stack-tickets main > section.tickets {
  grid-column: 1;
  grid-row: 2;

  display: flex !important;
  flex-direction: row !important;
  gap: 10px;

  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;

  margin: 0 1em 0.5em !important;
  padding: 0.5em !important;
  overflow: hidden !important;
}

/* Tickets assignés à gauche */
html.layout-graph-left-stack-tickets main > section.tickets > section.destination-level {
  flex: 1 1 auto !important;
  min-width: 0;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
}

/* Création à droite */
html.layout-graph-left-stack-tickets main > section.tickets > section.source-level {
  flex: 0 0 26% !important;
  min-width: 260px;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  justify-content: flex-start;
  padding: 8px 10px;
  gap: .4rem;
}

/* Scroll interne tickets */
html.layout-graph-left-stack-tickets main > section.tickets > section.destination-level > menu,
html.layout-graph-left-stack-tickets main > section.tickets > section.source-level > menu {
  min-height: 0;
  overflow: auto !important;
}

/* Le menu graph prend toute la zone */
html.layout-graph-left-stack-tickets main > section.graphs > menu {
  justify-content: center !important;
  align-items: center !important;
  padding: 0 1em !important;

  animation: none !important;
  transform: none !important;
}

/* Masque tous les graphs */
html.layout-graph-left-stack-tickets main > section.graphs > menu > li.graph,
html.layout-graph-left-stack-tickets main > section.graphs.paused > menu > li.graph {
  display: none !important;
}

/* Affiche uniquement le graph central */
html.layout-graph-left-stack-tickets main > section.graphs > menu > li.graph[data-offset="0"],
html.layout-graph-left-stack-tickets main > section.graphs.paused > menu > li.graph[data-offset="0"] {
  display: flex !important;
  width: 96% !important;
  height: 90% !important;
}

/*
   Iframe pleine taille.
   Important : Graphs.css applique aux graphes non expanded :
   width: 200%; height: 200%; transform: scale(0.5).
   Dans ce mode vertical, on annule ce zoom miniature, sinon l'iframe
   n'occupe visuellement qu'un quart de la carte.
*/
html.layout-graph-left-stack-tickets main > section.graphs > menu > li.graph[data-offset="0"] .iframe-container,
html.layout-graph-left-stack-tickets main > section.graphs.paused > menu > li.graph[data-offset="0"] .iframe-container {
  flex: 1 1 auto !important;
  align-self: stretch !important;
  position: relative !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

html.layout-graph-left-stack-tickets main > section.graphs > menu > li.graph[data-offset="0"] iframe,
html.layout-graph-left-stack-tickets main > section.graphs.paused > menu > li.graph[data-offset="0"] iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  transform: none !important;
  transform-origin: initial !important;

  pointer-events: auto !important;
  border: 0 !important;
}

/* Liste création : cartes alignées à gauche */
html.layout-graph-left-stack-tickets main > section.tickets > section.source-level > menu {
  --card-w: 220px;
  --gap-x: .6rem;
  --gap-y: .6rem;

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;

  gap: var(--gap-y) var(--gap-x);
  margin: 0;
  padding: 4px;
  min-height: 0;
  overflow: auto;
}

html.layout-graph-left-stack-tickets main > section.tickets > section.source-level > menu > .ticket {
  flex: 0 0 var(--card-w);
  max-width: var(--card-w);
  margin: 0;
  align-self: flex-start;
}

/* Toolbar création */
html.layout-graph-left-stack-tickets main > section.tickets > section.source-level > .buttons {
  display: flex;
  justify-content: flex-start !important;
  align-items: center;
  gap: .5rem;
}

html.layout-graph-left-stack-tickets main > section.tickets > section.source-level > .buttons > button.create.ticket,
html.layout-graph-left-stack-tickets main > section.tickets > section.source-level > button.create.ticket {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center;
}


/* ==========================================================
   Mode 5 : layout-graph-hero-strip
   Graph héros + ruban
   ========================================================== */

html.layout-graph-hero-strip {
  --max-height-graphs: 100%;
  --max-height-tickets: 0%;
}

html.layout-graph-hero-strip main {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--app-header-height));
  min-height: 0;
  overflow: hidden;
}

/* Tickets masqués */
html.layout-graph-hero-strip main > section.tickets {
  flex: 0 0 0%;
  min-height: 0;
  max-height: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Zone graphs = grille hero + ruban */
html.layout-graph-hero-strip main > section.graphs {
  flex: 1 1 auto;
  max-height: 100% !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) clamp(180px, 24%, 260px) !important;
  gap: 10px !important;

  height: 100%;
  min-height: 0;
  overflow: hidden !important;

  margin-top: 0.5em;
}

/* Slot hero */
html.layout-graph-hero-strip main > section.graphs > .hero-slot {
  grid-column: 1 !important;
  grid-row: 1 !important;

  display: block !important;
  position: relative !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  background: #000 !important;
  border-radius: 10px;
  overflow: hidden !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.12);

  z-index: 2 !important;
}

/* Graph cloné dans le hero */
html.layout-graph-hero-strip main > section.graphs > .hero-slot > li.graph,
html.layout-graph-hero-strip main > section.graphs > .hero-slot > li.graph.hero-graph,
html.layout-graph-hero-strip main > section.graphs > .hero-slot > .graph,
html.layout-graph-hero-strip main > section.graphs > .hero-slot > .hero-graph {
  display: flex !important;
  flex-flow: column nowrap !important;
  align-items: center !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 0.2em 0.2em !important;

  box-sizing: border-box !important;
  background: #000 !important;
  color: lightgray !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 3 !important;
}

/* Titre du hero */
html.layout-graph-hero-strip main > section.graphs > .hero-slot > li.graph > label,
html.layout-graph-hero-strip main > section.graphs > .hero-slot > .graph > label,
html.layout-graph-hero-strip main > section.graphs > .hero-slot > .hero-graph > label {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0.2em !important;
}

/* Iframe du hero */
html.layout-graph-hero-strip main > section.graphs > .hero-slot .iframe-container {
  display: block !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;

  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  overflow: hidden !important;
}

html.layout-graph-hero-strip main > section.graphs > .hero-slot iframe {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  transform: none !important;
  transform-origin: initial !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Pas d'expand dans le hero */
html.layout-graph-hero-strip main > section.graphs > .hero-slot .expand {
  display: none !important;
}

/* Ruban inférieur */
html.layout-graph-hero-strip main > section.graphs > menu {
  grid-column: 1 !important;
  grid-row: 2 !important;

  position: relative !important;
  z-index: 4 !important;

  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: center !important;
  align-items: center !important;

  height: 100% !important;
  min-height: 0 !important;

  overflow: hidden !important;
  padding: 0 3.5rem !important;

  animation: none !important;
  transform: none !important;
}

/* Dans le ruban : masque tout par défaut */
html.layout-graph-hero-strip main > section.graphs > menu > li.graph,
html.layout-graph-hero-strip main > section.graphs.paused > menu > li.graph {
  display: none !important;
}

/* Dans le ruban : 3 miniatures visibles */
html.layout-graph-hero-strip main > section.graphs > menu > li.graph[data-offset="-1"],
html.layout-graph-hero-strip main > section.graphs > menu > li.graph[data-offset="0"],
html.layout-graph-hero-strip main > section.graphs > menu > li.graph[data-offset="1"],
html.layout-graph-hero-strip main > section.graphs.paused > menu > li.graph[data-offset="-1"],
html.layout-graph-hero-strip main > section.graphs.paused > menu > li.graph[data-offset="0"],
html.layout-graph-hero-strip main > section.graphs.paused > menu > li.graph[data-offset="1"] {
  display: flex !important;

  flex: 0 0 30% !important;
  width: 30% !important;
  height: 88% !important;

  opacity: 1 !important;
  transform: none !important;
}

/* Miniatures : zoom 50% conservé */
html.layout-graph-hero-strip main > section.graphs > menu > li.graph:not(.expanded) iframe {
  pointer-events: none;
  width: 200% !important;
  height: 200% !important;
  transform: scale(0.5) !important;
  transform-origin: top left !important;
}

/* Boutons next / previous dans le ruban */
html.layout-graph-hero-strip main > section.graphs button.scroll {
  position: absolute;
  bottom: 12px;
  z-index: 10;

  width: 40px;
  height: 40px;
  padding: 0;

  border-radius: 999px;
}

html.layout-graph-hero-strip main > section.graphs button.scroll.previous {
  left: 8px;
}

html.layout-graph-hero-strip main > section.graphs button.scroll.next {
  right: 8px;
}


/* ==========================================================
   Etat transversal : graph expanded
   ========================================================== */

html.graphs-expanded main > section.tickets {
  display: none !important;
}

html.graphs-expanded,
html.graphs-expanded body {
  overflow: hidden;
}