/*  ecran-tableau-flux.css — SYS-03.

    LE PRÉFIXE DE LA MAQUETTE EST `.fx-`, ET IL EST PRIS
    C'est celui du modèle de fiche historique (wwwroot/css/fiche.css, 99 règles,
    ~40 écrans), que la charte cite nommément dans CLAUDE.md. D'où `.tf-`.
    Cinquième déviation du chantier, et la deuxième dont la cause est le socle.

    Le commun du lot (contrôles, variation, détail collant) vit dans
    etats-financiers.css ; la bande `.tf-fait` dans easycompta-vignette.css. */

/* 1 · La cascade des bornes. Ce n'est pas un graphique décoratif : c'est le rapport
      entre les barres qui répond à « l'exploitation finance-t-elle
      l'investissement », et ce rapport ne se lit pas dans une colonne. */
.tf-cascade {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tf-etage {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 130px;
    align-items: center;
    gap: 10px;
}

.tf-etage .lib {
    font-size: var(--et-fs-cell);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-etage .barre {
    height: 14px;
    background: var(--et-piste);
}

/* La couleur du remplissage vient du Razor : elle dit le SENS du flux
   (encaissement ou décaissement), qui est un état, non une mise en page. */
.tf-etage .rempli {
    display: block;
    height: 100%;
}

.tf-etage .mt {
    font-family: var(--et-font-mono);
    font-size: var(--et-fs-cell);
    font-weight: 600;
    text-align: right;
}

/* 2 · Les repères du tableau. */
.tf-section td {
    background: var(--et-surface-2);
    font-weight: 600;
    font-size: var(--et-fs-cell);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--et-muted);
    border-top: 1px solid var(--et-hairline);
}

.tf-total td {
    font-weight: 600;
    border-top: 1px solid var(--et-hairline);
}

/* 3 · Paliers. Échelle retenue de docs/conventions-responsive.md. */
@media (max-width: 720px) {
    .tf-etage { grid-template-columns: minmax(0, 1fr) 110px; }
    .tf-etage .barre { grid-column: 1 / -1; }
}

/* 4 · Les largeurs de colonnes et du filtre d'exercice. Elles vivaient EN DUR dans le
      Razor (style="width:140px" sur chaque <th>) ; une largeur dans une page est ce que
      docs/conventions-responsive.md interdit, et c'est ici qu'un palier peut les
      relâcher. Les td suivent leur th. La largeur de la barre de cascade, elle, reste
      dans le Razor : elle est calculée (@Largeur), c'est une donnée, pas une mise en page. */
.tf-champ-exercice { max-width: 200px; }

.tf-col-ref { width: 60px; }
.tf-col-exercice { width: 140px; }
.tf-col-variation { width: 105px; }