/* ══════════════════════════════════════════════════════════════════════════
   Adaptations MOBILE UNIQUEMENT (smartphone, portrait et paysage) - tout est enfermé dans
   @media (max-width: 768px), le même point de rupture que celui déjà utilisé par le thème Radzen
   (material-base.css) et par les colonnes RadzenColumn SizeXS de l'application. Rien ici ne
   s'applique au-dessus de 768px : l'interface desktop reste strictement inchangée.

   Portée : assistant de création/modification de célébration (fenêtres plein écran), sélecteur de
   chant/prière (fenêtre plein écran), volet de détail d'une célébration (voir aussi
   Celebrations.razor.css pour la partie propre à ce composant), menu latéral (repli/icônes),
   en-tête (paroisse/utilisateur), et quelques règles d'ergonomie tactile générales.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Ergonomie générale ───────────────────────────────────────────────── */

    /* Aucune des adaptations ci-dessous n'est censée provoquer de défilement horizontal - filet de
       sécurité si un contenu déborde malgré tout (ex: RadzenDataGrid conserve son propre défilement
       horizontal interne, ce qui reste acceptable). */
    html, body {
        overflow-x: hidden;
    }

    /* Cibles tactiles : les boutons d'action des fenêtres et de la navigation (souvent en
       ButtonSize.Small, 32px, pensés pour la souris) passent sous la taille tactile recommandée
       (~40px). Non appliqué aux grilles (RadzenDataGrid) pour ne pas perturber leur densité de
       lignes (Density.Compact). */
    .rz-dialog .rz-button,
    .rz-header .rz-button,
    .rz-sidebar .rz-button {
        min-height: 40px;
        min-width: 40px;
    }

    /* ── Fenêtres (assistant de création/modification, sélection d'église, aperçus...) : plein
       écran plutôt que des largeurs fixes en pixels pensées pour desktop (900px/820px/750px/700px/
       600px/500px selon les dialogues). ── */
    .rz-dialog-wrapper {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
    .rz-dialog {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .rz-dialog-content {
        height: calc(100vh - 52px) !important;
        max-height: none !important;
        overflow-y: auto !important;
        box-sizing: border-box;
        /* display:flex + .lx-wizard-footer en margin-top:auto ci-dessous : position:sticky seul ne
           pousse le pied de page en bas QUE si le contenu déborde déjà (le sticky ne fait que
           "coller" un élément à la position qu'il aurait de toute façon en défilant) - sur une
           étape courte (peu de champs), le pied de page restait juste après le contenu, collé en
           haut de l'espace vide plutôt qu'en bas de l'écran (constaté en test réel). Le flex
           column + margin-top:auto comble cet espace, sticky prenant le relais dès que le contenu
           déborde. */
        display: flex;
        flex-direction: column;
    }
    .rz-dialog-titlebar {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* Boutons d'action de l'assistant (PRÉCÉDENT/SUIVANT/TERMINER de NouvelleCelebrationAssistant.razor,
       NOUVEAU/SÉLECTIONNER/AUCUN de SelectionnerChantPriereDialog.razor) : fixés en bas de l'écran
       plutôt que de défiler avec le contenu - une page avec beaucoup de contenu (couplets d'un
       chant, par exemple) obligeait sinon à tout faire défiler pour les atteindre. Règle globale
       (pas ::deep) : s'applique à .lx-wizard-footer quel que soit le composant qui le porte.
       position:sticky se cale sur le bord bas du plus proche ancêtre défilant, ici
       .rz-dialog-content (overflow-y:auto ci-dessus). */
    .lx-wizard-footer {
        position: sticky;
        bottom: 0;
        /* !important nécessaire : Class="rz-mt-4 lx-wizard-footer" porte aussi l'utilitaire Radzen
           .rz-mt-4 (margin-top:1rem !important) sur le même élément - sans !important ici,
           margin-top:auto ne l'emportait jamais (constaté en test : pied de page resté juste après
           le contenu au lieu d'être poussé en bas). */
        margin-top: auto !important;
        flex-shrink: 0;
        background: var(--rz-base-background-color, #fff);
        margin-left: calc(-1 * var(--rz-dialog-content-padding, 1.5rem));
        margin-right: calc(-1 * var(--rz-dialog-content-padding, 1.5rem));
        margin-bottom: calc(-1 * var(--rz-dialog-content-padding, 1.5rem));
        padding-left: var(--rz-dialog-content-padding, 1.5rem);
        padding-right: var(--rz-dialog-content-padding, 1.5rem);
        padding-top: 0.75rem;
        padding-bottom: calc(0.75rem + var(--rz-dialog-content-padding, 1.5rem));
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
        z-index: 2;
    }

    /* ── Sélecteur de chant/prière (PageTexteChampsEditeur.razor) : "fausse combo" ancrée sous le
       champ sur desktop -> plein écran sur mobile (voir aussi le bouton de fermeture ajouté dans
       PageTexteChampsEditeur.razor et les styles internes dans SelectionnerChantPriereDialog.razor.css). ── */
    .lx-popup-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        z-index: 1400 !important;
        box-sizing: border-box;
    }

    /* ── En-tête / menu latéral (ParoisseNav.razor) ──────────────────────────
       Nom de l'application (en-tête + sidebar), paroisse active et utilisateur connecté : masqués
       visuellement pour ne garder que les icônes - texte conservé pour les lecteurs d'écran
       (technique "sr-only", pas display:none). Desktop inchangé (hors media query).
       Les libellés des ÉLÉMENTS DE NAVIGATION (Cérémonies/Textes et Chants/Configuration/...) ne
       sont PAS masqués ici : un premier essai en icônes seules s'est avéré peu utilisable en test
       réel (retour utilisateur) - conservés visibles, comme sur desktop. */
    .lx-app-name,
    .rz-header .rz-ms-1 {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Menu latéral replié par défaut (voir ParoisseNav.razor, sidebarExpanded) : quand ouvert, il
       se superpose au contenu (plutôt que de partager la largeur, comme sur desktop) et se referme
       automatiquement après sélection d'un élément. Démarre SOUS l'en-tête (top: hauteur d'en-tête)
       plutôt qu'à 0 : sinon il recouvre le bouton hamburger lui-même, qui devient alors impossible
       à ré-atteindre pour refermer le menu (constaté en usage réel - --rz-header-min-height est la
       variable Radzen officielle pour cette hauteur, 3.125rem par défaut). */
    .rz-sidebar.rz-sidebar-expanded {
        position: fixed !important;
        top: var(--rz-header-min-height, 3.125rem);
        bottom: 0;
        left: 0;
        width: min(78vw, 280px) !important;
        opacity: 1 !important;
        z-index: 1300;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
    }

    /* Toile de fond assombrissant le contenu pendant que le menu est ouvert (voir le
       <div class="lx-sidebar-backdrop"> ajouté dans ParoisseNav.razor) - même raison que ci-dessus :
       s'arrête sous l'en-tête pour ne jamais couvrir le bouton hamburger. */
    .lx-sidebar-backdrop {
        position: fixed;
        top: var(--rz-header-min-height, 3.125rem);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 1290;
    }
}