/*
   The phone navigation.

   Everything here is inside a max-width query, so on a desktop this file adds nothing at all and
   the existing sidebar is untouched. Kept out of site.css because that file is 2,600 lines the
   whole application depends on, and this is one self-contained feature.

   Why the bar is at the bottom: the people who use this on a phone are standing at a counter
   holding it in one hand. The top of a modern phone is the part a thumb cannot reach.
*/

.mobile-bar,
.mobile-sheet {
    display: none;
}

@media (max-width: 768px) {

    /* The horizontal strip the sidebar became. It could not show ten sections and gave no sign
       that the ones past the edge existed, which is the whole reason for this file. */
    .primary-sidebar {
        display: none !important;
    }

    #app-container {
        /* Room for the bar, plus whatever the phone's own home indicator takes. */
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    .mobile-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 8px rgba(0, 60, 125, 0.06);
    }

    .mobile-bar button {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        /* 3.25rem clears the 44px minimum a finger needs, before the safe-area padding. */
        min-height: 3.25rem;
        border: 0;
        background: transparent;
        color: var(--fg-muted);
        font-size: 0.68rem;
        cursor: pointer;
        padding: 0.35rem 0.25rem;
    }

    .mobile-bar button.active {
        color: var(--accent);
    }

    .mobile-bar svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }

    /* ---- The launcher ---- */

    .mobile-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: var(--surface);
        /* Off-screen rather than display:none, so opening it is a slide and the search field can
           be focused before the animation finishes. */
        transform: translateY(100%);
        transition: transform 0.18s ease-out;
        visibility: hidden;
    }

    .mobile-sheet.open {
        transform: translateY(0);
        visibility: visible;
    }

    .mobile-sheet-head {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.75rem 0.85rem;
        border-bottom: 1px solid var(--border);
    }

    .mobile-sheet-head input {
        flex: 1 1 auto;
        min-width: 0;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-pill);
        padding: 0.5rem 0.9rem;
        font-size: 1rem;
        color: var(--fg);
    }

    .mobile-sheet-head input:focus {
        outline: none;
        border-color: var(--accent);
    }

    .mobile-sheet-close {
        border: 0;
        background: transparent;
        color: var(--fg);
        font-size: 1rem;
        padding: 0.5rem 0.25rem;
        cursor: pointer;
        white-space: nowrap;
    }

    .mobile-sheet-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    /* La salida de la sesión: fija al pie de la hoja, fuera del cuerpo que se desplaza, para que esté
       siempre a la vista sin tener que bajar por todo el menú. */
    .mobile-sheet-foot {
        flex: 0 0 auto;
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surface);
    }

    .mobile-sheet-logout {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        /* 52 px de alto: es un objetivo de dedo, y el mismo que las entradas del menú. */
        min-height: 52px;
        padding: 0.75rem 0.95rem;
        color: var(--fg);
        text-decoration: none;
    }

    .mobile-sheet-logout small {
        margin-left: auto;
        color: var(--fg-muted);
    }

    .mobile-sheet-logout:active {
        background: var(--surface-2);
    }

    .mobile-section > button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        color: var(--fg);
        font-size: 1rem;
        font-weight: 600;
        text-align: left;
        padding: 0.9rem 1rem;
        cursor: pointer;
    }

    .mobile-section .chevron {
        transition: transform 0.15s ease-out;
        color: var(--accent);
        font-size: 0.8rem;
    }

    .mobile-section.expanded .chevron {
        transform: rotate(90deg);
    }

    .mobile-section-items {
        display: none;
        background: var(--surface-2);
    }

    .mobile-section.expanded .mobile-section-items {
        display: block;
    }

    /* In search results the grouping is noise — the match is the answer. */
    .mobile-sheet-body.searching .mobile-section > button {
        display: none;
    }

    .mobile-sheet-body.searching .mobile-section-items {
        display: block;
        background: var(--surface);
    }

    .mobile-entry {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--border);
        background: transparent;
        color: var(--fg);
        font-size: 0.95rem;
        text-align: left;
        padding: 0.8rem 1rem 0.8rem 1.5rem;
        cursor: pointer;
    }

    .mobile-entry-icon {
        width: 20px;
        height: 20px;
    }

    .mobile-entry.hidden {
        display: none;
    }

    .mobile-empty {
        padding: 2rem 1rem;
        text-align: center;
        color: var(--fg-muted);
    }
}