/* NOBETA REVENUE CENTER — DESIGN SYSTEM v1.0.0 (2026-06-29, Nobeta Product Team).
   Tokens, escalas e componentes reutilizaveis; nao sobrescreve o legado de proposito.
   Extraido do <style id="nb-design-system"> na Fase 9 — o id era so documental, nada o lia
   (nenhum JS do projeto toca em styleSheets/insertRule).
   Carrega DEPOIS do base.css: e a ordem que o inline tinha. */

/* ============================================================
   1. TIPOGRAFIA — Escala XS → XXL
   Baseada no inventário real do sistema:
   Cluster dominante 10-14px (corpo), 16-20px (títulos), 26-28px (KPIs)
============================================================ */
:root {
  --text-xs:   10px;   /* metadados, timestamps, labels de coluna */
  --text-sm:   12px;   /* texto secundário, badges, pills */
  --text-md:   14px;   /* corpo principal, listas, tabelas — base do sistema */
  --text-lg:   16px;   /* títulos de seção, sub-headers */
  --text-xl:   20px;   /* títulos de módulo, headers de card */
  --text-xxl:  28px;   /* valores de KPI, números de destaque */

  --font-normal: 400;
  --font-medium: 500;
  --font-semi:   600;
  --font-bold:   700;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.8;
}

/* ============================================================
   2. PALETA SEMÂNTICA
   Papéis fixos — a cor comunica o significado, não a estética.
   Mapeados sobre as variáveis legadas existentes onde possível.
============================================================ */
:root {
  /* Papéis de interface */
  --color-nav:    var(--accent);          /* #6C63FF — navegação, links, item ativo */
  --color-action: var(--yellow);          /* #FBBF24 — ação primária, CTA */
  --color-ok:     #2ecc71;               /* positivo, confirmado, sucesso */
  --color-urgent: #e74c3c;               /* urgente, erro, crítico */
  --color-warn:   #f39c12;               /* atenção, aviso moderado */
  --color-info:   var(--muted);          /* informativo, secundário */

  /* Sistema de prioridade 🔴🟡⚪ — aplicação universal */
  --priority-urgent: var(--color-urgent);   /* 🔴 Urgente — ação imediata */
  --priority-warn:   var(--color-action);   /* 🟡 Atenção — tratar em breve */
  --priority-info:   var(--color-info);     /* ⚪ Informativo — consulta */

  /* Backgrounds de prioridade (versão suave para uso em badges/cards) */
  --priority-urgent-bg: rgba(231,76,60,.13);
  --priority-warn-bg:   rgba(251,191,36,.13);
  --priority-info-bg:   rgba(120,128,164,.10);
  --priority-ok-bg:     rgba(46,204,113,.13);

  /* Superfícies interativas */
  --surface-hover:    rgba(108,99,255,.06);   /* hover de linhas e itens */
  --surface-active:   rgba(108,99,255,.12);   /* item selecionado/ativo */
  --surface-modal:    var(--surface2);         /* fundo de modais */
  --surface-overlay:  rgba(0,0,0,.55);         /* overlay de modal */
}

/* ============================================================
   3. ESPAÇAMENTO — Escala XS → XXL
   Base 4px. Todos os componentes devem usar essas variáveis.
============================================================ */
:root {
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-xxl:  48px;

  /* Aliases semânticos para contextos comuns */
  --card-padding:    var(--space-lg) var(--space-lg);   /* padding interno de cards */
  --section-gap:     var(--space-md);                    /* gap entre seções */
  --card-gap:        12px;                               /* gap entre cards em grade */
}

/* ============================================================
   4. BORDAS E RAIOS — Escala SM → Full
   Baseada no inventário: 8px domina (108x), depois 12px, 6px, 10px
============================================================ */
:root {
  --radius-sm:    4px;      /* tags compactas, inputs */
  --radius-md:    8px;      /* padrão geral — alinhado ao --radius existente */
  --radius-lg:    12px;     /* cards, modais */
  --radius-xl:    20px;     /* cards grandes, painéis */
  --radius-full:  9999px;   /* pills, badges circulares, avatares */

  --border-base:    1px solid var(--border);
  --border-muted:   1px solid var(--border2);
  --border-accent:  1px solid var(--color-nav);
  --border-urgent:  1px solid var(--color-urgent);
  --border-warn:    1px solid var(--color-action);
}

/* ============================================================
   5. ELEVAÇÃO E SOMBRA
   Regra: cards e listas usam borda sem sombra.
   Sombra apenas em modais e dropdowns flutuantes.
============================================================ */
:root {
  --shadow-none: none;
  --shadow-sm:   0 2px 12px rgba(0,0,0,.18);   /* modais, dropdowns */
  --shadow-md:   0 8px 32px rgba(0,0,0,.28);   /* modais grandes */
}

/* ============================================================
   6. TRANSIÇÕES
   Padrão único — baseado no inventário (all .15s domina)
============================================================ */
:root {
  --transition:       all .15s ease;
  --transition-fast:  all .10s ease;
  --transition-slow:  all .25s ease;
}

/* ============================================================
   7. COMPONENTES — BOTÕES (.nb-btn)
   Regra: nenhum componente depende de módulo específico.
   Todos são genéricos e reutilizáveis em qualquer tela.
============================================================ */

.nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: var(--font-semi);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.nb-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tamanhos */
.nb-btn-sm  { font-size: var(--text-sm);  padding: var(--space-xs) var(--space-sm); }
.nb-btn-md  { font-size: var(--text-md);  padding: 9px var(--space-md); }
.nb-btn-lg  { font-size: var(--text-lg);  padding: var(--space-sm) var(--space-lg); }

/* Variantes */
.nb-btn-primary {
  background: var(--color-action);
  color: #0E1120;
}
.nb-btn-primary:hover {
  background: #f0ad00;
  transform: translateY(-1px);
}

.nb-btn-secondary {
  background: transparent;
  color: var(--text);
  border: var(--border-muted);
}
.nb-btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--color-nav);
}

.nb-btn-ghost {
  background: transparent;
  color: var(--muted);
  border: none;
}
.nb-btn-ghost:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.nb-btn-nav {
  background: rgba(108,99,255,.12);
  color: var(--color-nav);
  border: var(--border-accent);
}
.nb-btn-nav:hover {
  background: rgba(108,99,255,.2);
}

.nb-btn-danger {
  background: var(--priority-urgent-bg);
  color: var(--color-urgent);
  border: var(--border-urgent);
}
.nb-btn-danger:hover {
  background: rgba(231,76,60,.22);
}

/* ============================================================
   8. COMPONENTES — CARDS (.nb-card)
============================================================ */

.nb-card {
  background: var(--surface);
  border: var(--border-base);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.nb-card-body   { padding: var(--space-lg); }
.nb-card-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.nb-card-header-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semi);
  color: var(--text);
}
.nb-card-footer {
  padding: var(--space-sm) var(--space-lg);
  border-top: var(--border-base);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Variantes de card com indicador de prioridade */
.nb-card-flat {
  background: transparent;
  border: none;
  border-radius: 0;
}
.nb-card-urgent {
  border-left: 3px solid var(--priority-urgent);
}
.nb-card-warn {
  border-left: 3px solid var(--priority-warn);
}
.nb-card-ok {
  border-left: 3px solid var(--color-ok);
}

/* ============================================================
   9. COMPONENTES — BADGES E STATUS PILLS (.nb-badge)
============================================================ */

.nb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: 3px 8px;
  line-height: 1;
  white-space: nowrap;
}

/* Prioridade */
.nb-badge-urgent {
  background: var(--priority-urgent-bg);
  color: var(--color-urgent);
}
.nb-badge-warn {
  background: var(--priority-warn-bg);
  color: #d97706;
}
.nb-badge-ok {
  background: var(--priority-ok-bg);
  color: var(--color-ok);
}
.nb-badge-muted {
  background: var(--priority-info-bg);
  color: var(--muted);
}

/* Status de etapa */
.nb-badge-active   { background: var(--priority-ok-bg);     color: var(--color-ok); }
.nb-badge-pending  { background: var(--priority-info-bg);   color: var(--muted); }
.nb-badge-done     { background: var(--priority-ok-bg);     color: var(--color-ok); }
.nb-badge-inactive { background: var(--priority-urgent-bg); color: var(--color-urgent); }
.nb-badge-waiting  { background: var(--priority-warn-bg);   color: #d97706; }

/* ============================================================
   10. COMPONENTES — TABELAS (.nb-table)
============================================================ */

.nb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
  color: var(--text);
}
.nb-table thead th {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: var(--border-base);
  white-space: nowrap;
}
.nb-table tbody td {
  padding: 10px var(--space-md);
  border-bottom: var(--border-base);
  color: var(--text);
  vertical-align: middle;
}
.nb-table tbody tr:last-child td {
  border-bottom: none;
}
.nb-table tbody tr:hover td {
  background: var(--surface-hover);
}

/* Variante compacta */
.nb-table-compact thead th { padding: var(--space-xs) var(--space-sm); }
.nb-table-compact tbody td { padding: 6px var(--space-sm); }

/* ============================================================
   11. COMPONENTES — FORMULÁRIOS (.nb-input, .nb-select, etc.)
============================================================ */

.nb-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--muted);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.nb-input,
.nb-select,
.nb-textarea {
  width: 100%;
  background: var(--surface2);
  border: var(--border-muted);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-md);
  padding: 9px var(--space-md);
  transition: var(--transition);
  outline: none;
  box-sizing: border-box;
}
.nb-input::placeholder,
.nb-textarea::placeholder  { color: var(--dim); }
.nb-input:focus,
.nb-select:focus,
.nb-textarea:focus {
  border-color: var(--color-nav);
  background: var(--surface3);
}
.nb-input-error {
  border-color: var(--color-urgent) !important;
}
.nb-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: var(--leading-normal);
}
.nb-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237880A4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.nb-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* ============================================================
   12. COMPONENTES — MODAIS (.nb-modal)
============================================================ */

.nb-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-md);
  backdrop-filter: blur(2px);
}

.nb-modal {
  background: var(--surface2);
  border: var(--border-muted);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  width: 100%;
  overflow: hidden;
}

/* Tamanhos de modal */
.nb-modal-sm  { max-width: 380px; }
.nb-modal-md  { max-width: 560px; }
.nb-modal-lg  { max-width: 800px; }

.nb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-base);
  flex-shrink: 0;
}
.nb-modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semi);
  color: var(--text);
}
.nb-modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-lg);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: var(--transition);
}
.nb-modal-close:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.nb-modal-body {
  padding: var(--space-lg);
  overflow-y: auto;
  flex: 1;
  line-height: var(--leading-normal);
}

.nb-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: var(--border-base);
  flex-shrink: 0;
}

/* ============================================================
   13. COMPONENTES — SIDEBAR / NAVEGAÇÃO (.nb-sidebar-*)
   Complementa as classes .nav-item existentes.
   Pode ser adotado gradualmente na Sprint 2 (Sidebar).
============================================================ */

.nb-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 9px 18px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: var(--transition);
  color: var(--muted);
  font-size: var(--text-md);
  text-decoration: none;
  border-radius: 0;
}
.nb-sidebar-item:hover {
  background: rgba(255,255,255,.03);
  color: var(--text);
}
.nb-sidebar-item.active {
  background: var(--surface-active);
  color: var(--color-nav);
  border-left-color: var(--color-nav);
  font-weight: var(--font-medium);
}

.nb-sidebar-badge {
  margin-left: auto;
  border-radius: var(--radius-full);
  padding: 2px 7px;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: 1.3;
}
.nb-sidebar-badge-urgent  { background: var(--color-urgent);  color: #fff; }
.nb-sidebar-badge-pending { background: var(--color-action);  color: #0E1120; }
.nb-sidebar-badge-muted   { background: var(--surface3);      color: var(--muted); }

.nb-sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-sm) var(--space-md);
}

.nb-sidebar-section-label {
  padding: 12px 18px 4px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--dim);
  font-weight: var(--font-bold);
}

/* ============================================================
   14. UTILITÁRIOS — Helpers de uso geral
============================================================ */

/* Texto por nível */
.nb-text-xs  { font-size: var(--text-xs) !important; }
.nb-text-sm  { font-size: var(--text-sm) !important; }
.nb-text-md  { font-size: var(--text-md) !important; }
.nb-text-lg  { font-size: var(--text-lg) !important; }
.nb-text-xl  { font-size: var(--text-xl) !important; }
.nb-text-xxl { font-size: var(--text-xxl) !important; }

/* Cores semânticas */
.nb-color-urgent { color: var(--color-urgent) !important; }
.nb-color-warn   { color: var(--color-warn) !important; }
.nb-color-ok     { color: var(--color-ok) !important; }
.nb-color-nav    { color: var(--color-nav) !important; }
.nb-color-muted  { color: var(--muted) !important; }

/* Pesos */
.nb-font-normal { font-weight: var(--font-normal) !important; }
.nb-font-medium { font-weight: var(--font-medium) !important; }
.nb-font-semi   { font-weight: var(--font-semi) !important; }
.nb-font-bold   { font-weight: var(--font-bold) !important; }

/* Espaçamento de seção */
.nb-section-header {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.nb-section-header a,
.nb-section-header button {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--color-nav);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
.nb-section-header a:hover,
.nb-section-header button:hover { text-decoration: underline; }

/* Avatar de usuário (2 letras) */
.nb-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(108,99,255,.2);
  color: var(--color-nav);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Empty state */
.nb-empty-state {
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
  color: var(--muted);
}
.nb-empty-state-icon {
  font-size: 32px;
  margin-bottom: var(--space-md);
  opacity: .5;
}
.nb-empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semi);
  color: var(--text);
  margin-bottom: var(--space-sm);
}
.nb-empty-state-desc {
  font-size: var(--text-md);
  color: var(--muted);
  line-height: var(--leading-normal);
}
.nb-empty-state-action {
  margin-top: var(--space-md);
}