/* ============================================================================
   blaze_responsive.css  -  CHG-20260814-RESP

   Width-driven presentation refinements for the whole ERP.

   Why this file exists: the console was built for a wide desktop window. On
   anything narrower - an iPad, an iPhone, or simply a half-width desktop
   window - the six action tiles ran over the console title and the search bar,
   and the wide data tables were clipped with no way to reach the hidden
   columns. blaze_responsive.js measures the real width and adds the hooks
   below, so the rules here react to the SPACE AVAILABLE rather than to a
   guess about which device is being used.

   Hooks added by blaze_responsive.js on <html>:
     .bz-rsp      always, once the script is running
     .bz-w-desk   viewport >= 1280px
     .bz-w-tab    viewport 768px - 1279px
     .bz-w-phone  viewport < 768px
     .bz-touch    coarse pointer (finger) rather than a mouse
   ============================================================================ */

/* The action tiles sit above the cards below them once the script has placed
   them, otherwise a card can overlap a tile during a re-render. */
html.bz-rsp .ea-col,
html.bz-rsp #ea-launch,
html.bz-rsp #ro-launch,
html.bz-rsp #nco-launch,
html.bz-rsp #cal-launch {
  z-index: 60;
}

/* Comfortable, predictable tap behaviour on a finger device: no double-tap
   zoom delay, no grey flash. Not applied to mouse users. */
html.bz-touch button,
html.bz-touch a,
html.bz-touch .btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Momentum scrolling inside the horizontally scrollable table wrappers. */
html.bz-touch .table-wrap,
html.bz-touch .tbl-wrap,
html.bz-touch .scrollx,
html.bz-touch .op-enq-details {
  -webkit-overflow-scrolling: touch;
}

/* The enquiry / order detail tables are about 1360px wide and sat inside a
   wrapper with overflow-x:visible nested in one with overflow-x:hidden, so on
   a narrow screen the right-hand columns were CLIPPED and unreachable. Giving
   the inner wrapper its own horizontal scroll makes them reachable again.
   Desktop is left alone because nothing is clipped there. */
html.bz-w-tab .op-enq-details,
html.bz-w-phone .op-enq-details {
  overflow-x: auto;
}

/* iOS zooms the whole page in when a focused input has a font smaller than
   16px, which throws the layout off and is hard to recover from. */
html.bz-touch input[placeholder^="Search SO"] {
  font-size: 16px !important;
}
html.bz-w-phone input[type="text"],
html.bz-w-phone input[type="search"],
html.bz-w-phone input[type="number"],
html.bz-w-phone input[type="tel"],
html.bz-w-phone input[type="email"],
html.bz-w-phone input:not([type]) {
  font-size: 16px !important;
}

/* #main is a flex child; without this it refuses to shrink below the width of
   its widest table and the whole page scrolls sideways on a phone. */
html.bz-w-phone #main {
  min-width: 0;
}

/* The splash must stay above every part of the app while the ERP boots. */
html.bz-rsp #loading-screen {
  z-index: 99999;
}
/* ---- record-card horizontal scroll ---------------- CHG-20260814-RESP6
   The cards are zoomed to fit by blaze_responsive.js, but they stop
   shrinking once the type would become unreadable, so a very narrow phone
   still needs to scroll sideways. A default scrollbar would swallow 15px of
   an already tight card, hence the slim one. */
.bz-fitcard { scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bz-fitcard::-webkit-scrollbar { height: 9px; }
.bz-fitcard::-webkit-scrollbar-track { background: transparent; }
.bz-fitcard::-webkit-scrollbar-thumb { background: rgba(56,189,248,.55); border-radius: 5px; }


/* ==================================================================
   CHG-20260814-FIT  -  fit-to-width presentation

   The console must read the same on a desktop, an iPad or a phone,
   with VERTICAL scrolling only. Two things used to force the page
   sideways: the 14-stage pipeline strip is built from fixed 78px
   cells, and the line-item table is sized from seven pixel widths
   that add up to 1360px.

   The strip is handled here - every part of it derives from the one
   --bz-cell measurement below, so it shares out the width available
   instead of overrunning it. The table is NOT handled here: column
   widths belong to the user (drag handles, Default View), so
   blaze_responsive.js converts whatever is stored into proportions.
   Nothing in this file sets a column width, which is what lets the
   resizer keep working.

   --bz-avail is the room a record card actually has: the viewport
   less the sidebar and padding, or less padding alone once the
   sidebar is hidden.
   ================================================================== */

html.bz-rsp            { --bz-avail: calc(100vw - 277px); }
html.bz-rsp.blz-sbhide { --bz-avail: calc(100vw - 17px); }
html.bz-rsp            { --bz-cell: min(78px, calc((var(--bz-avail) - 26px) / 16)); }

html.bz-rsp, html.bz-rsp body { max-width: 100%; overflow-x: hidden; }
html.bz-rsp #main             { min-width: 0; max-width: 100%; }

/* Pipeline strip. 14 stages + 13 arrows, the arrow being 0.1538 of a
   stage and the icon 0.6154 of it, which is the proportion the strip
   is drawn with at full desktop size. */
html.bz-rsp .bz-fitcard > div:first-child > div { min-width: 0 !important; }
html.bz-rsp .bz-fitcard > div:first-child > div:not(.op-arw) { width: var(--bz-cell) !important; }
html.bz-rsp .bz-fitcard > div:first-child > div.op-arw { width: calc(var(--bz-cell) * .1538) !important; }
html.bz-rsp .bz-fitcard > div:first-child > div:not(.op-arw) > *:first-child {
  width:  calc(var(--bz-cell) * .6154) !important;
  height: calc(var(--bz-cell) * .6154) !important;
}
html.bz-rsp .bz-fitcard > div:first-child > div:not(.op-arw) > *:nth-child(2) {
  font-size: max(5px, calc(var(--bz-cell) * .128)) !important;
  overflow-wrap: anywhere;
}

/* Line items: long part numbers wrap down the row rather than push
   the table out sideways, and the type steps down with the width. */
html.bz-rsp table.spc-tbl td, html.bz-rsp table.spc-tbl th {
  overflow-wrap: anywhere;
  word-break: break-word;
}
html.bz-rsp table.spc-tbl { font-size: clamp(10px, calc(var(--bz-avail) / 84), 14px) !important; }
html.bz-w-phone table.spc-tbl td, html.bz-w-phone table.spc-tbl th {
  padding-left: 4px !important; padding-right: 4px !important;
}