/* =============================================================================
   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;
}

/*  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;
}

/*  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
   ============================================================================= */

.mud-paper.my-summary-strip {
    padding: var(--my-space-sm) var(--my-space-xl);
    margin-bottom: var(--my-space-xs);
    border-radius: var(--my-radius-md);
}

/*  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);
}