/* WrapServicer v2 — Table Controls.
 * Opt-in styles for tables enhanced via [data-table-controls].
 * Provides sticky headers, column resize handles, and a CSV toolbar.
 *
 * Token fallback convention (matches ui.css, portal.css):
 *   var(--color-ink-*, #hex)   Tailwind-generated tokens from base.html
 *   var(--ws-shadow-*, css)    brand.css custom properties
 *   Hex/css fallback keeps cascade working in email/PDF renderers.
 *
 * All selectors scoped to table[data-table-controls] or .table-controls-*
 * classes so this file cannot bleed into unrelated templates.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE BASE
   ═══════════════════════════════════════════════════════════════════════════ */

table[data-table-controls] {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

table[data-table-controls] tbody tr:hover {
  background-color: var(--color-ink-50, #F8FAFC);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY HEADERS
   Caller is expected to wrap the table in overflow-x: auto so the sticky
   headers remain visible during horizontal scroll.
   ═══════════════════════════════════════════════════════════════════════════ */

table[data-table-controls] thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Opaque background prevents body rows bleeding through on scroll */
  background-color: var(--color-ink-50, #F8FAFC);
  border-bottom: 2px solid var(--color-ink-200, #E2E8F0);
  /* position: sticky establishes a containing block for the resize handle */
  font-size: 0.75rem;            /* 12px */
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-500, #64748B);
  white-space: nowrap;
  padding: 0.625rem 1rem 0.625rem 0.75rem;
  /* Reserve right-edge room for the resize handle */
  padding-right: 1.25rem;
  user-select: none;
  -webkit-user-select: none;
}

table[data-table-controls] thead th:focus-visible {
  outline: 2px solid var(--color-brand-600, #4F46E5);
  outline-offset: -2px;
}

/* Body cells */
table[data-table-controls] tbody td,
table[data-table-controls] tbody th {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-ink-100, #F1F5F9);
  font-size: 0.875rem;           /* 14px */
  color: var(--color-ink-800, #1E293B);
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESIZE HANDLE
   Absolutely positioned inside each resizable <th> (which is sticky and
   therefore a positioned containing block).
   ═══════════════════════════════════════════════════════════════════════════ */

.table-controls-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  cursor: col-resize;
  z-index: 1;
  touch-action: none;   /* prevent scroll interfering with drag */
}

/* Visual indicator — thin vertical bar centered in the handle hit zone */
.table-controls-resize-handle::after {
  content: '';
  position: absolute;
  top: 20%;
  bottom: 20%;
  right: 3px;
  width: 2px;
  border-radius: 1px;
  background-color: var(--color-ink-200, #E2E8F0);
  transition: background-color 120ms ease;
}

.table-controls-resize-handle:hover::after,
.table-controls-resize-handle:focus-visible::after {
  background-color: var(--color-brand-600, #4F46E5);
}

.table-controls-resize-handle:focus-visible {
  outline: 2px solid var(--color-brand-600, #4F46E5);
  outline-offset: -2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLBAR  (injected before the table when data-table-controls-csv present)
   ═══════════════════════════════════════════════════════════════════════════ */

.table-controls-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.375rem 0;
  margin-bottom: 0.25rem;
}

.table-controls-csv-button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;          /* 13px */
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--color-ink-600, #475569);
  background-color: var(--color-ink-50, #F8FAFC);
  border: 1px solid var(--color-ink-200, #E2E8F0);
  border-radius: var(--ws-radius-sm, 0.375rem);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.table-controls-csv-button:hover {
  background-color: var(--color-ink-100, #F1F5F9);
  border-color: var(--color-ink-300, #CBD5E1);
  color: var(--color-ink-800, #1E293B);
}

.table-controls-csv-button:focus-visible {
  outline: 2px solid var(--color-brand-600, #4F46E5);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  table[data-table-controls] thead th,
  table[data-table-controls] tbody td,
  table[data-table-controls] tbody th {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.8125rem;        /* 13px */
  }

  .table-controls-csv-button {
    font-size: 0.75rem;          /* 12px */
    padding: 0.25rem 0.625rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .table-controls-resize-handle::after,
  .table-controls-csv-button {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .table-controls-toolbar,
  .table-controls-resize-handle {
    display: none !important;
  }

  table[data-table-controls] thead th {
    position: static;
    background-color: transparent;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GENERAL TABLE UTILITIES (chunk 057.1)
   Opt-in classes that work on plain <table> markup (NOT scoped to
   [data-table-controls]). Apply individually as needed — e.g. wrap any
   table in a .table-responsive div, opt into .table-hover on the table
   element, mark numeric cells with .table-cell--numeric. All purely
   additive — no overrides of existing rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Horizontal scroll wrapper for wide tables on narrow viewports */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Prevent a long row from pushing the page wider than the viewport */
  max-width: 100%;
}

/* Sticky <thead> — caller must ensure the scrolling container is the table
   wrapper (e.g. .table-responsive) and that the table itself is not inside
   a parent with overflow: hidden. */
.table-sticky-header thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--color-ink-50, var(--ws-ink-50, #F8FAFC));
}

.table-sticky-header thead th {
  background-color: var(--color-ink-50, var(--ws-ink-50, #F8FAFC));
}

/* Row hover */
.table-hover tbody tr {
  transition: background-color 120ms ease;
}

.table-hover tbody tr:hover {
  background-color: var(--brand-50, #eef2ff);
}

/* Zebra striping */
.table-striped tbody tr:nth-child(even) {
  background-color: var(--color-ink-50, var(--ws-ink-50, #F8FAFC));
}

.table-striped.table-hover tbody tr:nth-child(even):hover {
  background-color: var(--brand-50, #eef2ff);
}

/* Numeric cells — right-aligned, tabular figures */
.table-cell--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-family: var(--ws-font-mono, var(--font-mono, 'JetBrains Mono', ui-monospace, monospace));
}

/* Truncating cells — caller must set a max-width via inline style or wrapper */
.table-cell--truncate {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive: tighten cell padding on very narrow screens for utility tables */
@media (max-width: 768px) {
  .table-responsive {
    /* Hint to caller-provided tables: keep a minimum touch-target row height */
    -webkit-overflow-scrolling: touch;
  }

  .table-cell--truncate {
    max-width: 12rem;
  }
}

/* Reduced motion: drop hover transition */
@media (prefers-reduced-motion: reduce) {
  .table-hover tbody tr {
    transition: none;
  }
}

/* Print: drop hover background, unstick header */
@media print {
  .table-sticky-header thead,
  .table-sticky-header thead th {
    position: static;
    background-color: transparent;
  }

  .table-hover tbody tr:hover,
  .table-striped tbody tr:nth-child(even) {
    background-color: transparent;
  }
}