/*
 * MarketplaceAnalytics mobile/tablet refinement — V834.
 *
 * Principle: data-dense workspaces keep a desktop-like working size. The
 * viewport adapts around them: filters collapse, actions reflow and large
 * tables/charts/canvases are panned instead of compressed or stripped.
 */

:root {
    --mobile-control-height: 42px;
    --mobile-card-radius: 16px;
    --mobile-page-gap: 10px;
}

/* Shared compact controls ------------------------------------------------ */
.app-mobile-filter-toggle,
.app-mobile-scroll-toolbar,
.app-mobile-top-button {
    display: none;
}

@media (max-width: 1120px) {
    .app-mobile-filter-toggle {
        width: 100%;
        min-height: var(--mobile-control-height);
        margin: 0 0 10px;
        padding: 9px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: 1px solid #d9dee6;
        border-radius: 12px;
        background: #fff;
        color: #303842;
        font: inherit;
        font-size: 12px;
        font-weight: 800;
        box-shadow: 0 4px 14px rgba(29,35,44,.045);
        cursor: pointer;
        touch-action: manipulation;
    }
    .app-mobile-filter-toggle__copy {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .app-mobile-filter-toggle__copy svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
    }
    .app-mobile-filter-toggle__state {
        color: #818b98;
        font-size: 10px;
        font-weight: 750;
        white-space: nowrap;
    }
    .app-mobile-filter-toggle[aria-expanded="true"] {
        border-color: #b9c5d4;
        background: #f8fafc;
    }

    .app-mobile-filter-panel {
        max-height: 0 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        border-top-width: 0 !important;
        border-bottom-width: 0 !important;
        transition: max-height .22s ease, opacity .18s ease, padding .22s ease, margin .22s ease;
    }
    .app-mobile-filter-panel.is-mobile-open {
        max-height: min(66dvh, 720px) !important;
        margin-bottom: 10px !important;
        overflow: auto !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        border-top-width: 1px !important;
        border-bottom-width: 1px !important;
        scrollbar-width: thin;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Explicit pan controls supplement touch scrolling and make wide regions
       discoverable on tablets / phones. */
    .app-mobile-scroll-toolbar {
        width: 100%;
        min-height: 34px;
        margin: 7px 0 6px;
        padding: 0 2px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        color: #7a8592;
        font-size: 9px;
        font-weight: 750;
    }
    .app-mobile-scroll-toolbar[hidden] { display: none !important; }
    .app-mobile-scroll-toolbar__label {
        margin-right: auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }
    .app-mobile-scroll-toolbar__label::before {
        content: "↔";
        font-size: 14px;
        color: #5d6977;
    }
    .app-mobile-scroll-toolbar button {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 1px solid #d9dee6;
        border-radius: 10px;
        background: #fff;
        color: #3f4a57;
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
        touch-action: manipulation;
    }
    .app-mobile-scroll-toolbar button:disabled {
        opacity: .34;
        cursor: default;
    }

    .app-mobile-scroll-region {
        scroll-padding-inline: 12px;
        scrollbar-gutter: stable;
    }

    /* Generic page titles/actions. */
    :where(.page-heading--actions,.orders-page-heading,.warehouse-stocks-heading,.wr-wizard-heading) {
        align-items: flex-start !important;
        gap: 12px !important;
    }
    :where(.page-heading--actions,.orders-page-heading,.warehouse-stocks-heading,.wr-wizard-heading) > :last-child,
    :where(.heading-actions,.wr-heading-actions,.warehouse-hero-actions) {
        max-width: 100% !important;
    }
    :where(.heading-actions,.wr-heading-actions,.warehouse-hero-actions) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    /* The marketplace selector remains a single swipeable row. */
    .product-platform-tabs,
    .app-marketplace-switcher {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }
    .product-platform-tabs::-webkit-scrollbar,
    .app-marketplace-switcher::-webkit-scrollbar { display: none; }
    .product-platform-tab { flex: 0 0 auto !important; white-space: nowrap !important; }

    /* Standard modals become safe viewport sheets instead of overflowing. */
    :where(.modal-overlay,.profile-modal,.modal-backdrop) {
        padding: 10px !important;
    }
    :where(.modal-card,.profile-modal__card,.chart-settings-modal,.columns-modal-card) {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        overflow: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Footer pagination remains compact and all controls stay reachable. */
    :where(.products-footer,.pricing-footer,.orders-footer,.warehouse-stock-footer) {
        max-width: 100% !important;
        gap: 8px !important;
    }
    :where(.pagination-modern,.products-modern-pagination) {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    :where(.pagination-modern,.products-modern-pagination)::-webkit-scrollbar { display: none; }
    :where(.pagination-modern .page-number,.pagination-modern .page-dots,.products-modern-pagination a,.products-modern-pagination span) {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* Dashboard ---------------------------------------------------------- */
    .dashboard-unified-body .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 10px !important;
    }
    .dashboard-unified-body .dashboard-content-grid {
        grid-template-columns: minmax(0,1fr) !important;
        gap: 12px !important;
    }
    .dashboard-unified-body .dashboard-panel {
        min-width: 0 !important;
    }
    .dashboard-unified-body .dashboard-panel--chart.app-mobile-wide-viewport {
        overflow: hidden !important;
    }
    .dashboard-chart-mobile-viewport {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }
    .dashboard-chart-mobile-viewport > .chart-stage {
        width: max(100%, 760px) !important;
        min-width: 760px !important;
        max-width: none !important;
    }
    .dashboard-unified-body .dashboard-tabs,
    .dashboard-unified-body .dashboard-marketplace-tabs {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }
    .dashboard-unified-body .dashboard-tabs::-webkit-scrollbar,
    .dashboard-unified-body .dashboard-marketplace-tabs::-webkit-scrollbar { display: none; }
    .dashboard-unified-body .dashboard-tab,
    .dashboard-unified-body .dashboard-marketplace-tab { flex: 0 0 auto !important; white-space: nowrap !important; }

    /* Products / Prices -------------------------------------------------- */
    .workspace,
    .pricing-workspace {
        grid-template-columns: minmax(0,1fr) !important;
        gap: 0 !important;
    }
    .workspace-sidebar,
    .pricing-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        border-right: 0 !important;
        border-radius: 12px !important;
    }
    .workspace-sidebar.app-mobile-filter-panel.is-mobile-open,
    .pricing-sidebar.app-mobile-filter-panel.is-mobile-open {
        padding: 14px !important;
        border: 1px solid #e0e4e9 !important;
        background: #fbfcfd !important;
    }
    .workspace-main,
    .pricing-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .table-toolbar,
    .pricing-topline {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    .pricing-controls-parity__search,
    .pricing-search,
    .search-field {
        min-width: 0 !important;
        max-width: none !important;
    }
    .data-table-wrap,
    .pricing-table-wrap {
        max-width: 100% !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .product-export-modal__card--wide .export-category-board {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
    }

    /* Orders ------------------------------------------------------------- */
    .orders-modern-body .orders-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 10px !important;
    }
    .orders-modern-body .orders-workspace {
        grid-template-columns: minmax(0,1fr) !important;
    }
    .orders-modern-body .orders-side-tabs,
    .orders-modern-body .orders-status-tabs {
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }
    .orders-modern-body .orders-side-tabs::-webkit-scrollbar,
    .orders-modern-body .orders-status-tabs::-webkit-scrollbar { display: none; }
    .orders-modern-body .orders-side-tab,
    .orders-modern-body .orders-status-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    .orders-modern-body .orders-filter-form {
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .orders-modern-body .orders-search {
        min-width: min(100%, 260px) !important;
        flex: 1 1 260px !important;
    }
    .orders-modern-body .orders-table-wrap {
        max-width: 100% !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Seller warehouse --------------------------------------------------- */
    body.warehouse-stocks-page .warehouse-stock-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 10px !important;
    }
    body.warehouse-stocks-page .warehouse-stock-toolbar {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    body.warehouse-stocks-page .warehouse-stock-toolbar__actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    body.warehouse-stocks-page .warehouse-stock-workspace {
        grid-template-columns: minmax(0,1fr) !important;
    }
    body.warehouse-stocks-page .warehouse-stock-filters {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        border-right: 0 !important;
    }
    body.warehouse-stocks-page .warehouse-stock-filters.app-mobile-filter-panel.is-mobile-open {
        padding: 14px !important;
        border: 1px solid #e0e4e9 !important;
        border-radius: 12px !important;
        background: #fbfcfd !important;
    }
    body.warehouse-stocks-page .warehouse-stock-main {
        min-width: 0 !important;
    }
    body.warehouse-stocks-page .warehouse-stock-results-head {
        gap: 9px !important;
        flex-wrap: wrap !important;
    }
    body.warehouse-stocks-page .warehouse-stock-search {
        min-width: min(100%, 260px) !important;
        flex: 1 1 300px !important;
    }
    body.warehouse-stocks-page .warehouse-stock-table-wrap {
        max-width: 100% !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Receiving ---------------------------------------------------------- */
    .warehouse-receiving-page .wr-stepper {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }
    .warehouse-receiving-page .wr-stepper > .wr-step {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        min-width: 165px !important;
    }
    .warehouse-receiving-page .wr-stepper > .wr-step span {
        display: grid !important;
        min-width: 118px !important;
    }
    .warehouse-receiving-page .wr-stepper > .wr-step small {
        display: block !important;
        white-space: normal !important;
    }
    .warehouse-receiving-page .wr-items-panel,
    .warehouse-receiving-page .wr-table-wrap {
        max-width: 100% !important;
    }
    .warehouse-receiving-page .wr-table-wrap {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* Phones ----------------------------------------------------------------- */
@media (max-width: 760px) {
    .app-mobile-top-button {
        position: fixed;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        z-index: 1190;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid rgba(203,210,220,.95);
        border-radius: 13px;
        background: rgba(255,255,255,.94);
        color: #36414d;
        box-shadow: 0 9px 28px rgba(25,31,40,.15);
        backdrop-filter: blur(12px);
        font-size: 19px;
        cursor: pointer;
        touch-action: manipulation;
    }
    .app-mobile-top-button.is-visible { display: grid; }

    :where(.page-heading--actions,.orders-page-heading,.warehouse-stocks-heading,.wr-wizard-heading) {
        flex-direction: column !important;
    }
    :where(.heading-actions,.wr-heading-actions,.warehouse-hero-actions) {
        width: 100% !important;
    }
    :where(.heading-actions,.wr-heading-actions,.warehouse-hero-actions) > :where(.button,button,a) {
        min-width: 0 !important;
        flex: 1 1 150px !important;
        justify-content: center !important;
    }

    /* Dashboard hero keeps its artwork, but the copy is allowed to breathe. */
    .dashboard-unified-body .dashboard-hero-banner {
        min-height: 176px !important;
        height: 176px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    .dashboard-unified-body .dashboard-hero-banner__content {
        width: 68% !important;
        max-width: 68% !important;
        padding: 0 14px !important;
    }
    .dashboard-unified-body .dashboard-hero-banner__content h1 {
        font-size: clamp(27px,8vw,36px) !important;
        line-height: 1.02 !important;
    }
    .dashboard-unified-body .dashboard-hero-banner__content p {
        max-width: 96% !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
    }
    .dashboard-unified-body .dashboard-hero-banner > img {
        width: 74% !important;
        max-width: none !important;
        right: -18% !important;
        opacity: .96 !important;
    }
    .dashboard-unified-body .dashboard-kpis {
        grid-template-columns: minmax(0,1fr) !important;
    }
    .dashboard-unified-body .metric-card {
        min-height: 0 !important;
    }
    .dashboard-unified-body .dashboard-panel__head--wrap,
    .dashboard-unified-body .dashboard-panel--chart .dashboard-panel__head {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 9px !important;
    }
    .dashboard-unified-body .dashboard-panel--chart .dashboard-panel__tools {
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* Products / Prices */
    .workspace-sidebar.app-mobile-filter-panel.is-mobile-open,
    .pricing-sidebar.app-mobile-filter-panel.is-mobile-open,
    body.warehouse-stocks-page .warehouse-stock-filters.app-mobile-filter-panel.is-mobile-open {
        max-height: 72dvh !important;
    }
    .page-heading h1,
    .orders-page-heading h1,
    .wr-wizard-heading h1 {
        font-size: clamp(27px,8vw,34px) !important;
        line-height: 1.05 !important;
    }
    .table-toolbar,
    .pricing-topline {
        align-items: stretch !important;
        flex-direction: column !important;
    }
    .table-toolbar > *,
    .pricing-topline > * {
        width: 100% !important;
        max-width: 100% !important;
    }
    .product-export-modal__card--wide,
    .pricing-export-picker__card {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        border-radius: 18px !important;
    }
    .product-export-modal__card--wide .modal-actions,
    .pricing-export-picker__actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 4;
        margin-inline: -1px;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        background: rgba(255,255,255,.96) !important;
        backdrop-filter: blur(10px);
    }

    /* Orders */
    .orders-modern-body .orders-metrics {
        grid-template-columns: minmax(0,1fr) !important;
    }
    .orders-modern-body .orders-filter-form > * {
        flex: 1 1 150px !important;
    }
    .orders-modern-body .orders-search {
        flex-basis: 100% !important;
        width: 100% !important;
    }
    .orders-modern-body .orders-footer {
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
    }
    .orders-modern-body .orders-footer > * { max-width: 100% !important; }

    /* Warehouse */
    body.warehouse-stocks-page .warehouse-stock-metrics {
        grid-template-columns: minmax(0,1fr) !important;
    }
    body.warehouse-stocks-page .warehouse-stock-toolbar__actions {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        align-items: stretch !important;
    }
    body.warehouse-stocks-page .warehouse-stock-toolbar__actions > * {
        width: 100% !important;
        min-width: 0 !important;
    }
    body.warehouse-stocks-page .warehouse-stock-group-form {
        grid-column: 1 / -1;
    }
    body.warehouse-stocks-page .warehouse-stock-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
    }

    /* Receiving: keep all step labels visible and let the stepper itself pan. */
    .warehouse-receiving-page .wr-stepper {
        padding: 12px !important;
        gap: 8px !important;
    }
    .warehouse-receiving-page .wr-stepper > .wr-step {
        min-width: 178px !important;
    }
    .warehouse-receiving-page .wr-stepper > i {
        min-width: 20px !important;
    }
    .warehouse-receiving-page .wr-wizard-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        margin-inline: -8px !important;
        padding: 9px 8px max(9px, env(safe-area-inset-bottom)) !important;
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 8px !important;
        background: rgba(255,255,255,.96) !important;
        border-top: 1px solid #e0e5eb !important;
        backdrop-filter: blur(14px);
    }
    .warehouse-receiving-page .wr-wizard-footer > :only-child {
        grid-column: 1 / -1;
    }
    .warehouse-receiving-page .wr-wizard-footer .button {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
    .warehouse-receiving-page .wr-summary-grid,
    .warehouse-receiving-page .wr-summary-grid--five {
        grid-template-columns: minmax(0,1fr) !important;
    }
}

@media (max-width: 420px) {
    .app-mobile-scroll-toolbar__label span { display: none; }
    .app-mobile-scroll-toolbar__label::after { content: "Свайп"; }
    body.warehouse-stocks-page .warehouse-stock-toolbar__actions {
        grid-template-columns: minmax(0,1fr) !important;
    }
    body.warehouse-stocks-page .warehouse-stock-group-form { grid-column: auto; }
    .warehouse-receiving-page .wr-stepper > .wr-step { min-width: 166px !important; }
}

/* Dark theme ------------------------------------------------------------- */
@media (max-width: 1120px) {
    html[data-app-theme="dark"] .app-mobile-filter-toggle,
    html[data-app-theme="dark"] .app-mobile-scroll-toolbar button,
    html[data-app-theme="dark"] .app-mobile-top-button {
        border-color: var(--dark-border, #34404c) !important;
        background: var(--dark-surface-2, #1b222a) !important;
        color: var(--dark-text, #eef3f7) !important;
    }
    html[data-app-theme="dark"] .app-mobile-filter-toggle__state,
    html[data-app-theme="dark"] .app-mobile-scroll-toolbar { color: #9fadb9 !important; }
    html[data-app-theme="dark"] .workspace-sidebar.app-mobile-filter-panel.is-mobile-open,
    html[data-app-theme="dark"] .pricing-sidebar.app-mobile-filter-panel.is-mobile-open,
    html[data-app-theme="dark"] body.warehouse-stocks-page .warehouse-stock-filters.app-mobile-filter-panel.is-mobile-open {
        border-color: var(--dark-border-soft, #2d3742) !important;
        background: var(--dark-surface, #161d24) !important;
    }
    html[data-app-theme="dark"] .warehouse-receiving-page .wr-wizard-footer,
    html[data-app-theme="dark"] .product-export-modal__card--wide .modal-actions,
    html[data-app-theme="dark"] .pricing-export-picker__actions {
        background: rgba(21,27,33,.96) !important;
        border-color: var(--dark-border-soft, #2d3742) !important;
    }
}