/* Data Table v2 Component — UI Comprehensive Refactor v2
 * Requires: tokens.css, spacing.css
 *
 * Usage:
 *   <div class="data-table-v2-wrapper">  ← responsive scroll wrapper
 *     <table class="data-table-v2">
 *       <thead>
 *         <tr>
 *           <th scope="col" class="is-sortable" aria-sort="ascending">Имя</th>
 *           <th scope="col">Email</th>
 *         </tr>
 *       </thead>
 *       <tbody>
 *         <tr>
 *           <td>Иван Петров</td>
 *           <td>ivan@example.com</td>
 *         </tr>
 *       </tbody>
 *     </table>
 *   </div>
 */

/* ── Responsive scroll wrapper ── */
.data-table-v2-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
}

/* ── Table root ── */
.data-table-v2 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);           /* 13px */
  table-layout: auto;
}

/* ── Header cells ── */
.data-table-v2 th {
  padding: var(--space-2) var(--space-3);   /* 8px 12px — compact */
  font-size: var(--font-2xs);              /* 11px */
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  background: var(--surface-card);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ── Data cells ── */
.data-table-v2 td {
  padding: var(--space-2) var(--space-3);   /* 8px 12px — compact, row ~36px */
  font-size: var(--font-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  line-height: var(--line-snug);
}

/* ── Cell truncation — opt-in via class ── */
.data-table-v2 td.col-truncate,
.data-table-v2 th.col-truncate {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Name column — nowrap + reasonable min-width ── */
.data-table-v2 td.col-name,
.data-table-v2 th.col-name {
  white-space: nowrap;
  min-width: 120px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--weight-medium);
}

/* ── Numeric / compact columns ── */
.data-table-v2 td.col-numeric,
.data-table-v2 th.col-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table-v2 td.col-center,
.data-table-v2 th.col-center {
  text-align: center;
}

/* ── Date column (compact) ── */
.data-table-v2 td.col-date,
.data-table-v2 th.col-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* ── Actions column (sticky right) ── */
.data-table-v2 td.col-actions,
.data-table-v2 th.col-actions {
  position: sticky;
  right: 0;
  background: var(--surface-card);
  text-align: right;
  white-space: nowrap;
  z-index: 2;
  width: 1%;     /* shrink to content */
  padding-right: var(--space-3);
  box-shadow: -8px 0 8px -8px rgba(0,0,0,0.4); /* subtle shadow when scrolled */
}
.data-table-v2 tbody tr:hover td.col-actions {
  background: var(--surface-hover);
}

/* ── Row hover ── */
.data-table-v2 tbody tr {
  transition: background 0.1s ease;
}

.data-table-v2 tbody tr:hover td {
  background: var(--surface-hover);
}

/* ── Last row (no bottom border) ── */
.data-table-v2 tbody tr:last-child td {
  border-bottom: none;
}

/* ── Sortable header ── */
.data-table-v2 th.is-sortable {
  cursor: pointer;
  user-select: none;
  padding-right: var(--space-6);  /* space for sort icon */
  position: relative;
}

.data-table-v2 th.is-sortable:hover {
  color: var(--text-secondary);
}

/* Sort indicator via ::after pseudo — replaced by JS-injected icon in practice */
.data-table-v2 th.is-sortable::after {
  content: "↕";
  position: absolute;
  right: var(--space-3);
  opacity: 0.3;
  font-size: 10px;
}

.data-table-v2 th.is-sortable[aria-sort="ascending"]::after  { content: "↑"; opacity: 0.8; }
.data-table-v2 th.is-sortable[aria-sort="descending"]::after { content: "↓"; opacity: 0.8; }

/* ── Inline expand row (analytics channels density redesign) ─────────────── */
/* Target: <tr data-expanded> toggled by JS + the adjacent <tr class="expand-content"> */

/* Mark the trigger row so it stays visually distinct when expanded */
.data-table-v2 tbody tr[data-expanded] td {
  background: var(--surface-elevated);
}

/* Expand-content row: elevated surface, suppress side borders */
.data-table-v2 tbody tr.expand-content td {
  background: var(--surface-elevated);
  border-left: none;
  border-right: none;
  padding: var(--space-3) var(--space-4);
  /* Keep bottom separator */
  border-bottom: 1px solid var(--border-subtle);
}

/* Prevent expand-content row from getting the default hover highlight */
.data-table-v2 tbody tr.expand-content:hover td {
  background: var(--surface-elevated);
}

/* ── Channel analytics table rows ────────────────────────────────────────── */
/* 44px-tall rows for the dense analytics channels table.
 * Applied by adding class="channel-analytics-row" to <tr> elements.
 * Distinct from the existing .channel-row (flex-based list component). */

/* Row height: 44px enforced via line-height + padding on <td> */
.data-table-v2 tbody tr.channel-analytics-row td {
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
  transition: background 150ms ease-out;
}

.data-table-v2 tbody tr.channel-analytics-row:hover td {
  background: var(--surface-hover);
  transition: background 150ms ease-out;
}

/* ── Avatar circle ── */
/* 28×28 circular element: favicon image or 2-letter initial fallback */
.avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);       /* full pill */
  background: var(--surface-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-semi);
  color: var(--text-muted);
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Favicon image inside avatar circle */
.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Avatar cell: fixed 40px column */
.data-table-v2 th.col-avatar,
.data-table-v2 td.col-avatar {
  width: 40px;
  min-width: 40px;
  padding-right: 0;
  text-align: center;
}

/* ── Channel name composite line ── */
/* Single flex row: primary name + separator dot + handle/subs in muted */
.channel-name-cell {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.channel-name-cell__primary {
  font-size: var(--font-sm);             /* 13px */
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

.channel-name-cell__sep {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: var(--font-sm);
}

.channel-name-cell__secondary {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Tier badge cell — badge-v2 variant wiring ── */
/* Semantic mapping: S→success, A→info, B→warning, C/D/F→error.
 * badge-v2.css already defines --success/--info/--warning/--error.
 * No new CSS needed beyond the markup. This comment documents the contract. */

/* ── External link icon cell ── */
/* Replace truncated URL string with 14×14 ↗ icon (i-external-link from sprite) */
.col-link {
  width: 1%;            /* shrink to content */
  white-space: nowrap;
  text-align: center;
}

.col-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 150ms ease-out;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
}

.col-link a:hover {
  color: var(--text-secondary);
  background: var(--surface-hover);
}

.col-link .icon {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* ── Quality bar + score cell ── */
/* Flex column: bar on top, tabular score below — or inline row per markup */
.quality-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.quality-cell__score {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  min-width: 20px;
  text-align: right;
}

/* ── Responsive: block layout on narrow screens ── */
@media (max-width: 768px) {
  .data-table-v2-wrapper {
    display: block;
    overflow-x: auto;
  }

  .data-table-v2 th,
  .data-table-v2 td {
    padding: var(--space-2) var(--space-3);
  }
}