/* ─────────────────────────────────────────────────────────────
   Starboard · DataTable family (.ad-dt)
   The ERP workhorse: sorting, selection, sticky chrome, resize,
   column visibility, expandable rows, density, states, footers.
   Motion vocabulary comes from colors_and_type.css — no new
   keyframes are defined here.
   ───────────────────────────────────────────────────────────── */
@import url('../../colors_and_type.css');

/* ── Wrapper ── */
.ad-dt {
  background: var(--bg-elevated);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-default);
}

/* ── Header bar (title + actions) ── */
.ad-dt__bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 56px;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--neutral-200);
}
.ad-dt__title {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}
.ad-dt__sub { font-size: 12px; color: var(--fg-muted); margin-top: 1px; }
.ad-dt__bar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2xs); }

/* ── Bulk toolbar — replaces the header bar when rows are selected.
      Enters ad-fade-up with a 40ms delay (per micro-interaction spec). ── */
.ad-dt__bulk {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 56px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--primary-50);
  border-bottom: 1px solid var(--primary-100);
  animation: ad-fade-up var(--duration-6) var(--ease-out) 40ms backwards;
}
.ad-dt__bulk-count {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  color: var(--primary-700);
}
.ad-dt__bulk-sep { width: 1px; height: var(--size-100); background: var(--primary-100); margin: 0 var(--space-3xs); }
.ad-dt__bulk-act {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 12px;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-xs) ;
  border: 1px solid var(--primary-100);
  background: var(--bg-elevated);
  color: var(--primary-700);
  cursor: pointer;
  transition: background var(--duration-3) var(--ease-out);
}
.ad-dt__bulk-act:hover { background: var(--primary-100); }
.ad-dt__bulk-act:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-dt__bulk-act--danger { color: var(--error-700); border-color: var(--error-100); }
.ad-dt__bulk-act--danger:hover { background: var(--error-100); }
.ad-dt__bulk-clear {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-600);
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.ad-dt__bulk-clear:hover { color: var(--primary-700); text-decoration: underline; }
.ad-dt__bulk-clear:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }

/* ── Scroll container ── */
.ad-dt__scroll { overflow: auto; position: relative; }

/* ── Table ── */
.ad-dt__table { width: 100%; border-collapse: collapse; }

/* ── Header cells — sticky, scroll-aware shadow ── */
.ad-dt__th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-elevated);
  text-align: start;
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  padding: var(--space-xs) var(--space-sm);
  white-space: nowrap;
  vertical-align: middle;
  border-bottom: 1px solid var(--neutral-200);
  transition: opacity var(--duration-4) var(--ease-out),
              border-color var(--duration-4) var(--ease-out);
}
.ad-dt__th--right, .ad-dt__td--right { text-align: end; }
.ad-dt__th--center, .ad-dt__td--center { text-align: center; }

/* Shadow strip under the sticky header — opacity is driven by the
   scroll listener (0 → 1 over the first 24px of scroll) via the
   --ad-dt-scrollfade custom property; .is-scrolled is the binary state. */
.ad-dt__th::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05), transparent);
  opacity: var(--ad-dt-scrollfade, 0);
  transition: opacity var(--duration-2) linear;
}
.ad-dt__scroll.is-scrolled .ad-dt__th { border-bottom-color: var(--neutral-300); }

/* Sorted-state header dimming — when ONE column carries the sort,
   the others step back to --opacity-dimmed-header. */
.ad-dt.is-sorted .ad-dt__th:not(.is-sort-active) { opacity: var(--opacity-dimmed-header); }

/* ── Sortable header button ── */
.ad-dt__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.ad-dt__sort:hover { color: var(--fg-strong); }
.ad-dt__sort:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-dt__sort-caret {
  color: var(--neutral-400);
  transition: transform var(--duration-4) var(--ease-out), color var(--duration-4) var(--ease-out);
}
.is-sort-active .ad-dt__sort-caret { color: var(--primary-600); }
.is-sort-active.is-desc .ad-dt__sort-caret { transform: rotate(180deg); }

/* ── Column resize handle — 4px hit area, 1px line on hover,
      keyboard-focusable (Left/Right ±8px) ── */
.ad-dt__rz {
  position: absolute;
  top: 0; inset-inline-end: -2px;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
  background: none;
  border: 0;
  padding: 0;
}
.ad-dt__rz::before {
  content: "";
  position: absolute;
  top: 20%; bottom: 20%;
  inset-inline-start: 1.5px;
  width: 1px;
  background: var(--primary-500);
  opacity: 0;
  transition: opacity var(--duration-3) var(--ease-out);
}
.ad-dt__rz:hover::before, .ad-dt__rz.is-resizing::before { opacity: 1; }
.ad-dt__rz:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: 2px; }
.ad-dt__rz:focus-visible::before { opacity: 1; }

/* ── Body rows ── */
.ad-dt__td {
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
}
.ad-dt--comfortable .ad-dt__row > .ad-dt__td { height: 52px; }
.ad-dt--compact .ad-dt__row > .ad-dt__td { height: 40px; padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }

.ad-dt__row { transition: background var(--motion-row-change); }
.ad-dt__row:hover { background: var(--neutral-50); }

/* Selected — primary-50 bg + 2px primary-600 left border that
   animates in over --motion-row-change (inset shadow on first cell). */
.ad-dt__row > .ad-dt__td:first-child {
  box-shadow: inset 0 0 0 0 var(--primary-600);
  transition: box-shadow var(--motion-row-change), background var(--motion-row-change);
}
.ad-dt__row.is-selected { background: var(--primary-50); }
.ad-dt__row.is-selected > .ad-dt__td:first-child { box-shadow: inset 2px 0 0 0 var(--primary-600); }
.ad-dt__row.is-selected > .ad-dt__td { border-bottom-color: var(--primary-100); }

/* Row re-enter stagger after a sort — delay set inline, capped at 8 */
.ad-dt__row.is-entering { animation: ad-fade-up var(--duration-4) var(--ease-out) backwards; }

/* ── Sticky first column ── */
.ad-dt__td--sticky, .ad-dt__th--sticky {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--bg-elevated);
}
.ad-dt__th--sticky { z-index: 4; }
.ad-dt__row.is-selected > .ad-dt__td--sticky { background: var(--primary-50); }
.ad-dt__td--sticky::after, .ad-dt__th--sticky::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; inset-inline-end: -5px;
  width: 4px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.05), transparent);
  opacity: var(--ad-dt-xfade, 0);
  transition: opacity var(--duration-2) linear;
}

/* ── Checkbox cell ── */
.ad-dt__td--check, .ad-dt__th--check { width: 40px; padding-inline-end: var(--space-3xs); }
.ad-dt__check {
  appearance: none;
  width: 16px; height: 16px;
  margin: 0;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--neutral-400);
  background: var(--bg-elevated);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  transition: background var(--duration-3) var(--ease-out), border-color var(--duration-3) var(--ease-out);
}
.ad-dt__check:hover { border-color: var(--primary-500); }
.ad-dt__check:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-dt__check:checked, .ad-dt__check:indeterminate { background: var(--admiral-blue); border-color: var(--admiral-blue); }
.ad-dt__check:checked::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--fg-on-dark);
  clip-path: polygon(14% 50%, 0 66%, 38% 100%, 100% 18%, 85% 4%, 38% 70%);
}
.ad-dt__check:indeterminate::before {
  content: "";
  width: 8px; height: 2px;
  border-radius: 1px;
  background: var(--fg-on-dark);
}

/* ── Expander ── */
.ad-dt__td--expander, .ad-dt__th--expander { width: 36px; padding-inline-end: 0; }
.ad-dt__exp-btn {
  width: 24px; height: 24px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: var(--radius-xs);
  color: var(--neutral-500);
  cursor: pointer;
  transition: background var(--duration-3) var(--ease-out);
}
.ad-dt__exp-btn:hover { background: var(--neutral-100); color: var(--fg-strong); }
.ad-dt__exp-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-dt__exp-btn svg { transition: transform var(--duration-4) var(--ease-out); }
.ad-dt__exp-btn.is-open svg { transform: rotate(90deg); }

/* Expanded content row — grid-rows trick over --duration-8 */
.ad-dt__expand-td { padding: 0; border-bottom: 0; }
.ad-dt__expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-8) var(--ease-panel);
}
.ad-dt__expand.is-open { grid-template-rows: 1fr; }
.ad-dt__expand > div { overflow: hidden; min-height: 0; }
.ad-dt__expand-body {
  padding: var(--space-sm);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-100);
  font-size: 13px;
}

/* ── Cell conveniences ── */
.ad-dt__num { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--fg-strong); text-align: end; display: block; font-variant-numeric: tabular-nums; }
.ad-dt__id { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--fg-muted); }
.ad-dt__cell-strong { font-weight: 500; color: var(--fg-strong); }
.ad-dt__cell-sub { font-size: 11px; color: var(--fg-muted); margin-top: 1px; }

/* ── Columns trigger + checklist menu ── */
.ad-dt__cols-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 12px;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--neutral-300);
  background: var(--bg-elevated);
  color: var(--fg-default);
  cursor: pointer;
  transition: background var(--duration-3) var(--ease-out);
}
.ad-dt__cols-btn:hover { background: var(--neutral-100); }
.ad-dt__cols-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-dt__colmenu {
  background: var(--bg-elevated);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: var(--space-3xs);
  animation: ad-scale-in var(--duration-4) var(--ease-out);
  transform-origin: top;
}
.ad-dt__colmenu-label {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: var(--space-2xs) var(--space-2xs) var(--space-3xs);
}
.ad-dt__colmenu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 7px var(--space-2xs);
  border-radius: var(--radius-xs);
  font-size: 13px;
  color: var(--fg-default);
  cursor: pointer;
  transition: background var(--duration-3) var(--ease-out);
}
.ad-dt__colmenu-item:hover { background: var(--primary-50); color: var(--primary-700); }

/* ── Loading skeleton rows — ad-shimmer gradient bones ── */
.ad-dt__bone {
  height: 12px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: ad-shimmer 1.6s linear infinite;
}

/* ── Empty state ── */
.ad-dt__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3xs);
  padding: var(--space-xl) var(--space-md);
  animation: ad-fade-up var(--duration-7) var(--ease-out);
}
.ad-dt__empty-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: var(--primary-50);
  color: var(--primary-600);
  margin-bottom: var(--space-3xs);
}
.ad-dt__empty-title {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-strong);
}
.ad-dt__empty-sub { font-size: 13px; color: var(--fg-muted); max-width: 36ch; }
.ad-dt__empty .ad-btn { margin-top: var(--space-2xs); }

/* ── Error state ── */
.ad-dt__error {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--error-100);
  border: 1px solid rgba(240,68,56,0.2);
  border-radius: var(--radius-md);
  color: var(--error-900);
  font-size: 13px;
}
.ad-dt__error-title { font-family: 'Plus Jakarta Sans', var(--font-display); font-weight: 600; font-size: 13px; }
.ad-dt__error-retry {
  margin-inline-start: auto;
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 12px;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(240,68,56,0.25);
  background: var(--bg-elevated);
  color: var(--error-700);
  cursor: pointer;
  transition: background var(--duration-3) var(--ease-out);
}
.ad-dt__error-retry:hover { background: var(--error-100); }
.ad-dt__error-retry:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }

/* ── Footers ── */
.ad-dt__tf-td {
  padding: var(--space-2xs) var(--space-sm);
  background: var(--neutral-50);
  border-top: 1px solid var(--neutral-200);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}
.ad-dt__tf-label { font-family: 'Plus Jakarta Sans', var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.ad-dt__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  border-top: 1px solid var(--neutral-100);
  background: var(--neutral-50);
  font-size: 12px;
  color: var(--fg-muted);
}
.ad-dt__summary-text .mono, .ad-dt__summary-text b { font-family: var(--font-mono); font-weight: 500; color: var(--fg-strong); }