/* responsive.css — Barrier Client Portal
 * Mobile/tablet responsive layer. Loaded AFTER portal.css so it can override.
 * Touch-first patterns: table-scroll wrappers, hamburger nav, chart re-flow.
 *
 * Conventions:
 *   .bc-table-scroll       horizontal scroll container for wide tables; scopes
 *                          the overflow to the wrapper (not page-level pan)
 *   .bc-hamburger          mobile nav toggle button (44x44 tap target)
 *   .bc-nav--open          nav state when hamburger opened
 *
 * Breakpoint conventions: phone ≤ 640px, tablet ≤ 1024px.
 */

/* === Table scroll wrapper — used by every wide data table ===
 * Wraps a wide <table> so horizontal scroll is contained INSIDE the wrapper,
 * not at the page level. Without this, the table's intrinsic width pushes the
 * <main> wider than viewport and forces the entire page (header, footer,
 * narrow content) to pan horizontally. With this, only the table panes side-
 * ways while the rest of the page fits within the viewport.
 */
.bc-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Subtle visual cue that content scrolls — right-edge fade */
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)) left center / 30px 100% no-repeat local,
    linear-gradient(to right, rgba(255,255,255,0), var(--white) 70%) right center / 30px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll;
  border-radius: var(--radius-md);
}
.bc-table-scroll > table { margin: 0; min-width: max-content; border-radius: 0; }
.bc-table-scroll .bc-table { border-radius: 0; }

/* === Generic word-break helpers === */
.bc-wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }
.bc-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === Hamburger button — hidden on desktop, visible <640px === */
.bc-hamburger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--carbon-30);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.bc-hamburger:hover { background: var(--carbon-10); }
.bc-hamburger:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.bc-hamburger__lines, .bc-hamburger__lines::before, .bc-hamburger__lines::after {
  display: block; width: 20px; height: 2px; background: var(--text-primary); position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.bc-hamburger__lines::before { content: ''; position: absolute; top: -7px; left: 0; }
.bc-hamburger__lines::after  { content: ''; position: absolute; top:  7px; left: 0; }
.bc-hamburger[aria-expanded='true'] .bc-hamburger__lines { background: transparent; }
.bc-hamburger[aria-expanded='true'] .bc-hamburger__lines::before { top: 0; transform: rotate(45deg); }
.bc-hamburger[aria-expanded='true'] .bc-hamburger__lines::after  { top: 0; transform: rotate(-45deg); }

/* === Mobile nav (collapsed by default, expanded when hamburger pressed) === */
@media (max-width: 640px) {
  .bc-hamburger { display: inline-flex; }
  .bc-brand__sub { display: none; }
  .bc-brand__name { font-size: 16px; }

  /* Nav is hidden by default at this breakpoint and appears as a drop-down
   * panel beneath the sticky header when the hamburger is open. */
  .bc-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--sp-3);
    display: none;
    z-index: 99;
  }
  .bc-nav.bc-nav--open { display: flex; }
  .bc-nav__link, .bc-nav__user { padding: 12px var(--sp-2); font-size: 15px; min-height: 44px; display: flex; align-items: center; }
  .bc-nav form { width: 100%; }
  .bc-nav form .bc-btn { width: 100%; justify-content: center; min-height: 44px; white-space: nowrap; }
  .bc-header__inner { position: relative; padding: var(--sp-2) var(--sp-3); }
}

/* === Form / card overflow protection === */
.bc-card, .bc-form { max-width: 100%; }
.bc-card { overflow: hidden; }
.bc-card.bc-card--has-table { overflow: visible; padding: 0; }
.bc-form__input, .bc-form__select { max-width: 100%; }

/* === Page-level guarantee: <main> never overflows viewport ===
 * Last-resort guarantee that <main> itself cannot grow wider than viewport.
 * Wide children (tables, charts) must opt into their own scroll wrapper.
 */
.bc-main { max-width: 100%; overflow-x: clip; }

/* === Phone layout (≤640px) === */
@media (max-width: 640px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  .bc-page-head h1 { font-size: 28px; }
  .bc-lede { font-size: 16px; }
  .bc-main { padding: var(--sp-4) var(--sp-3) var(--sp-6); }

  /* All multi-column grids collapse to single column on phone */
  .bc-stats { grid-template-columns: 1fr 1fr !important; }
  .bc-tool-grid { grid-template-columns: 1fr !important; }

  /* Cost page 4-chart grid → 1 column */
  .cost-charts-grid { grid-template-columns: 1fr !important; }
  /* Cost page 6-stat hero strips set inline grid-template-columns: repeat(6,1fr).
   * Override to 2 columns at phone width. */
  .bc-stats[style*='repeat(6'] { grid-template-columns: 1fr 1fr !important; }
  /* Cost page 4-stat strip override */
  .bc-stats[style*='repeat(4'] { grid-template-columns: 1fr 1fr !important; }

  /* Visuals page chart grid: 28 charts → 1 column at phone width.
   * Default rule uses minmax(440px,1fr) which traps charts at 440px min.
   * The override uses minmax(0, 1fr) so charts fluidly fill column width. */
  .vis-grid { grid-template-columns: 1fr !important; }
  .vis-card .chart-wrap { height: 280px; }
  .vis-card-wide .chart-wrap { height: 340px; }
  .quadrant-grid { grid-template-columns: 1fr !important; }

  /* Edit-app: dependencies + form grids → 1 column */
  .bc-card [style*='grid-template-columns'] { grid-template-columns: 1fr !important; }

  /* Customize matrix: 3 weight cells stack vertically on phone */
  .cm-weights { grid-template-columns: 1fr !important; }
  .cm-add-row { flex-wrap: wrap; }
  .cm-add-row input { flex: 1 1 100%; min-width: 0; }
  .cm-add-row .cm-btn { flex: 1 1 calc(50% - var(--sp-1)); }

  /* Glossary 2-col grid already collapses via media (max-width:700px) inside its file. */
  .g-term__def { overflow-wrap: anywhere; word-break: break-word; }
  .g-term__name { overflow-wrap: anywhere; }
}

/* === Tablet (≤1024px) — modest tweaks === */
@media (max-width: 1024px) {
  .bc-main { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}

/* === Dependencies table: Type column min-width with ellipsis on overflow.
 * Caller adds class "dep-type-cell" to <td> wrapping the <code>.
 */
.dep-type-cell { max-width: 160px; }
.dep-type-cell code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }


/* === Inline flex containers (recommendation aside, dependencies inbound/outbound row)
 * use display:flex with min-width children. At phone widths those need to stack
 * vertically. Catch any .bc-card or <aside> that uses style with flex-wrap. */
@media (max-width: 640px) {
  .bc-card [style*="display: flex"][style*="flex-wrap: wrap"],
  aside.bc-card [style*="display: flex"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
  }
  .bc-card [style*="display: flex"][style*="flex-wrap: wrap"] > * {
    min-width: 0 !important;
    width: 100%;
  }
}