/* ═══════════════════════════════════════════════════════════════════
   TABLES.CSS — DataTable, toolbar, paginação, rank badges.
   Anatomia exata do _ref2/data-components.css:
     .data-table-wrap → .data-table-header → .data-table-scroll
     → .data-table → .data-table-footer → .data-table-pagination
   Fonte única de tokens: _ref2/tokens.css via base.css
   ⚠ Nomes de classe preservados — JS bound throughout.
   ═══════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   TABLE TOOLBAR (acima da tabela)
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .table-toolbar — layout container for search + actions */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) 0;
  flex-wrap: wrap;
}

/* ── Campo de busca ─────────────────────────────────────────────── */

/* PRESERVED: .table-search-wrap — search wrapper */
.table-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 340px;
}

.table-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  font-size: 11px;
  pointer-events: none;
}

/* PRESERVED: .table-search-input — JS reads search value from this */
.table-search-input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-xs, 11px);
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
  color: var(--color-text-sub);
  background: var(--color-surface-03);
  transition:
    border-color var(--duration-fast) var(--ease-out-quart),
    box-shadow var(--duration-fast);
  outline: none;
}

.table-search-input:focus {
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.table-search-input::placeholder { color: var(--color-text-disabled); }

/* PRESERVED: .table-count — JS writes record count into this */
.table-count {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

/* ════════════════════════════════════════════════════════════════════
   DATA TABLE WRAP — container principal da tabela
   Anatomia do design system: wrap → header → scroll → table → footer
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .table-wrapper — outer wrapper, JS may target for scroll */
.table-wrapper,
.data-table-wrap {
  background: var(--color-surface-02);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  min-width: 0;
}

/* Cabeçalho do container da tabela (título + contagem + ações) */
/* PRESERVED: .data-table-header — layout header above the table */
.data-table-header {
  padding: var(--space-5, 20px) var(--space-6, 24px) var(--space-5, 20px) var(--space-7, 28px);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  flex-wrap: wrap;
  background: var(--color-surface-03);
}

.data-table-header__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  min-width: 0;
}

.data-table-header__title {
  font-size: var(--font-size-base, 15px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

.data-table-header__count {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-tertiary);
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

/* ── Scroll horizontal seguro ────────────────────────────────────── */

/* PRESERVED: .data-table-scroll — scroll container */
.data-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-05) transparent;
}

.data-table-scroll::-webkit-scrollbar { height: 4px; }
.data-table-scroll::-webkit-scrollbar-track { background: transparent; }
.data-table-scroll::-webkit-scrollbar-thumb {
  background: var(--color-surface-05);
  border-radius: var(--radius-pill, 999px);
}

/* ════════════════════════════════════════════════════════════════════
   DATA TABLE
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .data-table — core table, JS manipulates rows/cells */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm, 13px);
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

/* ── Cabeçalho ─────────────────────────────────────────────────────── */

/* PRESERVED: thead th — JS sets .sorted class on active column */
.data-table thead { position: sticky; top: 0; z-index: 1; }
.data-table thead th {
  padding: var(--space-4, 16px) var(--space-5, 20px);
  text-align: left;
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-disabled);
  background: var(--color-surface-02);
  border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
  user-select: none;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

.data-table thead th:first-child { padding-left: var(--space-7, 28px); }
.data-table thead th:last-child  { padding-right: var(--space-7, 28px); text-align: right; }

/* PRESERVED: .sortable — JS sets cursor/interactivity */
.data-table thead th.sortable,
.data-table th.is-sortable {
  cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.data-table thead th.sortable:hover,
.data-table th.is-sortable:hover {
  background: var(--color-surface-03);
  color: var(--color-text-tertiary);
}

/* PRESERVED: .sorted — JS toggles this to show active sort column */
.data-table thead th.sorted,
.data-table th.is-sorted {
  color: var(--color-text-primary);
}

/* Sort icon */
.sort-icon,
.data-table__sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-left: var(--space-1, 4px);
  opacity: 0.4;
  vertical-align: middle;
}

.data-table thead th.sorted .sort-icon,
.data-table th.is-sorted .data-table__sort-icon {
  opacity: 1;
  color: var(--color-text-primary);
}

/* ── Body rows ─────────────────────────────────────────────────────── */

/* PRESERVED: tbody tr — JS may add .is-selected */
.data-table tbody tr {
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--duration-fast);
  cursor: pointer;
}

.data-table tbody tr:last-child  { border-bottom: none; }
.data-table tbody tr:hover       { background: var(--color-surface-03); }
.data-table tbody tr.is-selected { background: var(--color-surface-04); }

/* ── Células ─────────────────────────────────────────────────────── */

/* PRESERVED: tbody td — cell classes set by JS */
.data-table tbody td {
  padding: var(--space-4, 16px) var(--space-5, 20px);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary);
  vertical-align: middle;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.45;
}

.data-table tbody td:first-child {
  padding-left: var(--space-7, 28px);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium, 500);
  white-space: normal;
  min-width: 180px;
  max-width: 280px;
}

.data-table tbody td:last-child {
  padding-right: var(--space-7, 28px);
  text-align: right;
}

/* PRESERVED: .col-mono — mono font for order IDs / codes */
.col-mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

/* ── Célula com título + subtítulo ────────────────────────────────── */

/* PRESERVED: .data-table__cell-title — compound cell */
.data-table__cell-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.data-table__cell-main {
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
  overflow-wrap: break-word;
}

.data-table__cell-sub {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-tertiary);
}

/* ── Checkbox de seleção ─────────────────────────────────────────── */

/* PRESERVED: .data-table__check — JS toggles .is-checked */
.data-table__check {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs, 2px);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    border-color var(--duration-fast),
    background var(--duration-fast);
}

tr.is-selected .data-table__check,
.data-table__check.is-checked {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

/* ── Status badge na tabela ──────────────────────────────────────── */

/* PRESERVED: .table-status + modifiers — JS sets these */
.table-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

.table-status__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.table-status--active   { color: var(--color-semantic-positive-text); }
.table-status--active .table-status__dot  { background: var(--color-semantic-positive); }
.table-status--draft    { color: var(--color-text-tertiary); }
.table-status--draft .table-status__dot   { background: rgba(255,255,255,0.2); }
.table-status--review   { color: var(--color-semantic-warning-text); }
.table-status--review .table-status__dot  { background: var(--color-semantic-warning); }
.table-status--archived { color: var(--color-text-disabled); }
.table-status--archived .table-status__dot { background: rgba(255,255,255,0.1); }
.table-status--error    { color: var(--color-semantic-negative-text); }
.table-status--error .table-status__dot   { background: var(--color-semantic-negative); }
.table-status--info     { color: var(--color-semantic-info-text); }
.table-status--info .table-status__dot    { background: var(--color-semantic-info); }

/* ── Ação discreta na linha ────────────────────────────────────────── */

/* PRESERVED: .table-action — action button within table row */
.table-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-tertiary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--duration-fast),
    border-color var(--duration-fast),
    background var(--duration-fast);
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

.table-action:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
  background: var(--color-surface-04);
}

/* ── Empty state da tabela ─────────────────────────────────────────── */

/* PRESERVED: .table-empty — JS shows when no rows match */
.table-empty,
.data-table__empty {
  padding: var(--space-16, 64px) var(--space-8, 32px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4, 16px);
}

.table-empty-icon,
.data-table__empty-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-03);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 8px);
  color: var(--color-text-disabled);
  font-size: 22px;
}

.table-empty-text,
.data-table__empty-title {
  font-size: var(--font-size-base, 15px);
  font-weight: var(--font-weight-regular, 400);
  color: var(--color-text-secondary);
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

.data-table__empty-text {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-tertiary);
  max-width: 320px;
  line-height: var(--line-height-relaxed, 1.68);
  overflow-wrap: break-word;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

/* ════════════════════════════════════════════════════════════════════
   RODAPÉ E PAGINAÇÃO
   ════════════════════════════════════════════════════════════════════ */

/* Rodapé da tabela */
.data-table-footer {
  padding: var(--space-4, 16px) var(--space-7, 28px);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  flex-wrap: wrap;
  background: var(--color-surface-01);
}

.data-table-footer__info {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-disabled);
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

/* ── Paginação ─────────────────────────────────────────────────────── */

/* PRESERVED: .table-pagination — JS reads page from this */
.table-pagination,
.data-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px) 0;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
}

.pagination-info {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

/* PRESERVED: .pagination-btn, .active — JS sets active page */
.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-tertiary);
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  transition:
    color var(--duration-fast),
    border-color var(--duration-fast),
    background var(--duration-fast);
}

.pagination-btn:hover:not(:disabled) {
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
  background: var(--color-surface-03);
}

/* PRESERVED: .pagination-btn.active — JS sets active page number */
.pagination-btn.active,
.pagination-btn.is-active {
  color: var(--color-text-primary);
  background: var(--color-surface-04);
  border-color: var(--color-border-default);
  font-weight: var(--font-weight-bold, 700);
}

.pagination-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════
   RANK BADGES
   PRESERVED: .rank-badge + .top1/.top2/.top3/.other — JS bound
   ════════════════════════════════════════════════════════════════════ */

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill, 999px);
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-bold, 700);
  flex-shrink: 0;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

.rank-badge.top1 {
  background: rgba(201, 168, 76, 0.15);
  color: var(--color-semantic-warning-text);
  border: 1px solid var(--color-semantic-warning-border);
}
.rank-badge.top2 {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-sub);
  border: 1px solid var(--color-border-default);
}
.rank-badge.top3 {
  background: rgba(167, 139, 250, 0.10);
  color: #A78BFA;
  border: 1px solid rgba(167, 139, 250, 0.22);
}
.rank-badge.other {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-secondary);
  font-size: 9px;
  border: 1px solid var(--color-border-subtle);
}


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS — Mobile-first
   ════════════════════════════════════════════════════════════════════ */

/* ── ≤1024 px — Tablet landscape ─────────────────────────────────── */
@media (max-width: 1024px) {
  /* Table header: reduzir padding */
  .data-table-header { padding: var(--space-4, 16px) var(--space-5, 20px); }

  /* Cells: padding reduzido */
  .data-table thead th { padding: var(--space-3, 12px) var(--space-4, 16px); }
  .data-table tbody td { padding: var(--space-3, 12px) var(--space-4, 16px); }

  /* First/last col inset */
  .data-table thead th:first-child { padding-left: var(--space-5, 20px); }
  .data-table thead th:last-child  { padding-right: var(--space-5, 20px); }
  .data-table tbody td:first-child  { padding-left: var(--space-5, 20px); min-width: 150px; }
  .data-table tbody td:last-child   { padding-right: var(--space-5, 20px); }

  /* Footer */
  .data-table-footer { padding: var(--space-3, 12px) var(--space-5, 20px); }
}

/* ── ≤768 px — Tablet portrait ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Table wrapper: garantir scroll horizontal */
  .table-wrapper,
  .data-table-wrap { overflow: hidden; }

  /* Scroll horizontal — obrigatório em tablet/mobile */
  .data-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Table: largura mínima para não comprimir demais */
  .data-table { min-width: 600px; }

  /* Table header container */
  .data-table-header { padding: var(--space-3, 12px) var(--space-4, 16px); flex-wrap: wrap; gap: var(--space-2, 8px); }
  .data-table-header__title { font-size: 13px; }

  /* Table cells */
  .data-table thead th { padding: var(--space-3, 12px) var(--space-3, 12px); font-size: 9px; }
  .data-table tbody td { padding: var(--space-3, 12px) var(--space-3, 12px); font-size: 12px; }

  /* First/last col inset reduzido */
  .data-table thead th:first-child { padding-left: var(--space-4, 16px); }
  .data-table thead th:last-child  { padding-right: var(--space-4, 16px); }
  .data-table tbody td:first-child  { padding-left: var(--space-4, 16px); min-width: 130px; }
  .data-table tbody td:last-child   { padding-right: var(--space-4, 16px); }

  /* Footer */
  .data-table-footer { padding: var(--space-3, 12px) var(--space-4, 16px); flex-wrap: wrap; }

  /* Toolbar */
  .table-toolbar { flex-direction: column; align-items: flex-start; gap: var(--space-2, 8px); }
  .table-search-wrap { max-width: 100%; width: 100%; }

  /* Paginação */
  .table-pagination,
  .data-table-pagination { flex-direction: column; align-items: center; gap: var(--space-2, 8px); }
  .pagination-info { text-align: center; }

  /* Botões de paginação */
  .pagination-btn { width: 36px; height: 36px; }
}

/* ── ≤480 px — Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Table: largura mínima maior para garantir legibilidade */
  .data-table { min-width: 500px; font-size: 11px; }

  /* Cabeçalho da tabela */
  .data-table thead th { padding: 7px 10px; font-size: 9px; letter-spacing: 0.07em; }

  /* Células */
  .data-table tbody td {
    padding:   8px 10px;
    font-size: 11px;
    min-font-size: 11px; /* nunca abaixo de 11px */
  }

  /* First/last col */
  .data-table thead th:first-child { padding-left: var(--space-3, 12px); }
  .data-table thead th:last-child  { padding-right: var(--space-3, 12px); }
  .data-table tbody td:first-child  { padding-left: var(--space-3, 12px); min-width: 110px; max-width: 200px; }
  .data-table tbody td:last-child   { padding-right: var(--space-3, 12px); }

  /* Mono: tamanho mínimo respeitado */
  .col-mono { font-size: 10px; }

  /* Table header */
  .data-table-header { padding: var(--space-3, 12px); }
  .data-table-header__title { font-size: 12px; }
  .data-table-header__count { font-size: 10px; }

  /* Footer */
  .data-table-footer { padding: var(--space-2, 8px) var(--space-3, 12px); }
  .data-table-footer__info { font-size: 10px; }

  /* Toolbar: busca full-width */
  .table-toolbar      { padding: 0; }
  .table-search-wrap  { max-width: 100%; min-width: 0; }
  .table-search-input { font-size: 12px; padding: 8px 12px 8px 30px; }
  .table-count        { font-size: 10px; }

  /* Paginação: botões touch-friendly */
  .pagination-btn { width: 40px; height: 40px; font-size: 11px; }
  .pagination-controls { gap: var(--space-1, 4px); }

  /* Empty state: compacto */
  .table-empty,
  .data-table__empty { padding: var(--space-8, 32px) var(--space-4, 16px); gap: var(--space-3, 12px); }
  .table-empty-icon,
  .data-table__empty-icon { width: 40px; height: 40px; font-size: 18px; }

  /* Rank badges: ligeiramente menores */
  .rank-badge { width: 20px; height: 20px; font-size: 9px; }

  /* Ações de linha */
  .table-action { padding: var(--space-2, 8px); min-height: 40px; }
}

/* ── ≤360 px — Small mobile ───────────────────────────────────────── */
@media (max-width: 360px) {
  .data-table { min-width: 440px; font-size: 11px; }

  .data-table thead th { padding: 6px 8px; font-size: 8px; }
  .data-table tbody td { padding: 6px 8px; font-size: 11px; }

  .data-table tbody td:first-child { min-width: 90px; }

  .data-table-header { padding: var(--space-2, 8px); }
  .data-table-footer { padding: var(--space-2, 8px); }

  .pagination-btn { width: 36px; height: 36px; }
}

/* ── Touch: desabilitar hover ─────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .data-table tbody tr:hover  { background: transparent; }
  .data-table tbody tr.is-selected { background: var(--color-surface-04); }

  .table-action:hover {
    color:       var(--color-text-tertiary);
    border-color: transparent;
    background:  transparent;
  }

  /* Garantir touch targets mínimos */
  .data-table tbody td { min-height: 44px; }
  .pagination-btn      { min-width: 44px; min-height: 44px; }
  .table-action        { min-height: 44px; padding: 0 var(--space-3, 12px); }
}