/* =============================================================================
   PoolCalc Pro — phone layout.

   Written against what the pages actually contain, not guessed at. The calculator
   alone carries 77 inputs, 18 selects and 8 schedules inside a desktop shell: a
   288 px results column pinned to the right with flex-shrink-0, model pickers at a
   fixed 256 px, and input grids hard-coded to two and three columns. On a 412 px
   phone that leaves about 120 px for the entire input area. These rules undo those
   four things and leave everything else alone.

   All of it is inside a max-width query, so a desktop cannot be affected.
   ============================================================================= */

@media (max-width: 640px) {

  /* --- 1. let the page scroll, instead of trapping it in the viewport ------
     The desktop shell pins its content to the window height —
     `flex gap-0 h-[calc(100vh-88px)]` — and scrolls two panes inside it: the
     inputs on the left, the results column on the right. Carried onto a phone
     that is the single worst thing on the page: the form is squeezed into a
     short box with its own scrollbar while the results panel sits across the
     rest of the screen, on top of the fields you are trying to fill in.

     So on a narrow screen the shell stops being a fixed-height flex row and
     becomes ordinary block flow, the inner scrollers are released, and the
     document scrolls the way every other page on a phone does.
     Only genuinely fixed heights are released. `min-h-screen` is left alone —
     the dashboard, bulk mode and the thermal pages use it to keep short pages
     filling the screen, which is right on a phone too. */
  [class*="h-[calc("],
  [class*="h-screen"]:not([class*="min-h-screen"]) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  [class*="h-[calc("] { display: block !important; }
  [class*="h-[calc("] > .overflow-y-auto,
  [class*="h-[calc("] > .overflow-auto,
  [class*="h-screen"]:not([class*="min-h-screen"]) > .overflow-y-auto {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* the results column is now a block in normal flow, under the inputs */
  .w-72.flex-shrink-0 {
    width: 100% !important;
    flex-shrink: 1 !important;
    border-left: 0 !important;
    border-top: 1px solid rgb(226 232 240);
    max-height: none !important;
  }

  /* --- 2. nothing may be wider than the screen ----------------------------- */
  .w-72, .w-64, .w-44 { width: 100% !important; max-width: 100% !important; }
  select, input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
    max-width: 100%;
  }
  /* the export popover is positioned, so cap it instead of stretching it */
  .absolute.w-72, .fixed.w-72 { width: calc(100vw - 28px) !important; max-width: 22rem !important; }

  /* --- 3. input grids fit themselves to the screen -------------------------
     Two fields across a 412 px phone is about 180 px each, which is comfortable
     for a label and a number. auto-fit means a smaller phone drops to one and a
     tablet goes back to three, without a rule for each size. */
  .grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }

  /* --- 4. schedules scroll in their own box, never the page ---------------- */
  html, body { max-width: 100%; overflow-x: hidden; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table > thead, table > tbody, table > tfoot { display: table; width: 100%; min-width: max-content; }
  table th, table td { white-space: nowrap; }
  .overflow-x-auto > table, .overflow-auto > table { display: table; min-width: max-content; }

  /* --- 5. the section strip is the main navigation on a phone -------------- */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .overflow-x-auto::-webkit-scrollbar { display: none; }
  .overflow-x-auto > .tab, .overflow-x-auto > button { scroll-snap-align: start; flex: 0 0 auto; }

  /* --- 6. thumbs, not mouse pointers -------------------------------------- */
  button, .btn, a.btn, select, .tab, input[type="button"], input[type="submit"] { min-height: 40px; }
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
  /* stop the browser zooming in when a field takes focus */
  input, select, textarea { font-size: 16px !important; }

  /* --- 7. give the content the room the chrome was taking ------------------ */
  .section { padding-left: 12px; padding-right: 12px; }
  .p-5 { padding: 14px !important; }
  .p-6 { padding: 16px !important; }
  .gap-6 { gap: 14px !important; }

  /* room for the status strip and the phone's own gesture bar */
  body { padding-bottom: max(0px, env(safe-area-inset-bottom)); }

  h1, h2, h3 { overflow-wrap: anywhere; }
}

/* Landscape phones are short; give the vertical space back. */
@media (max-height: 480px) and (orientation: landscape) {
  header, .topbar { padding-top: 2px; padding-bottom: 2px; }
}

/* ---------------------------------------------------------------
   HydroCalc (friction loss): the shell is a fixed-height flex/grid
   with two independently scrolling columns. On a phone that traps
   the whole input form in a ~450px box and parks the results column
   over the rest of the screen. Release it to normal block flow.
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  #hc-wrap {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .hc-layout {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: none !important;
  }
  .hc-inputs-col,
  .hc-results-col {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
  }
  .hc-results-col {
    border-left: 0 !important;
    border-top: 1px solid rgb(226 232 240);
  }
  .tb-mode-wrap { max-width: 100% !important; flex-wrap: wrap !important; }

  /* Toolbars and status strips must wrap, not run off the screen. */
  .topbar, .topbar-inner, .st-wrap, .toolbar { flex-wrap: wrap !important; }
  .st { flex: 0 0 auto; }
  .flex.items-center.gap-4 { flex-wrap: wrap !important; row-gap: 6px; }
  .topbar-back { max-width: 100%; }
}

@media (max-width: 640px) {
  /* Rows of status chips / small buttons wrap instead of running off-screen. */
  .card:has(> .st), .card:has(> .btn.sm) { flex-wrap: wrap !important; row-gap: 6px; }
  .flex.items-end:not([class*="overflow-x"]) { flex-wrap: wrap !important; row-gap: 6px; }

  /* Field hints sit under the field name rather than off the edge. */
  label { overflow-wrap: anywhere; }
  label > span[class*="text-[10px]"] { display: block; }

  /* Wide catalog table becomes a horizontal scroller instead of being clipped. */
  #catalog-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .cat-table { min-width: max-content; }
}

@media (max-width: 640px) {
  /* Header meta blocks stop pushing themselves off the right edge. */
  .ml-auto { margin-left: 0 !important; }
  .flex.items-center.gap-2, .flex.items-center.gap-3 { min-width: 0; flex-wrap: wrap; }
  .flex.items-center.gap-2 > *, .flex.items-center.gap-3 > * { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
  /* Don't hyphenate short header links; let the row wrap instead. */
  .flex.items-center.gap-2 > *, .flex.items-center.gap-3 > * { overflow-wrap: break-word; }
  .flex.items-center.gap-2 > a, .flex.items-center.gap-2 > button,
  .flex.items-center.gap-3 > a, .flex.items-center.gap-3 > button { flex-shrink: 0; }

  /* HydroCalc top bar grows instead of the mode pill spilling over the title. */
  .hc-topbar { height: auto !important; min-height: 54px; flex-wrap: wrap !important; row-gap: 6px; padding-bottom: 6px; align-items: center; }
  .tb-mode-wrap { flex-wrap: nowrap !important; max-width: 100% !important; }
}