/* ===========================================================================
   ÉCRAN PARAMÉTRAGE FISCAL — ONGLET BARÈMES (.bar-*)
   Components/Pages/Tax/ParametrageTax.razor, onglet « Barèmes fiscaux ».

   UNE FEUILLE POUR CET ÉCRAN, chargée après modele-erp.css. Presque tout vient
   du gabarit : la liste (.tbl-* via le composant Tableau), la modale, le rail
   d'onglets en modale (.mx-modale-fiche), la bande de faits (.mx-faits) et la
   grille dense (.mx-form/.mx-champ). Ne restent ici que la barre de filtres et
   quelques largeurs de champ qu'aucun autre écran ne demande.

   ELLE NE COUVRE QUE L'ONGLET DES BARÈMES. Les deux autres onglets de la page
   — types de déclaration, circuit d'approbation — sont encore en Bootstrap et
   ne relèvent pas de cette feuille : les reprendre viendra, et mélanger les
   deux dans un même lot rendrait la recette illisible.

   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. LA BARRE DE FILTRES — pays, millésime, et le bouton d'engagement.
   Calée 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.
   --------------------------------------------------------------------------- */

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

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

.bar-pays { max-width: 110px; text-transform: uppercase; }
.bar-nb {
    max-width: 120px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* LA NOTE DU FILTRE dit POURQUOI la liste ne montre qu'un pays. Une restriction
   muette se lit comme un référentiel amputé — et fait recréer en double ce
   qu'on croit manquant. Elle s'aligne sur la ligne de base des champs, pas sur
   leur haut : c'est une phrase, pas une commande. */
.bar-note {
    align-self: flex-end;
    padding-bottom: 7px;
    font-size: 12px;
    color: var(--et-faint);
    max-width: 46ch;
}

/* ---------------------------------------------------------------------------
   2. LA LISTE ET LA FICHE.
   --------------------------------------------------------------------------- */

/* UN CODE DE BARÈME EST UN IDENTIFIANT, un code pays aussi, un millésime se
   compare colonne à colonne : chasse fixe, comme les comptes et les matricules
   partout ailleurs dans le produit. */
.bar-mono {
    font-family: var(--et-font-mono);
    font-variant-numeric: tabular-nums;
}

/* L'UNITÉ EST UNE NOTE POSÉE CONTRE LA VALEUR, pas une colonne : « 18 » sans
   son « % » ne veut rien dire, et l'en écarter la ferait lire comme une autre
   grandeur. Plus discrète que le nombre, qui est l'information. */
.bar-unite {
    margin-left: 4px;
    font-family: var(--et-font);
    font-size: 12px;
    color: var(--et-faint);
}

.bar-champ-pays { max-width: 96px; text-transform: uppercase; }
.bar-champ-code { max-width: 320px; }
.bar-champ-nb { max-width: 140px; }
.bar-champ-date { max-width: 190px; }
.bar-champ-unite { max-width: 240px; }

/* La mention « lecture seule » de la tête : le référentiel est global, et qui
   ne peut pas l'écrire doit le savoir AVANT d'avoir rempli un champ. */
.bar-titre-lecture { margin-left: 10px; }

/* Le pays et le millésime à côté du code, dans la tête : un code de barème
   n'est unique QUE sous ce triplet. */
.bar-titre-prec {
    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. */
.bar-pied-err { font-size: 12px; color: var(--et-danger-ink); white-space: nowrap; }

/* L'ERREUR DE LA MODALE EST SŒUR DU CORPS, PAS SA FILLE : .mx-modale-corps passe
   en display:flex dès qu'il porte une fiche, et un second enfant s'y rangerait à
   CÔTÉ du rail. Posée à côté, elle doit aussi refuser de s'étirer — la modale
   partage sa hauteur entre tête, bande, corps et pied, et un message qui grandit
   prendrait la place des panneaux. */
.mx-modale-cadre > .bar-modale-erreur { flex: none; margin: 0 18px 10px; }

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

@media (max-width: 720px) {
    .bar-select { max-width: none; }
    .bar-filtre { flex: 1 1 160px; }
    .bar-filtres > .mx-btn { flex: 1 1 100%; justify-content: center; margin-left: 0 !important; }
    .bar-champ-code, .bar-champ-unite { max-width: none; }
    /* La note passe sous les champs plutôt que de les comprimer : elle explique,
       elle ne se saisit pas. */
    .bar-note { flex: 1 1 100%; padding-bottom: 0; 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 et ceux de la fiche en modale sont repris par lot02 et par
   modele-erp.css ; ceux de la barre de filtres lui sont propres, donc à sa
   charge. */
@media (max-width: 1024px) {
    .bar-select { height: 44px; }
}