/*
 * mlp-table styles. Import after platform.css — reuses its tokens and its existing
 * .table-scroll/.data-table rules (already styled for mlp-platform's own admin pages) for the
 * table itself, adding rules only for what those hand-written uses never needed: a whole row
 * acting as a single navigation target, plus the newer cell types below (menu, pill) that have
 * their own real markup to style (see mlp-framework docs/table-cells.md for the full taxonomy).
 * A `menu` cell's own popover styling (.dropdown-anchor, .mlp-dropdown-menu) lives in
 * platform.css/mlp-dropdown-menu.css instead, not duplicated here — both are already loaded on
 * every page this library's own script runs on.
 */

.data-table tbody tr[data-href] {
  cursor: pointer;
}

.data-table tbody tr[data-href]:hover {
  background: var(--c-accent-wash);
}

/* The "Rows 1-20 of 254" readout (render-table.js's renderRowCount) — a plain block element,
 * left-aligned above a paginated table by default. A page that redirects it elsewhere via
 * `data-count-target` (see index.js) still gets this look wherever it lands, since the target
 * element is expected to carry this same class — mlp-app-wardrobe's filter bar does. Sized to
 * match `.button`'s own inherited `--t-base` rather than the smaller `--t-sm` most muted text
 * in this app uses, since it's meant to read as part of that same toolbar, not a caption.
 *
 * `display: flex; align-items: center` centers the text vertically within this element's own
 * box — a no-op above the table (the box is exactly the text's own line height there), but
 * load-bearing wherever the target lives inside another flex row with taller siblings (a
 * `.filter-bar` with `.button`s, say): a flex child normally *stretches* to the row's full
 * height by default, and plain text inside a taller box sits at its top, not centered,
 * without this. */
.table-row-count {
  display: flex;
  align-items: center;
  margin: 0 0 var(--s-2);
  color: var(--c-text-muted);
  font-size: var(--t-base);
}

/* Prev/Next plus up to three page-number buttons (renderPaginationControls), centered below
 * the table — deliberately not space-between the way an early version had it, so it doesn't
 * visually pair with the row count above the table into a single mismatched unit. */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* A `data-search-target` input — authored by the page itself, not rendered by this library (see
 * index.js's module doc comment for why), but still expected to carry this class for a
 * consistent look wherever it's placed. Mirrors `.field input[type='text']` in platform.css
 * (same border/radius/padding tokens) rather than introducing a differently-shaped text input,
 * just without requiring the `.field` wrapper a labeled form field needs. */
.table-search {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface-raised);
  color: var(--c-text);
  font: inherit;
}

.table-search::placeholder {
  color: var(--c-text-muted);
}

/* A sortable column's header button (render-table.js's renderHeaderCell) — reset to look like
 * plain `.data-table th` text (buttons don't inherit font/color from an ancestor by default the
 * way most elements do, so every one of these is spelled out explicitly rather than assumed),
 * with just enough affordance (pointer cursor, a hover color) to read as clickable. */
.table-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.table-sort:hover {
  color: var(--c-text);
}

/* An `image` cell's thumbnail (render-table.js's renderImageCell) — a fixed box regardless of
 * the source image's own dimensions, cropped to fill it via `object-fit: cover` rather than
 * letting a differently-shaped source distort or grow the cell. `--empty` renders for a row
 * with no image at all (deliberately never a bare `<img>` with no `src`, which paints a broken-
 * image icon in every browser) — same box, same radius, just a flat muted fill instead of a
 * photo, so a column of mixed rows still reads as one consistent grid. */
.table-image {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--c-surface-raised);
}

.table-image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--c-border-strong);
  /* `--c-surface-raised` sits close enough to the surrounding dark-theme background that a bare
   * box (no icon, a muted-on-muted dashed border) read as an unintentional black square rather
   * than a deliberate "no photo" placeholder — the icon (fill="currentColor", so this is also
   * what colors it) is what actually fixes that, in both themes, not just a contrast tweak. */
  color: var(--c-text-muted);
}

/* A `pill` cell's badge (render-table.js's renderPillCell/hashToPaletteIndex, LIB-30) — a small
 * rounded, colored, non-interactive label. `--radius-pill` already existed in platform.css
 * before this had a real consumer. Color always comes from one of the 8 fixed `--N` classes
 * below, hashed from the value itself — never an inline `style=`, which mlp-platform's CSP
 * (`style-src 'self'`) blocks outright, the same constraint every other cell type here already
 * has to work within (see mlp-app-wardrobe's own WARD-36 for the real bug that convention
 * exists to avoid repeating). */
.table-pill {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: var(--radius-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* Eight hand-picked hues, not derived from the platform's own semantic tokens (--c-accent/
 * --c-success/--c-warning/--c-danger) despite some overlap in actual color — a pill's color is
 * purely a categorical distinguisher (this badge != that badge), never a semantic signal
 * ("this is dangerous"), so tying the two together would risk implying a meaning that was never
 * intended. Each pair here is tuned for its own theme independently, the same "not just a
 * lightened copy of the light value" approach the semantic tokens themselves already use in
 * their own dark-mode block above. */
.table-pill--0 { background: #eaf0fc; color: #2c62d6; }
.table-pill--1 { background: #e6f4ec; color: #1f7a44; }
.table-pill--2 { background: #fbf1de; color: #8a5a00; }
.table-pill--3 { background: #fbeae9; color: #b3261e; }
.table-pill--4 { background: #f1e8fb; color: #6b3fa0; }
.table-pill--5 { background: #e1f5f5; color: #0f766e; }
.table-pill--6 { background: #fce8f3; color: #a3226b; }
.table-pill--7 { background: #eef0f2; color: #4b5563; }

@media (prefers-color-scheme: dark) {
  .table-pill--0 { background: #1b2434; color: #7aa2ff; }
  .table-pill--1 { background: #16281f; color: #6fcf97; }
  .table-pill--2 { background: #2b2214; color: #e3b263; }
  .table-pill--3 { background: #2e1a18; color: #f08579; }
  .table-pill--4 { background: #241b33; color: #c3a6ea; }
  .table-pill--5 { background: #12292a; color: #5fd1c8; }
  .table-pill--6 { background: #2c1826; color: #f0a8d4; }
  .table-pill--7 { background: #262b31; color: #b3bcc7; }
}