/* ===========================================================================
   ÉCRAN TABLE DES TAUX DE TAXE (.tx-*)
   Components/Pages/Tax/TauxTaxe.razor — référentiel db/1390.

   UNE FEUILLE POUR CET ÉCRAN, chargée après modele-erp.css. Presque tout vient
   du gabarit : l'en-tête (.ecran-tete), la liste (.tbl-*), 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 — la barre de
   filtres, quatre mesures de la fiche, le panneau de simulation, et les jetons
   qui rendent une cascade lisible d'un coup d'œil.

   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 — filtres de la barre d'outils et critères de 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.
   --------------------------------------------------------------------------- */

.tx-select,
.tx-champ-nb {
    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: 220px;
}
.tx-select:focus,
.tx-champ-nb:focus {
    border-color: var(--et-form-blue);
    outline: none;
    box-shadow: 0 0 0 2px var(--et-focus);
}

.tx-champ-nb {
    text-align: right;
    font-variant-numeric: tabular-nums;
    max-width: 160px;
}

/* LECTURE SEULE : GRISÉ, ET NON SIMPLEMENT INERTE. Le gabarit grise déjà .mx-input
   [readonly] ; les sélecteurs de cet écran lui sont propres, donc à sa charge. Un champ
   qui refuse la frappe sans le dire se lit comme un écran cassé — on retape, on regarde
   ailleurs, on finit par appeler. Il reste LISIBLE : c'est une valeur imposée, pas une
   valeur absente. */
.tx-select[readonly],
.tx-select.tx-fige {
    background: var(--et-surface-3);
    border-color: var(--et-hairline);
    color: var(--et-muted);
    cursor: default;
}

.tx-filtres {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.tx-filtre { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tx-lbl { font-size: 12px; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   2. LES JETONS DE LISTE.
   --------------------------------------------------------------------------- */

/* UN CODE EST UN IDENTIFIANT, donc en chasse fixe — même règle que les comptes
   et les matricules. */
.tx-code,
.tx-compte {
    font-family: var(--et-font-mono);
    font-variant-numeric: tabular-nums;
}

.tx-compte-saisie {
    max-width: 170px;
    font-family: var(--et-font-mono);
    font-variant-numeric: tabular-nums;
}

/* L'ORDRE est un rang, pas une quantité : un jeton carré le dit mieux qu'un
   nombre aligné à droite au milieu de taux. */
.tx-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;
}

/* UNE CASCADE SE VOIT, ou elle ne se voit jamais. Une taxe assise sur une autre
   affiche le CODE de son assiette, en chasse fixe comme tout identifiant : c'est
   l'information qui manque quand un total surprend, et elle n'apparaît nulle part
   ailleurs. Les autres assiettes restent en texte courant — la différence de
   fonte suffit à séparer un renvoi d'un libellé. */
.tx-cascade {
    font-family: var(--et-font-mono);
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
   2 bis. LA FICHE — ce qui lui est propre.

   Presque tout vient du gabarit : le rail (.mx-rail), les panneaux, la grille
   dense (.mx-form/.mx-champ), la bande de faits (.mx-faits) et la modale à
   fiche (.mx-modale-fiche). Ne restent ici que quatre mesures qu'aucun autre
   écran ne demande.
   --------------------------------------------------------------------------- */

/* 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é. */
.tx-pays { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tx-pays-champ { max-width: 96px; text-transform: uppercase; }

/* LA VALEUR ET SON UNITÉ ne se séparent pas : « 18 » sans le « % » à côté ne
   veut rien dire, et l'unité change avec le type. */
.tx-valeur { display: flex; align-items: center; gap: 8px; }
.tx-valeur-champ { max-width: 160px; }
.tx-valeur-unite { font-size: 12px; color: var(--et-muted); }

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

/* Le pays, à côté du code, dans la tête de la fiche — un code de taxe n'est
   unique QUE sous son pays. */
.tx-titre-pays {
    margin-left: 8px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--et-muted);
}

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

/* ---------------------------------------------------------------------------
   3. LE PANNEAU DE SIMULATION — ce qui rend le référentiel 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 le référentiel, c'est-à-dire à mémoriser ce qu'on vient
   de voir — exactement ce qu'un paramétrage à jokers, à cascades et à dates rend
   impossible.
   --------------------------------------------------------------------------- */

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

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

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

/* LE VERDICT, et non un simple nombre. « 180 000 » ne se discute pas ;
   « 18 % de la base hors taxes (1 000 000) » se vérifie. */
.tx-simu-corps { padding: 0 14px 12px; }

.tx-simu-totaux {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 10px;
}
.tx-simu-total { display: flex; flex-direction: column; gap: 2px; }
.tx-simu-total-lbl { font-size: 12px; color: var(--et-muted); }
.tx-simu-total-val {
    font-family: var(--et-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    font-weight: 700;
}

.tx-simu-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tx-simu-table th {
    text-align: left;
    font-weight: 600;
    color: var(--et-muted);
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--et-hairline);
}
.tx-simu-table td { padding: 4px 8px; border-bottom: 1px solid var(--et-hairline); }
.tx-simu-table td.nb { text-align: right; font-family: var(--et-font-mono); font-variant-numeric: tabular-nums; }
.tx-simu-expl { color: var(--et-muted); }

/* Une table large scrolle DANS son conteneur (lot 03) : le corps de page ne
   défile jamais horizontalement. */
.tx-simu-defile { overflow-x: auto; }

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

@media (max-width: 720px) {
    .tx-select, .tx-champ-nb { max-width: none; }
    .tx-filtre, .tx-simu-champs > .tx-filtre { flex: 1 1 180px; }
    .tx-simu-btn { flex: 1 1 100%; }
}

@media (max-width: 560px) {
    .tx-simu-totaux { gap: 12px; }
    /* Le bouton qui ramène une ligne 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. */
    .tx-pays > .mx-btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 720px) {
    /* La liste des comptes suit la colonne de valeur au lieu de la déborder. */
    .tx-compte-combo { max-width: none; }
}

/* 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 repris par lot02 ; ceux de cet écran lui sont propres, donc à
   sa charge. */
@media (max-width: 1024px) {
    .tx-select, .tx-champ-nb { height: 44px; }
    /* Les champs de la fiche relèvent de .mx-modale-fiche, que le gabarit reprend
       déjà ; ceux-ci lui échappent — le pays est un .mx-input logé dans une
       rangée propre à cet écran, et l'unité de valeur n'est pas une cible. */
    .tx-pays > .mx-btn { min-height: 44px; }
}