/* =============================================================================
   Donnees - tableaux, pagination, selecteur de colonnes, synthese, etat vide
   -----------------------------------------------------------------------------
   Comme pour les conteneurs, ces regles vivaient dans des blocs <style> a
   l'interieur des composants. Le selecteur de colonnes en comptait un de
   cinquante lignes, dont une declaration forcee posait un contour orange ecrit
   en clair - donc identique quelle que soit la marque active.
   ============================================================================= */


/* =============================================================================
   MyDataGrid
   ============================================================================= */

/*  En-tete sur fond neutre : il doit se distinguer des lignes sans pour autant
    attirer l'oeil, qui doit aller aux donnees.

    LE SELECTEUR EST LONG A DESSEIN

    MudBlazor colore les cellules d'un en-tete fixe par

        .mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell

    soit quatre classes. Un selecteur de trois classes perd donc, et le fond reste
    blanc - sans qu'aucune erreur ne le signale. Celui-ci en compte cinq, ce qui
    suffit a l'emporter sans recourir a une declaration prioritaire. C'est
    precisement ce que la version d'origine reglait a coups de !important, ou en
    posant une classe supplementaire par HeaderClass. */
.mud-data-grid.mud-table-sticky-header .mud-table-root .mud-table-head .mud-table-cell {
    background-color: var(--my-surface-sunken);
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
    white-space: nowrap;
}

/*  Ligne de filtres : fond distinct de l'en-tete, pour qu'on voie qu'il s'agit
    d'une zone de saisie et non d'un second niveau de titres. Meme specificite que
    la regle ci-dessus, plus une classe, pour passer devant elle. */
.mud-data-grid.mud-table-sticky-header .mud-table-root .mud-table-head .mud-table-cell.filter-header-cell {
    background-color: var(--my-surface-card);
    padding: 4px 8px;
}

/*  Lignes aerees (decision projet ZELDA, 25/08/2026) : un petit padding vertical
    au-dela du reglage dense de MudBlazor, pour que les grilles maitres et les
    tableaux d'onglets respirent. Vaut pour toute l'application. */
.mud-data-grid .mud-table-root .mud-table-body .mud-table-cell {
    padding-top: 10px;
    padding-bottom: 10px;
}

.mud-table:not(.mud-data-grid) .mud-table-root .mud-table-body .mud-table-cell {
    padding-top: 10px;
    padding-bottom: 10px;
}

/*  La cellule coupe au lieu de deborder. Sans largeur maximale, une valeur longue
    elargit sa colonne et pousse les suivantes hors de l'ecran - c'est la raison
    d'etre de la classe text-truncate posee par MyTemplateColumn. */
.mud-data-grid .mud-table-cell.text-truncate {
    max-width: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*  Le tableau defile a l'interieur de sa hauteur, ce qui rend effectifs l'en-tete
    et le pied fixes. Voir aussi .my-list-page dans components-container.css. */
.mud-data-grid .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    /* Fidele a Boracay : sans cette largeur forcee, un tableau a colonnes larges
       peut deborder de sa carte au lieu de defiler horizontalement a l'interieur. */
    width: inherit !important;
}


/* =============================================================================
   MyDataGridPager
   ============================================================================= */

.my-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--my-space-md);
    flex-wrap: wrap;
    padding: var(--my-space-sm) 0;
}

/*  Barre de recherche generale d'un tableau.

    Une largeur posee, et non la largeur disponible : elle voisine un selecteur de vues
    et des boutons dans la barre d'outils du tableau, et une zone qui s'etire les
    repousserait hors de l'ecran. Assez large pour qu'une raison sociale entiere reste
    lisible pendant la frappe.

    Elle se replie sur toute la largeur en dessous de la tablette, ou la barre d'outils
    passe de toute facon a la ligne. */
.my-grid-search {
    width: 320px;
    max-width: 100%;
}

@media (max-width: 767px) {
    .my-grid-search {
        width: 100%;
    }
}

/*  LA RACINE DU SELECTEUR DOIT ETRE BRIDEE, PAS SEULEMENT SON CHAMP

    MudSelect s'enveloppe d'un div.mud-select que Class n'atteint pas : le
    parametre est pose sur le controle interne. Cette racine reste donc en
    flex: 1 1 auto et s'etale sur toute la largeur restante - 624 pixels sur 766
    dans le pied d'un tableau. Les deux enfants remplissant alors le conteneur, le
    justify-content: center ci-dessus n'avait plus rien a centrer et la pagination
    se retrouvait collee a gauche. */
.my-pager > .mud-select {
    flex: 0 0 auto;
    width: 92px;
}

/*  La liste des tailles de page n'a pas besoin de plus : elle ne contient que des
    nombres a trois chiffres. Sans largeur, MudBlazor lui donne toute la place
    disponible et elle traverse le pied du tableau. */
.my-pager__taille {
    width: 92px;
    flex: 0 0 auto;
}

/*  MudBlazor rogne la pagination quand le pied est plus etroit que le tableau. */
.mud-table-pagination {
    overflow: clip;
}


/* =============================================================================
   MyColumnPopup
   ============================================================================= */

.my-col-popup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--my-space-lg);
}

/* Sous 700 px les deux listes passent l'une sous l'autre : cote a cote, chacune
   serait trop etroite pour qu'un titre de colonne y tienne. */
@media (max-width: 700px) {
    .my-col-popup {
        grid-template-columns: 1fr;
    }
}

.my-col-popup__colonne {
    min-width: 0;
}

.my-col-popup__entete {
    display: flex;
    align-items: center;
    gap: var(--my-space-sm);
    margin: 0 0 var(--my-space-sm);
    font-size: var(--my-font-size-md);
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
}

/*  Cadre en pointilles : il annonce une zone qui recoit, par opposition au trait
    plein d'un conteneur qui presente. */
.my-col-popup__zone {
    min-height: 400px;
    max-height: 60vh;
    padding: var(--my-space-md);
    border: 2px dashed var(--my-border-default);
    border-radius: var(--my-radius-lg);
    background: var(--my-surface-sunken);
    overflow-y: auto;
    transition: border-color var(--my-transition-fast), background var(--my-transition-fast);
}

/* La zone des colonnes retenues est teintee de la couleur d'action : c'est celle
   dont le contenu compte. */
.my-col-popup__zone--affichees {
    border-color: rgba(var(--my-brand-primary-rgb), 0.35);
    background: rgba(var(--my-brand-primary-rgb), 0.03);
}

.my-col-popup__pile {
    display: flex;
    flex-direction: column;
    gap: var(--my-space-sm);
    min-height: 376px;
}

.my-col-popup__item {
    display: flex;
    align-items: center;
    gap: var(--my-space-md);
    padding: var(--my-space-md);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-md);
    background: var(--my-surface-card);
    cursor: grab;
}

.my-col-popup__item:active {
    cursor: grabbing;
}

.my-col-popup__poignee {
    color: var(--my-neutral-300);
    flex: 0 0 auto;
}

.my-col-popup__titre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: var(--my-font-weight-medium);
    color: var(--my-text-heading);
}

/* Cible de depot signalee par la couleur d'action de la marque. L'original la
   forcait en orange ecrit en clair : la marque Indeso l'aurait affichee orange. */
.mud-drop-zone-highlight {
    background-color: rgba(var(--my-brand-primary-rgb), 0.06);
    outline: 2px dashed var(--my-action-primary);
    outline-offset: -4px;
    border-radius: var(--my-radius-md);
}


/* =============================================================================
   MySummaryStrip
   ============================================================================= */

/*  Une bande, pas une carte : ni ombre, ni arrondi. Le seul filet est celui du
    bas, le meme que celui de la barre de titre.

    LA BANDE VA D'UN BORD A L'AUTRE
    Le bandeau prolonge la barre de titre, qui occupe toute la largeur : s'arreter
    a la marge du contenu laissait un liseré gris de chaque cote, sous une barre
    blanche qui, elle, touchait les bords. La marge du conteneur est donc annulee
    par une marge negative, puis reprise en marge interne - le fond s'etend ainsi
    d'un bord a l'autre pendant que les valeurs restent alignees sur le titre.

    La valeur n'est plus ecrite ici : la bande lit celle que l'ecran publie sous
    --my-page-marge. Ecrite en dur, elle valait 24 px et supposait donc un ecran a
    24 px de marge : dans une pile qui en pose 16 - le cas de MyMainContentStack -
    la bande depassait de 8 px de chaque cote et se faisait rogner. La replier
    ainsi vaut mieux que de la redefinir sur chaque conteneur, ce qui se serait
    oublie au prochain ecran.

    Le repli sur --my-space-lg couvre le cas d'une bande posee hors d'un conteneur
    d'ecran, ou la variable n'existe pas.

    Le fond est pose explicitement : laisse transparent, le bandeau montrait le gris
    de la page (#f8f9fa) juste sous une barre de titre blanche. */
.my-summary-strip {
    --my-summary-strip-marge: var(--my-page-marge, var(--my-space-lg));

    margin-left: calc(-1 * var(--my-summary-strip-marge));
    margin-right: calc(-1 * var(--my-summary-strip-marge));
    padding: var(--my-space-md) var(--my-summary-strip-marge);
    background: var(--my-surface-card);
    border-bottom: 1px solid var(--my-border-subtle);
}

/*  Le bandeau defile horizontalement plutot que de comprimer ses cellules :
    l'original les laissait se tasser jusqu'a rendre les montants illisibles. */
.my-summary-strip__inner {
    display: flex;
    align-items: center;
    overflow-x: auto;
}

.my-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
}

/*  Filet vertical centre entre deux cellules. Un pseudo-element plutot qu'une
    bordure : la bordure du dernier element devrait etre annulee a part, et un
    filet doit rester entre deux valeurs, jamais apres la derniere. */
.my-summary-strip .my-summary-item + .my-summary-item {
    position: relative;
    padding-left: calc(var(--my-space-xl) * 2);
}

.my-summary-strip .my-summary-item + .my-summary-item::before {
    content: '';
    position: absolute;
    left: var(--my-space-xl);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: var(--my-border-default);
}

.my-summary-item__label {
    font-size: var(--my-font-size-xs);
    font-weight: var(--my-font-weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--my-text-muted);
    white-space: nowrap;
}

.my-summary-item__value {
    font-size: var(--my-font-size-lg);
    font-weight: var(--my-font-weight-bold);
    letter-spacing: 0.03em;
    color: var(--my-text-heading);
    white-space: nowrap;
}

/* Curseur d'aide quand un detail est disponible au survol. */
.my-summary-item__value[title]:not([title='']) {
    cursor: help;
}


/* =============================================================================
   MyEmptyView
   ============================================================================= */

.my-empty-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--my-space-xl) var(--my-space-lg);
    text-align: center;
}

.my-empty-view__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--my-space-lg);
    border-radius: var(--my-radius-lg);
}

/* Les trois teintes de l'original. Gray reste gris : un etat vide normal ne doit
   pas attirer l'oeil plus que le reste de l'ecran. */
.my-empty-view__icon--gray {
    background: var(--my-neutral-100);
    color: var(--my-neutral-300);
}

.my-empty-view__icon--orange {
    background: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
}

.my-empty-view__icon--blue {
    background: var(--my-info-100);
    color: var(--my-info-500);
}

.my-empty-view__icon .mud-icon-root {
    color: inherit;
}

.my-empty-view__title {
    margin: 0 0 var(--my-space-sm);
    font-size: var(--my-font-size-lg);
    font-weight: var(--my-font-weight-bold);
    color: var(--my-text-heading);
}

.my-empty-view__subtitle {
    max-width: 40ch;
    margin: 0 0 var(--my-space-lg);
    line-height: var(--my-line-height-loose);
    color: var(--my-text-muted);
}


/* =============================================================================
   MyReorderGrid
   ============================================================================= */

.my-reorder {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--my-border-default);
    border-radius: var(--my-radius-sm);
    overflow: auto;
}

.my-reorder__lignes {
    flex: 1 1 auto;
    min-height: 0;
}

/* Texte gris discret, comme l'original : une liste vide dans un editeur d'ordre
   n'est pas une impasse, seulement une etape avant l'ajout des lignes. */
.my-reorder__vide {
    padding: var(--my-space-md);
    color: var(--my-text-muted);
    font-size: 0.875rem;
}

/* La poignee n'apparait qu'une fois le glisser-deposer branche : un curseur de
   saisie sur une liste en lecture seule promet ce qui n'est pas possible. */
.my-reorder--actif > * {
    cursor: grab;
}

.my-reorder--actif > *:active {
    cursor: grabbing;
}

/* La ligne saisie s'efface sans disparaitre : elle doit rester reperable pendant
   le deplacement, tout en cessant de concurrencer la cible. */
.my-reorder__lignes > .is-dragging {
    opacity: 0.4;
}

/* Cible de depot : un trait sur le bord haut plutot qu'un fond, qui se lirait
   comme une selection. */
.my-reorder__lignes > .is-drop-target {
    box-shadow: inset 0 2px 0 0 var(--my-action-primary);
}


/* =============================================================================
   MyDataGridFilterViewPanel et MyDataGridConfigurationDetail
   ============================================================================= */

.my-view-bar {
    display: flex;
    align-items: center;
    gap: var(--my-space-sm);
    /* La barre se place a droite du titre de liste, ou elle ne concurrence pas les
       actions principales de l'ecran. */
    margin-left: auto;
}

.my-view-bar__liste {
    /* Assez pour un nom de cinquante caracteres tronque proprement, sans occuper la
       largeur que les actions de l'ecran reclament. */
    width: 15rem;
    flex: 0 1 auto;
}

/*  Les trois actions dans un seul cadre arrondi plutot que trois boites separees :
    elles portent sur la meme chose - la vue - et trois cadres suggereraient trois
    fonctions sans rapport. */
.my-view-bar__actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-md);
    background: var(--my-surface-card);
    flex-shrink: 0;
}

.my-view-bar__actions .mud-icon-button {
    border-radius: var(--my-radius-sm);
    transition: background-color var(--my-transition-fast), color var(--my-transition-fast);
}

/*  Teinte de la marque au survol. L'original forcait la couleur du portail client,
    ecrite en clair : la marque Indeso l'affichait orange elle aussi. */
.my-view-bar__actions .mud-icon-button:hover:not(:disabled) {
    background-color: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
}

.my-view-bar__entree {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--my-space-sm);
    width: 100%;
}

.my-view-bar__nom {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- Fenetre de configuration ---- */

/* Fond gris et cadre net : la section identite se distingue de la zone des
   filtres, en pointilles. La classe mud-background-gray de l'original n'existe
   pas ici, la teinte passe donc par un token. */
.my-view-config__identite.mud-paper {
    background: var(--my-surface-sunken);
    border-radius: var(--my-radius-md);
}

/* border-dashed de l'original : la zone des filtres annonce un contenu variable,
   fourni par l'ecran. */
.my-view-config__filtres.mud-paper {
    border: 2px dashed var(--my-border-default);
    border-radius: var(--my-radius-md);
}

/*  Supprimer a gauche, le reste des actions a droite - fidele a Boracay. Les
    marges reprennent le px-4 pb-2 de l'original. */
.my-view-config__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 var(--my-space-md) var(--my-space-xs);
}


/* =============================================================================
   Grille en chargement - lignes squelettes (regle projet, 25/08/2026)
   -----------------------------------------------------------------------------
   Rendues par MyDataGrid a la place de NoRecordsContent tant que Loading est
   vrai : l'utilisateur voit que des lignes arrivent, jamais un corps vide ni
   "Aucun element a afficher" pendant l'attente - meme tres courte.
   ============================================================================= */
.my-grid-loading {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    width: 100%;
}

.my-grid-loading__row {
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--my-surface-sunken, #f0f0f1) 25%,
        var(--my-border-subtle, #e2e2e4) 37%,
        var(--my-surface-sunken, #f0f0f1) 63%
    );
    background-size: 400% 100%;
    animation: my-grid-loading-shimmer 1.2s ease infinite;
}

@keyframes my-grid-loading-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}


/* =============================================================================
   Actions de ligne au survol (regle projet, 25/08/2026)
   -----------------------------------------------------------------------------
   Dans les grilles enfants (contacts, adresses...), les boutons modifier /
   supprimer d'une ligne sont enveloppes dans .my-row-actions : invisibles au
   repos, ils apparaissent au survol de la ligne. Sur un ecran tactile (pas de
   survol), ils restent visibles en permanence.
   ============================================================================= */
.my-row-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.mud-table-row:hover .my-row-actions,
.my-row-actions:focus-within {
    opacity: 1;
}

@media (hover: none) {
    .my-row-actions {
        opacity: 1;
    }
}