/* Incidents data table — sortable, expandable, selectable.
   Tokens only. GSAP owns transforms on rows, detail wrappers, chevrons and
   the bulk bar, so none of them carry a CSS transform. */

.dt { position: relative; overflow: hidden; }

.dt__scroll {
  /* Vertical scroller, so data-lenis-prevent in the markup is correct here. */
  max-height: calc(var(--sp-7) * 8);
  overflow: auto;
  overscroll-behavior: contain;
}

.dt__table { width: 100%; border-collapse: separate; border-spacing: 0; }

/* ---------- header ---------- */

.dt__head th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}
.dt__th {
  padding: 0;
  text-align: left; font-weight: 500;
  white-space: nowrap;
}
.dt__th--check { width: calc(var(--sp-7) + var(--sp-2)); padding-left: var(--sp-5); }
.dt__th--end { width: var(--sp-7); }

.dt__sort {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  width: 100%; height: var(--control-h);
  padding: 0 var(--sp-3);
  border: 0; background: transparent; color: var(--ink-muted);
  cursor: pointer; font: inherit; font-size: var(--text-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: color var(--dur-fast) ease;
}
.dt__sort:hover { color: var(--ink); }
.dt__sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
[aria-sort="ascending"] .dt__sort,
[aria-sort="descending"] .dt__sort { color: var(--ink); }

.dt__arrow {
  width: 13px; height: 13px; flex: 0 0 auto;
  stroke: currentColor; fill: none; stroke-width: 2;
  opacity: 0;
}
.dt__sort:hover .dt__arrow { opacity: 0.4; }
[aria-sort="ascending"] .dt__arrow,
[aria-sort="descending"] .dt__arrow { opacity: 1; color: var(--accent); }

/* ---------- rows ---------- */

.dt__row { background: var(--surface); }
.dt__row:hover { background: var(--surface-hover); }
.dt__row[data-selected="true"] { background: var(--accent-wash); }

.dt__td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  vertical-align: middle;
}
.dt__td--check { padding-left: var(--sp-5); }
.dt__td--end { padding-right: var(--sp-4); text-align: right; }
.dt__td--time { color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }

.dt__service { display: block; color: var(--ink); }
.dt__id { display: block; color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-xs); }

.dt__owner { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.dt__avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: var(--radius-pill);
  background: var(--surface-overlay); color: var(--ink-muted);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: -0.02em;
}

/* ---------- checkbox ---------- */

.dt__check { display: inline-flex; align-items: center; cursor: pointer; }
.dt__check input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0;
}
.dt__box {
  display: grid; place-items: center;
  width: 16px; height: 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-raised);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.dt__box::after {
  content: ''; width: 8px; height: 8px;
  border-radius: 2px; /* the tick inside the box, not a surface radius */
  background: var(--accent-ink);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.dt__check input:checked + .dt__box,
.dt__check input:indeterminate + .dt__box { background: var(--accent); border-color: var(--accent); }
.dt__check input:checked + .dt__box::after,
.dt__check input:indeterminate + .dt__box::after { opacity: 1; }
.dt__check input:indeterminate + .dt__box::after { height: 2px; border-radius: 1px; }
.dt__check input:focus-visible + .dt__box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- expand ---------- */

.dt__expand {
  display: inline-grid; place-items: center;
  width: var(--control-h); height: var(--control-h);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.dt__expand:hover { background: var(--surface-overlay); color: var(--ink); }
.dt__expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dt__chev { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

.dt__detail-cell { padding: 0; border-bottom: 1px solid var(--line); background: var(--surface-sunken); }
/* No min-height here: the wrapper is measured and tweened, and a floor would
   stop it collapsing. */
.dt__detail-wrap { overflow: hidden; }
.dt__detail-inner {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + var(--sp-6));
}
.dt__facts { display: grid; gap: var(--sp-3); min-width: 0; }
.dt__facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-3); }
.dt__facts dt {
  color: var(--ink-faint);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.dt__facts dd { color: var(--ink-muted); font-size: var(--text-sm); }
.dt__detail-actions { display: flex; gap: var(--sp-2); }

/* ---------- empty state ---------- */

.dt__empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}
.dt__empty[hidden] { display: none; }
.dt__empty-icon { width: 32px; height: 32px; stroke: var(--ok); fill: none; stroke-width: 1.5; }
.dt__empty-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.dt__empty-sub { max-width: 34ch; color: var(--ink-muted); font-size: var(--text-sm); }
.dt__empty .btn { margin-top: var(--sp-2); }

/* ---------- bulk action bar ---------- */

.dt__bulk {
  position: absolute; z-index: 6;
  left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-2);
  opacity: 0;
}
.dt__bulk[hidden] { display: none; }
.dt__bulk-count { font-size: var(--text-sm); color: var(--ink-muted); white-space: nowrap; }
.dt__bulk-count strong { color: var(--ink); font-family: var(--font-mono); }
.dt__bulk-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 640px) {
  .dt__scroll { max-height: calc(var(--sp-7) * 7); }
  /* Owner is the column a phone can lose: without it the expand control stays
     on screen instead of sitting past the horizontal scroll. */
  .dt__col-owner { display: none; }
  .dt__td { padding: var(--sp-3) var(--sp-2); }
  .dt__th--check, .dt__td--check { padding-left: var(--sp-3); }
  .dt__detail-inner { padding-left: var(--sp-4); }
  .dt__facts div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .dt__bulk { flex-direction: column; align-items: stretch; padding: var(--sp-3); }
  .dt__bulk-actions { justify-content: stretch; }
  .dt__bulk-actions .btn { flex: 1 1 auto; }
}

@media (pointer: coarse) {
  .dt__expand { width: var(--tap-min); height: var(--tap-min); }
  .dt__box { width: 20px; height: 20px; }
  .dt__sort { min-height: var(--tap-min); }
}

.dt__table[hidden] { display: none; }