/* =============================================================================
   Indeso Design System - styles des composants
   -----------------------------------------------------------------------------
   Un fichier unique, une section par composant.

   POURQUOI PAS DE <style> DANS LES COMPOSANTS
   Dans Boracay, 65 des 94 composants My* portent un bloc <style> inline. Chaque
   bloc est reinjecte dans le document a chaque instance rendue : une liste de
   trente etiquettes produit trente copies des memes regles. Ces blocs ne sont
   par ailleurs pas scopes, donc ils s'appliquent aussi aux composants MudBlazor
   internes - c'est ainsi que le style de MyLink modifiait tous les MudLink de
   la page.

   POURQUOI PAS L'ISOLATION CSS DE BLAZOR
   Elle conviendrait pour des composants autonomes, mais la plupart des My*
   heritent d'un Mud* ou l'enveloppent : les elements a styler sont produits par
   le composant parent et ne portent donc pas l'attribut de scope. Les
   surcharges devraient toutes passer par ::deep, ce qui annule l'interet.

   REGLE DE SPECIFICITE
   Les selecteurs doublent la classe MudBlazor et la notre
   (.mud-chip.my-chip) afin de depasser la specificite des regles de MudBlazor
   sans recourir a !important.
   ============================================================================= */


/* =============================================================================
   MyButton
   ============================================================================= */

/*  Valeurs alignees sur .my-da-btn de Boracay :
      border-radius   --cp-radius-md, soit 12px comme --my-radius-md
      text-transform  none
      font-weight     700
      letter-spacing  0.2px, rendu par --my-letter-spacing-wide (0.02em)
      transition      0.15s

    Un ecart assume : l'original imposait max-height 40px, remplace ici par
    min-height. max-height rogne le libelle des qu'il passe sur deux lignes,
    ce qui arrive avec les intitules longs et sur mobile. min-height garantit
    la meme hauteur au repos sans jamais couper le texte.
*/
.mud-button-root.my-btn {
    border-radius: var(--my-radius-md);
    text-transform: none;
    font-weight: var(--my-font-weight-bold);
    letter-spacing: var(--my-letter-spacing-wide);
    min-height: var(--my-control-height-md);
    transition: background-color var(--my-transition-fast),
                border-color var(--my-transition-fast),
                transform var(--my-transition-fast),
                filter var(--my-transition-fast);
}

.mud-button-root.my-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.mud-button-root.my-btn:disabled {
    opacity: 0.55;
}

/* Sur mobile, le bouton occupe la hauteur tactile et non la hauteur bureau. */
@media (max-width: 599px) {
    .mud-button-root.my-btn {
        min-height: var(--my-touch-target-min);
    }
}


/* =============================================================================
   MyLink
   ============================================================================= */

.mud-link.my-link {
    font-size: var(--my-font-size-md);
    color: var(--my-text-link);
}


/* =============================================================================
   MyCard
   Anciennement .acc-card, definie dans global.css et branchee sur les
   variables --cp-* du portail client.
   ============================================================================= */

/*  Valeurs alignees sur .acc-card de Boracay :
      padding       24px 28px       le 28px horizontal est conserve
      border-radius --cp-radius-lg  soit 20px, identique a --my-radius-lg
      border        --cp-border     #eee, rendu par --my-border-subtle
      box-shadow    --cp-shadow-md  identique a --my-shadow-md
*/
.mud-card.my-card {
    background: var(--my-surface-card);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-lg);
    padding: var(--my-space-lg) 28px;
    box-shadow: var(--my-shadow-md);
}

/* display et flex-direction explicites : ils ecrasent le display:flex column
   que MudCard applique par defaut. */
.mud-card.my-card--section {
    display: block;
}

.mud-card.my-card--row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px; /* valeur de .acc-card--row */
}

.my-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--my-space-sm);
    margin-bottom: var(--my-space-md);
}

.my-card-label {
    margin: 0;
    font-size: var(--my-font-size-2xs);
    font-weight: var(--my-font-weight-bold);
    letter-spacing: var(--my-letter-spacing-caps);
    text-transform: uppercase;
    color: var(--my-text-muted);
}

.my-card-seeall {
    display: inline-flex;
    align-items: center;
    gap: var(--my-space-xs);
    font-size: var(--my-font-size-sm);
    font-weight: var(--my-font-weight-bold);
    color: var(--my-action-primary);
    text-decoration: none;
    white-space: nowrap;
}

.my-card-seeall:hover {
    text-decoration: underline;
}

/* La fleche glisse vers la droite au survol - fidele a Boracay. */
.my-card-seeall-arrow {
    transition: transform 0.2s ease;
}

.my-card-seeall:hover .my-card-seeall-arrow {
    transform: translateX(4px);
}


/* =============================================================================
   MyChip
   ============================================================================= */

/*  Valeurs alignees sur .client-chip de Boracay :
      padding       6px 14px
      gap           5px
      font-size     0.85rem
      font-weight   600, rendu par --my-font-weight-medium (600 en Inter,
                    700 en Lato qui n'a pas de 600)
      border        --cp-border #eee, rendu par --my-border-subtle
      color         #555, rendu par --my-neutral-700 (#4e5058)
    La police n'est plus imposee : l'original forcait Inter, ce qui aurait
    empeche une etiquette de suivre la police d'un autre client.
*/
.mud-chip.my-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: auto;
    margin: 0;
    padding: 6px 14px;
    background: var(--my-surface-card);
    border: 1px solid var(--my-border-subtle);
    color: var(--my-neutral-700);
    font-size: 0.85rem;
    font-weight: var(--my-font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: background-color var(--my-transition-fast),
                border-color var(--my-transition-fast),
                color var(--my-transition-fast);
}

/* Etiquette non cliquable : ni curseur main, ni effet de survol. */
.mud-chip.my-chip.my-chip--static {
    cursor: default;
    pointer-events: none;
}

a.mud-chip.my-chip:hover {
    border-color: var(--my-action-primary);
    color: var(--my-action-primary);
}

/* ---- Variantes d'intention ----
   Toutes les variantes de Boracay passaient en font-weight 700, plus appuye que
   l'etiquette neutre. Les bordures utilisent le niveau intermediaire de chaque
   couleur : la couleur pleine en bordure serait trop contrastee sur un fond
   clair. */

/* Liste explicite plutot qu'un selecteur d'attribut : [class*="my-chip--"]
   attraperait aussi --static et --wrap, qui decrivent un comportement et non
   une intention, et une etiquette neutre non cliquable passerait en gras. */
.mud-chip.my-chip.my-chip--filled,
.mud-chip.my-chip.my-chip--success,
.mud-chip.my-chip.my-chip--danger,
.mud-chip.my-chip.my-chip--warning,
.mud-chip.my-chip.my-chip--info,
.mud-chip.my-chip.my-chip--neutral,
.mud-chip.my-chip.my-chip--teal {
    font-weight: var(--my-font-weight-bold);
}

/*  Photo d'avatar : recadree et non ajustee. Un portrait n'est jamais carre, et
    l'ajuster laisserait des bandes vides dans le cercle. */
.mud-avatar .my-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mud-chip.my-chip.my-chip--filled {
    background: var(--my-brand-primary-subtle);
    border-color: rgba(var(--my-brand-primary-rgb), 0.2);
    color: var(--my-action-primary);
}

/* Seule la variante Filled reagit au survol chez Boracay : c'est celle qui porte
   une action. Le fond s'assombrit d'un cran pour le dire. */
.mud-chip.my-chip.my-chip--filled:hover {
    background: rgba(var(--my-brand-primary-rgb), 0.16);
}

.mud-chip.my-chip.my-chip--success {
    background: var(--my-success-100);
    border-color: var(--my-success-300);
    color: var(--my-success-500);
}

.mud-chip.my-chip.my-chip--danger {
    background: var(--my-error-100);
    border-color: var(--my-error-300);
    color: var(--my-error-500);
}

.mud-chip.my-chip.my-chip--warning {
    background: var(--my-warning-100);
    border-color: var(--my-warning-300);
    color: var(--my-warning-500);
}

.mud-chip.my-chip.my-chip--info {
    background: var(--my-info-100);
    border-color: var(--my-info-300);
    color: var(--my-info-500);
}

.mud-chip.my-chip.my-chip--neutral {
    background: var(--my-surface-sunken);
    border-color: var(--my-border-subtle);
    color: var(--my-neutral-600);
}

/* Conserve pour compatibilite. Ne suit pas la marque : preferer Info. */
.mud-chip.my-chip.my-chip--teal {
    background: var(--my-tag-green-blue-bg);
    border-color: var(--my-tag-green-blue-fg);
    color: var(--my-tag-green-blue-fg);
}

/* ---- Etat selectionne d'un filtre ---- */

.mud-chip.my-chip.my-chip--active {
    background: var(--my-action-primary);
    border-color: var(--my-action-primary);
    color: var(--my-action-primary-text);
    box-shadow: 0 4px 10px rgba(var(--my-brand-primary-rgb), 0.2);
}

.mud-chip.my-chip.my-chip--active:hover {
    background: var(--my-action-primary-hover);
}

/* ---- Etiquette supprimable ---- */

.mud-chip.my-chip.my-chip--removable {
    background: var(--my-brand-primary-subtle);
    border-color: var(--my-action-primary);
    color: var(--my-action-primary);
}

.mud-chip.my-chip.my-chip--removable:hover {
    background: var(--my-action-primary);
    color: var(--my-action-primary-text);
}

.mud-chip.my-chip.my-chip--removable:hover .mud-chip-close-button {
    color: var(--my-action-primary-text);
}

/* ---- Libelle long sur plusieurs lignes ---- */

.mud-chip.my-chip.my-chip--wrap {
    display: flex;
    overflow: visible;
    padding: 12px 16px;
    font-size: 0.83rem;
    white-space: normal;
    line-height: 1.5;
}

/* ---- Libelle et compteur ---- */

.mud-chip.my-chip .my-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}

.my-chip-count {
    flex-shrink: 0;
    margin-left: var(--my-space-xs);
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--my-surface-card);
    color: var(--my-text-muted);
    font-size: 0.65rem;
    font-weight: var(--my-font-weight-bold);
    white-space: nowrap;
}

.my-chip-count--active {
    background: rgba(255, 255, 255, 0.22);
    color: var(--my-action-primary-text);
}

/* ---- Etiquette posee dans un champ ----

   UNE LISTE DEROULANTE D'ETIQUETTES EN CONTIENT UNE, ELLE NE L'AFFICHE PAS SEULEMENT
   Une liste de choix dont les entrees sont des etiquettes de statut - le statut d'un
   devis, d'une commande - rend l'etiquette choisie a l'interieur du champ, et pas
   uniquement son libelle. Elle se retrouve donc dans une boite calibree sur une ligne
   de texte.

   Une etiquette de taille normale fait 30 px. La ligne du champ en fait 19, et le
   champ 40 en version dense : l'etiquette arrivait a 0 px de la bordure inferieure,
   son bord pose dessus, ce qui la faisait paraitre coupee.

   C'EST LA MARGE DE L'ETIQUETTE QUI SE REDUIT
   Ni celle du champ, ni la hauteur de l'etiquette :
     - rogner la marge du champ ne touche pas a l'etiquette. Le champ passait a 27 px
       et la coupait pour de bon.
     - lui imposer une hauteur ne retire pas ses 6 px de marge interne, et elle porte
       son propre overflow: hidden. Serree a 20 px, c'etait son texte qui se coupait.
   La hauteur reste donc libre et suit la ligne de texte, marge comprise.

   Les entrees de la liste deroulante vivent dans un calque a part, hors du champ :
   elles gardent leur taille normale, et c'est ce qu'on veut - une liste se lit. */
.mud-chip.my-chip:where(.my-field *) {
    height: auto;
    min-height: 0;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: var(--my-font-size-xs);
    line-height: var(--my-line-height-snug);
}

/* ---- Palette d'etiquettes metier ----
   Generee a partir des memes noms que ceux acceptes par le parametre
   CustomColor. Remplace le dictionnaire C# nom vers index de l'original. */

.mud-chip.my-chip[class*="my-chip--color-"] {
    font-weight: var(--my-font-weight-bold);
}

.mud-chip.my-chip.my-chip--color-red { background: var(--my-tag-red-bg); border-color: var(--my-tag-red-fg); color: var(--my-tag-red-fg); }
.mud-chip.my-chip.my-chip--color-orange { background: var(--my-tag-orange-bg); border-color: var(--my-tag-orange-fg); color: var(--my-tag-orange-fg); }
.mud-chip.my-chip.my-chip--color-yellow { background: var(--my-tag-yellow-bg); border-color: var(--my-tag-yellow-fg); color: var(--my-tag-yellow-fg); }
.mud-chip.my-chip.my-chip--color-green { background: var(--my-tag-green-bg); border-color: var(--my-tag-green-fg); color: var(--my-tag-green-fg); }
.mud-chip.my-chip.my-chip--color-light-green { background: var(--my-tag-light-green-bg); border-color: var(--my-tag-light-green-fg); color: var(--my-tag-light-green-fg); }
.mud-chip.my-chip.my-chip--color-green-blue { background: var(--my-tag-green-blue-bg); border-color: var(--my-tag-green-blue-fg); color: var(--my-tag-green-blue-fg); }
.mud-chip.my-chip.my-chip--color-blue { background: var(--my-tag-blue-bg); border-color: var(--my-tag-blue-fg); color: var(--my-tag-blue-fg); }
.mud-chip.my-chip.my-chip--color-dark-blue { background: var(--my-tag-dark-blue-bg); border-color: var(--my-tag-dark-blue-fg); color: var(--my-tag-dark-blue-fg); }
.mud-chip.my-chip.my-chip--color-purple { background: var(--my-tag-purple-bg); border-color: var(--my-tag-purple-fg); color: var(--my-tag-purple-fg); }
.mud-chip.my-chip.my-chip--color-mauve { background: var(--my-tag-mauve-bg); border-color: var(--my-tag-mauve-fg); color: var(--my-tag-mauve-fg); }
.mud-chip.my-chip.my-chip--color-pink { background: var(--my-tag-pink-bg); border-color: var(--my-tag-pink-fg); color: var(--my-tag-pink-fg); }
.mud-chip.my-chip.my-chip--color-grey { background: var(--my-tag-grey-bg); border-color: var(--my-tag-grey-fg); color: var(--my-tag-grey-fg); }

/* Dans une cellule de datagrid, l'etiquette se compacte. */
.mud-data-grid .mud-table-cell .mud-chip.my-chip {
    padding: 2px 10px;
    font-size: 0.8rem;
}


/* =============================================================================
   Dialogues - fond flou systematique (regle projet, 25/08/2026)
   -----------------------------------------------------------------------------
   Pose directement sur l'overlay MudBlazor des dialogues : aucun ecran n'a a le
   demander, et le MudDialogProvider n'a pas besoin d'une classe dediee. Le scrim
   est cible aussi : selon la pile de composition, c'est lui qui couvre l'ecran.
   La transition MudBlazor ("all 0.3s") est neutralisee sur ces proprietes, sans
   quoi le flou n'apparait qu'en retard - voire pas du tout sur certains rendus.
   ============================================================================= */
.mud-overlay.mud-overlay-dialog,
.mud-overlay.mud-overlay-dialog .mud-overlay-scrim {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}