/*
   Admin mobile usability
   --------------------------------------------------------------------------
   A late, scoped responsive layer for the management workspace.  This keeps
   data-heavy screens usable on a phone without changing their desktop layout
   or any customer-facing page.
*/

@media (max-width: 760px) {
    /* Shell and page hierarchy ------------------------------------------------ */
    body.admin-surface .workspace-main,
    body.admin-surface .admin-page {
        min-width: 0;
    }

    body.admin-surface .workspace-main {
        overflow-x: clip;
    }

    body.admin-surface .admin-page {
        padding: 18px 12px 48px !important;
    }

    body.admin-surface .admin-page :is(input, select, textarea) {
        max-width: 100%;
    }

    body.admin-surface :is(.admin-command-header, .admin-title, .payment-v4-header) {
        align-items: stretch !important;
        gap: 12px !important;
    }

    body.admin-surface .admin-command-header,
    body.admin-surface .payment-v4-header {
        flex-direction: column !important;
    }

    body.admin-surface :is(.admin-command-heading, .payment-v4-heading, .system-heading-v6) {
        min-width: 0;
    }

    body.admin-surface .admin-command-heading {
        align-items: flex-start !important;
        gap: 11px !important;
    }

    body.admin-surface :is(.admin-command-header, .payment-v4-header) > :is(a, button, .button, .table-action, .payment-v4-secondary) {
        width: 100% !important;
        min-height: 42px;
        justify-content: center;
    }

    body.admin-surface :is(.admin-command-header h1, .payment-v4-header h1, .system-page-head-v6 h1) {
        font-size: clamp(23px, 7vw, 27px) !important;
        overflow-wrap: anywhere;
    }

    body.admin-surface :is(.admin-command-heading p, .payment-v4-header p, .system-page-head-v6 p) {
        overflow-wrap: anywhere;
    }

    /* Summaries: never compress unreadable KPI labels into desktop columns. */
    body.admin-surface .admin-workbench-v3 .admin-summary-rail,
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* The workbench has a four-item desktop rule with :has(), which is more
       specific than the shared rail selector above.  Mirror that specificity
       so the fourth metric stays in the second mobile row. */
    body.admin-surface .admin-workbench-v3 .admin-summary-rail:has(> article:nth-child(4):last-child),
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid:has(> article:nth-child(4):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.admin-surface .admin-workbench-v3 .admin-summary-rail > article,
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid > article {
        min-height: 90px !important;
        gap: 9px !important;
        padding: 12px !important;
        border-right: 1px solid var(--aw-line) !important;
        border-bottom: 1px solid var(--aw-line) !important;
    }

    body.admin-surface .admin-workbench-v3 .admin-summary-rail > article:nth-child(even),
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid > article:nth-child(even) {
        border-right: 0 !important;
    }

    body.admin-surface .admin-workbench-v3 .admin-summary-rail:has(> article:nth-child(4)) > article:nth-child(n + 3),
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid:has(> article:nth-child(4)) > article:nth-child(n + 3) {
        border-bottom: 0 !important;
    }

    body.admin-surface .admin-workbench-v3 .admin-summary-rail:has(> article:nth-child(3):last-child) > article:last-child,
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid:has(> article:nth-child(3):last-child) > article:last-child {
        grid-column: 1 / -1;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

    body.admin-surface .admin-workbench-v3 .admin-summary-rail:has(> article:nth-child(4)) > article:last-child,
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid:has(> article:nth-child(4)) > article:last-child {
        grid-column: auto;
    }

    body.admin-surface .admin-workbench-v3 .admin-summary-rail small,
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid small {
        font-size: 9px !important;
        letter-spacing: .025em !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    body.admin-surface .admin-workbench-v3 .admin-summary-rail strong,
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid strong {
        font-size: 20px !important;
    }

    body.admin-surface .admin-workbench-v3 .admin-summary-rail em,
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid em {
        overflow: visible;
        white-space: normal;
    }

    /* Controls, drawers and forms ------------------------------------------- */
    body.admin-surface :is(.admin-filter-bar, .system-filter-bar-v6, .payment-reconcile-toolbar, .warehouse-filter-bar) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 12px !important;
    }

    body.admin-surface :is(.admin-filter-bar, .system-filter-bar-v6, .payment-reconcile-toolbar, .warehouse-filter-bar) > * {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.admin-surface :is(.table-command-bar, .warehouse-command-bar) {
        align-items: stretch !important;
        flex-wrap: wrap !important;
        gap: 9px !important;
        padding: 12px !important;
    }

    body.admin-surface :is(.table-command-bar, .warehouse-command-bar) > :is(div, form) {
        width: 100% !important;
        min-width: 0;
    }

    body.admin-surface :is(.table-command-bar, .warehouse-command-bar) form > :is(button, .table-action, .danger-action) {
        width: 100%;
        min-height: 40px;
    }

    body.admin-surface :is(.admin-form, .system-inline-editor-v6, .payment-settings-body, .bank-form-section) {
        padding: 14px 12px !important;
    }

    body.admin-surface :is(.editor-grid, .settings-grid, .payment-field-grid, .payment-toggle-grid, .payment-network-list, .system-form-body-v6, .system-editor-grid-v6, .settings-module-grid-v6) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.admin-surface :is(.editor-grid, .settings-grid, .payment-field-grid, .system-editor-grid-v6) .span-2 {
        grid-column: auto !important;
    }

    body.admin-surface :is(.payment-sticky-actions, .system-savebar-v6, .editor-savebar) {
        align-items: stretch !important;
        flex-direction: column;
        gap: 10px !important;
    }

    body.admin-surface :is(.payment-sticky-actions, .system-savebar-v6, .editor-savebar) > :is(div, a, button) {
        width: 100%;
    }

    body.admin-surface :is(.payment-sticky-actions, .system-savebar-v6, .editor-savebar) > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    /* Tables retain their data model, with a visible, touch-friendly scroll. */
    body.admin-surface .admin-page :is(.mock-table, .data-table, .system-table-scroll-v6, .bank-config-table, .payment-reconcile-table) {
        max-width: 100%;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        scrollbar-color: rgba(115, 143, 191, .8) transparent;
        scrollbar-width: thin;
    }

    body.admin-surface .admin-page :is(.mock-table, .data-table, .system-table-scroll-v6, .bank-config-table, .payment-reconcile-table)::-webkit-scrollbar {
        height: 8px;
    }

    body.admin-surface .admin-page :is(.mock-table, .data-table, .system-table-scroll-v6, .bank-config-table, .payment-reconcile-table)::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: rgba(115, 143, 191, .78);
        background-clip: padding-box;
    }

    body.admin-surface .table-pager {
        align-items: stretch;
        gap: 10px;
    }

    body.admin-surface .table-pager :is(.table-page-size-form, nav) {
        justify-content: space-between;
    }

    /* Category rows are the most frequent short table.  Present their real
       fields in a compact card-like row instead of a 900px desktop grid. */
    body.admin-surface .admin-categories-page .category-management-grid {
        gap: 14px !important;
    }

    body.admin-surface .admin-categories-page .data-table {
        overflow: visible !important;
    }

    body.admin-surface .admin-categories-page .category-row.data-head {
        display: none !important;
    }

    body.admin-surface .admin-categories-page .category-row:not(.data-head) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 7px 10px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 13px 12px !important;
    }

    body.admin-surface .admin-categories-page .category-row:not(.data-head) > span:nth-child(1) {
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
    }

    body.admin-surface .admin-categories-page .category-row:not(.data-head) > span:nth-child(2) {
        min-width: 0;
        grid-column: 1;
        grid-row: 2;
    }

    body.admin-surface .admin-categories-page .category-row:not(.data-head) > span:nth-child(2) code {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.admin-surface .admin-categories-page .category-row:not(.data-head) > span:nth-child(3) {
        align-self: center;
        grid-column: 2;
        grid-row: 2;
        color: var(--aw-muted);
        font-size: 10px;
        white-space: nowrap;
    }

    body.admin-surface .admin-categories-page .category-row:not(.data-head) > span:nth-child(3)::before {
        content: "Sản phẩm: ";
    }

    body.admin-surface .admin-categories-page .category-row:not(.data-head) > span:nth-child(4) {
        align-self: start;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    body.admin-surface .admin-categories-page .category-row-quick-actions {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 3px;
        padding-top: 9px;
        border-top: 1px solid var(--aw-line);
        white-space: normal;
    }

    body.admin-surface .admin-categories-page .category-row-quick-actions :is(.table-action, .danger-action) {
        min-height: 36px;
        padding-inline: 10px !important;
    }

    body.admin-surface .admin-categories-page .category-inline-editor {
        margin: 0 8px 10px !important;
    }

    /* Warehouse: selection, tools and status tabs stay large enough to tap. */
    body.admin-surface .warehouse-browser-page .warehouse-status-tabs,
    body.admin-surface .warehouse-browser-page .mock-tabs {
        gap: 7px !important;
        padding: 7px !important;
        scrollbar-width: thin;
    }

    body.admin-surface .warehouse-browser-page .warehouse-status-tabs > a,
    body.admin-surface .warehouse-browser-page .mock-tabs > :is(a, span) {
        min-height: 38px !important;
        flex: 0 0 auto;
    }

    body.admin-surface .warehouse-browser-page .warehouse-selected-card,
    body.admin-surface .warehouse-browser-page .warehouse-selected-actions,
    body.admin-surface .warehouse-browser-page .warehouse-bulk-bar,
    body.admin-surface .warehouse-browser-page .warehouse-bulk-actions {
        align-items: stretch !important;
        flex-direction: column;
    }

    body.admin-surface .warehouse-browser-page :is(.warehouse-selected-actions, .warehouse-bulk-actions) > :is(a, button, form) {
        width: 100%;
    }

    body.admin-surface .warehouse-browser-page :is(.warehouse-selected-actions, .warehouse-bulk-actions) :is(a, button) {
        min-height: 40px;
        justify-content: center;
    }

    body.admin-surface .warehouse-browser-page .warehouse-tool-drawer > summary {
        align-items: flex-start;
        min-height: 54px;
        padding: 12px !important;
    }

    /* Product workspaces and media/editor panels. */
    body.admin-surface .product-editor-page .product-editor-layout,
    body.admin-surface .product-editor-page .editor-detail-grid,
    body.admin-surface .product-editor-page .product-editor-pro,
    body.admin-surface .admin-products-page .product-admin-forms {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.admin-surface .product-editor-page .product-editor-aside {
        position: static !important;
    }

    body.admin-surface .product-editor-page :is(.editor-section, .product-preview-card) {
        min-width: 0;
    }

    body.admin-surface .product-editor-page .product-media-editor-body,
    body.admin-surface .product-editor-page .gallery-editor {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.admin-surface .admin-products-page .mock-tabs {
        padding: 6px !important;
        gap: 6px !important;
    }

    body.admin-surface .admin-products-page .mock-tabs > :is(a, span) {
        min-height: 38px;
        flex: 0 0 auto;
    }

    /* Payments and bank settings. */
    body.admin-surface .payment-health-strip,
    body.admin-surface .bank-auto-rule-strip {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.admin-surface .payment-health-strip article + article {
        border-top: 1px solid var(--pay-border);
        border-left: 0;
    }

    body.admin-surface .payment-settings-workspace,
    body.admin-surface .bank-config-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    body.admin-surface .payment-channel-rail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
    }

    body.admin-surface .payment-channel-rail > header,
    body.admin-surface .payment-bank-summary {
        grid-column: 1 / -1;
    }

    body.admin-surface .payment-channel-option {
        min-width: 0;
        padding: 12px 10px;
    }

    body.admin-surface .payment-channel-option b,
    body.admin-surface .payment-channel-option small {
        overflow-wrap: anywhere;
    }

    body.admin-surface .payment-settings-heading,
    body.admin-surface .payment-settings-heading-actions,
    body.admin-surface .bank-connection-banner {
        align-items: stretch !important;
        flex-direction: column;
    }

    body.admin-surface .payment-settings-heading-actions > :is(button, a),
    body.admin-surface .bank-connection-banner > :is(a, button) {
        width: 100%;
        justify-content: center;
    }

    body.admin-surface .payment-section-nav {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    body.admin-surface .payment-section-nav a {
        flex: 0 0 auto;
        min-height: 38px;
        white-space: nowrap;
    }

    /* System, monitoring and growth suites. */
    body.admin-surface .system-local-nav-v6,
    body.admin-surface .system-channel-tabs-v6,
    body.admin-surface .traffic-range-tabs-v9 {
        scroll-padding-inline: 8px;
    }

    body.admin-surface .system-kpis-v6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.admin-surface .system-diagnostic-list-v6 > div {
        grid-template-columns: 30px minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }

    body.admin-surface .system-diagnostic-list-v6 > div > mark {
        grid-column: 2 / -1;
        justify-self: start;
    }

    body.admin-surface .system-card-foot-v6 {
        align-items: stretch;
        flex-direction: column;
    }

    body.admin-surface .system-card-foot-v6 a {
        width: 100%;
        min-height: 40px;
        justify-content: space-between;
    }

    body.admin-surface .admin-growth-suite-v8 .mock-kpi-grid.four {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.admin-surface .admin-growth-suite-v8 :is(.panel-heading, .mock-panel > header) {
        align-items: flex-start;
        flex-direction: column;
    }

    body.admin-surface .growth-users-v8 .users-management-table,
    body.admin-surface .growth-roles-v8 .permission-table,
    body.admin-surface .growth-partners-v8 :is(.data-table, .mock-table) {
        scrollbar-gutter: stable both-edges;
    }
}

@media (max-width: 420px) {
    body.admin-surface .admin-command-icon {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px;
    }

    body.admin-surface .admin-workbench-v3 .admin-summary-rail > article,
    body.admin-surface .warehouse-browser-page .warehouse-metric-grid > article {
        min-height: 86px !important;
        padding: 10px !important;
    }

    body.admin-surface .admin-workbench-v3 .admin-summary-rail .kpi-icon,
    body.admin-surface .admin-workbench-v3 .warehouse-metric-icon {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    body.admin-surface .payment-channel-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    body.admin-surface .payment-channel-rail > header,
    body.admin-surface .payment-bank-summary {
        grid-column: auto;
    }

    body.admin-surface .category-row-quick-actions :is(.table-action, .danger-action) {
        flex: 1 1 auto;
    }
}