/* ============================================================
   app.css — Estilos customizados (complementam Tailwind/DaisyUI)
   ============================================================ */

/* Transições suaves */
[x-cloak] { display: none !important; }
.fade-in { animation: fadeIn 0.2s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
/* <select> com display:flex não abre dropdown nativo — forçar inline-block */
select.status-badge {
  display: inline-block;
}

/* Select de status inline na tabela */
.status-select {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 160px;
}
.status-implantado    { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; }
.status-em-producao   { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.status-em-trafego    { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.status-chegou-brasil { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
.status-a-caminho     { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.status-recebido      { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.status-neutro        { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }

/* Badges de vencimento */
.badge-vencido  { background: #fee2e2; color: #dc2626; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }
.badge-hoje     { background: #fef3c7; color: #d97706; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }
.badge-proximo  { background: #dbeafe; color: #1d4ed8; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }

/* Badges de status de parcela */
.inst-pendente { background: #fef3c7; color: #92400e; }
.inst-pago     { background: #d1fae5; color: #065f46; }
.inst-parcial  { background: #dbeafe; color: #1e40af; }

/* Tabela responsiva */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sidebar nav ativa */
.nav-link.active { background: rgba(255,255,255,0.15); font-weight: 600; }

/* Card de KPI */
.kpi-card {
  background: white;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
}
.kpi-value { font-size: 1.75rem; font-weight: 700; color: #1e3a8a; }
.kpi-label { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }

/* Alertas */
.alert-warning { background: #fffbeb; border-left: 4px solid #f59e0b; }
.alert-danger   { background: #fef2f2; border-left: 4px solid #ef4444; }

/* Input de projeção de câmbio */
.rate-input { border: 2px solid #3b82f6; border-radius: 8px; padding: 4px 10px; font-weight: 600; width: 110px; }
.rate-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }

/* Input de formulário padrão (reutilizável) */
.input-field {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input-field:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* Loading spinner */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Linha de histórico */
.history-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.history-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #1e3a8a; color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .kpi-value { font-size: 1.4rem; }
  .hide-mobile { display: none !important; }
}

/* ============================================================
   SELETOR DE TEMA — bolinhas na sidebar
   ============================================================ */
.theme-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.theme-swatch:hover { border-color: rgba(255,255,255,0.6) !important; }

/* ============================================================
   TEMA: CINZA COM ROXO
   sidebar escura cinza-grafite + acentos em roxo
   ============================================================ */
[data-theme="cinza-roxo"] aside {
  background: #111827 !important;
}
[data-theme="cinza-roxo"] aside .border-blue-800 {
  border-color: #374151 !important;
}
[data-theme="cinza-roxo"] aside .text-blue-300 {
  color: #c4b5fd !important;
}
[data-theme="cinza-roxo"] aside .text-blue-400 {
  color: #a78bfa !important;
}
[data-theme="cinza-roxo"] aside .text-blue-100 {
  color: #ede9fe !important;
}
[data-theme="cinza-roxo"] aside .hover\:bg-blue-800:hover {
  background: #374151 !important;
}
[data-theme="cinza-roxo"] aside .nav-link.active {
  background: rgba(139,92,246,0.3) !important;
}
[data-theme="cinza-roxo"] aside .history-avatar {
  background: #7c3aed !important;
}

/* ============================================================
   TEMA: PRETO COM VERDE NEON
   sidebar preta + acentos verde-neon + modo escuro no conteúdo
   ============================================================ */
[data-theme="preto-neon"] aside {
  background: #080808 !important;
}
[data-theme="preto-neon"] aside .border-blue-800 {
  border-color: #1a2e1a !important;
}
[data-theme="preto-neon"] aside .text-blue-300 {
  color: #34d399 !important;
}
[data-theme="preto-neon"] aside .text-blue-400 {
  color: #6ee7b7 !important;
}
[data-theme="preto-neon"] aside .text-blue-100 {
  color: #d1fae5 !important;
}
[data-theme="preto-neon"] aside .hover\:bg-blue-800:hover {
  background: #0e2a1a !important;
}
[data-theme="preto-neon"] aside .nav-link.active {
  background: rgba(52,211,153,0.18) !important;
}

/* Conteúdo principal — modo escuro */
[data-theme="preto-neon"] body {
  background-color: #0d0d0d !important;
}
[data-theme="preto-neon"] main {
  background-color: #0d0d0d !important;
}
[data-theme="preto-neon"] .bg-white {
  background-color: #161616 !important;
  border-color: #252525 !important;
}
[data-theme="preto-neon"] .bg-gray-50 {
  background-color: #111 !important;
}
[data-theme="preto-neon"] .border-gray-200 {
  border-color: #252525 !important;
}
[data-theme="preto-neon"] .border-gray-100 {
  border-color: #1e1e1e !important;
}
[data-theme="preto-neon"] .text-gray-900 { color: #f0fdf4 !important; }
[data-theme="preto-neon"] .text-gray-800 { color: #e2f5e8 !important; }
[data-theme="preto-neon"] .text-gray-700 { color: #d1fae5 !important; }
[data-theme="preto-neon"] .text-gray-600 { color: #a7f3d0 !important; }
[data-theme="preto-neon"] .text-gray-500 { color: #6ee7b7 !important; }
[data-theme="preto-neon"] .text-gray-400 { color: #4ade80 !important; }
[data-theme="preto-neon"] .kpi-card {
  background-color: #161616 !important;
  border-color: #252525 !important;
}
[data-theme="preto-neon"] .kpi-value { color: #34d399 !important; }
[data-theme="preto-neon"] .kpi-label { color: #6ee7b7 !important; }
[data-theme="preto-neon"] .history-avatar { background: #059669 !important; }
[data-theme="preto-neon"] .input-field {
  background-color: #1c1c1c !important;
  border-color: #2a2a2a !important;
  color: #d1fae5 !important;
}
[data-theme="preto-neon"] .input-field:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.2) !important;
}
[data-theme="preto-neon"] .rate-input {
  border-color: #10b981 !important;
  background: #111 !important;
  color: #34d399 !important;
}
[data-theme="preto-neon"] table thead tr {
  background-color: #111 !important;
}
[data-theme="preto-neon"] .hover\:bg-blue-50\/30:hover {
  background-color: rgba(16,185,129,0.06) !important;
}
[data-theme="preto-neon"] .bg-blue-900 {
  background-color: #059669 !important;
}
[data-theme="preto-neon"] .hover\:bg-blue-800:hover {
  background-color: #047857 !important;
}
[data-theme="preto-neon"] .text-blue-900 { color: #34d399 !important; }
[data-theme="preto-neon"] .text-blue-800 { color: #34d399 !important; }
[data-theme="preto-neon"] .text-blue-600 { color: #10b981 !important; }
[data-theme="preto-neon"] .text-blue-500 { color: #34d399 !important; }
[data-theme="preto-neon"] .border-b-2.border-blue-900 {
  border-color: #10b981 !important;
}
[data-theme="preto-neon"] .focus\:ring-blue-500:focus {
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25) !important;
}
[data-theme="preto-neon"] .alert-warning {
  background: #0d1f12 !important;
  border-left-color: #10b981 !important;
}
[data-theme="preto-neon"] .alert-danger {
  background: #1a0a0a !important;
}
[data-theme="preto-neon"] .nav-link.active {
  background: rgba(52,211,153,0.18) !important;
}
[data-theme="preto-neon"] .spinner {
  border-color: #1f1f1f !important;
  border-top-color: #10b981 !important;
}