/* =============================================================================
   JAOS — Date / color pickers hors clip + grille calendrier restaurée
   =============================================================================
   Overflow :
   Panel Filament absolute z-10 clipé par .fi-main-ctn / drawers.
   → strategy.fixed + portal body (#ja-float-portal-host).

   Grille déstructurée (régression portal) :
   Les styles Filament sont NESTÉS sous .fi-fo-date-time-picker … calendar.
   Ex. theme Filament :
     .fi-fo-date-time-picker .fi-fo-date-time-picker-calendar-header { display:grid; grid-template-columns:repeat(7,…) }
     .fi-fo-date-time-picker .fi-fo-date-time-picker-calendar { display:grid; grid-template-columns:repeat(7,…) }
   Après portal vers body, le panel n’est plus descendant → display redevient
   block → lun/mar/… et 1/2/3… s’empilent en une colonne.

   Correctif : réappliquer la grille 7 colonnes sur le panel (portaled ou non),
   sans toucher au package Filament.
   ============================================================================= */

:root {
    --ja-z-datepicker: 90;
}

#ja-float-portal-host {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: var(--ja-z-datepicker);
}

#ja-float-portal-host .fi-fo-date-time-picker-panel,
#ja-float-portal-host .fi-fo-color-picker-panel {
    pointer-events: auto;
}

html.fi .fi-fo-date-time-picker-panel,
html.fi .fi-fo-color-picker-panel {
    position: fixed !important;
    z-index: var(--ja-z-datepicker) !important;
}

/* ── Grille native Filament (indépendante du parent .fi-fo-date-time-picker) ── */
html.fi .fi-fo-date-time-picker-panel {
    min-width: 18rem;
    width: max-content;
    max-width: min(22rem, calc(100vw - 1.5rem));
    box-sizing: border-box;
}

html.fi .fi-fo-date-time-picker-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem;
}

html.fi .fi-fo-date-time-picker-calendar-header {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0.25rem !important;
    width: 100%;
}

html.fi .fi-fo-date-time-picker-calendar-header-day {
    display: block !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
}

html.fi .fi-fo-date-time-picker-calendar {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(2rem, 1fr)) !important;
    gap: 0.25rem !important;
    width: 100%;
}

html.fi .fi-fo-date-time-picker-calendar-day {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2rem !important;
    min-width: 0 !important;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    max-height: 2.5rem;
    border-radius: 9999px !important;
    text-align: center !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    cursor: pointer;
}

html.fi .fi-fo-date-time-picker-time-inputs {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Les cartes / sections de formulaire ne doivent pas clipper le popover
   (le scroll reste sur .fi-main-ctn — le portal JS sort le panel du flux). */
html.fi .ja-premium-form .fi-section,
html.fi .ja-premium-form .fi-section-content-ctn,
html.fi .ja-premium-form .fi-section-content,
html.fi .ja-premium-form .fi-fo-field-wrp,
html.fi .ja-premium-form .fi-fo-component-ctn,
html.fi .ja-premium-form .fi-sc-component-ctn,
html.fi .ja-premium-section,
html.fi .ja-form-card {
    overflow: visible !important;
}

/* overflow-x: clip force aussi overflow-y: clip → calendrier coupé */
html.fi .ja-prestation-section,
html.fi .ja-prestation-section .fi-section-content,
html.fi .ja-prestation-repeater {
    overflow-x: hidden;
    overflow-y: visible;
}

/* Modales Filament : calendrier au-dessus du contenu modal */
html.fi .fi-modal .fi-fo-date-time-picker-panel,
html.fi .fi-modal .fi-fo-color-picker-panel,
html.fi #ja-float-portal-host .fi-fo-date-time-picker-panel,
html.fi #ja-float-portal-host .fi-fo-color-picker-panel {
    z-index: calc(var(--ja-z-filament-modal-nested, 70) + 20) !important;
}