/* Final mobile layer. Loaded after all legacy styles so desktop rules cannot leak into iPhone layouts. */
@media (max-width: 768px) {
  :root {
    /* iPhone Safari keeps the bottom browser controls inside the large viewport.
       Reserve their live height while the controls are expanded, then release it
       automatically as the controls collapse during scrolling. */
    --mobile-browser-bottom-obstruction: 0px;
    --mobile-browser-bottom-obstruction: max(0px, calc(100lvh - 100dvh));
  }

  html,
  body,
  #app,
  .admin-shell,
  .workspace {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  html,
  body {
    background: #f2f5f3 !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  .admin-shell {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
  }

  .admin-shell > .sidebar,
  .admin-shell > .sidebar-backdrop,
  .workspace > .topbar {
    display: none !important;
    visibility: hidden !important;
  }

  .admin-shell > .mobile-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 850 !important;
    display: grid !important;
    visibility: visible !important;
    grid-template-columns: 44px minmax(0, 1fr) 36px !important;
    width: 100% !important;
  }

  .workspace {
    display: block !important;
    padding: 12px 0 calc(104px + env(safe-area-inset-bottom, 0px) + var(--mobile-browser-bottom-obstruction)) !important;
  }

  .workspace > :not(.topbar):not(.mobile-topbar),
  .workspace > .panel,
  .workspace > .module-page,
  .workspace > .data-layout,
  .workspace > .dashboard-grid,
  .workspace > .single-panel-page,
  .workspace > .single-form-page,
  .workspace > .image-workbench-page,
  .workspace > .table-panel,
  .workspace > .outsource-order-layout {
    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 12px 12px !important;
  }

  .workspace > .dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Metrics stay compact in two columns; data-heavy dashboard sections use the
     full phone width so their cards never collapse into narrow vertical strips. */
  .workspace > .dashboard-grid > .panel {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .workspace > .dashboard-grid .warning-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .workspace > .dashboard-grid .warning-group,
  .workspace > .dashboard-grid .warning-row {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .workspace > .dashboard-grid .warning-row {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
  }

  .workspace .data-layout,
  .workspace .form-grid,
  .workspace .filter-grid,
  .workspace .report-filter-grid,
  .workspace .profile-summary-grid,
  .workspace .compact-summary,
  .workspace .sales-product-row,
  .workspace .sales-shipping-row,
  .workspace .plan-item-row,
  .workspace .green-blend-row,
  .workspace .monthly-charge-row,
  .workspace .outsource-order-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .workspace [hidden],
  .mobile-navigation-sheet [hidden] {
    display: none !important;
  }

  .workspace .panel,
  .workspace .module-page,
  .workspace .single-panel-page,
  .workspace .single-form-page,
  .workspace .table-panel,
  .workspace .records-table-wrap,
  .workspace .table-shell,
  .workspace .table-scroll,
  .workspace .data-table-wrap,
  .workspace .report-table-wrap,
  .workspace .quote-table-wrap,
  .workspace .statement-table-wrap,
  .workspace .inventory-flow-table,
  .workspace .wide-table-wrap,
  .workspace .panel:has(.mobile-record-table) {
    max-width: 100% !important;
    overflow: visible !important;
  }

  .workspace table.mobile-record-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
  }

  .workspace table.mobile-record-table thead {
    position: absolute !important;
    display: block !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
  }

  .workspace table.mobile-record-table tbody {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .workspace table.mobile-record-table tr.mobile-record-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .workspace table.mobile-record-table tr.mobile-record-card > td {
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .workspace table.mobile-record-table tr.mobile-record-card > td.mobile-record-primary,
  .workspace table.mobile-record-table tr.mobile-record-card > td.mobile-record-actions,
  .workspace table.mobile-record-table tr.mobile-record-card > td.mobile-record-span {
    grid-column: 1 / -1 !important;
  }

  .workspace .panel-title,
  .workspace .panel-header,
  .workspace .fulfillment-section-title,
  .workspace .inner-title {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  .workspace input,
  .workspace select,
  .workspace textarea,
  .workspace .searchable-select-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  .workspace .fulfillment-order-item,
  .workspace .invoice-center-list-item,
  .workspace .record-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .workspace .fulfillment-tabs button,
  .workspace .invoice-center-tabs button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .workspace .fulfillment-tabs button strong,
  .workspace .invoice-center-tabs button strong,
  .workspace .fulfillment-tabs button span,
  .workspace .invoice-center-tabs button span {
    width: auto !important;
    white-space: nowrap !important;
  }

  .workspace .fulfillment-order-actions,
  .workspace .form-actions,
  .workspace .module-actions,
  .workspace .invoice-center-detail-actions {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* The shipping form is often longer than one iPhone screen. Keep its final
     fields and action buttons scrollable above both the app navigation and the
     expanded Safari toolbar. */
  .workspace .fulfillment-detail-page,
  .workspace .fulfillment-detail-card {
    scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px) + var(--mobile-browser-bottom-obstruction)) !important;
  }

  .workspace .fulfillment-detail-card {
    padding-bottom: calc(112px + var(--mobile-browser-bottom-obstruction)) !important;
  }

  .workspace .fulfillment-detail-card .form-actions {
    margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .admin-shell > .mobile-bottom-nav {
    display: grid !important;
    visibility: visible !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--mobile-browser-bottom-obstruction)) !important;
  }

  /* A fixed tab bar must not cover fields or commit actions on the shipping
     detail form. The order list keeps the global tab bar; the detail screen
     uses its own back button and action group. */
  .admin-shell:has(.fulfillment-detail-page) > .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
  }

  .admin-shell > .mobile-navigation-backdrop {
    display: block !important;
    visibility: visible !important;
  }

  .admin-shell > .mobile-navigation-sheet {
    display: grid !important;
    visibility: visible !important;
    bottom: var(--mobile-browser-bottom-obstruction) !important;
  }
}

@media (max-width: 360px) {
  .workspace > .dashboard-grid,
  .workspace table.mobile-record-table tr.mobile-record-card,
  .mobile-navigation-group > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .workspace table.mobile-record-table tr.mobile-record-card > td {
    grid-column: 1 / -1 !important;
  }

  .workspace > .dashboard-grid .warning-row {
    grid-template-columns: 24px minmax(0, 1fr) !important;
  }

  .workspace > .dashboard-grid .warning-row > span:last-child {
    grid-column: 2 !important;
  }
}

/* Keep filtered and paginated rows hidden after the card display overrides. */
@media (max-width: 768px) {
  .workspace table.mobile-record-table tr.mobile-record-card[hidden] {
    display: none !important;
  }
}