/* ============================================================
   Onglet Planning de production — grille mensuelle (rétro-planning).
   Calée sur docs/Planning_production_maquette.xlsx :
   - jours en lignes, affaires en colonnes (bloc vertical coloré)
   - colonne de séparation, charge par producteur (vert/orange/rouge)
   - fériés/week-ends grisés, jalons « marché » en trait rouge
   ============================================================ */

.planning-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.planning-swatch { width: 16px; height: 16px; border-radius: 3px; display: inline-block; }

.planning-grid-wrap { min-width: 640px; }

/* Grille : colonnes/lignes définies inline par planning.js (nb variable). */
.planning-grid {
  display: grid;
  position: relative;
  font-size: 12px;
}

/* En-têtes (ligne 1) */
.planning-h {
  position: sticky;
  top: 0;
  z-index: 4;
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding: 8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}
.planning-h-day { background: #566573; justify-content: flex-start; }
.planning-h-charge { background: #566573; font-size: 11px; }
.planning-h-aff { font-size: 11px; }

/* Colonne « Jour » */
.planning-day {
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  padding: 2px 8px;
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  white-space: nowrap;
  z-index: 1;
}
.planning-day .pl-dow { font-weight: 600; margin-right: 5px; text-transform: capitalize; }
.planning-day .pl-hol { color: var(--terracotta); font-size: 10px; margin-left: 6px; }

/* Bandes week-end / férié (derrière le contenu) */
.planning-band { z-index: 0; }
.planning-band.weekend { background: #F4F1EC; }
.planning-band.holiday { background: #FADBD8; }

/* Cellules vides de bordure légère pour lire la grille */
.planning-cell {
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  z-index: 1;
}

/* Bloc tâche : rectangle coloré (fond + zone cliquable). Texte porté par
   l'étiquette superposée .planning-task-label (au-dessus du trait de jalon). */
.planning-task {
  z-index: 2;
  border-radius: 5px;
  margin: 1px 3px;
  overflow: hidden;
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.planning-task.editable { cursor: pointer; }
.planning-task.editable:hover { filter: brightness(1.08); }

/* Étiquette centrée (texte horizontal, taille normale, centré H+V). */
.planning-task-label {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  pointer-events: none; /* le clic atteint le rectangle en dessous */
  overflow: hidden;
}
.planning-task-label .pl-chip {
  /* fond = couleur de l'affaire (posée inline) → masque le trait du jalon autour du texte */
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  border-radius: 4px;
  padding: 2px 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planning-task-label .pl-pct { display: block; font-weight: 400; opacity: 0.9; }

/* Colonne de séparation */
.planning-separator {
  z-index: 1;
  background: var(--bg-warm);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

/* Cellules de charge (par producteur) */
.planning-charge {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid var(--line-soft);
}
.planning-charge.vert { background: #2ECC71; color: #1B3A2A; }
.planning-charge.orange { background: #E67E22; color: #fff; }
.planning-charge.rouge { background: #E74C3C; color: #fff; }
.planning-charge.leave { background: #D5D8DC; color: var(--ink-mute); }

/* Jalon « marché » : trait rouge horizontal en haut de la cellule du jour */
.planning-milestone {
  z-index: 3;
  border-top: 3px solid var(--terracotta);
  align-self: start;
  height: 0;
  pointer-events: none;
}

/* ----- Modale de saisie ----- */
.planning-modal {
  position: fixed;
  inset: 0;
  background: rgba(27, 38, 49, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.planning-modal[hidden] { display: none; }
.planning-modal-card {
  background: var(--bg-card, #fff);
  border-radius: 12px;
  width: min(540px, 92vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.planning-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
}
.planning-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink-mute);
}
.planning-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.planning-modal-body .form-label { margin-top: 4px; }
.planning-modal-body select,
.planning-modal-body input { width: 100%; }
.planning-modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
}
.planning-modal-error {
  background: var(--terracotta-soft, #fadbd8);
  color: #6F2E15;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
}