/* =============================================================================
   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. */
.my-field--gridcell input {
    font-size: 0.75rem;
    padding: 0 6px !important;
    text-align: right;
}


/* =============================================================================
   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 {
    /* Laisse la place au drapeau plutot que de l'en chevaucher. */
    padding-left: calc(var(--my-space-sm) * 2 + 20px);
}

.my-phone-menu-liste {
    overflow-y: auto;
    max-height: 15em;
}

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