/* ProcureSight v49.4 — mobile / orientation / touch system */
:root { --ps-touch: 44px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100dvh; overscroll-behavior-y: none; padding-bottom: env(safe-area-inset-bottom); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, .btn, .icon { min-height: var(--ps-touch); }
input, select, textarea { max-width: 100%; }
img, video, canvas, svg { max-width: 100%; }
.table-wrap, .command-list, .file-list { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Mobile glass: reduce density without removing the glass effect. */
@media (max-width: 900px) {
  body { overflow-x: hidden; }
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); }
  .topbar-left, .topbar-right, .actions, .toolbar, .hero-buttons, .nav-actions { flex-wrap: wrap; }
  .topbar-right { gap: 6px; }
  .topbar-right .badge { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content, .hub { width: min(100%, 100vw); }
  .card, .choice, .hero-copy, .hero-visual, .panel, .box, .window, .drawer-card { border-radius: 22px !important; }
  .ps-quick-actions { display: flex; flex-wrap: wrap; gap: 7px; }
  .ps-quick-actions .btn { flex: 1 1 145px; }
  .table-wrap { max-width: 100%; overflow-x: auto; }
  .table { min-width: 680px; }
  .drop { padding: 18px 13px; }
  .drop-actions .btn, .actions .btn, .toolbar .btn { flex: 1 1 150px; }
  .field, .select, input, select, textarea { min-height: 44px; }
  .command { padding: max(20px, env(safe-area-inset-top)) 10px 10px; align-items: flex-start; }
  .command-card { width: min(720px, calc(100vw - 20px)); }
  .drawer-card { padding: max(16px, env(safe-area-inset-top)) 14px 24px; width: min(760px, 100vw); }
  .toast-wrap { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: min(370px, calc(100vw - 20px)); }
  .feature-row, .choice-grid, .process-grid, .grid, .metric-grid, .health-grid { gap: 9px !important; }
}

/* Portrait: prioritise readable cards and single-column forms. */
@media (max-width: 900px) and (orientation: portrait) {
  .hero-copy { padding: 24px !important; }
  .hero-copy h1, .hero h1 { font-size: clamp(32px, 10vw, 48px) !important; }
  .hero-copy p { font-size: 15px !important; line-height: 1.55 !important; }
  .choice-grid, .process-grid, .feature-row, .two, .three, .dash-grid { grid-template-columns: 1fr !important; }
  .grid, .metric-grid { grid-template-columns: 1fr !important; }
  .health-grid { grid-template-columns: 1fr 1fr !important; }
  .hero-buttons .btn, .nav-actions .btn { flex: 1 1 100%; }
  .window { min-height: 250px !important; }
  .footer { flex-direction: column; align-items: flex-start; }
}

/* Landscape phone / small tablet: use the available width efficiently. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 620px) {
  .topbar { min-height: 58px !important; height: auto !important; }
  .content { padding: 12px 14px 20px !important; }
  .hero-copy { padding: 22px !important; }
  .hero-copy h1, .hero h1 { font-size: clamp(28px, 6vw, 44px) !important; }
  .hero-copy p { font-size: 13px !important; line-height: 1.45 !important; }
  .hero { grid-template-columns: 1.1fr .9fr !important; }
  .choice-grid, .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid, .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .window { min-height: 220px !important; }
  .scan { height: 90px !important; }
}

/* Very small portrait phones. */
@media (max-width: 420px) {
  .nav, .topbar { border-radius: 16px !important; }
  .hero-copy, .hero-visual, .choice, .card { border-radius: 18px !important; }
  .content { padding: 10px !important; }
  .topbar-left .top-title { font-size: 12px !important; }
  .topbar-left .small { display: none !important; }
  .mobile-menu-btn { padding: 8px 10px !important; }
  .btn, .icon { padding: 9px 11px !important; }
  .actions .btn, .toolbar .btn, .drop-actions .btn { flex-basis: 100%; }
}

/* Allow installed PWA mode to follow the device orientation. */
@media (display-mode: standalone) {
  body { min-height: 100dvh; }
}