/* ==================================================
   Cineplanner — style.css
   Objectif: regrouper et documenter les règles CSS
   - Sections: variables, reset/typography, layout, calendar,
     cells & screenings, components (modals, buttons), utilities
   - Conventions: commentaires en français, sélectionnaires courts
 =================================================*/

:root {
  --bg: #f3f4f6;
  --card-radius: 12px;
  --primary-1: #0f172a;
  --primary-2: #0ea5a4;
  --muted: #6c757d;
  --muted-weak: rgba(0, 0, 0, 0.05);
  --danger: #c0392b;
  --success: #28a745;
  --info: #0d6efd;
  --warning: #ffc107;
  --table-head-bg: #f8f9fa;
  --header-height: 0px;
  --vo: #000000;
  --projectionist-color-none: #ff25f0;
}

/* --------------------------
   Base / Layout général
   -------------------------- */
body {
  background: var(--bg);
}

header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: linear-gradient(90deg, var(--primary-1), var(--primary-2));
  color: #fff;
}

.app-container {
  max-width: 1200px;
  margin: 20px auto;
}

.card {
  border-radius: var(--card-radius);
}

.proj-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

tr.table-primary td {
  font-weight: bold;
}


/* --- NAVIGATION --- */

.nav-item {
  position: relative;
  list-style: none;
}

.nav-link {
  color: #e2e8f0;
  /* Couleur texte non bleu */
  text-decoration: none;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 500;
}

.nav-link:focus,
.nav-link:active {
  color: #e2e8f0;
  /* même couleur que l'état normal */
  outline: none;
  /* retire le contour bleu moche */
}


.nav-link:hover {
  color: #7dd3d2;
}

/* Icône ▼ */
.nav-link .caret {
  transition: transform 0.25s ease;
  font-size: 0.75em;
}

/* Rotation quand ouvert */
.nav-item.open .caret {
  transform: rotate(180deg);
}

/* Dropdown clair (thème Light) */
.dropdown-menu {
  display: block;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #ffffff;
  /* Fond clair */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

  /* Animation */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Ouvert */
.nav-item.open>.dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-menu li a {
  display: block;
  padding: 8px 14px;
  text-decoration: none;
  color: #1e293b;
  /* Gris bleu foncé (lisible, moderne) */
  font-size: 0.95em;
}

/* Hover turquoise subtil */
.dropdown-menu li a:hover {
  background: rgba(14, 165, 164, 0.12);
  /* lié à --primary-2 */
  color: #0f172a;
  /* bleu nuit pour un contraste élégant */
}

/* --------------------------
   Calendrier — en-têtes sticky
   -------------------------- */
#calendarTable thead th {
  position: sticky;
  top: var(--calendar-header-top, 0px);
  z-index: 1020;
  background-color: var(--table-head-bg);
  text-align: center;
}

/* Ligne de séparation visible même en sticky */
#calendarTable thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* --------------------------
  Movies — sticky headers
  -------------------------- */
/* Movies — sticky headers (Movies view table) */
#view-movies table.table-sm thead th {
  position: sticky;
  top: var(--movies-header-top, 0px);
  z-index: 1020;
  background-color: var(--table-head-bg);
  text-align: left;
}

/* Separator line visible even when sticky (Movies) */
#view-movies table.table-sm thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* .movie-add-card { 
  scroll-margin-top: var(--header-height); 
} */
#tmdb-search {
  scroll-margin-top: var(--header-height);
}

/* --------------------------
  Movies — table rows
  -------------------------- */
.movie-row {
  cursor: pointer;
}

.movie-row td {
  transition: background-color 0.15s ease-in-out;
}

.movie-row:hover td {
  background-color: #f2f2f2 !important;
}

.movie-row td:first-child {
  position: relative;
}

.movie-row td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: #3b82f6;/* bleu Tailwind */
  opacity: 0; /* invisible par défaut */
  transition: opacity 0.15s ease-in-out; /* animation */
}

.movie-row:hover td:first-child::before {
  opacity: 1; /* devient visible */
}


/* --------------------------
  Distributors grid
  -------------------------- */
.distributors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.distributor-card {
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
}

.distributor-card:hover {
  background: #f0f0f0;
}

.distributor-card.add-card {
  background: #e8f5e9;
  border-color: #a5d6a7;
  font-weight: bold;
  text-align: center;
}

.contact-actions .btn {
  padding: 6px 10px;
  /* un peu plus d’espace interne */
  margin-right: 6px;
  /* espace entre les boutons */
}

.contact-actions {
  margin-top: 6px;
  /* espace au-dessus du bloc d’actions */
}

.offcanvas-body hr {
  margin-top: 16px;
  margin-bottom: 10px;
}


.offcanvas-header {
  display: flex;
  /* on garde le flex */
  justify-content: center;
  /* centre le titre */
  align-items: center;
  /* centre verticalement */
  position: relative;
  padding-right: 3rem;
  /* espace réservé pour la croix */
}

.offcanvas-title {
  text-align: center;
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
  flex: 1;
  /* permet au titre de prendre toute la largeur */
  padding: 0 1rem;
  /* évite que le texte touche les bords */
}

.offcanvas-header .btn-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* --------------------------
   Icônes de navigation du calendrier
   -------------------------- */
.calendar-nav-icon {
  font-size: 1.8rem;
  line-height: 1;
  /* évite l’étirement vertical */
  vertical-align: middle;
  /* recentre dans le bouton */
  display: inline-block;
  /* évite le décalage de baseline */
}

.selMonth-wrapper {
  display: inline-flex;
  /* important */
  align-items: center;
  border: 2px solid #000000;
  border-radius: 6px;
  padding: 6px;
}

.month-btn {
  border: 2px solid #000000;
  border-radius: 6px;
  padding: 3px 4px;
  /* réduit la hauteur globale */
  display: inline-flex;
  align-items: center;
  /* centre l’icône verticalement */
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  background-color: white;
  /* important */
  color: black;
  /* pour l’icône */
}

.month-btn:hover {
  background-color: #c4e2e2;
  border-color: #000000;
}

.selMonth-wrapper:hover {
  background-color: #c4e2e2;
}

.selMonth {
  background-color: transparent;
  cursor: pointer;
}

/* Désactive le focus Bootstrap bleu */
/* .month-btn:focus, .month-btn:active {
  box-shadow: none !important;
  border-color: #000000 !important;
} */

/* --------------------------
   Cellules du calendrier
   -------------------------- */
td[data-type="empty"] {
  background-color: var(--table-head-bg);
  color: var(--muted);
  font-style: italic;
}

td[data-type="empty"]:hover {
  background-color: #e9ecef;
  cursor: pointer;
}

/* Calendar cells containing at least one screening */
td[data-type="session"] {
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

/* Cellule entièrement annulée */
td[data-type="session"].cancelled {
  background-color: var(--muted) !important;
}

td[data-type="session"].cancelled .city-title,
td[data-type="session"].cancelled .screening-block {
  color: #ffffffad !important;
  text-decoration: line-through;
}

/* Individual screening cancelled */
.screening-block.cancelled {
  background-color: rgba(108, 117, 125, 0.12);
  text-decoration: line-through;
}

/* --------------------------
  Screening blocks (items)
  -------------------------- */
.screening-block {
  margin: 2px 0;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.9em;
  background-color: var(--muted-weak);
}

.screening-block.proj-none {
  background-color: transparent;
}

.screening-block:hover {
  outline: 1px solid var(--info);
}

.session-notes {
  font-size: 80%;
  white-space: pre-wrap;
}

.session-title {
  font-weight: 500;
}

.movie-vo {
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--vo);
  margin-left: 6px;
  padding: 1px 4px;
  border: 1px solid var(--vo);
  border-radius: 3px;
  text-transform: uppercase;
}

.badge-outdoor {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background-color: #473f5d;
    color: white;
    padding: 4px 25px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-bottom: 4px;
}
.badge-outdoor i {
    font-size: 1rem;
    margin-bottom: 2px;
}


/* --------------------------
   Boutons & petites actions
   -------------------------- */
.undo-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9em;
  margin-left: 6px;
  color: #464646;
}

.undo-btn:hover {
  color: var(--warning);
}

td[data-type="session"].cancelled .undo-btn {
  color: #ffffffcc;
}

td[data-type="session"].cancelled .undo-btn:hover {
  color: var(--warning);
}

/* --------------------------
  Movies — add movie card
   -------------------------- */

/* Card around the "Add a movie" form */
.movie-add-card {
  background-color: #abc1d6;
  /* très léger différentiel par rapport au fond */
  border-radius: .5rem;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* ============================
  MOVIE POSTERS (TMDB)
   ============================ */

#movie-poster {
  max-width: 196px;
  border-radius: 6px;
  display: none;
  /* hidden until a movie is selected */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#movie-poster:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

#movie-poster-container {
  text-align: center;
  max-width: 196px;
}

#allocine-search-info {
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
}

/* Bouton de recherche Allociné sous l’affiche */
#allocine-search-btn {
  display: none;
  /* caché par défaut */
  padding: 10px 15px;
  background-color: #ffcc00;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 10px;
  transition: background-color 0.2s ease;
}

#allocine-search-btn:hover {
  background-color: #e6b800;
}



/* --------------------------
   Modals / Formulaires
   -------------------------- */
.date-display {
  font-size: 1.15rem;
  font-weight: 600;
  color: #333;
  padding: 6px 12px;
  background: #f5f5f5;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.modal-title-icon {
  font-size: 1.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.modal-header {
  background: var(--table-head-bg);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e5e5;
}

.modal-header.add {
  border-bottom: 3px solid var(--success);
}

.modal-header.edit {
  border-bottom: 3px solid var(--info);
}

.modal-header.options {
  border-bottom: 3px solid #6cb2ff;
  background: #f8fbff;
}

.modal-body {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.modal-body label {
  font-weight: 600;
  margin-bottom: 0.35rem;
  display: block;
}

.modal-body .form-control,
.modal-body input[type="time"],
.modal-body textarea {
  font-size: 0.95rem;
  padding: 0.45rem 0.6rem;
}

.modal-body .form-group,
.modal-body .mb-3,
.modal-body .col-6,
.modal-body .col-12 {
  margin-bottom: 1rem !important;
}

.form-check-inline {
  margin-top: 0.25rem;
}

textarea.form-control {
  min-height: 70px;
  resize: vertical;
}

.modal-footer {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-field {
  width: 100%;
}

.input-time {
  width: 100%;
  max-width: 90px;
}

/*Modal choix du projectionniste*/
.proj-item {
  cursor: pointer;
  transition: 0.15s ease;
}

.proj-item:hover {
  background: #f0f0f0;
}

.proj-item.selected {
  border: 2px solid #0d6efd;
  background: #e7f1ff;
}

/* --------------------------
   Modals — Films / Affiches
   -------------------------- */
#movieSheetPoster {
  max-width: 196px;
  height: auto;
  display: block;
}

#movieSheetTitle {
  text-align: center;
  font-size: 1.8rem;
  /* Taille lisible, pas trop énorme */
  font-weight: 600;
  /* Semi-bold, effet “fiche film” */
  margin: 0 auto;
  /* Centre */
  width: 100%;
  /* Assure le centrage horizontal */
}


/* --------------------------
   Kangoo cells
   -------------------------- */
.kangoo-cell {
  padding: 8px;
  text-align: left;
}

.kangoo-cell .city {
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centre horizontalement */
  justify-content: center;
  text-align: center;
}

.kangoo-cell .vehicle {
  font-size: 0.9rem;
  color: #555;
}

.kangoo-cell .session {
  margin-top: 4px;
}

.kangoo-cell .needs {
  margin-top: 9px;
  /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
  text-align: center;
}

/* .kangoo-cell .needs .badge {
    margin-right: 4px;
} */

.badge-kangoo {
  background-color: #bf0000;
  color: white;
}

.kangoo-cell .vehicle {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centre horizontalement */
  justify-content: center;
  text-align: center;
}

.kangoo-cell .vehicle-badge {
  display: inline-block;
  padding: 2px 6px;
  margin-top: 5px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: bold;
  color: white;
}

#btnAutoVehicles {
  margin-right: 1rem;
}

.monthSelect-label {
  margin-left: 1rem;
}

.vehicle-selector {
  border-radius: 6px;
  padding: 6px;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.vehicle-selector-item {
  display: inline-block;
  margin: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  color: white;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}

.vehicle-selector-item:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
  transition: 0.1s ease;
}

/* --------------------------
   Serveurs — Titres de section
   -------------------------- */
#view-servers h3.section-title {
  font-size: 1.25rem;
  /* un peu plus grand que h6 */
  font-weight: 600;
  /* léger renforcement */
  margin-top: 1.5rem;
  /* plus d’espace au-dessus */
  margin-bottom: 1rem;
  /* espace propre en dessous */
  text-align: center;
}

/* #view-servers table {
    border-radius: 6px;
    overflow: hidden;
} */

/* Tableau Films */
#tableFilms {
  border-radius: 6px;
  overflow: hidden;
}

#tableFilms.table> :not(caption)>*>* {
  background: #e3f0ff;
  color: #0a3d7a;
  font-weight: 600;
}

#tableFilms.table tbody tr:hover>* {
  background: #f5faff;
}

/* Tableau Courts-métrages */
#tableCourts {
  border-radius: 6px;
  overflow: hidden;
}

#tableCourts.table> :not(caption)>*>* {
  background: #e6f7ec;
  color: #0f6b3d;
  font-weight: 600;
}

#tableCourts.table tbody tr:hover>* {
  background: #f4fcf7;
}

/* Tableau Bandes-annonces & Cartons */
#tableBACartons {
  border-radius: 6px;
  overflow: hidden;
}

#tableBACartons.table> :not(caption)>*>* {
  background: #fff3e0;
  color: #a05a00;
  font-weight: 600;
}

#tableBACartons.table tbody tr:hover>* {
  background: #fff8ed;
}


/* Rendre les cellules interactives */
.toggle-ba,
.toggle-carton {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

/* Effet hover */
.toggle-ba:hover,
.toggle-carton:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Effet clic */
.toggle-ba:active,
.toggle-carton:active {
  transform: scale(0.97);
}


/* Fin du fichier */