/**
 * Estimate form — phone only (max-width: 767px).
 * Desktop is unchanged outside this media query.
 * Strategy: keep columns readable; scroll horizontally on small screens.
 */

@media screen and (max-width: 767px) {
  /* Outer scroll host (already on the form wrappers) */
  .w-full.overflow-x-auto {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    justify-content: flex-start !important;
  }

  /*
   * Document: at least full width, can grow wider than the phone
   * so fixed columns don't crush — parent scrolls sideways.
   */
  #estimate-document.estimate-document,
  .estimate-document {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin-bottom: 1rem !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Print-preview inch sizing → fluid on screen only */
  .estimate-document.w-\[8\.5in\],
  .estimate-document[class*="8.5in"] {
    width: max-content !important;
    min-width: 100% !important;
    min-height: 0 !important;
    padding: 0.75rem !important;
  }

  #estimate-document.estimate-document {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Keep line-item columns from collapsing into unreadable slivers */
  .estimate-document .w-8 {
    flex-shrink: 0 !important;
  }
  .estimate-document .w-48 {
    flex-shrink: 0 !important;
    min-width: 10rem !important;
  }
  .estimate-document .w-28 {
    flex-shrink: 0 !important;
    min-width: 5.5rem !important;
  }
  .estimate-document .description-column {
    min-width: 12rem !important;
    flex: 1 0 12rem !important;
  }

  /* Readable controls; 16px avoids iOS focus zoom */
  .estimate-document input,
  .estimate-document textarea,
  .estimate-document select {
    font-size: 16px !important;
  }

  /* Toolbars / cards capped to phone width (not the scrolling document) */
  .max-w-\[1000px\] {
    max-width: 100% !important;
  }

  /* Page chrome: less dead padding on phone */
  .min-h-screen.py-12 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Header strip inside document */
  .estimate-document > .w-full.bg-white.flex {
    flex-wrap: wrap !important;
    min-width: 20rem;
  }
}

@media print {
  #estimate-document.estimate-document,
  .estimate-document {
    overflow: visible !important;
    max-width: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}