/* ---------------------------------------------------------------------------
   <pm-live-table>: the windowed live grid (PMD-UI-002). The element sets
   --pm-lt-row-h from its density (36px comfortable, 28px dense, or
   --density-row when the page sets one); the height of the scroll area is
   --pm-lt-height. Colours are the tokens only.
   --------------------------------------------------------------------------- */
/* The row height follows the Density setting (--density-row on <body>, tokens.css). */
pm-live-table { display: block; position: relative; --pm-lt-row-h: var(--density-row, 36px); }
pm-live-table[density="dense"] { --pm-lt-row-h: 28px; font-size: 0.75rem; }

.pm-lt-tools { position: relative; display: flex; justify-content: flex-end; padding-bottom: var(--space-2); }
.pm-lt-cols-btn {
  min-height: 32px;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pm-lt-cols-btn:hover { background: var(--color-surface-raised); }

.pm-lt-chooser {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  min-width: 220px;
  max-height: 320px;
  overflow: auto;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pm-lt-chooser[hidden] { display: none; }
.pm-lt-chooser-title { margin: 0 0 var(--space-1); font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary); }
.pm-lt-chooser-list { list-style: none; margin: 0; padding: 0; }
.pm-lt-chooser-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 32px; }
.pm-lt-chooser-list label { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; color: var(--color-text); font-size: 0.85rem; }
.pm-lt-chooser-move { display: inline-flex; gap: var(--space-1); }
.pm-lt-chooser-move button {
  min-width: 28px;
  min-height: 28px;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pm-lt-chooser-move button:disabled { opacity: 0.4; cursor: default; }
.pm-lt-chooser-note { margin: var(--space-1) 0 0; font-size: 0.75rem; color: var(--color-warning); }
.pm-lt-chooser-note:empty { display: none; }

.pm-lt-scroll {
  position: relative;
  height: var(--pm-lt-height, 480px);
  overflow: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pm-lt-spacer { width: 1px; }

.pm-lt-table {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.pm-lt-table th,
.pm-lt-table td {
  box-sizing: border-box;
  height: var(--pm-lt-row-h);
  padding: 0 var(--space-2);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.pm-lt-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
}
.pm-lt-table td.is-sticky { position: sticky; z-index: 1; background: var(--color-bg); }
.pm-lt-table thead th.is-sticky { z-index: 3; }
.pm-lt-table tbody tr:hover td { background: var(--color-surface); }
.pm-lt-table .pm-num { text-align: right; font-variant-numeric: tabular-nums; }
.pm-lt-table .is-center { text-align: center; }

.pm-lt-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 8px);
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.pm-lt-sort:hover { color: var(--color-text); }
.pm-lt-sort-arrow { font-size: 0.7em; opacity: 0.45; }
.pm-lt-sort-arrow::after { content: '\2195'; }
th[aria-sort="ascending"] .pm-lt-sort-arrow, th[aria-sort="descending"] .pm-lt-sort-arrow { opacity: 1; }
th[aria-sort="ascending"] .pm-lt-sort-arrow::after { content: '\25B2'; }
th[aria-sort="descending"] .pm-lt-sort-arrow::after { content: '\25BC'; }

.pm-lt-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; }
.pm-lt-resize:hover, .pm-lt-resize:focus-visible { background: color-mix(in srgb, var(--color-accent) 40%, transparent); }

.pm-lt-cols-btn:focus-visible,
.pm-lt-sort:focus-visible,
.pm-lt-resize:focus-visible,
.pm-lt-cell:focus-visible,
.pm-lt-chooser button:focus-visible,
.pm-lt-chooser input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* A changed cell flashes once, as .is-flash does in the cockpit. */
.pm-lt-cell.is-flash { animation: pm-lt-flash 600ms ease-out; }
@keyframes pm-lt-flash { from { background: color-mix(in srgb, var(--color-accent) 28%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .pm-lt-cell.is-flash { animation: none; } }

/* Below 640px: a card per row, each value named beside it, as .rtable does.
   A card is a fixed height (one line per column) so the window still works. */
pm-live-table.is-cards .pm-lt-table { display: block; width: 100% !important; table-layout: auto; }
pm-live-table.is-cards thead,
pm-live-table.is-cards colgroup { display: none; }
pm-live-table.is-cards tbody { display: block; }
pm-live-table.is-cards tbody tr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  height: var(--pm-lt-row-h);
  padding: 12px var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
pm-live-table.is-cards td {
  position: static;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  height: 22px;
  padding: 0;
  border: none;
  text-align: right;
}
pm-live-table.is-cards td::before {
  content: attr(data-label);
  flex: none;
  text-align: left;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
pm-live-table.is-cards td[data-primary] { justify-content: flex-start; text-align: left; font-weight: 600; }
pm-live-table.is-cards td[data-primary]::before { content: none; }