/*
 * app-mobile.css — phone / tablet layer for pages on Layouts/app.
 *
 * Loaded last in layout/head.php so it can trim the desktop chrome without
 * touching it. Everything here is inside a max-width query; desktop is
 * unchanged. Breakpoints follow app-shell.css: 991px is where the sidebar
 * becomes a drawer, 600px is phone.
 *
 * Sections:
 *   1. Shell gutters
 *   2. Collapsible filter panels ([data-mobile-filters], mobile-filters.js)
 *   3. /ads (Meta Ads Library)
 *   4. /stores (Explore Stores)
 *   5. Shared page heroes and quick filters
 *   6. Page fixes: /brands, /tiktok-shop, /magic-ai, /profile
 */

/* ============================================================
   1. Shell gutters
   ============================================================ */
@media (max-width: 600px) {
    body.app-shell {
        --app-shell-inset: 6px;
    }
    /* 52px top clears the floating hamburger (top 14 + 36). */
    body.app-shell .app-shell__content-body {
        padding: 52px 8px 32px !important;
    }
    body.app-shell.home-page-shell .app-shell__content-body {
        padding: 52px 10px 32px !important;
    }
    /* Floating hamburger sits on the content card corner. */
    body.app-shell .app-sidebar-floating-toggle {
        top: 12px;
        left: 12px;
    }
}

/* ============================================================
   2. Collapsible filter panels
   A panel opts in with data-mobile-filters and a direct child
   .wh-mf-toggle button. Below 992px everything else in the panel
   is hidden until the toggle opens it (.wh-mf-open).
   ============================================================ */
.wh-mf-toggle {
    display: none;
}

@media (max-width: 991px) {
    body.app-shell [data-mobile-filters] > .wh-mf-toggle {
        display: flex !important;
        align-items: center;
        gap: 8px;
        grid-column: 1 / -1;
        width: 100%;
        min-height: 40px;
        padding: 0 12px;
        margin: 0;
        box-sizing: border-box;
        border: 1px solid var(--wh-filter-bar-border, #e5e7eb);
        border-radius: var(--wh-r-md, 10px);
        background: var(--wh-filter-capsule, #ffffff);
        color: var(--app-text, #111827);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    body.app-shell [data-mobile-filters] > .wh-mf-toggle:focus-visible {
        outline: 2px solid var(--wh-accent, #3b76ff);
        outline-offset: 2px;
    }
    .wh-mf-toggle__icon {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
    }
    .wh-mf-toggle__label {
        flex: 1 1 auto;
        min-width: 0;
    }
    .wh-mf-toggle__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--wh-accent, #3b76ff);
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
    }
    .wh-mf-toggle__count[hidden] {
        display: none;
    }
    .wh-mf-toggle__chev {
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
        opacity: 0.7;
        transition: transform 0.2s ease;
    }
    [data-mobile-filters].wh-mf-open > .wh-mf-toggle .wh-mf-toggle__chev {
        transform: rotate(180deg);
    }

    /* Collapsed: only the toggle shows, and the panel drops its card chrome. */
    body.app-shell [data-mobile-filters]:not(.wh-mf-open) > :not(.wh-mf-toggle):not([data-mf-keep]) {
        display: none !important;
    }
    body.app-shell [data-mobile-filters]:not(.wh-mf-open) {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* ============================================================
   3. /ads — Meta Ads Library
   ============================================================ */
@media (max-width: 991px) {
    /* Inner card: the shell already provides the gutter. */
    body.app-shell .ads-page-wrapper form.dashboard_form.shadow-container {
        padding: 12px 10px !important;
        border-radius: 14px !important;
    }
    body.app-shell .ads-page-wrapper .explore-shops-topbar.ads-topbar--compact {
        padding: 4px 2px 0 !important;
        margin-bottom: 12px !important;
        justify-items: stretch !important;
    }
    body.app-shell .ads-page-wrapper .dashboard-meta-filters-panel.filters-bar {
        margin: 0 0 12px !important;
    }
    body.app-shell .ads-page-wrapper .ads-topbar--compact .explore-shops-heading {
        justify-content: space-between;
        gap: 8px;
    }
    body.app-shell .ads-page-wrapper #ads-topbar-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    /* Open filter panel: two capsules per row. `1fr` alone let the tab strip's
       min-content width blow the single column past the viewport. */
    body.app-shell .ads-page-wrapper .dashboard-meta-filters-panel.dashboard-filters-explore.filters-bar.wh-mf-open {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 8px !important;
    }
    body.app-shell .ads-page-wrapper .dashboard-meta-filters-panel.filters-bar.wh-mf-open > .date-filters-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body.app-shell .ads-page-wrapper .dashboard-meta-filters-panel.filters-bar > .wh-filter-tabs,
    body.app-shell .ads-page-wrapper .dashboard-meta-filters-panel.filters-bar .wh-filter-tabs-row,
    body.app-shell .ads-page-wrapper .dashboard-meta-filters-panel.filters-bar .wh-tab-strip {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    body.app-shell .ads-page-wrapper .dashboard-meta-filters-panel.filters-bar .wh-filter-tabs-prefix {
        display: none;
    }
    /* Toggle sits flush in the panel when open. */
    body.app-shell .ads-page-wrapper .dashboard-meta-filters-panel.wh-mf-open > .wh-mf-toggle {
        margin-bottom: 4px;
    }
}

@media (max-width: 600px) {
    body.app-shell .ads-page-wrapper form.dashboard_form.shadow-container {
        padding: 10px 8px !important;
    }
}

/* ============================================================
   4. /stores — Explore Stores
   ============================================================ */
@media (max-width: 991px) {
    body.app-shell .explore-shops-page-wrapper .filters-bar[data-mobile-filters] {
        gap: 8px !important;
    }
    /* Search stays visible; the toggle sits under it. */
    body.app-shell .explore-shops-page-wrapper .filters-bar[data-mobile-filters] > .wh-mf-toggle {
        flex: 1 1 100%;
    }
    body.app-shell .explore-shops-page-wrapper .filters-bar.wh-mf-open > .filters-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
    }
    body.app-shell .explore-shops-page-wrapper .filters-bar.wh-mf-open > .filters-group > * {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ============================================================
   5. Shared page heroes and quick filters
   ============================================================ */
@media (max-width: 991px) {
    /* Hero heading next to its actions. The heading's flex-basis (220px on
       /brands) turned into a fixed height once the bar stacks, and an empty
       actions block on /landers squeezed the title to 0px. Wrap instead. */
    body.app-shell .explore-shops-topbar {
        flex-wrap: wrap !important;
    }
    body.app-shell .explore-shops-topbar > .explore-shops-heading {
        flex: 1 1 auto !important;
        min-width: min(100%, 180px) !important;
    }

    /* Quick filter presets: one swipeable row instead of a stack of rows. */
    body.app-shell .explore-shops-quick-filters-primary .filter-presets-container {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    body.app-shell .explore-shops-quick-filters-primary .filter-presets-container::-webkit-scrollbar {
        display: none;
    }
    body.app-shell .explore-shops-quick-filters-primary .filter-presets-container > * {
        flex: 0 0 auto !important;
    }
}

@media (max-width: 600px) {
    /* "Save filters" next to the presets: icon only, so the presets keep the row.
       The label is a bare text node, so font-size 0 hides it visually while
       screen readers still announce it. */
    body.app-shell #explore-shops-filter-preset-save,
    body.app-shell #dashboard-filter-preset-save {
        font-size: 0 !important;
        gap: 0 !important;
        padding: 0 10px !important;
        min-width: 0 !important;
    }
}

/* ============================================================
   6. Page fixes
   ============================================================ */
@media (max-width: 991px) {
    /* /brands — results toolbar: count + search on one line, actions below. */
    body.app-shell #brands-results-meta {
        flex-wrap: wrap !important;
        row-gap: 8px;
    }
    body.app-shell #brands-results-meta > .explore-shops-results-meta__count-wrap,
    body.app-shell #brands-results-meta > .explore-shops-results-meta__actions {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    body.app-shell #brands-results-meta > .explore-shops-results-meta__actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    /* /tiktok-shop — Categories/Shops/… tabs get their own full row. */
    body.app-shell .tiktokshop-tabs-container {
        flex-wrap: wrap !important;
        row-gap: 8px;
    }
    body.app-shell .tiktokshop-tabs-container > .tiktokshop-tabs-row {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    body.app-shell .tiktokshop-tabs-container > .tiktokshop-tabs-row > .tiktokshop-tabs-scroll {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* /magic-ai — prompt gets a full row; Search and image upload sit below. */
    body.app-shell .magicai-page-wrapper .magic-ai-search-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    body.app-shell .magicai-page-wrapper .magic-ai-search-row > #typed-input {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    body.app-shell .magicai-page-wrapper .magic-ai-search-row > #applyfilters {
        flex: 1 1 auto !important;
        justify-content: center;
    }
    body.app-shell .magicai-page-wrapper .magic-ai-filters-bar.wh-mf-open {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    body.app-shell .magicai-page-wrapper .magic-ai-filters-bar.wh-mf-open > * {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Fill the cell like the select capsules (dates, range summaries). */
    body.app-shell .magicai-page-wrapper .magic-ai-filters-bar.wh-mf-open > .select-wrapper > .div-block-71,
    body.app-shell .magicai-page-wrapper .magic-ai-filters-bar.wh-mf-open > .select-wrapper > .w-embed,
    body.app-shell .magicai-page-wrapper .magic-ai-filters-bar.wh-mf-open > .select-wrapper input.form-input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* /profile — legacy Webflow section padding left a 160px hole up top. */
    body.app-shell .profile-page-wrapper .padding-section-large {
        padding-top: 0 !important;
        padding-bottom: 24px !important;
    }
}