/* Exact Chessback.com Color Scheme */

:root {
    /* Primary Colors from chessback.com */
    --chessback-purple-primary: #6B46C1;       /* Purple primary */
    --chessback-blue-secondary: #3B82F6;       /* Blue secondary */
    --chessback-purple-light: #8B5CF6;         /* Light purple */
    --chessback-blue-light: #60A5FA;           /* Light blue */
    --chessback-purple-dark: #553C9A;          /* Dark purple */
    --chessback-blue-dark: #2563EB;            /* Dark blue */
    
    /* Background variations */
    --chessback-purple-bg: rgba(107, 70, 193, 0.1);
    --chessback-blue-bg: rgba(59, 130, 246, 0.1);
    --chessback-purple-hover: rgba(107, 70, 193, 0.2);
    --chessback-blue-hover: rgba(59, 130, 246, 0.2);
    
    /* Glow effects */
    --chessback-purple-glow: rgba(107, 70, 193, 0.4);
    --chessback-blue-glow: rgba(59, 130, 246, 0.4);
}

/* Override any greenish colors in services sections */
#services {
    background: linear-gradient(135deg, var(--chessback-purple-primary) 0%, var(--chessback-blue-secondary) 100%) !important;
}

#services::before {
    background: rgba(107, 70, 193, 0.8) !important;
}

/* Schedule Management section */
.service-item:nth-child(1),
.service-item[data-service="schedule"] {
    background: var(--chessback-purple-bg) !important;
    border-left: 4px solid var(--chessback-purple-primary) !important;
}

.service-item:nth-child(1):hover,
.service-item[data-service="schedule"]:hover {
    background: var(--chessback-purple-hover) !important;
    box-shadow: 0 4px 15px var(--chessback-purple-glow) !important;
}

.service-item:nth-child(1) h3,
.service-item[data-service="schedule"] h3 {
    color: var(--chessback-purple-primary) !important;
}

.service-item:nth-child(1) .service-icon,
.service-item[data-service="schedule"] .service-icon {
    color: var(--chessback-purple-primary) !important;
}

/* Application Assistance section */
.service-item:nth-child(2),
.service-item[data-service="application"] {
    background: var(--chessback-blue-bg) !important;
    border-left: 4px solid var(--chessback-blue-secondary) !important;
}

.service-item:nth-child(2):hover,
.service-item[data-service="application"]:hover {
    background: var(--chessback-blue-hover) !important;
    box-shadow: 0 4px 15px var(--chessback-blue-glow) !important;
}

.service-item:nth-child(2) h3,
.service-item[data-service="application"] h3 {
    color: var(--chessback-blue-secondary) !important;
}

.service-item:nth-child(2) .service-icon,
.service-item[data-service="application"] .service-icon {
    color: var(--chessback-blue-secondary) !important;
}

/* AI-Enhanced section */
.service-item:nth-child(3),
.service-item[data-service="ai"] {
    background: linear-gradient(135deg, var(--chessback-purple-bg), var(--chessback-blue-bg)) !important;
    border-left: 4px solid var(--chessback-purple-primary) !important;
}

.service-item:nth-child(3):hover,
.service-item[data-service="ai"]:hover {
    background: linear-gradient(135deg, var(--chessback-purple-hover), var(--chessback-blue-hover)) !important;
    box-shadow: 0 4px 15px var(--chessback-purple-glow), 0 4px 15px var(--chessback-blue-glow) !important;
}

.service-item:nth-child(3) h3,
.service-item[data-service="ai"] h3 {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-item:nth-child(3) .service-icon,
.service-item[data-service="ai"] .service-icon {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Override any existing green colors */
.text-success,
.btn-success,
.bg-success,
.border-success {
    color: var(--chessback-purple-primary) !important;
    background-color: var(--chessback-purple-bg) !important;
    border-color: var(--chessback-purple-primary) !important;
}

/* Primary button updates */
.btn-primary {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--chessback-purple-dark), var(--chessback-blue-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--chessback-purple-glow) !important;
}

/* Secondary button updates */
.btn-secondary {
    background: var(--chessback-blue-secondary) !important;
    border: none !important;
    color: white !important;
}

.btn-secondary:hover {
    background: var(--chessback-blue-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--chessback-blue-glow) !important;
}

/* Outline Secondary (override greenish borders) */
.btn-outline-secondary {
    border: 2px solid var(--chessback-purple-primary) !important;
    color: var(--chessback-purple-primary) !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--chessback-purple-primary) !important;
    border-color: var(--chessback-purple-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px var(--chessback-purple-glow) !important;
}

/* Modal Event Name Button - Purple gradient with proper interactivity */
#modalEventName.btn-secondary {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    padding: 0.5rem 1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(107, 70, 193, 0.3) !important;
}

#modalEventName.btn-secondary:hover {
    background: linear-gradient(135deg, var(--chessback-blue-secondary), var(--chessback-purple-primary)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(107, 70, 193, 0.4) !important;
}

#modalEventName.btn-secondary:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 8px rgba(107, 70, 193, 0.3) !important;
}

/* Clean Event Modal Styling - Targeted approach without affecting buttons */
#eventModal .modal-content {
    background: white !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

#eventModal .modal-header {
    background: white !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 1rem 1.5rem !important;
}

#eventModal .modal-body {
    background: white !important;
    padding: 1.5rem !important;
    color: #333 !important;
}

#eventModal .modal-footer {
    background: white !important;
    border-top: 1px solid #e9ecef !important;
    padding: 1rem 1.5rem !important;
}

/* Modal Close Button Styling */
#modalCloseBtn.btn-secondary {
    background: #6c757d !important;
    border: 1px solid #6c757d !important;
    color: white !important;
    font-weight: 500 !important;
    border-radius: 20px !important;
    padding: 0.5rem 1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
}

#modalCloseBtn.btn-secondary:hover {
    background: #5a6268 !important;
    border-color: #5a6268 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3) !important;
}

#modalCloseBtn.btn-secondary:active {
    transform: translateY(0px) !important;
    box-shadow: 0 1px 4px rgba(108, 117, 125, 0.2) !important;
}

/* Links and accents */
a:not(.btn):not(.navbar-link-bethesda-black) {
    color: var(--chessback-purple-primary) !important;
}

a:not(.btn):not(.navbar-link-bethesda-black):hover {
    color: var(--chessback-blue-secondary) !important;
}

/* Form controls focus states */
.form-control:focus,
.form-select:focus {
    border-color: var(--chessback-purple-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--chessback-purple-glow) !important;
}

/* Cards and components */
.card {
    border: 1px solid rgba(107, 70, 193, 0.1) !important;
}

.card:hover {
    box-shadow: 0 4px 15px var(--chessback-purple-glow) !important;
    transform: translateY(-2px) !important;
}

/* Progress bars and indicators */
.progress-bar {
    background: linear-gradient(90deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
}

/* Badges */
.badge-primary {
    background: var(--chessback-purple-primary) !important;
}

.badge-secondary {
    background: var(--chessback-blue-secondary) !important;
}

/* Text colors */
.text-primary {
    color: var(--chessback-purple-primary) !important;
}

.text-secondary {
    color: var(--chessback-blue-secondary) !important;
}

/* Remove any dark blue backgrounds */
.bg-dark,
.bg-primary {
    background: #000000 !important;
}

/* Specific fixes for common Bootstrap overrides */
.bg-primary {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
}

/* Icon colors */
.fa-purple, .icon-purple {
    color: var(--chessback-purple-primary) !important;
}

.fa-blue, .icon-blue {
    color: var(--chessback-blue-secondary) !important;
}

/* Timeline Colors Update */
.custom-timeline-line {
    background: linear-gradient(90deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
}

.custom-event {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    border-color: var(--chessback-purple-primary) !important;
}

.custom-event:hover {
    background: linear-gradient(135deg, var(--chessback-purple-dark), var(--chessback-blue-dark)) !important;
    box-shadow: 0 4px 15px var(--chessback-purple-glow) !important;
}

.custom-timeline-mark::before {
    background: var(--chessback-purple-primary) !important;
}

/* Section Titles with Chessback Colors */
.section-title {
    color: var(--chessback-purple-primary) !important;
    font-weight: 600 !important;
}

.section-title i {
    color: var(--chessback-blue-secondary) !important;
}

/* Change History Toggle Styling */
.change-history-toggle {
    color: var(--chessback-purple-primary) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.change-history-toggle:hover {
    color: var(--chessback-blue-secondary) !important;
    text-decoration: none !important;
}

.change-history-section h3.text-gradient {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
}

/* Competition Form Section Titles */
.section-title {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    align-items: center !important;
}

/* Carousel Improvements */
.carousel-control-prev,
.carousel-control-next {
    background: rgba(107, 70, 193, 0.2) !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.3s ease !important;
    position: fixed !important;
    z-index: 1050 !important;
}

.carousel-control-prev {
    left: 20px !important;
}

.carousel-control-next {
    right: 20px !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(107, 70, 193, 0.4) !important;
    box-shadow: 0 4px 15px var(--chessback-purple-glow) !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}

/* Dashboard/Schedule Controls */
.custom-controls .btn-primary {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.custom-controls .btn-primary:hover {
    background: linear-gradient(135deg, var(--chessback-purple-dark), var(--chessback-blue-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--chessback-purple-glow) !important;
}

/* Comprehensive Blue Color Overrides */

/* Text Colors */
.text-info {
    color: var(--chessback-blue-secondary) !important;
}

/* Background Colors */
.bg-info {
    background: var(--chessback-blue-secondary) !important;
    color: white !important;
}

.card-header.bg-info {
    background: linear-gradient(135deg, var(--chessback-blue-secondary), var(--chessback-purple-primary)) !important;
}

/* Spinners and Loading */
.spinner-border.text-primary {
    color: var(--chessback-purple-primary) !important;
}

/* Team Dashboard Specific */
.fa-users.text-primary,
.fa-envelope.text-info {
    color: var(--chessback-purple-primary) !important;
}

.fa-envelope.fa-2x.text-info {
    color: var(--chessback-blue-secondary) !important;
}

/* Stats Cards */
.card.bg-primary {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
}

.card.bg-info {
    background: linear-gradient(135deg, var(--chessback-blue-secondary), var(--chessback-purple-primary)) !important;
}

/* Search Page */
h5.text-primary {
    color: var(--chessback-purple-primary) !important;
}

/* Registration Page */
.fas.text-primary,
.fa-info-circle.text-primary {
    color: var(--chessback-purple-primary) !important;
}

.text-primary a,
a.text-primary {
    color: var(--chessback-purple-primary) !important;
}

.text-primary a:hover,
a.text-primary:hover {
    color: var(--chessback-blue-secondary) !important;
}

/* Team Statistics */
.fas.fa-circle.text-primary {
    color: var(--chessback-purple-primary) !important;
}

.badge.bg-primary {
    background: var(--chessback-purple-primary) !important;
}

.fas.fa-user.text-primary {
    color: var(--chessback-purple-primary) !important;
}

h4.text-primary {
    color: var(--chessback-purple-primary) !important;
}

/* Team Detail */
.btn.text-primary {
    color: var(--chessback-purple-primary) !important;
}

.btn.text-primary:hover {
    color: var(--chessback-blue-secondary) !important;
}

/* Timeline Event Colors Override */
.custom-event-content {
    border-left: 4px solid var(--chessback-purple-primary) !important;
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.05), rgba(59, 130, 246, 0.05)) !important;
}

.custom-event-content::before {
    background-color: var(--chessback-purple-primary) !important;
}

/* Intelligent Timeline Connecting Lines - Auto-calculated to reach timeline exactly */
:root {
    --timeline-position: 60px;
    --top-row-position: 30px;
    --bottom-row-position: 210px;
}

.custom-event:nth-child(odd) .custom-event-content::before {
    /* TOP ROW: Calculate distance from card to timeline */
    top: calc(-1 * (var(--timeline-position) - var(--top-row-position))) !important;
    height: calc(var(--timeline-position) - var(--top-row-position)) !important;
    bottom: auto !important;
}

.custom-event:nth-child(even) .custom-event-content::before {
    /* BOTTOM ROW: Calculate distance from card to timeline */
    bottom: 100% !important;
    height: calc(var(--bottom-row-position) - var(--timeline-position)) !important;
    top: auto !important;
}

/* Change History Enhanced Styling */
.change-history-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.02), rgba(59, 130, 246, 0.02));
    border-radius: 12px;
    border: 1px solid rgba(107, 70, 193, 0.1);
}

.change-history-section .card {
    border: none !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px) !important;
}

.change-history-section .card-body {
    color: #4a5568 !important;
}

/* Enhanced Change History Collapsible */
.change-history-section h3.text-gradient a {
    text-decoration: none !important;
    display: block !important;
    padding: 0.75rem 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.change-history-section h3.text-gradient a:hover {
    color: var(--chessback-blue-secondary) !important;
    transform: translateX(5px) !important;
}

.change-history-section .toggle-icon {
    display: inline-block !important;
    transition: transform 0.3s ease !important;
    margin-left: 0.5rem !important;
    font-size: 0.8rem !important;
}

/* Change Entry Styling */
.change-entry {
    transition: all 0.3s ease !important;
    border: 1px solid rgba(107, 70, 193, 0.1) !important;
}

.change-entry:hover {
    transform: translateX(5px) !important;
    box-shadow: 0 4px 15px rgba(107, 70, 193, 0.15) !important;
}

.change-entry .change-meta {
    font-size: 0.85rem !important;
    color: #6b7280 !important;
}

.change-entry .change-details {
    font-size: 0.95rem !important;
    color: #374151 !important;
}

.change-entry .badge.bg-secondary {
    background: #6b7280 !important;
    color: white !important;
}

.change-entry .badge.bg-primary {
    background: var(--chessback-purple-primary) !important;
    color: white !important;
}

/* No History Styling */
.no-history {
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.03), rgba(59, 130, 246, 0.03)) !important;
    border-radius: 12px !important;
    border: 2px dashed rgba(107, 70, 193, 0.2) !important;
}

.no-history .fa-history {
    color: var(--chessback-purple-primary) !important;
    opacity: 0.6 !important;
}

/* Collapse Animation Enhancement */
#changeHistory.collapsing {
    transition: height 0.35s ease !important;
}

#changeHistory.collapse:not(.show) {
    display: none !important;
}

#changeHistory.collapse.show {
    display: block !important;
}

/* Force visibility for debugging */
.change-history-section {
    position: relative !important;
}

.change-history-toggle {
    position: relative !important;
    z-index: 10 !important;
}

/* Competition Form Enhanced Styling */
.competition-form .section-title {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    margin: 1.5rem 0 1rem 0 !important;
    padding: 0.5rem 0 !important;
    border-bottom: 2px solid rgba(107, 70, 193, 0.1) !important;
    display: flex !important;
    align-items: center !important;
}

/* Additional Icon Color Fixes */
.fas.fa-history {
    color: var(--chessback-purple-primary) !important;
}

.fas.fa-info-circle,
.fas.fa-image,
.fas.fa-calendar-alt,
.fas.fa-map-marker-alt,
.fas.fa-users,
.fas.fa-gavel,
.fas.fa-link,
.fas.fa-award,
.fas.fa-file-alt,
.fas.fa-file-text,
.fas.fa-address-book {
    color: var(--chessback-blue-secondary) !important;
}

/* ===== TEAM DETAILS PAGE COMPREHENSIVE STYLING ===== */

/* Team Header Manage Button */
.btn.btn-primary.dropdown-toggle {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    border: none !important;
    color: white !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn.btn-primary.dropdown-toggle:hover {
    background: linear-gradient(135deg, var(--chessback-purple-dark), var(--chessback-blue-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--chessback-purple-glow) !important;
}

/* Success Buttons (Invite Member, Bulk Invite, etc) */
.btn-success {
    background: linear-gradient(135deg, var(--chessback-blue-secondary), var(--chessback-purple-primary)) !important;
    border: none !important;
    color: white !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--chessback-blue-dark), var(--chessback-purple-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--chessback-blue-glow) !important;
    color: white !important;
}

.btn-success:focus {
    background: linear-gradient(135deg, var(--chessback-blue-secondary), var(--chessback-purple-primary)) !important;
    box-shadow: 0 0 0 0.2rem var(--chessback-blue-glow) !important;
    color: white !important;
}

.btn-outline-success {
    border: 2px solid var(--chessback-blue-secondary) !important;
    color: var(--chessback-blue-secondary) !important;
    background: transparent !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-outline-success:hover {
    background: var(--chessback-blue-secondary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--chessback-blue-glow) !important;
}

/* Team Member Cards */
.team-dropdown-toggle {
    background: var(--chessback-purple-bg) !important;
    border: 1px solid var(--chessback-purple-primary) !important;
    color: var(--chessback-purple-primary) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.team-dropdown-toggle:hover {
    background: var(--chessback-purple-primary) !important;
    color: white !important;
    transform: scale(1.05) !important;
}

/* Member Avatar Background */
.rounded-circle.bg-secondary {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
}

/* Badges */
.badge.bg-primary {
    background: var(--chessback-purple-primary) !important;
    color: white !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
}

.badge.bg-success {
    background: var(--chessback-blue-secondary) !important;
    color: white !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
}

.badge.bg-secondary {
    background: #6b7280 !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 12px !important;
}

/* Private Team Badge Enhanced Styling */
.private-team-badge,
.badge.bg-secondary.ms-2,
.badge.ms-2 {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    color: white !important;
    font-weight: 700 !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.85rem !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 3px 12px var(--chessback-purple-glow) !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
}

.private-team-badge:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px var(--chessback-purple-glow) !important;
}

.private-team-badge i.fas {
    font-size: 0.8rem !important;
    opacity: 0.9 !important;
}

/* Responsive adjustments for private badge */
@media (max-width: 768px) {
    .private-team-badge {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.8rem !important;
        margin-top: 0.25rem !important;
    }
    
    .d-flex.align-items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .private-team-badge {
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
    }
}

/* Team Member Cards Enhancement */
.card {
    border: 1px solid rgba(107, 70, 193, 0.1) !important;
    transition: all 0.3s ease !important;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(107, 70, 193, 0.1) !important;
    transform: translateY(-2px) !important;
}

.card-header {
    background: linear-gradient(135deg, rgba(107, 70, 193, 0.02), rgba(59, 130, 246, 0.02)) !important;
    border-bottom: 1px solid rgba(107, 70, 193, 0.1) !important;
}

/* Modal Styling */
.modal-header {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    color: white !important;
    border-bottom: none !important;
}

.modal-header .modal-title {
    color: white !important;
    font-weight: 700 !important;
}

.modal-header .btn-close {
    filter: invert(1) !important;
}

.modal-body {
    background: linear-gradient(180deg, rgba(107, 70, 193, 0.02), rgba(255, 255, 255, 1)) !important;
}

/* Event Modal - Override general modal styling for clean white background */
#eventModal .modal-header {
    background: white !important;
    color: #333 !important;
    border-bottom: 1px solid #e9ecef !important;
}

#eventModal .modal-header .modal-title {
    color: #333 !important;
}

#eventModal .modal-header .btn-close {
    filter: none !important;
}

#eventModal .modal-body {
    background: white !important;
}

/* Form Controls in Modals */
.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--chessback-purple-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--chessback-purple-glow) !important;
}

/* Search Results */
.search-result-item:hover {
    background: var(--chessback-purple-bg) !important;
    color: var(--chessback-purple-primary) !important;
}

/* Selected Users Display */
#selectedUsersList .badge.bg-success {
    background: linear-gradient(135deg, var(--chessback-blue-secondary), var(--chessback-purple-primary)) !important;
    border: none !important;
    border-radius: 15px !important;
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
}

#selectedUsersList .badge.bg-danger {
    background: #dc3545 !important;
    border-radius: 50% !important;
    padding: 4px 6px !important;
    font-size: 0.7rem !important;
    transition: all 0.2s ease !important;
}

#selectedUsersList .badge.bg-danger:hover {
    background: #c82333 !important;
    transform: scale(1.1) !important;
}

/* Role Change Modal */
#changeRoleModal .btn-primary {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    border: none !important;
    border-radius: 20px !important;
}

/* Alert Styling */
.alert-success {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(107, 70, 193, 0.1)) !important;
    border: 1px solid var(--chessback-blue-secondary) !important;
    color: var(--chessback-purple-primary) !important;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(107, 70, 193, 0.1)) !important;
    border: 1px solid #ffc107 !important;
    color: var(--chessback-purple-primary) !important;
}

/* Crown Icon for Leaders */
.text-warning {
    color: #fbbf24 !important;
}

/* Dropdown Menu Enhancement */
.dropdown-menu {
    border: 1px solid rgba(107, 70, 193, 0.2) !important;
    box-shadow: 0 8px 32px rgba(107, 70, 193, 0.15) !important;
    border-radius: 12px !important;
}

.dropdown-item:hover {
    background: var(--chessback-purple-bg) !important;
    color: var(--chessback-purple-primary) !important;
}

/* Enhanced Team Header */
.card-header h1 {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
}

.card-header h5 {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
}

/* Team Icons with Chessback Colors */
.fas.fa-users.me-2,
.fas.fa-user-friends.me-2,
.fas.fa-user-plus,
.fas.fa-users {
    color: var(--chessback-purple-primary) !important;
}

.fas.fa-cog,
.fas.fa-crown {
    color: var(--chessback-blue-secondary) !important;
}

/* Fix Bootstrap Dropdown Issues */
.dropdown-toggle::after {
    display: inline-block !important;
    margin-left: 0.255em !important;
    vertical-align: 0.255em !important;
    content: "" !important;
    border-top: 0.3em solid !important;
    border-right: 0.3em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.3em solid transparent !important;
}

.dropdown-toggle:empty::after {
    margin-left: 0 !important;
}

/* Ensure dropdown menus appear correctly */
.dropdown-menu.show {
    display: block !important;
}

/* Fix modal z-index issues */
.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

/* Enhanced Edit Team Modal Styling */
#editTeamModal .modal-header {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
}

#editTeamModal .form-control:focus {
    border-color: var(--chessback-purple-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--chessback-purple-glow) !important;
}

#editTeamModal .form-check-input:checked {
    background-color: var(--chessback-blue-secondary) !important;
    border-color: var(--chessback-blue-secondary) !important;
}

#editTeamModal .form-check-input:focus {
    border-color: var(--chessback-purple-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--chessback-purple-glow) !important;
}

/* Debug styling to make dropdowns more visible */
.dropdown-menu {
    background-color: white !important;
    border: 1px solid rgba(107, 70, 193, 0.2) !important;
    box-shadow: 0 8px 32px rgba(107, 70, 193, 0.15) !important;
    z-index: 1000 !important;
}

.btn.dropdown-toggle {
    position: relative !important;
}

/* Ensure manage dropdown is properly styled */
.btn-primary.dropdown-toggle {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    border: none !important;
    color: white !important;
}

/* Transfer Leadership Modal Specific Styling */
#transferLeadershipModal .modal-header {
    background: linear-gradient(135deg, #fbbf24, var(--chessback-purple-primary)) !important;
    color: white !important;
}

#transferLeadershipModal .btn-warning {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
}

#transferLeadershipModal .btn-warning:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4) !important;
    color: white !important;
}

#transferLeadershipModal .alert-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(107, 70, 193, 0.1)) !important;
    border: 1px solid #fbbf24 !important;
    color: var(--chessback-purple-primary) !important;
}

/* Transfer Leadership Modal Cancel Button Fix */
#transferLeadershipModal .btn-outline-danger {
    background: transparent !important;
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

#transferLeadershipModal .btn-outline-danger:hover {
    background: #dc3545 !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4) !important;
}

#transferLeadershipModal .btn-outline-danger:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

#transferLeadershipModal .btn-outline-danger:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}

/* Ensure modal buttons are properly clickable */
#transferLeadershipModal .modal-footer .btn {
    z-index: 1060 !important;
    position: relative !important;
}

/* Invite Member and Bulk Invite Button Styling */
.btn[data-bs-target="#inviteMemberModal"] {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    box-shadow: 0 2px 8px rgba(107, 70, 193, 0.3) !important;
    z-index: 1000 !important;
    position: relative !important;
}

.btn[data-bs-target="#inviteMemberModal"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(107, 70, 193, 0.4) !important;
}

.btn[data-bs-target="#bulkInviteModal"] {
    background: transparent !important;
    border: 2px solid var(--chessback-purple-primary) !important;
    color: var(--chessback-purple-primary) !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    position: relative !important;
}

.btn[data-bs-target="#bulkInviteModal"]:hover {
    background: var(--chessback-purple-primary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(107, 70, 193, 0.4) !important;
}

/* Invite Modal Styling */
#inviteMemberModal .modal-header,
#bulkInviteModal .modal-header {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    color: white !important;
    border-bottom: none !important;
    border-radius: 0.375rem 0.375rem 0 0 !important;
}

#inviteMemberModal .modal-title,
#bulkInviteModal .modal-title {
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

#inviteMemberModal .btn-close,
#bulkInviteModal .btn-close {
    filter: brightness(0) invert(1) !important;
}

#inviteMemberModal .modal-body,
#bulkInviteModal .modal-body {
    background: #f8f9fa !important;
}

#inviteMemberModal .form-control:focus,
#bulkInviteModal .form-control:focus {
    border-color: var(--chessback-purple-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(107, 70, 193, 0.25) !important;
}

#inviteMemberModal .btn-primary,
#bulkInviteModal .btn-primary {
    background: var(--chessback-purple-primary) !important;
    border-color: var(--chessback-purple-primary) !important;
}

#inviteMemberModal .btn-primary:hover,
#bulkInviteModal .btn-primary:hover {
    background: var(--chessback-blue-secondary) !important;
    border-color: var(--chessback-blue-secondary) !important;
}

/* Global Modal Fixes */
.modal-backdrop.show {
    opacity: 0.5 !important;
}

.modal.show .modal-dialog {
    transform: none !important;
}

/* Debug: Ensure all modals are visible when shown */
.modal.fade.show {
    display: block !important;
}

.modal.fade:not(.show) {
    display: none !important;
}

/* Force proper modal initialization */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    outline: 0 !important;
}

/* Enhanced dropdown menu visibility */
.dropdown-menu {
    min-width: 200px !important;
    padding: 0.5rem 0 !important;
    margin-top: 0.25rem !important;
}

.dropdown-item {
    padding: 0.5rem 1rem !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
}

.dropdown-item:active {
    background-color: var(--chessback-purple-bg) !important;
    color: var(--chessback-purple-primary) !important;
}

/* ===== REGISTER.HTML MODAL FIXES ===== */

/* Terms, Privacy, and Data Processing Modals */
#termsModal .modal-header,
#privacyModal .modal-header, 
#dataProcessingModal .modal-header {
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    color: white !important;
}

#termsModal .modal-title,
#privacyModal .modal-title,
#dataProcessingModal .modal-title {
    color: white !important;
    font-weight: 700 !important;
}

#termsModal .btn-close,
#privacyModal .btn-close,
#dataProcessingModal .btn-close {
    filter: invert(1) !important;
}

/* ===== GLOBAL MODAL AND DROPDOWN DEBUGGING ===== */

/* Force all modals to use proper z-index */
.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

/* Ensure dropdowns work properly */
.dropdown-toggle[data-bs-toggle="dropdown"] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Debug visibility for dropdowns */
.dropdown:hover .dropdown-menu {
    display: block !important;
    opacity: 0.5 !important;
}

.dropdown.show .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
}

/* Enhanced modal debugging */
.modal.fade {
    transition: opacity 0.15s linear !important;
}

.modal.fade:not(.show) {
    opacity: 0 !important;
    display: none !important;
}

.modal.fade.show {
    opacity: 1 !important;
    display: block !important;
}

/* Transfer Leadership Debug Styles */
#transferLeadershipModal {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

#transferLeadershipModal .modal-dialog {
    margin: 1.75rem auto !important;
}

/* Ensure all Bootstrap components initialize properly */
.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    display: none !important;
    float: left !important;
    min-width: 10rem !important;
    padding: 0.5rem 0 !important;
    margin: 0.125rem 0 0 !important;
    font-size: 1rem !important;
    color: #212529 !important;
    text-align: left !important;
    list-style: none !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 0.25rem !important;
}

.dropdown-menu.show {
    display: block !important;
} 

/* Profile Image Fallback Styling */
.profile-image-fallback {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--chessback-purple-primary), var(--chessback-blue-secondary)) !important;
    color: white !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.profile-image-fallback.rounded-full {
    border-radius: 50% !important;
}

.profile-image-fallback.rounded-top {
    border-radius: 0.375rem 0.375rem 0 0 !important;
}

.profile-image-fallback i {
    opacity: 0.9 !important;
}

/* Default profile image styles */
.profile-image {
    transition: opacity 0.3s ease !important;
}

.profile-image.broken {
    display: none !important;
} 

/* ===== BUTTON FIXES FOR RESPONSIVENESS ===== */

/* Ensure all buttons are clickable - CRITICAL SECTION */
.btn, button, [role="button"], .dropdown-toggle, .modal .btn-close {
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    z-index: 1000 !important;
    position: relative !important;
}

/* EMERGENCY FIX: Force invite buttons to be clickable */
.btn[data-bs-toggle="modal"], 
button[data-bs-toggle="modal"],
.btn[data-bs-target="#inviteMemberModal"],
.btn[data-bs-target="#bulkInviteModal"],
.btn[data-bs-target="#teamInviteModal"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2000 !important;
    position: relative !important;
    display: inline-block !important;
    visibility: visible !important;
}

/* GLOBAL FIX: Force ALL modal cancel buttons to be clickable everywhere */
.btn[data-bs-dismiss="modal"],
button[data-bs-dismiss="modal"],
.btn-close[data-bs-dismiss="modal"],
.modal-footer .btn-outline-danger,
.modal .btn[data-bs-dismiss="modal"],
.modal .btn-close,
.btn-close-custom,
.btn-secondary[data-bs-dismiss="modal"],
button.btn-close {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2100 !important;
    position: relative !important;
    display: inline-block !important;
    visibility: visible !important;
    background: none !important;
    border: 1px solid transparent !important;
    opacity: 1 !important;
}

/* Specific styling for different types of cancel buttons */
.btn-close, button.btn-close {
    font-size: 1.2rem !important;
    width: auto !important;
    height: auto !important;
    padding: 0.25rem 0.5rem !important;
}

/* Hover effects for cancel buttons */
.btn[data-bs-dismiss="modal"]:hover,
.btn-close:hover,
.btn-secondary[data-bs-dismiss="modal"]:hover {
    opacity: 0.8 !important;
    transform: none !important;
}

/* Fix any potential z-index issues with buttons */
.btn:not(.disabled):not(:disabled) {
    z-index: 1 !important;
    position: relative !important;
}

/* Ensure dropdowns are clickable */
.dropdown-toggle[data-bs-toggle="dropdown"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

/* Fix modal close buttons */
.modal .btn-close {
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    opacity: 1 !important;
}

/* Fix modal backdrop issues */
.modal-backdrop {
    pointer-events: auto !important;
    z-index: 1050 !important;
}

.modal {
    z-index: 1055 !important;
    pointer-events: auto !important;
}

/* Ensure alert buttons work */
.alert .btn-close, .alert .close {
    pointer-events: auto !important;
    cursor: pointer !important;
}