/* ============================================================================
   meu-perfil.css — Estilos da tela Meu Perfil (mod-meu-perfil.js)
   A3 audit: corrigir layout quebrado das tabelas (tokens, sessoes)
   ============================================================================ */

/* Tabela padrao da tela Meu Perfil — substitui inline styles quebrados */
.mp-table-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.mp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}

.mp-table thead th {
  background: #F8FAFC;
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid #E2E8F0;
}

.mp-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #F1F5F9;
  color: #0F172A;
  vertical-align: middle;
}

.mp-table tbody tr:last-child td {
  border-bottom: 0;
}

.mp-table tbody tr:hover {
  background: #F8FAFC;
}

.mp-table tbody td strong {
  font-size: 13px;
  color: #0F172A;
  font-weight: 500;
}

.mp-table tbody td code {
  background: #F1F5F9;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #1E5BAA;
}

.mp-table .mp-th-act,
.mp-table tbody td:last-child {
  text-align: right;
  width: 100px;
}

/* Empty state row */
.mp-table tbody tr td[colspan] {
  text-align: center;
  padding: 32px 16px;
  color: #94A3B8;
  font-style: italic;
}

.mp-table tbody tr td[colspan]:hover {
  background: transparent;
}