/*
 * trust8 — Componentes Unificados
 * Sistema ui-* reutilizável em toda aplicação.
 * Ordem de carregamento: 6/8
 * ZERO CSS inline. ZERO cores hardcoded.
 */

/* ═══════════════════════════════════════════════════════════════
   BOTÕES
═══════════════════════════════════════════════════════════════ */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: 0.5rem 1rem;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.ui-btn:disabled,
.ui-btn.loading { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

.ui-btn-primary {
  background: var(--color-primary-600);
  color: #fff;
  border-color: var(--color-primary-600);
}
.ui-btn-primary:hover { background: var(--color-primary-700); border-color: var(--color-primary-700); }

.ui-btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.ui-btn-secondary:hover { background: var(--bg-hover); }

.ui-btn-danger {
  background: var(--color-danger-600);
  color: #fff;
  border-color: var(--color-danger-600);
}
.ui-btn-danger:hover { background: var(--color-danger-700); }

.ui-btn-success {
  background: var(--color-success-600);
  color: #fff;
  border-color: var(--color-success-600);
}
.ui-btn-success:hover { background: var(--color-success-700); }

.ui-btn-warning {
  background: var(--color-warning-600);
  color: #fff;
  border-color: var(--color-warning-600);
}

.ui-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.ui-btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.ui-btn-sm  { padding: 0.375rem 0.75rem; font-size: var(--font-size-xs); }
.ui-btn-lg  { padding: 0.625rem 1.25rem; font-size: var(--font-size-base); }
.ui-btn-xl  { padding: 0.75rem 1.5rem;   font-size: var(--font-size-lg); }
.ui-btn-icon { padding: 0.5rem; width: 2.25rem; height: 2.25rem; }

/* ═══════════════════════════════════════════════════════════════
   INPUTS / FORMULÁRIOS
═══════════════════════════════════════════════════════════════ */
.ui-input,
.ui-textarea,
.ui-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.ui-input:focus,
.ui-textarea:focus,
.ui-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 15%, transparent);
}

.ui-input::placeholder,
.ui-textarea::placeholder { color: var(--text-disabled); }

.ui-textarea { min-height: 100px; resize: vertical; }

.ui-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-label);
  margin-bottom: var(--spacing-1);
}

.ui-help {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--spacing-1);
}

.ui-form-group { margin-bottom: var(--spacing-4); }

/* ═══════════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════════ */
.ui-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.ui-card-header {
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.ui-card-body  { padding: var(--spacing-6); }
.ui-card-footer {
  padding: var(--spacing-4) var(--spacing-6);
  border-top: 1px solid var(--border-default);
  background: var(--bg-subtle);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ═══════════════════════════════════════════════════════════════
   TABELAS
═══════════════════════════════════════════════════════════════ */
.ui-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.ui-data-table-th {
  padding: 0.625rem var(--spacing-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.ui-data-table-td {
  padding: 0.75rem var(--spacing-4);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}

.ui-hover-row:hover td { background: var(--bg-hover); }

/* ═══════════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════════ */
[class^="ui-badge-"] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.ui-badge-success  { background: var(--color-success-50);  color: var(--color-success-700); }
.ui-badge-danger   { background: var(--color-danger-50);   color: var(--color-danger-700);  }
.ui-badge-warning  { background: var(--color-warning-50);  color: var(--color-warning-700); }
.ui-badge-info     { background: var(--color-info-50);     color: var(--color-info-600);    }
.ui-badge-primary  { background: var(--color-primary-50);  color: var(--color-primary-700); }
.ui-badge-secondary { background: var(--bg-subtle);        color: var(--text-muted);        }

/* ─── Status jurídicos ────────────────────────────────────────────────────── */
.ui-badge-ativo     { background: var(--color-success-50);  color: var(--color-success-700); }
.ui-badge-suspenso  { background: var(--color-warning-50);  color: var(--color-warning-700); }
.ui-badge-encerrado { background: var(--bg-subtle);         color: var(--text-muted); }
.ui-badge-ganho     { background: var(--color-success-50);  color: var(--color-success-700); }
.ui-badge-perdido   { background: var(--color-danger-50);   color: var(--color-danger-700); }
.ui-badge-urgente   { background: var(--color-danger-50);   color: var(--color-danger-700); }
.ui-badge-vencendo  { background: var(--color-warning-50);  color: var(--color-warning-700); }

/* ═══════════════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════════════ */
[class^="ui-alert-"] {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  border: 1px solid transparent;
}

.ui-alert-success { background: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-100); }
.ui-alert-danger  { background: var(--color-danger-50);  color: var(--color-danger-700);  border-color: var(--color-danger-100);  }
.ui-alert-warning { background: var(--color-warning-50); color: var(--color-warning-700); border-color: var(--color-warning-100); }
.ui-alert-info    { background: var(--color-info-50);    color: var(--color-info-600);    border-color: var(--color-info-50);     }

/* ═══════════════════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════════════════ */
.ui-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  animation: modal-fade-in 0.15s ease;
}

.ui-modal {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modal-slide-up 0.2s ease;
}

.ui-modal-header {
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-modal-body   { padding: var(--spacing-6); }
.ui-modal-footer {
  padding: var(--spacing-4) var(--spacing-6);
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-3);
}

@keyframes modal-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════════════════ */
.ui-empty-state {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-6);
  color: var(--text-muted);
}
.ui-empty-state-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--spacing-4);
  color: var(--text-disabled);
}
.ui-empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-2);
}
.ui-empty-state-description { font-size: var(--font-size-sm); }

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS (KPIs)
═══════════════════════════════════════════════════════════════ */
.ui-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4) var(--spacing-6);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.ui-stat-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ui-icon-bg-primary  { background: var(--color-primary-50);  color: var(--color-primary-600); }
.ui-icon-bg-success  { background: var(--color-success-50);  color: var(--color-success-600); }
.ui-icon-bg-danger   { background: var(--color-danger-50);   color: var(--color-danger-600);  }
.ui-icon-bg-warning  { background: var(--color-warning-50);  color: var(--color-warning-600); }
.ui-icon-bg-info     { background: var(--color-info-50);     color: var(--color-info-600);    }
.ui-icon-bg-secondary { background: var(--bg-subtle);        color: var(--text-muted);        }

.ui-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.ui-stat-label { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--spacing-1); }
.ui-stat-change { font-size: var(--font-size-xs); margin-top: var(--spacing-1); font-weight: 500; }
.ui-stat-change.up   { color: var(--color-success-600); }
.ui-stat-change.down { color: var(--color-danger-600);  }

/* ═══════════════════════════════════════════════════════════════
   SCORE / RISK CARDS
═══════════════════════════════════════════════════════════════ */
.ui-score-card {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  text-align: center;
}
.ui-score-card.success { border-color: var(--color-success-100); background: var(--color-success-50); }
.ui-score-card.warning { border-color: var(--color-warning-100); background: var(--color-warning-50); }
.ui-score-card.danger  { border-color: var(--color-danger-100);  background: var(--color-danger-50);  }

/* ═══════════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════════ */
.ui-pagination {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.ui-page-btn {
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--bg-card);
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0 var(--spacing-2);
}
.ui-page-btn:hover     { border-color: var(--color-primary-500); color: var(--color-primary-600); }
.ui-page-btn.active    { background: var(--color-primary-600); color: #fff; border-color: var(--color-primary-600); }
.ui-page-btn:disabled  { opacity: 0.5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════════════ */
.ui-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.ui-breadcrumb a      { color: var(--text-muted); }
.ui-breadcrumb a:hover { color: var(--color-primary-600); }
.ui-breadcrumb-sep    { color: var(--text-disabled); }
.ui-breadcrumb-current { color: var(--text-primary); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════════════════ */
.ui-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-default);
  gap: var(--spacing-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.ui-tabs::-webkit-scrollbar { display: none; }

.ui-tab-btn {
  padding: 0.625rem var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  margin-bottom: -1px;
}
.ui-tab-btn:hover { color: var(--text-primary); }
.ui-tab-btn.active {
  color: var(--color-primary-600);
  border-bottom-color: var(--color-primary-600);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION
═══════════════════════════════════════════════════════════════ */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: 0.625rem var(--spacing-4);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  width: 100%;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active { background: var(--color-primary-50); color: var(--color-primary-700); }
.nav-item svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

.nav-section {
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
}

/* ═══════════════════════════════════════════════════════════════
   LINHA DO TEMPO (Processos)
═══════════════════════════════════════════════════════════════ */
.ui-timeline {
  position: relative;
  padding-left: var(--spacing-8);
}

.ui-timeline::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-default);
}

.ui-timeline-item {
  position: relative;
  margin-bottom: var(--spacing-6);
}

.ui-timeline-dot {
  position: absolute;
  left: calc(-2rem + 0.125rem);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--color-primary-500);
  border: 2px solid var(--bg-card);
  top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   CHART CONTAINER
═══════════════════════════════════════════════════════════════ */
.ui-chart-container { position: relative; height: 250px; }

/* ═══════════════════════════════════════════════════════════════
   UTILITÁRIOS SEMÂNTICOS
═══════════════════════════════════════════════════════════════ */
.ui-text-primary   { color: var(--text-primary); }
.ui-text-secondary { color: var(--text-secondary); }
.ui-text-muted     { color: var(--text-muted); }
.ui-text-label     { color: var(--text-label); }
.ui-text-disabled  { color: var(--text-disabled); }

.ui-bg-card    { background: var(--bg-card); }
.ui-bg-primary { background: var(--bg-page); }
.ui-bg-hover   { background: var(--bg-hover); }
.ui-bg-subtle  { background: var(--bg-subtle); }
.ui-bg-muted   { background: var(--bg-muted); }

.ui-border-default { border-color: var(--border-default); }
.ui-border-input   { border-color: var(--border-input); }
.ui-divide-default { border-top: 1px solid var(--border-default); }

.ui-space-y-6 > * + * { margin-top: var(--spacing-6); }