/* ===== test_card_row_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. Anvil's server strips a
   <style> block out of an HTML template, so the form's rules live here.

   The form root is <div class="tab-row pcs-tab-row">. A rule whose SUBJECT is
   the root keeps both classes (.tab-row.pcs-tab-row) so it wins on weight
   rather than on document order, which a head link does not control. A rule
   that names the root as an ANCESTOR uses the private .pcs-tab-row, which
   keeps its class count; it cannot be wrapped in
   :where(.pcs-tab-row) because .tab-row IS the root and would then have to be a
   descendant of itself. Everything else is :where(.pcs-tab-row)-scoped, which
   adds zero specificity.

   The chip base (.tab-chip) and the three state fills (-draft, -published,
   -archived) are NOT here: they were declared byte-equal in this form and in
   status_chip_html, and two head links would make which copy wins depend on
   link order. They live once in training.css. Only this form's own three fills
   stay, scoped so they cannot reach the standalone chip. */

.tab-row.pcs-tab-row {
  display: grid;
/* 9 columns — IDENTICAL declarations to the header in
   t_px_tests_html so header labels align with body cells.
   Inner columns use minmax(content-floor, max-content) so each
   grid (header + every row) clamps to the same value: the floor
   is the WIDEST content that column ever renders, which equals
   the binding constraint in both grids and prevents drift.
   Title + Actions are 1fr-flexible (absorb spare horizontal
   space). Combined with tightened gap and padding the row's
   minimum width is ~1003px — fits ≥1024px viewports cleanly.
   Keep these in sync with t_px_tests_html .tab-tests-thead. */
  grid-template-columns:
    minmax(130px, 1fr)         /* Title (flex) */
    minmax(85px, max-content)  /* State chip */
    minmax(95px, max-content)  /* Required chip */
    minmax(80px, max-content)  /* Pass mark */
    minmax(55px, max-content)  /* Time */
    minmax(75px, max-content)  /* Expiry */
    minmax(80px, max-content)  /* Pass rate */
    minmax(95px, max-content)  /* Last edited */
    minmax(220px, 1fr);        /* Actions (flex) */
  gap: 8px;
  align-items: center;
  padding: 12px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #0f172a;
}
.tab-row.pcs-tab-row:hover { background: #f8fafc; }

:where(.pcs-tab-row) .tab-row-title {
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* State + Required chips — class names match status_chip_html (#39).
   .tab-chip and the -draft / -published / -archived fills are in training.css. */
:where(.pcs-tab-row) .tab-chip-required  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
:where(.pcs-tab-row) .tab-chip-optional  { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
:where(.pcs-tab-row) .tab-chip-unknown   { background: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db; }

:where(.pcs-tab-row) .tab-row-cell {
  color: #334155;
  font-size: 13px;
  white-space: nowrap;
}

/* Actions cell — guaranteed 2+2 stacking when the cell is narrow,
   flipping to all-four-in-one-row at wider viewports. CSS Grid
   with explicit column counts (rather than flex-wrap) so the
   break is always between Preview and Publish, never 3+1 or 1+3.
   The wide-viewport flip is keyed on viewport width because the
   row template doesn't declare container-type: inline-size.
   Breakpoint raised from 1200px to 1400px so the comfortable 2+2
   layout covers common laptop widths (1366/1440) — only desktop
   monitors get the single-row layout. */
:where(.pcs-tab-row) .tab-row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  justify-content: start;
}
@media (min-width: 1400px) {
  :where(.pcs-tab-row) .tab-row-actions {
    grid-template-columns: repeat(4, auto);
  }
}
:where(.pcs-tab-row) .tab-row-btn {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #334155;
  cursor: pointer;
  min-height: 28px;
}
:where(.pcs-tab-row) .tab-row-btn:hover { background: #e2e8f0; }
:where(.pcs-tab-row) .tab-row-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
:where(.pcs-tab-row) .tab-row-btn-edit { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
:where(.pcs-tab-row) .tab-row-btn-edit:hover { background: #dbeafe; }

/* Cards layout (breakpoint at 1023px specifically for this table
   — the rest of PCS still uses 768px for its own mobile-stacking
   rules). Each row collapses into a self-contained card:
     [Title (large)] [State chip] [Required chip]
     Pass mark: 80%
     Time:      30 min
     Expiry:    never
     Pass rate: —
     Last edited: today
     [Edit] [Preview] [Publish] [Archive]
   The header in t_px_tests_html is hidden at this breakpoint;
   per-cell labels are rendered via ::before pseudo-elements from
   the data-label attribute on each numeric cell. Raised from
   768px because the table's content floors sum to ~1003px —
   below that the row would silently clip against overflow:hidden. */
@media (max-width: 1023px) {
  .tab-row.pcs-tab-row {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "title    state     required"
      "passmark passmark  passmark"
      "time     time      time"
      "expiry   expiry    expiry"
      "passrate passrate  passrate"
      "edited   edited    edited"
      "actions  actions   actions";
    gap: 8px 12px;
    align-items: center;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin: 0 0 12px 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .pcs-tab-row [data-cell="title"]       { grid-area: title;    font-size: 16px; white-space: normal; }
  .pcs-tab-row [data-cell="state"]       { grid-area: state;    }
  .pcs-tab-row [data-cell="required"]    { grid-area: required; }
  .pcs-tab-row [data-cell="pass-mark"]   { grid-area: passmark; }
  .pcs-tab-row [data-cell="time"]        { grid-area: time;     }
  .pcs-tab-row [data-cell="expiry"]      { grid-area: expiry;   }
  .pcs-tab-row [data-cell="pass-rate"]   { grid-area: passrate; }
  .pcs-tab-row [data-cell="last-edited"] { grid-area: edited;   }
  .pcs-tab-row [data-cell="actions"]     { grid-area: actions; justify-content: flex-start; }
  /* Mobile keeps the original flex-wrap layout (desktop switched
     .tab-row-actions to a 2x2 grid — that change applies only
     above the mobile breakpoint). */
  :where(.pcs-tab-row) .tab-row-actions {
    display: flex;
    flex-wrap: wrap;
  }

  /* Inline label for numeric cells. Title + chip wrappers have no
     data-label so they render label-less (the title is the card's
     heading; chips are self-describing colour + text). */
  .pcs-tab-row [data-label]::before {
    content: attr(data-label) ": ";
    display: inline-block;
    min-width: 110px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Bigger tap targets on mobile; allow buttons to wrap. */
  :where(.pcs-tab-row) .tab-row-btn {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 13px;
  }
}