/* UPOS · shared phone/tablet refinements · 2026-09-07
 * Loaded after the existing theme. Screen-only rules preserve printed receipts.
 */
@media screen {
  :root {
    --upos-header-height: 64px;
    --upos-nav-height: 0px;
  }

  /* Grid/flex children must shrink before their contents can wrap or scroll. */
  main.app-print-main :is(.grid, .flex) > *,
  body[data-upos-surface] :is(.layout, .grid-2, .stats, .form-grid, .report-grid) > * {
    min-width: 0;
  }

  main.app-print-main h1 {
    white-space: normal !important;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    line-height: 1.5;
  }

  header.app-print-shell {
    flex-shrink: 0;
    height: calc(4rem + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  /* Readable tabs stay within their own strip, including when labels are long. */
  [role="tablist"][aria-orientation="horizontal"] {
    display: flex;
    width: fit-content;
    max-width: 100%;
    height: auto;
    min-height: 2.75rem;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  [role="tablist"][aria-orientation="horizontal"] > [role="tab"] {
    flex-shrink: 0;
    line-height: 1.5;
  }

  .upos-scroll-shell {
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: #a5b4fc transparent;
    -webkit-overflow-scrolling: touch;
  }

  .upos-scroll-shell:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: -2px;
  }

  .upos-scroll-shell > table { min-width: 100%; }
  .upos-scroll-shell th { white-space: nowrap; }
  .upos-scroll-shell td { line-height: 1.65; }

  .upos-scroll-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    background: #f1f5ff;
    color: #475569;
    font-size: 0.8125rem;
    line-height: 1.65;
    border-block: 1px solid #e2e8f0;
  }

  .upos-scroll-hint svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
  .upos-scroll-hint[hidden] { display: none !important; }

  /* Use measured navigation heights instead of the old 56px/60px estimates. */
  .app-print-main > [class*="h-[calc(100vh-3.5rem)]"] {
    height: calc(100dvh - var(--upos-header-height) - var(--upos-nav-height));
    min-height: 0;
  }

  .upos-alert-panel {
    top: calc(var(--upos-header-height) + 0.5rem);
    max-height: calc(100dvh - var(--upos-header-height) - 1rem - env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  /* Native PHP screens use the same input and scroll behavior as the app. */
  body[data-upos-surface] { min-width: 0; }
  body[data-upos-surface] :is(input, select, textarea) { max-width: 100%; }
  body[data-upos-surface] :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 3px;
  }
  body[data-upos-surface="agents"] .modal {
    max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  body[data-upos-surface="agents"] .modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
  }
}

@media screen and (max-width: 1023.98px) {
  :root { --upos-nav-height: calc(65px + env(safe-area-inset-bottom)); }

  main.app-print-main {
    padding-bottom: max(5.5rem, calc(var(--upos-nav-height) + 1rem)) !important;
  }

  main.app-print-main h1,
  body[data-upos-route^="/admin/"] main.app-print-main h1 {
    font-size: clamp(1.375rem, 3.4vw, 1.875rem) !important;
    width: auto;
  }

  main.app-print-main :is(button, [role="button"], [role="combobox"]):not([role="switch"]):not([role="checkbox"]),
  header.app-print-shell button,
  [role="dialog"] button:not([role="switch"]):not([role="checkbox"]),
  [role="alertdialog"] button,
  body[data-upos-surface] :is(.btn, .close, .tab, .back) {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  main.app-print-main :is(button, [role="button"]):not([role="switch"]):not([role="checkbox"]),
  [role="dialog"] button:not([role="switch"]):not([role="checkbox"]) {
    white-space: normal;
    line-height: 1.5;
  }
  [role="tablist"] > [role="tab"] { white-space: nowrap !important; }

  :is(main, [role="dialog"], [role="alertdialog"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  body[data-upos-surface] :is(select, textarea) {
    min-height: 2.75rem;
    font-size: 16px;
  }

  body[data-upos-surface] :is(input, select, textarea) { font-size: 16px; }
  body[data-upos-surface] :is(.field label, .help, .stat-label, .stat-note, .badge, .sub) {
    font-size: 0.8125rem;
    line-height: 1.65;
  }

  main.app-print-main [class*="shadow-card"] .text-2xl.font-bold:not(h1) {
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }

  [role="dialog"][class*="left-[50%]"][class*="top-[50%]"],
  [role="alertdialog"][class*="left-[50%]"][class*="top-[50%]"] {
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    scroll-padding-block: 3.5rem 1rem;
  }

  [role="dialog"][class*="left-[50%]"] :is(input, textarea, select) {
    scroll-margin-block: 3rem;
  }

  nav.no-print.fixed.inset-x-0.bottom-0 :is(a, button) {
    min-height: 4rem;
    padding-inline: 0.25rem;
  }
  nav.no-print.fixed.inset-x-0.bottom-0 span {
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: normal;
    text-align: center;
  }

  body[data-upos-surface="agents"] .tabs {
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: thin;
  }
  body[data-upos-surface="agents"] .tab { flex: 0 0 auto; white-space: nowrap; }
  body[data-upos-surface="agents"] .actions { flex-wrap: wrap; }
  body[data-upos-surface="agents"] .stat-value { overflow-wrap: anywhere; }
  body[data-upos-surface="account"] :is(.layout, .reset-layout) { grid-template-columns: minmax(0, 1fr); }
  body[data-upos-surface="account"] .intro { min-height: auto; }
  body[data-upos-surface="account"] .benefits { display: none; }
  body[data-upos-surface="account"] .trial { margin-top: 1.5rem; }
}

@media screen and (hover: none) and (pointer: coarse) {
  :is(main.app-print-main, header.app-print-shell, [role="dialog"]) button:not([role="switch"]):not([role="checkbox"]),
  body[data-upos-surface] :is(.btn, .close, .tab) {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }
  body[data-upos-surface] :is(input, select, textarea) { font-size: 16px; }
}

@media screen and (max-width: 639.98px) {
  :root { --upos-header-height: calc(56px + env(safe-area-inset-top)); }
  header.app-print-shell { height: calc(3.5rem + env(safe-area-inset-top)); gap: 0.125rem; }

  /* A page toolbar stacks at phone widths; search and primary actions remain visible. */
  main.app-print-main > div > .mb-6.grid > .flex:has(button),
  main.app-print-main > div > .mb-6.grid > .flex:has(a) {
    row-gap: 0.625rem;
  }

  [role="dialog"][class*="left-[50%]"] .grid.grid-cols-2:has(input, select, textarea),
  [role="alertdialog"][class*="left-[50%]"] .grid.grid-cols-2:has(input, select, textarea) {
    grid-template-columns: minmax(0, 1fr);
  }
  [role="dialog"][class*="left-[50%]"] .grid.grid-cols-2:has(input, select, textarea) > .col-span-2 {
    grid-column: 1 / -1;
  }

  body[data-upos-surface="agents"] .modal-backdrop {
    padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem max(0.5rem, env(safe-area-inset-bottom));
  }
  body[data-upos-surface="agents"] .modal-actions { flex-wrap: wrap; }
  body[data-upos-surface="agents"] .modal-actions .btn { flex: 1 1 8rem; }
  body[data-upos-surface="agents"] .toast { inset-inline: 0.75rem; max-width: none; }
  body[data-upos-surface="account"] .panel { padding: 1.5rem 1.125rem; }
  body[data-upos-surface="account"] .intro { padding: 1.5rem; }
}

@media screen and (prefers-reduced-motion: reduce) {
  .upos-scroll-hint svg { animation: none !important; }
}

@media print {
  .upos-scroll-hint { display: none !important; }
}