/*
 * Requirement tracking grid
 *
 * Why two <table> elements: the body scrolls horizontally while the first column stays sticky.
 * The top row (corner “Requirement” + plastun names) must stay aligned with body columns, so the
 * plastun strip is a separate table whose margin tracks #requirement-tracking-body-scroll scrollLeft.
 * A single merged table would not allow that split without breaking sticky/header behavior in Safari.
 *
 * Typography: one scale for the whole card (--font-base) so headers, cells, and flyouts match.
 */

.requirement-tracking-card {
  --rt-first-col: 22rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-primary);
  background: var(--bg-elevated);
  /* Do not use overflow:hidden here — it clips the JS-pinned header; round corners on cells instead */
  min-width: 0;
  font-size: var(--font-base);
  line-height: 1.45;
  /* Avoid browser scroll anchoring fighting JS scroll correction when the grid changes height */
  overflow-anchor: none;
}

/*
 * Small screens: default is a narrow requirement column (collapsed). User can expand via the
 * header control (.rt-column-expanded). Not scroll-driven.
 */
@media (max-width: 991.98px) {
  .requirement-tracking-card {
    --rt-first-col: 3rem;
  }

  .requirement-tracking-req-preview,
  .requirement-tracking-req-sep {
    display: none;
  }

  .requirement-tracking-req-code--fallback {
    max-width: 100%;
  }

  .requirement-tracking-head-corner {
    padding-inline: var(--space-1);
  }

  .requirement-tracking-card.rt-column-expanded {
    --rt-first-col: max(11rem, min(21rem, 48vw));
  }

  .requirement-tracking-card.rt-column-expanded .requirement-tracking-req-preview {
    display: block;
    overflow: visible;
    word-break: break-word;
  }

  /* Code is nowrap + preview is block; an inline “ — ” would sit alone at the end of line 1 */
  .requirement-tracking-card.rt-column-expanded .requirement-tracking-req-sep {
    display: none;
  }

  .requirement-tracking-card.rt-column-expanded .requirement-tracking-head-corner {
    padding-inline: var(--space-2);
  }

  /* Narrow header: icon-only round + / − (label text is in aria-label on the button) */
  button.requirement-tracking-head-corner--btn {
    justify-content: center;
    align-items: center;
    padding: var(--space-2);
  }

  button.requirement-tracking-head-corner--btn .requirement-tracking-head-corner__chev {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--border-primary);
    background: var(--bg-surface);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
  }
}

@media (min-width: 992px) {
  .requirement-tracking-head-corner__label--short {
    display: none;
  }
}

.requirement-tracking-head-wrap {
  position: relative;
  /* Above .requirement-tracking-body-scroll so the header (esp. pinned) covers tbody sticky cells */
  z-index: 11;
  min-width: 0;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

.requirement-tracking-head-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.requirement-tracking-head-corner {
  position: relative;
  /* Above plastun strip in the same row and above tbody sticky cells when pinned */
  z-index: 2;
  flex: 0 0 var(--rt-first-col, 22rem);
  width: var(--rt-first-col, 22rem);
  min-width: var(--rt-first-col, 22rem);
  max-width: var(--rt-first-col, 22rem);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
  font-size: inherit;
  /* Right edge only; bottom edge matches .table thead th border-bottom (avoid double rule with thead) */
  box-shadow: 1px 0 0 var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
  border-top-left-radius: var(--radius-lg);
}

.requirement-tracking-head-corner__text {
  min-width: 0;
  flex: 1 1 auto;
}

/* Full-cell tap target on narrow screens (see show.html.erb: button vs div on lg+) */
button.requirement-tracking-head-corner--btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  align-self: stretch;
  min-height: 100%;
  -webkit-tap-highlight-color: transparent;
}

button.requirement-tracking-head-corner--btn:hover {
  filter: brightness(0.97);
}

button.requirement-tracking-head-corner--btn:focus-visible {
  outline: 2px solid var(--bs-primary, var(--accent-primary));
  outline-offset: -2px;
}

.requirement-tracking-head-corner__chev {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  font-weight: 600;
  line-height: 1;
}

.requirement-tracking-head-corner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.requirement-tracking-head-corner__icon--expand {
  display: inline-flex;
}

.requirement-tracking-head-corner__icon--collapse {
  display: none;
}

.requirement-tracking-card.rt-column-expanded .requirement-tracking-head-corner__icon--expand {
  display: none;
}

.requirement-tracking-card.rt-column-expanded .requirement-tracking-head-corner__icon--collapse {
  display: inline-flex;
}

.requirement-tracking-head-shift-outer {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  /* Corner vs plastun row height can differ; the inner table stays content-sized, leaving a gap that
   * would otherwise show the body row (elevated) behind — fill it with the same header color. */
  background: var(--bg-tertiary);
  /* Match card top-right corner (table cells alone stay square without a clipping region) */
  border-top-right-radius: var(--radius-lg);
  overflow: hidden;
  /* Horizontal: same as clip — hide overscroll of the shifted head table */
}

.requirement-tracking-head-shift {
  display: block;
  overflow: visible;
}

/* Pinned under .navbar (z-index 1100) */
.requirement-tracking-head-inner.is-pinned {
  position: fixed;
  z-index: 1020;
  margin-top: 0;
  box-sizing: border-box;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  overflow-x: clip;
  isolation: isolate;
  /* Square edges so the grid behind doesn’t show through rounded corners */
  border-radius: 0;
}

/* Children still had radius from the in-flow layout — remove when pinned */
.requirement-tracking-head-inner.is-pinned .requirement-tracking-head-corner {
  border-top-left-radius: 0;
}

.requirement-tracking-head-inner.is-pinned .requirement-tracking-head-shift-outer {
  border-top-right-radius: 0;
}

.requirement-tracking-body-scroll {
  position: relative;
  z-index: 0;
  scrollbar-gutter: stable;
  min-width: 0;
  overflow-x: auto;
  overflow-y: clip;
  -webkit-overflow-scrolling: touch;
  /* No horizontal rubber-band: sticky “Requirement” column bounces but the header corner does not */
  overscroll-behavior-x: none;
  background-color: var(--bg-elevated);
  /* Clip tbody to the card’s bottom radius so middle cells don’t read as square “tabs” past the curve */
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.requirement-tracking-table-wrap {
  overflow: visible;
  min-width: 0;
}

.requirement-tracking-grid {
  table-layout: fixed;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.requirement-tracking-card .requirement-tracking-grid {
  box-sizing: border-box;
  font-size: inherit;
  line-height: inherit;
  width: max(100%, var(--rt-cols)) !important;
  min-width: max(100%, var(--rt-cols)) !important;
}

/* Plastun-only header row: same total width as body columns after the sticky first column */
.requirement-tracking-card .requirement-tracking-grid--head-names {
  --rt-head-names-cols: calc(var(--rt-cols) - var(--rt-first-col, 22rem));
  width: max(100%, var(--rt-head-names-cols)) !important;
  min-width: max(100%, var(--rt-head-names-cols)) !important;
}

.requirement-tracking-grid {
  width: 100%;
}

.requirement-tracking-grid tbody {
  position: relative;
  z-index: 0;
}

/* Lift the expanded row so the flyout isn’t covered by the next row’s sticky first column */
.requirement-tracking-grid--body tbody tr.rt-row-expanded {
  position: relative;
  z-index: 30;
}

/* Same-row <td> cells default to painting after <th>; keep them under the flyout */
.requirement-tracking-grid--body tbody tr.rt-row-expanded > td {
  position: relative;
  z-index: 0;
}

.requirement-tracking-grid :is(th, td) {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}

/* Header row: not sticky here — clip on head-wrap breaks Safari sticky; JS uses .is-pinned */
.requirement-tracking-head-wrap .requirement-tracking-grid thead th {
  position: static;
  background-color: var(--bg-tertiary);
  background-clip: padding-box;
  color: var(--text-primary);
  font-weight: 600;
  font-size: inherit;
  /* Single separator: components/tables.css already sets border-bottom on .table thead th */
  box-shadow: none;
  box-sizing: border-box;
  vertical-align: middle;
}

.requirement-tracking-body-scroll .requirement-tracking-grid tbody th[scope="row"] {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  /* Stay above row <td> when scrolling horizontally; stay below .requirement-tracking-head-wrap */
  z-index: 1;
  box-shadow: 1px 0 0 var(--border-primary);
  background: var(--bg-elevated);
  color: var(--text-primary);
  white-space: normal;
}

.requirement-tracking-grid thead th.requirement-tracking-col-actions,
.requirement-tracking-grid tbody td.requirement-tracking-col-actions {
  width: 14rem;
  box-shadow: -1px 0 0 var(--border-primary);
}

.requirement-tracking-grid thead th.requirement-tracking-col-actions {
  background: var(--bg-tertiary);
}

.requirement-tracking-grid tbody td.requirement-tracking-col-actions {
  background: var(--bg-elevated);
}

.requirement-tracking-grid td.requirement-tracking-col-actions .requirement-row-toggle {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  padding-inline: var(--space-2);
  hyphens: auto;
}

/* ——— Compact requirement labels (< lg): tap for full text; narrow + scroll = code only ——— */

.requirement-tracking-req-label {
  position: relative;
  padding: 0 !important;
  vertical-align: middle;
  font-size: inherit;
}

/* Desktop (lg+): same inset as compact .requirement-tracking-req-toggle — aligns with navbar expand-lg */
@media (min-width: 992px) {
  .requirement-tracking-req-desktop {
    box-sizing: border-box;
    padding: var(--space-3) var(--space-4);
  }
}

.requirement-tracking-req-compact {
  display: block;
  min-width: 0;
  min-height: 100%;
}

.requirement-tracking-req-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  line-height: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.requirement-tracking-req-toggle:focus-visible {
  outline: 2px solid var(--bs-primary, var(--accent-primary));
  outline-offset: 2px;
}

.requirement-tracking-req-code {
  font-weight: 600;
  white-space: nowrap;
}

.requirement-tracking-req-code--fallback {
  font-weight: 600;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requirement-tracking-req-flyout {
  position: absolute;
  left: 0;
  top: calc(100% - 2px);
  /* Default stacking; open state uses fixed + JS (and may move under <body>) */
  z-index: 50;
  min-width: min(18rem, calc(100vw - 1rem));
  max-width: min(40rem, calc(100vw - 0.75rem));
  /* Same comfortable padding on all viewports (matches what felt right on “medium”) */
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-primary);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  /* When reparented to <body>, still match the grid (no inheritance from .requirement-tracking-card) */
  font-size: var(--font-base);
  line-height: 1.45;
}

.requirement-tracking-req-flyout-text {
  display: block;
  margin: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  font-size: inherit;
  line-height: inherit;
  color: var(--text-primary);
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* Pinned to viewport — JS sets width and max-height; inner text never line-clamps */
.requirement-tracking-req-flyout.requirement-tracking-req-flyout--fixed {
  position: fixed;
  max-width: min(50rem, calc(100vw - 0.75rem)) !important;
  height: auto;
  min-height: 0;
  max-height: min(96vh, calc(100vh - 12px));
  overflow-x: visible;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.requirement-tracking-req-flyout.requirement-tracking-req-flyout--fixed .requirement-tracking-req-flyout-text {
  display: block;
  overflow: visible;
  max-height: none;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.requirement-tracking-req-flyout[hidden] {
  display: none !important;
}

.requirement-tracking-req-label.is-expanded {
  z-index: 50;
}

.requirement-tracking-req-label.is-expanded .requirement-tracking-req-toggle {
  background: var(--bg-tertiary);
}

/* Section banner row: same compact treatment as requirement codes (code only; full title in flyout) */
.requirement-tracking-section-head.requirement-tracking-req-label {
  padding: 0 !important;
  vertical-align: middle;
}