/* Phase 8.8A.11G.2: phone/small-device Admin shell stacking. */
@media (max-width: 640px) {
  #admin .admin-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
  }

  #admin .admin-shell-sidebar,
  #admin .admin-shell-main,
  #admin #admin-section-view,
  #admin #admin-home-view {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #admin .admin-shell-sidebar {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }

  #admin .admin-shell-main {
    grid-column: 1 / -1 !important;
  }
}

/* Phase 8.8A.11F: phone-width Admin containment overrides. */
@media (max-width: 480px) {
  #admin,
  #admin * {
    box-sizing: border-box;
  }

  #admin .admin-shell,
  #admin .admin-shell-main,
  #admin .admin-details,
  #admin .admin-section,
  #admin .panel,
  #admin .card,
  #admin .soft-panel,
  #admin .admin-page-header,
  #admin .admin-page-title-row,
  #admin .admin-page-actions,
  #admin .filters,
  #admin .filter-spacing,
  #admin .row,
  #admin .field,
  #admin label,
  #admin input,
  #admin select,
  #admin textarea,
  #admin .input,
  #admin .btn {
    max-width: 100%;
    min-width: 0;
  }

  #admin .admin-shell {
    grid-template-columns: 1fr !important;
  }

  #admin .admin-shell-sidebar {
    width: 100% !important;
    margin-top: 0 !important;
  }

  #admin .admin-page-actions {
    width: 100%;
    align-items: stretch;
    justify-content: stretch !important;
  }

  #admin .admin-page-actions > *,
  #admin .admin-toolbar .btn,
  #admin .dashboard-quick-actions .btn,
  #admin .dashboard-attention-item .btn,
  #admin .filters .btn,
  #admin .filter-spacing .btn,
  #admin .filters .pill,
  #admin .filter-spacing .pill,
  #admin .pagination .btn,
  #admin .input,
  #admin input,
  #admin select,
  #admin textarea {
    width: 100%;
  }

  #admin .admin-toolbar {
    justify-content: flex-end !important;
  }

  #admin .admin-toolbar .btn.logout {
    width: fit-content !important;
    min-width: 112px !important;
    max-width: min(48vw, 160px) !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  #admin .btn,
  #admin .pill,
  #admin .tag {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #admin .row,
  #admin .filters,
  #admin .filter-spacing,
  #admin .incident-toolbar,
  #admin .incident-filters,
  #admin .transfer-history-toolbar,
  #admin .payment-account-form,
  #admin .payment-accounts-heading,
  #admin .payment-accounts-toolbar,
  #admin .payment-account-actions,
  #admin .subscription-account-actions,
  #admin .subscription-billing-toggle,
  #admin .subscription-history-pagination,
  #admin .tenant-support-access-head,
  #admin .tenant-support-access-pagination,
  #admin .tenant-support-access-filter-actions,
  #admin .priority-support-actions,
  #admin .queue-page-list .row,
  #admin .customers-page-head,
  #admin .customers-page-actions,
  #admin .customer-history-search,
  #admin .customer-list-actions,
  #admin .cashier-actions,
  #admin .cashier-form,
  #admin .admin-users-form {
    align-items: stretch !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #admin .payment-accounts-toolbar,
  #admin .payment-account-form-grid,
  #admin .tenant-support-access-filters,
  #admin .cashier-form,
  #admin .admin-users-form,
  #admin-subscriptions .subscription-account-grid,
  #admin-subscriptions .subscription-plan-grid,
  #admin-inventoryTable .inventory-filter-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #admin .payment-account-form .input,
  #admin .payment-account-form .btn,
  #admin .payment-account-actions .btn,
  #admin .subscription-account-actions .btn,
  #admin .subscription-billing-toggle .btn,
  #admin .subscription-plan-action .btn,
  #admin .tenant-support-access-filter-actions .btn,
  #admin .tenant-support-access-pagination .btn,
  #admin .priority-support-actions .btn,
  #admin .incident-toolbar .btn,
  #admin .incident-filters .btn,
  #admin .transfer-history-toolbar .btn,
  #admin .stock-transfer-action .btn,
  #admin .customer-history-search .btn,
  #admin .customer-list-actions .btn,
  #admin .cashier-actions .btn,
  #admin .receipt-action-btn,
  #admin .products-action-btn,
  #admin .inv-action-btn,
  #admin .cashier-form-action .btn,
  #admin .admin-users-form .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  #admin-dashboard .dashboard-kpi,
  #admin-dashboard .dashboard-kpi-action {
    width: 100% !important;
    max-width: 100% !important;
  }

  #admin-receipts .rcpt-filter-card {
    grid-template-columns: 1fr !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
  }

  #admin-receipts .rcpt-search-input-wrap,
  #admin-receipts .receipt-search-field,
  #admin-receipts #rcptSearch,
  #admin-receipts #rcptFrom,
  #admin-receipts #rcptTo,
  #admin-receipts #rcptClear {
    width: 100% !important;
    max-width: 100% !important;
  }

  #admin-receipts .receipt-action-group,
  #admin-productsTable .products-action-stack,
  #admin-inventoryTable .inv-action-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }

  #admin-productsTable #productsPaginationWrap,
  #admin-inventoryTable #invPaginationWrap,
  #admin .pagination,
  #admin .transfer-pagination,
  #admin .incident-pagination,
  #admin .rcpt-pagination {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
  }

  #admin-incidents .incident-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #admin-incidents .incident-filters #incidentSearch,
  #admin-incidents .incident-filters #incidentStatusFilter,
  #admin-incidents .incident-filters #incidentChannelFilter,
  #admin-incidents .incident-filters .incident-archive-btn,
  #admin-inventoryTable .inventory-expiry-pills .pill,
  #admin-inventoryTable .inventory-filter-bar .btn,
  #admin-inventoryTable .inventory-filter-bar input[type="date"],
  #admin-inventoryTable #invExpClear,
  #admin-inventoryTable #invActiveShopLabel,
  #admin-inventoryTable .inventory-table-meta .btn {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #admin-transfers .transfer-history-toolbar,
  #admin-transfer .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #admin-transfer .row > .field,
  #admin-transfer .row > .stock-transfer-action,
  #admin-transfers .transfer-history-toolbar > *,
  #admin-inventoryTable .inventory-filter-bar,
  #admin-inventoryTable .inventory-table-toolbar,
  #admin-inventoryTable .inventory-table-meta,
  #admin-inventoryTable .inventory-date-range,
  #admin-inventoryTable .inventory-expiry-pills {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #admin-inventoryTable .inventory-filter-bar {
    grid-template-areas:
      "stock"
      "expiry"
      "dates" !important;
  }

  #admin-inventoryTable .inventory-expiry-pills,
  #admin-inventoryTable .inventory-date-range {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #admin-cashiers .cashiers-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #admin-cashiers .cashiers-head {
    display: none !important;
  }

  #admin-cashiers .cashiers-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  #admin-cashiers .cashiers-row > *,
  #admin-cashiers .cashier-identity-cell,
  #admin-cashiers .cashier-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #admin-warehouseManagement .warehouse-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #admin-warehouseManagement .warehouse-tab {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  #admin-supportAccess .tenant-support-access-page,
  #admin-supportAccess .tenant-support-access-section,
  #admin-supportAccess .tenant-support-access-head,
  #admin-supportAccess .tenant-support-access-filters,
  #admin-supportAccess .tenant-support-access-pagination,
  #admin-supportAccess .tenant-support-access-policy-status {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #admin-supportAccess .tenant-support-access-section {
    overflow: hidden !important;
  }

  #admin-supportAccess .tenant-support-access-filters {
    grid-template-columns: 1fr !important;
  }

  #admin-supportAccess .tenant-support-access-table {
    width: max-content !important;
  }

  #admin-supportAccess .tenant-support-access-table-wrap,
  #admin-receipts .rcpt-table-wrap,
  #admin-transfers .transfer-table-wrap,
  #admin .table-wrap,
  #admin .scroll-area,
  #admin-productsTable .products-scroll-area {
    max-width: 100% !important;
  }

  .tenant-subscription-modal-card,
  .tenant-support-access-modal-card,
  .priority-support-dialog,
  .receipt-card,
  .backend-receipt-card {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }
}