/* ===========================================================================
   ÉCRAN PARAMÈTRES DE COMPTABILISATION — catégories, matrice, codes taxe (.cmp-*)
   Components/Pages/Compta/ParametresComptabilisation.razor.

   UNE FEUILLE POUR CET ÉCRAN, chargée après modele-erp.css. Presque tout vient
   du gabarit : l'en-tête (.ecran-tete), le sélecteur segmenté (.mx-seg), les
   trois listes (.tbl-*), les modales, le rail d'onglets en modale
   (.mx-modale-fiche), la bande de faits (.mx-faits) et la grille dense (.mx-*).
   Ne restent ici que ce qu'aucun autre écran ne demande — le panneau de
   simulation, la pastille de rang, le numéro de compte en chasse fixe, et trois
   mesures de la fiche du code taxe.

   Une classe qui servirait un deuxième écran remonterait dans le gabarit
   (modele-erp.css, section 11) — jamais l'inverse.

   AUCUNE COULEUR LITTÉRALE : tout vient des jetons d'easytech-theme.css, donc
   le thème sombre suit sans qu'on réécrive une règle.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. LES SÉLECTEURS — filtre de domaine dans la barre d'outils, et les quatre
   critères de la simulation. Calés sur la hauteur du champ de recherche du
   gabarit (31 px) : deux commandes voisines de hauteurs différentes dans une
   même barre se lisent comme deux barres.
   --------------------------------------------------------------------------- */

.cmp-select {
    height: 31px;
    padding: 0 8px;
    border: 1px solid var(--et-form-border);
    border-radius: 0;
    background: var(--et-surface);
    color: var(--et-ink);
    font-family: inherit;
    font-size: 13px;
    max-width: 240px;
}
.cmp-select:focus {
    border-color: var(--et-form-blue);
    outline: none;
    box-shadow: 0 0 0 2px var(--et-focus);
}

/* ---------------------------------------------------------------------------
   2. LE PANNEAU DE SIMULATION — ce qui rend la matrice défendable.

   Il vit SOUS LA LISTE et non dans une modale : on l'ouvre une fois et on change
   les critères en regardant les lignes bouger au-dessus. Une modale obligerait à
   la fermer pour relire la matrice, c'est-à-dire à mémoriser ce qu'on vient de
   voir — exactement ce qu'un paramétrage à jokers rend impossible.
   --------------------------------------------------------------------------- */

.cmp-simu {
    margin-top: 14px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface);
}

.cmp-simu-tete {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
}
.cmp-simu-tete .bi { color: var(--et-muted); }
.cmp-simu-titre { font-size: 14px; font-weight: 600; }

.cmp-simu-champs {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
}

/* Les intitulés sont AU-DESSUS et non à droite comme dans une fiche : ce n'est
   pas un formulaire d'objet mais une barre d'outils, et ses critères se lisent de
   gauche à droite dans l'ordre de la clé — domaine, article, tiers, date. */
.cmp-simu-champ { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmp-simu-lbl { font-size: 12px; color: var(--et-muted); }
.cmp-simu-btn { align-self: flex-end; }

/* LE VERDICT, et non un simple nombre. « 701090 » ne se discute pas ;
   « 701090, ligne 12, rang 2 » se vérifie. */
.cmp-simu-verdict {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 14px 12px;
}
.cmp-simu-compte {
    font-family: var(--et-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
}
.cmp-simu-expl { font-size: 13px; color: var(--et-muted); }

/* La ligne retenue parmi les candidates. Les autres portent .tbl-terne du
   gabarit : elles restent lisibles — on veut savoir POURQUOI elles ont perdu —
   mais elles ne se disputent pas le regard avec celle qui gagne. */
.cmp-retenue { font-weight: 600; }

/* ---------------------------------------------------------------------------
   3. LE RANG ET LE COMPTE.
   --------------------------------------------------------------------------- */

/* Le rang est un ORDRE, pas une quantité : un jeton carré le dit mieux qu'un
   nombre aligné à droite au milieu de montants. */
.cmp-rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    background: var(--et-surface-2);
    border: 1px solid var(--et-hairline);
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 700;
}

/* UN COMPTE EST UN NUMÉRO, donc en chasse fixe — même règle que les matricules
   et les montants, et que l'écran du catalogue. */
.cmp-compte {
    font-family: var(--et-font-mono);
    font-variant-numeric: tabular-nums;
}
.cmp-compte-saisie {
    max-width: 170px;
    font-family: var(--et-font-mono);
    font-variant-numeric: tabular-nums;
}

/* NOMBRE + UNITÉ, comme au catalogue : l'unité est une note posée à côté du
   champ, pas un contrôle collé à lui. */
.cmp-avec-unite { display: flex; align-items: center; gap: 8px; }
.cmp-unite { font-size: 13px; color: var(--et-muted); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   3 bis. LA FICHE DU CODE TAXE — ce qui lui est propre.

   Presque tout vient du gabarit : le rail (.mx-rail), la modale à fiche
   (.mx-modale-fiche), la bande de faits (.mx-faits) et la grille dense
   (.mx-form/.mx-champ). Ne restent ici que trois mesures qu'aucun autre écran
   ne demande. Elles répondent aux mêmes questions que leurs jumelles de
   ecran-taux-taxe.css, sur l'autre fiche fiscale — mais une classe ne monte
   dans le gabarit QUE si deux écrans la partagent vraiment, et deux feuilles
   d'écran ne se citent jamais l'une l'autre : la duplication est ici moins
   chère que le couplage.
   --------------------------------------------------------------------------- */

/* LE PAYS ET SON SEUL GESTE, sur une même ligne : le champ grisé ne dit pas ce
   qui le débloque, le bouton d'à côté le dit. Ils passent à la ligne quand la
   colonne de valeur se resserre — jamais un bouton tronqué. */
.cmp-pays { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-pays-champ { max-width: 96px; text-transform: uppercase; }

/* LES LISTES DÉROULANTES DE LA FICHE portent « 4431 — TVA facturée sur ventes »
   ou « TVA_TAUX_NORMAL — Taux normal de TVA » : la largeur de saisie d'un
   numéro (170 px) tronquait le libellé, c'est-à-dire la moitié qui permet de
   choisir. */
.cmp-combo { max-width: 340px; font-variant-numeric: tabular-nums; }

/* Le compte de points à corriger, au ras du bouton d'engagement : c'est au
   moment de cliquer qu'il sert. */
.cmp-pied-err { font-size: 12px; color: var(--et-danger-ink); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   4. PALIERS — docs/conventions-responsive.md.
   Recette à 390 / 768 / 1280 / 1600 px, paliers pris dans l'échelle retenue.
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
    .cmp-select { max-width: none; }
    /* Les listes de la fiche suivent la colonne de valeur au lieu de la déborder. */
    .cmp-combo { max-width: none; }
    .cmp-simu-champ { flex: 1 1 180px; }
    .cmp-simu-btn { flex: 1 1 100%; }
}

@media (max-width: 560px) {
    .cmp-avec-unite { flex-wrap: wrap; }
    /* Le bouton qui ramène un code sous le pays de la société prend la ligne
       entière plutôt que de se tronquer : c'est un geste, pas une décoration. */
    .cmp-pays > .mx-btn { flex: 1 1 100%; justify-content: center; }
}

/* RÈGLE TACTILE (lot 02, docs/cibles-tactiles.md) : sous 1024 px, aucune cible
   interactive ne descend sous 44 px, et une cible ne rétrécit jamais. Les champs
   du gabarit sont déjà repris par lot02 ; les sélecteurs de cet écran lui sont
   propres, donc à sa charge. */
@media (max-width: 1024px) {
    .cmp-select { height: 44px; }
    /* Les champs de la fiche relèvent de .mx-modale-fiche, que le gabarit reprend
       déjà ; ce bouton lui échappe — il vit dans une rangée propre à cet écran. */
    .cmp-pays > .mx-btn { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   LES LARGEURS DES CHAMPS DE FICHE. Elles vivaient EN DUR dans le Razor
   (style="max-width:200px" sur chaque .mx-input / .mx-select) ; une largeur dans
   une page est ce que docs/conventions-responsive.md interdit, et c'est ici qu'un
   palier peut les relâcher. Nommées par rôle, jamais par largeur : deux champs
   du même rôle et de même mesure partagent la classe (le code d'une catégorie et
   celui d'un code taxe) ; même rôle, mesure différente → deux classes (la vigueur
   d'une ligne de matrice, celle d'un code taxe).
   --------------------------------------------------------------------------- */
.cmp-champ-code { max-width: 200px; }
.cmp-champ-portee { max-width: 240px; }
.cmp-champ-ordre { max-width: 120px; }
.cmp-champ-domaine { max-width: 260px; }
.cmp-champ-sens { max-width: 260px; }
.cmp-champ-section { max-width: 160px; }
.cmp-champ-source-taux { max-width: 320px; }
.cmp-champ-bareme { max-width: 300px; }
.cmp-champ-taux { max-width: 140px; }
.cmp-champ-date { max-width: 200px; }
.cmp-champ-date-code { max-width: 190px; }