/* Complementos que o Tailwind (via CDN) não cobre bem: scrollbars e estados do SortableJS */

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #C7D2FE;
  border-radius: 9999px;
}

/* Placeholder exibido no espaço onde o cartão/coluna será solto */
.sortable-ghost {
  opacity: 0.4;
  background: #E0E7FF !important;
  border: 2px dashed #4F46E5 !important;
}

/* Elemento sendo arrastado */
.sortable-drag {
  opacity: 0.95;
  rotate: 2deg;
}

.card-drag-handle {
  cursor: grab;
}

.list-drag-handle {
  cursor: grab;
}

/* Spinner de carregamento (dashboard e quadro) */
.spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid #E0E7FF;
  border-top-color: #4F46E5;
  border-radius: 9999px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Transição de abertura dos modais. Roda sempre que o elemento passa de
   display:none (classe .hidden) para visível — não precisa de JS para
   disparar. Os seletores usam classes Tailwind já presentes em todo modal
   do app (fundo escurecido + caixa arredondada) em vez de uma classe nova,
   para não precisar editar cada modal em cada página. */
div[class*="bg-black/40"] {
  animation: modalFadeIn 0.15s ease-out;
}
div[class*="bg-black/40"] > div[class*="rounded-2xl"] {
  animation: modalScaleIn 0.18s ease-out;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}