/* ==========================================================================
   HEADER MOBILE — Tiroir (bottom-sheet) pour la toolbar
   --------------------------------------------------------------------------
   Sur écrans étroits (≤ 640px), l'app-header devient trop resserré pour
   accueillir toute la toolbar en une ligne. Ce module :
     - masque la toolbar du header
     - la ré-affiche dans un tiroir accessible via un bouton « Menu » (hamburger)
     - conserve le picker de projet visible dans le header (accès rapide)
     - affiche à nouveau les libellés des boutons dans le tiroir
   Sur desktop/tablette (> 640px), rien ne change : le bouton hamburger et
   le backdrop sont masqués, la toolbar s'affiche comme avant.
   ========================================================================== */

/* Bouton hamburger : masqué par défaut (desktop / tablette) */
#btn-mobile-menu {
    display: none;
}

/* Backdrop : masqué par défaut — voile très léger, pas de flou (on garde
   le contexte visible derrière le tiroir) */
.mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(16, 24, 40, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

@media (max-width: 640px) {

    /* ----- Bouton hamburger ----- */
    #btn-mobile-menu {
        display: inline-flex;
        flex: 0 0 auto;
        position: relative;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    #btn-mobile-menu .btn-mobile-menu-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    /* Animation icône → croix quand le tiroir est ouvert */
    body.mobile-menu-open #btn-mobile-menu .fa-bars::before {
        content: "\f00d"; /* fa-xmark */
    }

    /* ----- Header : garde une seule ligne [brand | picker | hamburger] ----- */
    .app-header {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-3);
        padding-left: max(var(--sp-3), env(safe-area-inset-left));
        padding-right: max(var(--sp-3), env(safe-area-inset-right));
        padding-top: max(var(--sp-2), env(safe-area-inset-top));
        min-height: 56px;
    }

    .brand {
        flex: 0 0 auto;
    }

    /* Picker : prend l'espace restant entre logo et hamburger */
    .pm-picker-slot {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        justify-content: flex-start;
    }

    /* Bouton + : compact sur mobile (icône seule, cible tactile 36 × 36) */
    .pm-quick-new {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        min-width: 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Override explicit des contraintes définies plus haut dans responsive.css
       (max-width 140/110/92px, padding réduit, etc.)
       flex: 1 au lieu de width: 100% pour laisser la place au bouton "+" */
    .pm-picker {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100% !important;
        justify-content: flex-start;
        padding: var(--sp-2) var(--sp-3) !important;
        gap: var(--sp-2) !important;
    }

    /* projects.css masque .pm-picker-text à ≤ 720px — on le rend à nouveau visible
       puisque le header mobile laisse largement la place d'afficher le nom du diagramme */
    .pm-picker-text {
        display: inline-flex !important;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--fs-sm) !important;
    }

    .pm-picker-diagram {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Sur écrans un peu plus larges du cluster mobile, on peut réafficher
       le chemin complet projet/diagramme (cachés à ≤ 1024px) */
    @media (min-width: 480px) {
        .pm-picker-project,
        .pm-picker-sep {
            display: inline !important;
        }
    }

    /* ----- Toolbar → tiroir bas (bottom-sheet) ----- */
    .toolbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        width: 100%;

        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--sp-2);
        padding: var(--sp-3);
        padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
        padding-left: max(var(--sp-3), env(safe-area-inset-left));
        padding-right: max(var(--sp-3), env(safe-area-inset-right));

        background: var(--bg-secondary);
        border-top: 1px solid var(--border-default);
        border-top-left-radius: var(--radius-xl);
        border-top-right-radius: var(--radius-xl);
        box-shadow: 0 -8px 24px -8px rgba(16, 24, 40, 0.18);

        max-height: 80vh;
        overflow-y: auto;
        overscroll-behavior: contain;

        transform: translateY(110%);
        transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
        visibility: hidden;
    }

    /* Poignée visuelle (drag bar) en haut du sheet */
    .toolbar::before {
        content: "";
        grid-column: 1 / -1;
        justify-self: center;
        width: 44px;
        height: 4px;
        border-radius: 999px;
        background: var(--border-default);
        margin-bottom: var(--sp-1);
    }

    /* Ouvre le tiroir */
    body.mobile-menu-open .toolbar {
        transform: translateY(0);
        visibility: visible;
    }

    /* ----- Dividers → séparateurs horizontaux pleine largeur ----- */
    .toolbar .divider {
        display: block !important; /* override de responsive.css (.divider { display: none } à 640px) */
        grid-column: 1 / -1;
        width: 100%;
        height: 1px;
        margin: var(--sp-2) 0;
        background: var(--border-subtle);
    }

    /* Évite une double barre si deux dividers se retrouvent côte à côte
       (le picker a été sorti de la toolbar mais on garde les autres intacts) */
    .toolbar .divider + .divider {
        display: none !important;
    }

    /* ----- Boutons dans le tiroir : cibles tactiles ≥ 56px, avec libellés ----- */
    .toolbar .btn,
    .toolbar .btn-icon,
    .toolbar .btn-icon-sm {
        width: auto !important;
        height: auto !important;
        min-width: 0;
        min-height: 56px;
        padding: var(--sp-2) var(--sp-2);
        flex-direction: column;
        gap: 4px;
        font-size: var(--fs-xs);
        font-weight: 500;
        line-height: 1.15;
        border-radius: var(--radius-md);
        background: var(--bg-tertiary);
        color: var(--text-primary);
        text-align: center;
        white-space: normal;
    }

    .toolbar .btn:hover,
    .toolbar .btn:active {
        background: var(--surface-hover);
    }

    .toolbar .btn i {
        font-size: 1.15em;
        color: var(--accent);
    }

    /* Labels : visibles dans le tiroir (override des règles de responsive.css
       qui masquaient les spans à ≤ 1024px) */
    .toolbar .btn span {
        display: inline-block !important;
    }

    /* Libellé mobile injecté via data-mobile-label pour les boutons icône seule */
    .toolbar .btn[data-mobile-label]::after {
        content: attr(data-mobile-label);
        display: block;
        font-size: var(--fs-xs);
        font-weight: 500;
        line-height: 1.15;
    }

    /* ----- Boutons primaires (SVG / PNG) : gardent leur accent ----- */
    .toolbar .btn-primary {
        background: var(--accent);
        color: var(--text-inverse);
    }

    .toolbar .btn-primary i { color: var(--text-inverse); }

    .toolbar .btn-primary:hover,
    .toolbar .btn-primary:active {
        background: var(--accent-hover);
    }

    /* ----- Zoom-level : lisible dans sa case ----- */
    .toolbar .zoom-level {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        min-width: 0;
        padding: var(--sp-2);
        font-size: var(--fs-md);
        font-weight: 600;
        color: var(--text-primary);
        background: var(--bg-tertiary);
        border-radius: var(--radius-md);
    }

    /* Réaffiche les labels masqués aux paliers ≤ 640 / 480 / 380 */
    .toolbar #btn-example span,
    .toolbar #btn-clear span,
    .toolbar #btn-shapes-ref span,
    .toolbar #btn-export span {
        display: inline-block !important;
    }

    /* Empêche les règles qui masquaient Exemple/Effacer à ≤ 380px */
    .toolbar #btn-example,
    .toolbar #btn-clear {
        display: inline-flex !important;
    }

    /* Zoom-reset restait masqué à ≤ 480px : on le réaffiche dans le tiroir */
    .toolbar #btn-zoom-reset {
        display: inline-flex !important;
    }

    /* ----- Backdrop visible ----- */
    .mobile-menu-backdrop {
        display: block;
    }

    body.mobile-menu-open .mobile-menu-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Empêche le scroll derrière le sheet */
    body.mobile-menu-open {
        overflow: hidden;
    }
}

/* Ajustement fin ≤ 380px : 3 colonnes au lieu de 4, libellés plus compacts */
@media (max-width: 380px) {
    .toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        padding: var(--sp-2) !important;
    }

    .toolbar .btn,
    .toolbar .btn-icon,
    .toolbar .btn-icon-sm,
    .toolbar .zoom-level {
        min-height: 52px;
        font-size: 0.7rem;
    }
}

/* Ne bride pas l'orientation paysage courte : le tiroir est scrollable */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 640px) {
    .toolbar {
        max-height: 90vh;
    }
}

/* Respect des utilisateurs prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .toolbar,
    .mobile-menu-backdrop,
    #btn-mobile-menu i {
        transition: none !important;
    }
}