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

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