/* ═══════════════════════════════════════════════════════════════════════════
 *  contract-system/assets/responsive.css — v1
 *  ONE shared phone/tablet layer for every contract-system page.
 *  Loaded automatically by company_theme.php (which every page already includes
 *  after style.css), so no page needs its own media queries for the basics.
 *  Only overrides — base styles stay in assets/style.css.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet and below ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .page-wrap { max-width: 100% !important; padding-left: .8rem; padding-right: .8rem; }
  .site-header { flex-wrap: wrap; gap: .6rem; }
  .site-header .btn-ghost { margin-left: 0; }
  .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; }
  /* generic inline-flex tool rows wrap instead of overflowing */
  .preview-toolbar, .nav-tabs, .btn-row, .toolbar, .actions, .form-actions { flex-wrap: wrap; }
}

/* Phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }
  .page-wrap { padding: .6rem .6rem 3rem; }
  .card { padding: 1rem .8rem; border-radius: 10px; }
  .card.narrow, .card.wide { max-width: 100%; }
  fieldset { padding: .8rem .7rem; }

  /* every multi-column grid becomes one column */
  .grid-2, .grid-3, .grid-4, .pay-grid, .row2, .two-col, .homeowner-row { grid-template-columns: 1fr !important; }
  .homeowner-row > button { justify-self: start; }

  /* inputs: full width, 16px so iOS doesn't zoom on focus */
  input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; box-sizing: border-box; font-size: 16px; }

  /* buttons: comfortable tap targets, wrap in rows */
  .btn, button:not(.svc-btn):not(.pr-fix) { min-height: 40px; }
  .btn-row, .actions, .form-actions, .preview-toolbar { gap: .5rem; }
  .btn-block-sm { display: flex; width: 100%; }

  /* headers: stack */
  .site-header { flex-direction: column; align-items: flex-start; }
  .site-header h1 { font-size: 1.05rem; }
  .preview-toolbar h2 { font-size: .95rem; }

  /* tables that are not already card-converted scroll sideways inside their card */
  table:not(.files-table):not(.no-scroll) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* modals fill the phone */
  #partyEditModal > div, .modal-box, .modal-content, .pe-box { width: calc(100vw - 20px) !important; max-width: none !important; max-height: 92vh; overflow: auto; }

  /* signature pads and long text never overflow */
  canvas, img, video { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* contract editor toasts */
  [style*="position:fixed"][style*="right:20px"] { right: 10px !important; left: 10px !important; max-width: none !important; }
}

/* Small phone ───────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .stats-row { grid-template-columns: 1fr !important; }
  .btn-lg { padding: .7rem 1rem; }
}

/* Print stays untouched */
@media print { .page-wrap { max-width: none; } }