/* Mobile search panel hidden on desktop; shown via media query below */
#mobile-search-panel { display: none; }

/* ── Mobile layout (≤ 768px) ─────────────────────── */
@media (max-width: 768px) {
    /* Show hamburger */
    #ham-btn { display: flex !important; }
    /* Restore left padding to clear ham button */
    .search { padding-left: 44px !important; }

    /* Sidebar: fixed overlay, starts off-screen left, slides in via transform */
    .sidebar {
        position: fixed !important;
        left: -300px !important;
        transform: translateX(0) !important;
        transition: transform 0.25s ease !important;
        z-index: 200 !important;
    }
    /* Show sidebar when toggled (body.close = open on mobile) */
    body.close .sidebar {
        transform: translateX(300px) !important;
    }
    /* Content stays put — override Docsify's translateX(300px) push */
    .content { transform: none !important; margin-left: 0 !important; padding-top: 46px !important; }
    body.close .content { transform: none !important; margin-left: 0 !important; filter: blur(3px) brightness(0.6); }
    .content, #page-title-bar, #breadcrumb { transition: filter 0.25s ease; }
    body.close #page-title-bar, body.close #breadcrumb { filter: blur(3px) brightness(0.6); }

    /* Mobile title bar — full width, auto height, two-row */
    #page-title-bar {
        display: flex !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        min-height: 46px !important;
        padding: 0 12px 6px 52px !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }
    /* Home button — inline, not absolute */
    #page-title-bar .ptb-home {
        position: static;
        width: 28px;
        height: 28px;
        margin-right: 8px;
        flex-shrink: 0;
    }
    /* Title — fills row 1, truncates */
    #page-title-bar .ptb-name {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: var(--fs-base) !important;
        margin: 0 !important;
    }

    /* Breadcrumb — full width below title bar */
    #breadcrumb {
        top: 46px !important;
        left: 0 !important;
        right: 0 !important;
    }
    body.has-breadcrumb .content { padding-top: 84px !important; }
    /* When sidebar is open, breadcrumb must go behind <main> (z-index:0 stacking context).
       Breadcrumb is a body child at z-index:98; <main> creates a stacking context at z-index:0
       so any body child with z-index > 0 paints on top of <main> (and the sidebar inside it).
       Setting z-index:-1 puts breadcrumb below <main>'s stacking context, letting sidebar cover it. */
    body.close #breadcrumb { z-index: -1 !important; }

    /* Nav tree adjustments for mobile */
    #sidebar-nav-section { min-height: 0; }
    .team-nav-select { max-width: 106px; }
    #toc-nav { max-height: 35%; }

    /* Hide sidebar search — moved to standalone panel */
    .sidebar .search { display: none !important; }
    /* Search results in sidebar — redirect below title bar */
    .search .results-panel {
        min-width: 0 !important;
        width: calc(100vw - 16px) !important;
        position: fixed !important;
        top: 46px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        z-index: 500 !important;
        border-radius: 0 0 8px 8px !important;
    }

    /* Mobile search panel — inline next to ham button, always visible */
    #mobile-search-panel {
        display: flex;
        position: fixed;
        top: 0;
        left: 44px;
        right: 0;
        height: 46px;
        background: var(--c-dark);
        z-index: 300;
        align-items: center;
        padding: 0 12px 0 8px;
        gap: 8px;
        border-bottom: 1px solid var(--c-border-dark);
    }
    #mobile-search-panel > .fa-magnifying-glass {
        color: var(--c-subtle);
        font-size: var(--fs-base);
        flex-shrink: 0;
    }
    #mobile-search-panel input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        font-size: var(--fs-base);
        font-family: inherit;
    }
    #mobile-search-panel input::placeholder { color: var(--c-subtle); }
    .msp-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        color: var(--c-muted);
        font-size: var(--fs-base);
        flex-shrink: 0;
        text-decoration: none;
        border-radius: 6px;
        transition: color 0.15s;
    }
    .msp-icon:hover { color: var(--c-surface); }
    /* Hide title bar elements that are replaced by the inline search */
    #page-title-bar .ptb-home,
    #page-title-bar .ptb-name { display: none !important; }
}