/* app-responsive.css — shared responsive pass for the non-CRM IMS pages
 * (Bootstrap 5 + custom-CSS admin/upload tools) that shipped with a viewport
 * meta but no mobile @media block.
 *
 * One include, phone-friendly, no HTML restructuring. Include AFTER the page's own
 * <style> / Bootstrap so these rules win. Targets the generic primitives these
 * pages share: .top-bar / .page-header flex bars, .card panels, and raw <table>s
 * that otherwise overflow the viewport. Bootstrap's own grid/.table-responsive is
 * already responsive and untouched.
 *
 * Usage:  <link rel="stylesheet" href="/app-responsive.css">
 *
 * Pages that already ship a real mobile @media block do NOT need this.
 */

/* ── Tablet / large phone (≤ 900px) ──────────────────────────────────────── */
@media (max-width: 900px) {
  /* Flex header/action bars wrap instead of overflowing off-screen. */
  .top-bar,
  .top-bar-actions,
  .page-header,
  .lookup-row,
  .lk-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Raw (non-Bootstrap-responsive) tables scroll horizontally rather than
     forcing the whole page to overflow. Common table classes across these pages. */
  .format-table,
  .detail-table,
  .jewel-info-table,
  .table,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }
  /* .scroll-box already scrolls — just make sure it can on touch. */
  .scroll-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Phone (≤ 640px) ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { -webkit-text-size-adjust: 100%; }

  /* Trim wide fixed page padding so content gets the width. */
  .container,
  .container-fluid,
  main,
  .content-wrap { padding-left: 14px !important; padding-right: 14px !important; }

  /* Auto-fit stat/summary grids collapse to one column. */
  .summary-grid,
  .stat-grid,
  .card-grid { grid-template-columns: 1fr !important; }

  /* Comfortable tap targets (~44px). */
  .btn, button, select,
  input[type="text"], input[type="number"], input[type="date"], input[type="file"] {
    min-height: 40px;
  }

  /* Modals fit the viewport. */
  .modal-card, .modal-content, .modal-dialog {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 4vh auto !important;
  }

  /* Denser table cells before the horizontal scroll kicks in. */
  .format-table th, .format-table td,
  .detail-table th, .detail-table td,
  .table th, .table td { padding: 8px 10px; font-size: 13px; }
}

/* Never let the responsive table rules bleed into print — QR/label pages set
   their own print layout; keep those pristine. */
@media print {
  .format-table, .detail-table, .jewel-info-table, .table, table {
    display: table; overflow: visible; white-space: normal;
  }
}