/* Channel Segments — channels-intelligence-redesign 2026-06-23
 * Net-new styles for the Channels intelligence table. Everything else reuses
 * data-table-v2 / quality-bar-inline / badge-v2 / sparkline-cell / kpi-card.
 */

/* ── 4px segment left-border on each row (peripheral-vision triage signal) ── */
.data-table-v2 tbody tr.segment--premium > td:first-child { border-left: 4px solid var(--color-success-500); }
.data-table-v2 tbody tr.segment--review  > td:first-child { border-left: 4px solid var(--color-warning-500); }
.data-table-v2 tbody tr.segment--spammy  > td:first-child { border-left: 4px solid var(--color-error-500); }
.data-table-v2 tbody tr.segment--silent  > td:first-child { border-left: 4px solid var(--text-muted); }

/* ── Collapsible segment group header row ── */
.data-table-v2 tbody tr.segment-group-header td {
  background: var(--surface-elevated);
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 4px 12px;
  cursor: pointer;
  user-select: none;
}
.data-table-v2 tbody tr.segment-group-header:hover td { background: var(--surface-hover); color: var(--text-primary); }
.segment-group-header .seg-chevron { width: 12px; height: 12px; vertical-align: middle; margin-right: 6px; }
.segment-group-header .seg-count { color: var(--text-muted); margin-left: 8px; }

/* ── Spam% / Dupe% cleanliness cell: value above the inverted bar ── */
.cleanliness-cell { display: flex; flex-direction: column; gap: 3px; }
.cleanliness-cell__value { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1; }
.cleanliness-cell__value.text-clean  { color: var(--color-success-500); }
.cleanliness-cell__value.text-warn   { color: var(--color-warning-500); }
.cleanliness-cell__value.text-danger { color: var(--color-error-500); }

/* ── Per-channel actions cell ── */
.channel-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.ch-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: none; background: transparent;
  color: var(--text-muted); border-radius: var(--radius-xs); cursor: pointer; text-decoration: none;
}
.ch-act:hover { color: var(--text-secondary); background: var(--surface-hover); }
.ch-act:disabled { opacity: 0.5; cursor: default; }
.ch-act .icon { width: 14px; height: 14px; pointer-events: none; }
.ch-act--toggle.is-on { color: var(--color-success-500); }

/* ── Mobile: hide secondary columns; .data-table-v2-wrapper handles scroll ── */
@media (max-width: 768px) {
  .data-table-v2 .col-segment, .data-table-v2 .col-dupe,
  .data-table-v2 .col-tier, .data-table-v2 .col-sparkline { display: none; }
  .cleanliness-cell .quality-bar-inline { display: none; }
}