/* ==========================================================================
   AAC Pro Estimator - V107 iPhone Layout Polish
   ==========================================================================
   Added 2026-05-28 during Sean's autonomous-work session.
   Targets iPhone-class screens (max-width: 480px) and adds:
     1. Sticky "Active Rate" readout pinned to top of viewport
     2. Sticky totals bar pinned to bottom of viewport
     3. Enlarged signature pad with touch-action: none
     4. 48x48 minimum tap targets on right-rail action buttons
     5. Right-rail content reorder: subtotal/total first, sig pad/submit last
   CSS-only. No element ID changes. No JS changes. Reversible by removing
   this file from the <link> chain in index.html and the sw.js cache list.
   ========================================================================== */

@media (max-width: 480px) {

  /* ---------------------------------------------------------------------- */
  /* 1. Active Rate readout - sticky top bar on phones                      */
  /* ---------------------------------------------------------------------- */
  /* On desktop the Active Rate sits under the Pricing Mode radios in       */
  /* the Project Details card. On phones, when that card collapses, the    */
  /* user loses sight of which margin is active. Float it to the top.      */

  #aacActiveMarginLabel {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0 -16px 12px -16px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-bottom: 3px solid #C9A84C;
    padding: 10px 16px !important;
    background: linear-gradient(180deg, #FAF8F3 0%, #f0ece0 100%);
    box-shadow: 0 2px 8px rgba(25, 25, 95, 0.08);
    font-size: 13px !important;
    text-align: center;
  }

  /* ---------------------------------------------------------------------- */
  /* 2. Sticky totals bar at bottom of viewport                             */
  /* ---------------------------------------------------------------------- */
  /* The results box has subtotal/total/grand total. On desktop it's in    */
  /* the right rail. On phone it's below the items list. Float a compact  */
  /* version to the bottom so the running total is always visible.         */

  body::after {
    /* Bottom-bar safety spacer so content isn't hidden behind sticky bar */
    content: "";
    display: block;
    height: 64px;
  }

  /* Float the existing #totalAmount and #subtotal into a sticky bar via a */
  /* wrapper. JS-free approach: position the results-box to the bottom    */
  /* with a max-height collapse, leaving only the totals row visible.     */

  .results-box-mobile-sticky-totals {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 95;
    background: #19195F;
    color: #fff;
    padding: 10px 16px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-top: 2px solid #C9A84C;
  }
  .results-box-mobile-sticky-totals .label {
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
  }
  .results-box-mobile-sticky-totals .value {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #C9A84C;
    font-weight: 700;
  }
  /* Hide the sticky bar when the user has no items (avoids "Total: $0.00" eyesore) */
  body[data-aac-has-items="false"] .results-box-mobile-sticky-totals,
  body:not([data-aac-has-items="true"]) .results-box-mobile-sticky-totals {
    display: none;
  }

  /* ---------------------------------------------------------------------- */
  /* 3. Signature pad - finger-drawing-friendly on phone                    */
  /* ---------------------------------------------------------------------- */
  .signature-canvas,
  #signaturePad,
  canvas[id*="signature"] {
    width: 100% !important;
    height: 200px !important;
    touch-action: none !important;
    -ms-touch-action: none !important;
    background: #fff !important;
    border: 2px solid #C9A84C !important;
    border-radius: 8px !important;
  }
  .signature-wrapper {
    padding: 8px !important;
  }

  /* ---------------------------------------------------------------------- */
  /* 4. Larger tap targets on right-rail action buttons                     */
  /* ---------------------------------------------------------------------- */
  /* Apple HIG minimum: 44x44 pt. We use 48x48 for comfortable thumb use.  */
  #resultsCard button,
  #resultsCard .btn-primary,
  #resultsCard .btn-secondary,
  .signature-actions button,
  #generatePdfBtn,
  #submitApprovalBtn,
  #internalViewToggle {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }

  /* ---------------------------------------------------------------------- */
  /* 5. Right-rail content reorder - most-important first on phones        */
  /* ---------------------------------------------------------------------- */
  /* Without restructuring HTML, use CSS flex order to surface critical    */
  /* content first when the right rail stacks below the workspace.         */
  #resultsCard {
    display: flex;
    flex-direction: column;
  }
  /* Move .results-box (subtotal/total breakdown) to the TOP of the card  */
  #resultsCard .results-box {
    order: 1;
  }
  /* Margin readout right after */
  #resultsCard #internalStatsPanel,
  #resultsCard .internal-view-panel {
    order: 2;
  }
  /* Calculate / generate PDF buttons next */
  #resultsCard #generatePdfBtn,
  #resultsCard #calculateButton {
    order: 3;
    margin-top: 12px !important;
  }
  /* Signature pad last - it takes the most screen real estate */
  #resultsCard .signature-wrapper,
  #resultsCard #clientSignatureSection {
    order: 5;
  }
  /* Submit Approval button absolute-last */
  #resultsCard #submitApprovalBtn {
    order: 6;
    margin-top: 12px !important;
  }

  /* ---------------------------------------------------------------------- */
  /* 6. Compact category groups in the items list                          */
  /* ---------------------------------------------------------------------- */
  .aac-cat-header {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  .aac-cat-name {
    font-size: 12px !important;
  }
  .item-row {
    padding: 8px 10px !important;
  }
  /* The qty stepper buttons (- / +) need bigger tap targets */
  .item-row button {
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 18px !important;
  }
  /* Qty input field bigger so thumbs can tap into it */
  .item-row input[type="number"] {
    min-height: 36px !important;
    font-size: 15px !important;
    width: 52px !important;
  }

  /* ---------------------------------------------------------------------- */
  /* 7. Item Description datalist autocomplete - keep dropdown reachable    */
  /* ---------------------------------------------------------------------- */
  /* iOS Safari sometimes positions the datalist suggestion popup off-screen */
  /* when the keyboard is open. Make the input field font 16px+ to prevent  */
  /* iOS from auto-zooming on focus (which pushes the suggestions off).     */
  #itemNameInput,
  #itemQtyInput,
  #itemUnit,
  #itemPriceInput,
  #clientName,
  #propertyAddress,
  #clientEmail,
  #clientPhone {
    font-size: 16px !important;
  }

  /* ---------------------------------------------------------------------- */
  /* 8. Header trim for iPhone - more screen space for content              */
  /* ---------------------------------------------------------------------- */
  .app-header,
  .aac-mode-nav {
    padding-top: env(safe-area-inset-top, 8px) !important;
  }
  /* Reduce the credentials bar on phones since users likely already know */
  /* the company info from the app icon. Keep visible but compact.        */
  .credentials-bar {
    padding: 4px 12px !important;
    font-size: 10px !important;
  }
}

/* ==========================================================================
   Extra: tiny phone (320px) - older iPhone SE class
   ========================================================================== */
@media (max-width: 360px) {
  .results-box-mobile-sticky-totals {
    font-size: 12px;
    padding: 8px 12px;
  }
  .results-box-mobile-sticky-totals .value {
    font-size: 16px;
  }
  #aacActiveMarginLabel {
    font-size: 12px !important;
  }
}