/* ============================================
   SERVER THEME - Màu sắc khác biệt theo server
   SV1 = Đỏ/Vàng (Classic Pirate)  🔴
   SV2 = Tím/Violet (Dark Mystic)   🟣
   
   Note: SV1 keeps the default classic-theme.css colors
   SV2 overrides classic-theme with purple/violet palette
   ============================================ */

/* ============================================
   CSS VARIABLES
   ============================================ */
body.server-sv1 {
    --sv-primary: #E31B23;
    --sv-primary-dark: #B71C1C;
    --sv-gold: #FFD700;
    --sv-accent: #FF5252;
}

body.server-sv2 {
    --sv-primary: #7B1FA2;
    --sv-primary-dark: #4A148C;
    --sv-primary-light: #AB47BC;
    --sv-accent: #E040FB;
    --sv-gold: #CE93D8;
    --sv-gold-dark: #9C27B0;
    --sv-text-light: #E1BEE7;
    --sv-card-bg-start: #F3E5F5;
    --sv-card-bg-end: #EDE7F6;
    --sv-glow: rgba(123, 31, 162, 0.3);
}

/* ============================================
   SV2 NAVBAR - PURPLE OCEAN
   ============================================ */
body.server-sv2.classic-theme .app-header {
    background: linear-gradient(180deg, #1a0e2e 0%, #2d1b4e 50%, #4A148C 100%) !important;
    border-bottom: 4px solid #CE93D8 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(171, 71, 188, 0.15) !important;
}

body.server-sv2.classic-theme .navbar .nav-link:hover {
    background: rgba(171, 71, 188, 0.15) !important;
    color: #CE93D8 !important;
    text-shadow: 0 0 10px rgba(206, 147, 216, 0.5) !important;
}

body.server-sv2.classic-theme .navbar .nav-link::after {
    background: linear-gradient(90deg, #CE93D8, #AB47BC) !important;
}

/* ============================================
   SV2 CARDS - MYSTIC CHEST STYLE
   ============================================ */
body.server-sv2.classic-theme .card:not(.bg-gradient-info):not(.bg-gradient-primary):not(.bg-gradient-danger):not(.bg-gradient-warning):not(.bg-gradient-success):not([style*="linear-gradient"]) {
    background: linear-gradient(180deg, #FFFFFF 0%, #F3E5F5 100%) !important;
    border: 2px solid rgba(171, 71, 188, 0.35) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(171, 71, 188, 0.1) !important;
}

body.server-sv2.classic-theme .card:hover {
    border-color: #AB47BC !important;
    box-shadow: 0 8px 30px rgba(171, 71, 188, 0.2), 0 0 20px rgba(171, 71, 188, 0.1) !important;
}

body.server-sv2.classic-theme .card-header {
    background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%) !important;
    border-bottom: 3px solid #CE93D8 !important;
    color: #CE93D8 !important;
}

body.server-sv2.classic-theme .card-header h6,
body.server-sv2.classic-theme .card-header .fw-bold {
    color: #CE93D8 !important;
}

/* ============================================
   SV2 SECTION HEADERS
   ============================================ */
body.server-sv2.classic-theme .section-title::after {
    background: linear-gradient(90deg, #7B1FA2, #CE93D8) !important;
    box-shadow: 0 2px 8px rgba(123, 31, 162, 0.3) !important;
}

body.server-sv2.classic-theme .section-title i {
    color: #7B1FA2 !important;
    filter: drop-shadow(0 2px 4px rgba(123, 31, 162, 0.3)) !important;
}

/* ============================================
   SV2 BUTTONS - MYSTIC POWER STYLE
   ============================================ */
body.server-sv2.classic-theme .btn-primary,
body.server-sv2.classic-theme .btn-gradient {
    background: linear-gradient(135deg, #7B1FA2 0%, #AB47BC 50%, #E040FB 100%) !important;
    box-shadow: 0 4px 15px rgba(123, 31, 162, 0.3) !important;
}

body.server-sv2.classic-theme .btn-primary:hover,
body.server-sv2.classic-theme .btn-gradient:hover {
    background: linear-gradient(135deg, #CE93D8 0%, #AB47BC 100%) !important;
    color: #1a0e2e !important;
    box-shadow: 0 6px 25px rgba(206, 147, 216, 0.5) !important;
}

body.server-sv2.classic-theme .btn-outline-primary {
    border: 2px solid #7B1FA2 !important;
    color: #7B1FA2 !important;
}

body.server-sv2.classic-theme .btn-outline-primary:hover {
    background: #7B1FA2 !important;
    color: #CE93D8 !important;
    box-shadow: 0 4px 15px rgba(123, 31, 162, 0.4) !important;
}

body.server-sv2.classic-theme .btn-light {
    color: #7B1FA2 !important;
    border: 2px solid rgba(123, 31, 162, 0.2) !important;
}

body.server-sv2.classic-theme .btn-light:hover {
    background: #F3E5F5 !important;
    border-color: #CE93D8 !important;
    box-shadow: 0 4px 15px rgba(206, 147, 216, 0.3) !important;
}

/* ============================================
   SV2 TABLES - ENCHANTED SCROLL STYLE
   ============================================ */
body.server-sv2.classic-theme table thead {
    background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%) !important;
}

body.server-sv2.classic-theme table thead th {
    color: #CE93D8 !important;
    border-bottom: 3px solid #CE93D8 !important;
}

body.server-sv2.classic-theme table tbody tr:nth-child(even) {
    background: #F3E5F5 !important;
}

body.server-sv2.classic-theme table tbody tr:hover {
    background: linear-gradient(90deg, rgba(171, 71, 188, 0.1), rgba(123, 31, 162, 0.05)) !important;
}

/* ============================================
   SV2 BADGES - MYSTIC GEMS
   ============================================ */
body.server-sv2.classic-theme .badge-gradient {
    background: linear-gradient(135deg, #CE93D8 0%, #AB47BC 100%) !important;
    color: #1a0e2e !important;
    box-shadow: 0 2px 8px rgba(171, 71, 188, 0.3) !important;
}

body.server-sv2.classic-theme .badge-gradient.danger {
    background: linear-gradient(135deg, #7B1FA2 0%, #E040FB 100%) !important;
    color: #FFFFFF !important;
}

/* ============================================
   SV2 MENU GRID ICONS - PURPLE CREW
   ============================================ */
body.server-sv2.classic-theme .menu-grid .menu-icon {
    background: linear-gradient(135deg, #7B1FA2 0%, #AB47BC 100%) !important;
    box-shadow: 0 3px 10px rgba(123, 31, 162, 0.3) !important;
}

body.server-sv2.classic-theme .menu-grid .menu-item:hover .menu-icon {
    box-shadow: 0 4px 15px rgba(123, 31, 162, 0.5) !important;
}

body.server-sv2.classic-theme .menu-grid .menu-item {
    background: linear-gradient(135deg, #FFFFFF 0%, #F3E5F5 100%) !important;
    border: 2px solid rgba(171, 71, 188, 0.25) !important;
}

body.server-sv2.classic-theme .menu-grid .menu-item:hover {
    border-color: #AB47BC !important;
    background: linear-gradient(135deg, #F3E5F5 0%, #FFFFFF 100%) !important;
    box-shadow: 0 6px 20px rgba(171, 71, 188, 0.25) !important;
}

/* Override menu-icon colors for SV2 */
body.server-sv2 .menu-item .menu-icon {
    background: linear-gradient(135deg, #7B1FA2 0%, #AB47BC 100%) !important;
    box-shadow: 0 3px 8px rgba(123, 31, 162, 0.3) !important;
}

body.server-sv2 .menu-item .menu-icon.text-success {
    background: linear-gradient(135deg, #00695C 0%, #00BFA5 100%) !important;
    box-shadow: 0 3px 8px rgba(0, 105, 92, 0.3) !important;
}

body.server-sv2 .menu-item .menu-icon.text-danger {
    background: linear-gradient(135deg, #7B1FA2 0%, #E040FB 100%) !important;
    box-shadow: 0 3px 8px rgba(123, 31, 162, 0.3) !important;
}

body.server-sv2 .menu-item .menu-icon.text-warning {
    background: linear-gradient(135deg, #4A148C 0%, #9C27B0 100%) !important;
    box-shadow: 0 3px 8px rgba(74, 20, 140, 0.3) !important;
}

body.server-sv2 .menu-item .menu-icon.text-info {
    background: linear-gradient(135deg, #311B92 0%, #7C4DFF 100%) !important;
    box-shadow: 0 3px 8px rgba(49, 27, 146, 0.3) !important;
}

body.server-sv2 .menu-item .menu-icon.text-primary {
    background: linear-gradient(135deg, #4A148C 0%, #AB47BC 100%) !important;
    box-shadow: 0 3px 8px rgba(74, 20, 140, 0.3) !important;
}

/* ============================================
   SV2 GAME SECTION CARD
   ============================================ */
body.server-sv2.classic-theme .game-section-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F3E5F5 100%) !important;
    border: 2px solid rgba(171, 71, 188, 0.3) !important;
}

/* ============================================
   SV2 SERVER SELECTOR
   ============================================ */
body.server-sv2 .server-selector-wrap {
    border: 1px solid rgba(171, 71, 188, 0.3) !important;
    box-shadow: 0 4px 20px rgba(171, 71, 188, 0.1) !important;
}

body.server-sv2 .server-btn.active {
    border-color: #AB47BC !important;
    box-shadow: 0 0 15px rgba(171, 71, 188, 0.4) !important;
}

body.server-sv2 .server-active-badge {
    color: #AB47BC !important;
}

/* ============================================
   SV2 TEXT OVERRIDES
   ============================================ */
body.server-sv2.classic-theme .text-primary {
    color: #7B1FA2 !important;
}

body.server-sv2.classic-theme .text-danger {
    color: #7B1FA2 !important;
}

body.server-sv2.classic-theme .text-warning {
    color: #AB47BC !important;
}

body.server-sv2.classic-theme strong,
body.server-sv2.classic-theme b {
    color: #7B1FA2 !important;
}

/* ============================================
   SV2 SCROLLBAR - MYSTIC PORTAL
   ============================================ */
body.server-sv2.classic-theme::-webkit-scrollbar-track {
    background: #1a0e2e !important;
}

body.server-sv2.classic-theme::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7B1FA2, #CE93D8) !important;
    border: 2px solid #1a0e2e !important;
}

body.server-sv2.classic-theme::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #CE93D8, #E040FB) !important;
}

/* ============================================
   SV2 FOOTER
   ============================================ */
body.server-sv2.classic-theme footer {
    background: linear-gradient(180deg, #1a0e2e 0%, #0f0a1a 100%) !important;
    border-top: 4px solid #CE93D8 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   SV2 MODALS - ENCHANTED SCROLL
   ============================================ */
body.server-sv2.classic-theme .modal-content {
    background: linear-gradient(180deg, #FFFFFF 0%, #F3E5F5 100%) !important;
    border: 3px solid #CE93D8 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 30px rgba(171, 71, 188, 0.2) !important;
}

body.server-sv2.classic-theme .modal-header {
    background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%) !important;
    border-bottom: 3px solid #CE93D8 !important;
}

body.server-sv2.classic-theme .modal-header .modal-title {
    color: #CE93D8 !important;
}

body.server-sv2.classic-theme .modal-header .modal-title,
body.server-sv2.classic-theme .modal-header h4,
body.server-sv2.classic-theme .modal-header h5,
body.server-sv2.classic-theme .modal-header span {
    color: #CE93D8 !important;
}

body.server-sv2.classic-theme .modal-body .badge {
    background: linear-gradient(135deg, rgba(171, 71, 188, 0.3), rgba(123, 31, 162, 0.2)) !important;
    border: 1px solid #AB47BC !important;
    color: #4A148C !important;
}

/* ============================================
   SV2 ALERTS
   ============================================ */
body.server-sv2.classic-theme .alert-info {
    background: linear-gradient(135deg, rgba(123, 31, 162, 0.08), rgba(171, 71, 188, 0.05)) !important;
    border: 2px solid #7B1FA2 !important;
    border-left: 5px solid #7B1FA2 !important;
    color: #7B1FA2 !important;
}

body.server-sv2.classic-theme .alert-warning {
    background: linear-gradient(135deg, rgba(171, 71, 188, 0.12), rgba(123, 31, 162, 0.08)) !important;
    border: 2px solid #AB47BC !important;
    border-left: 5px solid #AB47BC !important;
}

/* ============================================
   SV2 NAV PILLS / PAGINATION
   ============================================ */
body.server-sv2.classic-theme .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #7B1FA2 0%, #AB47BC 100%) !important;
    color: #CE93D8 !important;
    box-shadow: 0 4px 15px rgba(123, 31, 162, 0.3) !important;
}

body.server-sv2.classic-theme .nav-pills .nav-link:hover {
    background: rgba(123, 31, 162, 0.08) !important;
    color: #7B1FA2 !important;
}

/* ============================================
   SV2 RESOURCE CARDS
   ============================================ */
body.server-sv2.classic-theme .resource-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F3E5F5 100%) !important;
    border: 2px solid rgba(171, 71, 188, 0.3) !important;
}

body.server-sv2.classic-theme .resource-card:hover {
    border-color: #AB47BC !important;
    box-shadow: 0 4px 20px rgba(171, 71, 188, 0.2) !important;
}

body.server-sv2.classic-theme .resource-card .resource-icon {
    background: linear-gradient(135deg, #7B1FA2 0%, #AB47BC 100%) !important;
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.3) !important;
}

/* ============================================
   SV2 GIFTCODE
   ============================================ */
body.server-sv2.classic-theme .giftcode-code {
    background: linear-gradient(135deg, rgba(171, 71, 188, 0.1), rgba(123, 31, 162, 0.05)) !important;
    border: 3px dashed #AB47BC !important;
    color: #7B1FA2 !important;
}

/* ============================================
   SV2 SIDEBAR
   ============================================ */
body.server-sv2.classic-theme .offcanvas,
body.server-sv2.classic-theme .left-sidebar {
    background: linear-gradient(180deg, #1a0e2e 0%, #2d1b4e 100%) !important;
    border-right: 3px solid #CE93D8 !important;
}

body.server-sv2.classic-theme .sidebar-link:hover {
    background: linear-gradient(135deg, rgba(123, 31, 162, 0.2), rgba(171, 71, 188, 0.1)) !important;
    color: #CE93D8 !important;
    box-shadow: 0 2px 10px rgba(206, 147, 216, 0.15) !important;
}

body.server-sv2.classic-theme .sidebar-link:hover span,
body.server-sv2.classic-theme .sidebar-link:hover i {
    color: #CE93D8 !important;
}

body.server-sv2.classic-theme .sidebar-link i {
    color: #CE93D8 !important;
}

/* ============================================
   SV2 LEADERBOARD
   ============================================ */
body.server-sv2.classic-theme .lb-row.top1 {
    background: linear-gradient(90deg, rgba(171, 71, 188, 0.25), rgba(171, 71, 188, 0.05)) !important;
    border-left: 5px solid #AB47BC !important;
    box-shadow: inset 0 0 20px rgba(171, 71, 188, 0.1) !important;
}

/* ============================================
   SV2 USER INFO BOX
   ============================================ */
body.server-sv2 .user-info-box {
    background: linear-gradient(135deg, #7B1FA2 0%, #AB47BC 100%) !important;
    box-shadow: 0 3px 0 #4A148C, inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   SV2 FORM INPUTS
   ============================================ */
body.server-sv2 .form-control:focus,
body.server-sv2 .form-select:focus {
    border-color: #AB47BC !important;
    box-shadow: 0 0 0 0.2rem rgba(171, 71, 188, 0.25) !important;
}

/* ============================================
   SV2 GRADIENT TEXT
   ============================================ */
body.server-sv2.classic-theme .text-gradient-primary {
    background: linear-gradient(135deg, #7B1FA2 0%, #E040FB 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================
   SV2 SECTION TITLE BAR
   ============================================ */
body.server-sv2 .section-card-title {
    border-bottom: 2px solid #E1BEE7 !important;
}

/* ============================================
   SV2 SPECIAL ANIMATIONS
   ============================================ */
@keyframes sv2-mysticGlow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(171, 71, 188, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(171, 71, 188, 0.6), 0 0 40px rgba(123, 31, 162, 0.2);
    }
}

@keyframes sv1-pirateGlow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(227, 27, 35, 0.2);
    }
}

body.server-sv1 .server-btn.active {
    animation: sv1-pirateGlow 2s ease-in-out infinite;
}

body.server-sv2 .server-btn.active {
    animation: sv2-mysticGlow 2s ease-in-out infinite;
}