/* =====================================================================
   AFFECTATION — Feuille de style.

   Palette reprise de QAYDO pour que les deux applications ne se
   contredisent pas à l'écran, mais l'ossature est écrite ici : cette
   application ne charge aucun fichier de QAYDO.

   Sur la couleur : les rapports de contraste ci-dessous sont CALCULÉS,
   pas jugés à l'œil, et `controles/controle_affectation.php` les
   recalcule à chaque exécution. Le rouge de la pastille en particulier
   ne pouvait pas être celui de Bootstrap (#dc3545 sur blanc : 3.94:1,
   sous le seuil de 4.5 pour un texte de cette taille).
   ===================================================================== */

:root {
    --af-bleu:        #1B3A5C;  /* fond de la barre — 11.16:1 avec du blanc */
    --af-bleu-clair:  #2C5480;
    --af-ambre:       #C9822B;
    --af-ambre-clair: #E8A54B;
    --af-rouge:       #B3221F;  /* pastille du compteur — 6.47:1 avec du blanc */
    --af-fond:        #f5f6f8;
    --af-bordure:     #e3e6ea;
    --af-largeur-max: 1440px;
}

body {
    background-color: var(--af-fond);
}

.af-page,
.af-navbar-interieur,
.af-barre {
    max-width: var(--af-largeur-max);
    margin-inline: auto;
    width: 100%;
}

.af-page {
    padding: 1.25rem 1rem 3rem;
}

.af-titre {
    color: var(--af-bleu);
    font-weight: 600;
}

/* --- Barre de navigation ------------------------------------------- */

.af-navbar {
    background: var(--af-bleu);
    color: #fff;
}

.af-navbar-interieur {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .55rem 1rem;
}

.af-marque {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
}

.af-marque-sous {
    display: block;
    font-weight: 400;
    font-size: .72rem;
    letter-spacing: 0;
    color: var(--af-ambre-clair);
}

.af-menu {
    display: flex;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

.af-menu a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border-radius: .375rem;
    color: #dfe6ee;
    text-decoration: none;
    white-space: nowrap;   /* sans quoi « La sélection » se replie */
}

.af-menu a:hover {
    background: var(--af-bleu-clair);
    color: #fff;
}

.af-menu a.actif {
    background: var(--af-ambre-clair);
    color: var(--af-bleu);   /* 5.49:1 — l'ambre de marque ne suffirait pas */
    font-weight: 600;
}

.af-compte {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}

.af-compte-nom {
    font-size: .82rem;
    color: #cbd7e3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12rem;
}

.af-lien-bouton {
    background: none;
    border: 0;
    color: #cbd7e3;
    padding: .25rem;
    line-height: 1;
    cursor: pointer;
}

.af-lien-bouton:hover { color: #fff; }

/* --- La barre de sélection ------------------------------------------
   Collée en haut : le compte et le total doivent rester lisibles
   pendant qu'on fait défiler une page de cinquante lignes. Sans
   `position: sticky`, il faudrait remonter pour savoir où l'on en est.
   ------------------------------------------------------------------- */

.af-barre {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .5rem 1rem;
    background: var(--af-bleu-clair);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.af-barre-pastille {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .375rem;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
}

.af-barre-pastille:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.af-barre-icone { width: 18px; height: 18px; }

/* La pastille du compteur — le petit disque rouge de la maquette. */
.af-barre-compte {
    position: absolute;
    top: -.35rem;
    left: -.35rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: .6rem;
    background: var(--af-rouge);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.af-barre-total {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

.af-barre-legende {
    font-size: .8rem;
    color: #d6e2ee;
}

.af-barre-etat {
    font-size: .8rem;
    color: var(--af-ambre-clair);
    min-height: 1rem;
}

.af-barre-actions { margin-left: auto; }

/* Un bref éclat quand le total change : sans lui, une case cochée en
   bas de page ne se voit nulle part. */
.af-barre-total.af-change {
    animation: af-eclat .45s ease-out;
}

@keyframes af-eclat {
    0%   { color: var(--af-ambre-clair); transform: scale(1.06); }
    100% { color: #fff; transform: scale(1); }
}

/* --- Tableaux ------------------------------------------------------- */

.af-tableau thead th {
    background: #eef1f5;
    color: var(--af-bleu);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid var(--af-bordure);
}

.af-colonne-case { width: 2.5rem; }

.af-montant {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.af-ligne-cochee > td {
    background-color: #fdf4e6;   /* rappel discret de l'ambre */
}

/* --- Cartes de chiffres --------------------------------------------- */

.af-carte-chiffre {
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--af-ambre-clair);
}

.af-chiffre {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--af-bleu);
    font-variant-numeric: tabular-nums;
}

.af-chiffre-legende {
    font-size: .82rem;
    color: #6c757d;
}

/* --- Recherche assistée ---------------------------------------------
   La liste est en `position: absolute` DANS un conteneur `relative`, et
   surtout elle n'est jamais enfermée dans un bloc à `overflow: auto` :
   c'est ainsi qu'une liste déroulante se retrouve rognée par le bord
   d'une carte.
   ------------------------------------------------------------------- */

.af-combo { position: relative; }

.af-combo-liste {
    position: absolute;
    z-index: 40;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--af-bordure);
    border-radius: .375rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.af-combo-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: .4rem .7rem;
    border: 0;
    background: none;
    font-size: .9rem;
    cursor: pointer;
}

.af-combo-option:hover,
.af-combo-option.af-survol {
    background: #eef4fa;
}

.af-combo-vide {
    padding: .5rem .7rem;
    font-size: .85rem;
    color: #6c757d;
}

/* --- Divers ---------------------------------------------------------- */

.af-btn-principal {
    background: var(--af-bleu);
    border-color: var(--af-bleu);
    color: #fff;
}

.af-btn-principal:hover:not(:disabled) {
    background: var(--af-bleu-clair);
    border-color: var(--af-bleu-clair);
    color: #fff;
}

.af-btn-principal:disabled { opacity: .55; color: #fff; }

.af-connexion {
    max-width: 26rem;
    margin: 4rem auto;
    padding: 0 1rem;
}

.af-client-cible {
    padding: .75rem 1rem;
    background: #eef4fa;
    border-left: 4px solid var(--af-bleu);
    border-radius: .25rem;
}

.af-client-nom {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--af-bleu);
}

.af-apercu {
    list-style: none;
    padding: 0;
    margin: 0 0 .5rem;
    font-size: .88rem;
}

.af-apercu li {
    display: flex;
    gap: 1rem;
    padding: .15rem 0;
    border-bottom: 1px dotted var(--af-bordure);
}

.af-apercu .af-montant { margin-left: auto; }

/* --- La liste ENTIÈRE, avant de confirmer -----------------------------
   On confirme une écriture sur des factures émises : la liste ne peut
   pas être tronquée. Elle défile donc dans sa propre fenêtre, pour que
   trois cents lignes n'allongent pas la page au point d'éloigner le
   bouton de ce qu'il engage. L'en-tête reste collé en haut du cadre. */
.af-liste-confirmation {
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--af-bordure);
    border-radius: .25rem;
}

.af-liste-confirmation thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    z-index: 1;
}

.af-liste-confirmation tfoot th {
    position: sticky;
    bottom: 0;
    background: #f8fafc;
    border-top: 2px solid var(--af-bleu);
}

@media (max-width: 767.98px) {
    .af-liste-confirmation { max-height: 16rem; }
}

.af-nouveau {
    border-top: 1px dashed var(--af-bordure);
    padding-top: .85rem;
}

.af-icone { flex: 0 0 auto; }

@media (max-width: 991px) {
    .af-navbar-interieur { flex-wrap: wrap; gap: .5rem; }
    .af-menu { order: 3; width: 100%; }
    .af-barre { flex-wrap: wrap; }
    .af-barre-actions { margin-left: 0; }
}

/* =====================================================================
   COLONNE « DÉTAIL »

   Le type ne prend plus une colonne pour lui seul : deux lettres
   suffisent — MC pour « Matériaux de construction », T pour
   « Transport » —, l'infobulle porte le libellé entier, et la place
   gagnée sert à dire ce que la facture CONTIENT.

   Contrastes CALCULÉS, recalculés par controle_affectation.php :
     * badge, bleu foncé sur #E7ECF2 ........ 9.79:1
     * désignation, bleu foncé sur blanc ... 11.63:1
     * quantité et reste, #4A5560 sur blanc . 7.61:1
   ===================================================================== */

.af-badge-type {
    display: inline-block;
    min-width: 1.9rem;
    padding: .05rem .35rem;
    flex: 0 0 auto;
    border-radius: .25rem;
    background: #E7ECF2;
    color: var(--af-bleu);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    vertical-align: 1px;
    /* Le badge ne se replie jamais sous la désignation : il ouvre la
       cellule, et l'œil descend le long d'une colonne de badges. */
    white-space: nowrap;
}

/* La CELLULE reste une cellule de tableau : elle ne porte que le texte.

   C'est la leçon d'un défaut qui n'a pas été vu pendant des jours. Un
   `<td>` en `display: flex` cesse d'être une cellule : il quitte la
   grille des colonnes, le navigateur lui fabrique une cellule anonyme,
   et son contenu se dessine décalé de sa propre ligne — mesuré à 13 et
   20 px sous le numéro de la même facture. Tant que la colonne « Détail »
   était l'avant-dernière, l'écart passait inaperçu ; l'ajout de la
   colonne « Corriger » l'a rendu franc.

   La disposition en deux parts est donc portée par une enveloppe
   INTÉRIEURE, qui a le droit d'être ce qu'elle veut. */
.af-detail {
    font-size: .85rem;
    line-height: 1.35;
}

.af-detail-interieur {
    /* Deux parts, et non un texte où le badge flotterait : une facture à
       plusieurs articles repoussait ses lignes sous le badge, qui se
       retrouvait seul sur la première. */
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    /* Bornée en largeur pour que les colonnes de montants restent
       alignées d'une ligne à l'autre, même quand une facture de
       transport porte plusieurs voyages. */
    max-width: 28rem;
}

.af-detail-lignes {
    color: var(--af-bleu);
    min-width: 0;   /* sans quoi la part des articles refuse de se réduire */
}

/* Le numéro ne se coupe JAMAIS en deux : c'est la colonne par laquelle
   on cherche. */
.af-tableau td code { white-space: nowrap; }

.af-detail-ligne {
    /* « 18.5 CIMENT NORMAL CC » ne se coupe pas entre la quantité et ce
       qu'elle compte. */
    white-space: nowrap;
    display: inline-block;
}

.af-detail-qte {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #4A5560;
}

.af-detail-reste {
    color: #4A5560;
    font-style: italic;
    white-space: nowrap;
}

/* =====================================================================
   LA CLOTURE DE MOIS, LA RETOUCHE, LA SUPPRESSION
   =====================================================================

   Deux etats a distinguer d'un coup d'oeil : un mois OUVERT, ou ses
   factures sans client se corrigent encore, et un mois CLOS, ou il ne
   reste que l'affectation. Les contrastes sont CALCULES, pas choisis :

     --af-vert  #1B6B3A   6.54:1 sur blanc, 6.05:1 sur le fond de page
     --af-bleu  #1B3A5C   deja mesure a 11.16:1 sur blanc
     --af-rouge #B3221F   6.63:1 sur blanc

   Le vert de Bootstrap (#198754) ne donne que 4.02:1 sur le fond de
   page : il serait sous le seuil pour un libelle de cette taille.
   ===================================================================== */
:root {
    --af-vert: #1B6B3A;
}

.af-etat {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.af-etat-ouvert { color: var(--af-vert); }
.af-etat-clos   { color: var(--af-bleu); }

/* L'alerte de cloture accompagne l'ecran entier.

   PAS de `display: flex` ici, et la raison ne s'est vue qu'a l'ecran :
   dans une boite flex, chaque fragment de texte situe entre deux
   balises devient un element a part entiere. La phrase « 8 mois sont
   termines, du plus ancien — janvier 2026 — a aout 2026. Tant qu'un
   mois reste ouvert... » se brisait alors entre ses mots en gras, et
   le point se retrouvait seul en tete de la ligne suivante. Un bloc
   ordinaire laisse le texte se replier comme du texte. */
.af-alerte-cloture .af-icone {
    vertical-align: -2px;
    margin-right: .2rem;
}

.af-note {
    background: #fff;
    border: 1px solid var(--af-bordure);
    border-left: 4px solid var(--af-bleu);
    color: inherit;
}

/* Un mois clos dont les chiffres ont bouge doit se voir de loin. */
.af-mois-ecart > td { background: #FDF3F2; }

.af-mois-detail {
    background: #fff;
    border-top: 2px solid var(--af-bordure);
}

.af-quantites {
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--af-bordure);
    border-radius: .35rem;
}

.af-etiquette {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #5d6b7a;
}

/* L'en-tete figee : elle se lit, elle ne se saisit pas. Le fond gris
   dit ce que le formulaire ne dira pas. */
.af-entete-figee {
    background: #fbfcfd;
    border-left: 4px solid var(--af-bleu);
}

.af-tableau-plat td,
.af-tableau-plat th { border-color: var(--af-bordure); }

.af-ecart { color: var(--af-rouge); font-weight: 600; }

/* Les lignes en saisie : les champs y sont serres, mais aucun ne
   descend sous la taille ou l'on ne relit plus ce qu'on tape. */
.af-lignes td { padding: .4rem .35rem; }
.af-lignes .form-control-sm,
.af-lignes .form-select-sm { font-size: .86rem; }
.af-lignes .af-combo-liste { min-width: 22rem; }

.af-rang {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.af-retirer { color: var(--af-rouge); }
.af-retirer:hover { color: #7d1815; }

.af-actions { white-space: nowrap; }

.af-lien-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .3rem;
    color: var(--af-bleu);
}

.af-lien-action:hover {
    background: var(--af-bleu);
    color: #fff;
}

.af-lien-danger { color: var(--af-rouge); }
.af-lien-danger:hover { background: var(--af-rouge); color: #fff; }

/* Le dernier document emis : il n'est pas dans la liste (elle ne montre
   que les factures sans client) mais il doit rester atteignable, parce
   que c'est le seul qui se supprime sans laisser de trou. */
.af-dernier {
    border-left: 4px solid var(--af-ambre);
    background: #fffdf8;
}

/* Le numero a retaper. Grand, en chasse fixe, bien espace : on le
   RECOPIE en le lisant, et une erreur doit se voir. */
.af-confirmation {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: .04em;
}


/* =====================================================================
   LA FENETRE DE CONFIRMATION
   =====================================================================

   `<dialog>` natif. Le navigateur l'affiche dans sa couche du dessus,
   rend le reste de la page inerte et gere la touche Echap : rien de
   tout cela n'est reecrit ici, et aucune bibliotheque n'est chargee
   pour l'obtenir.

   Contrastes mesures : --af-rouge #B3221F sur blanc donne 6.63:1.
   ===================================================================== */
.af-modal {
    max-width: 34rem;
    width: calc(100% - 2rem);
    padding: 0;
    border: 0;
    border-radius: .5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

.af-modal::backdrop {
    background: rgba(16, 24, 33, .55);
}

.af-modal form {
    padding: 1.25rem 1.4rem 1.1rem;
}

.af-modal-titre {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--af-rouge);
}

.af-modal-titre .af-icone { width: 20px; height: 20px; }

/* La question est ce qu'on vient lire : elle est plus grande que le
   reste, et rien ne la concurrence. */
.af-modal-question {
    font-size: 1.05rem;
    line-height: 1.45;
    margin-bottom: .6rem;
}

.af-modal-detail {
    color: #4A5560;    /* 7.61:1 sur blanc */
    font-size: .9rem;
    margin-bottom: .6rem;
}

.af-modal-consequence {
    background: #FDF3F2;
    border-left: 3px solid var(--af-rouge);
    border-radius: .3rem;
    padding: .55rem .7rem;
    font-size: .88rem;
    margin-bottom: 1.1rem;
}

/* « Annuler » a la place de la sortie la plus facile : a gauche, et
   c'est lui qui repond si l'on ferme la fenetre d'un clic dehors. */
.af-modal-boutons {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}