/* ============================================================
   MiDealerForms — Mobile Responsive Fixes
   Add this file to your project and link it AFTER style.css:
   <link rel="stylesheet" href="mobile-fixes.css">
   ============================================================ */

/* ── 1. Prevent any element from blowing past the viewport ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── 2. Dealer header card — stop the logo + text overflowing ── */
@media (max-width: 600px) {
  /* The main card wrapper */
  .container {
    padding: 8px !important;
  }

  /* Header logo */
  #dealerHeaderLogo {
    height: 70px !important;
    max-width: 160px !important;
    margin-left: 0 !important;
  }

  /* Header info block — stack vertically */
  #dealerHeaderInfo,
  [id^="dealerHeader"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ── 3. The core fix: .input-row stacks on small screens ── */
@media (max-width: 640px) {
  .input-row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Every flex child inside input-row becomes full-width */
  .input-row > div,
  .input-row > label {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Spacer divs (empty flex children) collapse away */
  .input-row > div:empty {
    display: none !important;
  }

  /* All inputs, selects, textareas fill their container */
  .input-row input,
  .input-row select,
  .input-row textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Doc fee row: number input + calc button + "UPDATE DOC" label */
  .input-row div[style*="align-items: center"][style*="gap: 6px"] {
    flex-wrap: wrap !important;
  }
  #docFee {
    width: auto !important;
    flex: 1 !important;
    min-width: 80px !important;
    max-width: none !important;
  }

  /* Months-to-expiration input (has max-width: 121px inline) */
  #plateExpMonths {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── 4. Multi-column grids collapse to 1–2 col on mobile ── */
@media (max-width: 640px) {
  /* 3-col and 5-col grids used in form sections & reports */
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(5"],
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Deal pilot checklist & similar auto-fit grids */
  #dealPilotChecklist,
  div[style*="repeat(auto-fit"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* PnL / reports 5-col summary strip → 2-col */
  div[style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 5. Quick-actions toolbar wraps gracefully ── */
@media (max-width: 600px) {
  .quick-actions > div[style*="justify-content: space-evenly"],
  .quick-actions > div[style*="flex-direction: row"] {
    flex-wrap: wrap !important;
    gap: 10px 6px !important;
    justify-content: center !important;
  }

  /* Each icon button in toolbar gets a consistent touch target */
  .quick-actions button {
    min-width: 56px !important;
  }
}

/* ── 6. Transaction breakdown / right-side summary panel ── */
@media (max-width: 640px) {
  /* The flex row that holds form + breakdown panel side by side */
  div[style*="max-width: 68%"],
  div[style*="max-width:68%"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── 7. BFS-4 yellow section keeps its 2-col layout but constrains ── */
@media (max-width: 480px) {
  #tempTagSection .input-row {
    flex-direction: column !important;
  }
  #tempTagSection .input-row > div {
    flex: 1 1 100% !important;
  }
}

/* ── 8. Date inputs never overflow on iOS (they're wider than text) ── */
input[type="date"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── 9. Section 3 vehicle info grid (.s3-grid / .s3-grid-3) ── */
/*
   .s3-grid-3 is a 3-column CSS grid defined in style.css.
   On mobile the 3 columns (VIN+Decode, Odometer, MSRP) are too wide
   and the rightmost column bleeds outside the card.
   The stock number input also has min-width: 170px which is fine on
   desktop but forces overflow on narrow phones.
*/
/* ── 9. Section 3 vehicle info grid (.s3-grid / .s3-grid-3) ── */
@media (max-width: 640px) {
    .s3-grid-3 {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .s3-grid-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .s3-grid-1 {
        gap: 10px !important;
    }
}

/* s3-field inputs should always fill their column */
.s3-field input,
.s3-field select,
.s3-field textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Stock number input: remove the min-width that causes bleed */
@media (max-width: 640px) {
  #section3StockNum {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* The flex row wrapping the stock # input + police book banner */
  #section3StockNum + button,
  div[style*="min-width: 170px"] {
    min-width: 0 !important;
  }
}

/* ── 10. Section 3 vehicle action toolbar (.s3-action-row) ── */
/*
   The s3-action-row is a horizontal strip of icon buttons
   (Scan Title, Window Sticker, Buyers Guide, Post to FB, Save Veh, etc.)
   It has no flex-wrap so on narrow screens it bleeds right.
*/
.s3-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  align-items: flex-start !important;
}

@media (max-width: 640px) {
  .s3-action-row {
    gap: 6px 10px !important;
  }

  /* The bordered "Save Veh / Add Inventory" box — allow it to wrap */
  #s3QuickInvBox,
  #addModeToolbarBox {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Icon buttons: uniform size, no shrink */
  .s3-action-item {
    flex-shrink: 0 !important;
  }

  /* margin-left: 18px on Window Sticker item causes extra bleed */
  .s3-action-item[style*="margin-left"] {
    margin-left: 0 !important;
  }
}

/* ── 11. Stock # row icon group (Inventory / Resale / Recall / Clear) ── */
/*
   #stockActionIconGroup has margin-left: 100px hardcoded inline.
   On mobile this shoves it far off-screen.
*/
@media (max-width: 640px) {
  #stockActionIconGroup {
    margin-left: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    justify-content: flex-start !important;
  }

  /* The parent flex row that contains stock # input + icon group */
  .input-row[style*="align-items: flex-end"],
  div[style*="flex: 3.5"] {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* ── 12. Finalize & Print — "Select Forms" 3-col checkbox grid ── */
/*
   On mobile, 3 columns of "? ☐ Form Name" is too wide.
   Drop to 1-col so each form name has room to breathe.
*/
@media (max-width: 500px) {
  #finalizePrintSection div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 10px 0 !important;
  }
}

@media (min-width: 501px) and (max-width: 640px) {
  #finalizePrintSection div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 13. Modals stay within screen on mobile ── */
@media (max-width: 600px) {
  /* Login, agent, agreement modals */
  #dealerLoginModal > div,
  #agentLoginModal > div,
  #agentMgtModal > div {
    min-width: 0 !important;
    width: 94vw !important;
    max-width: 94vw !important;
    padding: 14px 16px 24px !important;
  }
}