/* Componentes utilitários baseados nas variáveis de tema já definidas em app.css */

.brand-bg { background-color: var(--bs-primary) !important; }
.brand-text { color: var(--bs-primary) !important; }

.neutral-bg { background-color: var(--bs-gray-100) !important; }
.neutral-border { border-color: var(--bs-gray-300) !important; }

.system-success { color: var(--bs-success) !important; }
.system-danger { color: var(--bs-danger) !important; }
.system-warning { color: var(--bs-warning) !important; }
.system-info { color: var(--bs-info) !important; }

/* Caixas de status para despesas (fundos suaves) */
.status-box { border-radius: .5rem; padding: .5rem .75rem; border: 1px solid transparent; }
.status-pago { background-color: rgba(var(--bs-success-rgb), 0.12); border-color: rgba(var(--bs-success-rgb), 0.25); }
.status-pendente { background-color: rgba(var(--bs-info-rgb), 0.12); border-color: rgba(var(--bs-info-rgb), 0.25); }
.status-vencido { background-color: rgba(var(--bs-danger-rgb), 0.12); border-color: rgba(var(--bs-danger-rgb), 0.25); }

/* Estilos inspirados no exemplos/dashboard.html */
.card-title { font-size: 1rem; font-weight: 600; color: var(--bs-primary); margin: 0; }
.card-value { font-size: 1.0rem; font-weight: 700; color: var(--bs-body-color); } /* Ajustado para 1.0rem */
.card-detail { font-size: .875rem; color: var(--bs-info); }
.status-indicator { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; }
.status-indicator.pago { background-color: var(--bs-success); }
.status-indicator.pendente { background-color: var(--bs-warning); }
.status-indicator.vencido { background-color: var(--bs-danger); }
.status-indicator.cancelado { background-color: var(--bs-info); }

/* Aliases iguais ao exemplo para compatibilidade */
.status-indicator.status-pago { background-color: var(--bs-success); }
.status-indicator.status-aberto { background-color: var(--bs-warning); }
.status-indicator.status-vencido { background-color: var(--bs-danger); }
.status-indicator.status-cancelado { background-color: #6c757d; }
.status-box { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 10px 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.status-box.status-pago { border-left: 4px solid var(--bs-success); }
.status-box.status-pendente { border-left: 4px solid var(--bs-warning); }
.status-box.status-vencido { border-left: 4px solid var(--bs-danger); }
.brand-text { color: var(--bs-primary); }
.system-danger { color: var(--bs-danger); }