/* Mobile additions are loaded after the retained desktop styles. */
@media (display-mode: standalone) and (pointer: coarse) {
  html { touch-action: pan-x pan-y; }
}
.mobile-bottom-nav, .mobile-drawer-backdrop, .mobile-drawer-close { display: none; }
.mobile-install-help { justify-content: center; }
.mobile-install-help[hidden] { display: none !important; }
.login-mobile-help { width: 100%; }
.ios-install-top { margin-left: auto; font-size: 12px; min-height: 44px; padding: 8px; white-space: nowrap; }
.mobile-install-dialog {
  width: min(460px, calc(100vw - 28px)); max-height: calc(100dvh - 32px);
  overflow: auto; border: 1px solid var(--line); border-radius: 18px;
  padding: 24px; color: var(--ink); background: #fff; box-shadow: var(--shadow);
}
.mobile-install-dialog::backdrop { background: #1017139c; }
.mobile-install-dialog h2 { font-size: 21px; margin: 8px 0 12px; }
.mobile-install-dialog p, .mobile-install-dialog li { font-size: 14px; line-height: 1.7; }
.mobile-install-dialog ol { padding-left: 24px; }
.mobile-install-dialog .mobile-install-note { color: #68736b; font-size: 12px; }
.mobile-install-dialog .mobile-install-tabs { display: flex; gap: 8px; margin: 16px 0; }
.mobile-install-tabs button[aria-pressed="true"] { background: #202622; color: #fff; }
.mobile-install-dialog [hidden] { display: none !important; }
.mobile-install-action { width: 100%; justify-content: center; margin-top: 8px; }
.side-bottom .mobile-install-help { width: 100%; margin-top: 12px; background: #232824; color: #fff; border-color: #343b36; }

/* The listing editor needs its own scrolling surface on phones and desktops. */
.full-editor-overlay { display: none; position: fixed; inset: 0; z-index: 50; background: var(--paper); overflow: auto; }
.full-editor-overlay.open { display: block; }
.full-editor-shell { max-width: 1440px; margin: auto; }
.full-editor-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 28px; background: #fff; border-bottom: 1px solid var(--line); }
.full-editor-title h1 { font-size: 24px; margin: 4px 0; }
.full-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.full-editor-content { padding: 24px 28px 60px; }
.ebay-editor-fields, .shopify-editor-fields { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.editor-panel { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.editor-panel h2 { font-size: 17px; margin: 0 0 6px; }
.editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.editor-grid label { display: grid; gap: 5px; font-size: 13px; min-width: 0; }
.editor-grid input, .editor-grid select, .editor-grid textarea { width: 100%; min-width: 0; padding: 10px; border: 1px solid #d5ddd6; border-radius: 8px; font: inherit; }
.editor-grid .wide { grid-column: 1 / -1; }
.editor-grid .inline-checkbox { display: flex; align-items: center; }
.editor-grid input[type="checkbox"] { width: auto; }
.description-visual { min-height: 200px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }
.description-source { width: 100%; min-height: 220px; }

@media screen and (max-width: 760px) {
  html { scroll-padding-top: 140px; touch-action: pan-x pan-y; }
  body { -webkit-text-size-adjust: 100%; }
  body.mobile-drawer-open { overflow: hidden; }
  .app { min-height: 100dvh; }
  .app > main { min-width: 0; }
  .login-screen { min-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
  .login-card { padding: 24px; gap: 14px; }
  .login-card h1 { font-size: 27px; }
  .topbar { height: auto; min-height: 112px; flex-wrap: wrap; gap: 4px; padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
  .crumb { flex-basis: 100%; min-width: 0; min-height: 44px; }
  .crumb > span { font-size: 0; }
  .crumb b { font-size: 16px; }
  .mobile-menu { display: inline-grid; place-items: center; width: 44px; min-height: 44px; margin-right: 8px; padding: 0; border-radius: 9px; }
  .mobile-menu:hover { background: #edf0ed; }
  .top-actions { width: 100%; gap: 7px; }
  .top-actions .date-range-wrap { flex: 1; min-width: 0; }
  .top-actions .date-range-wrap .date-chip { display: block; min-width: 0; width: 100%; max-width: none; min-height: 44px; padding: 8px 6px; font-size: 12px; }
  .date-custom-panel { left: 0; right: auto; width: min(310px, calc(100vw - 28px)); }
  .lang-switch button { min-width: 35px; min-height: 44px; padding: 8px; }
  .profile { padding: 0; }
  .profile .avatar { width: 29px; height: 29px; }
  .logout-btn { min-height: 44px; padding: 8px !important; font-size: 12px !important; white-space: nowrap; }
  .content { padding: 20px max(14px, env(safe-area-inset-right)) calc(122px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .page-head h1 { font-size: 26px; }
  .page-head p { font-size: 14px; }
  .page-head, .panel-head { min-width: 0; }
  .head-actions { flex-wrap: wrap; }
  .head-actions .btn { font-size: 13px; white-space: normal; padding: 10px; }
  .btn, .small-btn, .filter, .action-btn, .status-tabs button, .library-card-actions button { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea, [contenteditable="true"] { font-size: 16px !important; min-width: 0; max-width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
  .pencil-btn, .close, .qty-edit-btn, .qty-edit-save, .qty-edit-cancel { min-width: 44px; min-height: 44px; }
  .qty-inline-editor input { width: 64px; }
  .metric-value { font-size: clamp(18px, 5.4vw, 25px); overflow-wrap: anywhere; }
  .metric-top, .metric-foot { font-size: 11px; }
  .demo-banner { flex-wrap: wrap; font-size: 13px; }
  .demo-banner > div:not(.demo-icon) { min-width: 0; flex: 1; }
  .demo-banner strong, .demo-banner span { font-size: 12px; }
  .panel, .settings-card, .detail-box { min-width: 0; }
  .panel-head { flex-wrap: wrap; }
  .table-scroll { width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .table-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .table-tools, .listing-filter-right, .library-tools { min-width: 0; }
  .listing-filter-left label, .listing-filter-right > *, .library-tools > * { min-width: 0; }
  .listing-filter-left select { min-width: 0; width: 100%; }
  .search { width: 100%; min-width: 0; }
  .search::before { top: 9px; }
  .orders-view-tools .select { width: 100%; }
  .status-tabs { gap: 7px; }
  .status-tabs button { font-size: 12px; padding: 8px 11px; }
  .order-card-top { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .order-card-top > *, .order-card-body > * { min-width: 0; }
  .meta-value, .product-info, .receiver, .account-line { overflow-wrap: anywhere; }
  .order-top-actions { flex-wrap: wrap; }
  .order-top-actions select { max-width: 100%; flex: 1; }
  .product-cell { padding: 14px; }
  .product-img { width: 72px; height: 72px; }
  .product-info a, .product-info p, .receiver p { font-size: 13px; }
  .order-facts { padding: 14px; gap: 12px; }
  .receiver { padding: 14px; }
  .detail-columns, .settings-form-grid, .address-edit-grid, .item-edit-grid, .user-create-form, .field-grid, .tracking-summary, .media-storage-status { grid-template-columns: minmax(0, 1fr); }
  .detail-actions, .detail-section-actions, .track-actions, .user-settings-actions, .listing-modal-actions, .full-editor-actions { flex-wrap: wrap; }
  .detail-actions .btn, .track-actions .btn { flex: 1 1 120px; justify-content: center; white-space: normal; }
  .track-actions input { min-width: 0; flex: 1 1 100%; }
  .account-line { gap: 12px; flex-wrap: wrap; }
  .message-list-panel { min-height: 0; max-height: 340px; overflow: auto; }
  .message-thread-panel { min-height: 0; padding: 16px; }
  .message-bubble { max-width: 92%; font-size: 14px; overflow-wrap: anywhere; }
  .message-row { min-height: 80px; }
  .message-sender, .message-subject { font-size: 13px; }
  .message-compose textarea { width: 100%; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .library-card-body { padding: 12px; }
  .library-card-actions button { flex: 1 1 auto; font-size: 12px; }
  .library-drop, .library-empty { font-size: 13px; }
  .modal-backdrop { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .modal { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; padding: 18px; }
  .detail-modal, .library-dialog, .user-account-settings { width: 100%; max-width: 100%; }
  .modal h3 { padding-right: 44px; }
  .full-editor-top { padding: calc(12px + env(safe-area-inset-top)) 14px 12px; flex-direction: column; align-items: stretch; position: static; }
  .full-editor-title h1 { font-size: 22px; }
  .full-editor-actions .btn { flex: 1 1 110px; justify-content: center; }
  .full-editor-content { padding: 16px 14px calc(32px + env(safe-area-inset-bottom)); }
  .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .editor-panel { padding: 16px; }
  .image-preview-row, .description-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
  .description-toolbar button { min-width: 44px; min-height: 44px; }
  body.authed .mobile-bottom-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; inset: auto 0 0; z-index: 6; padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); border-top: 1px solid #dfe5df; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
  .mobile-bottom-nav button { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 54px; border: 0; border-radius: 10px; background: transparent; color: #6d7770; font: inherit; font-size: 11px; }
  .mobile-bottom-nav .mobile-nav-icon { font-size: 20px; line-height: 1.2; }
  .mobile-bottom-nav .mobile-nav-label { max-width: 100%; overflow-wrap: anywhere; line-height: 1.35; }
  .mobile-bottom-nav button.active { background: #eef2ed; color: #172a1d; font-weight: 700; }
  body.mobile-overlay-open .mobile-bottom-nav { display: none; }
  #backendStatus { left: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: calc(100vw - 20px); font-size: 11px; padding: 5px 9px; }
  body:not(.authed) #backendStatus, body.mobile-overlay-open #backendStatus { bottom: max(10px, env(safe-area-inset-bottom)); }
  .toast { left: 14px; right: 14px; bottom: calc(116px + env(safe-area-inset-bottom)); font-size: 13px; }
  .app.sidebar-open > aside { width: min(310px, calc(100vw - 44px)); height: 100dvh; box-shadow: none; padding: calc(18px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .app.sidebar-open .mobile-drawer-close { display: grid; place-items: center; align-self: flex-end; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #343b36; border-radius: 9px; background: #232824; color: #fff; font-size: 24px; }
  .app.sidebar-open .mobile-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 7; border: 0; background: #10171388; }
  .nav button, .nav .nav-toggle { min-height: 44px; }
  .nav-group-header { grid-template-columns: minmax(0, 1fr) 44px; }
  .nav .nav-toggle { width: 44px; }
  .mobile-install-dialog { padding: 22px; }
}
@media screen and (max-width: 350px) {
  .login-card { padding: 20px; }
  .library-grid { grid-template-columns: minmax(0, 1fr); }
  .top-actions { gap: 4px; }
  .profile { display: none; }
}
@media print {
  .mobile-bottom-nav, .mobile-drawer-backdrop, .mobile-drawer-close, .mobile-install-dialog, .full-editor-overlay { display: none !important; }
}