/* ============================================
   FINANCEAI — COMPONENTS CSS
   ============================================ */

/* ---- EMPTY STATE ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
  gap: 12px;
}

.empty-state svg { opacity: 0.3; }
.empty-state p { font-size: 0.875rem; }

/* ---- SKELETON LOADER ---- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ---- CATEGORY COLORS ---- */
.cat-alimentacao { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.cat-alimentacao-bar { background: #fbbf24; }

.cat-fastfood { background: rgba(248, 113, 113, 0.12); color: #f87171; }
.cat-fastfood-bar { background: #f87171; }

.cat-compras { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
.cat-compras-bar { background: #a78bfa; }

.cat-uber { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
.cat-uber-bar { background: #60a5fa; }

.cat-saude { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.cat-saude-bar { background: #34d399; }

.cat-lazer { background: rgba(251, 146, 60, 0.12); color: #fb923c; }
.cat-lazer-bar { background: #fb923c; }

.cat-moradia { background: rgba(45, 212, 191, 0.12); color: #2dd4bf; }
.cat-moradia-bar { background: #2dd4bf; }

.cat-outros { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }
.cat-outros-bar { background: #94a3b8; }

/* ---- BADGE ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ---- NUMBER ANIMATION ---- */
.num-anim {
  display: inline-block;
  transition: transform 0.15s ease;
}

/* ---- DIVIDER ---- */
.divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}