/* All presentation changes are confined to phones; desktop styles remain in site.css. */
.mobile-only, .mobile-bottom-nav { display: none; }

@media (max-width: 720px) {
  html { scroll-padding-top: 78px; scroll-padding-bottom: 100px; }
  .app-body { background: #f3f6fb; }
  .app-body .page-content { min-width: 0; padding: 12px max(12px, env(safe-area-inset-right)) 20px max(12px, env(safe-area-inset-left)); }
  .app-body .app-content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .app-body .topbar { min-height: 60px; padding: 8px 12px; gap: 8px; background: #fff; }
  .app-body .topbar-title strong { font-size: 15px; }
  .app-body .sidebar-toggle { width: 44px; height: 44px; flex-shrink: 0; }
  .app-body .user-menu .btn { font-size: 12px; padding: 8px; }
  .app-body .sidebar { z-index: 60; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .app-body .sidebar-backdrop { z-index: 55; }
  .mobile-bottom-nav { position: fixed; z-index: 40; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; padding: 7px max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: #fff; border-top: 1px solid #dce4ef; box-shadow: 0 -4px 18px #182b4510; }
  .mobile-bottom-nav a, .mobile-bottom-nav button { min-width: 0; min-height: 55px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; color: #53657c; background: transparent; border: 0; border-radius: 10px; font-size: 12px; font-weight: 500; text-decoration: none; }
  .mobile-bottom-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-bottom-nav [aria-current="page"], .mobile-bottom-nav button[aria-expanded="true"] { color: #245cd6; background: #eaf1ff; }
  body:has(.form-control:focus, .form-select:focus) .mobile-bottom-nav { display: none; }
  .mobile-only { display: inline-flex; }
  .mobile-control { align-items: center; justify-content: center; flex-shrink: 0; gap: 6px; min-height: 44px; padding: 8px 10px; color: #245db0; background: #fff; border: 1px solid #d6e1ee; border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; cursor: pointer; }
  .mobile-control:focus-visible, .mobile-bottom-nav :is(a,button):focus-visible { outline: 3px solid #2467c7; outline-offset: 2px; }
  .mobile-control:hover { background: #edf4ff; }
  .app-body :is(.btn, .table-action, .order-action-button, .category-action-button, .product-key-view-toggle, .fulfillment-view-button, .fulfillment-status-button, .fulfillment-delete-button, .audit-delete-button) { min-height: 44px; }

  /* A short heading and compact actions replace the desktop hero on phones. */
  .app-body .page-content > .page-hero { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 0; margin: 0 0 12px; padding: 4px 0; color: #172b45; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .app-body .page-content > .page-hero::before, .app-body .page-content > .page-hero::after { display: none; }
  .app-body .page-content > .page-hero > div:first-child { flex: 1 1 180px; min-width: 0; }
  .app-body .page-content > .page-hero .eyebrow { display: none; }
  .app-body .page-content > .page-hero h1 { color: #172b45; font-size: 24px; line-height: 1.2; letter-spacing: -.5px; text-wrap: wrap; overflow-wrap: anywhere; }
  .app-body .page-content > .page-hero p { color: #566a82; font-size: 13px; line-height: 1.5; margin: 10px 0 0; }
  .mobile-ready .page-hero:not(.mobile-description-open) .mobile-page-description { display: none; }
  .mobile-page-info { margin-left: auto; min-height: 44px; padding: 6px; background: transparent; border: 0; color: #63748a; font-size: 12px; }
  .app-body .page-content > .page-hero .page-actions { display: flex; flex-wrap: wrap; width: auto; gap: 8px; }
  .app-body .page-content > .page-hero > .btn, .app-body .page-content > .page-hero .page-actions .btn { width: auto; flex: 0 1 auto; min-height: 44px; font-size: 13px; padding: 10px 12px; box-shadow: none; }
  .app-body .page-content > .page-hero .btn-outline-secondary { color: #315576; background: #fff; border-color: #d1ddeb; }
  .mobile-ready .page-actions:not(.mobile-actions-open) .mobile-hero-extra { display: none; }
  .app-body :is(.order-filter-heading,.category-filter-heading,.product-filter-heading) { display: none; }
  .app-body .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
  .app-body .metric-card { min-width: 0; min-height: 0; padding: 12px; border-radius: 12px; box-shadow: none; }
  .app-body .metric-card strong { font-size: 23px; line-height: 1.3; margin: 4px 0; }
  .app-body .metric-card > span { font-size: 12px; letter-spacing: 0; text-transform: none; }
  .app-body .metric-card small { font-size: 11px; line-height: 1.4; }
  .app-body .panel { min-width: 0; box-shadow: none; border-radius: 14px; }
  .app-body :is(.info-banner,.inline-notice) { padding: 12px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
  .app-body :is(.panel-heading,.panel-meta) { padding: 12px; gap: 8px; min-height: 0; }
  .app-body .panel-meta { display: flex; align-items: center; flex-wrap: wrap; font-size: 12px; }
  .app-body .panel-meta strong { font-size: 13px; }
  .app-body :is(.product-key-results-hint,.product-results-hint) { display: none; }
  .mobile-select-toggle { margin-left: auto; border: 0; background: transparent; }

  /* Filters keep their original values and submit routes when collapsed. */
  .mobile-ready .mobile-filter { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 12px; }
  .mobile-ready .mobile-filter > .mobile-search-field { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
  .mobile-ready .mobile-search-field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mobile-ready .mobile-filter :is(.form-control,.form-select) { min-width: 0; width: 100%; min-height: 48px; font-size: 16px; }
  .mobile-ready .mobile-filter .order-search-control { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
  .mobile-ready .mobile-filter .order-search-control .btn { width: auto; min-height: 44px; justify-self: end; font-size: 13px; padding: 8px 12px; }
  .mobile-ready .mobile-filter > .mobile-search-submit { grid-column: 1; grid-row: 2; justify-self: start; color: #fff; background: #245cd6; border-color: #245cd6; min-width: 85px; }
  .mobile-ready .mobile-filter > .mobile-filter-toggle { grid-column: 2; grid-row: 2; }
  .mobile-ready .mobile-filter-toggle.has-active-filters { background: #eaf1ff; border-color: #91b5ee; }
  .mobile-ready .mobile-filter:not(.mobile-filters-open) > .mobile-filter-extra { display: none; }
  .mobile-ready .mobile-filter > .mobile-filter-extra { grid-column: 1 / -1; min-width: 0; }
  .mobile-ready .mobile-filter.mobile-filters-open > .mobile-filter-extra { grid-row: auto; }
  .mobile-ready .mobile-filter :is(.order-filter-actions,.product-filter-actions,.category-filter-actions) { display: flex; gap: 8px; }
  .mobile-ready .mobile-filter label { font-size: 13px; }
  .app-body .order-catalog-panel > .form-hint { margin: 0; padding: 0 12px 12px; font-size: 12px; line-height: 1.45; }

  /* Entity summaries reuse the original cells and authorization-aware actions. */
  .mobile-ready .mobile-record-table { display: block; min-width: 0; width: 100%; table-layout: auto; }
  .mobile-ready .mobile-record-table colgroup { display: none; }
  .mobile-ready .mobile-record-table > tbody { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 10px; background: #f3f6fb; }
  .mobile-ready .mobile-record-table > tbody > tr.mobile-record { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; min-width: 0; padding: 12px; background: #fff !important; border: 1px solid #dce4ef; border-radius: 13px; box-shadow: none; overflow: visible; }
  .mobile-ready .mobile-record-table > tbody > :where(.mobile-record) > td { display: block; grid-column: 1 / -1; min-width: 0; min-height: 0; width: auto; max-width: none; padding: 0; border: 0; background: transparent; color: #20354e; font-size: 14px; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
  .mobile-ready .mobile-record-table > tbody > :where(.mobile-record) > td::before { display: none; }
  .mobile-ready .mobile-record-table td > * { max-width: 100%; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="primary"] { order: 0; font-weight: 500; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="number"] { order: 0; grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="total"] { order: 0; grid-column: 2; align-self: start; text-align: right; white-space: normal; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="customer"] { order: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="product"] { order: 2; color: #576c84; font-size: 13px; padding-top: 3px; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="subtle"] { order: 3; color: #576c84; font-size: 12px; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="stat"] { order: 4; grid-column: auto; padding-top: 8px; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="status"] { order: 5; grid-column: 1; align-self: center; padding-top: 4px; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="actions"] { order: 5; grid-column: 2; align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="actions"] > div { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="actions"] .mobile-control { padding: 8px; border: 0; background: transparent; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="secondary"] { order: 6; padding: 8px 0 0; border-top: 1px solid #e5ecf4; margin-top: 4px; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="secondary"]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: #62758b; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .mobile-ready .mobile-record:not(.mobile-expanded) > td[data-mobile-cell="secondary"],
  .mobile-ready .mobile-record:not(.mobile-expanded) .mobile-secondary-action { display: none; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="select"] { display: none; order: -1; }
  .mobile-ready .mobile-selecting .mobile-record-table td[data-mobile-cell="select"] { display: flex; align-items: center; min-height: 44px; gap: 10px; }
  .mobile-ready .mobile-selecting .mobile-record-table td[data-mobile-cell="select"]::after { content: "Select record"; color: #516b89; font-size: 12px; }
  .mobile-ready .mobile-selection-bar { display: none; }
  .mobile-ready .mobile-selecting .mobile-selection-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
  .mobile-ready .mobile-selection-bar .btn { width: auto; margin-left: auto; }
  .mobile-ready .mobile-selection-bar .bulk-select-all { min-height: 44px; }
  .mobile-ready .selection-cell input, .mobile-ready .bulk-select-all input { width: 22px; height: 22px; }
  .mobile-ready .mobile-record-table .order-approved-badge { width: 20px; height: 20px; min-width: 20px; display: inline-grid; place-items: center; overflow: hidden; padding: 0; margin: 0; font-size: 0; border: 0; background: transparent; }
  .mobile-ready .mobile-record-table .order-approved-badge > span { font-size: 17px; }
  .mobile-ready .mobile-record-table .order-country { margin: 0; font-size: 12px; gap: 5px; max-width: 100%; }
  .mobile-ready .mobile-record-table .order-country-flag { width: 20px; height: 15px; flex-shrink: 0; }
  .mobile-ready .mobile-record-table :is(.order-total,.order-number-link strong,.fulfillment-order-number) { font-size: 15px; line-height: 1.4; margin: 0; }
  .mobile-ready .mobile-record-table .order-number-link { min-width: 0; }
  .mobile-ready .mobile-record-table :is(.order-action-button,.category-action-button,.fulfillment-view-button) { min-width: 0; min-height: 44px; width: auto; padding: 8px; font-size: 13px; box-shadow: none; }
  .mobile-ready .mobile-record-table :is(.order-action-button,.category-action-button) svg { display: none; }
  .mobile-ready .mobile-record-table .status-badge { font-size: 12px; padding: 5px 8px; }
  .mobile-ready .mobile-record-table .product-record { min-width: 0; gap: 10px; }
  .mobile-ready .mobile-record-table .product-record :is(img,.product-image-placeholder) { width: 42px; height: 42px; flex-basis: 42px; }
  .mobile-ready .mobile-record-table :is(.product-record-copy strong,.product-key-product-name,.user-record-name,.category-record strong) { font-size: 15px; line-height: 1.45; font-weight: 500; }
  .mobile-ready .mobile-record-table :is(.record-link,.category-record,.product-key-record-link) { min-width: 0; }
  .mobile-ready .mobile-record-table .product-record-options { white-space: normal; overflow: visible; font-size: 12px; line-height: 1.4; }
  .mobile-ready .mobile-record-table :is(.sku-value,.role-list span,.audit-action) { font-size: 12px; font-weight: 500; padding: 4px 6px; line-height: 1.45; }
  .mobile-ready .mobile-record-table .stock-quantity { min-height: 52px; min-width: 90px; width: 100%; padding: 8px 12px; }
  .mobile-ready .mobile-record-table .stock-quantity strong { font-size: 20px; }
  .mobile-ready .mobile-record-table .stock-quantity small { font-size: 12px; }
  .mobile-ready .mobile-record-table .mobile-record.is-open { border-color: #9ebde5; }

  /* Expanded records and long forms follow the same readable, single-column rhythm. */
  .app-body :is(.form-grid,.detail-grid,.choice-grid,.confirm-summary,.detail-layout,.product-key-detail-panel,.product-disclosure-grid,.fulfillment-line-grid,.fulfillment-edit-lines,.email-settings-layout,.email-form-grid) { grid-template-columns: minmax(0,1fr); min-width: 0; }
  .app-body :is(.form-span-2,.detail-span-2,.email-field-wide,.product-disclosure-field) { grid-column: 1 / -1; min-width: 0; }
  .app-body :is(.form-panel,.detail-side) { padding: 14px; }
  .app-body .form-field { margin-bottom: 12px; }
  .app-body .form-field :is(label,legend) { font-size: 13px; font-weight: 500; }
  .app-body :is(.form-control,.form-select) { font-size: 16px; min-height: 48px; min-width: 0; max-width: 100%; }
  .app-body :is(.form-actions,.fulfillment-detail-actions) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; }
  .app-body .form-actions .btn { flex: 1 1 120px; width: auto; }
  .app-body :is(.detail-grid dd,.confirm-summary dd,.product-key-code,.fulfillment-line-card code) { overflow-wrap: anywhere; }
  .app-body .product-disclosure-summary { grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 12px; }
  .app-body .product-disclosure-summary .product-record { grid-column: 1 / -1; }
  .app-body .product-disclosure-summary .product-summary-sku { grid-column: 1; grid-row: 2; }
  .app-body .product-disclosure-toggle { grid-column: 2; grid-row: 2; min-height: 44px; }
  .app-body .product-disclosure-toggle-label { font-size: 13px; }
  .app-body .product-disclosure-field { padding: 12px; }
  .app-body .data-table .product-key-detail-row > td,
  .app-body .data-table .key-stock-detail-row > td,
  .app-body .data-table .fulfillment-summary-detail-row > td { display: block; padding: 0 !important; min-width: 0; }
  .app-body .data-table :is(.product-key-detail-row,.key-stock-detail-row,.fulfillment-summary-detail-row) > td::before { display: none; }
  .app-body :is(.fulfillment-detail-header,.fulfillment-detail-section,.fulfillment-detail-actions,.product-key-detail-panel) { padding: 12px; }
  .app-body .fulfillment-detail-header h3 { font-size: 17px; overflow-wrap: anywhere; }
  .app-body .fulfillment-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 10px; gap: 8px; }
  .app-body .fulfillment-metric-grid article { padding: 10px; }
  .app-body .fulfillment-metric-grid article:last-child { grid-column: 1 / -1; }
  .app-body .fulfillment-section-heading { flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 0; }
  .app-body .fulfillment-section-heading > div { flex: 1 1 130px; }
  .app-body .fulfillment-section-heading > small, .app-body .fulfillment-section-heading > div > span { display: none; }
  .app-body .fulfillment-section-heading h4 { margin: 0; font-size: 15px; }
  .mobile-ready .fulfillment-detail-section:not(.mobile-section-open) > .mobile-section-content { display: none; }
  .mobile-ready .mobile-section-open > .mobile-section-content { margin-top: 10px; }
  .app-body .fulfillment-browser-frame iframe { height: 430px; }
  .app-body .fulfillment-event-list time { display: block; margin-left: 0; }
  .app-body :is(.key-stock-detail-table,.order-detail-items-table) { min-width: 0; }
  .app-body :is(.email-settings-hero,.email-card-header,.email-card-body,.email-card-footer) { min-height: 0; padding: 14px; }
  .app-body .email-hero-copy h1 { font-size: 24px; }
  .app-body .email-hero-icon { display: none; }
  .app-body .email-hero-status { min-width: 0; width: auto; padding: 8px 12px; }
  .app-body .email-card-heading h2 { font-size: 17px; }
  .app-body .email-card-heading p { font-size: 13px; }
  .app-body .email-mode-grid { grid-template-columns: minmax(0,1fr); }
  .app-body .email-mode-card { min-height: 0; padding: 12px; }
  .app-body .email-security-strip { padding: 12px; }
  .app-body .email-security-badge { display: none; }
  .app-body .modal-dialog { margin: 8px; max-width: calc(100% - 16px); }
  .app-body .modal-content { min-width: 0; }
  .app-body .modal :is(.modal-header,.modal-body,.modal-footer) { padding: 14px; }
  .app-body .product-pagination { padding: 12px; gap: 10px; }
  .app-body .product-pagination-summary { font-size: 12px; }
  .app-body .product-pagination-controls { min-width: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
  .app-body .product-pagination-pages { order: 3; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; overflow: visible; gap: 4px; }
  .app-body :is(.product-page-number,.product-pagination-nav) { min-height: 44px; min-width: 44px; }
  .app-body .app-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 14px 12px; font-size: 12px; }
  .app-body .app-footer a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Sign-in keeps the form in the first phone screen. */
  .public-body .auth-layout { display: block; min-height: 100dvh; background: #f3f6fb; }
  .public-body .auth-story { min-height: 0; padding: 18px; }
  .public-body .auth-story-copy, .public-body .auth-story > small, .public-body .security-points { display: none; }
  .public-body .auth-panel { padding: 18px 12px; }
  .public-body .login-card { padding: 20px; box-shadow: none; }
  .public-body .login-heading h2 { font-size: 26px; }
  .mobile-control { font-size: 13px; font-weight: 500; line-height: 1.3; }
  .app-body .page-content > .page-hero > div:first-child { flex-basis: 100px; }
  .mobile-page-info { width: 44px; margin-left: 0; }
  .app-body .panel-meta { flex-direction: row; justify-content: flex-start; text-align: left; }
  .app-body .panel-meta > span { width: auto; flex: 0 1 auto; }
  .mobile-ready .mobile-filter > .mobile-search-field,
  .mobile-ready .mobile-filter .order-search-control { display: contents; }
  .mobile-ready .mobile-filter .mobile-search-field input { grid-column: 1; grid-row: 1; }
  .mobile-ready .mobile-filter > .mobile-search-submit { grid-column: 2; grid-row: 1; }
  .mobile-ready .mobile-filter .order-search-control .btn { grid-column: 1; grid-row: 2; justify-self: start; box-shadow: none; }
  .mobile-ready .mobile-filter:not(.mobile-filters-open) + .form-hint { display: none; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="actions"] > div { width: 100%; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="actions"] :is(a,button) { flex: 0 0 auto; }
  .mobile-ready .product-key-table .mobile-record.is-open > td[data-mobile-cell="secondary"] { display: block; }
  .mobile-ready .page-content > .mobile-page-note { display: none; }
  .mobile-ready .page-content:has(> .mobile-description-open) > .mobile-page-note { display: block; }
  .mobile-nav-close { margin-left: auto; margin-bottom: 10px; color: #fff; background: transparent; border-color: #ffffff55; }
  .app-body .sidebar { transition: transform .22s ease; }
  .app-body .sidebar-backdrop { pointer-events: none; }
  .app-body .sidebar-backdrop.open { pointer-events: auto; }
}

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

@media (max-width: 380px) {
  .mobile-ready .mobile-record-table > tbody { padding: 8px; }
  .mobile-ready .mobile-record-table > tbody > tr.mobile-record { padding: 10px; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="status"],
  .mobile-ready .mobile-record-table td[data-mobile-cell="actions"] { grid-column: 1 / -1; }
  .mobile-ready .mobile-record-table td[data-mobile-cell="actions"] { justify-content: flex-end; }
}