/* =============================================================================
   Indeso Design System - styles des champs de saisie
   -----------------------------------------------------------------------------
   Un marqueur unique, .my-field, porte par tous les champs : texte, nombre,
   liste, saisie assistee, date. L'original utilisait un marqueur different par
   type (.my-tf, .my-nf, .my-sel, .my-ac, .my-dp), ce qui obligeait a repeter
   chaque regle cinq fois et a ne pas en oublier une lors d'un ajout.

   CE QUI A DISPARU AU PORTAGE
   L'original surchargeait --mud-palette-primary sur chaque champ pour obtenir un
   contour de focus de la bonne couleur, parce que la couleur d'action n'etait pas
   declaree comme telle dans le theme. La semantique de marque etant desormais
   correcte, cette surcharge est inutile : le focus prend naturellement la couleur
   d'action de la marque active.
   ============================================================================= */


/* =============================================================================
   Contour des champs
   ============================================================================= */

/* Arrondi plus doux que le defaut de MudBlazor, qui est anguleux a cette taille.
   8px exactement comme chez Boracay (.my-tf/.my-sel/.my-ac/.my-dp) - aucun token
   de rayon ne vaut 8px pile (6 ou 12), d'ou la valeur ecrite en clair ici. */
.my-field .mud-input-outlined .mud-input-outlined-border,
.my-field .mud-input.mud-input-outlined {
    border-radius: 8px;
}

/* Centre verticalement un ChildContent compose (MudStack/MudText) dans un
   MySelect ferme - sans cette regle, un contenu personnalise se cale en haut. */
.my-field .mud-select-input,
.my-field .mud-input-slot.mud-select-input {
    display: flex;
    align-items: center;
}

/* Reserve la place de l'icone de fin sous le libelle non reduit. Par defaut
   MudBlazor autorise le libelle a occuper toute la largeur moins 14 px, ce qui
   le fait passer sous l'icone. */
.my-field .mud-input.mud-input-adorned-end ~ label.mud-input-label-outlined {
    max-width: calc(100% - 50px);
}

/* Le libelle reduit chevauche la bordure du cadre : un fond de la couleur de
   surface masque le trait derriere le texte. Sert de repli quand l'encoche du
   fieldset ne se cree pas correctement. */
.my-field .mud-shrink ~ label.mud-input-label-outlined,
.my-field .mud-input:focus-within ~ label.mud-input-label-outlined {
    background-color: var(--my-surface-card);
    padding: 0 4px;
}


/* =============================================================================
   Champ en cellule de tableau
   Hauteur reduite et bordure effacee au repos : dans une grille, un cadre par
   cellule produit un quadrillage illisible. Le cadre reapparait au survol et au
   focus, donc l'utilisateur voit qu'il peut saisir des qu'il approche.
   ============================================================================= */

.my-field--gridcell .mud-input.mud-input-outlined {
    min-height: 24px;
    border-radius: 4px;
}

.my-field--gridcell .mud-input-outlined .mud-input-outlined-border {
    border-color: transparent;
}

.my-field--gridcell:hover .mud-input-outlined .mud-input-outlined-border,
.my-field--gridcell .mud-input:focus-within ~ .mud-input-outlined-border {
    border-color: var(--my-border-default);
}

/* Chiffres alignes a droite, police reduite - fidele a Boracay. Seul
   MyNumericField pose ce marqueur, donc un selecteur generique suffit. */
/*  LA VALEUR N'EST PAS TOUJOURS DANS UN input

    Un champ de texte, un nombre et une date rendent leur valeur dans un <input>. Une
    liste de choix la rend dans un <div>, l'input n'y servant qu'a porter la valeur
    soumise et mesurant zero pixel. La regle ne visait que les input : le select
    gardait donc ses 18,5 px de marge interne, soit 56 px de haut la ou les autres
    champs tombaient a 24.

    .mud-input-slot porte les deux formes - c'est la classe de l'input pour un champ de
    texte, et celle du div pour un select.

    Les valeurs sont forcees : MudBlazor pose les siennes avec une specificite
    superieure, et la taille de police annoncee ici n'a jamais pris effet - y compris
    pour MyNumericField, seul composant qui lisait la variante jusqu'ici. */
.my-field--gridcell .mud-input-slot {
    font-size: 0.75rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.my-field--gridcell input {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/*  L'ALIGNEMENT A DROITE N'APPARTIENT QU'AUX NOMBRES

    Il etait porte par --gridcell, du temps ou seul MyNumericField savait lire cette
    variante. Etendue aux champs de texte, aux listes et aux dates, la regle y aurait
    colle le contenu a droite - or on aligne a droite une quantite ou un montant, pour
    que les unites se superposent d'une ligne a l'autre, jamais une designation.

    C'est donc MyNumericField qui pose ce second marqueur, en plus du premier. */
.my-field--gridcell-nombre input {
    text-align: right;
}


/* =============================================================================
   MyVariant.MyChips - une liste de choix dont la valeur est une etiquette

   Une liste dont les entrees sont des etiquettes de statut affiche l'etiquette choisie
   a l'interieur du champ. Un cadre contour donnait donc deux cadres imbriques : la
   boite du champ, bord gris et coins arrondis, et l'etiquette dedans avec son propre
   bord et son rayon complet.

   IL SUFFIT DE NE PAS DEMANDER LE CADRE
   Une premiere version l'effacait apres coup : bordure mise a none, hauteur remise a
   zero, libelle sorti de son encoche, champ serre sur son contenu, remontee de dix
   pixels pour rattraper l'alignement, contour de focus reconstruit sur l'etiquette,
   largeur de liste deliee de celle de l'ancre. Neuf regles, chacune reparant un effet
   de la precedente, et un alignement qui restait juste dans une rangee de champs
   encadres et faux dans une rangee de champs soulignes.

   MudBlazor sait deja afficher un champ sans boite : Variant.Text, un simple trait sous
   le contenu. MySelect le demande donc quand la variante est MyChips, et tout le reste
   tombe - le libelle est pose au-dessus par le composant, la hauteur est celle des
   champs voisins, le trait se colore au focus.

   IL RESTE UN VRAI SELECT DESSOUS
   Seule l'apparence change : le clavier, l'ouverture par Entree et le parcours aux
   fleches restent ceux de MudSelect.
   ============================================================================= */

/*  L'ETIQUETTE DEPASSERAIT PLUTOT QUE D'ETRE COUPEE

    Seule regle qui subsiste, et c'est une garde, non une reparation : aux trois emplois
    de la variante, l'etiquette tient dans sa boite - 21 px dans 29 sur une fiche, dans 32
    dans un bandeau. Mais MudBlazor met cette boite en overflow: hidden, et lui donne la
    hauteur d'une ligne de texte : une etiquette plus grande, ou un champ plus serre,
    serait rognee en bas, bord arrondi compris. C'est le defaut qu'avait la premiere
    version de la variante, quand elle remettait la hauteur du champ a zero.

    La hauteur de la boite n'est en revanche pas touchee. La rendre auto lui faisait
    gagner 3 px des que l'etiquette depassait, et le trait du champ tombait alors plus bas
    que celui de ses voisins dans une meme rangee.

    Le selecteur nomme la balise et deux classes, et ce n'est pas de la coquetterie :
    MudBlazor coupe cette boite par une regle plus specifique qu'un simple
    ".my-field--chips .mud-input-slot" - .mud-select .mud-select-input .mud-input-slot,
    soit trois classes. */
.my-field--chips div.mud-input-slot.mud-select-input {
    overflow: visible;
}


/* =============================================================================
   MyReadOnlyTextField
   Couple libelle / valeur en texte. L'ecart entre les deux est volontairement
   plus faible que l'ecart entre deux couples : c'est ce contraste qui fait
   comprendre quel libelle va avec quelle valeur.
   ============================================================================= */

/*  La disposition et les tailles viennent du MudStack et des MudText
    (Typo.caption et Typo.body1) : seule la couleur du libelle est posee ici, en
    remplacement du style en ligne de l'original. */
.my-readonly-field-label {
    color: var(--my-text-muted);
    line-height: 1.2;
}


/* =============================================================================
   Selecteur de date
   Le calendrier est rendu dans un conteneur detache du champ : il ne peut pas
   etre cible depuis .my-field, d'ou ces selecteurs globaux.
   ============================================================================= */

.mud-picker.mud-picker-paper {
    border-radius: var(--my-radius-md);
    box-shadow: var(--my-shadow-md);
}

/* Jour courant : contour seul, pour ne pas etre confondu avec le jour choisi. */
.mud-picker-calendar .mud-day.mud-current:not(.mud-selected) {
    color: var(--my-action-primary);
    border: 1px solid var(--my-action-primary);
}

.mud-picker-calendar .mud-day.mud-selected {
    background-color: var(--my-action-primary);
    color: var(--my-action-primary-text);
}

.mud-picker-calendar .mud-day:hover:not(.mud-disabled):not(.mud-selected) {
    background-color: rgba(var(--my-brand-primary-rgb), 0.1);
}


/* =============================================================================
   MyAutocomplete
   ============================================================================= */

/* Etiquettes des valeurs retenues, au-dessus du champ. La hauteur est bornee :
   au-dela d'une dizaine de valeurs, la liste defile au lieu de repousser le
   reste du formulaire. */
.my-autocomplete-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--my-space-xs);
    margin-bottom: 6px;
    max-height: 120px;
    overflow-y: auto;
}


/* =============================================================================
   MyQuantityStepper
   Trois elements accoles formant un seul controle : le cadre est porte par le
   conteneur, pas par la zone de saisie.
   ============================================================================= */

/* Pastille entierement arrondie et boutons ronds, comme l'original : le
   selecteur se lit comme un reglage compact, pas comme un champ de formulaire. */
.my-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1.5px solid var(--my-border-subtle);
    border-radius: var(--my-radius-full);
    background: var(--my-surface-card);
    color: var(--my-text-heading);
}

.my-stepper--disabled {
    opacity: 0.5;
}

.my-stepper .mud-icon-button.my-stepper-btn {
    width: 30px;
    height: 30px;
}

.my-stepper-input {
    width: 52px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--my-text-heading);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: var(--my-font-weight-heavy);
    text-align: center;
}

.my-stepper-input:disabled {
    color: var(--my-neutral-300);
}

.my-stepper-input:focus {
    outline: none;
}

/* Les fleches natives feraient doublon avec les deux boutons. */
.my-stepper-input::-webkit-outer-spin-button,
.my-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.my-stepper-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/*  Aucune adaptation mobile : l'original n'en a pas, et le selecteur garde donc
    la meme pastille de 30 pixels sur tous les ecrans. */


/* =============================================================================
   MyRangeSlider
   Deux champs de type range superposes sur un rail commun. Les champs sont
   rendus transparents : seules les poignees restent visibles, le rail et la
   portion selectionnee etant dessines par les elements dedies en dessous.
   ============================================================================= */

/* L'etat de chargement est aligne verticalement et decale, comme l'original. */
.my-slider-skeleton {
    display: flex;
    align-items: center;
}

.my-slider {
    position: relative;
}

.my-slider-bubbles {
    position: relative;
    height: 28px;
    margin-bottom: var(--my-space-xs);
}

/*  Bulle de valeur : fond plein et texte clair, avec une pointe vers la poignee -
    c'est une infobulle et non une etiquette, ce que la pointe dit. */
.my-slider-bubble {
    position: absolute;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: var(--my-font-weight-bold);
    white-space: nowrap;
    pointer-events: none;
    transition: left 0.05s;
}

.my-slider-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
}

.my-slider-bubble--primary {
    background: var(--my-action-primary);
    color: var(--my-brand-primary-contrast);
}

.my-slider-bubble--primary::after {
    border-top-color: var(--my-action-primary);
}

.my-slider-bubble--secondary {
    background: var(--my-brand-secondary);
    color: var(--my-brand-secondary-contrast);
}

.my-slider-bubble--secondary::after {
    border-top-color: var(--my-brand-secondary);
}

.my-slider-track {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
}

.my-slider-rail,
.my-slider-fill {
    position: absolute;
    height: 4px;
    border-radius: 10px;
    pointer-events: none;
}

.my-slider-rail {
    left: 0;
    right: 0;
    background: var(--my-neutral-100);
    z-index: 1;
}

.my-slider-fill {
    z-index: 2;
}

.my-slider-fill--primary {
    background: var(--my-action-primary);
}

.my-slider-fill--secondary {
    background: var(--my-brand-secondary);
}

.my-slider-input {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    /* Le champ ne recoit les clics que sur sa poignee : ailleurs, il laisserait
       passer un clic sur le rail qui deplacerait la mauvaise borne. */
    pointer-events: none;
    z-index: 5;
}

.my-slider-input:focus {
    outline: none;
}

/* Ordre de superposition : la poignee qui peut encore s'eloigner passe devant, ce
   qui permet de la ressortir quand les deux se rejoignent sur une limite. */
.my-slider-input--top {
    z-index: 6 !important;
}

/*  Pastille CLAIRE cerclee de couleur, et non l'inverse : c'est ce qui la
    distingue de la portion selectionnee, qui est pleine. Une poignee pleine se
    confondrait avec le rail rempli sur lequel elle glisse. */
.my-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--my-neutral-0);
    border: 3px solid var(--my-action-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.my-slider-input::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--my-neutral-0);
    border: 3px solid var(--my-action-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.my-slider-input--secondary::-webkit-slider-thumb {
    border-color: var(--my-brand-secondary);
}

.my-slider-input--secondary::-moz-range-thumb {
    border-color: var(--my-brand-secondary);
}

.my-slider-input:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--my-shadow-focus);
}

/* Le rail natif est masque : celui affiche est dessine par .my-slider-rail. */
.my-slider-input::-webkit-slider-runnable-track,
.my-slider-input::-moz-range-track {
    background: transparent;
    border: none;
}


/* =============================================================================
   MyPhoneInput
   Un champ unique, fidele a Boracay : un drapeau cliquable a gauche - qui
   n'apparait qu'une fois un numero saisi - ouvre un menu de recherche de pays.
   ============================================================================= */

.my-phone {
    width: 100%;
}

.my-phone-champ-cadre {
    position: relative;
}

.my-phone-number {
    width: 100%;
}

/* Le drapeau chevauche le bord gauche du champ, comme l'adornment de depart
   d'un champ MudBlazor - sans passer par ce mecanisme, qui ne sait pas rendre
   un emoji. */
/*  Positionne sur la hauteur du champ lui-meme (28px, la moitie des 56px d'un
    champ MudBlazor outlined), et non sur celle de .my-phone-champ-cadre : ce
    conteneur inclut aussi le texte d'aide sous le champ, present pour tout pays
    autre que la France, et un centrage a 50% de sa hauteur totale deplacait le
    drapeau vers le bas des qu'un texte d'aide apparaissait. */
.my-phone-drapeau {
    position: absolute;
    left: var(--my-space-sm);
    top: 28px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    border: none;
    background: transparent;
    line-height: 1;
    cursor: pointer;
    padding: 2px;
    border-radius: var(--my-radius-sm);
}

.my-phone-drapeau svg {
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--my-border-default);
}

.my-phone-drapeau:hover:not(:disabled) {
    background: var(--my-surface-sunken);
}

.my-phone-drapeau:disabled {
    cursor: default;
}

.my-phone .my-phone-number input {

/* =============================================================================
   MyChipSelect - liste deroulante a chips
   -----------------------------------------------------------------------------
   Les propositions sont des MyChip ; seule la hauteur de ligne des items est
   ajustee pour que le chip respire dans la liste.
   ============================================================================= */
.mud-list-item .my-chip-text {
    line-height: 1.4;
}