/* =============================================================================
   rhq_table.css — ResponderHQ table & filter primitives (Phase 1 / P1.5)
   -----------------------------------------------------------------------------
   The ONE themed table skin (table-system.md). One card shell, four variants
   (data-list · management · sectioned · matrix) — every table-heavy screen is a
   *configuration* of this, never a bespoke build.

   Phase 1 / PR P1.5 — ADDITIVE ONLY.
     * EVERY selector is scoped under `.rhq-dt`, `.rhq-dt-section`, or `.rhq-dt-mx`
       — all three tokens verified UNUSED in the app today (the existing
       `.rhq-dt-viewport-*` family is a different token and is NOT matched by
       `.rhq-dt`). Loading this sheet changes ZERO rendered pixels on existing pages
       and cannot leak into legacy `.table` / DataTables markup.
     * Reuses the design system rather than re-inventing it:
         - status cells → P1.2 `.rhq-badge` (templates/components/_status.html)
         - empty/loading/error → P1.4 state components (_state.html / _banner.html)
         - skeleton shimmer → P1.4 `.rhq-skeleton`
       so there is no duplicate badge/skeleton CSS here.
     * No DataTables wiring, no FixedColumns/Responsive init, and the global
       `RHQ.dtShowAll` default is untouched — existing tables keep their behaviour.
       The DataTables initialiser is Phase-5 migration work.
     * Data-driven colours (readiness pill, roster swatch) take their colour from
       DATA via inline style — never a token (BD10). The org-palette contrast
       constraint (BR1) is the caller's responsibility.

   Markup that consumes these classes lives in templates/components/_table.html.
   No existing screen consumes them yet (migration is Phase 5).
   ============================================================================= */

/* ---- Card shell ----------------------------------------------------------- */
.rhq-dt,
.rhq-dt-mx {
  font-family: var(--rhq-font);
  color: var(--rhq-text);
  background: var(--rhq-surface);
  border: 1px solid var(--rhq-border);
  border-radius: var(--rhq-radius-lg);
  box-shadow: var(--rhq-shadow-sm);
  overflow: hidden;
}

/* ---- Header (title · count · actions) ------------------------------------- */
.rhq-dt__header {
  display: flex;
  align-items: center;
  gap: var(--rhq-space-3);
  padding: var(--rhq-space-3) var(--rhq-space-4);
  border-bottom: 1px solid var(--rhq-border-soft);
  flex-wrap: wrap;
}
.rhq-dt__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--rhq-font-weight-heading);
  color: var(--rhq-text-strong);
  letter-spacing: -0.01em;
}
.rhq-dt__count { color: var(--rhq-text-muted); font-weight: 500; font-size: var(--rhq-text-size-sm); }
.rhq-dt__header-actions { margin-left: auto; display: flex; gap: var(--rhq-space-2); flex-wrap: wrap; }

/* ---- Toolbar: search + filter toggles ------------------------------------- */
.rhq-dt__toolbar {
  display: flex;
  align-items: center;
  gap: var(--rhq-space-3);
  padding: var(--rhq-space-3) var(--rhq-space-4);
  border-bottom: 1px solid var(--rhq-border-soft);
  flex-wrap: wrap;
}
.rhq-dt__search {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: var(--rhq-space-2);
  border: 1px solid var(--rhq-border);
  border-radius: var(--rhq-radius);
  padding: 0.4375rem 0.6875rem;
}
.rhq-dt__search svg { flex: none; color: var(--rhq-text-faint); }
.rhq-dt__search input {
  border: none; outline: none; flex: 1; min-width: 0;
  font: inherit; font-size: var(--rhq-text-size-sm); color: var(--rhq-text-strong); background: none;
}
.rhq-dt__filter {
  display: inline-flex; align-items: center; gap: var(--rhq-space-2);
  border: 1px solid var(--rhq-border); border-radius: var(--rhq-radius);
  padding: 0.4375rem 0.6875rem;
  font: inherit; font-weight: 600; font-size: 0.75rem; color: var(--rhq-text);
  background: var(--rhq-surface); cursor: pointer; white-space: nowrap;
}
.rhq-dt__filter:hover { border-color: var(--rhq-text-faint); color: var(--rhq-text-strong); }
.rhq-dt__filter--on { border-color: var(--rhq-color-primary); color: var(--rhq-color-primary); background: var(--rhq-status-info-soft); }

/* ---- Active-filter chips -------------------------------------------------- */
.rhq-dt__chips {
  display: flex; align-items: center; gap: var(--rhq-space-2);
  padding: var(--rhq-space-2) var(--rhq-space-4);
  border-bottom: 1px solid var(--rhq-border-soft);
  background: var(--rhq-surface-muted);
  flex-wrap: wrap;
}
.rhq-dt__chips-label { font-size: 0.6875rem; color: var(--rhq-text-muted); font-weight: 600; }
.rhq-dt__chip {
  display: inline-flex; align-items: center; gap: var(--rhq-space-2);
  border: 1px solid #bcd4fb;
  background: var(--rhq-status-info-soft); color: var(--rhq-status-info-ink);
  border-radius: var(--rhq-radius-pill);
  padding: 0.1875rem 0.375rem 0.1875rem 0.625rem;
  font-size: 0.71875rem; font-weight: 600;
}
.rhq-dt__chip-remove {
  border: none; background: none; color: inherit; cursor: pointer;
  width: 1rem; height: 1rem; border-radius: 50%; display: grid; place-items: center; padding: 0;
}
.rhq-dt__chip-remove:hover { background: rgba(0, 97, 242, 0.15); }
.rhq-dt__chip-remove:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.rhq-dt__clear {
  border: none; background: none; padding: 0; margin-left: var(--rhq-space-1);
  font: inherit; font-size: 0.71875rem; font-weight: 700; color: var(--rhq-color-primary);
  cursor: pointer; text-decoration: underline;
}
.rhq-dt__clear:focus-visible { outline: 2px solid var(--rhq-focus-ring); outline-offset: 2px; border-radius: 3px; }

/* ---- Scroll region + table ------------------------------------------------ */
.rhq-dt__scroll { overflow: auto; }
.rhq-dt__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* 12.5px Light — data cells stay quiet; emphasis belongs to the name link and
     badges (review feedback on the first migrated screen, 2026-08-10). */
  font-size: 0.78125rem;
  font-weight: 300;
}
/* Visually-hidden caption naming the table (accessibility). */
.rhq-dt__table caption {
  position: absolute; left: -9999px; height: 0; overflow: hidden; padding: 0; text-align: left;
}
.rhq-dt__table th,
.rhq-dt__table td { padding: 0.5625rem 0.8125rem; text-align: left; white-space: nowrap; }
.rhq-dt__table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--rhq-surface-sunken);
  color: var(--rhq-text-muted);
  font-size: 0.65625rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  border-bottom: 1px solid var(--rhq-border);
}
.rhq-dt__table tbody td { border-bottom: 1px solid var(--rhq-border-soft); color: var(--rhq-text); }
.rhq-dt__table tbody tr:nth-child(even) td { background: var(--rhq-surface-muted); }
.rhq-dt__table tbody tr:hover td { background: var(--rhq-status-info-soft); }

/* Frozen identity column — pinned, never scrolls (FixedColumns equivalent). */
.rhq-dt__frz {
  position: sticky; left: 0; z-index: 1;
  background: var(--rhq-surface);
  box-shadow: 1px 0 0 var(--rhq-border-soft);
  font-weight: 500; color: var(--rhq-text-strong);
}
.rhq-dt__table thead th.rhq-dt__frz { z-index: 3; background: var(--rhq-surface-sunken); }
.rhq-dt__table tbody tr:nth-child(even) td.rhq-dt__frz { background: var(--rhq-surface-muted); }
.rhq-dt__table tbody tr:hover td.rhq-dt__frz { background: var(--rhq-status-info-soft); }
.rhq-dt__num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---- Row-detail expander -------------------------------------------------- */
.rhq-dt__expander {
  width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--rhq-border); background: var(--rhq-surface);
  border-radius: var(--rhq-radius-sm); cursor: pointer; color: var(--rhq-text-muted);
  display: grid; place-items: center; padding: 0;
}
.rhq-dt__expander:hover { border-color: var(--rhq-text-faint); color: var(--rhq-text-strong); }
.rhq-dt__expander:focus-visible { outline: 2px solid var(--rhq-focus-ring); outline-offset: 2px; }
.rhq-dt__expander svg { transition: transform 0.15s ease; }
.rhq-dt__expander[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .rhq-dt__expander svg { transition: none; } }

.rhq-dt__detail { display: none; }
.rhq-dt__detail--open { display: table-row; }
.rhq-dt__detail > td { background: var(--rhq-surface-sunken); padding: 0; border-bottom: 1px solid var(--rhq-border); }
.rhq-dt__detail-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--rhq-space-2) var(--rhq-space-5); padding: var(--rhq-space-3) var(--rhq-space-4) var(--rhq-space-3) 3rem;
}
.rhq-dt__detail-k { color: var(--rhq-text-muted); font-weight: 600; font-size: 0.65625rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.rhq-dt__detail-v { color: var(--rhq-text-strong); font-weight: 500; font-size: 0.75rem; }

/* ---- Name link (the ONE link per row, §4.4) --------------------------------
   Works for <a> and for form-submit <button> name cells (e.g. the vehicles
   list, where clicking the callsign POSTs the row's barcode). */
.rhq-dt__namelink {
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font: 500 0.78125rem var(--rhq-font); color: var(--rhq-accent-link);
  text-decoration: none;
}
.rhq-dt__namelink:hover { text-decoration: underline; }
.rhq-dt__namelink:focus-visible { outline: 2px solid var(--rhq-focus-ring); outline-offset: 2px; }

/* Muted second line under a name cell (group, sub-detail). */
.rhq-dt__cellsub { display: block; font-size: 0.71875rem; color: var(--rhq-text-muted); }

/* Quiet cell submit — carries a per-column focus shortcut (open the row with
   THIS field focused) without the all-cells-as-links look: plain ink at rest,
   link cue only on hover/keyboard focus. Block-level so empty cells keep a
   usable click target. */
.rhq-dt__cellbtn {
  display: block; width: 100%; min-height: 1.2em;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  white-space: inherit;
}
.rhq-dt__cellbtn:hover { color: var(--rhq-accent-link); text-decoration: underline; }
.rhq-dt__cellbtn:focus-visible { outline: 2px solid var(--rhq-focus-ring); outline-offset: -2px; }

/* ---- Neutral tag (non-status data — never a status colour) ----------------- */
.rhq-dt__tag {
  display: inline-block;
  font-size: 0.65625rem; font-weight: 600; color: var(--rhq-text);
  border: 1px solid var(--rhq-border); background: var(--rhq-surface);
  padding: 0.0625rem 0.4375rem; border-radius: var(--rhq-radius-pill);
}

/* ---- Data-driven readiness pill + roster swatch (colour from DATA, BD10) --- */
.rhq-dt__rl {
  display: inline-flex; align-items: center;
  font-weight: 700; font-size: 0.65625rem; line-height: 1.3;
  padding: 0.125rem 0.5625rem; border-radius: var(--rhq-radius-pill);
}
.rhq-dt__swatch {
  width: 0.875rem; height: 0.875rem; border-radius: var(--rhq-radius-sm);
  display: inline-block; vertical-align: -2px; border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ---- History + availability strips (decorative; cell carries aria-label) --- */
.rhq-dt__hist { display: inline-flex; gap: 2px; }
.rhq-dt__hist-bar { width: 4px; height: 12px; border-radius: 1px; background: var(--rhq-border); }
.rhq-dt__hist-bar--deployed { background: var(--rhq-text-strong); }
.rhq-dt__hist-bar--flagged { background: var(--rhq-status-critical); }
.rhq-dt__avstrip { display: inline-flex; gap: 2px; }
.rhq-dt__av { width: 8px; height: 8px; border-radius: 2px; display: inline-block; background: var(--rhq-border); }
.rhq-dt__av--ok { background: var(--rhq-status-ok); }
.rhq-dt__av--warning { background: var(--rhq-status-warning); }
.rhq-dt__av--critical { background: var(--rhq-status-critical); }
.rhq-dt__av--neutral { background: var(--rhq-status-neutral); }

/* ---- Row actions ---------------------------------------------------------- */
.rhq-dt__actions { display: inline-flex; gap: var(--rhq-space-1); }
.rhq-dt__action {
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--rhq-border); background: var(--rhq-surface); border-radius: var(--rhq-radius-sm);
  cursor: pointer; display: grid; place-items: center; color: var(--rhq-text-muted); padding: 0;
}
.rhq-dt__action:hover { border-color: var(--rhq-text-faint); color: var(--rhq-text-strong); }
.rhq-dt__action:focus-visible { outline: 2px solid var(--rhq-focus-ring); outline-offset: 2px; }
.rhq-dt__action--danger:hover { color: var(--rhq-status-critical); border-color: #f4b8b2; background: var(--rhq-status-critical-soft); }

/* ---- Pagination footer ---------------------------------------------------- */
.rhq-dt__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--rhq-space-3) var(--rhq-space-4);
  border-top: 1px solid var(--rhq-border-soft);
  font-size: var(--rhq-text-size-sm); color: var(--rhq-text-muted);
  flex-wrap: wrap; gap: var(--rhq-space-2);
}
.rhq-dt__pagesize { display: inline-flex; align-items: center; gap: var(--rhq-space-2); }
.rhq-dt__pagesize select { border: 1px solid var(--rhq-border); border-radius: var(--rhq-radius-sm); padding: 0.25rem 0.375rem; font: inherit; font-size: var(--rhq-text-size-sm); }
.rhq-dt__pager { display: flex; gap: var(--rhq-space-1); }
.rhq-dt__page {
  min-width: 1.6875rem; height: 1.6875rem;
  border: 1px solid var(--rhq-border); background: var(--rhq-surface); border-radius: var(--rhq-radius-sm);
  cursor: pointer; color: var(--rhq-text); font: inherit; font-weight: 600; font-size: 0.71875rem;
}
.rhq-dt__page:hover { border-color: var(--rhq-text-faint); color: var(--rhq-text-strong); }
.rhq-dt__page--current { background: var(--rhq-color-primary); color: var(--rhq-text-on-brand); border-color: var(--rhq-color-primary); }
.rhq-dt__page:focus-visible { outline: 2px solid var(--rhq-focus-ring); outline-offset: 2px; }

/* ---- Sectioned variant (stacked rule sub-tables) -------------------------- */
.rhq-dt-section {
  border: 1px solid var(--rhq-border); border-radius: var(--rhq-radius-lg);
  margin-bottom: var(--rhq-space-3); overflow: hidden; box-shadow: var(--rhq-shadow-sm);
  background: var(--rhq-surface);
}
.rhq-dt-section__header {
  display: flex; align-items: center; gap: var(--rhq-space-3);
  padding: var(--rhq-space-3) var(--rhq-space-4);
  background: var(--rhq-surface-muted); border-bottom: 1px solid var(--rhq-border-soft);
  flex-wrap: wrap;
}
.rhq-dt-section__title { margin: 0; font-size: 0.84375rem; font-weight: var(--rhq-font-weight-heading); color: var(--rhq-text-strong); }
.rhq-dt-section__meta { font-size: 0.71875rem; color: var(--rhq-text-muted); }
.rhq-dt-section__actions { margin-left: auto; display: flex; gap: var(--rhq-space-2); }

/* ---- Matrix / planning variant -------------------------------------------- */
.rhq-dt-mx__scroll { overflow: auto; }
.rhq-dt-mx__table { border-collapse: separate; border-spacing: 0; font-size: 0.75rem; white-space: nowrap; }
.rhq-dt-mx__table caption { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.rhq-dt-mx__table th,
.rhq-dt-mx__table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rhq-border-soft); text-align: right; }
.rhq-dt-mx__table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--rhq-surface-sunken); color: var(--rhq-text-muted);
  font-size: 0.65625rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600;
}
.rhq-dt-mx__id,
.rhq-dt-mx__id2 {
  position: sticky; z-index: 1; text-align: left;
  background: var(--rhq-surface); box-shadow: 1px 0 0 var(--rhq-border-soft);
}
.rhq-dt-mx__id { left: 0; font-weight: 600; color: var(--rhq-text-strong); }
.rhq-dt-mx__id2 { left: 120px; color: var(--rhq-text-muted); }
.rhq-dt-mx__table thead th.rhq-dt-mx__id,
.rhq-dt-mx__table thead th.rhq-dt-mx__id2 { z-index: 3; background: var(--rhq-surface-sunken); }
.rhq-dt-mx__num { font-variant-numeric: tabular-nums; }
.rhq-dt-mx__zero,
.rhq-dt-mx__em { color: var(--rhq-text-faint); }   /* zero vs em-dash null convention */
.rhq-dt-mx__table tbody tr:hover td { background: var(--rhq-status-info-soft); }
.rhq-dt-mx__table tbody tr:hover td.rhq-dt-mx__id,
.rhq-dt-mx__table tbody tr:hover td.rhq-dt-mx__id2 { background: var(--rhq-status-info-soft); }
.rhq-dt-mx__summary > td { font-weight: 600; background: var(--rhq-status-info-soft); color: var(--rhq-text-strong); }