/* Tables: the sheet of the upload's rows, the navigation bar under it, and the
   invoice summary that sits above it (docs/design/app/review-i-sheet.html and,
   for the summary, flow-07-review.html on branch claude/ai-qa-ui-ux-design-7138de).

   This file is shared with the design prototypes, which link it directly
   (docs/design/app/design-brief.md, "Visual base"). The summary and the roll-up
   marker are here ahead of the screen that renders them, because /ui_components
   draws them in development. The rest of what review-i-sheet.html draws and no
   Rails view does — the back link under the headline, the accent code picker,
   the set-level correction row, the converted-cell highlight, the editable
   description's hover state — stays in that prototype's own <style> block and
   comes back here with the screen that renders it. */

.a, .h, .rt { font-variant-numeric: tabular-nums; }

/* ============ THE SHEET ============ */
/* Native <table>. Column widths live in the <colgroup>; table-layout: fixed
   makes them authoritative and lets the description column take the remainder.
   border-collapse: separate keeps per-cell border-radius, so the rounded frame
   is drawn by the wrapper .sheet <div> and the corner cells round themselves
   (a table cannot clip its corners with overflow:hidden without breaking the
   sticky <thead>). Horizontal separators are hair lines on cell tops. */
/* The seven column widths, which the prototype writes as an inline style on
   each <col>. They live here because the app's content security policy allows
   styles only from its own stylesheets, so an inline width would be dropped and
   every column would come out one seventh of the table. The fourth column, the
   description, is left to take the remainder. */
.sheettable col:nth-child(1) { width: 104px; }
.sheettable col:nth-child(2) { width: 118px; }
/* The third column holds a fee line's two codes, the task code and the activity
   code, as two chips on one line. At 90px it could not: a chip is 5 chars of the
   0.68rem mono face plus 5px of padding on each side, so the widest pair the app
   draws — a five-character task code such as H100Q beside a four-character
   activity code such as A111 — measures about 82px, and 90px leaves 70px between
   the cell's 10px paddings. The pair wrapped, which cost every fee row a second
   line of chips it did not need. 112px leaves 92px of content, and headless
   Chrome measures the June export's own pair at 79.6px inside it, so the pair
   fits with room to spare and the description column pays 22px for it. On that
   file the change takes the shortest row from 54.0px to 33.5px, and the
   seventeen rows whose description fits one line all sit at 33.5px, which is the
   height the kind marker was built to hold every row to. A row is now as tall as
   its description needs and nothing else. Nothing forces the pair onto one line: a
   code longer than any this app has drawn would wrap rather than spill into the
   next column, and only that row would grow. */
.sheettable col:nth-child(3) { width: 112px; }
/* The fifth column was 52px when its header was the single word HOURS. The
   header is now "Hours / units", which is 13 characters of the 0.62rem mono
   header face — about 84px of text, where 52px leaves 32px between the cell's
   10px paddings. Under table-layout: fixed that wraps to three lines, so the
   column is widened to fit the header on one. 110px leaves the description
   column 506px at the 1200px sheet measure and 254px inside the 900px minimum
   the horizontal scroller enforces below 1040px, which is wider than any
   description this app has drawn. (Those two figures are measured, not
   estimated: the 1200px measure is the .wrap max-width, which loses 2 x 24px of
   page padding and the .sheet border, leaving the table 1150px, of which the
   six fixed columns take 644px. Headless Chrome reports the description cell at
   506.0px in a 1440-wide viewport and 254.0px in a 375-wide one.) */
.sheettable col:nth-child(5) { width: 110px; }
.sheettable col:nth-child(6) { width: 82px; }
.sheettable col:nth-child(7) { width: 118px; }

.sheetwrap { padding-block: var(--s5) var(--s4); }
.sheet { background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--radius); }
.sheettable { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sheettable td, .sheettable th { vertical-align: top; }
.r .cell { border-top: 1px solid var(--hair); }
/* column header row: sticky at desktop (the wrapper never scrolls), static in
   the horizontal scroller under 1040px */
.colhead .cell {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--hair-strong);
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-muted); padding-block: 7px;
  text-align: left;
}
.colhead .cell:first-child { border-top-left-radius: var(--radius); }
.colhead .cell:last-child  { border-top-right-radius: var(--radius); }
.cell { padding: 6px 10px; font-size: 0.82rem; line-height: 1.42; min-width: 0; }
.cell.h, .cell.a, .cell.rt { text-align: right; }
/* the customer's data is near-black; gray is chrome only */
.cell.dt { color: var(--ink-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell.p  { color: var(--ink-body); white-space: nowrap; }
.cell.ds { color: var(--ink-body); }
.cell.h  { color: var(--ink-body); }
.cell.rt { color: var(--ink-body); white-space: nowrap; }
.cell.a  { color: var(--ink-body); white-space: nowrap; }

/* invoice section header inside the sheet: one cell spanning all columns, its
   content laid out with the flex wrapper. The underline below it is the next
   data row's hair top border. */
.invhead td {
  padding: 9px var(--s4) 9px 22px; background: var(--surface-sunk);
  border-top: 1px solid var(--hair-strong);
}
.sheettable > tbody:first-of-type .invhead td { border-top: none; }
.invhead-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); }
.invhead .inv-no { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; color: var(--accent-ink); }
.invhead .inv-matter { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
/* Marks a run of rows belonging to an invoice that started earlier in the file.
   It is chrome rather than the customer's data, so it reads one step quieter. */
.invhead .inv-cont { font-size: var(--step--2); color: var(--ink-muted); }

/* ---- code chips: the code is the customer's data, so it reads at row
   weight (ink-body), not in a fainter tier. ---- */
.code {
  display: inline-block; font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  color: var(--ink-body); background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 0 5px; line-height: 1.7;
}

/* ---- the row-type marker: the button beside the code on a row that is not a
   fee row, holding the word Expense or Adjustment (base.css draws the tip
   itself). The word used to sit in the cell, which made those few rows taller
   than every other row in the table; behind a marker, every row is the same
   height. The button is smaller than a form's and it sits inside the code
   cell's own line, so it adds nothing to the row's height either. ---- */
.cell .tip-mark { margin-left: 3px; }
.cell .tip-mark .tip-btn { width: 13px; height: 13px; font-size: 0.5rem; }
.cell .tip-mark .tip-text { padding: 5px 9px; font-size: var(--step--2); }

/* ---- subtotal + grand-total rows (label cell spans 4 columns) ---- */
.subrow td, .grandrow td { vertical-align: baseline; background: var(--surface-sunk); border-top: 2px solid var(--hair-strong); }
.subrow .cell { padding-block: 9px; font-size: var(--step--1); }
.subrow .slabel { color: var(--ink-muted); font-weight: 600; }
.subrow .shrs { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-body); font-weight: 600; white-space: nowrap; }
.subrow .sdol { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
.grandrow .cell { padding-block: 12px; }
.grandrow .glabel { color: var(--ink); font-weight: 700; }
.grandrow .ghrs { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-body); font-weight: 700; white-space: nowrap; }
.grandrow .gdol { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; font-size: 1.08rem; }
/* round the bottom corners so the sunk fill matches the wrapper's rounded frame */
.grandrow td:first-child { border-bottom-left-radius: var(--radius); }
.grandrow td:last-child  { border-bottom-right-radius: var(--radius); }

/* ============ THE INVOICE SUMMARY ============ */
/* The block above the sheet: one row per invoice the file carries, and the
   file's total under them. It is a native <table> like the sheet, so its <thead>
   names the four columns once and no row carries captions of its own. Column
   widths are the browser's — table-layout stays auto — so the matter column
   takes what it needs and wraps on a narrow screen, and no cell changes place.
   The frame clips its rounded corners with overflow: hidden; below about 340px
   the four columns stop fitting, and scrolling beats hiding a dollar total, so
   the horizontal axis scrolls instead.

   .shrs and .sdol are also the sheet's subtotal-row classes above, on their own
   values. Both sets are scoped — those to .subrow, these to .sumtable — so
   neither reaches the other's table. */
.summary {
  margin-top: var(--s4);
  background: var(--surface); border: 1px solid var(--hair-strong);
  border-radius: var(--radius); overflow: hidden;
  overflow-x: auto;
}
.sumtable { width: 100%; border-collapse: collapse; }
.sumtable th, .sumtable td {
  vertical-align: baseline; text-align: left; padding: 11px var(--s2);
}
.sumtable th:first-child, .sumtable td:first-child { padding-left: var(--s5); }
.sumtable th:last-child,  .sumtable td:last-child  { padding-right: var(--s5); }
/* one class-level step above .sumtable .shrs / .sdol below, so a header cell
   borrowing those classes for its alignment still reads as a column caption */
.sumtable .sumhead th {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em;
  padding-block: 7px; border-bottom: 1px solid var(--hair);
}
.sumtable tbody tr + tr th, .sumtable tbody tr + tr td { border-top: 1px solid var(--hair); }
.sumtable .sinv { font-family: var(--mono); font-size: var(--step--1); font-weight: 600; color: var(--ink-body); }
.sumtable .smatter { font-size: var(--step--1); color: var(--ink-body); font-weight: 400; }
.sumtable .shrs { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--step--1); color: var(--ink-muted); white-space: nowrap; }
.sumtable .sdol { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.sumtable .grand th, .sumtable .grand td {
  background: var(--surface-sunk); border-top: 2px solid var(--hair-strong);
}
.sumtable .grand .sinv { color: var(--ink); }
.sumtable .grand .shrs { color: var(--ink-body); font-weight: 600; }
.sumtable .grand .sdol { font-size: 1.08rem; font-weight: 700; }

@media (max-width: 640px) {
  /* the summary table keeps all four columns; it buys the room by tightening
     its own padding and dollar type rather than reordering anything */
  .sumtable th, .sumtable td { padding-inline: var(--s1); }
  .sumtable th:first-child, .sumtable td:first-child { padding-left: var(--s3); }
  .sumtable th:last-child,  .sumtable td:last-child  { padding-right: var(--s3); }
  .sumtable .shrs { font-size: var(--step--2); }
  .sumtable .sdol { font-size: var(--step--1); }
  /* the total row keeps its weight and its sunk fill; only the type size gives
     way, so all four columns still fit a 360px screen */
  .sumtable .grand .sdol { font-size: var(--step--1); }
}

/* ============ THE COMBINED LINE'S ENTRIES ============ */
/* The button is outside the line box so collapsed rows keep their height. */
.r .cell.h { position: relative; }
.entries-toggle {
  position: absolute; left: 10px; top: 3px; width: 24px; height: 24px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--accent-ink); cursor: pointer;
}
.entries-toggle:hover, .entries-toggle[aria-expanded="true"] { background: var(--hair); }
.entries-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.entries-toggle span::before {
  content: ""; display: block; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
.entries-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.entries[hidden] { display: none; }
.sheettable > .is-expanded td, .entries .cell { background: var(--surface-sunk); }
.sheettable > .is-expanded td:first-child, .entries tr > :first-child {
  box-shadow: inset 3px 0 var(--accent-ink);
}
.entries .cell { border-top: 1px solid var(--hair); }
.entries-caption .cell { text-align: left; font-weight: 400; color: var(--ink-muted); padding-block: 9px; }
.entry-time { font-family: var(--sans); color: var(--ink-muted); font-size: var(--step--2); white-space: nowrap; }
.entry-time span { display: block; }
.entry-empty { color: var(--ink-muted); }
.entries .ds { overflow-wrap: anywhere; }
.entries .h { white-space: nowrap; }
.entries-total .cell { padding-block: 9px; font-weight: 600; }
.entries-total td:first-child { text-align: right; }
.entries-total .h { border-top: 2px solid var(--accent-ink); }

/* ============ THE BAR UNDER THE SHEET ============ */
/* The sheet downloads nothing; its one control navigates to the job's own page,
   where the download button is (design brief, "Sheet structure"). */
.downbar {
  position: sticky; bottom: 0; z-index: var(--z-header);
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
  border-top: 1px solid var(--hair-strong);
}
.db-in { display: flex; gap: var(--s2) var(--s4); align-items: center; padding-block: var(--s3); flex-wrap: wrap; }
.downbar .btn { margin-left: auto; flex: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1040px) {
  .scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sheet { min-width: 900px; }
  .colhead .cell { position: static; }
}
@media (max-width: 640px) {
  .downbar .btn { width: 100%; margin-left: 0; }
}

/* A line-level write-down, named under the amount it comes off. */
.cell.a .adj { display: block; font-size: var(--step--1); color: var(--ink-muted); white-space: normal; text-align: right; }
.downbar .quiet-link { margin-left: var(--s4); }