/*
 * PAGE X-RAY TABLE
 * ================
 * Side-by-side metric breakdown plus a Δ column — the dominant table
 * on the result view. Table itself inherits the base table styling
 * from elements.css; this file tunes its layout, the section
 * dividers, the delta colouring and the captures sizing.
 */

.userShowable {
  display: none;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/*
 * Section divider rows — full-width header cells inserted between
 * groups of related metrics ("Content", "Render blocking", "Visual
 * metrics", "Core Web Vitals", "CPU", "Captures"). Each kind gets
 * its own quiet pastel/text pair so the eye can tell sections apart
 * at a glance instead of seeing identical bars stacked down the
 * table. Hover is suppressed so they stay visually distinct from
 * data rows.
 */
.pageXrayTable .pageXraySection th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 12px 6px;
  border-bottom: 1px solid var(--color-border);
}

.pageXrayTable .pageXraySection--content th  { background: var(--color-info-bg);    color: var(--color-info); }
.pageXrayTable .pageXraySection--blocking th { background: var(--color-warning-bg); color: var(--color-warning); }
.pageXrayTable .pageXraySection--visual th   { background: #f3e8ff;                  color: #6b21a8; }
.pageXrayTable .pageXraySection--cwv th      { background: var(--color-ok-bg);      color: var(--color-ok); }
.pageXrayTable .pageXraySection--cpu th      { background: #ffedd5;                  color: #9a3412; }
.pageXrayTable .pageXraySection--captures th { background: var(--color-surface);    color: var(--color-text-muted); }

/* Hover repeats the section's own bg so the row doesn't snap to the
   default row-hover blue tint when the user mouses over a header. */
.pageXrayTable .pageXraySection--content:hover th  { background: var(--color-info-bg); }
.pageXrayTable .pageXraySection--blocking:hover th { background: var(--color-warning-bg); }
.pageXrayTable .pageXraySection--visual:hover th   { background: #f3e8ff; }
.pageXrayTable .pageXraySection--cwv:hover th      { background: var(--color-ok-bg); }
.pageXrayTable .pageXraySection--cpu:hover th      { background: #ffedd5; }
.pageXrayTable .pageXraySection--captures:hover th { background: var(--color-surface); }

.pageXrayTable {
  table-layout: fixed;

  tr {
    transition: background-color var(--motion-fast);

    &:hover td {
      background: var(--color-blue-tint);
      color: var(--color-text);

      a { color: var(--color-blue-dark); }
    }
  }
}

.tableXrayMetric    { width: 22%; text-align: left; }

/*
 * Metric column header — "Metric" label sits on top of a row of
 * action chips (Switch + Only differences). Stacking with flex
 * keeps the chips aligned consistently with each other and with the
 * column's left edge (which is where the row labels below sit),
 * instead of relying on inline-wrap and ending up indented.
 */
.tableXrayMetric-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.tableXrayMetric-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  /* Negative margin so the button's visible text edge lines up with
     the metric labels below ("URL", "Date", …) — the button's own
     border + padding would otherwise indent the text by ~9px. */
  margin-left: -9px;
}
.tableXrayMetric-actions .chip-toggle,
.tableXrayMetric-actions .submit-smaller {
  /* `gap` handles spacing — strip the default left margins. */
  margin-left: 0;
}
.tableXrayHarMetric,
.tableXrayHar2Metric { width: 31%; }
.tableXrayDiff      { width: 16%; text-align: right; padding-right: 12px; color: var(--color-text-muted); font-weight: var(--font-weight-medium); }

/*
 * Δ column — at-a-glance regression / improvement marker. Every
 * metric in this table is "lower is better"; HAR2 minus HAR1 > 0 is a
 * regression (red), < 0 is an improvement (green). The colour comes
 * from the modifier class, the layout is shared.
 */
.pageXrayDiff {
  text-align: right;
  padding-right: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  font-size: 0.9rem;
}
.pageXrayDiff--better { color: var(--color-ok); }
.pageXrayDiff--worse  { color: var(--color-error); }
.pageXrayDiff--same   { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.pageXrayDiff-pct {
  font-weight: var(--font-weight-regular);
  opacity: 0.85;
  margin-left: 2px;
}

/*
 * "Only show differences" toggle chip — lives in the metric header
 * next to Switch. When pressed, the user only sees rows where the Δ
 * column actually reports a change; "no change" rows fold away.
 */
.chip-toggle {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  /* Visually separate from any preceding button or text. Reset to 0
     inside a flex parent (e.g. .card-title) where `gap` already
     handles the spacing. */
  margin-left: 12px;
  vertical-align: middle;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill, 999px);
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast),
              border-color var(--motion-fast);
}
.card-title > .chip-toggle {
  margin-left: 0;
}
.chip-toggle:hover,
.chip-toggle:focus-visible {
  background: var(--color-blue-tint);
  color: var(--color-blue-dark);
  border-color: var(--color-info-border);
}
.chip-toggle[aria-pressed="true"] {
  background: var(--color-blue);
  color: white;
  border-color: var(--color-blue);
}

/*
 * Hide rows whose Δ cell explicitly reports "no change". Section
 * dividers and rows without a Δ cell stay visible — the toggle is
 * meant to reduce noise, not strip the table of its structure.
 */
.pageXrayTable--diff-only tr:has(td.pageXrayDiff--same) {
  display: none;
}

/* Captures — final screenshot and recorded video. The whole point of
   the comparison view is to spot regressions, so the captures need
   real room: width caps at column width (responsive) with a sensible
   minimum that still beats the previous 200px hard-cap. */
.pageXrayCapture {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-card);
}

/*
 * CPU disclosure sub-tables. The cell hosting the sub-table loses the
 * parent table's hover styling so the inner header/rows read on their
 * own; the sub-table itself uses smaller text and the same Δ column
 * styling so a regression in "scripting" reads the same way as a
 * regression in the main table.
 */
.cpuBreakdownCell {
  padding: 0;
  background: var(--color-surface);
}
.pageXrayTable tr.userShowable:hover td.cpuBreakdownCell {
  background: var(--color-surface);
}

.cpuBreakdownTable {
  width: 100%;
  margin: 0;
  font-size: 0.875rem;
  border-collapse: collapse;
  table-layout: fixed;

  th, td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--color-border);
  }
  th {
    background: var(--color-surface-card);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
  }
  th:nth-child(1) { width: 22%; }
  th:nth-child(2),
  th:nth-child(3) { width: 31%; text-align: right; }
  th:nth-child(4) { width: 16%; text-align: right; }
  td:nth-child(1) { text-align: left; }
  td:nth-child(2),
  td:nth-child(3),
  td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
  tbody tr:last-child td { border-bottom: 0; }
  tbody tr:hover td { background: var(--color-blue-tint); }
}

/*
 * Pretty file-upload chip — styled to look like a small secondary
 * button. The native <input type="file"> stays visually hidden but
 * remains keyboard-accessible because the label is a real
 * <label for=...>.
 */
.inputfile {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;

  + label {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    /* Keep the chip away from the HAR1 / HAR2 column label text it
       sits next to. */
    margin-left: 10px;
    vertical-align: middle;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--motion-fast), color var(--motion-fast),
                border-color var(--motion-fast);

    &:hover,
    &:focus-visible {
      background: var(--color-blue-tint);
      color: var(--color-blue-dark);
      border-color: var(--color-info-border);
    }
  }

  &:focus-visible + label {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
  }
}

@media screen and (max-width: 720px) {
  /* On narrow screens, drop the Δ column to a smaller width so the
     two HAR columns keep most of the room — the diff is still useful
     but no longer dominant. */
  .tableXrayMetric    { width: 28%; }
  .tableXrayHarMetric,
  .tableXrayHar2Metric { width: 28%; }
  .tableXrayDiff      { width: 16%; font-size: 0.85rem; }
  .pageXrayCapture    { max-width: 100%; }
}

@media screen and (max-width: 400px) {
  select { max-width: 100%; }
}