/* ============================================================
   Tema Dark — CRM Interno
   Paleta: fundo #0d1117 · painéis #141a24 · cards #161d29
   ============================================================ */

:root {
  color-scheme: dark;

  /* ============================================================
     Variáveis base de tema (alteradas dinamicamente via JS)
     ============================================================ */
  --crm-bg-main: #0d1117;
  --crm-bg-panel: #111318;
  --crm-bg-card: #141a24;
  --crm-value-box-bg: #10151d;
  --crm-border: #1e293b;

  --crm-text-primary: #e2e8f0;
  --crm-text-secondary: #94a3b8;

  --crm-button-bg: #2563eb;
  --crm-button-hover: #3b82f6;
  --crm-button-text: #ffffff;

  --crm-accent: #60a5fa;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  background: var(--crm-bg-main);
  color: var(--crm-text-primary);
}

body {
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ---------- Scrollbar (dark) ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
  background-clip: content-box;
}

/* ---------- Animações usadas pelos componentes React ---------- */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Gaveta lateral (Slide-over) deslizando da direita para a esquerda */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Campos nativos no dark mode ---------- */
select option {
  background: #0f141c;
  color: #e2e8f0;
}

/* Ícone dos date/time pickers visível sobre fundo escuro */
input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* Remove o fundo branco do autofill do Chrome */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #e2e8f0;
  -webkit-box-shadow: 0 0 0 1000px #0f141c inset;
  transition: background-color 9999s ease-out;
}

/* ---------- Utilidades ---------- */
/* Esconde a barra de rolagem horizontal do board mantendo o scroll */
.no-scrollbar {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Melhora o arraste do Kanban em telas de toque */
[data-dnd-draggable] {
  touch-action: none;
}

/* Input color levemente customizado */
input[type='color'] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: 0.45rem;
}

input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

/* Blocos de destaque de valores (KPIs, cards financeiros, etc.) */
.crm-value-box {
  background-color: var(--crm-value-box-bg);
  border-color: var(--crm-border);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}