/* Custom Global Button Sizing to unify all buttons across the platform */
.btn:not(.btn-sm):not(.btn-lg) {
    padding: 0.5rem 1.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    min-height: 42px !important;
}

.btn-sm {
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
}

.btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
}

/* Ensure radio button labels (which act as buttons) also conform */
label.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Custom SpeedyBet Theme Colors */
:root, [data-bs-theme="dark"] {
    /* Backgrounds */
    --bs-body-bg: #0b1114 !important;
    --bs-body-bg-rgb: 11, 17, 20 !important;
    --bs-dark: #0b1114 !important;
    --bs-dark-rgb: 11, 17, 20 !important;
    
    /* Surfaces / Cards */
    --bs-card-bg: #121a1f !important;
    --bs-secondary-bg: #121a1f !important;
    --bs-tertiary-bg: #1a262d !important;
    
    /* Borders */
    --bs-border-color: #1a262d !important;
    
    /* Primary Accent (Neon Green) */
    --bs-primary: #03df82 !important;
    --bs-primary-rgb: 3, 223, 130 !important;
    
    /* Primary Subtle (For Bet Option Buttons) */
    --bs-primary-bg-subtle: #0d241c !important;
    --bs-primary-border-subtle: #113025 !important;
    --bs-primary-text-emphasis: #03df82 !important;

    /* Text Colors */
    --bs-body-color: #ffffff !important;
    --bs-secondary-color: #a8b6c2 !important;

    /* Subtle Dark (for .bg-dark-subtle elements) */
    --bs-dark-bg-subtle: #121a1f !important;
    --bs-dark-border-subtle: #1a262d !important;

    /* Success Theme Colors (Synced with Primary) */
    --bs-success: #03df82 !important;
    --bs-success-rgb: 3, 223, 130 !important;
    --bs-success-bg-subtle: rgba(3, 223, 130, 0.15) !important;
    --bs-success-text-emphasis: #03df82 !important;

    /* Custom Vibrant Danger Color */
    --bs-danger: #ff1a1a !important;
    --bs-danger-rgb: 255, 26, 26 !important;
    --bs-danger-bg-subtle: rgba(255, 26, 26, 0.15) !important;
    --bs-danger-text-emphasis: #ff4d4d !important;
}

/* Force pure red on danger buttons overriding template's hardcoded SASS output */
.btn-danger, [data-bs-theme="dark"] .btn-danger {
    background-color: #ff1a1a !important;
    border-color: #ff1a1a !important;
    color: #fff !important;
}
.btn-danger:hover, [data-bs-theme="dark"] .btn-danger:hover {
    background-color: #e60000 !important;
    border-color: #cc0000 !important;
}

.btn-outline-danger, [data-bs-theme="dark"] .btn-outline-danger {
    color: #ff1a1a !important;
    border-color: #ff1a1a !important;
}
.btn-outline-danger:hover, [data-bs-theme="dark"] .btn-outline-danger:hover {
    background-color: #ff1a1a !important;
    border-color: #ff1a1a !important;
    color: #fff !important;
}

.text-danger {
    color: #ff1a1a !important;
}


/* Specific styling for the bet option radio buttons to match screenshot */
.btn-check:checked + .btn.bg-primary-subtle {
    background-color: var(--bs-primary) !important;
    color: var(--bs-body-bg) !important;
    border-color: var(--bs-primary) !important;
}

.btn.bg-primary-subtle {
    border: 1px solid var(--bs-primary-border-subtle) !important;
    transition: all 0.2s ease-in-out;
}
.btn.bg-primary-subtle:hover {
    border-color: var(--bs-primary) !important;
    background-color: rgba(3, 223, 130, 0.15) !important;
}

/* Ensure ALL primary buttons use dark text for contrast on neon green */
:root .btn-primary,
[data-bs-theme="dark"][data-color-theme="Blue_Theme"] :root .btn-primary, 
[data-bs-theme="light"][data-color-theme="Blue_Theme"] :root .btn-primary,
.btn-primary {
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-bg: #02c774 !important;
    --bs-btn-hover-border-color: #02c774 !important;
    --bs-btn-color: var(--bs-body-bg) !important;
    --bs-btn-hover-color: var(--bs-body-bg) !important;
    --bs-btn-active-bg: #02b66a !important;
    --bs-btn-active-border-color: #02b66a !important;
    --bs-btn-active-color: var(--bs-body-bg) !important;
    color: var(--bs-body-bg) !important;
    font-weight: 600 !important;
    border-color: var(--bs-primary) !important;
    background-color: var(--bs-primary) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #02c774 !important; /* Slightly darker neon for hover */
    border-color: #02c774 !important;
    color: var(--bs-body-bg) !important;
}

/* Outline Primary Buttons */
.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: var(--bs-primary) !important;
    color: var(--bs-body-bg) !important;
}

/* Custom styling for alert-dark (used in empty states) */
:root .alert-dark,
[data-bs-theme="dark"] .alert-dark {
    --bs-alert-color: #04df82 !important;
    --bs-alert-bg: #012c24 !important;
    --bs-alert-border-color: #04df82 !important;
    --bs-alert-link-color: var(--bs-dark-text-emphasis) !important;
}

/* Custom Table Backgrounds */
:root .table, 
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent !important;
    --bs-table-color: #f8f9fa !important;
    --bs-table-border-color: rgba(255, 255, 255, 0.05) !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
    --bs-table-hover-bg: rgba(3, 223, 130, 0.1) !important;
}

[data-bs-theme="dark"] .table thead th {
    background-color: #032315 !important;
    color: #f6f9fc !important;
    border-bottom: 2px solid var(--bs-primary) !important;
}

[data-bs-theme="dark"] .table tbody td {
    background-color: #0b1114 !important; /* Darker content */
    color: #f8f9fa !important;
}

code {
    font-size: .875em;
    color: var(--bs-primary) !important;
    word-wrap: break-word;
}

/* Custom Form Controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #0b1114 !important;
    border: 1px solid #1a262d !important;
    color: #a8b6c2 !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #0b1114 !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(3, 223, 130, 0.25) !important;
    color: #a8b6c2 !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #8c9ca6 !important;
}

[data-bs-theme="dark"] .input-group-text {
    background-color: #121a1f !important;
    border: 1px solid #1a262d !important;
    color: #8c9ca6 !important;
}

/* Fix for template overriding label colors too dark */
[data-bs-theme=dark] .cke_button_label, 
[data-bs-theme=dark] .cke_combo_text, 
[data-bs-theme=dark] .col-form-label, 
[data-bs-theme=dark] .dtp .dtp-picker-time>a, 
[data-bs-theme=dark] .dtp table.dtp-picker-days tr>td>a, 
[data-bs-theme=dark] .dtp table.dtp-picker-days tr>th, 
[data-bs-theme=dark] .form-label, 
[data-bs-theme=dark] .noUi-tooltip, 
[data-bs-theme=dark] .picker, 
[data-bs-theme=dark] .ql-snow .ql-picker.ql-header .ql-picker-item::before, 
[data-bs-theme=dark] .ql-snow .ql-picker.ql-header .ql-picker-label::before, 
[data-bs-theme=dark] .text-dark {
    color: #f8f9fa !important;
}

/* Sidebar and Topbar integration */
[data-bs-theme="dark"] .left-sidebar,
[data-bs-theme="dark"] .topbar {
    background-color: #0b1114 !important;
}

[data-bs-theme="dark"] .left-sidebar {
    border-right: 1px solid #1a262d !important;
}

[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link {
    color: #f8f9fa !important;
    border-radius: 8px;
    margin: 0 10px;
}

[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link.active {
    background-color: rgba(4, 223, 130, 0.1) !important;
    color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link i {
    color: inherit !important;
}

[data-bs-theme="dark"] .text-muted,
:root .text-muted {
    color: var(--bs-secondary-color) !important;
}

/* Custom Pagination Styling */
.pagination {
    --bs-pagination-bg: #121a1f !important;
    --bs-pagination-border-color: #1a262d !important;
    --bs-pagination-color: #a8b6c2 !important;
    --bs-pagination-hover-bg: rgba(3, 223, 130, 0.1) !important;
    --bs-pagination-hover-color: #03df82 !important;
    --bs-pagination-hover-border-color: #03df82 !important;
    --bs-pagination-active-bg: #03df82 !important;
    --bs-pagination-active-border-color: #03df82 !important;
    --bs-pagination-active-color: #0b1114 !important;
    --bs-pagination-disabled-bg: transparent !important;
    --bs-pagination-disabled-border-color: #1a262d !important;
    --bs-pagination-disabled-color: rgba(168, 182, 194, 0.5) !important;
}

.page-link {
    border-radius: 6px;
    margin: 0 3px;
    transition: all 0.2s ease;
    border: 1px solid var(--bs-pagination-border-color);
}

.page-item.active .page-link, .page-item.active span {
    box-shadow: 0 0 10px rgba(3, 223, 130, 0.3);
    font-weight: 700;
}

/* Tabs: Solo borde de color al estar activos */
.nav-outline .nav-link {
    background: transparent !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
    border-radius: 50rem !important;
    transition: all 0.3s ease;
}

.nav-outline .nav-link:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.5) !important;
    color: var(--bs-primary) !important;
}

.nav-outline .nav-link.active {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
    box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.1);
}

/* Custom styling for sidebar section headers */
.nav-small-cap {
    margin-top: 24px !important;
    color: #03df82 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 3px 0 !important;
    line-height: 26px !important;
    text-transform: uppercase !important;
}

/* -------------------------------------------------------------
 * Event Details specific styling
 * ------------------------------------------------------------- */
.detail-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.detail-card:hover {
    transform: translateY(-2px);
    border-color: var(--bs-primary) !important;
    box-shadow: 0 6px 20px rgba(3, 223, 130, 0.08) !important;
}
.winner-card {
    border-left: 3px solid var(--bs-success) !important;
    box-shadow: 0 0 15px rgba(3, 223, 130, 0.1) !important;
}
.winner-card:hover {
    box-shadow: 0 6px 20px rgba(3, 223, 130, 0.15) !important;
    border-color: var(--bs-success) !important;
}
.user-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 1px solid var(--bs-primary-border-subtle);
}

/* -------------------------------------------------------------
 * Utilities
 * ------------------------------------------------------------- */
.bg-tertiary-custom {
    background-color: var(--bs-tertiary-bg) !important;
}

.progress-sm {
    height: 6px !important;
}

.text-xs {
    font-size: 0.75rem !important;
}

.search-input-md {
    max-width: 250px !important;
}

/* -------------------------------------------------------------
 * SweetAlert2 Dark Premium Theme Overrides
 * ------------------------------------------------------------- */
body div:where(.swal2-container) div:where(.swal2-popup),
[data-bs-theme="dark"] .swal2-container .swal2-popup,
.swal2-popup {
    background-color: #121a1f !important;
    border: 1px solid #1a262d !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

body div:where(.swal2-container) .swal2-title,
[data-bs-theme="dark"] .swal2-title,
.swal2-title {
    color: #ffffff !important;
}

body div:where(.swal2-container) .swal2-html-container,
[data-bs-theme="dark"] .swal2-html-container,
.swal2-html-container {
    color: #a8b6c2 !important;
}

body div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm,
[data-bs-theme="dark"] .swal2-confirm,
.swal2-confirm {
    background-color: #03df82 !important;
    color: #0b1114 !important;
    font-weight: 600 !important;
    border: none !important;
}
body div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:hover,
[data-bs-theme="dark"] .swal2-confirm:hover,
.swal2-confirm:hover {
    background-color: #02c774 !important;
}

body div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel,
[data-bs-theme="dark"] .swal2-cancel,
.swal2-cancel {
    background-color: #1a262d !important;
    color: #ffffff !important;
    border: 1px solid #1a262d !important;
}
body div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:hover,
[data-bs-theme="dark"] .swal2-cancel:hover,
.swal2-cancel:hover {
    background-color: #24343d !important;
}

body div:where(.swal2-container) .swal2-icon.swal2-warning,
[data-bs-theme="dark"] .swal2-icon.swal2-warning,
.swal2-icon.swal2-warning {
    border-color: #03df82 !important;
    color: #03df82 !important;
}