/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Smooth SPA-like page transitions on Turbo navigations (native browser API). */
@view-transition {
  navigation: auto;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Barras de progresso (ranking/dashboard) crescem ao aparecer. Mudanças de
   largura depois disso (refresh em tempo real) usam transition. */
@keyframes barra-cresce {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.barra-animada {
  transform-origin: left;
  animation: barra-cresce 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Conteúdo de turbo-frame lazy (skeleton → dados) entra com fade.
   Turbo marca o frame com [complete] quando o conteúdo chega. */
@keyframes surge {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
.frame-surge[complete] > * {
  animation: surge 0.25s ease-out both;
}

/* Modal de confirmação (<dialog>). */
@keyframes dialog-entra {
  from { opacity: 0; transform: translateY(0.5rem) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.dialog-animado[open] {
  animation: dialog-entra 0.16s ease-out;
}

/* Selo "Ao vivo" (shared/_ao_vivo): cinza enquanto conecta, verde pulsando
   quando o <turbo-cable-stream-source> da página está conectado. */
@keyframes ao-vivo-pulsa {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}
.ao-vivo { background: #f3f4f6; color: #6b7280; }
.ao-vivo-ponto > span:last-child { background: #9ca3af; }
.ao-vivo-texto::after { content: "Conectando…"; }
body:has(turbo-cable-stream-source[connected]) .ao-vivo { background: #ecfdf5; color: #047857; }
body:has(turbo-cable-stream-source[connected]) .ao-vivo-ponto > span:last-child { background: #10b981; }
body:has(turbo-cable-stream-source[connected]) .ao-vivo-pulso {
  background: #34d399;
  animation: ao-vivo-pulsa 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
body:has(turbo-cable-stream-source[connected]) .ao-vivo-texto::after { content: "Ao vivo"; }

@media (prefers-reduced-motion: reduce) {
  .barra-animada, .dialog-animado[open], .ao-vivo-pulso, .frame-surge[complete] > * { animation: none !important; transition: none; }
}

/* Thin, unobtrusive scrollbar for dropdowns and other small scroll areas. */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}