/* ============================================================
   RottoSystem — estilos base (CSS puro).
   O Tailwind via CDN NÃO processa @apply em arquivo externo, então as
   classes de componente (.card, .panel, .badge...) são escritas à mão aqui.
   Fontes: Fira Sans (texto) + Fira Code (números/dados).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }
body { font-family: 'Fira Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* Números/dados em fonte monoespaçada tabular (alinham bonito em colunas) */
.font-data { font-family: 'Fira Code', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.tabular-nums { font-variant-numeric: tabular-nums; }
code { font-family: 'Fira Code', monospace; }

/* ---- Cards de resumo ---- */
.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.card-label { font-size: 0.7rem; font-weight: 500; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
.card-value { margin-top: 0.25rem; font-size: 1.5rem; line-height: 1.2; font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; }

/* ---- Painéis ---- */
.panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); padding: 1.25rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.panel-title { font-size: 0.875rem; font-weight: 600; color: #0f172a; }

/* ---- Tabelas ---- */
.th { padding: 0.75rem 1rem; font-weight: 600; white-space: nowrap; }
.td { padding: 0.75rem 1rem; white-space: nowrap; }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; text-transform: capitalize; }

/* ---- Link ---- */
.link { font-size: 0.75rem; font-weight: 500; color: #1E40AF; }
.link:hover { color: #1E3A8A; }

/* Scrollbars discretas */
::-webkit-scrollbar { height: 9px; width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }