/* =============================================================================
   Indeso Design System - styles des composants de navigation
   ============================================================================= */


/* =============================================================================
   MyMenu
   Le panneau est rendu par MudBlazor dans un conteneur detache du composant : il
   ne peut donc pas etre atteint par un style porte par MyMenu, d'ou ces
   selecteurs globaux sur la classe qui lui est appliquee.
   ============================================================================= */

.my-menu-popover {
    border: 1px solid var(--my-border-subtle);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(var(--my-neutral-800-rgb), 0.22);
    overflow: hidden;
}

.my-menu-popover .mud-list {
    width: 100%;
    padding: 6px;
}

.my-menu-popover .mud-list-item {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    color: var(--my-text-heading);
    font-weight: var(--my-font-weight-bold);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.my-menu-popover .mud-list-item .mud-icon-root {
    color: var(--my-text-muted);
}

.my-menu-popover .mud-list-item:hover {
    background-color: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
}

.my-menu-popover .mud-list-item:hover .mud-icon-root {
    color: var(--my-action-primary);
}


/* =============================================================================
   MySplitButton
   Deux moities accolees. Les coins internes sont aplatis pour former un bloc
   unique ; les bordures adjacentes des deux boutons se lisent naturellement
   comme le separateur.
   ============================================================================= */

.my-split {
    display: inline-flex;
    align-items: stretch;
    transition: transform 0.15s ease;
}

/*  LE SOULEVEMENT AU SURVOL PORTE SUR LE BLOC, PAS SUR CHAQUE MOITIE

    MyButton se souleve d'un pixel au survol. Les deux moities etant deux
    MyButton distincts, survoler l'une la faisait monter seule tandis que
    l'autre restait en place : le bloc se disloquait, et le trait de separation
    se decalait. Le mouvement est donc annule sur les moities et reporte sur le
    conteneur, qui monte d'un seul tenant.

    C'est un ecart avec Boracay, ou les deux moities se soulevent
    independamment. */
.my-split .mud-button-root.my-split-main:hover:not(:disabled),
.my-split .mud-button-root.my-split-toggle:hover:not(:disabled) {
    transform: none;
}

.my-split:has(.mud-button-root:hover:not(:disabled)) {
    transform: translateY(-1px);
}

.my-split .mud-button-root.my-split-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.my-split .mud-button-root.my-split-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    min-width: 36px;
    padding-left: var(--my-space-xs);
    padding-right: var(--my-space-xs);
}

/* La fleche doit garder la hauteur du bouton principal. */
.my-split > .mud-button-root {
    align-self: stretch;
}

/*  En mode scinde, la fleche est imbriquee sous les conteneurs que MudBlazor
    genere autour de l'element activateur. Ils sont rendus transparents au flex,
    sans quoi la fleche se detacherait du bouton principal et perdrait sa hauteur.

    En mode bouton-menu, .my-split se trouve A L'INTERIEUR de l'activateur : ce
    selecteur ne correspond alors a rien, et ce mode reste inchange. */
.my-split > .mud-menu,
.my-split > .mud-menu > .mud-menu-activator {
    display: inline-flex;
    align-items: stretch;
    align-self: stretch;
}

/* Entrees du menu alignees sur la taille du texte des boutons, plus petite que
   le defaut des listes MudBlazor. */
.my-split-menu.mud-list-item,
.my-split-menu .mud-list-item {
    font-size: var(--my-font-size-md);
}

.my-split-menu .mud-list-item .mud-icon-root {
    font-size: 1.15rem;
}


/* =============================================================================
   MyStepTracker
   ============================================================================= */

.my-steps {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.my-steps-step {
    position: relative;
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.my-steps-circle {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--my-border-default);
    border-radius: 50%;
    background: var(--my-surface-card);
    color: var(--my-text-disabled);
    font-weight: var(--my-font-weight-heavy);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.my-steps-circle--skeleton {
    border-color: var(--my-border-subtle);
    background: var(--my-surface-sunken);
}

.my-steps-index {
    color: inherit;
    font-size: var(--my-font-size-xs);
    font-weight: var(--my-font-weight-heavy);
}

/* Etape franchie : la couleur de reussite, plus la coche portee par le composant.
   Deux signaux plutot qu'un seul, pour rester lisible sans percevoir la couleur. */
.my-steps-step--done .my-steps-circle {
    background: var(--my-success-500);
    border-color: var(--my-success-500);
    color: var(--my-neutral-0);
}

/* Etape courante : la couleur d'action, donc dependante de la marque. */
.my-steps-step--active .my-steps-circle {
    background: var(--my-action-primary);
    border-color: var(--my-action-primary);
    color: var(--my-action-primary-text);
}

/* Connecteur vers l'etape suivante. Positionne a la hauteur du centre des
   cercles et place derriere eux. */
.my-steps-line {
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 0;
    width: 100%;
    height: 2px;
    background: var(--my-border-default);
}

.my-steps-line--done {
    background: var(--my-success-500);
}

.my-steps-label {
    margin-top: var(--my-space-sm);
    color: var(--my-text-disabled);
    font-size: var(--my-font-size-xs);
    font-weight: var(--my-font-weight-bold);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.my-steps-step--done .my-steps-label {
    color: var(--my-success-500);
}

.my-steps-step--active .my-steps-label {
    color: var(--my-action-primary);
}


/* =============================================================================
   MyDetailHeader
   ============================================================================= */

.my-detail-header {
    margin-bottom: var(--my-space-lg);
}

.mud-link.my-detail-header-back {
    display: inline-flex;
    margin-bottom: 14px;
    color: var(--my-text-muted);
    font-size: 0.8rem;
    font-weight: var(--my-font-weight-bold);
    transition: color 0.15s;
}

.mud-link.my-detail-header-back:hover {
    color: var(--my-action-primary);
    text-decoration: none;
}

.my-detail-header-title-row {
    margin-bottom: var(--my-space-xs);
}

/*  LA TAILLE EST POSEE ICI, ET C'EST VOLONTAIRE

    L'original rend ce titre en Typo.h4, que son theme fixe a 2.125rem. Le theme
    de cette bibliotheque donne 1.125rem au meme niveau : s'en remettre a
    .mud-typography-h4 afficherait donc un titre de fiche a 18px la ou Boracay en
    montre 34. La valeur d'origine est reprise telle quelle, pour que la fiche ne
    depende pas de l'echelle typographique du projet hote. */
.my-detail-header-title {
    margin: 0;
    font-size: 2.125rem;
    font-weight: var(--my-font-weight-heavy) !important;
    line-height: 1.235;
    color: var(--my-text-heading);
    letter-spacing: var(--my-letter-spacing-tight);
}

.my-detail-header-subtitle {
    margin: var(--my-space-xs) 0 0;
    color: var(--my-text-body);
}

.my-detail-header-info {
    margin-top: 10px;
    color: var(--my-text-muted);
    font-weight: var(--my-font-weight-bold);
}

.my-detail-header-info .mud-icon-root.my-detail-header-info-icon {
    color: var(--my-neutral-300);
}