/* Shared layout for phones, landscape phones and narrow tablets. Never applies to print. */
@media screen {
    /* The composer fills its parent, including its padding and borders. */
    body[data-hmanager-page="marketing/ai_dashboard"] .chat-input-card { box-sizing: border-box; min-width: 0; max-width: 100%; }
}

@media screen and (max-width: 1024px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body[data-hmanager-page] { min-width: 0; zoom: 1 !important; }
    body[data-hmanager-page] :where(main, .main-content, .app-container, .form-group, .search-box) { min-width: 0; }
    body[data-hmanager-page] .main-content { max-width: 100%; }

    /* A 16px font prevents focus zoom on iOS; checkbox and radio geometry stays native. */
    body[data-hmanager-page] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]) {
        font-size: 16px !important;
        min-height: 44px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    body[data-hmanager-page] button:not([role="switch"]) { min-height: 44px; min-width: 44px; }
    body[data-hmanager-page] :is(.btn-primary, .btn-secondary, .btn-outline, .btn-back) { min-height: 44px; }

    /* Only the table scrolls: the surrounding form and actions stay within the viewport. */
    body[data-hmanager-page] :is(.table-container, .table-responsive, .table-scroll, .table-wrapper, .table-wrap, .glass-table-container, .mobile-table-scroll) {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .mobile-stack-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .mobile-stack-grid > * { min-width: 0; }
    .mobile-wrap-row { flex-wrap: wrap !important; gap: 12px !important; }
    .mobile-wrap-row > * { min-width: 0; max-width: 100%; }
    .mobile-stack-row { flex-direction: column !important; align-items: stretch !important; }
    body[data-hmanager-page="index"] .home-welcome-card { padding: 24px 20px !important; }
    body[data-hmanager-page="index"] .home-welcome-content { min-width: 0 !important; max-width: 100%; }
    body[data-hmanager-page="index"] #meli-reclamos-sidebar { width: 100%; max-width: 100%; min-width: 0; flex-shrink: 0; }

    body[data-hmanager-page] :is(.modal-content, .swal2-popup) {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
        overflow-y: auto;
    }
    body[data-hmanager-page] :is(.modal-header, .modal-footer) { flex-wrap: wrap; gap: 12px; }

    /* Inventory pages share a header and editable-table layout. */
    body[data-hmanager-page^="inventory/"] .top-navbar {
        flex-wrap: wrap;
        gap: 12px;
        padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
    }
    body[data-hmanager-page^="inventory/"] .logo-area { flex-wrap: wrap; gap: 8px; min-width: 0; }
    body[data-hmanager-page^="inventory/"] .top-navbar > div:last-child { flex-wrap: wrap; max-width: 100%; }
    body[data-hmanager-page^="inventory/"] .form-group { min-width: 0 !important; }
    body[data-hmanager-page^="inventory/"] .section-body > div { flex-wrap: wrap; }

    body[data-hmanager-page="inventory/tracker"] #subpanel-carga > div { grid-template-columns: minmax(0, 1fr) !important; }
    body[data-hmanager-page="inventory/tracker"] :is(.sub-panel, .tracker-apple-card, .table-responsive) { min-width: 0; max-width: 100%; }
    body[data-hmanager-page="inventory/tracker"] .tracker-subnav { flex-wrap: wrap; }
    body[data-hmanager-page="inventory/tracker"] .tracker-subnav > div { flex-wrap: wrap; max-width: 100%; }
    body[data-hmanager-page="inventory/tracker"] .tracker-tabs { flex-wrap: wrap; }
    body[data-hmanager-page="inventory/tracker"] #subpanel-carga .tracker-apple-card:first-child { max-width: 100% !important; }
    body[data-hmanager-page="inventory/tracker"] .tracker-filters { min-width: 0; max-width: 100%; }
    body[data-hmanager-page="inventory/tracker"] #tracker-product-form .glass-input { font-size: 16px !important; }

    body[data-hmanager-page="inventory/calculadora_costos"] .sheet-grid-layout { grid-template-columns: minmax(0, 1fr); }
    body[data-hmanager-page="inventory/calculadora_costos"] .apple-glass-panel { min-width: 0; max-width: 100%; }
    body[data-hmanager-page="inventory/calculadora_costos"] .rates-tab-content { overflow-x: auto; }
    body[data-hmanager-page="inventory/calculadora_costos"] .multipliers-panel-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body[data-hmanager-page="inventory/calculadora_costos"] .multiplier-btn-cell { min-width: 0; padding: 12px 6px; }
    body[data-hmanager-page="inventory/calculadora_costos"] .slider-inline-bar { flex-wrap: wrap; }

    /* Administration screens have distinct layouts, scoped by their template. */
    body[data-hmanager-page="admin/notifications"] .grid-container > * { min-width: 0; }
    body[data-hmanager-page="admin/notifications"] :is(.setting-text, .panel-indicator) { min-width: 0; overflow-wrap: anywhere; }
    body[data-hmanager-page="admin/moto_config"] :is(.settings-layout, .settings-sidebar, .settings-content-pane) { min-width: 0; max-width: 100%; }
    body[data-hmanager-page="admin/moto_config"] :is(.settings-sidebar, .settings-content-pane, .modern-panel) { box-sizing: border-box; }
    body[data-hmanager-page="admin/moto_config"] .settings-sidebar { flex-shrink: 1; }
    body[data-hmanager-page="admin/moto_config"] .general-grid { grid-template-columns: minmax(0, 1fr); }
    body[data-hmanager-page="admin/moto_config"] .modern-panel { min-width: 0; max-width: 100%; }
    body[data-hmanager-page="admin/moto_config"] .config-topbar-actions > * { box-sizing: border-box; }
    body[data-hmanager-page="admin/security"] :is(.soc-header, .header-left, .soc-title-container, .panel-header) { flex-wrap: wrap; gap: 12px; }
    body[data-hmanager-page="admin/security"] .soc-header { padding: 16px; }
    body[data-hmanager-page="admin/security"] .glass-panel { min-width: 0; }
    body[data-hmanager-page="admin/security"] .soc-main { padding: 16px; }
    body[data-hmanager-page="admin/return_warranty_detail"] > .container { width: 100%; padding: 20px 16px; }
    body[data-hmanager-page="admin/return_warranty_detail"] :is(.layout-grid, .layout-grid > *, .glass-box) { min-width: 0; }
    body[data-hmanager-page="admin/return_warranty_detail"] :is(.header, .btn-action-bar) { flex-wrap: wrap; }
    body[data-hmanager-page="admin/return_warranty_detail"] .data-row { flex-wrap: wrap; overflow-wrap: anywhere; }
    body[data-hmanager-page="admin/return_detail"] .btn-action-bar :is(div, #action-buttons-container) { min-width: 0; max-width: 100%; flex-wrap: wrap; }

    .hmanager-shared-topbar :is(.header-left, .title-container) { flex-wrap: wrap; min-width: 0; }
    .hmanager-shared-topbar .header-left { gap: 12px; }
    .hmanager-shared-main { min-width: 0; }
    body[data-hmanager-page="admin/tiktok_ads_campaign"] .escalify-dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; }
    body[data-hmanager-page="admin/tiktok_ads_campaign"] .admin-content { grid-template-columns: minmax(0, 1fr) !important; }

    body[data-hmanager-page="meli/detalle_campana"] .content-grid { grid-template-columns: minmax(0, 1fr); }
    body[data-hmanager-page="meli/detalle_campana"] :is(.glass-card, .content-grid > *) { min-width: 0; }
    body[data-hmanager-page="meli/detalle_campana"] .panel-header { flex-wrap: wrap; gap: 12px; }
    body[data-hmanager-page="meli/detalle_campana"] .panel-header > div { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    body[data-hmanager-page="meli/detalle_campana"] #himmel-matrix-container { max-width: 100%; min-width: 0; overflow-x: auto; }

    body[data-hmanager-page="marketing/dashboard"] > header { flex-wrap: wrap; gap: 12px; padding: 16px !important; }
    body[data-hmanager-page="marketing/dashboard"] > header > div { flex-wrap: wrap; max-width: 100%; }
    body[data-hmanager-page="marketing/dashboard"] > main { padding: 20px 16px !important; }
    /* Desktop loaders compensate for zoom with an oversized backdrop. Phones use the viewport. */
    body[data-hmanager-page] #himmel-loader-overlay { inset: 0; width: 100vw; height: 100dvh; }

    body[data-hmanager-page="errors_report"] :is(.chart-card, .charts-grid > *) { min-width: 0; }
    body[data-hmanager-page] canvas { max-width: 100%; }
    body[data-hmanager-page="picker"] .topbar > div,
    body[data-hmanager-page="meli_picker"] .topbar > div { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    body[data-hmanager-page="picker"] .topbar > div > div,
    body[data-hmanager-page="meli_picker"] .topbar > div > div { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    body[data-hmanager-page="picker"] #mesa-stats-container { margin-left: 0 !important; flex-wrap: wrap; }
    body[data-hmanager-page="imports"] .top-navbar { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
    body[data-hmanager-page="imports"] .logo-area { flex-wrap: wrap; min-width: 0; gap: 8px; }
    body[data-hmanager-page="imports"] .card > div > div { min-width: 0 !important; max-width: 100%; }
    body[data-hmanager-page="imports"] .glass-table-container { overflow-x: auto; }
    body[data-hmanager-page="himmel_ia"] :is(.hia-content, .hia-grid, .hia-card, .hia-section-intro) { min-width: 0; }
    body[data-hmanager-page="himmel_ia"] :is(.hia-grid-2, .hia-grid-3, .hia-grid-4, .hia-test-grid) { grid-template-columns: minmax(0, 1fr); }
    body[data-hmanager-page="himmel_ia"] .hia-card-heading { flex-wrap: wrap; gap: 12px; }
    body[data-hmanager-page="admin/meta_ads_react"] .meta-date-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-hmanager-page="admin/meta_ads_react"] .meta-control { min-width: 0; }
    body[data-hmanager-page="admin/combos_react"] .combo-toolbar > :is(.button, select) { flex: 1 1 150px; min-width: 0; max-width: 100%; }
    body[data-hmanager-page="admin/combos_react"] .combo-toolbar > .button { white-space: normal; overflow-wrap: anywhere; padding: 10px 12px; }
    body[data-hmanager-page="help-center"] .step-content { min-width: 0; overflow-wrap: anywhere; }
}