/* Foundare - camada de estilo (complementa o Tailwind CDN).
   Tipografia Inter, focus rings elegantes e utilitários de componente. */

:root {
  --brand: #7c5cff;
  --brand-600: #6d3eef;
}

* { -webkit-font-smoothing: antialiased; }

body {
  font-feature-settings: 'cv05' 1, 'ss01' 1, 'cv11' 1;
  letter-spacing: -0.011em;
}

/* Títulos um pouco mais apertados, como SaaS moderno. */
h1, h2, h3 { letter-spacing: -0.02em; }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(212 212 216 / 0.7); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(161 161 170 / 0.8); background-clip: padding-box; }

/* ---- Inputs / selects: foco com ring da marca ---- */
.field {
  width: 100%;
  font-size: 0.875rem;
  color: #27272a;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 0.625rem;
  padding: 0.5rem 0.75rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field::placeholder { color: #a1a1aa; }
.field:hover { border-color: #d4d4d8; }
.field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(124 92 255 / 0.16);
}

/* Select inline compacto (usado nas tabelas) */
.field-sm {
  font-size: 0.8125rem;
  color: #3f3f46;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.field-sm:hover { border-color: #c4b5fd; }
.field-sm:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(124 92 255 / 0.14);
}

/* Checkbox com a cor da marca */
input[type="checkbox"] {
  width: 1rem; height: 1rem;
  border-radius: 0.3rem;
  border: 1.5px solid #d4d4d8;
  accent-color: var(--brand);
  cursor: pointer;
}

/* ---- Botões ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-size: 0.875rem; font-weight: 600;
  border-radius: 0.625rem;
  padding: 0.5rem 0.9rem;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease, border-color .15s ease;
  cursor: pointer; white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #7c5cff 0%, #6d3eef 100%);
  box-shadow: 0 1px 2px rgb(38 18 96 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.btn-primary:hover { background: linear-gradient(180deg, #8a6dff 0%, #6d3eef 100%); box-shadow: 0 2px 8px -2px rgb(109 62 239 / 0.5); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(124 92 255 / 0.3); }
.btn-secondary {
  color: #3f3f46;
  background: #fff;
  border: 1px solid #e4e4e7;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
}
.btn-secondary:hover { background: #fafafa; border-color: #d4d4d8; }
.btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(124 92 255 / 0.18); }

/* ---- Card ---- */
.card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

/* ---- Item de navegação ---- */
.nav-link {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.625rem;
  color: #a1a1aa;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: rgb(255 255 255 / 0.05); color: #f4f4f5; }
.nav-link .nav-ico { color: #71717a; transition: color .15s ease; }
.nav-link:hover .nav-ico { color: #d4d4d8; }
.nav-link.is-active {
  background: linear-gradient(180deg, rgb(124 92 255 / 0.18), rgb(124 92 255 / 0.1));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(124 92 255 / 0.35);
}
.nav-link.is-active .nav-ico { color: #beadff; }

/* ---- Tabela refinada ---- */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tbl thead th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a1a1aa;
  padding: 0 0.75rem 0.65rem;
  border-bottom: 1px solid #e4e4e7;
}
.tbl tbody td { padding: 0.7rem 0.75rem; border-bottom: 1px solid #f4f4f5; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s ease; }
.tbl tbody tr:hover { background: #fafafa; }

/* Tabela com 1ª coluna flexível: Nome à esquerda absorve a sobra,
   métricas agrupadas à direita (sem buracos enormes entre as colunas). */
.tbl-grow th:first-child, .tbl-grow td:first-child { width: 100%; }
.tbl-grow th, .tbl-grow td { white-space: nowrap; }
.tbl-grow th:not(:first-child), .tbl-grow td:not(:first-child) { padding-left: 1.5rem; }

/* Respiro nas bordas: o conteúdo não cola na borda do card */
.tbl th:first-child, .tbl td:first-child { padding-left: 1.25rem; }
.tbl th:last-child, .tbl td:last-child { padding-right: 1.25rem; }

/* ---- Badges de status ---- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  text-transform: capitalize;
  white-space: nowrap;
}
.badge .dot { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: currentColor; }