/* ═══════════════════════════════════════════════════════════════════
   TABLES.CSS — DataTable, toolbar, paginação, rank badges.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Table Toolbar ───────────────────────────────────────────────── */
.table-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-4);
  padding:         var(--sp-3) 0 var(--sp-3);
  flex-wrap:       wrap;
}

.table-search-wrap {
  position:  relative;
  flex:      1;
  min-width: 200px;
  max-width: 380px;
}
.table-search-icon {
  position:  absolute;
  left:      12px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--c-text-tertiary);
  font-size: 12px;
  pointer-events: none;
}
.table-search-input {
  width:         100%;
  padding:       8px 12px 8px 34px;
  border:        1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size:     var(--text-sm);
  font-family:   var(--font-sans);
  color:         var(--c-text-primary);
  background:    var(--c-surface);
  transition:    all var(--t-fast);
}
.table-search-input:focus {
  outline:      none;
  border-color: var(--c-primary);
  box-shadow:   var(--shadow-focus);
}
.table-search-input::placeholder { color: var(--c-text-tertiary); }

.table-count {
  font-size:  var(--text-sm);
  color:      var(--c-text-tertiary);
  white-space:nowrap;
}

/* ── Table Wrapper (scroll horizontal) ──────────────────────────── */
.table-wrapper {
  overflow-x:    auto;
  border:        1px solid var(--c-divider);
  border-radius: var(--r-lg);
  outline:       none;
}

/* ── Data Table ──────────────────────────────────────────────────── */
.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-sm);
}

/* Head */
.data-table thead { position: sticky; top: 0; z-index: 1; }
.data-table thead th {
  padding:           var(--sp-3) var(--sp-4);
  background:        var(--c-neutral-light);
  border-bottom:     2px solid var(--c-divider);
  color:             var(--c-text-secondary);
  font-size:         var(--text-xs);
  font-weight:       700;
  text-transform:    uppercase;
  letter-spacing:    .06em;
  white-space:       nowrap;
  user-select:       none;
}
.data-table thead th.sortable {
  cursor:  pointer;
  transition:background var(--t-fast);
}
.data-table thead th.sortable:hover { background: #E8EFF5; }
.data-table thead th.sorted { color:var(--c-primary); }

.sort-icon {
  margin-left: 5px;
  font-size:   10px;
  opacity:     .6;
}
.data-table thead th.sorted .sort-icon { opacity: 1; color: var(--c-primary); }

/* Body */
.data-table tbody tr {
  border-bottom: 1px solid var(--c-divider);
  transition:    background var(--t-fast);
}
.data-table tbody tr:last-child   { border-bottom: none; }
.data-table tbody tr:hover        { background: var(--c-surface-hover); }

.data-table tbody td {
  padding:    var(--sp-3) var(--sp-4);
  color:      var(--c-text-primary);
  vertical-align: middle;
  max-width:  220px;
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Coluna mono (order_id) */
.col-mono { font-family: var(--font-mono); font-size: var(--text-xs); color:var(--c-text-tertiary); }

/* ── Empty state dentro da tabela ─────────────────────────────────── */
.table-empty {
  padding:    var(--sp-12) var(--sp-6);
  text-align: center;
}
.table-empty-icon { font-size:32px; color:var(--c-text-tertiary); margin-bottom:var(--sp-3); opacity:.4; }
.table-empty-text { font-size:var(--text-sm); color:var(--c-text-tertiary); margin-bottom:var(--sp-1); }

/* ── Paginação ───────────────────────────────────────────────────── */
.table-pagination {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--sp-3) 0;
  flex-wrap:       wrap;
  gap:             var(--sp-3);
}
.pagination-info {
  font-size:  var(--text-sm);
  color:      var(--c-text-tertiary);
  white-space:nowrap;
}
.pagination-controls {
  display:     flex;
  align-items: center;
  gap:         3px;
}
.pagination-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       32px;
  height:          32px;
  padding:         0 var(--sp-2);
  border:          1px solid var(--c-border);
  border-radius:   var(--r-md);
  background:      var(--c-surface);
  color:           var(--c-text-secondary);
  font-size:       var(--text-sm);
  font-weight:     500;
  transition:      all var(--t-fast);
}
.pagination-btn:hover:not(:disabled) { background:var(--c-primary-light); color:var(--c-primary); border-color:var(--c-primary); }
.pagination-btn.active { background:var(--c-primary); color:#fff; border-color:var(--c-primary); font-weight:700; }
.pagination-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ── Rank Badges (SellersTable, PrescribersTable) ───────────────── */
.rank-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  border-radius:   var(--r-full);
  font-size:       var(--text-xs);
  font-weight:     700;
}
.rank-badge.top1 { background:#FEF3C7; color:#92400E; border:1px solid #FCD34D; }
.rank-badge.top2 { background:#F1F5F9; color:#64748B; border:1px solid #CBD5E1; }
.rank-badge.top3 { background:#FEF3C7; color:#B45309; border:1px solid #F59E0B; }
.rank-badge.other { background:var(--c-neutral-light); color:var(--c-text-tertiary); font-size:10px; }