/* ============================================================
   Financeiro App — Core CSS
   ============================================================ */
:root {
  --fin-sidebar-w: 240px;
  --fin-topbar-h: 56px;
  --fin-bottom-h: 60px;
  --fin-radius:   12px;
  --fin-radius-sm: 8px;
}

/* ── Dark theme (padrão) ──────────────────────────────── */
[data-bs-theme="dark"] {
  --fin-bg:      #0f1117;
  --fin-surface: #1a1d27;
  --fin-surface2:#22263a;
  --fin-border:  rgba(255,255,255,.08);
  --fin-text:    #e2e8f0;
  --fin-muted:   #8892a4;
}

/* ── Light theme ──────────────────────────────────────── */
[data-bs-theme="light"] {
  --fin-bg:      #f0f2f7;
  --fin-surface: #ffffff;
  --fin-surface2:#f8f9fc;
  --fin-border:  rgba(0,0,0,.07);
  --fin-text:    #1e2330;
  --fin-muted:   #6b7280;
}

body { background: var(--fin-bg); color: var(--fin-text); }

/* ── Cards ─────────────────────────────────────────────── */
.card-fin {
  background: var(--fin-surface);
  border: 1px solid var(--fin-border);
  border-radius: var(--fin-radius);
}
.card-fin .card-header {
  background: transparent;
  border-bottom: 1px solid var(--fin-border);
  padding: .75rem 1rem;
}

/* ── KPI Cards ──────────────────────────────────────────── */
.kpi-card {
  border-radius: var(--fin-radius);
  padding: 1rem 1.1rem;
  position: relative;
  overflow: hidden;
  background: var(--fin-surface);
  border: 1px solid var(--fin-border);
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.kpi-income::before   { background: #22c55e; }
.kpi-expense::before  { background: #ef4444; }
.kpi-saving::before   { background: #0ea5e9; }
.kpi-balance-pos::before { background: #22c55e; }
.kpi-balance-neg::before { background: #ef4444; }

.kpi-icon { font-size: 1.4rem; margin-bottom: .4rem; }
.kpi-income   .kpi-icon { color: #22c55e; }
.kpi-expense  .kpi-icon { color: #ef4444; }
.kpi-saving   .kpi-icon { color: #0ea5e9; }
.kpi-balance-pos .kpi-icon { color: #22c55e; }
.kpi-balance-neg .kpi-icon { color: #ef4444; }

.kpi-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fin-muted); margin-bottom: .25rem; }
.kpi-value { font-size: 1.15rem; font-weight: 700; }

.kpi-mini {
  background: var(--fin-surface);
  border: 1px solid var(--fin-border);
  border-radius: var(--fin-radius-sm);
  padding: .6rem .9rem;
}

/* ── Tabela ─────────────────────────────────────────────── */
.table-header-fin th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fin-muted);
  font-weight: 600;
  background: var(--fin-surface2);
  border-bottom: 1px solid var(--fin-border);
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.table { --bs-table-hover-bg: rgba(255,255,255,.03); }
[data-bs-theme="light"] .table { --bs-table-hover-bg: rgba(0,0,0,.03); }
.table > :not(caption) > * > * { border-color: var(--fin-border); }

/* ── Badges ─────────────────────────────────────────────── */
.badge-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  color: #fff;
  font-size: .78rem;
  flex-shrink: 0;
}
.badge-xs { font-size: .65rem; padding: .2em .45em; }
.btn-xs   { padding: .15rem .4rem; font-size: .75rem; }

/* ── Cartões de crédito ─────────────────────────────────── */
.card-chip {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
  flex-shrink: 0;
}
.card-chip-lg {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem;
  flex-shrink: 0;
}
.card-invoice-item { border-bottom: 1px solid var(--fin-border); }
.card-invoice-item:last-child { border-bottom: none; }

.card-credit {
  border-top: 4px solid var(--card-color, #6366f1) !important;
}

/* ── Auth ────────────────────────────────────────────────── */
.auth-body { background: var(--fin-bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--fin-surface) !important; }
.auth-logo {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff;
}
.theme-toggle-float {
  position: fixed; bottom: 1rem; right: 1rem;
  border-radius: 50%; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Page ────────────────────────────────────────────────── */
.page-content { padding: 1.5rem; }
@media (max-width: 767px) { .page-content { padding: 1rem .75rem; } }

/* ── Inputs escuros ─────────────────────────────────────── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background: var(--fin-surface2);
  border-color: var(--fin-border);
  color: var(--fin-text);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--fin-muted); }

/* ── Modal ───────────────────────────────────────────────── */
[data-bs-theme="dark"] .modal-content {
  background: var(--fin-surface);
  border-color: var(--fin-border);
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fin-border); border-radius: 3px; }