/* =========================================================================
   socle/index-toolbar.css — Barre d'options UNIFIÉE au-dessus des grilles d'index
   (recherche / filtres repliables / totaux) + alignement toolbar ⇄ grille MvcGrid.
   Composant transverse destiné à TOUS les écrans d'index. Chargé globalement via
   le bundle ~/Content/css-surcharges (BundleConfig.cs). Les classes tg-index-*
   n'ont d'effet que là où elles sont présentes → aucun impact sur les autres écrans.
   ========================================================================= */

/* --- Conteneur commun (toolbar + grille) sur les écrans d'INDEX : se comporte comme un
   Bootstrap .container-fluid → occupe TOUTE la largeur disponible (pleine largeur, à la
   différence des écrans hors index qui restent en .container à largeur fixe). La barre de
   filtres et la grille partagent ainsi la même pleine largeur (toutes deux à 100%). --- */
.tg-index-wrap {
    width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    margin-left: auto;
    margin-right: auto;
}

    /* La grille MvcGrid se dimensionne par défaut à son contenu (width:fit-content) et se centre
       (margin-inline:auto ; align-self:center) via mvc-grid.custom.scss. Sur les index, on la fait
       occuper TOUTE la largeur du conteneur → alignée avec la barre de filtres (mêmes bords). La
       colonne de remplissage de la grille absorbe l'espace restant.
       Sélecteur avec .entete-pied-fixes pour battre la règle SCSS (spécificité supérieure). */
    .tg-index-wrap .container-mvc-grid,
    .tg-index-wrap .container-mvc-grid.entete-pied-fixes {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        align-self: stretch;
        flex: 1 1 auto;
        /* Ombre portée du bloc de grille, pendant de celle de la barre d'options (.tg-index-toolbar,
           dirigée vers le haut) : les deux cartes se détachent du fond de page.
           ⚠️ Portée par le CONTENEUR DE GRILLE et non par #subContent : ce dernier n'existe que sur
           73 des 178 écrans d'index (105 n'en ont pas), alors que .container-mvc-grid est présent
           partout — et sa boîte est exactement la même quand les deux coexistent. */
        box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    }

        /* La grille interne et sa table remplissent aussi la largeur → la colonne de remplissage
           finale absorbe l'espace, la grille est bord à bord avec la barre de filtres. */
        .tg-index-wrap .container-mvc-grid > .mvc-grid {
            width: 100%;
        }

        .tg-index-wrap .container-mvc-grid .mvc-grid-table,
        .tg-index-wrap .container-mvc-grid table {
            width: 100%;
        }

            /* Répartition de la largeur excédentaire : les colonnes TECHNIQUES (cases à cocher à
               gauche, pictos de commandes à droite) gardent leur largeur naturelle ; seules les
               colonnes de DONNÉES absorbent l'espace restant.
               ⚠️ Sans cette règle, `table { width:100% }` fait grossir TOUTES les colonnes au
               prorata, colonnes techniques comprises : l'entête de la colonne de commandes étant
               vide (par conception depuis le passage des commandes globales dans la barre d'outils),
               elle se lit comme une « colonne vide » en fin de grille, large et non supprimable
               depuis l'engrenage (ce n'est pas une colonne de données, elle n'y figure donc pas).
               `width:1%` (pourcentage) sort ces colonnes du calcul de répartition ; leur
               `min-width` (posée par `commandes-max-nb-N` / la colonne de sélection) les plancherise,
               donc rien n'est rogné, y compris quand la grille déborde et défile. */
            .tg-index-wrap .container-mvc-grid th.col-selection,
            .tg-index-wrap .container-mvc-grid td.col-selection,
            .tg-index-wrap .container-mvc-grid th.col-commandes,
            .tg-index-wrap .container-mvc-grid td.col-commandes,
            .tg-index-wrap .container-mvc-grid th.col-commandes-actions,
            .tg-index-wrap .container-mvc-grid td.col-commandes-actions,
            .tg-index-wrap .container-mvc-grid th.col-commandes-perso,
            .tg-index-wrap .container-mvc-grid td.col-commandes-perso,
            .tg-index-wrap .container-mvc-grid th.col-commandes-alt,
            .tg-index-wrap .container-mvc-grid td.col-commandes-alt {
                width: 1%;
            }

/* --- La barre elle-même : cadre discret, respiration confortable. --- */
.tg-index-toolbar {
    /* Air entre la barre d'options et le haut de la grille : il n'y en avait AUCUN (les deux
       cadres étaient jointifs, bord à bord). Sous la grille, il y a 5 px avant la barre de
       boutons (#content est en position:fixed avec bottom:57px, le #foot occupant les 52 px). */
    padding: .65rem .9rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .08);
}

/* Ligne du haut : bouton (gauche) + totaux (droite via ms-auto).
   min-height figée sur la hauteur d'un champ (34px) → la barre garde EXACTEMENT
   la même hauteur que les filtres soient affichés ou masqués (le repli ne la rétrécit pas). */
.tg-index-toolbar-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    min-height: 34px;
}

/* Recherche principale : la boîte épouse la largeur de son input (comme les autres filtres),
   pas de largeur forcée qui laisserait un vide en fin de champ. */
.tg-index-search .filtre-champ {
    min-width: 240px;
}

/* --- Champ de filtre encadré générique (icône interne à gauche + input), harmonisé
   avec .tg-dossier-filtre (recherche client). Ex. N° de pièce/facture. --- */
.tg-index-champ {
    position: relative;
    display: inline-flex;
    align-items: center;
}

    .tg-index-champ > .tg-index-champ-icone {
        position: absolute;
        left: .6rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        display: inline-flex;
        align-items: center;
        pointer-events: none;
        color: var(--bs-secondary-color, #6c757d);
    }

        .tg-index-champ > .tg-index-champ-icone svg,
        .tg-index-champ > .tg-index-champ-icone [data-lucide] {
            width: 16px;
            height: 16px;
        }

    .tg-index-champ > .tg-index-champ-input {
        height: 34px;
        padding: 0 .7rem 0 2rem; /* place l'icône à gauche */
        border: 1px solid var(--bs-border-color, #ced4da);
        border-radius: .5rem;
        background: var(--bs-body-bg, #fff);
        outline: none;
        min-width: 12rem;
    }

        .tg-index-champ > .tg-index-champ-input:focus {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
        }

/* --- Action interne à DROITE d'un champ encadré (ex. loupe de recherche avancée dans le champ
   Prospect) : positionnée dans la boîte, l'input réserve la place à droite. --- */
.tg-index-champ > .tg-index-champ-action {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 0;
}

    .tg-index-champ > .tg-index-champ-action svg,
    .tg-index-champ > .tg-index-champ-action [data-lucide] {
        width: 16px;
        height: 16px;
    }

.tg-index-champ--action > .tg-index-champ-input {
    padding-right: 2rem;
}

/* --- Loupe de recherche avancée intégrée à DROITE d'un champ .tg-dossier-filtre
   (ex. recherche vendeur avec popup). L'input .tg-dossier-filtre réserve déjà 2rem à droite. --- */
.tg-dossier-filtre > .picto-loupe {
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: var(--bs-secondary-color, #6c757d);
}

    .tg-dossier-filtre > .picto-loupe svg,
    .tg-dossier-filtre > .picto-loupe img,
    .tg-dossier-filtre > .picto-loupe [data-lucide] {
        width: 16px;
        height: 16px;
    }

/* --- Filtre liste déroulante (select) : même gabarit encadré que .tg-index-champ.
   À placer dans un wrapper .tg-index-champ (icône interne à gauche) ; conserve la flèche
   native de form-select à droite. --- */
.tg-index-select-input {
    height: 34px;
    padding-left: 2rem;
    border-radius: .5rem;
    min-width: 10rem;
}

/* --- Chip toggle encadrée (icône + libellé + interrupteur .ouinon), même hauteur/rayon
   que les champs → filtre booléen visuellement homogène avec le reste de la barre. --- */
.tg-index-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 34px;
    margin: 0;
    padding: 0 .75rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: .5rem;
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
}

    .tg-index-toggle-chip .tg-index-toggle-chip-icone {
        display: inline-flex;
        align-items: center;
        color: var(--bs-secondary-color, #6c757d);
    }

        .tg-index-toggle-chip .tg-index-toggle-chip-icone svg,
        .tg-index-toggle-chip .tg-index-toggle-chip-icone [data-lucide] {
            width: 16px;
            height: 16px;
        }

    .tg-index-toggle-chip .tg-index-toggle-chip-label {
        font-size: .82rem;
        color: var(--bs-body-color);
        white-space: nowrap;
    }

    /* Interrupteur (.form-check-input role=switch injecté par toggle.js) : neutraliser la marge
       Bootstrap et centrer verticalement dans le chip. */
    .tg-index-toggle-chip .form-check-input {
        margin: 0;
        float: none;
        vertical-align: middle;
        flex: 0 0 auto;
    }

/* Bouton d'affichage/masquage des filtres (icône seule). */
.tg-index-filtres-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

    .tg-index-filtres-btn svg {
        width: 16px;
        height: 16px;
    }

/* Icône selon l'état (aria-expanded basculé par Bootstrap) :
   ouvert (filtres visibles) → list-x ; fermé → list-plus. Swap 100% CSS, sans JS. */
.tg-index-filtres-btn[aria-expanded="true"] .tg-index-filtres-ico--ferme,
.tg-index-filtres-btn[aria-expanded="false"] .tg-index-filtres-ico--ouvert {
    display: none;
}

/* Bloc repliable des filtres : en ligne, à droite du bouton toggle. Grandit pour occuper
   l'espace disponible (la tuile Total reste poussée à droite par son ms-auto). */
.tg-index-filtres-row {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

/* Grille des filtres : gouttières un peu plus larges → affichage aéré. */
.tg-index-filtres-grid {
    --bs-gutter-x: 1.5rem;
}

/* Sur mobile (colonnes empilées en col-12) les champs passent en pleine largeur
   pour un rendu propre quel que soit le nombre de filtres. */
@media (max-width: 575.98px) {
    .tg-index-filtres-grid > [class^="col-"] > .tg-dossier-filtre,
    .tg-index-filtres-grid > [class^="col-"] > .tg-index-champ,
    .tg-index-filtres-grid > [class^="col-"] > .tg-index-toggle-chip {
        width: 100%;
    }

        .tg-index-filtres-grid .tg-dossier-filtre .inputSearchContainer,
        .tg-index-filtres-grid .tg-dossier-filtre .inputSearchContainer > input,
        .tg-index-filtres-grid .tg-index-champ .tg-index-champ-input {
            width: 100%;
            min-width: 0;
        }
}

/* Tuile Total (à droite), sur une seule ligne (label + valeur).
   Hauteur alignée sur les champs de filtre (34px) pour une barre parfaitement régulière. */
.tg-index-total {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 34px;
    padding: 0 .7rem;
    border-radius: .5rem;
    background: var(--bs-info-bg-subtle);
    border: 1px solid var(--bs-info-border-subtle);
}

.tg-index-total-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--bs-secondary-color, #6c757d);
}

.tg-index-total-valeur {
    border: 0;
    background: transparent;
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-info-text-emphasis);
    width: auto;
    max-width: 150px;
    padding: 0;
}

    .tg-index-total-valeur:disabled {
        color: var(--bs-info-text-emphasis);
        opacity: 1;
    }

/* --- Zone de filtres : la loupe du champ de recherche (client, etc.) reste À DROITE
   de l'input (sinon elle flotte en dessous). --- */
.gridListFilter .inputSearchContainer {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

    .gridListFilter .inputSearchContainer > input.text-box {
        flex: 1 1 auto;
        min-width: 0;
    }

    .gridListFilter .inputSearchContainer > .inputSearchContainerSpan {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        line-height: 0;
    }

.gridListFilter .filtre-champ {
    min-width: 220px;
}

/* ============================================================================
   Cartes de synthese (bandeau de totaux au-dessus d'une grille).
   Style repris de la vue Reglement (.reglement-card) et generalise :
   titre en capitales + grande valeur, fond subtil par variante (info/warning/
   success/danger). Reutilisable sur tout index a bandeau de totaux.
   ============================================================================ */
.tg-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}

.tg-stat-card {
    padding: .35rem .85rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .6rem;
    background-color: var(--bs-body-bg, #fff);
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.tg-stat-card-titre {
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.tg-stat-card-valeur {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-body-color);
    white-space: nowrap;
}

/* Variante : la valeur est un <input> disabled (masque montant conserve) rendu
   comme le texte de valeur (sans bordure ni fond). */
.tg-stat-card-input {
    border: 0;
    background: transparent;
    padding: 0;
    height: auto;
    width: auto;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-body-color);
    white-space: nowrap;
    box-shadow: none;
}

    .tg-stat-card-input:focus {
        outline: none;
        box-shadow: none;
    }

.tg-stat-card--info {
    background-color: var(--bs-info-bg-subtle);
    border-color: var(--bs-info-border-subtle);
}

    .tg-stat-card--info .tg-stat-card-valeur,
    .tg-stat-card--info .tg-stat-card-input {
        color: var(--bs-info-text-emphasis);
    }

.tg-stat-card--warning {
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
}

    .tg-stat-card--warning .tg-stat-card-valeur,
    .tg-stat-card--warning .tg-stat-card-input {
        color: var(--bs-warning-text-emphasis);
    }

.tg-stat-card--success {
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
}

    .tg-stat-card--success .tg-stat-card-valeur,
    .tg-stat-card--success .tg-stat-card-input {
        color: var(--bs-success-text-emphasis);
    }

.tg-stat-card--danger {
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
}

    .tg-stat-card--danger .tg-stat-card-valeur,
    .tg-stat-card--danger .tg-stat-card-input {
        color: var(--bs-danger-text-emphasis);
    }

/* ------------------------------------------------------------------------------------------------
   Colonne de commandes SANS AUCUNE COMMANDE À MONTRER -> on ne l'affiche pas du tout.

   Rappel de rendu (Views/Shared/MvcGrid/_Grille.cshtml + ColonneCommandes<TModele, TId>) :
   - la colonne de commandes (classes `col-commandes col-commandes-actions`) est ajoutée à droite
     par GrilleHelper.AjouterCommandes dès que la grille DÉCLARE des commandes de ligne
     (`ACommandes`), indépendamment de ce qui sera réellement rendu ligne par ligne ;
   - son en-tête est VOLONTAIREMENT VIDE (les commandes globales vivent dans la barre d'outils) ;
   - `ValueFor` émet TOUJOURS un `div.commandes-container`, même vide (aucune action autorisée
     sur la ligne), et les lignes de remplissage (`tr.complement`) / la ligne « Aucun élément à
     afficher » n'émettent aucune cellule de commande.
   Résultat sans la règle ci-dessous : une colonne visuellement vide en fin de grille (grille sans
   aucune ligne, ou grille dont aucune ligne n'autorise d'action).

   Critère retenu (le plus strict possible) : la colonne n'est masquée QUE si, dans TOUT le bloc
   `.mvc-grid`, aucun `div.commandes-container` d'une cellule de commandes ne contient d'élément.
   Dès qu'UNE seule ligne porte une commande (même désactivée/masquée par condition — elle produit
   quand même un élément), la colonne reste affichée pour toutes les lignes : on ne peut donc pas
   faire disparaître un bouton d'action.

   Pourquoi du CSS et pas un test serveur : `:has()` est réévalué en continu par le navigateur, donc
   la règle reste juste après un rechargement AJAX de la grille (tri, pagination, filtre) qui fait
   passer d'une page vide à une page remplie et inversement — un test serveur ponctuel dans la vue
   supposerait en plus de recalculer le `colspan` de la ligne « Aucun élément à afficher ».

   Portée : le `th` ET les `td` de la colonne sont masqués ensemble (sinon décalage de colonnes) ;
   l'ancrage sur `.mvc-grid` (et non sur `table`) couvre aussi l'entête clonée par FixedHeaderTable
   (`.fht-thead > table`, sans `tbody`), qui serait sinon masquée à tort.
   Limité à `col-commandes-actions` = la colonne de commandes STANDARD (index, popups, mini-grilles).
   Les colonnes de commandes par gabarit des widgets (`col-commandes-perso` / `col-commandes-alt`)
   sont volontairement HORS périmètre : leur contenu est produit par du markup métier arbitraire.
   ------------------------------------------------------------------------------------------------ */
.mvc-grid:not(:has(td.col-commandes-actions .commandes-container > *)) th.col-commandes-actions,
.mvc-grid:not(:has(td.col-commandes-actions .commandes-container > *)) td.col-commandes-actions {
    display: none;
}

/* --- Champ de recherche des pops de selection generiques (Views/Shared/MvcGrid/_PopupSelection.cshtml).
   Reprend le gabarit encadre des filtres d'index ; le libelle est porte par le placeholder (il est
   dynamique : Forme juridique, Contenu recherche... et se coupait sur deux lignes). --- */
.popup-selection-champ {
    flex: 1 1 14rem;
    min-width: 0;
}

    .popup-selection-champ > .tg-index-champ-input {
        width: 100%;
    }

/* --- SELECTEUR D'UTILISATEUR (plugin Chosen) DANS UN CHAMP DE BARRE -------------------------
   `UserSelectorHelper(For)` rend un <select> habille par le plugin CHOSEN (liste avec photo).
   Chosen s'habille lui-meme facon 2010 : hauteur 23px, angles droits, degrade gris — a cote d'un
   `.tg-index-champ-input` de 34px a rayon .5rem, il detonne franchement.
   On le ramene donc au meme gabarit, PARTOUT ou il est place dans un champ de barre
   (Fdt/Saisie/_ActionsEntete, Fdt/Absence/Index, et tout ecran a venir).

   ⚠️ `!important` sur `border` et `border-radius` : `assets/css/ImageSelect.min.css` — la feuille
   du plugin qui affiche les PHOTOS — declare
   `.chosen-container-single .chosen-single { border-radius: 0 !important; border-color: #ccc !important }`.
   Un `!important` tiers ne se bat que par un `!important`, la specificite n'y suffit pas. On ne
   touche pas a ImageSelect.css : elle est partagee par les autres ecrans a selecteur d'utilisateur. */
.tg-index-champ .chosen-container {
    font-size: inherit;
}

    .tg-index-champ .chosen-container .chosen-single {
        height: 34px;
        line-height: 32px;
        padding: 0 .7rem 0 2rem; /* 2rem a gauche : place de l'icone Lucide du champ */
        background: var(--bs-body-bg, #fff);
        box-shadow: none;
        color: var(--bs-body-color);
        border: 1px solid var(--bs-border-color, #ced4da) !important;
        border-radius: .5rem !important;
    }

        /* Fleche du plugin : recentree sur la nouvelle hauteur. */
        .tg-index-champ .chosen-container .chosen-single div {
            top: 50%;
            transform: translateY(-50%);
            height: auto;
        }

        /* Vignette de l'utilisateur : alignee sur le texte. */
        .tg-index-champ .chosen-container .chosen-single img {
            vertical-align: middle;
        }

    .tg-index-champ .chosen-container.chosen-container-active .chosen-single {
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
        border-color: var(--bs-primary) !important;
    }

    /* Liste deroulante : meme bordure et meme rayon bas que le champ. */
    .tg-index-champ .chosen-container .chosen-drop {
        border-color: var(--bs-border-color, #ced4da);
        border-radius: 0 0 .5rem .5rem;
    }

    /* Croix de deselection heritee de Chosen : sans objet sur un choix unique. */
    .tg-index-champ .search-choice-close {
        display: none;
    }