/* ===== pe_matrix_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also what styles the designer
   canvas. Every rule is scoped :where(.pe-matrix) — :where() adds zero specificity, so it cannot
   change which rule wins.

   Six rules meet a .px-* rule of equal specificity, and a head-linked asset loses that tie to
   the dependency's injected px-theme-chrome block, so each of those rules gains one class
   (.px-table.pe-matrix-table th rather than .pe-matrix-table th). The others are doubled for
   consistency, so a reader never has to redo the arithmetic line by line.

   The colours and the glyph shapes come from .pe-status-glyph and .pe-info, which belong to the
   shell (portal_engagement_html). This form's designer canvas has no .pe-shell ancestor, so on the
   canvas the glyph key and the "?" buttons render unstyled. Tree, names and drag all work; it is
   the same limitation every RotaCloud child carries. */

/* px-card, px-card-header, px-table-wrap and px-table carry the frame,
   the sticky head and the row rules. Only what the adoption matrix
   genuinely needs differently lives here: a centred glyph grid, a
   tighter row, and the sticky home column. */
:where(.pe-matrix) .px-card-header.pe-matrix-header {
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
}
:where(.pe-matrix) .pe-matrix-title {
  margin: 0;
  display: flex;
  align-items: center;
}
:where(.pe-matrix) .pe-matrix-count {
  font-family: var(--px-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--px-text-muted);
}
:where(.pe-matrix) .pe-matrix-scroll {
  max-height: 460px;
  overflow-y: auto;
}
/* Print shows every row: the scroll box grows to its whole table. */
@media print {
  :where(.pe-matrix) .px-table-wrap.pe-matrix-scroll { max-height: none; overflow: visible; }
}
:where(.pe-matrix) .px-table.pe-matrix-table th,
:where(.pe-matrix) .px-table.pe-matrix-table td {
  text-align: center;
  padding: 0.5rem;
}
:where(.pe-matrix) .px-table.pe-matrix-table th {
  z-index: 2;
  font-size: 0.68rem;
}
/* The theme's .num right-aligns and tabular-figures the two numeric
   columns. On the head it also brings a bigger mono face, which would
   leave two headings out of step with the other nine, so the head keeps
   this table's own compact heading type. */
:where(.pe-matrix) .px-table.pe-matrix-table th.num {
  font-family: var(--px-font);
  font-size: 0.68rem;
}
:where(.pe-matrix) .px-table.pe-matrix-table td {
  font-size: 0.78rem;
  color: var(--px-text-secondary);
}
/* Doubling the two rules above lifted them to (0,2,1), one class above the
   theme's .px-table .num (0,2,0). These two make Patients and Composite
   right-aligned body
   text at the theme's 0.8rem. The head keeps this table's 0.68rem, which
   th.num above still sets at (0,3,1). */
:where(.pe-matrix) .px-table.pe-matrix-table .num {
  text-align: right;
}
:where(.pe-matrix) .px-table.pe-matrix-table td.num {
  font-size: 0.8rem;
}
:where(.pe-matrix) .px-table.pe-matrix-table th.pe-matrix-home-col {
  text-align: left;
  left: 0;
  z-index: 3;
}
:where(.pe-matrix) .pe-matrix-table td.pe-matrix-home-cell {
  text-align: left;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(.pe-matrix) .pe-matrix-table tbody tr {
  cursor: pointer;
}
:where(.pe-matrix) .px-table.pe-matrix-table tbody tr.is-highlight,
:where(.pe-matrix) .px-table.pe-matrix-table tbody tr.is-selected {
  background: var(--accent-subtle);
}
/* A 10% wash alone is not findable in a scrolling table, so a marked
   row also carries an edge. Selection is declared last and therefore
   wins the edge colour when a row is both. */
:where(.pe-matrix) .px-table.pe-matrix-table tbody tr.is-highlight {
  box-shadow: inset 3px 0 0 var(--accent-hover);
}
:where(.pe-matrix) .px-table.pe-matrix-table tbody tr.is-selected {
  box-shadow: inset 3px 0 0 var(--accent);
}
:where(.pe-matrix) .pe-matrix-name {
  font-weight: 600;
  color: var(--px-text-primary);
}
/* Score and patients are real columns, so they sort like everything
   else; the numeric
   alignment comes from .px-table .num in the theme. */
/* Colour and shape come from .pe-status-glyph in the parent template. */
:where(.pe-matrix) .pe-cell {
  width: 22px;
  height: 22px;
  font-size: 0.8rem;
  cursor: help;
}
:where(.pe-matrix) .pe-cell.awaiting {
  font-size: 0.7rem;
}
:where(.pe-matrix) .pe-matrix-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 0.7rem 1.25rem;
  border-top: 1px solid var(--px-border);
  font-family: var(--px-font);
  font-size: 0.72rem;
  color: var(--px-text-muted);
}
:where(.pe-matrix) .pe-matrix-key span.item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
:where(.pe-matrix) .px-empty-state.pe-matrix-empty { display: none; }
:where(.pe-matrix.is-empty) .pe-matrix-scroll { display: none; }
:where(.pe-matrix.is-empty) .px-empty-state.pe-matrix-empty { display: flex; }