/**
 * FlowPRM Design System - Buttons
 * ================================
 * Componente padronizado para botoes.
 *
 * CLASSES PRINCIPAIS:
 * - .prm-btn              Base do botao
 * - .prm-btn--primary     Acao principal (azul)
 * - .prm-btn--secondary   Acao secundaria (cinza)
 * - .prm-btn--success     Sucesso/Salvar (verde)
 * - .prm-btn--warning     Atencao (laranja)
 * - .prm-btn--danger      Perigo/Excluir (vermelho)
 * - .prm-btn--outline     Contorno apenas
 * - .prm-btn--ghost       Transparente
 * - .prm-btn--sm          Pequeno
 * - .prm-btn--lg          Grande
 * - .prm-btn--icon        Apenas icone
 * - .prm-btn--loading     Estado carregando
 */

/* ========================================
   BASE DO BOTAO
   ======================================== */

.prm-btn,
.btn-modern,
.btn-action,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-save,
.btn-cancel,
.btn-submit,
.btn-back,
.btn-add,
.btn-edit,
.btn-delete,
.btn-view,
.btn-export,
.btn-import,
.btn-filter,
.btn-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--prm-space-1, 0.25rem);
    padding: var(--prm-space-1) var(--prm-space-2);
    font-size: var(--prm-font-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: none;
    border-radius: var(--prm-radius-sm, 4px);
    cursor: pointer;
    transition: var(--prm-transition-normal, all 0.2s ease);
    white-space: nowrap;
}

.prm-btn:focus,
.btn-modern:focus,
.btn-action:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Focus visible para acessibilidade (navegacao por teclado) */
.prm-btn:focus-visible,
.btn-modern:focus-visible,
.btn-action:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-success:focus-visible,
.btn-warning:focus-visible,
.btn-danger:focus-visible {
    outline: 2px solid var(--prm-primary, var(--prm-primary));
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(27, 115, 232, 0.2);
}

.prm-btn:disabled,
.btn-modern:disabled,
.btn-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.prm-btn i,
.btn-modern i,
.btn-action i {
    font-size: 0.75rem;
}

/* ========================================
   VARIANTES DE COR
   ======================================== */

/* Primary - Azul (acao principal) - Usando cor primaria do design system */
.prm-btn--primary,
.btn-primary,
.btn-modern.primary {
    background: var(--prm-gradient-primary, linear-gradient(135deg, var(--prm-primary) 0%, var(--prm-primary-dark) 100%));
    color: white;
}

.prm-btn--primary:hover,
.btn-primary:hover,
.btn-modern.primary:hover {
    background: linear-gradient(135deg, var(--prm-primary-dark) 0%, var(--prm-primary-hover) 100%);
    transform: translateY(-1px);
    box-shadow: var(--prm-shadow-primary, 0 2px 8px rgba(27, 115, 232, 0.3));
}

/* Secondary - Cinza (acao secundaria) */
.prm-btn--secondary,
.btn-secondary,
.btn-cancel,
.btn-back,
.btn-clear {
    background: var(--prm-bg-secondary);
    color: var(--prm-text-secondary);
    border: 1px solid var(--prm-border);
}

.prm-btn--secondary:hover,
.btn-secondary:hover,
.btn-cancel:hover,
.btn-back:hover,
.btn-clear:hover {
    background: var(--prm-border);
    border-color: var(--prm-border-dark);
}

/* Success - Verde (salvar, confirmar) */
.prm-btn--success,
.btn-success,
.btn-save,
.btn-submit {
    background: var(--prm-gradient-success, linear-gradient(135deg, var(--prm-success) 0%, var(--prm-success-dark) 100%));
    color: white;
}

.prm-btn--success:hover,
.btn-success:hover,
.btn-save:hover,
.btn-submit:hover {
    background: linear-gradient(135deg, var(--prm-success-dark) 0%, var(--prm-success-hover) 100%);
    transform: translateY(-1px);
    box-shadow: var(--prm-shadow-success, 0 2px 8px rgba(16, 185, 129, 0.3));
}

/* Warning - Laranja (atencao) */
.prm-btn--warning,
.btn-warning,
.btn-action.warning {
    background: var(--prm-gradient-warning, linear-gradient(135deg, var(--prm-warning) 0%, var(--prm-warning-dark) 100%));
    color: white;
}

.prm-btn--warning:hover,
.btn-warning:hover,
.btn-action.warning:hover {
    background: linear-gradient(135deg, var(--prm-warning-dark) 0%, var(--prm-warning-hover) 100%);
    transform: translateY(-1px);
    box-shadow: var(--prm-shadow-warning, 0 2px 8px rgba(245, 158, 11, 0.3));
}

/* Danger - Vermelho (excluir, cancelar) */
.prm-btn--danger,
.btn-danger,
.btn-delete {
    background: var(--prm-gradient-danger, linear-gradient(135deg, var(--prm-danger) 0%, var(--prm-danger-dark) 100%));
    color: white;
}

.prm-btn--danger:hover,
.btn-danger:hover,
.btn-delete:hover {
    background: linear-gradient(135deg, var(--prm-danger-dark) 0%, var(--prm-danger-hover) 100%);
    transform: translateY(-1px);
    box-shadow: var(--prm-shadow-danger, 0 2px 8px rgba(239, 68, 68, 0.3));
}

/* Info - Ciano (informacao) */
.prm-btn--info,
.btn-info,
.btn-view {
    background: var(--prm-gradient-info, linear-gradient(135deg, var(--prm-info) 0%, var(--prm-info-dark) 100%));
    color: white;
}

.prm-btn--info:hover,
.btn-info:hover,
.btn-view:hover {
    background: linear-gradient(135deg, var(--prm-info-dark) 0%, var(--prm-info-hover) 100%);
    transform: translateY(-1px);
    box-shadow: var(--prm-shadow-info, 0 2px 8px rgba(6, 182, 212, 0.3));
}

/* ========================================
   VARIANTES DE ESTILO
   ======================================== */

/* Outline - Apenas contorno */
.prm-btn--outline,
.btn-outline {
    background: transparent;
    border: 1px solid currentColor;
}

.prm-btn--outline.prm-btn--primary,
.btn-outline.btn-primary {
    color: var(--prm-primary);
    border-color: var(--prm-primary);
}

.prm-btn--outline.prm-btn--primary:hover,
.btn-outline.btn-primary:hover {
    background: var(--prm-primary);
    color: white;
}

.prm-btn--outline.prm-btn--success,
.btn-outline.btn-success {
    color: var(--prm-success);
    border-color: var(--prm-success);
}

.prm-btn--outline.prm-btn--success:hover,
.btn-outline.btn-success:hover {
    background: var(--prm-success);
    color: white;
}

.prm-btn--outline.prm-btn--danger,
.btn-outline.btn-danger {
    color: var(--prm-danger);
    border-color: var(--prm-danger);
}

.prm-btn--outline.prm-btn--danger:hover,
.btn-outline.btn-danger:hover {
    background: var(--prm-danger);
    color: white;
}

/* Ghost - Transparente */
.prm-btn--ghost,
.btn-ghost {
    background: transparent;
    color: var(--prm-text-secondary);
}

.prm-btn--ghost:hover,
.btn-ghost:hover {
    background: var(--prm-bg-secondary);
}

/* ========================================
   TAMANHOS - ESCALA PADRONIZADA
   ========================================
   xs:   10px (--prm-font-2xs) - Badges, counters
   sm:   11px (--prm-font-xs)  - Tabelas, acoes inline
   base: 12px (--prm-font-sm)  - Padrao
   lg:   14px (--prm-font-md)  - Headers, CTAs
   ======================================== */

/* Extra Small - Para tabelas e espacos compactos */
.prm-btn--xs,
.btn-xs {
    padding: 0.2rem 0.4rem;
    font-size: var(--prm-font-2xs);
}

.prm-btn--xs i,
.btn-xs i {
    font-size: var(--prm-font-2xs);
}

/* Small - Para acoes em tabelas e listas */
.prm-btn--sm,
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: var(--prm-font-xs);
}

.prm-btn--sm i,
.btn-sm i {
    font-size: var(--prm-font-xs);
}

/* Large - Para CTAs e headers */
.prm-btn--lg,
.btn-lg {
    padding: 0.5rem 1rem;
    font-size: var(--prm-font-md);
}

.prm-btn--lg i,
.btn-lg i {
    font-size: var(--prm-font-md);
}

/* ========================================
   BOTAO DE ICONE
   ======================================== */

.prm-btn--icon,
.btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
}

.prm-btn--icon.prm-btn--sm,
.btn-icon.btn-sm {
    width: 24px;
    height: 24px;
}

.prm-btn--icon.prm-btn--lg,
.btn-icon.btn-lg {
    width: 36px;
    height: 36px;
}

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

/* Loading */
.prm-btn--loading,
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.prm-btn--loading::after,
.btn-loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

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

/* ========================================
   BOTOES ESPECIFICOS DO PRM
   ======================================== */

/* Botao Add (verde com icone +) */
.btn-add {
    background: linear-gradient(135deg, var(--prm-success) 0%, var(--prm-success-hover) 100%);
    color: white;
}

.btn-add:hover {
    background: linear-gradient(135deg, var(--prm-success-hover) 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Botao Edit (azul) */
.btn-edit {
    background: linear-gradient(135deg, var(--prm-primary) 0%, #2563eb 100%);
    color: white;
}

.btn-edit:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Botao Export (verde) */
.btn-export {
    background: linear-gradient(135deg, var(--prm-success) 0%, var(--prm-success-hover) 100%);
    color: white;
}

.btn-export:hover {
    background: linear-gradient(135deg, var(--prm-success-hover) 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Botao Import (azul claro) */
.btn-import {
    background: linear-gradient(135deg, var(--prm-info) 0%, var(--prm-info-hover) 100%);
    color: white;
}

.btn-import:hover {
    background: linear-gradient(135deg, var(--prm-info-hover) 0%, var(--prm-info-dark) 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

/* Botao Filter (cinza) */
.btn-filter {
    background: var(--prm-bg-secondary);
    color: var(--prm-text-secondary);
    border: 1px solid var(--prm-border);
}

.btn-filter:hover {
    background: var(--prm-border);
    border-color: var(--prm-border-dark);
}

.btn-filter.active {
    background: var(--prm-primary);
    color: white;
    border-color: var(--prm-primary);
}

/* Botao RF (Receita Federal) */
.btn-rf,
.btn-rf-primary {
    background: linear-gradient(135deg, var(--prm-purple) 0%, var(--prm-purple-hover) 100%);
    color: white;
}

.btn-rf:hover,
.btn-rf-primary:hover {
    background: linear-gradient(135deg, var(--prm-purple-hover) 0%, var(--prm-purple-dark) 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.btn-rf-secondary {
    background: var(--prm-bg-secondary);
    color: var(--prm-purple-hover);
    border: 1px solid var(--prm-purple-hover);
}

.btn-rf-secondary:hover {
    background: var(--prm-purple-hover);
    color: white;
}

.btn-rf-success {
    background: linear-gradient(135deg, var(--prm-success) 0%, var(--prm-success-hover) 100%);
    color: white;
}

.btn-rf-outline {
    background: transparent;
    color: var(--prm-purple, var(--prm-purple));
    border: 1px solid var(--prm-purple, var(--prm-purple));
}

.btn-rf-outline:hover {
    background: var(--prm-purple, var(--prm-purple));
    color: white;
}

.btn-rf-warning {
    background: var(--prm-gradient-warning, linear-gradient(135deg, var(--prm-warning) 0%, var(--prm-warning-hover) 100%));
    color: white;
}

.btn-rf-danger {
    background: var(--prm-gradient-danger, linear-gradient(135deg, var(--prm-danger) 0%, var(--prm-danger-hover) 100%));
    color: white;
}

.btn-rf-info {
    background: var(--prm-gradient-info, linear-gradient(135deg, var(--prm-info) 0%, var(--prm-info-hover) 100%));
    color: white;
}

.btn-rf-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.6rem;
}

/* Botao HubSpot Sync */
.btn-hubspot-sync {
    background: linear-gradient(135deg, var(--prm-hubspot) 0%, var(--prm-hubspot-hover) 100%);
    color: white;
}

.btn-hubspot-sync:hover {
    background: linear-gradient(135deg, var(--prm-hubspot-hover) 0%, #e8482e 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 122, 89, 0.3);
}

/* Botao HubSpot generico */
.btn-hubspot,
.hubspot-btn {
    background: var(--prm-gradient-hubspot, linear-gradient(135deg, var(--prm-hubspot) 0%, var(--prm-hubspot-hover) 100%));
    color: white;
}

.btn-hubspot:hover,
.hubspot-btn:hover {
    background: linear-gradient(135deg, var(--prm-hubspot-hover) 0%, #e8482e 100%);
    transform: translateY(-1px);
}

/* Botao Download */
.btn-download {
    background: var(--prm-gradient-info, linear-gradient(135deg, var(--prm-info) 0%, var(--prm-info-hover) 100%));
    color: white;
}

.btn-download:hover {
    background: linear-gradient(135deg, var(--prm-info-hover) 0%, var(--prm-info-dark) 100%);
    transform: translateY(-1px);
}

/* Botao Columns (seletor de colunas) */
.btn-columns {
    background: var(--prm-bg-secondary, var(--prm-bg-secondary));
    color: var(--prm-text-secondary, var(--prm-text-secondary));
    border: 1px solid var(--prm-border, var(--prm-border));
}

.btn-columns:hover {
    background: var(--prm-border, var(--prm-border));
    border-color: var(--prm-border-dark, var(--prm-border-dark));
}

/* Botao Select File */
.btn-select-file {
    background: var(--prm-gradient-primary, linear-gradient(135deg, var(--prm-primary) 0%, #1557B2 100%));
    color: white;
}

/* Botao Quick Action (dashboards) */
.quick-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.quick-action-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

/* Action Table Btn (tabelas de dashboard) */
.action-table-btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.55rem;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Botao Modal */
.btn-modal-close,
.btn-close-modal {
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--prm-text-muted, var(--prm-text-muted));
}

.btn-modal-close:hover,
.btn-close-modal:hover {
    color: var(--prm-text-primary, var(--prm-text-primary));
}

/* Botao Send (mensagens) */
.btn-send {
    background: var(--prm-gradient-success, linear-gradient(135deg, var(--prm-success) 0%, var(--prm-success-hover) 100%));
    color: white;
}

.btn-send:hover {
    background: linear-gradient(135deg, var(--prm-success-hover) 0%, #047857 100%);
    transform: translateY(-1px);
}

/* Botao Reply */
.btn-reply {
    background: var(--prm-gradient-primary, linear-gradient(135deg, var(--prm-primary) 0%, #1557B2 100%));
    color: white;
}

/* Botao Gradient Purple - Visual apenas (composicao com btn btn-xs) */
.btn-gradient-purple {
    background: var(--prm-gradient-purple, linear-gradient(135deg, var(--prm-purple) 0%, var(--prm-purple-dark, #7c3aed) 100%));
    color: var(--prm-text-inverse, white);
    border: none;
}

.btn-gradient-purple:hover {
    background: linear-gradient(135deg, var(--prm-purple-dark, #7c3aed) 0%, var(--prm-purple-hover, #6d28d9) 100%);
    color: var(--prm-text-inverse, white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Botao Outline variants */
.btn-outline-primary {
    background: transparent;
    color: var(--prm-primary, var(--prm-primary));
    border: 1px solid var(--prm-primary, var(--prm-primary));
}

.btn-outline-primary:hover {
    background: var(--prm-primary, var(--prm-primary));
    color: white;
}

.btn-outline-secondary {
    background: transparent;
    color: var(--prm-text-secondary, var(--prm-text-secondary));
    border: 1px solid var(--prm-border, var(--prm-border));
}

.btn-outline-secondary:hover {
    background: var(--prm-bg-secondary, var(--prm-bg-secondary));
}

.btn-outline-success {
    background: transparent;
    color: var(--prm-success, var(--prm-success));
    border: 1px solid var(--prm-success, var(--prm-success));
}

.btn-outline-success:hover {
    background: var(--prm-success, var(--prm-success));
    color: white;
}

.btn-outline-warning {
    background: transparent;
    color: var(--prm-warning, var(--prm-warning));
    border: 1px solid var(--prm-warning, var(--prm-warning));
}

.btn-outline-warning:hover {
    background: var(--prm-warning, var(--prm-warning));
    color: white;
}

.btn-outline-danger {
    background: transparent;
    color: var(--prm-danger, var(--prm-danger));
    border: 1px solid var(--prm-danger, var(--prm-danger));
}

.btn-outline-danger:hover {
    background: var(--prm-danger, var(--prm-danger));
    color: white;
}

.btn-outline-info {
    background: transparent;
    color: var(--prm-info, var(--prm-info));
    border: 1px solid var(--prm-info, var(--prm-info));
}

.btn-outline-info:hover {
    background: var(--prm-info, var(--prm-info));
    color: white;
}

/* ========================================
   GRUPO DE BOTOES
   ======================================== */

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

.prm-btn-group .prm-btn,
.btn-group .btn-action {
    border-radius: 0;
}

.prm-btn-group .prm-btn:first-child,
.btn-group .btn-action:first-child {
    border-radius: 4px 0 0 4px;
}

.prm-btn-group .prm-btn:last-child,
.btn-group .btn-action:last-child {
    border-radius: 0 4px 4px 0;
}

/* ========================================
   TABLE ACTION BUTTONS
   ======================================== */

/* Action buttons para tabelas (fundo claro) */
.action-buttons {
    display: flex;
    gap: 0.2rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Botao de acao padrao - flexivel para texto + icone */
.btn-action {
    padding: 0.2rem 0.35rem;
    min-height: 22px;
    border-radius: 4px;
    border: none;
    font-size: var(--prm-font-xs, 0.65rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    white-space: nowrap;
}

/* Botao de acao apenas com icone - tamanho fixo */
.btn-action.btn-icon-only {
    width: 22px;
    height: 22px;
    padding: 0;
}

.btn-action.btn-icon-only.btn-sm {
    width: 18px;
    height: 18px;
}

.btn-action.btn-icon-only.btn-lg {
    width: 28px;
    height: 28px;
}

.btn-action.btn-view,
.btn-action-view {
    background: var(--prm-info-bg);
    color: var(--prm-info-dark);
}

.btn-action.btn-view:hover,
.btn-action-view:hover {
    background: var(--prm-info-dark);
    color: white;
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-action.btn-edit,
.btn-action-edit {
    background: var(--prm-warning-light);
    color: var(--prm-warning-dark);
}

.btn-action.btn-edit:hover,
.btn-action-edit:hover {
    background: var(--prm-warning);
    color: white;
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-action.btn-delete,
.btn-action-delete {
    background: var(--prm-danger-light);
    color: var(--prm-danger-dark);
}

.btn-action.btn-delete:hover,
.btn-action-delete:hover {
    background: var(--prm-danger);
    color: white;
    transform: translateY(-1px);
}

/* View Toggle Buttons */
.view-toggle {
    background: var(--prm-bg-light);
    border: 1px solid var(--prm-border);
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle:hover {
    background: var(--prm-bg-secondary);
    border-color: var(--prm-border-dark);
}

.view-toggle.active {
    background: var(--prm-warning);
    color: white;
    border-color: var(--prm-warning);
}

/* ========================================
   RESPONSIVO
   ======================================== */

@media (max-width: 640px) {
    .prm-btn,
    .btn-modern,
    .btn-action {
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
    }

    .prm-btn i,
    .btn-modern i,
    .btn-action i {
        font-size: 0.7rem;
    }

    .prm-btn--icon,
    .btn-icon {
        width: 26px;
        height: 26px;
    }
}