/* =============================================================================
   Barre de navigation basse du téléphone (05/11/2026)
   -----------------------------------------------------------------------------
   Composant : Components/Layout/BottomNav.razor(.cs). Comportement : js/barre-basse.js.
   Sous 768 px seulement (max-width: 767.98px) : 4 destinations + « Plus » en
   bas de l'écran, à la place du menu latéral et du bouton hamburger.
   Au-dessus, rien ne change (la barre et la feuille ne sont jamais affichées).

   BottomNav est rendu en TÊTE de .app-shell : les sélecteurs « .bottom-nav ~ »
   ne s'appliquent donc que si la barre existe. Sur les pages où elle est
   masquée (borne de pointage, synthèse imprimable), le menu hamburger revient.

   Couleurs : variables du thème uniquement (app.css :root). Le thème ne
   prévoit pas de mode sombre : rien à décliner ici.
   ============================================================================= */

.bottom-nav,
.bn-veil,
.bn-sheet { display: none; }

@media (max-width: 767.98px) {
    :root { --bn-h: 64px; }
    /* Hauteur publiée pour les autres feuilles (espace groupe...), seulement
       quand la barre est réellement affichée dans la page. */
    :root:has(.bottom-nav) { --bottom-nav-h: var(--bn-h); }

    /* ----- Menu latéral, hamburger, doublons de la barre du haut ----- */
    .bottom-nav ~ .sidebar,
    .bottom-nav ~ .topbar .hamburger-btn,
    .bottom-nav ~ .topbar .sidebar-overlay { display: none !important; }
    /* Déconnexion et changement d'espace passent dans la feuille « Plus ». */
    .bottom-nav ~ .topbar .logout,
    .bottom-nav ~ .topbar .csp-switch { display: none; }

    /* ----- Espace réservé en bas : le pied de page passe au-dessus de la barre ----- */
    .bottom-nav ~ .appfoot {
        padding-bottom: calc(8px + var(--bn-h) + env(safe-area-inset-bottom, 0px));
    }
    /* Seul élément flottant en bas d'une page de ce layout (galerie de pictos).
       Les barres d'action « sticky » des pages ne collent pas sur téléphone
       (.content est en overflow-x: hidden) : elles restent dans le flux. */
    .bottom-nav ~ .content .pg-toast {
        bottom: calc(20px + var(--bn-h) + env(safe-area-inset-bottom, 0px));
    }

    /* ----- Barre ----- */
    .bottom-nav {
        display: block;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 90;
        background: var(--card);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 12px color-mix(in srgb, var(--text) 8%, transparent);
        padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        transition: transform .2s ease-out, visibility 0s;
    }
    .bn-list {
        list-style: none;
        margin: 0;
        padding: 0 4px;
        height: var(--bn-h);
        display: flex;
        align-items: stretch;
    }
    .bn-item { flex: 1 1 0; min-width: 0; display: flex; }
    .bn-tab {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 48px;
        margin: 0;
        padding: 6px 2px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none;
        border: 0;
        border-radius: 12px;
        color: var(--muted);
        font: inherit;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .bn-ico {
        width: 52px;
        height: 30px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color .15s ease-out;
    }
    .bn-lbl {
        max-width: 100%;
        font-size: 11.5px;
        line-height: 1.2;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bn-tab.active { color: var(--primary); }
    .bn-tab.active .bn-lbl { font-weight: 700; }
    .bn-tab.active .bn-ico { background: color-mix(in srgb, var(--primary) 13%, transparent); }
    /* Repère actif lisible même sans color-mix (anciens navigateurs Android). */
    .bn-tab.active::before {
        content: "";
        position: absolute;
        top: 0; left: 50%;
        width: 28px; height: 3px;
        margin-left: -14px;
        border-radius: 0 0 3px 3px;
        background: var(--primary);
    }
    .bn-tab:active .bn-ico { background: color-mix(in srgb, var(--primary) 18%, transparent); }
    .bn-tab:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }

    /* Saisie (clavier virtuel ouvert) et plein écran : la barre s'efface. */
    body.bn-kbd .bottom-nav,
    body.bn-fullscreen .bottom-nav {
        transform: translateY(110%);
        visibility: hidden;
        transition: transform .2s ease-out, visibility 0s .2s;
    }

    /* ----- Feuille « Plus » ----- */
    html.bn-lock,
    html.bn-lock body { overflow: hidden; }

    .bn-veil {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: var(--text);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease-out, visibility 0s .2s;
    }
    body.bn-sheet-open .bn-veil {
        opacity: .45;
        visibility: visible;
        transition: opacity .2s ease-out;
    }

    .bn-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1050;
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
        background: var(--card);
        color: var(--text);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px color-mix(in srgb, var(--text) 22%, transparent);
        padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .25s ease-out, visibility 0s .25s;
    }
    body.bn-sheet-open .bn-sheet {
        transform: none;
        visibility: visible;
        transition: transform .25s ease-out;
    }
    .bn-sheet.bn-dragging { transition: none; }

    .bn-grip {
        flex: none;
        width: 40px; height: 4px;
        margin: 8px auto 0;
        border-radius: 2px;
        background: var(--border);
    }
    .bn-sheet-head {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2px 4px 2px 16px;
    }
    .bn-sheet-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
    .bn-sheet-head h2:focus { outline: none; }
    .bn-sheet-head h2:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
    .bn-close {
        width: 48px; height: 48px;
        display: flex; align-items: center; justify-content: center;
        background: none; border: 0; border-radius: 12px;
        color: var(--muted);
        cursor: pointer;
    }
    .bn-close:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }

    .bn-search { flex: none; position: relative; margin: 0 16px 8px; }
    .bn-search .app-icon {
        position: absolute;
        left: 12px; top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        pointer-events: none;
    }
    .bn-search input {
        width: 100%;
        min-height: 44px;
        padding: 8px 12px 8px 36px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg);
        color: var(--text);
        font: inherit;
        font-size: 16px; /* pas de zoom automatique iOS */
    }
    .bn-search input:focus-visible { outline: 3px solid var(--primary); outline-offset: 0; border-color: var(--primary); }

    .bn-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 0 8px 8px;
    }
    .bn-group h3 {
        margin: 12px 8px 4px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--muted);
    }
    .bn-link {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        padding: 6px 10px;
        border-radius: 10px;
        color: var(--text);
        font-size: 15px;
        text-decoration: none;
    }
    .bn-link:active { background: var(--bg); }
    .bn-link:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
    .bn-link.active { color: var(--primary); font-weight: 700; background: var(--bg); }
    .bn-link-ico {
        flex: none;
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 10px;
        background: var(--bg);
        color: var(--primary);
    }
    .bn-visit { padding: 6px 10px 10px; }
    .bn-visit label {
        display: flex; align-items: center; gap: 6px;
        margin-bottom: 6px;
        font-size: 13px;
        color: var(--muted);
    }
    .bn-visit select { width: 100%; }

    .bn-hide { display: none !important; }
    .bn-noresult { display: none; margin: 16px 8px; text-align: center; color: var(--muted); }
    .bn-sheet.bn-empty .bn-noresult { display: block; }

    .bn-sheet-foot {
        flex: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 8px;
        padding: 8px 16px;
        border-top: 1px solid var(--border);
    }
    .bn-user {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        color: var(--text);
        text-decoration: none;
        border-radius: 10px;
    }
    .bn-user:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
    .bn-avatar {
        flex: none;
        width: 36px; height: 36px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: var(--primary);
        color: var(--card);
        font-weight: 700;
        font-size: 14px;
    }
    .bn-user-txt { display: flex; flex-direction: column; min-width: 0; }
    .bn-user-txt strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bn-user-txt span { font-size: 12px; color: var(--muted); }
    .bn-switch { grid-column: 1; min-width: 0; }
    /* La liste du sélecteur d'espace s'ouvre vers le haut, sur la largeur de la feuille. */
    .bn-switch .csp-switch-pop {
        top: auto;
        right: auto;
        left: 0;
        bottom: calc(100% + 6px);
        width: calc(100vw - 32px);
        max-width: 420px;
        max-height: 60vh;
        overflow-y: auto;
    }
    .bn-logout {
        grid-column: 2;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 48px;
        padding: 0 12px;
        border-radius: 10px;
        color: var(--danger);
        font-weight: 600;
        text-decoration: none;
    }
    .bn-logout:focus-visible { outline: 3px solid var(--danger); outline-offset: -3px; }

    @media (prefers-reduced-motion: reduce) {
        .bottom-nav, .bn-veil, .bn-sheet, .bn-ico { transition: none !important; }
    }
}

@media print {
    .bottom-nav, .bn-veil, .bn-sheet { display: none !important; }
}