/* ============================================================================
   CATALOGUE TABLE — single source of truth.
   Canonical CSS for the catalogue/history data table: the `.tbl-wrap` surface +
   container, the `.tbl` itself (head / body / hover / striping), the
   `.code-cell` designation cell, the `.date-col`, the chip row-hover activation
   and the container-query responsive demotion ladder. Extracted from
   comp-table.html (Jun 2026) so the design-system card, the dataset preview
   (ui_kits/cos-library/data-preview.html) and the prototype share ONE source.
   Pair density/striping/chip-style with the `--den-*` / `--chip-fs` vars + the
   `data-stripe` attribute the consumer sets. Import AFTER colors_and_type.css
   (tokens + layer order) and _chips.css.

   Dark is a co-located token revalue (notes/architecture.md). The component
   rules are wrapped in @layer components — unblocked by the global `.bi` reset
   living in @layer reset, and safe because _chips.css is itself @layer
   components, so the table's chip overrides win by specificity within the same
   layer. The scaffold `.card` / `.demo-bar` overrides stay in the consuming
   page (UNLAYERED), not here.
   ============================================================================ */

@layer tokens { :root {
  --tbl-zebra-even: rgba(35,98,162,0.015);   /* faint blue zebra wash on white */
} }
@layer theme { [data-theme="dark"] {
  --tbl-zebra-even: rgba(255,255,255,0.02);  /* faint white wash on the dark row */
} }

/* ── Table component rules — @layer components ───────────────────────────
   Everything below (the `.tbl*` surfaces, code/date cells, chip row-hover
   overrides and the responsive container queries) lives in @layer components.
   Conflicts resolve by LAYER, not raw specificity / source order:
     • `.h-icon { display:none }` (a `.bi`) beats @layer reset's `.bi` glyph reset.
     • the chip overrides beat the LAYERED _chips.css base by specificity within
       this shared layer.
   The `body[data-theme="dark"] .tbl … .dc-chip--*` rules below set box-shadow
   only, so they coexist with _dark.css's unlayered dc-chip bg/colour (different
   properties) regardless of layer — the documented dc-chip-dark exception. */
@layer components {

.tbl-wrap {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Container queries on the wrap; descendants react to wrap's inline size. */
  container-type: inline-size;
  container-name: tbl;
  max-width: 100%;
}
.tbl {
  width: 100%;
  /* SEPARATE borders (spacing 0), NOT collapse — collapsed cell borders are
     painted by the TABLE box, so they ignore per-row opacity/transform: during
     the Collection reveal/paginate the zebra fills animated while the row
     lines sat fully opaque. With separate borders each td paints its own
     border-bottom inside the row's stacking context, so lines fade/slide WITH
     the row. Visual result at rest is identical (only border-bottom is used —
     nothing to double up). */
  border-collapse: separate; border-spacing: 0;
  font-size: var(--den-body, 14px); table-layout: auto;
}

.tbl thead th {
  text-align: left; font-weight: 500;
  color: var(--color-fg-secondary);
  font-size: var(--den-head, 12px);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: var(--den-pad-y-h, 12px) var(--den-pad-x, 16px);
  border-bottom: 2px solid var(--color-border-strong);
  background: var(--color-bg-subtle);
  white-space: nowrap;
}
.tbl tbody td {
  padding: var(--den-pad-y, 14px) var(--den-pad-x, 16px);
  vertical-align: middle;
}
.tbl thead th.is-num, .tbl tbody td.is-num { text-align: right; }
.tbl tbody tr:is(:hover, [data-state~="hover"]) { background: var(--gov-color-primary-50); cursor: pointer; }

/* Title column eats remaining space; other columns shrink to content.
   Code column gets a generous min-width via the cell so the pills stay
   inline whenever the container can spare the room — pills only wrap
   under the number once the container query at 720px kicks in. */
.tbl .col-title { width: 100%; min-width: 0; }
.tbl .col-title-cell { min-width: 0; }
.tbl .col-code-cell { white-space: nowrap; }
.tbl .col-title-cell .title-text {
  /* No truncation — wrap naturally; CSS text-wrap: pretty for nicer line breaks.
     Auto-hyphenation keeps long Czech compounds (e.g. "Dělostřelecké",
     "zdravotnické") from forcing the title column wider than its share or
     leaving ragged gaps — the cell carries lang="cs" (set in _table.js) so the
     browser uses the Czech hyphenation dictionary even when the host document
     isn't Czech (the dataset preview / prototype reuse this renderer). */
  display: block;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  line-height: 1.4;
}

/* STRIPING — zebra (default), lines (hairline only), bare */
.tbl[data-stripe="zebra"] tbody td { border-bottom: 1px solid var(--color-border-default); }
.tbl[data-stripe="zebra"] tbody tr:nth-child(even) { background: var(--tbl-zebra-even); }
.tbl[data-stripe="zebra"] tbody tr:nth-child(even):is(:hover, [data-state~="hover"]) { background: var(--gov-color-primary-50); }
.tbl[data-stripe="lines"] tbody td { border-bottom: 1px solid var(--color-border-default); }
/* "bare" means BARE — no hairline either. (A faint inset box-shadow used to
   substitute a row line here, which made the "none" striping option still show
   lines on the catalogue table while the metabox went truly bare.) */
.tbl[data-stripe="bare"]  tbody td { border-bottom: none; }

/* ----- Document-type chip -----
   Base + the filled / outlined / letter treatments live in the shared
   _chips.css (`.dc-chip`, `.dc-chip--outlined`, `.dc-chip--letter`) so the
   chip-style choice carries application-wide. The table only adds its
   density-driven font scaling on top. */
.tbl .dc-chip { font-size: var(--chip-fs, 11.5px); }

/* ----- Code cell (mirrors .code-cell + .code-cell__num/__pill) ─────────
   No `white-space: nowrap` on the wrapper — when the column is narrow
   (longer codes like AJP-4.10 + multiple pills), let pills wrap under
   the number. Each individual pill keeps its own nowrap. */
.code-cell { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; row-gap: 4px; line-height: 1; }
.code-cell__num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: var(--num-fs, 14px); color: var(--color-fg-default);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  white-space: nowrap;
}
.code-cell__pill {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11.5px; color: var(--color-fg-secondary);
  background: var(--gov-color-neutral-100);
  padding: 2px 6px; border-radius: 3px;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.code-cell__pill .abbr { color: var(--gov-color-neutral-500); font-weight: 400; }
.code-cell__pill--am { background: var(--gov-color-warning-50); color: var(--gov-color-warning-700); }
.code-cell__pill--am .abbr { color: var(--gov-color-warning-700); opacity: 0.65; }

/* Validity (.vchip .v-*) and Availability (.achip .a-*) from _chips.css */

/* ── Chips activate on row hover ────────────────────────────────────────── */
.tbl tbody tr:is(:hover, [data-state~="hover"]) .vchip.v-valid          { background: var(--gov-color-success-100);  border-style: solid;  border-color: var(--gov-color-success-500); }
.tbl tbody tr:is(:hover, [data-state~="hover"]) .vchip.v-replaced       { background: var(--gov-color-warning-100);  border-style: solid;  border-color: var(--gov-color-warning-500); }
.tbl tbody tr:is(:hover, [data-state~="hover"]) .vchip.v-invalid        { background: var(--gov-color-neutral-200);  border-style: solid;  border-color: var(--gov-color-neutral-400);  color: var(--gov-color-neutral-800); }
.tbl tbody tr:is(:hover, [data-state~="hover"]) .vchip.v-draft          { background: var(--gov-color-neutral-100);  border-style: dashed; border-color: var(--gov-color-neutral-400);  color: var(--gov-color-neutral-700); }
.tbl tbody tr:is(:hover, [data-state~="hover"]) .achip.a-public         { background: var(--gov-color-success-100);  border-style: solid;  border-color: var(--gov-color-success-500); }
.tbl tbody tr:is(:hover, [data-state~="hover"]) .achip.a-login          { background: var(--gov-color-info-100);     border-style: solid;  border-color: var(--gov-color-info-500); }
.tbl tbody tr:is(:hover, [data-state~="hover"]) .achip.a-controlled     { background: var(--gov-color-warning-100);  border-style: solid;  border-color: var(--gov-color-warning-500); }
.tbl tbody tr:is(:hover, [data-state~="hover"]) .achip.a-metadata       { background: var(--gov-color-neutral-200);  border-style: solid;  border-color: var(--gov-color-neutral-400); }

/* Filled doc-type chip — adopt the canonical `.dc-chip--active` treatment on
   row hover (dark-mode only): a 1px inset border in the outlined-variant ink,
   so the chip reads as "active" against the muted dark fill. Scoped
   `:not(.dc-chip--outlined):not(.dc-chip--letter)` so it only touches the
   FILLED treatment. Light mode is a no-op: the vivid light fills need no border. */
body[data-theme="dark"] .tbl tbody tr:is(:hover, [data-state~="hover"]) .dc-chip--cos:not(.dc-chip--outlined):not(.dc-chip--letter)     { box-shadow: inset 0 0 0 1px #98c0e8; }
body[data-theme="dark"] .tbl tbody tr:is(:hover, [data-state~="hover"]) .dc-chip--stanag:not(.dc-chip--outlined):not(.dc-chip--letter)  { box-shadow: inset 0 0 0 1px #cdd4dc; }
body[data-theme="dark"] .tbl tbody tr:is(:hover, [data-state~="hover"]) .dc-chip--stanrec:not(.dc-chip--outlined):not(.dc-chip--letter) { box-shadow: inset 0 0 0 1px #c8b9e0; }
body[data-theme="dark"] .tbl tbody tr:is(:hover, [data-state~="hover"]) .dc-chip--ap:not(.dc-chip--outlined):not(.dc-chip--letter)      { box-shadow: inset 0 0 0 1px #a8d2c4; }

/* ----- Date column — matches `.meta` text in the card view -------------
   Card uses sans-serif 12.5px for meta labels, with the value in
   weight 500 / fg-default. Mirror that here so the date reads as
   secondary information rather than as a code. Right-aligned so dates
   stack on the tabular-numeric grid. */
.tbl .date-col {
  font-family: var(--font-sans);
  font-size: var(--date-fs, 12.5px);
  font-weight: 500;
  color: var(--color-fg-default);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tbl th.col-date-h { text-align: right; }

/* ── Container queries — responsive demotion ────────────────────────────
   Each step reclaims width without changing the row's information
   architecture: drop, then compress, then re-encode. */

/* Step 0 — let the code-cell wrap its edition pills under the number once the
   container is too narrow to keep them inline. */
@container tbl (max-width: 760px) {
  .tbl .code-cell { flex-wrap: wrap; }
  .tbl .col-code-cell { white-space: normal; }
}

/* Step 1 — drop the date column entirely (the value also lives in the detail /
   card view; redundant in a dense table). */
@container tbl (max-width: 840px) {
  .tbl .col-date,
  .tbl .col-date-cell,
  .tbl .col-date-h { display: none; }
}

/* Step 2 — compress validity & availability chips to icon-only. Header swaps to
   the same glyph (so the column still self-labels). Tooltip preserves the
   verbal label for screen readers + hover. */
@container tbl (max-width: 640px) {
  .tbl .col-validity-h .h-text,
  .tbl .col-availability-h .h-text { display: none; }
  .tbl .col-validity-h .h-icon,
  .tbl .col-availability-h .h-icon { display: inline-block; }
  .tbl .vchip .chip-label,
  .tbl .achip .chip-label { display: none; }

  .tbl .vchip,
  .tbl .achip {
    padding: 4px;
    gap: 0;
    justify-content: center;
    width: 22px; height: 22px;
    box-sizing: border-box;
  }
  .tbl .vchip i, .tbl .achip i {
    font-size: 12px; width: 12px; height: 12px;
    top: 0; margin: 0;
  }
  .tbl .vchip:has(.bi-check-circle-fill),
  .tbl .vchip:has(.bi-arrow-repeat),
  .tbl .vchip:has(.bi-slash-circle) { padding: 4px; }
  .tbl .vchip:has(.bi-check-circle-fill) i,
  .tbl .vchip:has(.bi-arrow-repeat) i,
  .tbl .vchip:has(.bi-slash-circle) i { margin-left: 0; }
}

/* Step 3 — shorten doc-type chip (STANAG→NAG, STANREC→NREC). The colour and
   family still encode the document type; the shorter glyph is just a width
   concession on the narrowest screens. */
@container tbl (max-width: 460px) {
  .tbl .dc-chip__full  { display: none; }
  .tbl .dc-chip__short { display: inline; }

  .tbl thead th,
  .tbl tbody td { padding-left: 8px; padding-right: 8px; }
}

/* Header icon glyphs — hidden by default; revealed in Step 2. */
.tbl thead th .h-icon { display: none; font-size: 14px; line-height: 1; }

} /* end @layer components — table */