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

/* === Design Tokens (CSS Custom Properties) === */
/* Dark theme (default) */
:root, html.dark {
  --color-body: #020617;           /* slate-950 */
  --color-sidebar: #0f1729;        /* custom dark blue */
  --color-card: #0f1729;           /* custom dark blue */
  --color-input: #334155;          /* slate-700 */
  --color-hover-row: rgba(51,65,85,0.5); /* slate-700/50 */
  --color-overlay: rgba(0,0,0,0.6);

  /* Borders */
  --color-border: #334155;         /* slate-700 */
  --color-border-hover: #475569;   /* slate-600 */
  --color-border-active: #64748b;  /* slate-500 */

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: #cbd5e1; /* slate-300 */
  --color-text-muted: #94a3b8;     /* slate-400 */
  --color-text-disabled: #64748b;  /* slate-500 */

  /* Brand (primary = #003593 royal blue) */
  --color-brand-400: #5484ff;      /* primary-400 */
  --color-brand-500: #1a56c4;      /* primary-500 */
  --color-brand-600: #003593;      /* primary-600 */

  /* Semantic */
  --color-success: #059669;        /* emerald-600 */
  --color-success-light: #4ade80;  /* emerald-400 */
  --color-danger: #dc2626;         /* red-600 */
  --color-danger-light: #f87171;   /* red-400 */
  --color-warning: #d97706;        /* amber-600 */
  --color-warning-light: #fbbf24;  /* amber-400 */
  --color-info: #2563eb;           /* blue-600 */
  --color-info-light: #60a5fa;     /* blue-400 */
}

/* Light theme */
html.light {
  --color-body: #f8fafc;           /* slate-50 */
  --color-sidebar: #ffffff;
  --color-card: #ffffff;
  --color-input: #f1f5f9;          /* slate-100 */
  --color-hover-row: rgba(241,245,249,0.7); /* slate-100/70 */
  --color-overlay: rgba(0,0,0,0.3);

  --color-border: #e2e8f0;         /* slate-200 */
  --color-border-hover: #cbd5e1;   /* slate-300 */
  --color-border-active: #94a3b8;  /* slate-400 */

  --color-text-primary: #0f172a;   /* slate-900 */
  --color-text-secondary: #334155; /* slate-700 */
  --color-text-muted: #64748b;     /* slate-500 */
  --color-text-disabled: #94a3b8;  /* slate-400 */

  --color-brand-400: #5484ff;
  --color-brand-500: #1a56c4;
  --color-brand-600: #003593;

  --color-success: #059669;
  --color-success-light: #10b981;
  --color-danger: #dc2626;
  --color-danger-light: #ef4444;
  --color-warning: #d97706;
  --color-warning-light: #f59e0b;
  --color-info: #2563eb;
  --color-info-light: #3b82f6;
}

/* Apply CSS variables to core layout */
body { background-color: var(--color-body); color: var(--color-text-primary); }
html.light body { background-color: var(--color-body); color: var(--color-text-primary); }

/* Dark mode: override Tailwind bg-slate-800 globally to custom dark blue */
:root .bg-slate-800,
html.dark .bg-slate-800 { background-color: #0f1729 !important; }
:root .bg-slate-800\/50,
html.dark .bg-slate-800\/50 { background-color: rgba(15,23,41,0.5) !important; }
:root .bg-slate-800\/30,
html.dark .bg-slate-800\/30 { background-color: rgba(15,23,41,0.3) !important; }
:root .hover\:bg-slate-800:hover,
html.dark .hover\:bg-slate-800:hover { background-color: #0f1729 !important; }

/* Light theme overrides for Tailwind dark classes */
html.light .bg-slate-950 { background-color: var(--color-body) !important; }
html.light .bg-slate-900 { background-color: #f1f5f9 !important; }
html.light .bg-slate-800 { background-color: var(--color-card) !important; }
html.light .bg-slate-700 { background-color: var(--color-input) !important; }
html.light .border-slate-700 { border-color: var(--color-border) !important; }
html.light .border-slate-600 { border-color: var(--color-border-hover) !important; }
html.light .text-white { color: var(--color-text-primary) !important; }
html.light .text-slate-400 { color: var(--color-text-muted) !important; }
html.light .text-slate-300 { color: var(--color-text-secondary) !important; }
html.light .text-slate-500 { color: var(--color-text-disabled) !important; }
html.light .divide-slate-700 > * + * { border-color: var(--color-border) !important; }
html.light .bg-black\/60 { background-color: var(--color-overlay) !important; }
html.light .bg-slate-950\/80 { background-color: rgba(248,250,252,0.8) !important; }

/* Light theme: landing page gradients and specific overrides */
html.light .bg-gradient-to-b.from-slate-950 { background: linear-gradient(to bottom, #f8fafc, #f1f5f9, #f8fafc) !important; }
html.light .bg-slate-900\/50 { background-color: rgba(241,245,249,0.5) !important; }
html.light .bg-slate-800\/50 { background-color: rgba(255,255,255,0.5) !important; }
html.light .placeholder-slate-500::placeholder { color: var(--color-text-disabled) !important; }
html.light .shadow-black\/50 { --tw-shadow-color: rgba(0,0,0,0.1) !important; }
html.light .shadow-black\/30 { --tw-shadow-color: rgba(0,0,0,0.08) !important; }

/* Light theme: floating toggle button */
html.light #pub-theme-toggle { background: #fff; border-color: var(--color-border); color: var(--color-text-muted); }
html.light #pub-theme-toggle:hover { background: #f1f5f9; color: var(--color-text-primary); }

/* Light scrollbar */
html.light ::-webkit-scrollbar-track { background: #f1f5f9; }
html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html.light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================== */
/* === ANIMATION SYSTEM v2 ====== */
/* ============================== */

/* --- Keyframes --- */
@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 fade-in-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes pulse-live { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 4px transparent; } }
@keyframes counter-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer-progress { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes tab-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* --- Base animation classes --- */
.animate-fade-in { animation: fade-in 0.5s ease-out both; }
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out both; }
.animate-fade-in-down { animation: fade-in-down 0.4s ease-out both; }
.animate-scale-in { animation: scale-in 0.3s cubic-bezier(0.4,0,0.2,1) both; }
.animate-slide-in-right { animation: slide-in-right 0.35s cubic-bezier(0.4,0,0.2,1) both; }
.animate-slide-in-left { animation: slide-in-left 0.4s ease-out both; }
.animate-pulse-slow { animation: pulse-slow 2s ease-in-out infinite; }
.animate-tab-fade { animation: tab-fade 0.3s ease-out both; }
.bar-animate { animation: bar-grow 1s ease-out both; transform-origin: bottom; }

/* --- Page entrance: auto-animate children --- */
.page-enter > * { animation: fade-in-up 0.4s ease-out both; }
.page-enter > *:nth-child(1) { animation-delay: 0.0s; }
.page-enter > *:nth-child(2) { animation-delay: 0.05s; }
.page-enter > *:nth-child(3) { animation-delay: 0.1s; }
.page-enter > *:nth-child(4) { animation-delay: 0.15s; }
.page-enter > *:nth-child(5) { animation-delay: 0.2s; }
.page-enter > *:nth-child(6) { animation-delay: 0.25s; }
.page-enter > *:nth-child(7) { animation-delay: 0.3s; }
.page-enter > *:nth-child(8) { animation-delay: 0.35s; }
.page-enter > *:nth-child(9) { animation-delay: 0.4s; }
.page-enter > *:nth-child(10) { animation-delay: 0.45s; }

/* --- KPI card stagger (inside grids) --- */
.kpi-grid > * { animation: fade-in-up 0.45s ease-out both; }
.kpi-grid > *:nth-child(1) { animation-delay: 0.0s; }
.kpi-grid > *:nth-child(2) { animation-delay: 0.06s; }
.kpi-grid > *:nth-child(3) { animation-delay: 0.12s; }
.kpi-grid > *:nth-child(4) { animation-delay: 0.18s; }
.kpi-grid > *:nth-child(5) { animation-delay: 0.24s; }
.kpi-grid > *:nth-child(6) { animation-delay: 0.3s; }

/* --- Hover lift (cards, KPIs) --- */
.hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }

/* --- Modal animation --- */
.modal-animate { animation: scale-in 0.25s cubic-bezier(0.4,0,0.2,1) both; }

/* --- Badge pulse for live status --- */
.badge-live { animation: pulse-live 2s ease-in-out infinite; }

/* --- Counter animated value --- */
.counter-animated { animation: counter-up 0.5s ease-out both; display: inline-block; }

/* --- Sidebar icon micro-animation --- */
.sidebar-link svg { transition: transform 0.15s ease, color 0.15s ease; }
.sidebar-link:hover svg { transform: scale(1.15); }
.sidebar-link-active svg { color: var(--color-brand-400); }

/* --- Tab content transition --- */
.tab-content { animation: tab-fade 0.25s ease-out both; }

/* --- Toast with progress bar --- */
.toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 0 0.75rem 0.75rem; animation: toast-progress-shrink linear forwards; }
@keyframes toast-progress-shrink { from { width: 100%; } to { width: 0; } }
.toast-progress-success { background: var(--color-success-light); }
.toast-progress-error { background: var(--color-danger-light); }
.toast-progress-info { background: var(--color-info-light); }
.toast-progress-warning { background: var(--color-warning-light); }

/* --- Skeleton loader v2 (contextual) --- */
.skeleton-row { display: flex; gap: 1rem; padding: 0.75rem 1rem; }
.skeleton-row > * { height: 0.875rem; border-radius: 0.25rem; }
.skeleton-avatar { width: 2rem; height: 2rem; border-radius: 9999px; flex-shrink: 0; }
.skeleton-kpi { height: 4rem; border-radius: 0.75rem; }

/* 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(99,102,241,0.2); }
.tip-item::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  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: var(--color-overlay);
  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: var(--color-text-muted); }

/* Toast notifications */
@keyframes toast-in { from { transform: translateX(calc(100% + 1rem)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(calc(100% + 1rem)); opacity: 0; } }
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.toast { padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; animation: toast-in 0.35s cubic-bezier(0.4,0,0.2,1); max-width: 22rem; position: relative; overflow: hidden; pointer-events: auto; backdrop-filter: blur(8px); box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.toast.removing { animation: toast-out 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
.toast-success { background: #065f46; color: #a7f3d0; border: 1px solid var(--color-success); }
.toast-error { background: #7f1d1d; color: #fca5a5; border: 1px solid var(--color-danger); }
.toast-info { background: #1e3a5f; color: #93c5fd; border: 1px solid var(--color-info); }
html.light .toast-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
html.light .toast-error { background: #fef2f2; color: #7f1d1d; border-color: #fca5a5; }
html.light .toast-info { background: #eff6ff; color: #1e3a5f; border-color: #93c5fd; }

/* Skeleton loader */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--color-card) 25%, var(--color-input) 50%, var(--color-card) 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: var(--color-body); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }

/* Landing page: reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Landing: header shrink */
.landing-header { transition: padding 0.3s ease, background-color 0.3s ease; }
.landing-header.shrunk { padding-top: 0.5rem; padding-bottom: 0.5rem; background-color: rgba(2,6,23,0.95); }

/* Landing: scroll indicator bounce */
@keyframes scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }

/* Landing: FAQ accordion */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease; padding: 0 1.25rem; opacity: 0; }
.faq-item.open .faq-answer { max-height: 400px; padding: 1.25rem 1.25rem 1.25rem; opacity: 1; }
.faq-chevron { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-item { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq-item:hover { border-color: rgba(0,53,147,0.35); }
.faq-item.open { border-color: rgba(0,53,147,0.4); box-shadow: 0 0 20px rgba(0,53,147,0.08); }

/* Landing: integration logo hover */
.integration-logo { transition: transform 0.2s ease, opacity 0.2s ease; opacity: 0.6; }
.integration-logo:hover { transform: scale(1.1); opacity: 1; }