/*
 * MarketplaceAnalytics adaptive workspace layer — V833.
 *
 * The mobile strategy intentionally does NOT compress data-dense interfaces.
 * Tables, charts and visual editors keep a usable desktop-like working width
 * and live inside touch-scrollable viewports. Ordinary forms/cards reflow.
 */

:root {
    --mobile-shell-gap: 10px;
    --mobile-drawer-width: min(318px, calc(100vw - 54px));
    --mobile-wide-min: 760px;
    --mobile-canvas-min: 900px;
}

/* Horizontal workspaces --------------------------------------------------- */
.app-mobile-wide-viewport,
.app-responsive-table-wrap,
.app-horizontal-scroll {
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.app-mobile-wide-viewport {
    position: relative;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    touch-action: pan-x pan-y;
    isolation: isolate;
}

.app-mobile-wide-viewport.can-scroll-left::before,
.app-mobile-wide-viewport.can-scroll-right::after,
.app-responsive-table-wrap.can-scroll-left::before,
.app-responsive-table-wrap.can-scroll-right::after {
    content: "";
    position: sticky;
    z-index: 12;
    top: 0;
    bottom: 0;
    width: 28px;
    height: 100%;
    pointer-events: none;
}

.app-mobile-wide-viewport.can-scroll-left::before,
.app-responsive-table-wrap.can-scroll-left::before {
    left: 0;
    float: left;
    margin-right: -28px;
    background: linear-gradient(90deg, rgba(246,246,247,.96), rgba(246,246,247,0));
}

.app-mobile-wide-viewport.can-scroll-right::after,
.app-responsive-table-wrap.can-scroll-right::after {
    right: 0;
    float: right;
    margin-left: -28px;
    background: linear-gradient(270deg, rgba(246,246,247,.96), rgba(246,246,247,0));
}

html[data-app-theme="dark"] .app-mobile-wide-viewport.can-scroll-left::before,
html[data-app-theme="dark"] .app-responsive-table-wrap.can-scroll-left::before {
    background: linear-gradient(90deg, rgba(24,25,28,.96), rgba(24,25,28,0));
}
html[data-app-theme="dark"] .app-mobile-wide-viewport.can-scroll-right::after,
html[data-app-theme="dark"] .app-responsive-table-wrap.can-scroll-right::after {
    background: linear-gradient(270deg, rgba(24,25,28,.96), rgba(24,25,28,0));
}

/* Native table geometry is retained on compact screens. JS sets the exact
   minimum based on the number of columns. */
.app-responsive-table-wrap > table {
    min-width: max(100%, var(--app-mobile-table-min, 100%)) !important;
}

/* Tabs are horizontally swipeable instead of wrapping into tall stacks. */
.app-horizontal-scroll {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 8px;
}
.app-horizontal-scroll > * {
    scroll-snap-align: nearest;
}

/* Tablet / compact desktop ------------------------------------------------ */
@media (max-width: 1120px) {
    body.app-modern-shell {
        --gm-sidebar-width: 0px !important;
        --gm-sidebar-collapsed: 0px !important;
    }

    /* Turn the global navigation into an off-canvas drawer. 1120 matches the
       breakpoint used by the navigation JS, so click/accordion behavior stays
       consistent. */
    .app-modern-shell .app-header,
    .app-modern-shell.products-modern-body .app-header {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 1300 !important;
        width: var(--mobile-drawer-width) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        overflow: visible !important;
        border-right: 1px solid var(--gm-border) !important;
        background: #fff !important;
        box-shadow: 20px 0 55px rgba(20,22,26,.16) !important;
        transform: translateX(-100%) !important;
        transition: transform .22s cubic-bezier(.2,.8,.2,1) !important;
    }
    .app-modern-shell.nav-open .app-header,
    .app-modern-shell.nav-open.products-modern-body .app-header {
        transform: translateX(0) !important;
    }

    .app-modern-shell .brand,
    .app-modern-shell.products-modern-body .brand {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .app-modern-shell .brand-name,
    .app-modern-shell.products-modern-body .brand-name {
        font-size: 16px !important;
        max-width: calc(var(--mobile-drawer-width) - 40px) !important;
    }

    .app-modern-shell .main-nav,
    .app-modern-shell.products-modern-body .main-nav {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 2px 0 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
    .app-modern-shell .main-nav-menu,
    .app-modern-shell.products-modern-body .main-nav-menu {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    .app-modern-shell .main-nav__link,
    .app-modern-shell .main-nav-menu > .main-nav__link,
    .app-modern-shell.products-modern-body .main-nav__link,
    .app-modern-shell.products-modern-body .main-nav-menu > .main-nav__link {
        width: 100% !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 9px 10px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border-radius: 10px !important;
        text-align: left !important;
    }
    .app-modern-shell .main-nav__link > span {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .app-modern-shell .main-nav-submenu,
    .app-modern-shell.products-modern-body .main-nav-submenu {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        margin: 3px 3px 5px 28px !important;
        transform: none !important;
    }

    /* The actual menu button lives inside the translated drawer. Keeping it
       just outside the drawer edge makes it reachable both closed and open. */
    .app-modern-shell .nav-toggle,
    .app-modern-shell.products-modern-body .nav-toggle {
        appearance: none !important;
        position: absolute !important;
        top: max(10px, env(safe-area-inset-top)) !important;
        right: -56px !important;
        z-index: 1320 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid var(--gm-border-strong) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.97) !important;
        color: #202327 !important;
        box-shadow: 0 7px 22px rgba(20,22,26,.10) !important;
        cursor: pointer !important;
    }
    .app-modern-shell .nav-toggle .app-icon {
        width: 20px !important;
        height: 20px !important;
    }

    body.app-modern-shell.nav-open {
        overflow: hidden !important;
    }
    body.app-modern-shell.nav-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1240;
        background: rgba(18,20,24,.28);
        backdrop-filter: blur(2px);
    }

    /* Compact top utility area. Search remains usable; account/store/language
       controls remain reachable instead of disappearing on phones. */
    .app-modern-shell .workspace-utility-bar,
    .app-modern-shell.sidebar-collapsed .workspace-utility-bar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1180 !important;
        min-height: 62px !important;
        margin-left: 0 !important;
        padding: max(9px, env(safe-area-inset-top)) 10px 9px 66px !important;
        display: grid !important;
        grid-template-columns: minmax(180px,1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        border-bottom: 1px solid var(--gm-border) !important;
        background: rgba(255,255,255,.96) !important;
        backdrop-filter: blur(14px);
    }
    .app-modern-shell .workspace-utility-bar .header-actions,
    .app-modern-shell.products-modern-body .workspace-utility-bar .header-actions {
        position: static !important;
        inset: auto !important;
        min-width: 0 !important;
        max-width: min(48vw, 420px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }
    .app-modern-shell .workspace-utility-bar .header-actions::-webkit-scrollbar { display: none !important; }
    .app-modern-shell .workspace-utility-bar .header-actions > * { flex: 0 0 auto !important; }
    .app-modern-shell .workspace-utility-bar .header-store-picker { display: block !important; }

    .workspace-section-search {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
    }
    .workspace-section-search__field {
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 11px !important;
    }
    .workspace-section-search__results {
        position: fixed !important;
        top: 62px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: calc(100dvh - 76px) !important;
    }

    .app-modern-shell .page-container,
    .app-modern-shell.products-modern-body .page-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 14px 12px 32px !important;
    }

    /* Keep charts / canvases at a genuinely useful working width. */
    .app-mobile-fixed-content {
        width: max(100%, var(--app-mobile-content-min, var(--mobile-wide-min))) !important;
        min-width: var(--app-mobile-content-min, var(--mobile-wide-min)) !important;
        max-width: none !important;
        flex-shrink: 0 !important;
    }
    .app-mobile-fixed-content.app-mobile-canvas-content {
        --app-mobile-content-min: var(--mobile-canvas-min);
    }

    .app-mobile-wide-viewport {
        padding-bottom: 5px;
    }
}

/* Phone ------------------------------------------------------------------ */
@media (max-width: 760px) {
    :root {
        --mobile-wide-min: 720px;
        --mobile-canvas-min: 860px;
    }

    html { scroll-padding-top: 70px !important; }
    body { min-width: 320px !important; }

    .app-modern-shell .workspace-utility-bar,
    .app-modern-shell.sidebar-collapsed .workspace-utility-bar {
        min-height: 0 !important;
        padding: 8px 8px 8px 62px !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 7px !important;
    }
    .app-modern-shell .workspace-utility-bar .header-actions,
    .app-modern-shell.products-modern-body .workspace-utility-bar .header-actions {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        order: 2;
        padding-bottom: 1px !important;
    }
    .workspace-section-search { order: 1; }

    .app-modern-shell .workspace-utility-bar .header-store-picker { display: block !important; }
    .app-modern-shell .header-store-picker summary,
    .app-modern-shell .header-profile-button,
    .app-language-switcher {
        min-height: 38px !important;
        height: 38px !important;
    }
    .app-modern-shell .header-store-picker summary {
        padding-inline: 9px !important;
    }
    .app-modern-shell .header-store-picker summary > span,
    .app-modern-shell .header-profile-button__text {
        display: none !important;
    }

    .app-modern-shell .page-container,
    .app-modern-shell.products-modern-body .page-container {
        padding: 10px 8px max(24px, env(safe-area-inset-bottom)) !important;
    }

    /* Large data tables keep real column geometry. */
    .app-responsive-table-wrap > table {
        width: max-content !important;
        min-width: max(100%, var(--app-mobile-table-min, 720px)) !important;
    }
    .app-responsive-table-wrap,
    .app-mobile-wide-viewport {
        border-radius: 10px;
        scroll-behavior: smooth;
    }

    /* Don't let legacy responsive rules squeeze charts back down. */
    :where(
        .chart-stage,
        .sales-line-chart,
        .sales-weekday-chart,
        .ad-line-chart,
        .ad-ranking-chart,
        .abc-bar-chart,
        .abc-pareto-chart,
        .profile-admin-reg-chart,
        .comparison-loading__charts
    ) {
        max-width: none !important;
        overflow: visible !important;
    }

    /* Keep touch targets comfortably sized without inflating the layout. */
    :where(button, .button, a.button, summary, input[type="checkbox"], input[type="radio"]) {
        touch-action: manipulation;
    }

    /* Draggable desktop windows behave like viewport dialogs on a phone. */
    :where(.app-managed-window, .window-frame, .app-window, .floating-window):not(.app-window-maximized) {
        max-width: calc(100vw - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
    }
}

@media (max-width: 420px) {
    :root {
        --mobile-wide-min: 680px;
        --mobile-canvas-min: 820px;
    }
    .app-modern-shell .nav-toggle,
    .app-modern-shell.products-modern-body .nav-toggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        right: -52px !important;
    }
    .app-modern-shell .workspace-utility-bar,
    .app-modern-shell.sidebar-collapsed .workspace-utility-bar {
        padding-left: 56px !important;
    }
}

/* V833 data-density guard --------------------------------------------------
   Legacy mobile rules used to hide columns/panels to force complex screens
   into the viewport. The new policy is the opposite: preserve information and
   place dense workspaces into a scrollable working region. */
@media (max-width: 1120px) {
    /* Progressive analytics / unit economics: keep all columns and filters. */
    .progressive-filters {
        display: block !important;
    }
    .progressive-table-card {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }
    .progressive-table-head,
    .progressive-table-row {
        min-width: 920px !important;
        grid-template-columns: 56px minmax(180px,1.8fr) minmax(90px,.8fr) minmax(120px,1fr) minmax(90px,.8fr) minmax(105px,.9fr) minmax(90px,.75fr) !important;
    }
    .progressive-table-head > *,
    .progressive-table-row > * {
        display: initial !important;
    }

    /* Promotion filter controls remain reachable; they stack above the table. */
    .promotion-page .promotion-filter-sidebar {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }

    /* Return decisions remain a real data grid instead of dropping the buyer
       and converting each row into a reduced mobile card. */
    .return-list-card {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }
    .return-toolbar,
    .return-pagination {
        position: sticky !important;
        left: 0 !important;
        z-index: 4;
        min-width: min(100%, calc(100vw - 24px)) !important;
        width: min(100%, calc(100vw - 24px)) !important;
    }
    .return-table-head,
    .return-table-body {
        min-width: 1180px !important;
    }
    .return-table-head,
    .return-row-main {
        display: grid !important;
        grid-template-columns: 1.06fr .92fr 1.8fr 1.12fr .9fr .75fr .98fr 30px !important;
        gap: 12px !important;
        align-items: center !important;
    }
    .return-table-head span:nth-child(2),
    .return-row-main > .return-buyer {
        display: flex !important;
    }
    .return-table-head span:nth-child(2) {
        display: block !important;
    }
    .return-row-main {
        min-height: 74px !important;
        padding: 10px 18px !important;
    }
    .return-row-main > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .return-row-main > .return-row-chevron {
        grid-column: 8 !important;
        grid-row: 1 !important;
    }
    .return-product-cell { margin: 0 !important; }

    /* Rich-content editor: preserve the complete professional workspace.
       Mobile users pan the workspace rather than losing tools/inspector panes. */
    .pc-rich-section.is-fullscreen {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .pc-rich-section.is-fullscreen > .pc-rich-studio,
    .pc-rich-studio {
        min-width: 1080px !important;
    }
    .pc-rich-studio-body {
        grid-template-columns: 210px minmax(560px,1fr) 310px !important;
    }
    .pc-rich-studio-left,
    .pc-rich-studio-right,
    .pc-rich-studio-toolgroup,
    .pc-rich-studio-toolgroup:nth-child(n+2),
    .pc-rich-studio-zoom,
    .pc-rich-studio-generate,
    .pc-rich-studio-layers-panel {
        display: initial !important;
    }
    .pc-rich-studio-left,
    .pc-rich-studio-right {
        display: block !important;
    }
    .pc-rich-studio-toolgroup,
    .pc-rich-studio-zoom {
        display: flex !important;
    }
    .pc-rich-studio-elements button span,
    .pc-rich-studio-panel-head small,
    .pc-rich-studio-layer b,
    .pc-rich-studio-layer small,
    .pc-rich-studio-layer i,
    .pc-rich-studio-brand > div {
        display: grid !important;
    }
    .pc-rich-studio-elements {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
    .pc-rich-studio-layer {
        grid-template-columns: 20px minmax(0,1fr) auto !important;
        justify-items: stretch !important;
    }

    /* Warehouse designer: its physical grid must not be compressed. */
    .wh-canvas-viewport {
        max-width: 100% !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .wh-canvas-shell,
    .wh-grid {
        min-width: 900px !important;
        max-width: none !important;
    }
}

@media (max-width: 760px) {
    .progressive-table-head,
    .progressive-table-row {
        min-width: 900px !important;
    }
    .return-list-card {
        border-radius: 14px !important;
    }
    .return-table-head { display: grid !important; }
    .return-pagination {
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* Utility placement and dark-theme parity. */
@media (max-width: 1120px) {
    .app-modern-shell .workspace-section-search {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .app-modern-shell .workspace-utility-bar .header-actions,
    .app-modern-shell.products-modern-body .workspace-utility-bar .header-actions {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    html[data-app-theme="dark"] body.app-modern-shell .app-header,
    html[data-app-theme="dark"] body.app-modern-shell .workspace-utility-bar {
        background: var(--dark-nav) !important;
        border-color: var(--dark-border-soft) !important;
        color: var(--dark-text) !important;
    }
    html[data-app-theme="dark"] body.app-modern-shell .nav-toggle {
        background: var(--dark-surface-2) !important;
        border-color: var(--dark-border) !important;
        color: var(--dark-text) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.30) !important;
    }
}

@media (max-width: 760px) {
    .app-modern-shell .workspace-section-search {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .app-modern-shell .workspace-utility-bar .header-actions,
    .app-modern-shell.products-modern-body .workspace-utility-bar .header-actions {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

@media (max-width: 1120px) { .pc-rich-studio-brand > div { display: grid !important; } }