/* ============================================================================
   EasyProjects — écrans de pilotage (PIL-01 tableau de bord, PIL-02 portefeuille).
   Préfixe .ppl-*. La liste des affaires (PRJ-01) n'a rien ici : elle est un Tableau.

   Ce qui n'est pas dans le gabarit : la grille deux colonnes du tableau de bord, la
   jauge d'avancement tenue dans une cellule, et l'EMPILEMENT des rangées sous 560 px —
   un tableau d'affaires à cinq ou sept colonnes ne tient pas sur 390 px, et une colonne
   qui sort de l'écran est une colonne omise. Chaque cellule y porte alors son libellé
   (data-lbl), et la première (l'affaire) sert de titre à sa rangée.
   ========================================================================== */

.ppl-corps { display: flex; flex-direction: column; gap: var(--et-tdb-gouttiere); }
.ppl-grille { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--et-tdb-gouttiere); align-items: start; }

/* Affaire : nom, puis code et client sur la ligne du dessous. */
.ppl-affaire { display: flex; flex-direction: column; min-width: 0; }
.ppl-affaire-nom { font-weight: 600; color: var(--et-ink); }
.ppl-affaire-sous { font-size: 12px; font-weight: 400; color: var(--et-muted); }
.ppl-risque { margin-left: 6px; color: var(--et-danger-ink); }
.ppl-pct { display: block; font-size: 12px; color: var(--et-muted); }
.ppl-pct.est-negatif { color: var(--et-danger-ink); }
.ppl-code { white-space: nowrap; }
.ppl-pct { white-space: nowrap; }

/* Actions de fin de rangée (modifier, supprimer) : côte à côte, jamais l'une sous l'autre. */
.ppl-actions { display: inline-flex; flex-wrap: nowrap; gap: 4px; }

/* Sélecteur de fiche (ChoixFicheProjet) en « saisie libre » : le champ texte sous la liste. */
.ppl-saisie-libre { margin-top: 6px; }

/* Avancement : la pilule du gabarit (.mx-barre), valeur posée dehors, dans une cellule. */
.ppl-avancement { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.ppl-avancement .mx-barre { display: block; height: 8px; }
.ppl-avancement .mx-barre-jauge { display: block; }
/* Une jauge posée dans une colonne (réalisé d'un contrat, avec son montant dessous) garde sa
   hauteur : sa base flexible de rangée deviendrait une hauteur. */
.ppl-affaire > .ppl-avancement { flex: none !important; width: min(180px, 100%); }

/* « À surveiller » : une ligne par affaire, la ligne entière est le lien. */
.ppl-veille { list-style: none; margin: 0; padding: 0; }
.ppl-veille li + li { border-top: 1px solid var(--et-hairline); }
.ppl-veille a {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; min-height: 44px;
    color: var(--et-ink); font-weight: 400; text-decoration: none;
}
.ppl-veille a:hover { background: var(--et-rang); }
.ppl-veille a:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.ppl-veille i { color: var(--et-danger-ink); margin-top: 2px; }
.ppl-veille-txt { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.ppl-veille-txt b { font-weight: 600; }
.ppl-veille-txt span { color: var(--et-muted); }
.ppl-veille-vide { padding: var(--et-tdb-bloc-py) 16px; font-size: 13px; color: var(--et-succes-ink); }

/* Portefeuille : sélecteur de regroupement, puis une carte par groupe. */
.ppl-regroupe { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--et-muted); }
.ppl-regroupe select { width: auto; min-width: 180px; max-width: 420px; }
.ppl-groupe-titre { flex: none; white-space: nowrap; }
.ppl-groupe-resume { flex: 1 1 240px; min-width: 0; font-size: 12px; color: var(--et-muted); }

/* Une rangée cliquable se lit comme un lien. */
.ppl-tbl tbody tr.est-lien { cursor: pointer; }
.ppl-tbl tbody tr.est-lien:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }

/* Budget (PRJ-03) : la rangée de phase porte ses totaux, ses postes s'indentent dessous. */
.ppl-tbl tr.ppl-rang-phase td { background: var(--et-surface-2); font-weight: 600; }
.ppl-poste { padding-left: 16px; color: var(--et-muted); }

/* Planning des phases (PRJ-04) : un Gantt par phase. La barre et sa part faite sont posées
   en % de la période (left/width calculés) ; la ligne du jour aussi. */
.ppl-gantt { display: flex; flex-direction: column; gap: 10px; padding: var(--et-tdb-bloc-py) 16px; }
.ppl-gantt-rang { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: center; }
.ppl-gantt-lbl { display: flex; flex-direction: column; min-width: 0; }
.ppl-gantt-piste { position: relative; height: 24px; background: var(--et-piste); }
.ppl-gantt-barre { position: absolute; top: 0; bottom: 0; background: var(--et-form-blue-l); }
.ppl-gantt-fait { position: absolute; top: 0; bottom: 0; left: 0; background: var(--et-form-blue); }
.ppl-gantt-fait.est-fait { background: var(--et-succes); }
.ppl-gantt-jour { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--et-danger); }

/* Facturation (FAC-01) : l'émission à gauche, plus étroite, les factures à droite. */
.ppl-grille.est-inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.ppl-emission { display: flex; flex-direction: column; gap: 12px; padding: var(--et-tdb-bloc-py) 16px; }
.ppl-formule {
    display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 8px 10px;
    background: var(--et-surface-2); border: 1px solid var(--et-hairline); font-size: 13px; color: var(--et-muted);
}
.ppl-formule .mono { font-family: var(--et-font-mono); color: var(--et-ink); }
.ppl-lien-vente { font-size: 12px; white-space: nowrap; }

/* Suivi d'avancement (FAC-02) : les trois lectures, pilules du gabarit. */
.ppl-barres { padding: var(--et-tdb-bloc-py) 16px; }
.ppl-barres .mx-barre { display: block; }
.ppl-barres .mx-barre-jauge { display: block; }
.ppl-barres .mx-barre-lbl { flex-basis: 220px; }

/* Paramétrage (PAR-01) : fiche dense, champs numériques à leur largeur. */
.ppl-fiche { padding: var(--et-tdb-bloc-py) 16px; }
.ppl-court { max-width: 160px; }
.ppl-moyen { max-width: 260px; }

/* Saisies dans une cellule (situation de travaux) : un % ou un montant, à leur largeur. */
.ppl-pct-saisie { width: 96px; text-align: right; }
.ppl-montant-saisie { width: 150px; text-align: right; }

/* Réception (BTP-06) : les étapes, une marque par étape — pleine quand elle est faite. */
.ppl-etapes { list-style: none; margin: 0; padding: 4px 16px 8px; }
.ppl-etapes li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--et-hairline); font-size: 13px; }
.ppl-etapes li:last-child { border-bottom: 0; }
.ppl-etapes i { color: var(--et-faint); margin-top: 2px; }
.ppl-etapes li.est-fait i { color: var(--et-succes-ink); }

/* Modifier une affaire (PRJ-02) : l'ajout d'une phase sous la table, la corbeille en fin de rangée. */
.ppl-ajout-phase { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--et-hairline); }
.ppl-ajout-phase .mx-input { flex: 1 1 260px; max-width: 420px; }
.ppl-actions-cellule { width: 1%; white-space: nowrap; }

/* Liste des affaires en cartes (.mx-liste-cartes, sous 1024 px) : un montant y porte son
   libellé, puisque la carte n'a plus d'en-tête de colonne. Invisible sur le bureau. */
.ppl-carte-lbl { display: none; }

@media (max-width: 1100px) {
    .ppl-grille, .ppl-grille.est-inverse { grid-template-columns: minmax(0, 1fr); }
}

/* Tablette : la table garde ses colonnes, mais ses textes passent à la ligne et la jauge
   rétrécit — à 768 px, le portefeuille sortait de 12 à 30 px de sa carte. */
@media (max-width: 1024px) {
    .ppl-tbl td, .ppl-tbl th { white-space: normal; }
    .ppl-avancement { min-width: 96px; }
    .mx-liste-cartes .ppl-carte-lbl { display: inline; font-family: var(--et-font); color: var(--et-muted); }
    .mx-liste-cartes .ppl-avancement { min-width: 160px; }
    .mx-liste-cartes .ppl-pct { display: inline-block; margin-left: 6px; }
    /* Sur une carte, un montant se lit après son libellé, pas calé à droite de la carte. */
    .mx-liste-cartes td:has(.ppl-carte-lbl) { text-align: left; }
}

/* EMPILEMENT des rangées : sous 560 px pour toute table .ppl-tbl, dès 1024 px pour une table
   trop dense pour la tablette (.est-dense : sept colonnes de montants, le reste à faire par
   phase). Chaque cellule y porte son libellé (data-lbl) ; la première sert de titre. */
@media (max-width: 1024px) {
    .ppl-tbl.est-dense thead { display: none; }
    .ppl-tbl.est-dense, .ppl-tbl.est-dense tbody, .ppl-tbl.est-dense tfoot, .ppl-tbl.est-dense tr, .ppl-tbl.est-dense td { display: block; width: 100%; }
    .ppl-tbl.est-dense tr { padding: 8px 12px; border-bottom: 1px solid var(--et-hairline); }
    .ppl-tbl.est-dense td { border: 0 !important; padding: 2px 0 !important; text-align: left !important; }
    .ppl-tbl.est-dense td[data-lbl] { display: flex; justify-content: space-between; gap: 12px; }
    .ppl-tbl.est-dense td[data-lbl]::before {
        content: attr(data-lbl); flex: none; font-size: 12px; font-weight: 600; color: var(--et-muted);
    }
    .ppl-tbl.est-dense td[data-lbl] > * { text-align: right; }
    .ppl-tbl.est-dense .ppl-pct { display: inline; margin-left: 6px; }
    .ppl-tbl.est-dense .ppl-avancement { min-width: 0; flex: 0 1 180px; }
}

@media (max-width: 1024px) {
    .ppl-tbl.est-dense td.ppl-vide-carte { display: none; }
    /* Poste du budget empilé : le nom, puis budgété · engagé · écart sur UNE ligne de trois
       colonnes, libellé au-dessus du chiffre — quatre lignes par poste faisaient d'une affaire
       à trois phases une page de 3 000 px sur un téléphone. */
    .ppl-tbl.est-dense tr.ppl-rang-poste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
    .ppl-tbl.est-dense tr.ppl-rang-poste > td:first-child { grid-column: 1 / -1; }
    .ppl-tbl.est-dense tr.ppl-rang-poste > td[data-lbl] { flex-direction: column; justify-content: flex-start; gap: 0; }
    .ppl-tbl.est-dense tr.ppl-rang-poste > td[data-lbl] > * { text-align: left; }
}

@media (max-width: 640px) {
    .ppl-emission .mx-btn-cta { width: 100%; justify-content: center; white-space: normal; }
    .ppl-barres .mx-barre-lbl { flex-basis: 120px; white-space: normal; }
    .ppl-gantt-rang { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (max-width: 559px) {
    .ppl-tbl td.ppl-vide-carte { display: none; }
    .ppl-tbl thead { display: none; }
    .ppl-tbl, .ppl-tbl tbody, .ppl-tbl tfoot, .ppl-tbl tr, .ppl-tbl td { display: block; width: 100%; }
    .ppl-tbl tr { padding: 8px 12px; border-bottom: 1px solid var(--et-hairline); }
    .ppl-tbl td { border: 0 !important; padding: 2px 0 !important; text-align: left !important; }
    .ppl-tbl td[data-lbl] { display: flex; justify-content: space-between; gap: 12px; }
    .ppl-tbl td[data-lbl]::before {
        content: attr(data-lbl); flex: none; font-size: 12px; font-weight: 600; color: var(--et-muted);
    }
    .ppl-tbl td[data-lbl] > * { text-align: right; }
    .ppl-tbl .ppl-pct { display: inline; margin-left: 6px; }
    .ppl-avancement { min-width: 0; flex: 0 1 180px; }
}

/* Le sélecteur d'en-tête (« Regrouper par », « Affaire ») prend la largeur de sa plus longue
   option : sur un téléphone, il prend la ligne et s'y tient. */
@media (max-width: 640px) {
    .ppl-regroupe { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; max-width: 100%; }
    .ppl-regroupe select { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; }
}

/* L'EN-TÊTE D'UNE COLONNE DE MONTANT SE RANGE À DROITE, comme ses montants. `.mx-tbl th`
   (gabarit) pose text-align: left avec deux sélecteurs et l'emportait sur `.pjl-droite`
   seul : sur les écrans EasyProjects, les en-têtes des montants restaient à gauche de leur
   colonne (relevé le 2026-10-05). */
.mx-tbl th.pjl-droite { text-align: right; }