/* Keep data tables intact; only their scroll regions move horizontally. */
.mobile-scroll-region:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (max-width: 1100px) {
  .app-shell, .tab-panel, .tab-panel > *,
  .summary > div, .toolbar > *, .sales-toolbar > *, .price-toolbar > *,
  .inventory-toolbar > *, .sent-item-toolbar > *, .pos-day-toolbar > *,
  .register-settings-toolbar > *, .user-sales-toolbar > * {
    min-width: 0;
  }

  .sales-toolbar, .barcode-price-toolbar, .inventory-toolbar,
  .sent-item-toolbar, .pos-day-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .table-wrap, .mobile-scroll-region {
    max-width: 100%;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .metric { overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
  .app-shell {
    width: auto;
    margin-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
    padding: 12px 0 max(20px, env(safe-area-inset-bottom));
  }

  .topbar {
    flex-direction: row;
    align-items: center;
    padding: 12px;
  }
  .topbar > div:first-child { min-width: 0; }
  .topbar h1 { font-size: 22px; }
  .eyebrow { font-size: 10px; }
  .status {
    min-width: 0;
    max-width: 44%;
    padding: 7px 8px;
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  .tabs {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 10;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 10px;
    padding: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    background: var(--panel);
  }
  .tabs .tab-button {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    padding: 10px 13px;
    white-space: nowrap;
    font-size: 13px;
  }

  button, input:not([type="checkbox"]):not([type="radio"]), select {
    min-height: 44px;
  }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }
  input[type="date"], input[type="time"] { min-inline-size: 0; }
  input::-webkit-date-and-time-value { min-width: 0; text-align: left; }
  button { height: auto; white-space: normal; overflow-wrap: anywhere; }
  .transfer-lookup-toolbar button { min-height: 44px; }

  .toolbar, .sales-toolbar, .price-toolbar, .barcode-price-toolbar,
  .inventory-toolbar, .sent-item-toolbar, .pos-day-toolbar,
  .user-sales-toolbar, .register-settings-toolbar, .transfer-lookup-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }
  .toolbar .search, .toolbar .group-filter,
  .price-toolbar:not(.barcode-price-toolbar) > label,
  .user-sales-toolbar > label:first-child,
  .register-settings-toolbar > label,
  .transfer-lookup-toolbar > label:first-child,
  .inventory-toolbar > label:first-child,
  .inventory-toolbar > label:nth-child(2) { grid-column: 1 / -1; }

  .register-settings-toolbar > button,
  .price-toolbar:not(.barcode-price-toolbar) > button,
  .inventory-toolbar > button,
  .barcode-price-toolbar > button { grid-column: 1 / -1; }

  .toolbar label, .sales-toolbar label, .price-toolbar label,
  .inventory-toolbar label, .sent-item-toolbar label, .pos-day-toolbar label,
  .transfer-lookup-toolbar label { min-width: 0; overflow-wrap: anywhere; }

  .check-field, .checkbox-label {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 44px;
  }
  .check-field input, .checkbox-label input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
  }
  .pos-day-filter { gap: 4px 12px; }
  .pos-day-filter label { min-height: 44px; }

  .summary, .sales-summary, .inventory-summary, .price-summary,
  .stores-summary, .pos-day-summary, .sent-item-summary,
  .register-settings-summary, .transfer-lookup-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    padding: 12px;
  }
  .summary .metric { font-size: 18px; line-height: 1.3; }
  .summary .metric.muted { font-size: 14px; }
  .metric-label { font-size: 11px; line-height: 1.4; }

  .table-wrap { max-height: 65vh; max-height: 65dvh; }
  .sales-table-wrap, .receipts-table-wrap, .inventory-table-wrap,
  .stores-table-wrap, .pos-day-table-wrap { max-height: 360px; max-height: 50dvh; }
  .mobile-scroll-region { overflow: auto; }
  th, td { padding: 10px; }
  .table-panel-header { min-width: 0; }
  .table-panel-header button, .store-status-header button,
  .receipt-detail-button, .row-actions button, .user-sales-actions button,
  #expandPosDay, .dialog-close { min-height: 44px; }
  .user-sales-actions { width: 80px; grid-template-columns: 80px; }
  .user-sales-actions button { width: 80px; }
  #rows > tr > td:first-child:not([colspan]),
  #userSalesRows > tr > td:first-child:not([colspan]) {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel);
  }
  #usersPanel thead th:first-child, #userSalesPanel thead th:first-child {
    left: 0;
    z-index: 3;
  }

  .store-status-header, .sent-item-header, .receipt-detail-header,
  .json-panel-header {
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }
  .store-status-header h2, .sent-item-header h2,
  .receipt-detail-header h2, .json-panel-header h2 {
    min-width: 0;
    flex: 1;
    font-size: 15px;
    overflow-wrap: anywhere;
  }
  .receipt-detail-header > span { overflow-wrap: anywhere; }
  .json-actions { flex-wrap: wrap; }
  .json-actions button { min-width: 44px; }

  .transfer-lookup-actions { flex-direction: row; align-items: end; }
  .transfer-lookup-actions h2 { flex: 1 1 100%; margin: 0; }
  .transfer-lookup-actions label { flex: 1 1 100%; min-width: 0; }
  .transfer-lookup-actions button { min-width: 44px; }
  .transfer-lookup-table { max-height: none; }
  .transfer-lookup-scroll { max-height: 55dvh; }
  .transfer-lookup-table.is-fullscreen .transfer-lookup-actions label { flex-basis: 140px; }
  .transfer-lookup-table.is-fullscreen .transfer-lookup-scroll { max-height: none; }

  .receipts-table-wrap.fullscreen, .json-panel.fullscreen,
  .transfer-lookup-table.is-fullscreen {
    inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    max-width: none;
    max-height: none;
  }

  dialog[open] {
    width: calc(100% - 16px);
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .user-edit-dialog, .price-edit-dialog { padding: 14px; }
  .user-sales-dialog form { padding: 14px; }
  .user-edit-fields, .user-sales-name-fields, .price-edit-fields,
  .price-edit-context { grid-template-columns: minmax(0, 1fr); }
  .dialog-header { align-items: start; }
  .dialog-header h2 { font-size: 18px; overflow-wrap: anywhere; }
  .dialog-close { flex: 0 0 44px; width: 44px; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions button, .user-edit-account-actions button { flex: 1 1 120px; }
  .user-edit-check, .user-sales-store-list label { min-height: 44px; }
  .register-settings-actions { gap: 10px; }
}

@media (max-width: 359px) {
  .sales-toolbar, .barcode-price-toolbar, .inventory-toolbar,
  .sent-item-toolbar, .pos-day-toolbar, .user-sales-toolbar,
  .transfer-lookup-toolbar { grid-template-columns: minmax(0, 1fr); }
  .topbar h1 { font-size: 20px; }
  .toolbar > button { padding-inline: 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tabs { scroll-behavior: auto; }
}