/* DynCash Modern (Stitch v2) — CSS complementar ao Tailwind CDN.
   Deep Slate + glassmorphism 12px + neon glow strokes. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #131315;
  color: #e4e2e4;
  overflow-x: hidden;
}

/* Numeros tabulares para colunas financeiras alinharem */
.tabular-nums, .font-numeric-data { font-variant-numeric: tabular-nums; }

/* Material Symbols base */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 300; }

/* ===== Glassmorphism (specs do DESIGN.md v2) ===== */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
}

.glass-panel {
  background: rgba(19, 19, 21, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
}

/* Neon glow strokes */
.neon-glow-violet {
  border: 0.5px solid #bec6e0 !important;
  box-shadow: 0 0 10px rgba(190, 198, 224, 0.12);
}
.neon-glow-emerald {
  border: 0.5px solid #4edea3 !important;
  box-shadow: 0 0 10px rgba(78, 222, 163, 0.12);
}
.neon-glow-error {
  border: 0.5px solid rgba(255, 180, 171, 0.5) !important;
  box-shadow: 0 0 10px rgba(255, 180, 171, 0.1);
}

/* Alias legado: hover generico de card */
.glass-card-hover { transition: all 220ms ease; }
.glass-card-hover:hover {
  border-color: rgba(190, 198, 224, 0.35);
  box-shadow: 0 0 12px rgba(190, 198, 224, 0.1);
}

/* Hover glows para stat cards */
.hover-glow-violet:hover  { border-color: #bec6e0 !important; box-shadow: 0 0 12px rgba(190, 198, 224, 0.15); }
.hover-glow-emerald:hover { border-color: #4edea3 !important; box-shadow: 0 0 12px rgba(78, 222, 163, 0.15); }
.hover-glow-error:hover   { border-color: rgba(255, 180, 171, 0.4) !important; box-shadow: 0 0 12px rgba(255, 180, 171, 0.1); }
.hover-glow-tertiary:hover { border-color: #d0bcff !important; box-shadow: 0 0 12px rgba(208, 188, 255, 0.15); }

/* Item ativo da sidebar */
.sidebar-active {
  background: rgba(78, 222, 163, 0.1);
  color: #4edea3 !important;
  border-left: 3px solid #4edea3;
  border-radius: 0 0.5rem 0.5rem 0;
}
.sidebar-active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 300; }

/* Glow para linhas de grafico */
.chart-glow { filter: drop-shadow(0 0 4px rgba(78, 222, 163, 0.5)); }

/* Input glow no foco (Electric Violet spec) */
.input-glow {
  transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
}
.input-glow:focus {
  outline: none;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.35);
}

/* Botao primario (Electric Violet com gloss sutil) */
.btn-violet {
  background: linear-gradient(180deg, #9d71f7 0%, #8b5cf6 100%);
  color: #fff;
  transition: filter 200ms, box-shadow 200ms;
}
.btn-violet:hover { filter: brightness(1.08); box-shadow: 0 0 16px rgba(139, 92, 246, 0.35); }
.btn-violet:disabled { opacity: 0.5; filter: none; box-shadow: none; cursor: not-allowed; }

/* Scrollbar dark */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* Modo privacidade */
.privacy-on .private-value {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
}

/* Spinner */
.spinner-sm {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.dyn-toast {
  position: fixed; top: 24px; right: 24px;
  padding: 12px 16px;
  background: rgba(31, 31, 33, 0.92);
  backdrop-filter: blur(24px);
  border: 0.5px solid rgba(255,255,255,0.12);
  color: #e4e2e4;
  border-radius: 0.75rem;
  font-size: 14px;
  font-family: 'Inter';
  z-index: 9999;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  animation: toastIn 200ms ease;
  display: flex; align-items: center; gap: 8px;
}
.dyn-toast.error   { border-left: 3px solid #ffb4ab; }
.dyn-toast.success { border-left: 3px solid #4edea3; box-shadow: 0 0 16px rgba(78,222,163,0.12), 0 12px 28px rgba(0,0,0,0.5); }
.dyn-toast.warning { border-left: 3px solid #d0bcff; }
@keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Modal (Level 2: 10% white, blur 24, glow contextual) */
.dyn-modal-bg {
  position: fixed; inset: 0;
  background: rgba(14, 14, 16, 0.7);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  z-index: 1000;
  padding: 16px;
  animation: fadeIn 180ms ease;
}
.dyn-modal {
  background: rgba(31, 31, 33, 0.92);
  backdrop-filter: blur(24px);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 1.5rem;
  padding: 24px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.08), 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  animation: scaleIn 200ms ease;
}
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Area de grafico com gradiente que esmaece (glow line spec) */
.chart-area-emerald {
  background: linear-gradient(180deg, rgba(78, 222, 163, 0.18) 0%, rgba(78, 222, 163, 0) 100%);
}