.despesas-hero-card {
    color: #fff;
    border: none;
}

.despesas-hero-card .bi {
    opacity: 0.85;
}

.despesas-hero-card--total {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
}

.despesas-hero-card--combustivel {
    background: linear-gradient(135deg, var(--status-atencao), #a35a05);
}

.despesas-hero-card--manutencao {
    background: linear-gradient(135deg, var(--status-transito), #0a5a70);
}

.despesas-hero-card--comissao {
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
}

/*
 * Chart.js com responsive:true calcula a altura do canvas a partir da
 * largura do container quando não há altura fixa definida — como este
 * gráfico ocupa a largura inteira da página (diferente dos gráficos do
 * Dashboard, lado a lado em metade da largura), isso rendeu um canvas de
 * ~650px de altura, quase ilegível. maintainAspectRatio:false (JS) + altura
 * fixa aqui resolvem os dois lados do problema.
 */
.despesas-grafico-wrapper {
    height: 280px;
}

/*
 * A coluna "Excluir" é a última da tabela — e o botão fixo do Rádio
 * Operacional (`.radio-ptt`, right: 1rem, largura 160px) fica ancorado
 * exatamente no canto inferior direito de QUALQUER tela, largura de tela
 * nenhuma escapa disso. Em tela estreita, isso aparece ao rolar a tabela
 * até o fim (o botão "Excluir" some embaixo do rádio); em tela larga
 * aparece sem rolar nada, só por a tabela ocupar a largura toda do card e a
 * última linha calhar perto do fim da página. A folga empurra a coluna
 * inteira pra fora da faixa horizontal que o rádio ocupa, então nenhuma
 * linha jamais cai atrás dele, não importa a largura da tela nem a posição
 * de rolagem vertical.
 *
 * Importante: o padding precisa estar no container com overflow-x (que
 * define de fato a largura de scroll/conteúdo), não na `<table>` — o
 * Bootstrap dá `width: 100%` + `box-sizing: border-box` à tabela, e como o
 * conteúdo já estoura essa largura (table-layout: auto), padding ali dentro
 * fica espremido pelo conteúdo e nunca chega a empurrar nada.
 */
.despesas-tabela-scroll {
    padding-right: 190px;
}