/* =====================================================
   UTILITIES - Classes utilitárias essenciais
   APENAS classes realmente utilizadas no projeto
   ===================================================== */

/* =====================================================
   BACKGROUNDS (bg-*) - APENAS USADOS
   ===================================================== */
.bg-blue-light {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%) !important;
}

/* =====================================================
   TEXT COLORS (text-*) - APENAS USADOS
   ===================================================== */
.text-muted {
    color: var(--color-text-muted) !important;
}

/* =====================================================
   FLEX HELPERS
   ===================================================== */
.center-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* =====================================================
   FORM-SELECT DE LARGURA AUTOMÁTICA — PADRÃO GLOBAL
   -----------------------------------------------------
   PROBLEMA RECORRENTE: todo `form-select` com `w-auto`
   (filtros/dropdowns inline) nasce estreito e a SETA do
   select fica POR CIMA do texto/número. Regra canônica:
   reserva espaço p/ a seta + largura mínima em QUALQUER
   dropdown do projeto. Sempre verificar isso ao criar um
   `<select class="form-select w-auto">`.
   ===================================================== */
select.form-select.w-auto,
select.form-select-sm.w-auto {
    min-width: 8rem;                    /* respiro p/ rótulos curtos */
    padding-right: var(--spacing-xl);   /* espaço garantido p/ a seta */
}