/* ===== Configurações -> Usuários e permissões ===== */

.cfg-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 880px;
}

.cfg-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--bg-card);
}
.cfg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.cfg-card-head h3 { margin: 0; font-size: 15px; }

.cfg-hint { margin: 4px 0 12px; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.cfg-empty { font-size: 13px; color: var(--text-muted); }

.cfg-list { display: flex; flex-direction: column; }
.cfg-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  border-top: 1px solid var(--border-light);
}
.cfg-list-item strong { display: block; font-size: 13.5px; }
.cfg-sub { font-size: 12px; color: var(--text-secondary); }
.cfg-list-acoes { display: flex; gap: 2px; flex-shrink: 0; }

.cfg-modulos, .cfg-perfil-abas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 14px;
}
.cfg-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.cfg-toggle input { width: auto; flex-shrink: 0; }

.cfg-perfil-abas { margin-top: 4px; }

.cfg-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-header);
  color: var(--text-muted);
}
.cfg-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.cfg-status.on { background: color-mix(in srgb, var(--color-success) 20%, transparent); color: var(--color-success); }
.cfg-status.off { background: var(--bg-header); color: var(--text-muted); }