SchotzIAD/frontend/src/app/features/consultation-jour/consultation-jour.component.scss

:host {
  display: block;
  height: 100%;
  min-height: 0;
}

.consultation {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 1rem;
  padding: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden; // aucun scroll global : seule la liste défile (voir &__liste)

  // Zone dates (colonne gauche) : sélecteur temporel + navigation ± 1 jour, compacte.
  &__dates {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f7f8fa;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
  }

  // Bande fixe en haut de la colonne DROITE : sélecteur véhicule + bouton d'ajout.
  // Reste visible pendant le scroll de la page (la liste défile en dessous).
  &__barre-liste {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.75rem;
    background: #f7f8fa;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
  }

  &__navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  &__nav-bouton {
    padding: 0.4rem 0.9rem;
    border: 1px solid #c7ccd3;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 0.9rem;

    &:hover:not(:disabled) {
      background: #eef1f5;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  &__date {
    min-width: 6.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  &__vehicule {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  &__vehicule-libelle {
    font-size: 0.8rem;
    color: #5a616b;
  }

  &__vehicule-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid #c7ccd3;
    border-radius: 6px;
    background: #fff;
    min-width: 12rem;
  }

  // --- Corps deux colonnes ---
  &__corps {
    display: grid;
    // Colonne GAUCHE = dates + totaux + carte (fixe) ; DROITE = bande + liste (liste défilante).
    grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0; // indispensable pour que la colonne droite puisse contraindre la liste
  }

  &__principal {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    min-height: 0; // permet à la liste enfant de scroller au lieu de pousser la hauteur
  }

  &__formulaire {
    padding: 1rem;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    background: #fff;
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
  }

  &__ajouter {
    align-self: flex-end;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    background: #1976d2;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;

    &:hover {
      background: #135ba1;
    }
  }

  &__erreur {
    color: #b3261e;
    margin: 0;
  }

  &__chargement {
    color: #5a616b;
    margin: 0;
  }

  // Zone des trajets : SEULE zone défilante de la vue. Elle occupe la hauteur restante
  // de la colonne droite et fait défiler uniquement la liste (tout le reste est figé).
  &__liste {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    background: #fff;
  }

  &__vide {
    padding: 1rem;
    margin: 0;
    color: #5a616b;
  }

  // Panneau latéral toujours visible (sticky) : totaux + carte (Exigence 12.9).
  // Il fait partie de la zone FIXE : il se cale près du haut du viewport pendant que
  // la liste des trajets défile avec la page. `top` réduit pour maximiser la visibilité ;
  // borné en hauteur avec défilement interne si les totaux + carte dépassent l'écran.
  &__panneau {
    // Colonne gauche FIGÉE : ne défile jamais. Alignée en haut.
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
  }
}

// --- Modale du formulaire de trajet (réutilise le motif d'overlay du ConfirmDialog) ---
.modale-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1000;
  padding: 2rem 1rem;
  overflow-y: auto;
}

.modale-panneau {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  max-width: 640px;
  width: 100%;
  padding: 1.5rem;
  margin: auto;
}

// Repli en une colonne sur petits écrans : le panneau redevient statique.
@media (max-width: 900px) {
  .consultation__corps {
    grid-template-columns: 1fr;
  }

  .consultation__panneau {
    position: static;
    // Sur une colonne, le panneau (totaux + carte) s'affiche en premier, au-dessus de la liste.
    order: -1;
  }
}