/* crm-responsive.css — shared responsive pass for CRM pages.
 *
 * One include, phone-friendly everywhere. Include AFTER the page's own <style> so
 * these mobile rules win. Targets the common CRM primitives (.crm-grid tables,
 * .crm-filter-bar / .crm-period-bar flex bars, .crm-tab-strip, .crm-page-head,
 * .crm-card grids) so no per-page HTML restructuring is needed — this is a
 * responsive pass, not a redesign.
 *
 * Usage:  <link rel="stylesheet" href="/crm-responsive.css">
 *
 * Pages that already ship a thorough @media block (crm_session, crm_my_sessions,
 * crm_admin_queue, crm_my_calendar) do NOT need this — leave them as-is.
 */

/* ── Tablet / large phone (≤ 900px) ──────────────────────────────────────── */
@media (max-width: 900px) {
  /* Dense grid tables scroll horizontally inside their container instead of
     forcing the whole page to overflow. The container gets the scroll; the table
     keeps a sensible min-width so columns don't crush. */
  #tab-body,
  .crm-tab-panel,
  .crm-card,
  .cdb-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .crm-grid,
  .cdb-table {
    min-width: 640px;   /* forces the container to scroll rather than squish cols */
  }

  /* Filter / period / tab bars wrap instead of overflowing off-screen. */
  .crm-filter-bar,
  .crm-period-bar,
  .crm-page-head,
  .crm-tab-strip,
  .cdb-filter-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .crm-period-bar .crm-spacer { flex-basis: 100%; height: 0; }

  /* Tab strip stays on one line but scrolls if it can't fit. */
  .crm-tab-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .crm-tab-strip .crm-tab { flex: 0 0 auto; }
}

/* ── Phone (≤ 640px) ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Trim page chrome so content gets the width. */
  body { -webkit-text-size-adjust: 100%; }
  .crm-page,
  .crm-container,
  main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Multi-metric rows (My Performance / My Sales header) stack tidily. */
  .myperf-row { gap: 20px; }

  /* Any 2+ column CSS grids collapse to a single column on phones. */
  .crm-col-grid,
  .crm-pp-grid,
  .crm-two-col,
  .crm-grid-2,
  .form-grid,
  .choice-grid {
    grid-template-columns: 1fr !important;
  }

  /* Denser table cells so more fits before the horizontal scroll kicks in. */
  .crm-grid th,
  .crm-grid td,
  .cdb-table th,
  .cdb-table td { padding: 8px 10px; font-size: 13px; }
  .crm-grid,
  .cdb-table { min-width: 560px; }

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

  /* Right-anchored drawers go full-width so they don't spill off-screen. */
  .crm-drawer { width: 100%; max-width: 100%; }

  /* Modals fit the viewport with a small margin. */
  .cdna-modal-content,
  .wl-cdna-modal-content,
  .modal-card,
  .crm-modal-content {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin: 4vh auto;
  }
}