/* =============================================================================
   Conteneurs - modales, onglets, chargement, ecrans de liste
   -----------------------------------------------------------------------------
   Ces regles vivaient dans des blocs <style> a l'interieur des composants, ce qui
   posait deux problemes. Blazor recopie un tel bloc dans la page a chaque
   instance : dix modales ouvertes tour a tour laissaient dix fois les memes
   quarante lignes. Et une regle enfermee dans un composant ne peut pas etre
   surchargee proprement par le consommateur, ce qui obligeait a la marquer
   prioritaire - l'original comptait huit declarations forcees pour la seule
   modale.
   ============================================================================= */


/* =============================================================================
   MyModal
   ============================================================================= */

.mud-dialog.my-modal {
    border-radius: var(--my-radius-lg);
}

/*  Largeurs : un jeu ferme de quatre paliers. La largeur est donnee en pourcentage
    avec un maximum, de sorte qu'une modale reste utilisable sur un ecran etroit
    sans avoir a prevoir un cas mobile pour chaque taille. */
.mud-dialog.my-modal--small { width: 100%; max-width: 420px; }
.mud-dialog.my-modal--medium { width: 100%; max-width: 640px; }
.mud-dialog.my-modal--large { width: 100%; max-width: 900px; }

.mud-dialog.my-modal--full {
    width: 90vw;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

/*  Taille plein ecran : le corps devient la zone qui defile, et non la page.
    L'en-tete et le pied doivent rester visibles - c'est toute la raison de cette
    taille, employee par les visionneuses de document. */
.my-modal--full .mud-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.my-modal--full .my-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ---- En-tete ---- */

.my-modal .mud-dialog-title {
    padding: var(--my-space-md) var(--my-space-lg);
    border-bottom: 1px solid var(--my-border-subtle);
}

.my-modal__header {
    display: flex;
    align-items: center;
    gap: var(--my-space-md);
}

.my-modal__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--my-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
}

.my-modal__titles {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/*  Le titre coupe a la largeur disponible plutot que de passer a la ligne : une
    modale dont l'en-tete grandit deplace son corps a l'ouverture. Les titres sont
    des references ou des noms d'operation, assez courts pour que la coupe reste
    exceptionnelle. */
/* Fidele a Boracay : le titre suit la couleur d'action de la marque, pas le
   texte de titre neutre. */
.my-modal__title {
    font-size: 1.05rem;
    font-weight: var(--my-font-weight-bold);
    line-height: var(--my-line-height-snug);
    color: var(--my-action-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.my-modal__subtitle {
    font-size: var(--my-font-size-sm);
    color: var(--my-text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.my-modal__close {
    flex: 0 0 auto;
}

/*  MudBlazor peut ajouter sa propre croix, via ses options de dialogue. MyModal
    fournit la sienne, placee dans l'en-tete avec le titre : celle de MudBlazor est
    masquee, sinon les deux se superposent. */
.my-modal .mud-button-close {
    display: none;
}

/* MudBlazor reserve 64 px a droite du titre pour sa croix. Elle est masquee, la
   reserve n'a donc plus de raison d'etre. */
.my-modal .mud-dialog-title:has(.mud-button-close) {
    padding-inline-end: var(--my-space-lg);
}

/* ---- Corps et pied ---- */

.my-modal .mud-dialog-content {
    padding: var(--my-space-lg);
}

.my-modal .mud-dialog-actions {
    padding: var(--my-space-sm) var(--my-space-lg);
    border-top: 1px solid var(--my-border-subtle);
}

.my-modal__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--my-space-sm);
    width: 100%;
}

/* Sans actions, le pied disparait entierement : garder sa bordure et sa marge
   laisserait une bande vide sous le corps. */
.my-modal .mud-dialog-actions:has(.my-modal__actions:empty) {
    display: none;
}


/* =============================================================================
   MyTabs
   ============================================================================= */

/*  Typographie commune aux deux variantes.

    La casse n'est pas forcee : l'original passait les libelles en minuscules, ce
    qui contredisait les appelants qui les ecrivaient en capitales. La direction
    est imposee en ligne parce que MudBlazor empile icone et libelle par defaut,
    ce qui double la hauteur de la barre. */
.my-tabs--underline .mud-tab,
.my-tabs--pill .mud-tab {
    flex-direction: row;
    gap: 6px;
    font-size: var(--my-font-size-md);
    font-weight: var(--my-font-weight-medium);
    letter-spacing: 0;
    text-transform: none;
    color: var(--my-text-muted);
}

/* ---- Variante soulignee ---- */

.my-tabs--underline,
.my-tabs--underline .mud-tabs-tabbar-inner {
    min-height: 38px;
}

.my-tabs--underline .mud-tab-slider {
    background-color: var(--my-action-primary);
}

.my-tabs--underline .mud-tab.mud-tab-active {
    color: var(--my-action-primary);
    font-weight: var(--my-font-weight-bold);
}

/* Fond transparent au survol : le trait suffit a designer l'onglet vise, et un
   fond en plus ferait clignoter la barre au passage de la souris. */
.my-tabs--underline .mud-tab:hover {
    background-color: transparent;
    color: var(--my-action-primary);
}

/* ---- Variante pastille ---- */

.my-tabs--pill .mud-tabs-tabbar {
    padding: 7px;
    border: 1px solid var(--my-border-subtle);
    border-radius: 18px;
    background: var(--my-surface-card);
    box-shadow: var(--my-shadow-md);
}

.my-tabs--pill .mud-tabs-tabbar-content {
    gap: var(--my-space-sm);
}

/* Le trait de MudBlazor n'a pas de sens ici : c'est le fond de la pastille qui
   designe l'onglet actif. */
.my-tabs--pill .mud-tab-slider {
    display: none;
}

.my-tabs--pill .mud-tab {
    border-radius: var(--my-radius-md);
    transition: color var(--my-transition-fast), background-color var(--my-transition-fast);
}

.my-tabs--pill .mud-tab:hover {
    background-color: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
}

.my-tabs--pill .mud-tab.mud-tab-active,
.my-tabs--pill .mud-tab.mud-tab-active:hover {
    background-color: var(--my-action-primary);
    color: var(--my-action-primary-text);
    font-weight: var(--my-font-weight-bold);
}

/* ---- Mode navigation ---- */

/* Les panneaux n'ont pas de contenu : c'est la page atteinte qui l'affiche. */
.my-tabs--nav .mud-tabs-panels {
    display: none;
}


/* =============================================================================
   MyLoadableContent
   ============================================================================= */

/*  Centre dans la place dont il dispose, plutot que colle en haut a gauche comme
    l'original : un indicateur excentre saute d'un coin a l'autre au moment ou le
    contenu le remplace. */
.my-loadable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--my-space-md);
    padding: var(--my-space-xl);
}

.my-loadable__label {
    font-size: var(--my-font-size-sm);
    color: var(--my-text-muted);
}


/* =============================================================================
   MyListMainContentStack
   -----------------------------------------------------------------------------
   Ecran de liste : hauteur fixe, defilement a l'interieur du tableau.

   Ces regles vivaient dans le global.scss de l'application, sous la classe
   bcy-list-page : la bibliotheque produisait un marqueur dont elle n'avait pas le
   style, et un projet qui reprenait le composant sans recopier la feuille
   obtenait une liste sans defilement interne.
   ============================================================================= */

.my-list-page {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/*  Le tableau prend la hauteur restante et defile seul. L'en-tete de colonnes et
    la pagination, qui l'encadrent, restent donc visibles pendant le parcours des
    lignes - c'est precisement ce qu'on attend d'un ecran de liste.

    Le selecteur cible .mud-data-grid : MyDataGrid rend un MudDataGrid, dont le
    conteneur porte cette classe et non .mud-table, propre a MudTable. */
.my-list-page .mud-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}

.my-list-page .mud-data-grid .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/*  MyTabs imbrique dans une fiche a onglets (un MyListMainContentStack qui ne
    contient que des onglets, eventuellement dans un formulaire) : l'en-tete des
    onglets reste fixe, et c'est le panneau actif qui remplit l'espace restant et
    defile en interne.

    Le padding du stack s'annule dans ce cas : sans onglet, il aere le contenu ;
    avec onglet, il decalerait la barre d'onglets de la barre de titre au-dessus,
    qui n'a pas ce vide. */
.my-list-page:has(> .mud-tabs),
.my-list-page:has(> .mud-form > .mud-tabs) {
    padding: 0 !important;
}

.my-list-page > .mud-form,
.my-list-page > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.my-list-page .mud-tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.my-list-page .mud-tabs > .mud-tabs-toolbar {
    flex: 0 0 auto;
}

.my-list-page .mud-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.my-list-page .mud-tabs .mud-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*  .mud-tab-panel est rendu en display:contents : c'est son enfant direct qui
    devient l'item flex de .mud-tabs-panels, et qui doit donc remplir l'espace a
    sa place. */
.my-list-page .mud-tabs .mud-tabs-panels > .mud-tab-panel > * {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}