/* =============================================================================
   BUTTONS - DESIGN SYSTEM OTIMIZADO MaximusWeb
   =============================================================================

   PADRÃO DE CORES POR FUNÇÃO:
   - Salvar/Confirmar/Criar: btn-save, btn-create (verde)
   - Finalizar/Concluir: btn-primary (azul)
   - Cancelar/Voltar: btn-back (cinza)
   - Limpar/Reset: btn-clear (cinza claro)
   - Pesquisar: btn-search (azul)
   - Excluir/Remover: btn-danger (vermelho)
   - Exportar: btn-export (cinza claro)
   - Imprimir: btn-print (azul claro)
   ============================================================================= */

/* =============================================================================
   1. VARIÁVEIS CSS - Light Mode (base)
   ============================================================================= */

:root {
    /* Tamanhos: usando clamp() para responsividade */
    --btn-height-sm: clamp(28px, 26px + 0.5vw, 32px);
    --btn-height-md: clamp(36px, 34px + 0.5vw, 40px);
    --btn-height-lg: clamp(44px, 42px + 0.5vw, 48px);
    --btn-min-width-sm: clamp(70px, 60px + 2vw, 80px);
    --btn-min-width-md: clamp(90px, 80px + 2vw, 100px);
    --btn-min-width-lg: clamp(120px, 100px + 4vw, 140px);

    /* Tamanhos para botões de tabela/ícone */
    --btn-table-padding: clamp(0.2rem, 0.15rem + 0.15vw, 0.25rem) clamp(0.4rem, 0.35rem + 0.15vw, 0.5rem);
    --btn-table-font: clamp(0.7rem, 0.65rem + 0.1vw, 0.75rem);
    --btn-icon-size: clamp(32px, 30px + 0.5vw, 36px);
    --btn-icon-size-sm: clamp(26px, 24px + 0.5vw, 30px);
    --btn-icon-size-lg: clamp(40px, 38px + 0.5vw, 44px);

    /* Gaps e radius */
    --btn-gap: var(--fluid-space-sm, 0.5rem);
    --btn-radius: 0.375rem;
    --btn-radius-lg: 0.5rem;

    /* Cores semânticas - Light */
    --btn-neutral-bg: #f8f9fa;
    --btn-neutral-border: #dee2e6;
    --btn-neutral-text: #495057;
    --btn-neutral-hover-bg: #e9ecef;
    --btn-neutral-hover-border: #adb5bd;
    --btn-neutral-hover-text: #212529;
}

/* =============================================================================
   2. VARIÁVEIS CSS - Dark Mode
   ============================================================================= */

body.dark-mode {
    /* Cores - Dark */
    --btn-neutral-bg: #2d2d2d;
    --btn-neutral-border: #444;
    --btn-neutral-text: #ccc;
    --btn-neutral-hover-bg: #3d3d3d;
    --btn-neutral-hover-border: #555;
    --btn-neutral-hover-text: #fff;

    /* Ajustes para outline buttons em dark mode */
    --btn-outline-primary-bg: #1a3a5c;
    --btn-outline-primary-text: #74c0fc;
    --btn-outline-success-bg: #1a3a28;
    --btn-outline-success-text: #51cf66;
    --btn-outline-danger-bg: #3a1a1a;
    --btn-outline-danger-text: #ff6b6b;
    --btn-outline-warning-bg: #3a3010;
    --btn-outline-info-bg: #1a3a3f;
    --btn-outline-secondary-bg: #2d2d2d;
    --btn-outline-secondary-text: #ccc;
}

/* =============================================================================
   3. BASE - Ajustes mínimos ao Bootstrap
   ============================================================================= */

.btn {
    font-weight: 500;
    border-radius: var(--btn-radius);
    transition: all 0.2s ease;
    gap: 0.375rem;
}

.btn:hover {
    transform: translateY(-1px);
}

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

.btn:disabled,
.btn.disabled {
    transform: none;
    cursor: not-allowed;
}

/* Tamanhos */
.btn-lg {
    min-width: var(--btn-min-width-lg);
    min-height: var(--btn-height-lg);
    border-radius: var(--btn-radius-lg);
}

.btn-sm {
    min-height: var(--btn-height-sm);
}

/* =============================================================================
   4. BOTÕES - Funções Específicas
   ============================================================================= */

/* Salvar - Verde */
.btn-save {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #157347;
    --bs-btn-hover-color: #fff;
    min-width: var(--btn-min-width-lg);
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

.btn-save:hover,
.btn-save:focus {
    background-color: #157347;
    border-color: #157347;
    color: #fff;
    box-shadow: 0 4px 8px rgba(25, 135, 84, 0.3);
}

/* Criar/Novo - Verde com destaque */
.btn-create {
    font-weight: 600;
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

.btn-create:hover,
.btn-create:focus {
    background-color: #157347;
    border-color: #157347;
    color: #fff;
    box-shadow: 0 4px 8px rgba(25, 135, 84, 0.3);
}

/* Pesquisar - Azul */
.btn-search {
    min-width: 100px;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.btn-search:hover,
.btn-search:focus {
    background-color: #0b5ed7;
    border-color: #0b5ed7;
    color: #fff;
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
}

/* Voltar/Cancelar - Neutro */
.btn-back {
    background-color: var(--btn-neutral-bg);
    border-color: var(--btn-neutral-border);
    color: var(--btn-neutral-text);
}

.btn-back:hover,
.btn-back:focus {
    background-color: var(--btn-neutral-hover-bg);
    border-color: var(--btn-neutral-hover-border);
    color: var(--btn-neutral-hover-text);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Limpar/Reset - Neutro */
.btn-clear {
    background-color: var(--btn-neutral-bg);
    border-color: var(--btn-neutral-border);
    color: var(--btn-neutral-text);
}

.btn-clear:hover,
.btn-clear:focus {
    background-color: var(--btn-neutral-hover-bg);
    border-color: var(--btn-neutral-hover-border);
    color: var(--btn-neutral-hover-text);
}

/* Exportar - Neutro */
.btn-export {
    background-color: var(--btn-neutral-bg);
    border-color: var(--btn-neutral-border);
    color: var(--btn-neutral-text);
}

.btn-export:hover,
.btn-export:focus {
    background-color: var(--btn-neutral-hover-bg);
    border-color: var(--btn-neutral-hover-border);
    color: var(--btn-neutral-hover-text);
}

/* Imprimir - Azul claro */
.btn-print {
    background-color: #e7f1ff;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.btn-print:hover,
.btn-print:focus {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
}

body.dark-mode .btn-print {
    background-color: var(--btn-outline-primary-bg);
    border-color: var(--btn-outline-primary-text);
    color: var(--btn-outline-primary-text);
}

body.dark-mode .btn-print:hover,
body.dark-mode .btn-print:focus {
    background-color: #0a58ca;
    border-color: #0a58ca;
    color: #fff;
}

/* =============================================================================
   5. BOTÕES DE TABELA - Compactos
   ============================================================================= */

.btn-table-edit,
.btn-table-view,
.btn-table-delete {
    padding: var(--btn-table-padding);
    font-size: var(--btn-table-font);
}

.btn-table-edit {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

.btn-table-edit:hover {
    background-color: #157347;
    border-color: #157347;
    color: #fff;
}

.btn-table-view {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.btn-table-view:hover {
    background-color: #0b5ed7;
    border-color: #0b5ed7;
    color: #fff;
}

.btn-table-delete {
    background-color: #fce4e6;
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.btn-table-delete:hover {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}

body.dark-mode .btn-table-delete {
    background-color: var(--btn-outline-danger-bg);
    border-color: var(--btn-outline-danger-text);
    color: var(--btn-outline-danger-text);
}

body.dark-mode .btn-table-delete:hover {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}

/* =============================================================================
   6. BOTÕES APENAS ÍCONE
   ============================================================================= */

.btn-icon {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon.btn-sm {
    width: var(--btn-icon-size-sm);
    height: var(--btn-icon-size-sm);
}

.btn-icon.btn-lg {
    width: var(--btn-icon-size-lg);
    height: var(--btn-icon-size-lg);
}

.btn-icon i {
    margin: 0;
}

/* =============================================================================
   7. ESTADOS ESPECIAIS
   ============================================================================= */

/* Indicador de alterações pendentes */
.btn-pending::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--bs-warning);
    border-radius: 50%;
    border: 2px solid white;
}

body.dark-mode .btn-pending::after {
    border-color: #1e1e1e;
}

/* Desabilitado */
.btn:disabled:hover,
.btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* =============================================================================
   8. BOTÕES ESPECÍFICOS DE COMPONENTES
   ============================================================================= */

/* Botão limpar campo (dentro de inputs) */
.btn-limpar-campo {
    position: absolute;
    right: clamp(4px, 2px + 0.5vw, 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--btn-neutral-bg);
    border: 1px solid var(--btn-neutral-border);
    color: var(--btn-neutral-text);
    padding: clamp(2px, 1px + 0.3vw, 4px) clamp(6px, 4px + 0.4vw, 8px);
    font-size: var(--fluid-font-base, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
    z-index: 5;
    cursor: pointer;
}

.btn-limpar-campo:hover {
    background-color: #fce4e6;
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.btn-limpar-campo:active {
    transform: translateY(-50%) scale(0.9);
}

body.dark-mode .btn-limpar-campo:hover {
    background-color: var(--btn-outline-danger-bg);
    border-color: var(--btn-outline-danger-text);
    color: var(--btn-outline-danger-text);
}

/* =============================================================================
   9. BOTÕES EM MODAIS
   ============================================================================= */

.modal-footer .btn {
    min-width: var(--btn-min-width-md);
}

.modal-footer .btn-lg {
    min-width: var(--btn-min-width-lg);
}

/* =============================================================================
   10. BOTÕES EM TABELAS
   ============================================================================= */

.btn-table-action {
    padding: var(--btn-table-padding);
    font-size: var(--btn-table-font);
    min-width: auto;
    border-radius: 0.25rem;
}

.btn-table-action i {
    font-size: var(--fluid-font-sm, 0.875rem);
}

/* =============================================================================
   11. DARK MODE - Ajustes para Outline Buttons
   ============================================================================= */

body.dark-mode .btn-outline-primary {
    background-color: var(--btn-outline-primary-bg);
    border-color: var(--btn-outline-primary-text);
    color: var(--btn-outline-primary-text);
}

body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:focus {
    background-color: #0a58ca;
    border-color: #0a58ca;
    color: #fff;
}

body.dark-mode .btn-outline-success {
    background-color: var(--btn-outline-success-bg);
    border-color: var(--btn-outline-success-text);
    color: var(--btn-outline-success-text);
}

body.dark-mode .btn-outline-success:hover,
body.dark-mode .btn-outline-success:focus {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

body.dark-mode .btn-outline-danger {
    background-color: var(--btn-outline-danger-bg);
    border-color: var(--btn-outline-danger-text);
    color: var(--btn-outline-danger-text);
}

body.dark-mode .btn-outline-danger:hover,
body.dark-mode .btn-outline-danger:focus {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}

body.dark-mode .btn-outline-warning {
    background-color: var(--btn-outline-warning-bg);
    border-color: var(--bs-warning);
    color: var(--bs-warning);
}

body.dark-mode .btn-outline-warning:hover,
body.dark-mode .btn-outline-warning:focus {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    color: #000;
}

body.dark-mode .btn-outline-info {
    background-color: var(--btn-outline-info-bg);
    border-color: var(--bs-info);
    color: var(--bs-info);
}

body.dark-mode .btn-outline-info:hover,
body.dark-mode .btn-outline-info:focus {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: #000;
}

body.dark-mode .btn-outline-secondary {
    background-color: var(--btn-outline-secondary-bg);
    border-color: #888;
    color: var(--btn-outline-secondary-text);
}

body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus {
    background-color: #4a5158;
    border-color: #4a5158;
    color: #fff;
}

/* =============================================================================
   12. DARK MODE - Botões Bootstrap
   ============================================================================= */

body.dark-mode .btn-secondary {
    background-color: #4a5158;
    border-color: #4a5158;
    color: #fff;
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-secondary:focus {
    background-color: #5c636a;
    border-color: #5c636a;
}

body.dark-mode .btn-light {
    background-color: #2d2d2d;
    border-color: #444;
    color: #e0e0e0;
}

body.dark-mode .btn-light:hover,
body.dark-mode .btn-light:focus {
    background-color: #3d3d3d;
    border-color: #555;
}

/* =============================================================================
   13. TOGGLE BUTTONS (btn-check + label)
   ============================================================================= */

.btn-check + .btn-outline-success {
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #6c757d;
}

.btn-check + .btn-outline-success:hover {
    background-color: #e9ecef;
    border-color: var(--bs-success);
    color: var(--bs-success);
}

.btn-check:checked + .btn-outline-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.4);
    font-weight: 600;
}

.btn-check:checked + .btn-outline-success:hover {
    background-color: #157347;
    border-color: #157347;
}

.btn-check:focus + .btn-outline-success {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

body.dark-mode .btn-check + .btn-outline-success {
    background-color: #2d2d2d;
    border-color: #444;
    color: #888;
}

body.dark-mode .btn-check + .btn-outline-success:hover {
    background-color: #3d3d3d;
    border-color: var(--btn-outline-success-text);
    color: var(--btn-outline-success-text);
}

body.dark-mode .btn-check:checked + .btn-outline-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.5);
}

/* =============================================================================
   14. CORREÇÕES DE ESPECIFICIDADE
   ============================================================================= */

.input-group .btn {
    border-color: #ced4da;
}

.input-group .btn:hover {
    z-index: 1;
}

body.dark-mode .input-group .btn {
    border-color: #444;
}

/* =============================================================================
   15. RESPONSIVO
   ============================================================================= */

@media (max-width: 576px) {
    /* Estrutural: comportamento de flex em mobile */
    .modal-footer {
        flex-wrap: nowrap;
    }

    .modal-footer .btn {
        flex: 1;
        min-width: auto;
    }
}

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

/* Grupo de ações alinhado à direita */
.btn-group-actions {
    display: flex;
    gap: var(--btn-gap);
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

/* Grupo espalhado (voltar à esquerda, ações à direita) */
.btn-group-actions-spread {
    display: flex;
    gap: var(--btn-gap);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Toolbar de filtros */
.btn-toolbar-actions {
    display: flex;
    gap: var(--btn-gap);
    align-items: center;
    flex-wrap: wrap;
}

/* Grupo em células de tabela */
.btn-table-group {
    display: flex;
    gap: var(--fluid-space-xs, 0.25rem);
    justify-content: center;
}

@media (max-width: 576px) {
    .btn-group-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-group-actions .btn {
        width: 100%;
    }

    .btn-group-actions .btn-lg {
        min-height: var(--btn-height-lg);
    }
}

/* =============================================================================
   17. ALIASES PARA COMPATIBILIDADE
   ============================================================================= */

.btn-limpar { /* Use btn-clear */
    background-color: var(--btn-neutral-bg);
    border-color: var(--btn-neutral-border);
    color: var(--btn-neutral-text);
}

.btn-limpar:hover {
    background-color: var(--btn-neutral-hover-bg);
    border-color: var(--btn-neutral-hover-border);
    color: var(--btn-neutral-hover-text);
}

.btn-pesquisar { /* Use btn-search */
    min-width: 120px;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.btn-pesquisar:hover {
    background-color: #0b5ed7;
    border-color: #0b5ed7;
    color: #fff;
}

.btn-lupa-busca { /* Use btn-clear ou btn-export */
    background-color: var(--btn-neutral-bg);
    border-color: var(--btn-neutral-border);
    color: var(--btn-neutral-text);
}

.btn-lupa-busca:hover {
    background-color: var(--btn-neutral-hover-bg);
    border-color: var(--btn-neutral-hover-border);
    color: var(--btn-neutral-hover-text);
}