/* ===========================================================================
   EasyCertif — tableau de bord (/app/certif/tableau-de-bord), préfixe .cba-

   Quatre tuiles d'indicateurs (icône sur pastille teintée, chiffre en grand, une
   ligne de précision), un bandeau d'état SFEC sur une ligne, puis deux colonnes de
   listes courtes. Chaque tuile et chaque ligne est un lien vers l'écran qui traite.

   Jetons seulement (docs/couleurs-en-dur.md) : le rôle d'une tuile se pose par
   --cba-fond / --cba-encre sur l'élément, depuis les jetons d'état de la charte.
   Paliers de la convention (docs/conventions-responsive.md) : 1024 et 560 px.
   Sous 1024 px, toute cible fait 44 px de haut (docs/cibles-tactiles.md).
   =========================================================================== */

.appgrid .cba-etat {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: var(--et-tdb-ecart); padding: 8px 12px;
    background: var(--cba-fond, var(--et-succes-bg));
    border: 1px solid var(--cba-bord, var(--et-succes-bord));
    color: var(--cba-encre, var(--et-succes-ink));
    font-size: var(--et-fs-cell);
}
.appgrid .cba-etat > i { font-size: 18px; }
.appgrid .cba-etat-txt { flex: 1 1 260px; min-width: 0; }
.appgrid .cba-etat-txt strong { font-weight: 700; }
.appgrid .cba-etat.est-bloque {
    --cba-fond: var(--et-danger-badge-bg); --cba-bord: var(--et-danger-bord); --cba-encre: var(--et-danger-ink);
}

/* --- Les tuiles ---------------------------------------------------------- */
.appgrid .cba-tuiles {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--et-tdb-gouttiere);
    margin-bottom: var(--et-tdb-ecart);
}
.appgrid .cba-tuile {
    display: flex; align-items: center; gap: 14px;
    padding: var(--et-tdb-bloc-py) var(--et-tdb-bloc-px); min-width: 0;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    border-top: 3px solid var(--cba-encre, var(--et-form-blue));
    color: var(--et-ink); text-decoration: none;
}
.appgrid .cba-tuile:hover { background: var(--et-rang); }
.appgrid .cba-tuile:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }
.appgrid .cba-ico {
    flex: none; display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--cba-fond, var(--et-info-bg));
    color: var(--cba-encre, var(--et-form-blue-encre));
    font-size: 20px;
}
.appgrid .cba-corps { min-width: 0; }
.appgrid .cba-val {
    font-size: 24px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; color: var(--et-ink);
}
.appgrid .cba-val small { font-size: 14px; font-weight: 600; color: var(--et-muted); }
.appgrid .cba-lbl { margin-top: 2px; font-size: var(--et-fs-cell); font-weight: 600; color: var(--et-ink); }
.appgrid .cba-prec { font-size: 12px; color: var(--et-muted); overflow-wrap: anywhere; }
.appgrid .cba-prec.est-alerte { color: var(--cba-encre); font-weight: 600; }

.appgrid .cba-tuile.est-info    { --cba-fond: var(--et-info-bg);         --cba-encre: var(--et-form-blue-encre); }
.appgrid .cba-tuile.est-succes  { --cba-fond: var(--et-succes-bg);       --cba-encre: var(--et-succes-ink); }
.appgrid .cba-tuile.est-alerte  { --cba-fond: var(--et-avertissement-bg); --cba-encre: var(--et-avertissement-ink); }
.appgrid .cba-tuile.est-danger  { --cba-fond: var(--et-danger-badge-bg);  --cba-encre: var(--et-danger-ink); }
.appgrid .cba-tuile.est-neutre  { --cba-fond: var(--et-surface-2);        --cba-encre: var(--et-muted); }

/* --- Les listes courtes -------------------------------------------------- */
.appgrid .cba-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--et-tdb-gouttiere); }
.appgrid .cba-carte {
    background: var(--et-surface); border: 1px solid var(--et-hairline); min-width: 0;
}
.appgrid .cba-carte-tete {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid var(--et-hairline);
    font-size: var(--et-fs-tete); font-weight: 700; color: var(--et-ink);
}
.appgrid .cba-carte-tete > i { color: var(--et-form-blue-encre); }
.appgrid .cba-carte-tete a { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--et-lien); text-decoration: none; }
.appgrid .cba-liste { list-style: none; margin: 0; padding: 0; }
.appgrid .cba-liste > li + li { border-top: 1px solid var(--et-hairline); }
.appgrid .cba-ligne {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px;
    padding: 7px 12px; color: var(--et-ink); text-decoration: none; font-size: var(--et-fs-cell);
}
.appgrid a.cba-ligne:hover { background: var(--et-rang); }
.appgrid .cba-ligne-titre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appgrid .cba-ligne-sous { grid-column: 1; font-size: 12px; color: var(--et-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appgrid .cba-ligne-fin { grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; }
.appgrid .cba-montant { font-variant-numeric: tabular-nums; font-weight: 600; }
.appgrid .cba-ok      { color: var(--et-succes-ink); }
.appgrid .cba-attente { color: var(--et-muted); }
.appgrid .cba-vide { padding: 14px 12px; font-size: var(--et-fs-cell); color: var(--et-muted); }

@media (max-width: 1100px) {
    .appgrid .cba-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .appgrid .cba-colonnes { grid-template-columns: minmax(0, 1fr); }
    .appgrid .cba-ligne { min-height: 44px; }
    .appgrid .cba-carte-tete a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 560px) {
    .appgrid .cba-tuiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .appgrid .cba-tuile { padding: var(--et-tdb-bloc-py) var(--et-tdb-bloc-px); }
}