/* ============================================================================
   Mobile refinements for the sales workflow — agents work on phones & iPads.
   ADDITIVE ONLY: every rule is inside a max-width media query, so desktop is
   untouched. Loaded LAST so it wins over the per-component sheets that have no
   responsive rules of their own (modal.css, panels.css, toolbar.css,
   intake-form.css). Breakpoints match dashboard.css (~640 phones, ~820 tablets).
   ============================================================================ */

/* iOS zooms the page when a focused input is < 16px — force 16px so tapping a
   field never yanks the layout around. */
@media (max-width: 820px) {
  input, select, textarea,
  .installer-input, .lh-modal-input, .sandbox-modal-input,
  .crm-search-input, .pr-note, .sales-input {
    font-size: 16px !important;
  }
  /* Comfortable tap targets everywhere. */
  button, .btn-primary, .btn-secondary, .btn-gold, .pr-btn, .lh-modal-btn,
  .sandbox-modal-btn, .crm-seg, .crm-stage {
    min-height: 40px;
  }
}

@media (max-width: 640px) {
  /* ---- Modals: near full-screen and scrollable (so long forms fit) -------- */
  .lh-modal-overlay, .sandbox-modal-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .lh-modal-card, .sandbox-modal-card {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    height: auto !important;
    min-height: 100vh;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
  }
  .lh-modal-actions, .sandbox-modal-footer {
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    bottom: 0;
    background: #fff;
  }
  .lh-modal-actions > *, .sandbox-modal-footer > * { flex: 1 1 auto; }

  /* ---- Sales dashboard header: stack search + view toggle + actions ------- */
  .crm-header-tools { flex-wrap: wrap; gap: 8px; }
  .crm-search { width: 100%; }
  .crm-search-input { width: 100%; }
  .crm-switcher { width: 100%; justify-content: center; }
  .crm-header-spacer { display: none; }
  .crm-header-tools .btn-primary,
  .crm-header-tools .btn-secondary,
  .crm-header-tools .crm-seg { flex: 1 1 auto; }

  /* Stage filter pills scroll horizontally instead of wrapping into a wall. */
  .crm-stages, .crm-filterbar { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .crm-stage { flex: 0 0 auto; }

  /* ---- Lead table: horizontal scroll so it never blows out the page ------- */
  #crmTableWrap, .crm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .crm-table { min-width: 560px; }

  /* ---- Lead detail: stack header, actions and tabs ----------------------- */
  .crm-dheader, .crm-detail-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .crm-dactions { flex-wrap: wrap; gap: 8px; }
  .crm-dactions > button { flex: 1 1 calc(50% - 8px); }
  .crm-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .crm-tab { flex: 0 0 auto; }

  /* ---- Follow-up calendar: let the grid breathe -------------------------- */
  .cal-sales .cal-cell { min-height: 60px; }

  /* ---- Forms (client intake + site survey): single column, full width ---- */
  .intake-row, .intake-review-row, .intake-prop-head { flex-direction: column; align-items: stretch; }
  .intake-half, .installer-form .intake-half, .installer-half { flex-basis: 100% !important; width: 100% !important; }
  .intake-steps { font-size: 11px; gap: 2px; }
  .intake-prop-card { padding: 12px; }
  .installer-form .installer-input, .installer-form select, .installer-form textarea { width: 100%; }

  /* Survey toolbar + sections */
  .sales-toolbar { flex-wrap: wrap; gap: 8px; }
  .sales-toolbar h2 { width: 100%; margin: 0; }
  .sales-toolbar-spacer { display: none; }
  .sales-panel, .sales-form-panel { padding: 14px; }
  .sales-section-body { padding: 10px; }
  .sales-toolbar .btn-gold, .sales-toolbar .btn-secondary { flex: 1 1 auto; min-height: 44px; }

  /* ---- Ops Prospect Review: stack the decision controls ------------------ */
  .pr-decision-btns { flex-direction: column; }
  .pr-decision-btns .pr-btn { width: 100%; }
  .pr-card-head { flex-wrap: wrap; }

  /* Generic two-up rows used across the dashboards. */
  .sales-grid-2, .crm-grid-2, .lh-modal-row { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   Sales CRM + field forms — full-width phone layout.
   mobile.css now loads LAST, so these #salesScreen-scoped rules win over the
   desktop id-rules in page-sales.css / dashboard.css that were squeezing the
   content (48px body padding, 28px form margin, 760px form max-width, etc.).
   ============================================================================ */
@media (max-width: 640px) {
  /* Reclaim the gutters the desktop padding was eating. */
  #salesScreen #salesBody,
  #salesScreen .dash-body { padding: 16px 14px 76px; }

  /* ---- CRM header + controls: everything wraps to full width ---- */
  #salesScreen .crm-title { font-size: 25px; }
  #salesScreen .crm-head-top { gap: 14px; }
  #salesScreen .crm-subtitle { font-size: 13.5px; }
  #salesScreen .crm-head-actions { width: 100%; justify-content: flex-start; }
  #salesScreen .crm-head-actions .btn-primary,
  #salesScreen .crm-head-actions .btn-secondary { flex: 1 1 calc(50% - 5px); min-height: 42px; }
  #salesScreen .crm-head-controls { margin-top: 16px; gap: 10px; }
  #salesScreen .crm-switcher { width: 100%; }
  #salesScreen .crm-switcher .crm-seg { flex: 1 1 0; text-align: center; }
  #salesScreen .crm-search { flex: 1 1 100%; }
  #salesScreen .crm-strip-row { flex-wrap: wrap; }
  #salesScreen .crm-strip-meta { white-space: normal; }

  /* ---- CRM leads: table → stacked cards (kills the horizontal scroll) ----
     Selectors mirror page-sales.css's `#salesScreen .crm-table tbody td` (1,1,2)
     so they win by load order; the shorter `.crm-row td` (1,1,1) would lose. */
  #salesScreen .crm-table,
  #salesScreen .crm-table tbody,
  #salesScreen .crm-table tr { display: block; width: auto; min-width: 0; }
  #salesScreen .crm-table { min-width: 0; }
  #salesScreen .crm-table thead { display: none; }
  #salesScreen .crm-table tbody tr.crm-row {
    position: relative; display: block;
    border: 1px solid var(--rule); border-radius: 12px;
    background: var(--surface); margin: 0 0 10px; padding: 13px 14px 13px 58px;
  }
  #salesScreen .crm-table tbody td {
    display: block; width: auto; border: none; padding: 1px 0; font-size: 13.5px;
  }
  #salesScreen .crm-table tbody tr.crm-row:hover td { background: transparent; box-shadow: none; }
  #salesScreen .crm-table tbody td.crm-col-av { position: absolute; left: 13px; top: 13px; width: auto; padding: 0; }
  #salesScreen .crm-table tbody td.crm-col-name { padding-right: 0; margin-bottom: 3px; }
  #salesScreen .crm-name { font-size: 15px; font-weight: 600; }
  #salesScreen .crm-table tbody td.crm-col-rel,
  #salesScreen .crm-table tbody td.crm-col-ag { display: inline-block; width: auto; margin: 8px 6px 0 0; }
  #salesScreen .crm-table tbody td.crm-col-agent { margin-top: 6px; }
  #salesScreen .crm-table tbody td.crm-col-agent::before { content: "Agent · "; color: var(--text-faint); }
  #salesScreen .crm-table tbody td.crm-col-act::before { content: "Updated · "; color: var(--text-faint); }
  #salesScreen .crm-table tbody td.crm-col-fup:not(:has(.crm-fup-none))::before { content: "Follow-up · "; color: var(--text-faint); }
  #salesScreen .crm-table tbody td.crm-col-props,
  #salesScreen .crm-table tbody td.crm-col-fup { color: var(--text-muted); }
  /* A lone "—" follow-up is just noise on a card — drop it. */
  #salesScreen .crm-table tbody td.crm-col-fup:has(.crm-fup-none) { display: none; }

  /* ---- Site survey / intake form: single column, section cards ---- */
  /* Outer panel goes transparent so the <details> sections ARE the cards —
     avoids the banned card-in-card nesting on a small screen. */
  #salesScreen .sales-form-panel {
    margin: 8px 0 20px; max-width: none; padding: 0;
    background: transparent; border: none; box-shadow: none;
  }
  #salesScreen .sales-toolbar { padding: 12px 2px 4px; gap: 10px; }
  #salesScreen .sales-toolbar h2 { font-size: 21px; }
  #salesScreen .sales-section { margin-bottom: 12px; border-radius: 12px; }
  #salesScreen .sales-section > summary { padding: 14px 16px; font-size: 15px; }
  #salesScreen .sales-section-body { padding: 4px 14px 16px; }
  #salesScreen .installer-form { gap: 14px; }
  #salesScreen .installer-form > label { font-size: 12.5px; }

  /* Native file inputs → full-width, obviously-tappable dropzones. */
  #salesScreen .sales-file,
  #salesScreen .installer-form input[type="file"] {
    display: block; width: 100%; box-sizing: border-box;
    padding: 12px 14px; font-size: 14px;
    border: 1px dashed var(--border-btn); border-radius: 10px;
    background: var(--surface-2); color: var(--text-muted);
  }
  #salesScreen .sales-file-ok,
  #salesScreen .sales-file-progress { display: block; margin: 8px 0 0; }
}