/* FLiPT Button Overrides - Ensures FLiPT branding on all buttons */

/* Override league card buttons with FLiPT brand colors */

/* Primary button - View League Info */
.league-card-btn-primary {
    background: linear-gradient(135deg, var(--flipt-secondary) 0%, var(--flipt-secondary-hover) 100%) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.league-card-btn-primary:hover {
    background: linear-gradient(135deg, var(--flipt-secondary-hover) 0%, var(--flipt-secondary) 100%) !important;
    color: white !important;
    filter: brightness(1.1);
}

/* Secondary button - View Bag Tags */
.league-card-btn-secondary {
    background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-primary-hover) 100%) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.league-card-btn-secondary:hover {
    background: linear-gradient(135deg, var(--flipt-primary-hover) 0%, var(--flipt-primary) 100%) !important;
    color: white !important;
    filter: brightness(1.1);
}

/* Recap button - View Recap/Trailer */
.league-card-btn-recap {
    background: linear-gradient(135deg, var(--flipt-secondary) 0%, var(--flipt-primary) 100%) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.league-card-btn-recap:hover {
    background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%) !important;
    color: white !important;
    filter: brightness(1.1);
}

/* Dark mode enhancements */
[data-bs-theme="dark"] {
    .league-card-btn-primary {
        background: linear-gradient(135deg, var(--flipt-secondary) 0%, var(--flipt-secondary-hover) 100%) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        filter: brightness(1.1) contrast(1.1);
    }
    
    .league-card-btn-primary:hover {
        background: linear-gradient(135deg, var(--flipt-secondary-hover) 0%, var(--flipt-secondary) 100%) !important;
        filter: brightness(1.2) contrast(1.15);
    }
    
    .league-card-btn-secondary {
        background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-primary-hover) 100%) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        filter: brightness(1.1) contrast(1.1);
    }
    
    .league-card-btn-secondary:hover {
        background: linear-gradient(135deg, var(--flipt-primary-hover) 0%, var(--flipt-primary) 100%) !important;
        filter: brightness(1.2) contrast(1.15);
    }
    
    .league-card-btn-recap {
        background: linear-gradient(135deg, var(--flipt-secondary) 0%, var(--flipt-primary) 100%) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        filter: brightness(1.1) contrast(1.1);
    }
    
    .league-card-btn-recap:hover {
        background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%) !important;
        filter: brightness(1.2) contrast(1.15);
    }
}

/* Override the generic button theme classes to use FLiPT colors */
.btn-theme-base.btn-theme-primary {
    background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%) !important;
    border-color: var(--flipt-primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(var(--flipt-primary-rgb), 0.2) !important;
}

.btn-theme-base.btn-theme-primary:hover:not(:disabled):not(.processing) {
    background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%) !important;
    border-color: var(--flipt-primary-hover) !important;
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--flipt-primary-rgb), 0.3) !important;
}

.btn-theme-base.btn-theme-outline {
    /* Light background for better visibility in tables */
    background: rgba(var(--flipt-primary-rgb), 0.08) !important;
    color: var(--flipt-primary) !important;
    border-color: var(--flipt-primary) !important;
    /* Ensure minimum size for icon-only buttons */
    min-width: 32px;
    min-height: 32px;
}

/* Icon-only outline buttons in tables need special treatment */
.btn-theme-base.btn-theme-outline.btn-sm {
    /* Slightly more opaque background for small buttons */
    background: rgba(var(--flipt-primary-rgb), 0.12) !important;
}

.btn-theme-base.btn-theme-outline:hover:not(:disabled):not(.processing) {
    background: var(--flipt-primary) !important;
    border-color: var(--flipt-primary-hover) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(var(--flipt-primary-rgb), 0.2) !important;
}

.btn-theme-base.btn-theme-accent {
    background: var(--flipt-primary) !important;
    color: white !important;
    border-color: var(--flipt-primary) !important;
    box-shadow: 0 2px 8px rgba(var(--flipt-primary-rgb), 0.2) !important;
}

.btn-theme-base.btn-theme-accent:hover:not(:disabled):not(.processing) {
    background: var(--flipt-primary-hover) !important;
    border-color: var(--flipt-primary-hover) !important;
    filter: brightness(0.95);
}

.btn-theme-base.btn-theme-contrast {
    background: white !important;
    color: var(--flipt-dark) !important;
    border-color: white !important;
}

.btn-theme-base.btn-theme-contrast:hover:not(:disabled):not(.processing) {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--flipt-dark) !important;
}

/* Danger button styles for better visibility */
.btn-theme-base.btn-theme-danger {
    background: #dc3545 !important;
    color: white !important;
    border-color: #dc3545 !important;
    /* Ensure minimum size for icon-only buttons */
    min-width: 32px;
    min-height: 32px;
}

.btn-theme-base.btn-theme-danger:hover:not(:disabled):not(.processing) {
    background: #c82333 !important;
    border-color: #bd2130 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
}

/* Hero buttons with FLiPT branding */
.btn-hero-primary {
    background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%) !important;
}

.btn-hero-primary:hover {
    background: linear-gradient(135deg, var(--flipt-primary-hover) 0%, var(--flipt-secondary-hover) 100%) !important;
}

.btn-hero-secondary {
    border-color: var(--flipt-secondary) !important;
    color: var(--flipt-secondary) !important;
}

.btn-hero-secondary:hover {
    background: var(--flipt-secondary) !important;
    border-color: var(--flipt-secondary-hover) !important;
    color: white !important;
}

/* Dark mode button theme overrides */
[data-bs-theme="dark"] {
    .btn-theme-base.btn-theme-outline {
        /* More visible background in dark mode */
        background: rgba(var(--flipt-primary-rgb), 0.15) !important;
        color: var(--flipt-primary) !important;
        border-color: var(--flipt-primary) !important;
    }
    
    /* Extra visibility for small outline buttons in dark mode */
    .btn-theme-base.btn-theme-outline.btn-sm {
        background: rgba(var(--flipt-primary-rgb), 0.2) !important;
        border-width: 1.5px;
    }
    
    .btn-theme-base.btn-theme-outline:hover:not(:disabled):not(.processing) {
        background: var(--flipt-primary) !important;
        border-color: var(--flipt-primary) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(var(--flipt-primary-rgb), 0.4) !important;
    }
    
    .btn-theme-base.btn-theme-contrast {
        background: var(--flipt-dark) !important;
        color: white !important;
        border-color: var(--flipt-dark) !important;
    }
    
    .btn-theme-base.btn-theme-contrast:hover:not(:disabled):not(.processing) {
        background: rgba(64, 64, 65, 0.8) !important;
        color: white !important;
        filter: brightness(1.2);
    }
    
    /* Danger buttons in dark mode */
    .btn-theme-base.btn-theme-danger {
        background: #dc3545 !important;
        color: white !important;
        border-color: #dc3545 !important;
        /* Ensure visibility in dark mode */
        box-shadow: 0 1px 3px rgba(220, 53, 69, 0.3) !important;
    }
    
    .btn-theme-base.btn-theme-danger:hover:not(:disabled):not(.processing) {
        background: #e74c3c !important;
        border-color: #e74c3c !important;
        box-shadow: 0 2px 6px rgba(231, 76, 60, 0.4) !important;
    }
}