/* Tests table panel — kit `testsTable` (name | status | trend | stability) */

@import url("sparkline.css");
@import url("stability-cell.css");

/* Fill tile body (widget-tile__body centers children by default). */
.widget-tile__body > .tests-table-panel {
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.tests-table-panel {
  overflow: hidden;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: tests-table;
}

.tests-table-panel__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--font-size-sm);
}

.tests-table-panel__table th,
.tests-table-panel__table td {
  padding: 6px var(--space-2);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  overflow: hidden;
  text-align: left;
}

/* One alignment per column — th and td share the same track + start edge. */
.tests-table-panel__table th.tests-table-panel__name,
.tests-table-panel__table td.tests-table-panel__name,
.tests-table-panel__table th.tests-table-panel__status,
.tests-table-panel__table td.tests-table-panel__status,
.tests-table-panel__table th.tests-table-panel__trend,
.tests-table-panel__table td.tests-table-panel__trend,
.tests-table-panel__table th.tests-table-panel__stability,
.tests-table-panel__table td.tests-table-panel__stability {
  text-align: left;
}

.tests-table-panel__table thead tr {
  height: 28px;
}

.tests-table-panel__table tbody tr {
  height: 32px;
}

.tests-table-panel__table th {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Adaptive column ladder (panel inline-size ≈ tile width − 2px; see tests-table-adaptive.html):
 *   ≤196px (#1–3)  TEST + STATUS
 *   197–249px (#4) + TREND
 *   250–479px (#5–9) all four — name may ellipsis
 *   ≥480px (#10 / wide) Test:Status:Trend:Stability ≈ 36:28:18:18
 *
 * Width intent: on a wide tile the three trailing columns sit left of a ~36% name
 * track (not content-capped against the right edge). Status still fits RU/EN
 * badges (ПРОЙДЕН / НЕИЗВЕСТЕН / PASSED). Hidden columns must also zero matching
 * `col` widths (table-layout:fixed still allocates % to cols whose cells are
 * display:none).
 */
.tests-table-panel__table col.tests-table-panel__name {
  width: 28%;
}

.tests-table-panel__table col.tests-table-panel__status {
  width: 40%;
}

.tests-table-panel__table th.tests-table-panel__status,
.tests-table-panel__table td.tests-table-panel__status {
  width: 40%;
}

.tests-table-panel__table col.tests-table-panel__trend {
  width: 20%;
}

.tests-table-panel__table col.tests-table-panel__stability {
  width: 12%;
}

/* #1–3 / ≤196px — TEST + STATUS only */
@container tests-table (max-width: 196px) {
  .tests-table-panel__table th.tests-table-panel__trend,
  .tests-table-panel__table td.tests-table-panel__trend,
  .tests-table-panel__table th.tests-table-panel__stability,
  .tests-table-panel__table td.tests-table-panel__stability {
    display: none;
  }

  .tests-table-panel__table col.tests-table-panel__name {
    width: 55%;
  }

  .tests-table-panel__table col.tests-table-panel__status {
    width: 45%;
  }

  .tests-table-panel__table th.tests-table-panel__status,
  .tests-table-panel__table td.tests-table-panel__status {
    width: 45%;
  }

  .tests-table-panel__table col.tests-table-panel__trend,
  .tests-table-panel__table col.tests-table-panel__stability {
    width: 0%;
  }
}

/* #4 / 197–249px — + TREND (252px tile → ~250px panel; nsts from 250px panel) */
@container tests-table (min-width: 197px) and (max-width: 249px) {
  .tests-table-panel__table th.tests-table-panel__stability,
  .tests-table-panel__table td.tests-table-panel__stability {
    display: none;
  }

  .tests-table-panel__table col.tests-table-panel__name {
    width: 38%;
  }

  .tests-table-panel__table col.tests-table-panel__status {
    width: 34%;
  }

  .tests-table-panel__table th.tests-table-panel__status,
  .tests-table-panel__table td.tests-table-panel__status {
    width: 34%;
  }

  .tests-table-panel__table col.tests-table-panel__trend {
    width: 28%;
  }

  .tests-table-panel__table col.tests-table-panel__stability {
    width: 0%;
  }
}

/* #10 / ≥480px — Status must fit RU/EN badges (ПРОЙДЕН / PASSED), not 4:2:2:2 */
@container tests-table (min-width: 480px) {
  .tests-table-panel__table col.tests-table-panel__name {
    width: 36%;
  }

  .tests-table-panel__table col.tests-table-panel__status {
    width: 28%;
  }

  .tests-table-panel__table th.tests-table-panel__status,
  .tests-table-panel__table td.tests-table-panel__status {
    width: 28%;
  }

  .tests-table-panel__table col.tests-table-panel__trend {
    width: 18%;
  }

  .tests-table-panel__table col.tests-table-panel__stability {
    width: 18%;
  }
}
.tests-table-panel__table tbody tr:last-child td {
  border-bottom: none;
}

.tests-table-panel__table tbody tr:hover td {
  background: color-mix(in srgb, var(--color-border) 35%, transparent);
}

/* Name column: ellipsis on overflow (no max-width:0 — collapses column in table-layout:fixed). */
.tests-table-panel__table th.tests-table-panel__name,
.tests-table-panel__table td.tests-table-panel__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Trend sparkline fills the content box (preserveAspectRatio=none on the SVG). */
.tests-table-panel__trend .sparkline.sparkline--duration {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

/* Badge must size to the RU/EN label — ellipsis fails kit smoke (scrollWidth). */
.tests-table-panel__status .badge {
  display: inline-block;
  box-sizing: border-box;
  max-width: none;
  margin: 0;
  padding-inline: var(--space-2);
  overflow: visible;
  text-overflow: clip;
  vertical-align: middle;
}

.tests-table-panel__stability .stability-cell {
  justify-content: flex-start;
  width: max-content;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
}

/* Narrow tile (e.g. collage 2×2 ~140px): compact type — column ladder above owns widths. */
@container tests-table (max-width: 220px) {
  .tests-table-panel__table {
    font-size: 0.625rem;
    line-height: 1.15;
  }

  .tests-table-panel__table thead tr {
    height: 18px;
  }

  .tests-table-panel__table tbody tr {
    height: 20px;
  }

  .tests-table-panel__table th,
  .tests-table-panel__table td {
    padding: 2px 4px;
  }

  .tests-table-panel .badge {
    font-size: 0.55rem;
    padding: 0 3px;
    line-height: 1.1;
    font-weight: 600;
  }
}

/* —— Footprint tiers (palette micro = builder anb-palette__tile canon) —— */
.widget-tile--tier-micro {
  --wt-pad: 4px;
  --wt-bar-height: 22px;
}

.widget-tile--tier-micro .tests-table-panel {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}

/* Tile chrome is the only frame — no nested panel border inside widget-tile. */
.widget-tile__body > .tests-table-panel,
.widget-tile__body > .tests-table-panel--palette {
  border: none;
  border-radius: 0;
  background: transparent;
}

.widget-tile--tier-micro .tests-table-panel__table thead,
.tests-table-host--tier-micro .tests-table-panel__table thead {
  display: none;
}

.widget-tile--tier-micro .tests-table-panel__table,
.tests-table-host--tier-micro .tests-table-panel__table {
  font-size: 0.38rem;
  line-height: 1;
  table-layout: fixed;
}

.widget-tile--tier-micro .tests-table-panel__table tbody tr,
.tests-table-host--tier-micro .tests-table-panel__table tbody tr {
  height: 1.1em;
}

.widget-tile--tier-micro .tests-table-panel__table th,
.widget-tile--tier-micro .tests-table-panel__table td,
.tests-table-host--tier-micro .tests-table-panel__table td {
  padding: 0 1px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.widget-tile--tier-micro .tests-table-panel__table tbody tr:last-child td,
.tests-table-host--tier-micro .tests-table-panel__table tbody tr:last-child td {
  border-bottom: none;
}

.widget-tile--tier-micro .tests-table-panel__name,
.tests-table-panel--palette .tests-table-panel__name {
  width: 34%;
  max-width: 34%;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-tile--tier-micro .tests-table-panel__table col.tests-table-panel__name {
  width: 34%;
}

.widget-tile--tier-micro .tests-table-panel__table col.tests-table-panel__status {
  width: 10%;
}

.widget-tile--tier-micro .tests-table-panel__table col.tests-table-panel__trend {
  width: 34%;
}

.widget-tile--tier-micro .tests-table-panel__table col.tests-table-panel__stability {
  width: 22%;
}

.widget-tile--tier-micro .tests-table-panel__status {
  width: 10%;
  text-align: center;
}

.widget-tile--tier-micro .tests-table-panel__trend {
  width: 34%;
  padding-right: 1px;
}

.widget-tile--tier-micro .tests-table-panel__stability {
  width: 22%;
}

.widget-tile--tier-micro .tests-table-panel__status .indicator,
.tests-table-panel--palette .tests-table-panel__status .indicator {
  --indicator-size: 4px;
  display: inline-block;
  vertical-align: middle;
}

.widget-tile--tier-micro .tests-table-panel .badge,
.tests-table-panel--palette .tests-table-panel .badge {
  display: none;
}

.widget-tile--tier-micro .sparkline--empty,
.tests-table-panel--palette .sparkline--empty {
  display: none;
}

.widget-tile--tier-micro .tests-table-panel .sparkline {
  display: block;
  width: 100%;
  max-width: none;
  height: 5px;
  max-height: 5px;
}

.widget-tile--tier-micro .tests-table-panel .sparkline.sparkline--duration {
  overflow: hidden;
  width: 100%;
  height: 5px;
  max-height: 5px;
}

.widget-tile--tier-micro .tests-table-panel .stability-cell {
  gap: 1px;
  min-height: 0;
}

.widget-tile--tier-micro .tests-table-panel .stability-dots {
  gap: 1px;
}

.widget-tile--tier-micro .tests-table-panel .stability-dot {
  width: 3px;
  height: 3px;
}

.widget-tile--tier-micro .tests-table-panel .badge--flaky {
  font-size: 0.34rem;
  padding: 0 1px;
  min-width: 0;
}

.widget-tile--tier-compact .tests-table-panel__table col.tests-table-panel__name,
.tests-table-host--tier-compact .tests-table-panel__table col.tests-table-panel__name {
  width: 22%;
}

.widget-tile--tier-compact .tests-table-panel__table col.tests-table-panel__status,
.tests-table-host--tier-compact .tests-table-panel__table col.tests-table-panel__status {
  width: 26%;
}

.widget-tile--tier-compact .tests-table-panel__table col.tests-table-panel__trend,
.tests-table-host--tier-compact .tests-table-panel__table col.tests-table-panel__trend {
  width: 28%;
}

.widget-tile--tier-compact .tests-table-panel__table col.tests-table-panel__stability,
.tests-table-host--tier-compact .tests-table-panel__table col.tests-table-panel__stability {
  width: 24%;
}

.widget-tile--tier-compact .tests-table-panel__table,
.tests-table-host--tier-compact .tests-table-panel__table {
  font-size: 0.625rem;
  line-height: 1.15;
}

.widget-tile--tier-compact .tests-table-panel__table thead tr,
.tests-table-host--tier-compact .tests-table-panel__table thead tr {
  height: 18px;
}

.widget-tile--tier-compact .tests-table-panel__table tbody tr,
.tests-table-host--tier-compact .tests-table-panel__table tbody tr {
  height: 20px;
}

.widget-tile--tier-compact .tests-table-panel__table th,
.widget-tile--tier-compact .tests-table-panel__table td,
.tests-table-host--tier-compact .tests-table-panel__table th,
.tests-table-host--tier-compact .tests-table-panel__table td {
  padding: 2px 4px;
}

.widget-tile--tier-compact .tests-table-panel .badge,
.tests-table-host--tier-compact .tests-table-panel .badge {
  font-size: 0.55rem;
  padding: 0 3px;
  line-height: 1.1;
  font-weight: 600;
}

.tests-table-panel__empty {
  margin: 0;
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.tests-table-panel .badge--status-passed {
  background: color-mix(in srgb, var(--color-success) 22%, transparent);
  color: var(--color-success);
}

.tests-table-panel .badge--status-failed {
  background: color-mix(in srgb, var(--color-danger) 22%, transparent);
  color: var(--color-danger);
}

.tests-table-panel .badge--status-broken {
  background: color-mix(in srgb, var(--color-warning) 22%, transparent);
  color: var(--color-warning);
}

.tests-table-panel .badge--status-skipped,
.tests-table-panel .badge--status-unknown {
  background: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
  color: var(--color-text-muted);
}