/* core/utilities.css — classes utilitárias atômicas.
 *
 * Regra: cada classe faz UMA coisa, é nomeada pelo efeito, e nunca depende
 * de outra. Usar para evitar inline styles repetidos em HTML.
 */

/* ── Visibilidade ─────────────────────────────────────────────── */

.hidden          { display: none !important; }
.invisible       { visibility: hidden !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Skeleton loading (animação) ──────────────────────────────── */

/* Bloco genérico — div com largura/altura definidos por classe ou inline */
.skeleton-block {
  display: block;
  background:
    linear-gradient(90deg,
      var(--surface-subtle) 0%,
      var(--surface-muted) 50%,
      var(--surface-subtle) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* Aplicado em <tr> dentro de <tbody> — col span definido no HTML */
.skeleton-row td {
  background:
    linear-gradient(90deg,
      var(--surface-subtle) 0%,
      var(--surface-muted) 50%,
      var(--surface-subtle) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  height: 36px;
  border: none;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Texto ────────────────────────────────────────────────────── */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--text-muted); }
.text-strong { color: var(--text-strong); font-weight: 600; }

/* ── Flex helpers ─────────────────────────────────────────────── */

.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-1        { flex: 1; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm        { gap: 8px; }
.gap-md        { gap: 12px; }
.gap-lg        { gap: 20px; }

/* ── Cursor / interação ───────────────────────────────────────── */

.clickable { cursor: pointer; }
.no-select { user-select: none; }