/* Minimal custom styles — Tailwind CDN handles the rest */

/* Animations */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

.animate-fade-in { animation: fade-in 0.6s ease-out both; }
.animate-fade-in-up { animation: fade-in-up 0.7s ease-out both; }
.animate-pulse-slow { animation: pulse-slow 2s ease-in-out infinite; }
.bar-animate { animation: bar-grow 1s ease-out both; transform-origin: bottom; }

/* HTMX loading indicator */
.htmx-request .htmx-indicator { display: inline-block !important; }
.htmx-indicator { display: none; }

/* Smooth HTMX swaps */
.htmx-swapping { opacity: 0.5; transition: opacity 0.2s; }
.htmx-settling { opacity: 1; transition: opacity 0.2s; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Tooltips */
.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  position: relative;
  cursor: help;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s;
}
.tip-item:hover { border-bottom-color: rgba(56,189,248,0.2); }
.tip-item::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  border: 1px solid rgba(56,189,248,0.2);
  color: #94a3b8;
  font-size: 0.7rem;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: normal;
  width: max-content;
  max-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  transform: translateX(-50%) translateY(4px);
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.tip-item:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Modal responsivo */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 1rem;
}
.modal-content {
  width: 100%; max-width: 32rem;
  max-height: 90vh; overflow-y: auto;
  border-radius: 1rem;
}
@media (max-width: 480px) {
  .modal-content { max-width: 100%; border-radius: 0.75rem; }
}

/* Contraste WCAG - override slate-500 pra slate-400 em labels */
.label-secondary { color: #94a3b8; } /* slate-400 = 4.6:1 ratio */

/* Toast notifications */
@keyframes toast-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; }
.toast { padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; animation: toast-in 0.3s ease-out; max-width: 20rem; }
.toast.removing { animation: toast-out 0.3s ease-in forwards; }
.toast-success { background: #065f46; color: #a7f3d0; border: 1px solid #059669; }
.toast-error { background: #7f1d1d; color: #fca5a5; border: 1px solid #dc2626; }
.toast-info { background: #1e3a5f; color: #93c5fd; border: 1px solid #3b82f6; }

/* Skeleton loader */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 0.5rem; }
.skeleton-text { height: 0.875rem; width: 75%; }
.skeleton-title { height: 1.25rem; width: 50%; }
.skeleton-card { height: 5rem; width: 100%; }

/* HTMX stagger animation for lists */
.htmx-added { animation: fade-in-up 0.4s ease-out both; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }