/*
 * CAMADA 6 — COMPONENTES · BOTÕES
 *
 * Conteúdo permitido: as variantes de botão criadas pelo Mafmine
 * (.btn-verde, .btn-red, .btn-cancel, .calculate-all) e a troca
 * rótulo → ícone que os botões fazem em mobile.
 *
 * As variantes do próprio Bootstrap (.btn-primary, .btn-danger…) são
 * repintadas em theme.palette.css, não aqui.
 */


/* ==========================================================================
   1. VARIANTES DO MAFMINE
   ========================================================================== */

button.btn-verde,
button.calculate-all {
    border: var(--border-none);
    cursor: pointer;
    background-color: var(--color-success);
    color: var(--color-white);
}

.btn-red {
    background-color: var(--color-danger);
}

.btn.btn-cancel,
.btn.btn-cancel:is(:hover, :focus, :active, .active) {
    border-color: var(--color-danger);
    color: var(--color-white);
    background-color: var(--color-danger);
}


/* ==========================================================================
   2. RÓTULO x ÍCONE
   ========================================================================== */

/*
 * Padrão (desktop): só o rótulo em .btn-label; o ícone .btn-icon-mobile fica
 * escondido. Em mobile a troca é invertida nos botões listados na seção 3.
 * O texto do rótulo continua disponível no aria-label de cada botão.
 */
.btn-icon-mobile {
    display: none;
}


/* ==========================================================================
   3. MOBILE
   ========================================================================== */

/* Reportar/Contato e Créditos, na barra superior, viram só ícone. */
@media (max-width: 768px) {

    #btnReportIssue .btn-label,
    #btnCreditos .btn-label {
        display: none;
    }
}

@media (max-width: 991px) {

    /* "Calcular Página" e as ações da lista de projetos viram só ícone. */
    .calculate-all .btn-label,
    .project-list .project-actions .btn .btn-label {
        display: none;
    }

    .calculate-all .btn-icon-mobile {
        display: inline-block;
    }

    .calculate-all {
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 36px;
        padding: 6px 12px;
        font-size: 16px;
    }
}