/* ================================================================
   SISTEMA DE BOTÕES PADRONIZADO
   ================================================================ */

/* ================================================================
   BOTÃO BASE
   ================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
    white-space: nowrap;
    font-family: inherit;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ================================================================
   BOTÕES SEMÂNTICOS (cores principais)
   ================================================================ */

.btn-primary {
    background-color: #4361ee;
    color: #ffffff;
    border-color: #4361ee;
}

.btn-primary:hover:not(:disabled) {
    background-color: #3f37c9;
    border-color: #3f37c9;
}

.btn-secondary {
    background-color: #6c757d;
    color: #ffffff;
    border-color: #6c757d;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-success {
    background-color: #032290;
    color: #ffffff;
    border-color: #032290;
}

.btn-success:hover:not(:disabled) {
    background-color: #021a6e;
    border-color: #021a6e;
}

.btn-danger {
    background-color: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
}

.btn-danger:hover:not(:disabled) {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-warning {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

.btn-warning:hover:not(:disabled) {
    background-color: #e0a800;
    border-color: #d39e00;
}

.btn-info {
    background-color: #17a2b8;
    color: #ffffff;
    border-color: #17a2b8;
}

.btn-info:hover:not(:disabled) {
    background-color: #138496;
    border-color: #117a8b;
}

/* ================================================================
   BOTÕES OUTLINE (bordas coloridas)
   ================================================================ */

.btn-outline {
    background-color: transparent;
    color: #4361ee;
    border-color: #4361ee;
}

.btn-outline:hover:not(:disabled) {
    background-color: #4361ee;
    color: #ffffff;
}

.btn-outline-secondary {
    background-color: transparent;
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary:hover:not(:disabled) {
    background-color: #6c757d;
    color: #ffffff;
}

.btn-outline-danger {
    background-color: transparent;
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover:not(:disabled) {
    background-color: #dc3545;
    color: #ffffff;
}

/* ================================================================
   BOTÕES DE AÇÃO (cores específicas para ações)
   ================================================================ */

.btn-pagar {
    background-color: #22c55e;
    color: #ffffff;
    border-color: #22c55e;
}

.btn-pagar:hover:not(:disabled) {
    background-color: #16a34a;
    border-color: #15803d;
}

.btn-editar,
.btn-editar-categoria,
.btn-editar-cartao {
    background-color: #f97316;
    color: #ffffff;
    border-color: #f97316;
}

.btn-editar:hover:not(:disabled),
.btn-editar-categoria:hover:not(:disabled),
.btn-editar-cartao:hover:not(:disabled) {
    background-color: #ea580c;
    border-color: #c2410c;
}

.btn-excluir,
.btn-remover-categoria,
.btn-excluir-cartao {
    background-color: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.btn-excluir:hover:not(:disabled),
.btn-remover-categoria:hover:not(:disabled),
.btn-excluir-cartao:hover:not(:disabled) {
    background-color: #dc2626;
    border-color: #b91c1c;
}

.btn-avancar {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.btn-avancar:hover:not(:disabled) {
    background-color: #2563eb;
    border-color: #1d4ed8;
}

.btn-mover {
    background-color: #0ea5e9;
    color: #ffffff;
    border-color: #0ea5e9;
}

.btn-mover:hover:not(:disabled) {
    background-color: #0284c7;
    border-color: #0369a1;
}

.btn-anexar {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
    min-width: 50px;
}

.btn-anexar:hover:not(:disabled) {
    background-color: #2563eb;
    border-color: #1d4ed8;
}

.btn-anexos {
    background-color: #94a3b8;
    color: #ffffff;
    border-color: #94a3b8;
    position: relative;
    min-width: auto;
}

.btn-anexos:hover:not(:disabled) {
    background-color: #64748b;
    border-color: #475569;
}

.btn-anexos.tem-anexos {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.btn-anexos.tem-anexos:hover:not(:disabled) {
    background-color: #2563eb;
    border-color: #1d4ed8;
}

.btn-anexos i.fa-paperclip {
    font-size: 12px;
}

.btn-anexos .contador-anexos {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: white;
    font-size: 8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
    border: 1px solid white;
}

.btn-anexos .contador-anexos:empty,
.btn-anexos .contador-anexos[data-count="0"] {
    display: none;
}

/* ================================================================
   GRUPO DE AÇÕES (TABELAS)
   ================================================================ */

.acoes-grupo {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.acoes-grupo .btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
}

.acoes-grupo .btn:hover {
    transform: scale(1.1);
}

.acoes-grupo .btn:active {
    transform: scale(0.95);
}

/* ================================================================
   TAMANHOS DE BOTÕES
   ================================================================ */

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 12px;
    min-height: 28px;
}

.acoes-grupo .btn-sm {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    font-size: 12px;
}

/* Botão de limpar filtros com tamanho de ação */
#btn-limpar-filtros.btn-sm {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 16px;
    min-height: 44px;
}

.btn-block {
    display: flex;
    width: 100%;
}

/* ================================================================
   BOTÕES ÍCONE (apenas ícone, quadrados)
   ================================================================ */

.btn-icon {
    padding: 0;
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
}

.btn-icon-sm {
    padding: 0;
    min-width: 24px;
    max-width: 24px;
    min-height: 24px;
    max-height: 24px;
}

.btn-icon-lg {
    padding: 0;
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    max-height: 40px;
}

/* ================================================================
   BOTÕES DE NAVEGAÇÃO
   ================================================================ */

.btn-navegacao {
    background-color: #4a90e2;
    color: #ffffff;
    border-color: #4a90e2;
    padding: 0.5rem 1.25rem;
}

.btn-navegacao:hover:not(:disabled) {
    background-color: #357abd;
    border-color: #357abd;
}

/* ================================================================
   BOTÕES DE ABAS
   ================================================================ */

.btn-aba {
    background-color: transparent;
    color: #6c757d;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.75rem 1.25rem;
}

.btn-aba:hover:not(:disabled) {
    color: #4361ee;
    background-color: #f8f9fa;
    transform: none;
    box-shadow: none;
}

.btn-aba.active {
    color: #4361ee;
    border-bottom-color: #4361ee;
    font-weight: 600;
}

/* ================================================================
   GRUPOS DE BOTÕES
   ================================================================ */

.btn-group {
    display: inline-flex;
    gap: 0.5rem;
}

.btn-group-compact {
    display: inline-flex;
    gap: 0.25rem;
}

/* ================================================================
   ESTADOS ESPECIAIS
   ================================================================ */

.btn-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ================================================================
   BOTÕES DE FORMULÁRIO
   ================================================================ */

.btn-submit {
    background: linear-gradient(135deg, #4361ee, #3f37c9);
    color: #ffffff;
    border: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, #3f37c9, #3730a3);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.btn-cancel {
    background-color: #6c757d;
    color: #ffffff;
    border: none;
}

.btn-cancel:hover:not(:disabled) {
    background-color: #5a6268;
}

.btn-full-width {
    width: 100%;
    display: flex;
}

.btn-action {
    background-color: #4361ee;
    color: #ffffff;
    border: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.btn-action:hover:not(:disabled) {
    background-color: #3f37c9;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.btn-action-secondary {
    background-color: #6c757d;
    color: #ffffff;
    border: none;
}

.btn-action-secondary:hover:not(:disabled) {
    background-color: #5a6268;
}

/* ================================================================
   BOTÕES ESPECIAIS DE MODAL
   ================================================================ */

.notificacao-close {
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.notificacao-close:hover {
    color: #dc3545;
    transform: rotate(90deg);
}

/* ================================================================
   BOTÕES DE NAVEGAÇÃO DE MÊS
   ================================================================ */

.btn-navegacao-mes {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0 1rem;
    height: 32px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-navegacao-mes:hover:not(:disabled) {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
}

/* ================================================================
   BOTÕES DE FECHAR/REABRIR MÊS
   ================================================================ */
/* Container que agrupa os botões no card */
.controles-mes {
    width: 100%;
    margin-top: auto; /* Empurra os botões para a base do card */
    display: flex;
    flex-direction: column;
}

.botoes-controle {
    display: flex;
    width: 100%;
}

/* Botão Reabrir Mês (detalhe e template) */
.btn-reabrir-mes,
#btn-reabrir-mes {
    background-color: #64748b;
    color: #ffffff;
    border-color: #64748b;
}

.btn-reabrir-mes:hover:not(:disabled),
#btn-reabrir-mes:hover:not(:disabled) {
    background-color: #475569;
    border-color: #475569;
}




/* ================================================================
   BOTÕES DE USUÁRIO
   ================================================================ */

.btn-usuario {
    padding: 0.4rem 0.8rem;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-editar-usuario {
    background-color: #f59e0b;
    color: #ffffff;
}

.btn-editar-usuario:hover:not(:disabled) {
    background-color: #d97706;
}

.btn-bloquear-usuario {
    background-color: #ef4444;
    color: #ffffff;
}

.btn-bloquear-usuario:hover:not(:disabled) {
    background-color: #dc2626;
}

.btn-excluir-usuario {
    background-color: #dc2626;
    color: #ffffff;
}

.btn-excluir-usuario:hover:not(:disabled) {
    background-color: #b91c1c;
}

/* ================================================================
   BOTÕES DE TRANSAÇÕES
   ================================================================ */

.btn-salvar-transacao {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

.btn-salvar-transacao:hover:not(:disabled) {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-salvar-compact {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 14px;
    font-weight: 600;
}

.btn-salvar-compact:hover:not(:disabled) {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-confirmar-modal {
    background-color: #10b981;
    color: #ffffff;
    border: none;
    padding: 0.5rem 1rem;
}

.btn-confirmar-modal:hover:not(:disabled) {
    background-color: #059669;
}

.btn-retirar {
    background-color: #ef4444;
}

.btn-retirar:hover:not(:disabled) {
    background-color: #dc2626;
}

/* ================================================================
   BOTÕES DE RESERVA
   ================================================================ */

.btn-reservar-inline {
    background-color: #8b5cf6;
    color: #ffffff;
    border: none;
    padding: 0.4rem 0.8rem;
    font-size: 13px;
}

.btn-reservar-inline:hover:not(:disabled) {
    background-color: #7c3aed;
}

.btn-remover-reserva-mini {
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 12px;
}

.btn-remover-reserva-mini:hover:not(:disabled) {
    background-color: #dc2626;
}

/* ================================================================
   BOTÕES DE ANEXOS
   ================================================================ */

.btn-remover-anexo,
.btn-download-anexo {
    background-color: transparent;
    border: 1px solid #e5e7eb;
    padding: 0.4rem 0.8rem;
    font-size: 13px;
    color: #6c757d;
}

.btn-remover-anexo:hover:not(:disabled) {
    background-color: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.btn-download-anexo:hover:not(:disabled) {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* ================================================================
   DROPDOWN ITEMS
   ================================================================ */

.dropdown-item {
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: left;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-item:hover:not(:disabled) {
    background-color: #f3f4f6;
    color: #4361ee;
    transform: none;
    box-shadow: none;
}

.dropdown-item-danger {
    color: #dc3545;
}

.dropdown-item-danger:hover:not(:disabled) {
    background-color: #fee;
    color: #dc3545;
}

/* ================================================================
   RESPONSIVIDADE
   ================================================================ */

@media (max-width: 768px) {
    .btn {
        padding: 0.4rem 0.8rem;
        font-size: 13px;
        min-height: 32px;
    }

    .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 11px;
        min-height: 24px;
    }

    .acoes-grupo .btn-sm {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        font-size: 11px;
    }

    .btn-icon {
        min-width: 28px;
        max-width: 28px;
        min-height: 28px;
        max-height: 28px;
    }
}

@media (min-width: 1920px) {
    .acoes-grupo .btn-sm {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 13px;
    }
}

@media (min-width: 2560px) {
    .acoes-grupo .btn-sm {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 14px;
    }
}