/* ═══════════════════════════════════════════════════════════════════════════
   ContaFácil Pro — dashboard.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── KPI Grid ────────────────────────────────────────────────────────────── */
.cf-kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 20px; }
.cf-kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; display: flex; align-items: flex-start; gap: 14px; transition: border-color .2s; }
.cf-kpi-card:hover { border-color: var(--teal); }
.cf-kpi-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cf-kpi-icon svg { width: 22px; height: 22px; fill: currentColor; }
.cf-kpi-data { display: flex; flex-direction: column; gap: 3px; }
.cf-kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.cf-kpi-value { font-size: 22px; font-weight: 800; color: var(--text); }
.cf-kpi-sub { font-size: 11px; color: var(--text-dim); }

/* ─── Charts Row ──────────────────────────────────────────────────────────── */
.cf-charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 20px; }
.cf-chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.cf-chart--lg { }

/* ─── Bottom Row ─────────────────────────────────────────────────────────── */
.cf-bottom-row { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 16px; }
.cf-quick-actions { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.cf-quick-actions h3 { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.cf-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-qa-item { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--bg-card2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 10px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: center; transition: all .2s; }
.cf-qa-item:hover { border-color: var(--teal); color: var(--teal); background: rgba(0,212,170,.06); }
.cf-qa-item svg { width: 24px; height: 24px; fill: currentColor; }

/* ─── Activity ────────────────────────────────────────────────────────────── */
.cf-activity { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.cf-activity h3 { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.cf-activity-list { display: flex; flex-direction: column; gap: 6px; }
.cf-activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 8px; }
.cf-activity-item:hover { background: var(--bg-card2); }
.cf-activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.cf-activity-dot--das { background: var(--teal); }
.cf-activity-dot--import { background: var(--blue); }
.cf-activity-dot--cliente { background: var(--purple); }
.cf-activity-dot--ir { background: var(--orange); }
.cf-activity-text { font-size: 12px; color: var(--text); line-height: 1.4; }
.cf-activity-time { font-size: 10px; color: var(--text-dim); display: block; margin-top: 2px; }
.cf-activity-empty { font-size: 12px; color: var(--text-dim); padding: 16px; text-align: center; }

/* ─── Vencimentos ─────────────────────────────────────────────────────────── */
.cf-calendar-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.cf-calendar-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.cf-vencimentos { display: flex; flex-direction: column; gap: 8px; }
.cf-venc-item { display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; border-left: 3px solid transparent; background: var(--bg-card2); }
.cf-venc--mei     { border-left-color: var(--teal); }
.cf-venc--simples { border-left-color: var(--blue); }
.cf-venc--irpj    { border-left-color: var(--purple); }
.cf-venc--folha   { border-left-color: var(--orange); }
.cf-venc-date { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; min-width: 90px; }
.cf-venc-desc { font-size: 12px; color: var(--text); }

/* ─── Tabela progressiva ──────────────────────────────────────────────────── */
.cf-tabela-progressiva { background: var(--bg-card2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.cf-tabela-progressiva h4 { font-size: 12px; font-weight: 700; margin-bottom: 10px; color: var(--text-muted); }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .cf-kpi-grid { grid-template-columns: repeat(2,1fr); }
  .cf-charts-row { grid-template-columns: 1fr; }
  .cf-bottom-row { grid-template-columns: 1fr 1fr; }
  .cf-calendar-card { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .cf-kpi-grid { grid-template-columns: 1fr 1fr; }
  .cf-bottom-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cf-kpi-grid { grid-template-columns: 1fr; }
}