/* Apparence de l'écran de validation du prévisionnel (previsionnel.html). Les variables, les boutons, la barre du haut, les
   bandeaux et la pastille du statut viennent de grille.css ; ici, seulement ce qui est propre à cette page : la liste à gauche,
   le projet à droite (trois tableaux), la correction d'une ligne. Utilisable à 1280 px ; sous 900 px la liste passe au-dessus. */

:root {
  --ambre: #7a5200;
  --ambre-fond: #fff4d6;
  --rouge-fond: #fdecea;
  --ligne-survol: #f3f8f5;
}

.page-previsionnel { display: flex; flex-direction: column; }
.bandeau-erreur { color: var(--alerte); background: var(--alerte-fond); border-bottom: 1px solid #e3b3ae; }

.prev {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

/* ---------- La liste à traiter (à gauche) ---------- */

.prev__liste {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fafafa;
  border-right: 1px solid var(--quadrillage);
}
.prev-liste__entete { padding: 8px 10px; border-bottom: 1px solid var(--quadrillage); }
.prev-liste__entete .recherche { width: 100%; }
.prev-liste__etat { margin: 6px 0 0; font-size: 13px; color: var(--texte-discret); }
.prev-liste { flex: 1; margin: 0; padding: 0; overflow: auto; list-style: none; }

.prev-entree {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid #e6e6e6;
  border-left: 4px solid transparent;
  cursor: pointer;
}
.prev-entree:hover { background: var(--ligne-survol); }
.prev-entree[aria-current="true"] { background: var(--vert-pale); border-left-color: var(--vert-fonce); }
.prev-entree__nom { display: block; font-weight: 700; overflow-wrap: anywhere; }
.prev-entree__client { display: block; font-size: 13px; color: var(--texte-discret); }
.prev-entree__chiffres { display: block; margin-top: 3px; font-size: 13px; color: var(--texte-discret); font-variant-numeric: tabular-nums; }
.prev-entree__ecart { font-weight: 700; color: #b3261e; }

.prev-statut { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 13px; font-weight: 700; }
.prev-statut .picto-previsionnel { cursor: inherit; }

/* ---------- Le projet choisi (à droite) ---------- */

.prev__detail { min-width: 0; min-height: 0; padding: 12px 16px 32px; overflow: auto; }
.prev__detail > .chargement { padding: 8px 0; }

.prev-entete { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.prev-entete__titre { flex: 1 1 280px; min-width: 0; }
.prev-entete h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.prev-entete__sous { margin: 2px 0 0; color: var(--texte-discret); }
.prev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.prev-modifs { font-weight: 700; color: var(--ambre); }
.prev-actions .bouton { padding: 6px 14px; }

.prev-renta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 12px 0 0;
  padding: 8px 12px;
  background: var(--vert-pale);
  border: 1px solid #c9dfd1;
  border-radius: 4px;
}
.prev-renta__titre { align-self: center; font-weight: 700; color: var(--vert-fonce); }
.prev-renta div { display: flex; flex-direction: column; }
.prev-renta dt { font-size: 12px; color: var(--texte-discret); }
.prev-renta dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.prev-renta .negatif { color: #b3261e; }
.prev-renta__precision { display: block; font-size: 12px; font-weight: 400; color: var(--texte-discret); }

.prev-bloc { margin-top: 20px; }
.prev-bloc h3 { margin: 0 0 4px; font-size: 15px; color: var(--vert-fonce); }
.prev-bloc__aide { margin: 0 0 6px; font-size: 13px; color: var(--texte-discret); }
.prev-vide { margin: 6px 0; color: var(--texte-discret); }

.prev-table-enveloppe { overflow-x: auto; }
.prev-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prev-table th, .prev-table td { padding: 4px 8px; text-align: right; vertical-align: middle; border: 1px solid var(--quadrillage); }
.prev-table thead th { font-size: 12px; font-weight: 700; color: #fff; background: var(--vert-fonce); border-color: var(--vert-fonce); }
.prev-table th.prev-gauche, .prev-table td.prev-gauche { text-align: left; }
.prev-table tbody th { font-weight: 400; }
.prev-table tfoot th, .prev-table tfoot td { font-weight: 700; background: #f3f3f3; }
.prev-table td.prev-centre { text-align: center; }

.prev-libelle { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; text-align: left; overflow-wrap: anywhere; }
.prev-etiquette {
  padding: 0 6px;
  font-size: 12px;
  color: #243a5e;
  background: #e5eefb;
  border: 1px solid #b9cdea;
  border-radius: 8px;
}
.prev-etiquette--discrete { color: var(--texte-discret); background: #f3f3f3; border-color: var(--quadrillage); }

.prev-ligne--a_revoir > th, .prev-ligne--a_revoir > td { background: #fffaf0; }
.prev-ligne--ajoutee > th, .prev-ligne--ajoutee > td { background: #f0f7f2; }
.prev-ligne--retiree .prev-libelle, .prev-ligne--retiree .prev-saisie { text-decoration: line-through; }
.prev-ligne--retiree > th, .prev-ligne--retiree > td { color: var(--texte-discret); background: #f3f3f3; }
.prev-ligne--sans-prevu > th, .prev-ligne--sans-prevu > td { color: var(--texte-discret); }

/* Le champ du retenu : une saisie à la main, qui garde la place de sa valeur (le calcul, en grisé) quand elle est vide. */
.prev-saisie-case { display: inline-flex; align-items: center; gap: 4px; }
.prev-saisie {
  width: 84px;
  padding: 3px 6px;
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border: 1px solid #b9b9b9;
  border-radius: 3px;
}
.prev-saisie::placeholder { color: #8c8c8c; }
.prev-saisie:disabled { color: var(--texte); background: #f3f3f3; border-color: #dcdcdc; }
.prev-saisie--invalide { background: var(--rouge-fond); border-color: var(--alerte); }
.prev-saisie:focus-visible { outline: 2px solid var(--vert-moyen); outline-offset: 1px; }
.prev-calcul { padding: 1px 6px; font-size: 12px; }

.prev-ecart--revoir { font-weight: 700; color: var(--ambre); background: var(--ambre-fond) !important; }
.prev-ecart--negatif { color: #b3261e; font-weight: 700; }
.prev-pct--proche { font-weight: 700; color: var(--ambre); }
.prev-pct--depasse { font-weight: 700; color: #b3261e; }

.prev-petit { padding: 1px 8px; font-size: 12px; }
.prev-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.prev-ajout select, .prev-ajout input[type="text"], .prev-correction select, .prev-correction input[type="text"] {
  padding: 3px 6px;
  font: inherit;
  border: 1px solid #b9b9b9;
  border-radius: 3px;
}
.prev-ajout input[type="text"] { width: 90px; text-align: right; }
.prev-erreur { margin: 4px 0 0; color: var(--alerte); }

/* ---------- D'où viennent ces heures ---------- */

.prev-filtre-lignes { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.prev-table--lignes tbody th { white-space: nowrap; }
.prev-table--lignes td.prev-texte { min-width: 200px; text-align: left; overflow-wrap: anywhere; }
.prev-table--lignes td.prev-taches { min-width: 160px; text-align: left; }
.prev-parts-liste { margin: 0; padding: 0; list-style: none; }

.prev-pastille {
  display: inline-block;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: help;
}
.prev-pastille--sure { color: #1e5b3a; background: #e3f2e8; border-color: #b7d9c2; }
.prev-pastille--devinee { color: var(--ambre); background: var(--ambre-fond); border-color: #e8cf8a; }
.prev-pastille--defaut { color: #8c1d14; background: var(--rouge-fond); border-color: #e3b3ae; }
.prev-decision { display: block; font-size: 12px; color: var(--texte-discret); white-space: normal; }

.prev-correction > td { text-align: left; background: #f7faf8; }
.prev-correction__form { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.prev-correction__champ { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prev-parts { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; }
.prev-parts__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prev-parts__ligne input[type="text"] { width: 70px; text-align: right; }
.prev-parts__somme { font-weight: 700; }
.prev-parts__somme--ok { color: #1e7a45; }
.prev-parts__somme--ko { color: #b3261e; }
.prev-correction__boutons { display: flex; flex-wrap: wrap; gap: 6px; }
.prev-correction__erreurs { margin: 0; padding-left: 18px; color: var(--alerte); }

/* ---------- Sous 900 px : la liste passe au-dessus du projet ---------- */

@media (max-width: 899px) {
  html, body { height: auto; }
  .page-previsionnel { display: block; }
  .prev { display: block; }
  .prev__liste { border-right: 0; border-bottom: 1px solid var(--quadrillage); }
  .prev-liste { max-height: 38vh; }
  .prev__detail { padding: 12px 10px 32px; overflow: visible; }
  .recherche { flex: 1 1 100%; }
  .utilisateur { display: none; }
}

/* « Ce projet réclame un devis déjà rattaché » : le bandeau de l'écran du prévisionnel (ecran-previsionnel.js). */
.prev-conflits { display: grid; gap: 6px; margin: 8px 0; padding: 10px 12px; color: #7a5200; background: #fff4d6; border: 1px solid #e8cf8a; border-radius: 6px; }
.prev-conflits p { margin: 0; }
.prev-conflits__phrase { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.prev-conflits__responsable { font-size: 13px; color: var(--texte-discret); }
.prev-fusionne { margin: 8px 0; padding: 10px 12px; background: var(--vert-pale); border: 1px solid #b9d4c4; border-radius: 6px; }