/* Phone and tablet layout repairs. Desktop density and business rules stay in
 * the component stylesheets; wide data tables scroll inside their own panel. */
@media screen and (max-width: 1024px) {
  .app-shell { display: block; }
  .workspace { width: 100%; min-width: 0; min-height: 100dvh; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 80;
    width: min(280px, calc(100vw - 48px)); height: 100dvh;
    display: flex; padding: env(safe-area-inset-top, 0px) 12px max(14px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); transition: transform 160ms ease-out;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  body:has(.sidebar.mobile-open) { overflow: hidden; }
  .mobile-menu { display: inline-flex; flex: 0 0 44px; }
  .nav-scrim:not([hidden]) {
    position: fixed; inset: 0; z-index: 70; display: block;
    width: 100%; height: 100%; padding: 0; border: 0;
    background: rgb(21 32 51 / 30%);
  }
  .sidebar .nav-item { min-height: 44px; }
  .btn, .btn.small, .icon-btn, .icon-button, .mobile-menu, .tab, .task-tab, .filter-select-trigger { min-height: 44px; }
  .icon-btn, .icon-button { width: 44px; min-width: 44px; }
  .btn { height: auto; padding-top: 9px; padding-bottom: 9px; }
  .row-action, .text-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .small-domain, .store-identity .store-archive-trigger { min-width: 44px; width: 44px; height: 44px; }
  :is(.content, dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
  #login-screen .form-field input, #login-screen .form-field select {
    min-width: 0; min-inline-size: 0; max-width: 100%; min-height: 44px; font-size: 16px;
  }
  .topbar { min-height: 56px; height: auto; gap: 8px; padding: 4px max(12px, env(safe-area-inset-right, 0px)) 4px max(12px, env(safe-area-inset-left, 0px)); }
  .topbar .breadcrumb { flex: 1 1 auto; min-width: 0; gap: 6px; overflow: hidden; }
  .topbar .breadcrumb > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar .top-actions { flex: 0 0 auto; gap: 4px; }
  .topbar .account-name { display: inline-block; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
  .content, .content > *, .panel, .panel-body, .grid-main, .grid-equal, .chart-grid { min-width: 0; max-width: 100%; }
  .page-heading, .panel-head { flex-wrap: wrap; }
  .heading-actions, .panel-head .row-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #a9b4c5 #f0f3f8; }
  .table-wrap::-webkit-scrollbar { height: 8px; }
  .table-wrap::-webkit-scrollbar-thumb { background: #a9b4c5; border: 2px solid #f0f3f8; border-radius: 4px; }
  .table-wrap::-webkit-scrollbar-track { background: #f0f3f8; }
  .toolbar, .toolbar-actions, .filter-row, .scopebar, .scope-meta, .department-scope-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .toolbar > div, .toolbar > label, .scopebar > div, .scopebar > label { min-width: 0; max-width: 100%; }
  .toolbar .search-box, .picker-search { min-width: 0; }
  .pagination, .pagination-controls, .picker-pagination, .card-request-pagination, .unallocated-income-pagination, .account-attribution-pagination { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .pagination > span, .pagination-controls > span { max-width: 100%; overflow-wrap: anywhere; }
  .page-heading h1, .panel-head h2, .section-note, .scope-meta, .task-domain, .task-store-meta, .department-scope-actions, .report-date-note { overflow-wrap: anywhere; }
  :is(dialog.record-dialog, dialog.task-dialog)[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); overflow: hidden; }
  :is(dialog.record-dialog, dialog.task-dialog) > :is(.dialog-head, .dialog-footer) { flex: 0 0 auto; min-width: 0; max-width: 100%; }
  :is(dialog.record-dialog, dialog.task-dialog) .dialog-body { flex: 1 1 auto; min-width: 0; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; }
  .team-dialog .team-password-toggle, .integration-secret-toggle, .password-visibility-toggle { width: 44px; min-width: 44px; min-height: 44px; }
  .team-dialog .team-password-control > input, .integration-secret-control input, .password-input input { padding-right: 50px; }
  .integration-secret-control input, .password-input input { min-height: 46px; }
}

@media screen and (max-width: 760px) {
  .content { padding: 16px max(12px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .page-heading { gap: 12px; }
  .heading-actions { width: 100%; }
  .heading-actions .btn { flex: 1 1 120px; }
  .topbar .breadcrumb > #breadcrumb-group { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  .topbar .account-name { max-width: 56px; }
  .topbar .top-separator { display: none; }
  .filter-control > select, .filter-select-trigger, .ticket-option-search input {
    min-width: 0; min-inline-size: 0; max-width: 100%; min-height: 44px; font-size: 16px;
  }
  /* Query filters use the compact reading size without shrinking touch targets. */
  #main-content :is(.scopebar, .commerce-toolbar, .orders-toolbar, .orders-dates, .catalog-country-control) :is(select, input[type="date"]),
  #main-content .department-toolbar [data-filter-trigger="country"] { font-size: 14px; }
  @supports (-webkit-touch-callout: none) {
    /* Keep native iOS pickers at their usual focus size; page zoom stays enabled. */
    #main-content :is(.scopebar, .commerce-toolbar, .orders-toolbar, .orders-dates, .catalog-country-control) :is(select, input[type="date"]):focus { font-size: 16px; }
  }
  .filter-select-option, .task-check-row, .team-dialog .team-permission-option, .ticket-people label { min-height: 44px; }
  :is(.content, dialog) :is(input[type="date"], input[type="datetime-local"], input[type="time"]) { min-inline-size: 0; max-inline-size: 100%; }
  .form-field input[type="file"], .ticket-upload input[type="file"] { width: 100%; height: auto; white-space: normal; }
  :is(.content, dialog) input[type="file"]::file-selector-button { min-height: 32px; max-width: 100%; }
  .toolbar, .panel-head { padding: 12px; gap: 10px; }
  .toolbar > .search-box, .toolbar > div:first-child, .scoped-filters .search-box { flex-basis: 100%; width: 100%; min-width: 0; max-width: none; }
  .toolbar > select, .filter-row select { min-width: 0; max-width: 100%; flex: 1 1 130px; }
  .toolbar-actions { width: 100%; gap: 8px; }
  .toolbar-actions > .btn { flex: 1 1 120px; }
  .department-toolbar > .filter-control { flex: 1 1 130px; min-width: 0; max-width: none; }
  .advanced-filters .field { flex: 1 1 135px; min-width: 0; max-width: 100%; }
  .scopebar > .scope-field { flex: 1 1 130px; flex-direction: column; align-items: stretch; gap: 6px; }
  .scopebar > .scope-field:first-child { flex-basis: 100%; }
  .scopebar .scope-field :is(input, select) { width: 100%; min-width: 0; max-width: 100%; }
  .overview-finance-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .overview-finance-scope > .scope-field:first-child, .overview-finance-scope > .overview-report-controls, .overview-finance-scope > .scope-meta { grid-column: 1 / -1; width: 100%; }
  .overview-finance-scope > .scope-field { width: 100%; }
  .overview-report-controls { display: flex; flex-wrap: wrap; width: 100%; max-width: 100%; min-width: 0; }
  .overview-report-controls .report-country-control { flex: 1 1 160px; min-width: 0; max-width: 100%; }
  .overview-report-controls .report-country-control select { width: 100%; min-width: 0; max-width: 100%; }
  .overview-report-controls .report-currency-control { flex: 0 1 auto; }
  .overview-report-controls .report-currency-control strong { max-width: 100%; }
  .overview-timezone-info { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .overview-timezone-info strong { white-space: normal; }
  .commerce-toolbar { align-items: stretch; }
  .commerce-toolbar > .field { flex: 1 1 130px; flex-direction: column; align-items: stretch; gap: 6px; }
  .commerce-toolbar .field input[type="date"] { width: 100%; min-width: 0; max-width: 100%; }
  .commerce-toolbar > .search-box { order: initial; }
  .catalog-scope-controls { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .catalog-scope-controls .store-picker-btn { flex: 1 1 100%; width: 100%; max-width: 100%; }
  .catalog-language-actions { flex: 1 1 100%; width: 100%; min-width: 0; }
  .catalog-country-control { flex: 1 1 auto; }
  .catalog-country-control select { width: 100%; }
  .catalog-language-actions > .btn { flex: 0 0 auto; }
  .catalog-toolbar { gap: 10px; padding: 12px; }
  .catalog-view-tabs { max-width: 100%; overflow-x: auto; flex-shrink: 1; }
  .catalog-view-tabs > .btn { flex: 0 0 auto; }
  .catalog-counts { gap: 8px 16px; }
  .catalog-csv-toolbar .search-box { min-width: 0; flex-basis: 100%; max-width: none; }
  .catalog-csv-toolbar .store-picker-btn { width: 100%; max-width: 100%; margin-left: 0; }
  .orders-dates { min-width: 0; width: 100%; gap: 10px; }
  .orders-dates label { flex: 1 1 130px; min-width: 0; flex-direction: column; align-items: stretch; gap: 6px; }
  .orders-dates input { width: 100%; min-width: 0; }
  .orders-toolbar > * { min-width: 0; max-width: 100%; }
  .tabs, .commerce-view-tabs, .catalog-area-tabs, .ticket-tabs { min-width: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; }
  :is(.tabs, .commerce-view-tabs, .catalog-area-tabs, .ticket-tabs) > button { flex: 0 0 auto; }
  .metric-grid, .metric-grid.department-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric, .metric-card { padding: 12px; }
  .metric-value, .metric:first-child .metric-value, .metric-card:first-child .metric-value { font-size: clamp(20px, 5.8vw, 26px); flex-wrap: wrap; white-space: normal; overflow-wrap: anywhere; }
  .metric-label { align-items: flex-start; overflow-wrap: anywhere; }
  .metric-foot { flex-wrap: wrap; }
  .commerce-summary { gap: 12px 20px; padding: 12px; }
  .commerce-summary > span { white-space: normal; flex-wrap: wrap; }
  .chart-grid, .grid-main, .grid-equal, .integrations, .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-grid > *, .chart-wrap, .trend-chart { min-width: 0; max-width: 100%; }
  .trend-chart > svg { width: 100%; max-width: 100%; }
  .definition-grid, .form-grid, .ticket-form-grid, .ticket-facts, .ticket-create-context,
  .ticket-create-dialog .ticket-assignment-design, .integration-grid, .integration-metadata,
  .task-registration-summary, .task-role-preview, .overview-metric-metadata,
  .advertising-followup-facts, .catalog-csv-batch-meta, .task-yy-readonly-receipt dl,
  .matching-dialog .matching-fields, .matching-source-fields, .team-dialog .team-detail-grid,
  .commerce-order-info, .order-evidence-core, .order-evidence-amounts, .tier-basis-scope-grid,
  .tier-confirm-fields, .card-stock-filters { grid-template-columns: minmax(0, 1fr); }
  .form-field.full, .ticket-field.full, .ticket-create-store, .integration-full { grid-column: 1 / -1; }
  .account-settings .account-preferences-form { grid-template-columns: minmax(0, 1fr); }
  .account-settings .account-security, .account-settings-dialog .account-settings .account-security { max-width: 100%; }
  .account-settings .account-facts { grid-template-columns: minmax(0, 1fr); }
  .account-settings .row-actions { flex-wrap: wrap; }
  .settings-menu { display: flex; flex-wrap: wrap; max-width: 100%; }
  .settings-menu button { min-width: 0; flex: 1 1 135px; }
  .pagination-controls { width: 100%; gap: 8px; }
  .pagination .btn, .picker-pagination .btn, .matching-page-controls .btn { min-height: 44px; height: 44px; min-width: 44px; }
  .pagination input, .pagination select, .matching-dialog .matching-page-jump input { min-height: 44px; height: 44px; font-size: 16px; }
  .pagination input { width: 60px; }
  .pagination .field { max-width: 100%; flex-wrap: wrap; }
  .selection-bar, .collection-selection-bar, .card-selection-bar { max-width: 100%; flex-wrap: wrap; gap: 10px; }
  .selection-bar .row-actions { flex-wrap: wrap; }
  .commerce-shell .table-wrap th:last-child, .commerce-shell .table-wrap td:last-child { position: static; }
  .panel-foot, .app-footer { min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 8px; overflow-wrap: anywhere; }

  /* A single bounded scroll region keeps actions reachable above the keyboard. */
  :is(dialog.record-dialog, dialog.task-dialog)[open] { display: flex; flex-direction: column; width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); margin: auto; padding: 0; overflow: hidden; }
  dialog.record-dialog > .dialog-head, dialog.record-dialog > .dialog-footer,
  dialog.task-dialog > .dialog-head, dialog.task-dialog > .dialog-footer { flex: 0 0 auto; min-width: 0; max-width: 100%; }
  dialog.record-dialog .dialog-head, dialog.task-dialog .dialog-head { align-items: flex-start; gap: 8px; padding: 12px; }
  .dialog-head h2 { min-width: 0; overflow-wrap: anywhere; }
  dialog.record-dialog .dialog-body, dialog.task-dialog .dialog-body, .matching-dialog .modal-body { flex: 1 1 auto; min-width: 0; min-height: 0; max-height: none; padding: 14px 12px; overflow: auto; overscroll-behavior: contain; }
  .dialog-body > *, .task-content > *, .task-form, .task-section { min-width: 0; max-width: 100%; }
  dialog.record-dialog .dialog-footer, dialog.task-dialog .dialog-footer { padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px)); gap: 8px; flex-wrap: wrap; }
  .dialog-footer > .btn { flex: 1 1 120px; }
  .dialog-footer > :is(p, span, .form-error) { width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .task-shell { width: 100%; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); min-height: 0; }
  .task-header { padding: 12px; gap: 8px; flex-wrap: wrap; }
  .task-heading { flex: 1 1 160px; min-width: 0; }
  .task-header > .icon-button { order: 2; }
  .task-header .task-ticket-create { order: 3; width: 100%; flex: 1 1 100%; margin: 0; }
  .task-shell .task-layout { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0; }
  .task-shell .stage-nav { display: flex; flex: 0 0 auto; gap: 4px; width: 100%; min-width: 0; max-width: 100%; padding: 8px; overflow: auto hidden; border-right: 0; border-bottom: 1px solid var(--line); }
  .stage-item, .task-shell .stage-item { flex: 0 0 auto; width: auto; min-height: 44px; margin: 0; }
  .task-content { min-width: 0; min-height: 0; padding: 0 12px 14px; }
  .task-tabs { max-width: 100%; gap: 20px; overflow-x: auto; flex: 0 0 auto; }
  .task-tab { flex: 0 0 auto; }
  .task-section-heading { flex-wrap: wrap; }
  .task-stage-state { max-width: 100%; white-space: normal; text-align: left; }
  .task-footer { flex: 0 0 auto; padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .task-footer-note { max-width: 100%; overflow-wrap: anywhere; }
  .task-footer-actions { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; gap: 8px; }
  .task-footer-actions .btn { flex: 1 1 110px; min-width: 0; white-space: normal; }
  .task-flow-actions, .task-association-actions, .task-collection-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .task-flow-actions .btn, .task-association-actions .btn { max-width: 100%; height: auto; min-height: 44px; white-space: normal; }
  .task-masked-fields > div { flex-wrap: wrap; min-width: 0; }
  .task-masked-fields dd { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .task-country-config { min-width: 0; max-width: 100%; padding: 12px; }
  .ticket-create-dialog .ticket-create-context { grid-template-columns: minmax(0, 1fr); }
  .ticket-create-section-head .ticket-option-search { width: 100%; }
  .ticket-create-dialog .ticket-field input, .ticket-create-dialog .ticket-field select { height: 44px; font-size: 16px; }
  .ticket-people { grid-template-columns: minmax(0, 1fr); }
  .ticket-option-search { min-width: 0; max-width: 100%; }
  .ticket-heading > .btn { width: 100%; }
  .ticket-collaborator-summary { flex: 0 0 auto; }
  .ticket-facts dd, .ticket-prose, .ticket-note { overflow-wrap: anywhere; }
  .ticket-action-bar .btn, .ticket-event-pages .btn { min-height: 44px; }
  .matching-dialog .matching-search input, .matching-dialog .field select { min-height: 44px; height: 44px; font-size: 16px; }
  .matching-search > .btn, .matching-save-row > .btn { min-height: 44px; height: auto; }
  .matching-pagination, .matching-page-controls, .matching-save-row { min-width: 0; flex-wrap: wrap; }
  .matching-source-fields dd { overflow-wrap: anywhere; }
  .matching-product-row { flex-wrap: wrap; }
  .matching-product-action { flex: 1 0 100%; max-width: 100%; flex-direction: row; }
  .matching-save-row .matching-note { flex-basis: 100%; }
  .matching-save-row > .btn { width: 100%; }
  .advertising-followup-topline > .task-field-note { min-width: 0; flex-basis: 100%; }
  .advertising-followup-search { min-width: 0; flex-wrap: wrap; }
  .advertising-followup-search .search-box { flex-basis: 100%; min-width: 0; }
  .advertising-followup-pagination { gap: 10px; }
  .collection-store-picker-dialog .collection-store-option { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 5px; padding: 12px; }
  .collection-store-picker-dialog .picker-pagination > div { flex-wrap: wrap; }
  .todo-inbox-panel { position: fixed; inset: 64px 10px auto; width: auto; max-height: calc(100dvh - 80px); }
  .todo-inbox-head, .todo-inbox-footer { flex-wrap: wrap; gap: 8px; }
  .todo-inbox-filters { flex-wrap: wrap; }
  .todo-inbox-filter, .todo-inbox-footer .btn { min-height: 44px; }
  #login-screen .auth-mobile-brand { padding: 24px 20px 0; }
  #login-screen .auth-form-region { align-items: flex-start; padding: 36px 20px 24px; }
  #login-screen .employee-registration-form { grid-template-columns: minmax(0, 1fr); }
  #login-screen .auth-page-footer { padding: 20px 20px max(20px, env(safe-area-inset-bottom, 0px)); overflow-wrap: anywhere; }
}

@media screen and (max-width: 380px) {
  .topbar .breadcrumb > #breadcrumb-group { max-width: 44px; }
  .topbar .account-name { max-width: 36px; }
  .metric-grid, .metric-grid.department-metrics { grid-template-columns: minmax(0, 1fr); }
  .overview-report-controls .report-country-control { flex-basis: 100%; }
  .overview-report-controls > .btn { margin-left: auto; }
  .ticket-collaborator-picker > summary { flex-wrap: wrap; }
  .pagination .pagination-controls { gap: 6px; }
}

@media screen and (max-width: 760px) and (max-height: 500px) {
  .task-header .task-ticket-create { flex-basis: auto; width: auto; }
  .task-shell { height: calc(100dvh - 8px); max-height: calc(100dvh - 8px); }
  :is(dialog.record-dialog, dialog.task-dialog)[open] { max-height: calc(100dvh - 8px); }
}

@media screen and (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}