/* ==========================================================================
   MOBILE.CSS — Responsive téléphone / tablette
   --------------------------------------------------------------------------
   Chargé en DERNIER (après responsive.css) pour priorité de cascade.

   RÈGLE ABSOLUE — collision de nom `.email-content` :
     - conteneur de scroll externe → cibler `.container > .email-content`
     - corps d'une carte email     → cibler `.email-item > .email-content`
     Ne JAMAIS écrire `.email-content` nu dans ce fichier.

   Breakpoints :
     - ≤1024px : correctif scroller (l'infinite scroll écoute le scroll de
       `.email-content` ; responsive.css y casse la hauteur bornée).
     - ≤768px  : régime « téléphone » (tiroirs off-canvas + swipe cartes).
   ========================================================================== */

/* ==========================================================================
   BASE (toutes tailles) — overlay & boutons de tiroir
   ========================================================================== */

/* Boutons d'ouverture des tiroirs : cachés hors mobile (affichés en ≤768px) */
.drawer-toggle-btn {
    display: none;
}

/* Overlay partagé des tiroirs (activé par JS uniquement sur mobile) */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 940;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drawer-overlay.active {
    display: block;
    opacity: 1;
}

/* ==========================================================================
   PHASE 1 — Correctif scroller (≤1024px)
   Redonne une hauteur bornée au conteneur de scroll pour que l'infinite
   scroll se redéclenche (responsive.css @1024 met height:auto/overflow:visible).
   ========================================================================== */

@media (max-width: 1024px) {
    .main-layout {
        height: auto;
    }

    .container {
        height: calc(100vh - 70px);
        height: calc(100svh - 70px);
        height: calc(100dvh - 70px); /* dernière déclaration valide = dvh (gère la barre d'URL iOS) */
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .container > .email-content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   PHASE 1 — Fondations « téléphone » (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
    body {
        min-width: 0;            /* override base.css min-width:481px */
        padding: 60px 0 0 0;     /* 60px = hauteur navbar fixe */
    }

    /* Respiration : écart sous la navbar + marges latérales/bas (safe-area incluse).
       La carte .container redevient une carte arrondie « flottante » sur le fond gris. */
    .main-layout {
        padding: 10px
                 calc(10px + env(safe-area-inset-right))
                 calc(10px + env(safe-area-inset-bottom))
                 calc(10px + env(safe-area-inset-left));
    }

    /* Hauteur exacte = viewport - navbar(60) - padding haut(10) - padding bas(10) - safe-area
       → le body fait pile 100dvh (pas de scroll de page), la liste scrolle dans .email-content. */
    .container {
        height: calc(100vh - 80px - env(safe-area-inset-bottom));
        height: calc(100svh - 80px - env(safe-area-inset-bottom));
        height: calc(100dvh - 80px - env(safe-area-inset-bottom));
    }

    /* Boutons de tiroir dans le page-header */
    .drawer-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 44px;
        padding: 0 12px;
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

    .drawer-toggle-btn:active {
        background: rgba(255, 255, 255, 0.3);
    }
}

/* ==========================================================================
   PHASE 2 — Tiroirs off-canvas (≤768px)
   Filtres + actions → tiroirs fixes glissant depuis la droite.
   La largeur est forcée sur LES DEUX états de classe pour neutraliser le
   toggling de view-manager (.sidebar-visible / .panel-visible) ; l'ouverture
   est pilotée uniquement par `transform` via `.drawer-open`.
   ========================================================================== */

@media (max-width: 768px) {
    /* Largeur — double-état + (0,2,1)!important pour battre layout.css (0,2,0)!important */
    html #filtersSidebar:not(.sidebar-visible),
    html #filtersSidebar.sidebar-visible,
    html #actionsPanel:not(.panel-visible),
    html #actionsPanel.panel-visible {
        width: 88vw !important;
        max-width: 360px;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Comportement tiroir (l'ID suffit en spécificité ; !important sur display
       pour battre le style inline `display:none`) */
    #filtersSidebar,
    #actionsPanel {
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        height: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 950;
        box-shadow: -2px 0 12px rgba(0, 0, 0, 0.18);
        border-radius: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom);
        display: block !important;
    }

    #filtersSidebar.drawer-open,
    #actionsPanel.drawer-open {
        transform: translateX(0);
    }
}

/* ==========================================================================
   PHASE 3 — Swipe sur les cartes (≤768px)
   La bande `.card-actions-side` est positionnée en absolu DERRIÈRE le corps
   de la carte ; le corps coulisse (translateX) pour la révéler.
   ========================================================================== */

@media (max-width: 768px) {
    /* padding:0 sur l'item → le corps remplit toute la carte et couvre la bande
       d'actions (sinon la bande, positionnée au bord de l'item, dépasse le corps
       rentré par le padding → un bout de bouton pointe derrière). Le padding est
       reporté sur le corps lui-même. */
    .email-item {
        position: relative;
        overflow: hidden;
        padding: 0 !important;
    }

    /* Bande d'actions révélée (rangée horizontale derrière le corps) */
    .email-item > .card-actions-side {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: auto !important;       /* override width:0 */
        opacity: 1 !important;        /* override opacity:0 du modèle hover */
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 0 8px !important;
        border-left: none;
        border-radius: 0;
        background: var(--gray-50, #f8fafc);
        z-index: 0;
    }

    /* Corps de carte : couvre la bande quand fermé, coulisse au swipe.
       padding reporté ici depuis .email-item (cf. ci-dessus). */
    .email-item > .email-content {
        position: relative;
        z-index: 1;
        background: #fff;
        padding: 12px;
        will-change: transform;
    }

    /* Pendant le drag : suivre le doigt 1:1 (désactive la transition d'animations.css) */
    .email-item > .email-content.swiping {
        transition: none !important;
    }

    /* Cibles tactiles ≥44px */
    .card-action-btn {
        width: 40px;
        height: 44px;
        font-size: 18px;
    }
}

/* ==========================================================================
   PHASE 4 — Page d'accueil (≤768px)
   dates.css gère déjà la grille de dates (→ 1 colonne) et les .option-row.
   Manquaient les éléments du haut : 4 boutons vues spéciales, recherche,
   navigation par semaine. On les rend adaptatifs ici.
   ========================================================================== */

@media (max-width: 768px) {
    /* 4 boutons vues spéciales : rangée → grille 2×2 */
    .special-views-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .special-view-btn {
        padding: 12px 10px;
        font-size: 13px;
    }

    .special-view-icon {
        font-size: 18px;
    }

    /* Barre de recherche globale : input pleine largeur, bouton dessous */
    .global-search-bar {
        flex-wrap: wrap;
    }

    .global-search-input-wrapper {
        flex: 1 1 100%;
    }

    .global-search-btn {
        flex: 1 1 100%;
    }

    /* Navigation par semaine : titre sur sa ligne, 2 boutons dessous */
    .week-navigation-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .week-navigation-header h3 {
        order: -1;
        flex-basis: 100%;
        font-size: 16px;
    }

    .week-nav-btn {
        flex: 1;
        min-width: 0;
        font-size: 12px;
        padding: 8px 10px;
    }

    /* Options de dates : un peu d'air en moins, plages qui ne débordent pas */
    .more-options-section {
        padding: 16px;
    }

    .quick-range-buttons {
        flex-wrap: wrap;
    }

    .date-selector-container {
        padding: 12px;
    }
}

/* ==========================================================================
   PHASE 5 — Modales (mobile)
   Tasks : déjà bien responsive (plein écran + empilage). Seul correctif : dvh.
   Blacklist : aucune règle mobile dédiée → on l'ajoute (plein écran téléphone).
   ========================================================================== */

/* Tasks : dvh évite que le bas passe sous la barre d'URL iOS */
@media (max-width: 1024px) {
    .tasks-modal {
        height: 100dvh;
        max-height: 100dvh;
    }
}

@media (max-width: 768px) {
    /* Blacklist en plein écran sur téléphone */
    .blacklist-overlay {
        padding: 0;
        align-items: stretch;
    }

    .blacklist-modal {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        padding: 16px;
    }

    /* Ajout de mot-clé : input + bouton en pleine largeur */
    .add-tag-container {
        flex-wrap: wrap;
    }

    .add-tag-input,
    .add-tag-btn {
        flex: 1 1 100%;
    }

    /* Footer : boutons pleine largeur (cibles tactiles confortables) */
    .blacklist-footer-actions .button-secondary,
    .blacklist-footer-actions .button-danger,
    .blacklist-footer-actions label.button-secondary {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   Tasks — sidebar des listes : barre horizontale de pastilles au lieu du
   bandeau vertical de 25vh (qui tassait tout et n'affichait que ~2 listes).
   Libère de la hauteur pour les tâches et montre plus de listes d'un coup.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .tasks-sidebar {
        width: 100%;
        max-height: none;
        flex-shrink: 0;
    }

    .sidebar-header {
        padding: 8px 12px;
    }

    .sidebar-content {
        flex: none;
        overflow: visible;
        padding: 8px 12px;
    }

    /* Conteneur en rangée scrollable horizontalement */
    .task-lists-container {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
    }

    /* Chaque liste = pastille compacte (nom + compteur) */
    .task-list-item {
        flex-shrink: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 130px;
        max-width: 210px;
        padding: 8px 12px;
    }

    .task-list-item .list-info {
        min-width: 0;
        width: 100%;
    }

    .task-list-item .list-info h4 {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Emails trop verbeux pour une pastille */
    .task-list-item .list-email {
        display: none;
    }

    /* Actions ✏️🗑️ : hover-only → inatteignables au tactile, masquées dans la barre */
    .task-list-item .list-actions {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Tasks — zone d'ajout de commentaire.
   Le bouton ➤ a la classe .btn, et le mobile de tasks.css force .btn{width:100%}
   → il passait pleine largeur et écrasait le textarea en filet à gauche.
   On lui redonne une largeur auto et on garantit que le textarea remplit.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .add-comment-section .comment-submit-btn {
        width: auto;
        flex: 0 0 auto;
        min-width: 44px;
        align-self: flex-end;
    }

    .add-comment-section .comment-input-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ==========================================================================
   PHASE 1 — Anti-zoom iOS (≤768px)
   iOS Safari zoome au focus si font-size < 16px. `!important` sur sélecteur
   d'élément bat les classes composant (non-!important) quelle que soit leur
   spécificité.
   ========================================================================== */

@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}