/*  ecran-parametres-compta.css — CPT-05, « Paramètres & contreparties ».

    Préfixe `.p5-`, celui de la maquette
    (docs/modeles/design_handoff_easycompta/maquettes/CPT-05-Refonte-parametres-contreparties.dc.html).
    Une feuille pour un écran (§6.3), aucune couleur littérale : tout passe par
    les jetons `--et-*`.

    LE PLAN DE LA MAQUETTE, ET CE QU'IL RÈGLE
      Un rail de groupes à gauche, un rang par réglage à droite, la simulation en
      pied. Le rang est une GRILLE À COLONNES FIXES et non une carte posée dans un
      flux : c'est ce qui fait qu'on descend une colonne d'états plutôt que de
      chercher quinze pastilles là où la grille les a mises.

    Sommaire
      1 · Les bandeaux de tête          5 · Les rangs de réglage
      2 · La bande d'indicateurs        6 · Les déversements
      3 · Le corps à deux panneaux      7 · La cohérence
      4 · Le rail de groupes            8 · La simulation
                                        9 · Les largeurs, et les paliers
*/

/* ---------------------------------------------------------------------------
   1 · LES BANDEAUX DE TÊTE

   Deux, et jamais plus : les valeurs par défaut qui ne sont pas enregistrées, et
   le nombre de points bloquants. Ils sont EN TÊTE et non dans le groupe Cohérence
   parce qu'ils s'adressent à celui qui remplit le formulaire, qui n'ira pas lire
   l'onglet des contrôles avant d'avoir un problème.
   ------------------------------------------------------------------------- */
.appgrid .p5-bandeau {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--et-hairline);
    font-size: var(--et-fs-cell);
    font-weight: 600;
}

.appgrid .p5-bandeau > i { flex-shrink: 0; }
.appgrid .p5-bandeau.est-attente { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.appgrid .p5-bandeau.est-bloquant { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

/* La pastille d'état, du réglage jusqu'au bandeau de l'en-tête d'écran. Coins
   carrés compris : une pastille de STATUT garde son arrondi, celle-ci désigne un
   état de réglage, pas un statut d'objet. */
.appgrid .p5-puce {
    display: inline-block;
    padding: 1px 6px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--et-neutre-bg);
    color: var(--et-neutre);
}

.appgrid .p5-puce.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.appgrid .p5-puce.est-attente { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.appgrid .p5-puce.est-bloquant { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.appgrid .p5-puce.est-neutre { background: var(--et-neutre-bg); color: var(--et-neutre); }

/* La date du dernier enregistrement, dans le bandeau d'écran, à côté des boutons. */
.appgrid .p5-maj { font-size: 12px; color: var(--et-muted); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   2 · LA BANDE D'INDICATEURS

   Le DESSIN de la vignette est celui du module (easycompta-vignette.css), où
   .p5-fait est déclarée avec les autres : quatre indicateurs recopiés ici
   auraient divergé au premier réglage de la charte. Seul reste ci-dessous ce
   qui appartient à cet écran — rien, aujourd'hui.
   ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   3 · LE CORPS À DEUX PANNEAUX

   Le rail et les réglages s'étirent à la même hauteur (align-items: stretch) :
   le filet qui les sépare doit descendre jusqu'en bas, sinon les deux panneaux
   se lisent comme deux blocs empilés au hasard.

   Pas de défilement interne : la page défile déjà. Deux ascenseurs imbriqués
   font perdre le rail dès qu'on descend dans les réglages.
   ------------------------------------------------------------------------- */
.appgrid .p5-corps {
    display: flex;
    align-items: stretch;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
}

.appgrid .p5-champs {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--et-surface-2);
}

.appgrid .p5-champs-tete {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--et-surface);
    border-bottom: 2px solid var(--et-filet-fort);
}

.appgrid .p5-champs-tete .t { font-size: var(--et-fs-tete); font-weight: 700; color: var(--et-ink); }
.appgrid .p5-champs-tete .n { font-size: 12px; color: var(--et-muted); }
.appgrid .p5-champs-tete .fin { margin-left: auto; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }

.appgrid .p5-champs-corps { flex: 1 1 auto; min-height: 0; }

/* Un bloc qui n'est pas un rang — le pilotage des lectures de justificatifs. */
.appgrid .p5-bloc-libre { padding: 12px 14px; border-top: 1px solid var(--et-hairline); }

/* ---------------------------------------------------------------------------
   4 · LE RAIL DE GROUPES

   Le filet gauche porte la sélection, comme partout dans la charte : un fond
   seul se confond avec le survol, et le survol doit rester lisible sur l'entrée
   active. La pastille de droite dit ce qui manque au groupe — c'est elle qui
   permet de choisir où aller sans ouvrir les huit.
   ------------------------------------------------------------------------- */
.appgrid .p5-groupes {
    flex: 0 0 236px;
    background: var(--et-surface);
    border-right: 1px solid var(--et-hairline);
}

.appgrid .p5-groupe {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--et-rang);
    border-left: 3px solid transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.appgrid .p5-groupe:hover { background: var(--et-surface-3); }
.appgrid .p5-groupe.est-actif { background: var(--et-tint); border-left-color: var(--et-form-blue); }
.appgrid .p5-groupe:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }

.appgrid .p5-groupe > i { flex-shrink: 0; font-size: 14px; color: var(--et-muted); }
.appgrid .p5-groupe.est-actif > i { color: var(--et-form-blue); }
.appgrid .p5-groupe .lbl { min-width: 0; flex: 1; }
.appgrid .p5-groupe .lbl .t { display: block; font-size: var(--et-fs-cell); font-weight: 600; color: var(--et-ink); }
.appgrid .p5-groupe .lbl .n { display: block; font-size: 12px; line-height: 1.3; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   5 · LE RANG DE RÉGLAGE

   Trois colonnes de la maquette — le nom, le contrôle, l'état — et une quatrième
   ligne, pleine largeur, pour l'aide. La maquette la logeait dans la colonne
   d'état de 120 px ; nos phrases y nomment un traitement et son écran, et n'y
   tiendraient pas. Elles prennent donc la ligne entière : c'est la seule chose
   qu'on lit vraiment sur cet écran.

   Le filet gauche porte l'état, défini ou non. Une liste déroulante vide
   ressemble à une liste déroulante remplie tant qu'on ne la regarde pas.
   ------------------------------------------------------------------------- */
.appgrid .p5-rang {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px 132px;
    grid-template-areas:
        "nom ctl etat"
        "aide aide aide";
    align-items: center;
    gap: 4px 12px;
    padding: 9px 14px;
    background: var(--et-surface);
    border-bottom: 1px solid var(--et-rang);
    border-left: 3px solid transparent;
}

/* Le filet est un TRAIT, pas une encre : il prend donc le rang « marque » de la
   charte — la couleur d'état telle quelle pour le vert (3,30:1 au seuil
   graphique de 3:1), et --et-avertissement-mark pour l'ambre, qui ne le passe
   pas (2,15:1). Voir docs/couleurs-en-dur.md. */
.appgrid .p5-rang.est-defini { border-left-color: var(--et-succes); }
.appgrid .p5-rang.est-manquant { border-left-color: var(--et-avertissement-mark); }

.appgrid .p5-rang .nom { grid-area: nom; min-width: 0; }
.appgrid .p5-rang .nom .t { display: block; font-size: var(--et-fs-cell); color: var(--et-ink); }
.appgrid .p5-rang .nom .cle { display: block; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }

.appgrid .p5-rang .ctl { grid-area: ctl; display: flex; align-items: center; gap: 8px; min-width: 0; }
.appgrid .p5-rang .ctl .unite { font-size: 12px; color: var(--et-muted); white-space: nowrap; }
.appgrid .p5-rang .ctl .form-check-label { font-size: 12px; color: var(--et-muted); }

.appgrid .p5-rang .etat {
    grid-area: etat;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.appgrid .p5-rang .aide {
    grid-area: aide;
    font-size: 12px;
    line-height: 1.35;
    color: var(--et-muted);
}

/* Le compte usuel en un clic : un bouton de barre, réduit à la taille d'une
   pastille — il vit dans la colonne d'état, pas dans une barre d'outils. */
.appgrid .p5-usuel {
    height: 22px;
    padding: 0 7px;
    font-family: var(--et-font-mono);
    font-size: 12px;
}

.appgrid .p5-usuel-absent {
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-faint);
    white-space: nowrap;
}

/* La note de bas de groupe — le repère SYSCOHADA, le rappel sur le déversement
   direct. Un fond neutre, jamais une alerte : elle n'annonce rien. */
.appgrid .p5-note {
    margin: 12px 14px;
    padding: 9px 12px;
    background: var(--et-neutre-bg);
    font-size: 12px;
    line-height: 1.5;
    color: var(--et-ink);
}

/* Le cadre d'attente, le temps que les paramètres arrivent. */
.appgrid .p5-cadre { background: var(--et-surface); border: 1px solid var(--et-hairline); }

/* ---------------------------------------------------------------------------
   6 · LES DÉVERSEMENTS

   La table est celle du dépôt (.tbl-* de easytime-shell.css) : elle apporte la
   tête d'ardoise, la zébrure et le défilement horizontal sans que cet écran les
   réécrive.
   ------------------------------------------------------------------------- */
.appgrid .p5-champs-corps > .tbl-cadre { margin: 12px 14px; }

.appgrid .p5-barre-t {
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--et-table-head-encre);
}

.appgrid .p5-src { font-weight: 600; }
.appgrid .p5-src-aide { font-size: 12px; line-height: 1.3; color: var(--et-muted); }
.appgrid .p5-src-absent { margin-top: 3px; font-size: 12px; color: var(--et-danger-ink); }

/* ---------------------------------------------------------------------------
   7 · LA COHÉRENCE

   Un constat par carte plutôt qu'une ligne de tableau : le constat et l'action
   sont deux phrases, et une phrase dans une cellule de tableau se coupe là où la
   colonne finit. Le filet gauche porte la gravité.
   ------------------------------------------------------------------------- */
.appgrid .p5-controles-tete {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--et-muted);
    border-bottom: 1px solid var(--et-hairline);
}

.appgrid .p5-anomalie {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 14px;
    padding: 11px 13px;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    border-left: 3px solid var(--et-neutre);
}

.appgrid .p5-anomalie.est-bloquant { border-left-color: var(--et-danger); }
.appgrid .p5-anomalie.est-attente { border-left-color: var(--et-avertissement-mark); }
.appgrid .p5-anomalie > i { flex-shrink: 0; font-size: 14px; color: var(--et-muted); }
.appgrid .p5-anomalie .corps { flex: 1; min-width: 0; }
.appgrid .p5-anomalie .ligne-t { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.appgrid .p5-anomalie .dom { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .p5-anomalie .msg { margin-top: 4px; font-size: var(--et-fs-cell); line-height: 1.45; color: var(--et-ink); }
.appgrid .p5-anomalie .act { margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--et-muted); }
.appgrid .p5-anomalie > .mx-btn { flex-shrink: 0; white-space: nowrap; }

.appgrid .p5-vide { padding: 32px 14px; text-align: center; }
.appgrid .p5-vide > i { font-size: 26px; color: var(--et-succes-ink); }
.appgrid .p5-vide .t { margin-top: 8px; font-weight: 600; color: var(--et-succes-ink); }
.appgrid .p5-vide .n { font-size: 12px; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   8 · LA SIMULATION

   Elle est SÉPARÉE du groupe par le filet fort : ce n'est pas un réglage de
   plus, c'est la preuve de ceux du dessus. Une ligne dont le compte manque se
   distingue — c'est elle qui déséquilibre la pièce, et c'est tout le propos.
   ------------------------------------------------------------------------- */
.appgrid .p5-simulation {
    padding: 14px;
    background: var(--et-surface);
    border-top: 2px solid var(--et-filet-fort);
}

.appgrid .p5-simulation-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.appgrid .p5-simulation-tete .t {
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--et-table-head-encre);
}
.appgrid .p5-simulation-tete .n { font-size: 12px; color: var(--et-muted); }

.appgrid .p5-compte, .appgrid .p5-montant { font-family: var(--et-font-mono); }
.appgrid .p5-compte { font-weight: 600; }

/* La zébrure de .tbl reprendrait le dessus sur un fond posé sur la rangée :
   la ligne manquante se pose donc sur la CELLULE, et avec le poids qu'il faut. */
.appgrid .tbl tbody tr.p5-ligne-manquante td {
    background: var(--et-danger-badge-bg);
    color: var(--et-danger-ink);
}

.appgrid .p5-verdict {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 9px;
    padding: 8px 12px;
    font-size: var(--et-fs-cell);
    font-weight: 600;
    line-height: 1.45;
}

.appgrid .p5-verdict > i { flex-shrink: 0; }
.appgrid .p5-verdict.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.appgrid .p5-verdict.est-ko { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

/* ---------------------------------------------------------------------------
   9 · LES LARGEURS, ET LES PALIERS

   Les largeurs vivaient EN DUR dans le Razor (style="width:170px" sur chaque
   <th>, max-width sur trois champs) ; une largeur dans une page est ce que
   docs/conventions-responsive.md interdit, et c'est ici qu'un palier peut les
   relâcher. Débit et crédit sont un même rôle, le montant.
   ------------------------------------------------------------------------- */
.appgrid .p5-select-compte { font-family: var(--et-font-mono); font-size: 12px; }
.appgrid .p5-champ-court { max-width: 110px; text-align: right; font-family: var(--et-font-mono); }
.appgrid .p5-champ-taux { max-width: 110px; text-align: right; font-family: var(--et-font-mono); }
.appgrid .p5-champ-pays { max-width: 90px; font-family: var(--et-font-mono); }
.appgrid .p5-champ-devise { max-width: 110px; }
.appgrid .p5-champ-plafond { max-width: 130px; text-align: right; font-family: var(--et-font-mono); }
.appgrid .p5-champ-alerte { max-width: 100%; }

.appgrid .p5-col-module { width: 170px; }
.appgrid .p5-col-journal { width: 170px; }
.appgrid .p5-col-statut { width: 190px; }
.appgrid .p5-col-periode { width: 130px; }
.appgrid .p5-col-actif { width: 80px; }

.appgrid .p5-col-compte { width: 130px; }
.appgrid .p5-col-montant { width: 140px; }

/* Palier 1024 px — les deux panneaux s'empilent, comme dans la maquette, et le
   rang perd sa colonne d'état, qui repasse sous le contrôle. Sous 1024 px, un
   groupe du rail reste une cible de 44 px (docs/cibles-tactiles.md) ; le bouton
   « poser » du compte usuel aussi, et il ne rétrécit jamais. */
@media (max-width: 1024px) {
    .appgrid .p5-corps { display: block; }
    .appgrid .p5-groupes { width: 100%; border-right: 0; border-bottom: 2px solid var(--et-filet-fort); }
    .appgrid .p5-groupe { min-height: 44px; }

    .appgrid .p5-rang {
        grid-template-columns: minmax(0, 1fr) 200px;
        grid-template-areas:
            "nom ctl"
            "etat etat"
            "aide aide";
    }

    .appgrid .p5-rang .etat { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
    .appgrid .p5-usuel { min-height: 44px; height: auto; }
}

/* Palier 720 px — le contrôle passe sous son libellé : à cette largeur, une
   colonne de 200 px pour un <select> de comptes ne laisse plus rien au nom. */
@media (max-width: 720px) {
    .appgrid .p5-rang {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "nom" "ctl" "etat" "aide";
        align-items: start;
    }

    .appgrid .p5-champ-alerte, .appgrid .p5-select-compte { max-width: 100%; }
}