/* ===========================
   Mentor do Dinheiro - site.css
   =========================== */
:root {
  --sidebar-width: 240px;
  --primary: #4F46E5;
  --sidebar-bg: #0f172a;
  --sidebar-hover: #1e293b;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: #f8fafc; color: #1e293b; }

/* ── Auth ── */
.auth-page { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }

/* ── Layout ── */
body.has-sidebar { display: flex; }

.sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); height: 100vh; position: fixed; top:0; left:0; display: flex; flex-direction: column; z-index: 1000; transition: transform .3s ease; }
.sidebar-header { padding: 1.25rem; border-bottom: 1px solid #1e293b; }
.brand { display: flex; align-items: center; gap: .6rem; color: white; font-weight: 700; font-size: 1.05rem; }
.brand i { font-size: 1.4rem; color: #818CF8; }
.sidebar-menu { flex: 1; padding: 1rem .75rem; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; }
.nav-item { display:flex; align-items:center; gap:.75rem; padding:.65rem .875rem; color:#94a3b8; text-decoration:none; border-radius:8px; font-size:.9rem; font-weight:500; transition:background .15s,color .15s; }
.nav-item i { font-size: 1.1rem; width: 20px; text-align: center; }
.nav-item:hover { background: var(--sidebar-hover); color: #e2e8f0; }
.nav-item.active { background: var(--primary); color: white; }
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid #1e293b; display: flex; align-items: center; gap: .75rem; }
.user-info { display:flex; align-items:center; gap:.6rem; flex:1; min-width:0; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--primary); color:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0; }
.user-name { color:#e2e8f0; font-size:.8rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.btn-logout { background:none; border:none; color:#64748b; font-size:1.1rem; cursor:pointer; padding:.375rem; border-radius:6px; transition:color .15s; }
.btn-logout:hover { color:#f87171; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999; }
.sidebar-overlay.open { display:block; }

/* ── Main ── */
.main-content { margin-left: var(--sidebar-width); flex:1; min-height:100vh; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:1rem; padding:1rem; background:white; border-bottom:1px solid #e2e8f0; }
.btn-menu { background:none; border:none; font-size:1.4rem; cursor:pointer; color:#475569; }
.topbar-title { font-weight:700; font-size:1rem; }
.page-content { padding: 1.5rem; flex: 1; }

/* ── Page Header ── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.page-title { font-size:1.5rem; font-weight:700; margin:0; }
.page-subtitle { color:#64748b; margin:.25rem 0 0; font-size:.9rem; }

/* ── Cards ── */
.card { border:1px solid #e2e8f0; border-radius:var(--radius); box-shadow:var(--shadow); background:white; }
.card-header { padding:1rem 1.25rem; border-bottom:1px solid #f1f5f9; background:transparent; display:flex; align-items:center; justify-content:space-between; }
.card-header h5 { font-size:.95rem; font-weight:600; color:#0f172a; margin:0; }
.card-body { padding:1.25rem; }

/* ── KPI Cards ── */
.kpi-card { background:white; border-radius:var(--radius); padding:1.25rem; display:flex; align-items:center; gap:1rem; border:1px solid #e2e8f0; box-shadow:var(--shadow); }
.kpi-icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.kpi-balance .kpi-icon { background:#EEF2FF; color:var(--primary); }
.kpi-income  .kpi-icon { background:#ECFDF5; color:#10B981; }
.kpi-expense .kpi-icon { background:#FEF2F2; color:#EF4444; }
.kpi-saving  .kpi-icon { background:#EFF6FF; color:#3B82F6; }
.kpi-info { display:flex; flex-direction:column; }
.kpi-label { font-size:.78rem; color:#64748b; font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
.kpi-value { font-size:1.3rem; font-weight:700; color:#0f172a; margin-top:.15rem; }

/* ── Dashboard items ── */
.conta-item { display:flex; align-items:center; gap:.75rem; padding:.875rem 1.25rem; border-bottom:1px solid #f8fafc; }
.conta-item:last-child { border-bottom:none; }
.conta-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.conta-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.conta-nome { font-size:.875rem; font-weight:600; }
.conta-tipo { font-size:.75rem; color:#94a3b8; }
.conta-saldo { font-size:.9rem; font-weight:700; white-space:nowrap; }
.transacao-item { display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem; border-bottom:1px solid #f8fafc; }
.transacao-item:last-child { border-bottom:none; }
.transacao-cat { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; }
.transacao-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.transacao-desc { font-size:.875rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.transacao-data { font-size:.75rem; color:#94a3b8; }
.transacao-valor { font-size:.875rem; font-weight:700; white-space:nowrap; }

/* ── Conta card ── */
.conta-card { border-left:4px solid #4F46E5; transition:transform .15s; }
.conta-card:hover { transform:translateY(-2px); }
.conta-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.conta-card-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.conta-tipo-badge { font-size:.72rem; font-weight:600; color:#64748b; background:#f1f5f9; border-radius:5px; padding:.2rem .5rem; }
.conta-saldo-display { font-size:1.6rem; font-weight:800; margin:.75rem 0 .25rem; }
.conta-saldo-display.positive { color:#10B981; }
.conta-saldo-display.negative { color:#EF4444; }

/* ── Meta card ── */
.meta-card { transition:transform .15s; }
.meta-card:hover { transform:translateY(-2px); }
.meta-card.meta-concluida { opacity:.85; }
.meta-header { display:flex; justify-content:space-between; align-items:flex-start; }
.meta-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }

/* ── Tipo tabs (form transação) ── */
.tipo-tabs { display:flex; gap:.5rem; }
.tipo-tabs input[type=radio] { display:none; }
.tipo-tab { flex:1; text-align:center; padding:.6rem; border-radius:8px; cursor:pointer; font-size:.875rem; font-weight:600; border:2px solid #e2e8f0; color:#64748b; transition:all .15s; }
.tipo-despesa    { border-color:#FEE2E2; background:#FEF2F2; color:#EF4444; }
.tipo-receita    { border-color:#D1FAE5; background:#ECFDF5; color:#10B981; }
.tipo-transferencia { border-color:#DBEAFE; background:#EFF6FF; color:#3B82F6; }

/* ── Category items ── */
.cat-row { display:flex; align-items:center; gap:.75rem; padding:.65rem .875rem; border-radius:8px; margin-bottom:.25rem; background:white; border:1px solid #f1f5f9; }
.cat-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; }
.cat-icon.sm { width:28px; height:28px; font-size:.8rem; border-radius:6px; }
.section-label { font-size:.85rem; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.75rem; padding-bottom:.5rem; border-bottom:1px solid #f1f5f9; }

/* ── Badge cat ── */
.badge-cat { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:6px; font-size:.78rem; font-weight:500; }
.mini-kpi { display:inline-flex; align-items:center; gap:.5rem; background:white; border-radius:8px; padding:.5rem .875rem; border:1px solid #e2e8f0; font-size:.875rem; }

/* ── Table ── */
.table th { font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#64748b; padding:.75rem 1rem; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.table td { padding:.875rem 1rem; vertical-align:middle; border-bottom:1px solid #f8fafc; font-size:.875rem; }
.table tbody tr:last-child td { border-bottom:none; }
.table-hover tbody tr:hover { background:#f8fafc; }

/* ── Empty states ── */
.empty-state { text-align:center; padding:1.5rem; }
.empty-state i { font-size:2rem; color:#cbd5e1; display:block; margin-bottom:.5rem; }
.empty-state p { color:#94a3b8; font-size:.875rem; margin:0 0 .75rem; }
.empty-state-lg { text-align:center; padding:4rem 2rem; }
.empty-state-lg i { font-size:3.5rem; color:#cbd5e1; display:block; margin-bottom:1rem; }
.empty-state-lg h5 { color:#475569; margin-bottom:.5rem; }

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
}
@media (max-width: 575.98px) {
  .page-content { padding:1rem; }
  .kpi-value { font-size:1.1rem; }
}