/* ============================================================================
   DCC TABLE — styles for dcc-table.js. Loaded after dcc-components.css.
   No hex literals; everything resolves through dcc-tokens.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   TABLE
   ------------------------------------------------------------------------ */
.dt { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }

.dt-bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.dt-bar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }
.dt-search { flex: 0 1 280px; min-width: 180px; }
.dt-search input { padding-left: 32px; }
/* The browser's own clear button is a second, differently-styled affordance
   inside our field. One clear control per surface, and it is ours. */
.dt-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.dt-count {
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: var(--s-2);
}

.dt-facet { position: relative; }
.dt-facet .btn.is-on { border-color: var(--brand-line); color: var(--brand-text); background: var(--brand-tint); }
.dt-facet .icon-btn.is-on { color: var(--brand-text); background: var(--brand-tint); }
.dt-facet-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 214px;
  background: var(--surface-overlay); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  padding: var(--s-1); max-height: 320px; overflow-y: auto;
  animation: panel-in var(--dur-fast) var(--ease) both;
}
.dt-bar-right .dt-facet-pop { left: auto; right: 0; }
.dt-facet-opt {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-2); border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--text-2); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dt-facet-opt:hover { background: var(--surface-2); color: var(--text); }
.dt-facet-opt input { accent-color: var(--brand); width: 14px; height: 14px; flex: none; }
.dt-facet-opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The count is the whole point of a faceted filter: it says what the option
   would leave, so choosing it is a decision rather than a guess. */
.dt-facet-opt b {
  font-family: var(--font-mono); font-size: var(--t-micro); color: var(--text-3);
  font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
}

.dt-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.dt-table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.dt-table th {
  text-align: left; font-family: var(--font-mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3);
  font-weight: var(--fw-semi); border-bottom: 1px solid var(--line);
  white-space: nowrap; padding: 0;
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.dt-table th:not(.is-sortable) { padding: 8px var(--s-4); }
.dt-table th.is-right, .dt-table td.is-right { text-align: right; }

/* The whole heading is the hit target, not just the caret. */
.dt-sort {
  display: flex; align-items: center; gap: 5px; width: 100%;
  padding: 8px var(--s-4); background: none; border: none; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.dt-table th.is-right .dt-sort { justify-content: flex-end; }
.dt-sort:hover { color: var(--text); background: var(--surface-2); }
/* The caret is invisible until you are on the column or it is the active sort —
   nine permanently-visible carets is noise, and none at all is a mystery. */
.dt-sort-ic { opacity: 0; transition: opacity var(--dur-fast) var(--ease); display: inline-flex; }
.dt-sort:hover .dt-sort-ic { opacity: .55; }
.dt-sort-ic.on { opacity: 1; color: var(--brand); }
.dt-table th[aria-sort] { color: var(--text); }

.dt-table td {
  padding: 9px var(--s-4); border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums; vertical-align: middle;
}
.dt-table tbody tr:last-child td { border-bottom: none; }
.dt-table tbody tr.is-clickable { cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.dt-table tbody tr.is-clickable:hover { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--brand); }
.dt-table tbody tr:focus-visible { outline: none; background: var(--surface-2); box-shadow: inset 2px 0 0 var(--brand); }
.dt-table tbody tr.is-selected { background: var(--brand-tint); }
.dt-table tbody tr.is-selected:hover { background: var(--brand-tint); }
.dt-check { width: 38px; padding-left: var(--s-4) !important; padding-right: 0 !important; }
.dt-check input { accent-color: var(--brand); width: 14px; height: 14px; cursor: pointer; }

/* Compact is a real density, not a 1px saving: 9px → 5px of vertical padding
   is roughly five more rows on a laptop, which is the difference between
   scanning a fleet and scrolling one. */
.dt.is-dense .dt-table td { padding-top: 5px; padding-bottom: 5px; font-size: var(--t-sm); }
.dt.is-dense .dt-sort, .dt.is-dense .dt-table th:not(.is-sortable) { padding-top: 5px; padding-bottom: 5px; }
.dt.is-dense .c-sub { display: none; }   /* the sub-line is what compact drops */

.dt-bulk {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-2) var(--s-3); border: 1px solid var(--brand-line);
  background: var(--brand-tint); border-radius: var(--r-md);
  animation: panel-in var(--dur-fast) var(--ease) both;
}
.dt-bulk-n {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: var(--fw-semi);
  color: var(--brand-text); text-transform: uppercase; letter-spacing: var(--ls-caps);
  margin-right: var(--s-2);
}

.dt-pager { display: flex; align-items: center; gap: var(--s-2); justify-content: flex-end; }
.dt-pager-n {
  margin-right: auto; font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--text-3); font-variant-numeric: tabular-nums;
}