/* =============================================================================
   Indeso Design System - charpente d'ecran
   -----------------------------------------------------------------------------
   Styles de la structure d'une application : barre laterale, barre de titre,
   zone de contenu. Separes de components.css parce qu'ils decrivent une mise
   en page et non des composants autonomes : une application charge toujours
   l'ensemble, alors qu'elle pourrait n'utiliser qu'une partie des composants.

   Origine : les regles .bcy-* de Naruto.SharedUI/wwwroot/css/global.css, et le
   bloc <style> de MyStickyAppBar.razor. Le prefixe passe de bcy- a my-, et les
   couleurs en dur (#EF7C59, #373854, #888, #fdf2ef...) passent par les tokens,
   ce qui rend la navigation rehabillable par client.
   ============================================================================= */


/* =============================================================================
   MyShell - conteneur racine
   ============================================================================= */

.my-shell {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    color: var(--my-text-heading);
}

.my-shell-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    background-color: var(--my-surface-page);
}

.my-main-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--my-space-md);

    /*  Defilement fluide vers les ancres.

        Blazor traite lui-meme les fragments d'adresse et amene l'element cible a
        l'ecran, mais sans animation : le saut est brutal et l'on perd le fil de
        l'endroit d'ou l'on vient. Le regler ici plutot qu'en JavaScript couvre
        aussi bien le defilement declenche par Blazor que celui demande par du
        code, sans avoir a se coordonner avec lui.

        Une remise en haut lors d'un changement d'ecran doit en revanche rester
        instantanee : elle passe un behavior explicite, qui l'emporte sur cette
        regle.

        A SAVOIR SI LE DEFILEMENT VERS LES ANCRES CESSE DE FONCTIONNER
        Cette regle n'a pas pu etre validee automatiquement : dans un onglet pilote
        par outillage, les defilements animes ne s'executent pas, et l'activer y
        supprime tout defilement programmatique. Le comportement attendu dans un
        navigateur ordinaire est un deplacement fluide vers la section visee.
        Si un doute survient, passer cette valeur a auto retablit le saut immediat,
        qui lui est verifie. */
    scroll-behavior: smooth;
}

/* Respecte le reglage systeme de reduction des animations : un defilement anime
   peut provoquer un malaise chez les personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
    .my-main-content {
        scroll-behavior: auto;
    }
}


/* =============================================================================
   MyStickyAppBar
   Anciennement le bloc <style> du composant, qui portait huit !important.
   Ils sont devenus inutiles : la specificite des selecteurs ci-dessous suffit
   a depasser celle de MudBlazor.
   ============================================================================= */

.mud-paper.my-appbar {
    position: sticky;
    top: 0;
    z-index: var(--my-z-sticky);
    flex: 0 0 auto;
    height: var(--my-appbar-height);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--my-border-subtle);
}

.my-appbar__inner {
    height: 100%;
    padding: 0 var(--my-space-lg);
}

.my-appbar__title-block {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.my-appbar__icon-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--my-radius-md);
    background: rgba(var(--my-brand-primary-rgb), 0.12);
    transition: transform 0.25s ease, background 0.25s ease;
}

.my-appbar__icon-pill:hover {
    transform: rotate(-6deg);
    background: rgba(var(--my-brand-primary-rgb), 0.18);
}

.my-appbar__icon-pill .mud-icon-root {
    color: var(--my-action-primary);
}

.my-appbar__text {
    min-width: 0;
    line-height: 1.15;
}

.mud-typography.my-appbar__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--my-font-weight-heavy);
    color: var(--my-text-heading);
    letter-spacing: -0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mud-typography.my-appbar__subtitle {
    margin: 1px 0 0;
    font-size: 0.78rem;
    font-weight: var(--my-font-weight-medium);
    color: var(--my-text-muted);
    letter-spacing: 0.1px;
}

.my-appbar__actions {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .my-appbar__inner {
        padding: 0 var(--my-space-md);
    }

    /* Sous 768 px, le sous-titre passerait sur deux lignes et ferait deborder
       la barre : il est masque plutot que tronque. */
    .mud-typography.my-appbar__subtitle {
        display: none;
    }
}


/* =============================================================================
   MyNavSidebar
   ============================================================================= */

.my-sidebar {
    position: relative;
    z-index: var(--my-z-drawer);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--my-surface-card);
    border-right: 1px solid var(--my-border-default);
    box-shadow: 4px 0 18px rgba(var(--my-neutral-800-rgb), 0.06);
    transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.my-sidebar.is-open { width: var(--my-sidebar-width); }
.my-sidebar.is-mini { width: var(--my-sidebar-width-mini); }

/* ---- Bouton de replis, sur le bord droit ----
   Invisible au repos, revele au survol de la barre : il ne consomme aucune
   place a l'ecran tout en restant atteignable au clavier. */

.my-sidebar-toggle {
    position: absolute;
    top: 56px;
    right: -14px;
    z-index: 70;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-full);
    background-color: var(--my-surface-card);
    color: var(--my-text-heading);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--my-neutral-800-rgb), 0.12);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease,
                background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.my-sidebar:hover .my-sidebar-toggle,
.my-sidebar-toggle:focus-visible {
    opacity: 1;
    transform: translateX(0);
}

.my-sidebar-toggle:hover {
    background-color: var(--my-brand-primary-subtle);
    border-color: var(--my-action-primary);
    color: var(--my-action-primary);
}

/* ---- Zone de logo ---- */

.my-sidebar-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--my-appbar-height);
    padding: 0 18px;
    border-bottom: 1px solid var(--my-border-subtle);
    background: linear-gradient(180deg, var(--my-brand-primary-subtle) 0%, var(--my-surface-card) 100%);
}

.my-sidebar-logo {
    display: block;
    height: 38px;
    width: auto;
    object-fit: contain;
}

.my-sidebar-logo-mini {
    display: block;
    height: 38px;
    width: 38px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 0 50%;
}

/* Repli tant qu'aucun logo n'est fourni. */
.my-sidebar-logo-text {
    font-size: var(--my-font-size-lg);
    font-weight: var(--my-font-weight-heavy);
    color: var(--my-action-primary);
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Navigation ---- */

.my-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--my-space-md) 12px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--my-neutral-300) transparent;
}

.my-sidebar-nav::-webkit-scrollbar { width: 6px; }

.my-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--my-neutral-300);
    border-radius: 3px;
}

.my-sidebar.is-mini .my-sidebar-nav { padding: var(--my-space-md) 0; }

/* ---- Intitule de section ---- */

.my-nav-section {
    display: flex;
    align-items: center;
    gap: var(--my-space-sm);
    padding: 6px 12px 8px;
    font-size: 0.66rem;
    font-weight: var(--my-font-weight-black);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--my-action-primary);
    user-select: none;
}

.my-nav-section:not(:first-child) { padding-top: 18px; }

.my-nav-section-bullet {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--my-action-primary) 0%, var(--my-action-primary-hover) 100%);
    box-shadow: 0 0 0 3px rgba(var(--my-brand-primary-rgb), 0.15);
}

/* ---- Lien principal ---- */

.my-navlink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 3px 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--my-radius-md);
    background: transparent;
    color: var(--my-text-heading);
    font-size: 0.92rem;
    font-weight: var(--my-font-weight-bold);
    letter-spacing: -0.1px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.my-navlink .mud-icon-root.my-navlink-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    font-size: 22px;
    color: var(--my-text-muted);
    transition: color 0.18s ease;
}

.my-navlink-text {
    flex: 1 1 auto;
    color: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.my-navlink:hover {
    background-color: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
    transform: translateX(2px);
    text-decoration: none;
}

.my-navlink:hover .mud-icon-root.my-navlink-icon {
    color: var(--my-action-primary);
}

/* La classe active est posee par le composant NavLink d'ASP.NET, qui compare
   l'URL courante a Href. */
.my-navlink.active {
    background: linear-gradient(135deg, var(--my-action-primary) 0%, var(--my-action-primary-hover) 100%);
    color: var(--my-action-primary-text);
    font-weight: var(--my-font-weight-heavy);
    box-shadow: 0 6px 18px rgba(var(--my-brand-primary-rgb), 0.4);
    transform: none;
}

.my-navlink.active .my-navlink-text,
.my-navlink.active .mud-icon-root.my-navlink-icon {
    color: var(--my-action-primary-text);
}

.my-navlink.active:hover { transform: none; }

/* ---- Sous-lien ---- */

.my-sublink {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--my-text-muted);
    font-size: 0.86rem;
    font-weight: var(--my-font-weight-medium);
    text-decoration: none;
    transition: all 0.18s ease;
}

.my-sublink-bullet {
    flex: 0 0 auto;
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--my-neutral-300);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.my-sublink-text { color: inherit; }

.my-sublink:hover {
    background-color: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
    transform: translateX(2px);
    text-decoration: none;
}

.my-sublink:hover .my-sublink-bullet {
    background-color: var(--my-action-primary);
    transform: scale(1.3);
}

.my-sublink.active {
    background: linear-gradient(135deg, var(--my-action-primary) 0%, var(--my-action-primary-hover) 100%);
    color: var(--my-action-primary-text);
    font-weight: var(--my-font-weight-heavy);
    box-shadow: 0 4px 14px rgba(var(--my-brand-primary-rgb), 0.35);
    transform: none;
}

.my-sublink.active .my-sublink-text { color: var(--my-action-primary-text); }

.my-sublink.active .my-sublink-bullet {
    background-color: var(--my-action-primary-text);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* ---- Barre repliee : le lien devient un carre a icone ----

   Le carre est accroche a .my-navlink-mini, l'enveloppe que le composant produit
   lui-meme quand il est replie, et non a l'etat de la barre laterale. Une entree
   repliee se dessine donc correctement partout - y compris hors de la barre, ce
   dont la vitrine a besoin pour la montrer. */

.my-navlink-mini {
    position: relative;
    display: flex;
    justify-content: center;
}

.my-navlink-mini .my-navlink {
    width: 52px;
    height: 52px;
    margin: 4px auto;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
}

.my-navlink-mini .my-navlink:hover,
.my-navlink-mini .my-navlink.active { transform: none; }


/* =============================================================================
   Pied de barre laterale : utilisateur et version
   ============================================================================= */

.my-sidebar-footer {
    position: relative;
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--my-border-subtle);
    background-color: var(--my-neutral-50);
}

.my-sidebar.is-mini .my-sidebar-footer {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.my-user-wrap { position: relative; }

.my-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    background-color: var(--my-surface-card);
    border: 1.5px solid var(--my-border-subtle);
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--my-neutral-800-rgb), 0.04);
    transition: all 0.18s ease;
}

.my-user-card:hover {
    border-color: var(--my-action-primary);
    background-color: var(--my-brand-primary-subtle);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--my-brand-primary-rgb), 0.16);
}

.my-user-card.mini {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    border-radius: 14px;
}

.my-user-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    line-height: 1.2;
}

.my-user-name {
    max-width: 100%;
    font-size: 0.88rem;
    font-weight: var(--my-font-weight-heavy);
    color: var(--my-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-user-mail {
    max-width: 100%;
    margin-top: 1px;
    font-size: 0.72rem;
    font-weight: var(--my-font-weight-medium);
    color: var(--my-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-user-card .mud-icon-root.my-user-chev {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--my-neutral-400);
    transition: color 0.18s ease;
}

.my-user-card:hover .mud-icon-root.my-user-chev {
    color: var(--my-action-primary);
}

/* ---- Avatar ---- */

.my-avatar {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--my-action-primary) 0%, var(--my-action-primary-hover) 100%);
    color: var(--my-action-primary-text);
    font-size: 0.78rem;
    font-weight: var(--my-font-weight-black);
    letter-spacing: 0.4px;
    box-shadow: 0 4px 12px rgba(var(--my-brand-primary-rgb), 0.3);
}

.my-avatar-lg {
    width: 52px;
    height: 52px;
    font-size: 1rem;
    box-shadow: 0 6px 18px rgba(var(--my-brand-primary-rgb), 0.35);
}

/* ---- Version ---- */

.my-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 6px 2px;
}

.my-version-label {
    font-size: 0.66rem;
    font-weight: var(--my-font-weight-heavy);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--my-neutral-400);
}

.my-version-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid rgba(var(--my-brand-primary-rgb), 0.25);
    border-radius: var(--my-radius-full);
    background-color: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
    font-size: 0.7rem;
    font-weight: var(--my-font-weight-heavy);
    letter-spacing: 0.2px;
}

/* ---- Menu utilisateur ---- */

.my-user-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: var(--my-z-dropdown);
    background-color: var(--my-surface-card);
    border: 1px solid var(--my-border-subtle);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(var(--my-neutral-800-rgb), 0.22);
    overflow: hidden;
}

/* Barre repliee : le menu s'ouvre a cote et non au-dessus, faute de largeur. */
.my-user-popover-mini {
    left: calc(100% + 12px);
    right: auto;
    bottom: 0;
    width: 280px;
}

.my-user-popover-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--my-border-subtle);
    background: linear-gradient(135deg, var(--my-brand-primary-subtle) 0%, var(--my-surface-card) 100%);
}

.my-user-popover-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.my-user-popover-name {
    font-size: 1rem;
    font-weight: var(--my-font-weight-heavy);
    color: var(--my-text-heading);
    line-height: 1.25;
}

.my-user-popover-mail {
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: var(--my-font-weight-medium);
    color: var(--my-text-muted);
}

.my-user-popover-badge {
    display: inline-block;
    margin-top: var(--my-space-sm);
    padding: 3px 10px;
    border-radius: var(--my-radius-full);
    background-color: var(--my-action-primary);
    color: var(--my-action-primary-text);
    font-size: 0.65rem;
    font-weight: var(--my-font-weight-heavy);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(var(--my-brand-primary-rgb), 0.3);
}

.my-user-popover-body { padding: 6px; }

.my-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--my-text-heading);
    font-size: 0.88rem;
    font-weight: var(--my-font-weight-bold);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.my-popover-item .mud-icon-root.my-popover-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--my-text-muted);
}

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

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

.my-popover-danger,
.my-popover-danger .mud-icon-root.my-popover-icon {
    color: var(--my-error-500);
}

.my-popover-danger:hover {
    background-color: var(--my-error-100);
    color: var(--my-error-500);
}

.my-popover-danger:hover .mud-icon-root.my-popover-icon {
    color: var(--my-error-500);
}

.my-popover-sep {
    height: 1px;
    margin: 6px 4px;
    background-color: var(--my-border-subtle);
}

/* Surface transparente : un clic hors du menu le ferme. */
.my-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: transparent;
}


/* =============================================================================
   MyNavGroup - entree depliable
   ============================================================================= */

.my-nav-group {
    display: block;
}

/*  Le conteneur reprend l'apparence d'un lien de navigation, mais abrite deux
    zones cliquables distinctes : le libelle mene a la page, le chevron deplie.
    Le padding est porte par ces zones et non par le conteneur, afin que la
    surface cliquable couvre toute la hauteur de l'entree. */
.my-nav-group-trigger {
    display: flex;
    align-items: stretch;
    padding: 0;
    font-family: inherit;
}

.my-nav-group-label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 0 12px 14px;
    color: inherit;
    text-decoration: none;
}

.my-nav-group-label:hover {
    text-decoration: none;
}

/* Zone du chevron : assez large pour etre atteinte au doigt sans deborder sur le
   libelle, dont le clic mene ailleurs. */
.my-nav-group-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* Le groupe contenant la page courante est signale par la couleur d'action, sans
   le fond plein reserve a l'entree reellement active : sinon deux elements
   paraitraient selectionnes en meme temps. */
.my-nav-group-trigger.has-active,
.my-nav-group-trigger.has-active .mud-icon-root.my-navlink-icon {
    color: var(--my-action-primary);
}

/* Sur la page courante le groupe reste ouvert de force : le chevron n'a plus
   d'effet, il est donc presente comme inactif plutot que faussement cliquable. */
.my-nav-group-trigger.has-active .my-nav-group-toggle {
    cursor: default;
    opacity: 0.4;
}

.my-nav-group-toggle .mud-icon-root.my-nav-group-chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--my-neutral-400);
    transition: transform 0.22s ease, color 0.18s ease;
}

.my-nav-group.is-expanded .my-nav-group-toggle .mud-icon-root.my-nav-group-chevron {
    transform: rotate(180deg);
    color: var(--my-action-primary);
}

/*  Sous-menu replie par defaut. L'animation porte sur max-height plutot que sur
    height : height ne s'anime pas depuis auto, et connaitre la hauteur exacte
    demanderait de la mesurer en JavaScript a chaque ouverture.

    La valeur depliee est un plafond genereux, pas la hauteur reelle : elle doit
    rester superieure au plus grand sous-menu, sinon celui-ci serait tronque.
    Le trait vertical a gauche rattache visuellement les sous-liens a leur
    groupe, ce que le seul retrait ne suffit pas a faire. */
.my-nav-submenu {
    max-height: 0;
    overflow: hidden;
    margin-left: 22px;
    padding-left: 12px;
    border-left: 2px solid var(--my-brand-primary-subtle);
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.my-nav-group.is-expanded .my-nav-submenu {
    max-height: 800px;
    padding-top: var(--my-space-xs);
    padding-bottom: 6px;
}