/* 
 * VTL 2026 - TVA Channel Volleyball Thailand League
 * Official Sports League Design
 * Professional & Trustworthy
 */

:root {
    /* Official League Colors */
    --primary: #1a4b8c;
    --primary-dark: #0d2d5a;
    --primary-light: #2b6cb0;
    
    /* Neutral palette */
    --bg-body: #f5f7fa;
    --bg-card: #ffffff;
    --bg-dark: #1a1a2e;
    --bg-subtle: #f0f4f8;
    
    /* Text */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-light: #ffffff;
    
    /* Border */
    --border: #e2e8f0;
    --border-light: #edf2f7;
    
    /* Men's Division - Blue Gradient */
    --men-primary: #1a4b8c;
    --men-secondary: #3182ce;
    --men-light: #ebf8ff;
    --men-lighter: #bee3f8;
    --men-dark: #0d2d5a;
    
    /* Women's Division - Red/Pink Gradient */
    --women-primary: #c53030;
    --women-secondary: #e53e6f;
    --women-light: #fff5f5;
    --women-lighter: #fed7d7;
    --women-dark: #9b2c2c;
    
    /* Accent */
    --gold: #d69e2e;
    --success: #38a169;
}

/* ============================================
   UPCOMING MATCHES SECTION
   ============================================ */
.upcoming-section {
    margin-bottom: 20px;
}

.section-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i {
    color: #ff6b35;
}

.section-subtitle {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 8px;
}

/* Upcoming matches carousel container */
.upcoming-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.upcoming-nav-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--border);
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
}

.upcoming-nav-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.upcoming-nav-btn:active {
    transform: scale(0.95);
}

.upcoming-nav-btn i {
    pointer-events: none;
}

.upcoming-scroll-wrapper {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.upcoming-scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.upcoming-cards {
    display: flex;
    gap: 15px;
    min-width: max-content;
}

/* Day Divider for Upcoming Matches */
.upcoming-day-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 80px;
    padding: 10px 0;
}

.upcoming-day-divider .day-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary);
    background: linear-gradient(135deg, var(--primary-light), rgba(var(--primary-rgb), 0.1));
    padding: 12px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.upcoming-card {
    width: 280px;
    flex-shrink: 0;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.upcoming-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.upcoming-card.men {
    border-top: 4px solid var(--men-primary);
}

.upcoming-card.women {
    border-top: 4px solid var(--women-primary);
}

.upcoming-card-date {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-subtle);
}

.date-badge {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 10px;
    background: white;
    border-radius: 20px;
}

.date-badge.today {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
}

.upcoming-card-date .match-time {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.upcoming-card-teams {
    padding: 20px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.upcoming-card-teams .team-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.upcoming-card-teams .team-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.upcoming-card-teams .team-logo-placeholder {
    width: 50px;
    height: 50px;
    background: var(--bg-subtle);
    border-radius: 50%;
}

.upcoming-card-teams .team-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    max-width: 90px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vs-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-dark);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.vs-circle.has-score {
    width: auto;
    min-width: 50px;
    height: 32px;
    border-radius: 16px;
    padding: 0 12px;
    background: linear-gradient(135deg, #d69e2e, #f6ad55);
    font-size: 1rem;
}

.vs-circle.has-score .set-score {
    font-weight: 800;
    letter-spacing: 2px;
}

.live-set-score {
    font-size: 0.75rem;
    color: #d69e2e;
    font-weight: 500;
}

.live-set-score strong {
    font-weight: 700;
}

.live-set-score .finished-badge {
    background: linear-gradient(135deg, #48bb78, #38a169);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.vs-circle.has-score.finished {
    background: linear-gradient(135deg, #48bb78, #38a169);
}

/* Live Score Display in Match Schedule */
.live-score-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.live-score-display .live-sets {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
}

.live-score-display .live-current-set {
    font-size: 0.7rem;
    color: #f59e0b;
    font-weight: 600;
}

.live-score-display .live-current-set.finished {
    color: #16a34a;
}

.score-status {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    margin-top: 2px;
}

.score-status.official {
    background: #dcfce7;
    color: #16a34a;
}

.score-status.unofficial {
    background: #fef3c7;
    color: #d97706;
    animation: pulse-unofficial 2s ease-in-out infinite;
}

@keyframes pulse-unofficial {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.upcoming-card-footer {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-light);
}

.upcoming-card-footer .match-num {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.upcoming-card-footer .gender-tag {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 10px;
}

.upcoming-card.men .gender-tag {
    background: var(--men-light);
    color: var(--men-primary);
}

.upcoming-card.women .gender-tag {
    background: var(--women-light);
    color: var(--women-primary);
}

/* Upcoming card link */
.upcoming-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.upcoming-card-link:hover .upcoming-card {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Score result display in upcoming cards */
.vs-circle.score-result {
    width: auto;
    min-width: 60px;
    height: auto;
    min-height: 36px;
    border-radius: 12px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #48bb78, #38a169);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.vs-circle.score-result .result-score {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Result status badge in footer */
.result-status-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    text-transform: uppercase;
}

.result-status-badge.official {
    background: #dcfce7;
    color: #16a34a;
}

.upcoming-card.has-result {
    border-color: #48bb78;
}

.upcoming-card.has-result.men {
    border-top-color: var(--men-primary);
}

.upcoming-card.has-result.women {
    border-top-color: var(--women-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .upcoming-card {
        width: 250px;
    }
    
    .upcoming-card-teams .team-logo {
        width: 40px;
        height: 40px;
    }
    
    .upcoming-card-teams .team-name {
        font-size: 0.7rem;
        max-width: 80px;
    }
}

/* ============================================
   SMOOTH GLOW ANIMATION
   For newly assigned teams - Fade In → Pulse → Fade Out
   ============================================ */

/* Fade in animation */
@keyframes fadeInGlow {
    0% {
        opacity: 0;
        box-shadow: none;
    }
    100% {
        opacity: 1;
        box-shadow: 
            0 0 15px rgba(214, 158, 46, 0.6),
            0 0 30px rgba(214, 158, 46, 0.4),
            0 0 45px rgba(214, 158, 46, 0.2);
    }
}

/* Pulse glow animation */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(214, 158, 46, 0.4),
            0 0 20px rgba(214, 158, 46, 0.3),
            0 0 30px rgba(214, 158, 46, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(214, 158, 46, 0.8),
            0 0 40px rgba(214, 158, 46, 0.6),
            0 0 60px rgba(214, 158, 46, 0.4);
        transform: scale(1.01);
    }
}

/* Fade out animation */
@keyframes fadeOutGlow {
    0% {
        opacity: 1;
        box-shadow: 
            0 0 15px rgba(214, 158, 46, 0.6),
            0 0 30px rgba(214, 158, 46, 0.4),
            0 0 45px rgba(214, 158, 46, 0.2);
    }
    100% {
        opacity: 1;
        box-shadow: none;
    }
}

/* Men theme animations */
@keyframes fadeInGlow-men {
    0% {
        opacity: 0;
        box-shadow: none;
    }
    100% {
        opacity: 1;
        box-shadow: 
            0 0 15px rgba(49, 130, 206, 0.6),
            0 0 30px rgba(49, 130, 206, 0.4),
            0 0 45px rgba(49, 130, 206, 0.2);
    }
}

@keyframes pulseGlow-men {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(49, 130, 206, 0.4),
            0 0 20px rgba(49, 130, 206, 0.3),
            0 0 30px rgba(49, 130, 206, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(49, 130, 206, 0.8),
            0 0 40px rgba(49, 130, 206, 0.6),
            0 0 60px rgba(49, 130, 206, 0.4);
        transform: scale(1.01);
    }
}

@keyframes fadeOutGlow-men {
    0% {
        box-shadow: 
            0 0 15px rgba(49, 130, 206, 0.6),
            0 0 30px rgba(49, 130, 206, 0.4),
            0 0 45px rgba(49, 130, 206, 0.2);
    }
    100% {
        box-shadow: none;
    }
}

/* Women theme animations */
@keyframes fadeInGlow-women {
    0% {
        opacity: 0;
        box-shadow: none;
    }
    100% {
        opacity: 1;
        box-shadow: 
            0 0 15px rgba(229, 62, 111, 0.6),
            0 0 30px rgba(229, 62, 111, 0.4),
            0 0 45px rgba(229, 62, 111, 0.2);
    }
}

@keyframes pulseGlow-women {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(229, 62, 111, 0.4),
            0 0 20px rgba(229, 62, 111, 0.3),
            0 0 30px rgba(229, 62, 111, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(229, 62, 111, 0.8),
            0 0 40px rgba(229, 62, 111, 0.6),
            0 0 60px rgba(229, 62, 111, 0.4);
        transform: scale(1.01);
    }
}

@keyframes fadeOutGlow-women {
    0% {
        box-shadow: 
            0 0 15px rgba(229, 62, 111, 0.6),
            0 0 30px rgba(229, 62, 111, 0.4),
            0 0 45px rgba(229, 62, 111, 0.2);
    }
    100% {
        box-shadow: none;
    }
}

/* Base just-assigned class */
.result-item.just-assigned {
    position: relative;
    z-index: 10;
    animation: fadeInGlow 0.5s ease-out forwards, pulseGlow 0.8s ease-in-out 0.5s 5;
}

.result-item.just-assigned.fade-out {
    animation: fadeOutGlow 0.8s ease-out forwards;
}

/* Men theme for just assigned */
#men-results-tab .result-item.just-assigned {
    animation: fadeInGlow-men 0.5s ease-out forwards, pulseGlow-men 0.8s ease-in-out 0.5s 5;
}

#men-results-tab .result-item.just-assigned.fade-out {
    animation: fadeOutGlow-men 0.8s ease-out forwards;
}

/* Women theme for just assigned */
#women-results-tab .result-item.just-assigned {
    animation: fadeInGlow-women 0.5s ease-out forwards, pulseGlow-women 0.8s ease-in-out 0.5s 5;
}

#women-results-tab .result-item.just-assigned.fade-out {
    animation: fadeOutGlow-women 0.8s ease-out forwards;
}

/* Sticky team item animation */
.sticky-team-item.just-assigned {
    position: relative;
    z-index: 10;
    animation: fadeInGlow 0.5s ease-out forwards, pulseGlow 0.8s ease-in-out 0.5s 5;
}

.sticky-team-item.just-assigned.fade-out {
    animation: fadeOutGlow 0.8s ease-out forwards;
}

#sticky-men-teams .sticky-team-item.just-assigned {
    animation: fadeInGlow-men 0.5s ease-out forwards, pulseGlow-men 0.8s ease-in-out 0.5s 5;
}

#sticky-men-teams .sticky-team-item.just-assigned.fade-out {
    animation: fadeOutGlow-men 0.8s ease-out forwards;
}

#sticky-women-teams .sticky-team-item.just-assigned {
    animation: fadeInGlow-women 0.5s ease-out forwards, pulseGlow-women 0.8s ease-in-out 0.5s 5;
}

#sticky-women-teams .sticky-team-item.just-assigned.fade-out {
    animation: fadeOutGlow-women 0.8s ease-out forwards;
}

/* Smooth content update transition */
.result-item,
.sticky-team-item {
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Remove transition when animating to prevent conflict */
.result-item.just-assigned,
.sticky-team-item.just-assigned {
    transition: none;
}

.result-number {
    transition: all 0.3s ease;
}

.schedule-table tbody tr {
    transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* ============================================
   NAVBAR - Official League Style
   ============================================ */
.navbar-compact {
    background: #ffffff;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border);
}

.navbar-brand {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    color: var(--primary);
}

.navbar-brand i {
    font-size: 22px;
    color: var(--gold);
}

.navbar-links {
    display: flex;
    gap: 0;
}

/* Mobile Menu Toggle Button */
.navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    gap: 5px;
    z-index: 1002;
}

.hamburger-line {
    width: 24px;
    height: 3px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.navbar-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Overlay */
.navbar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.navbar-overlay.active {
    display: block;
    opacity: 1;
}

body.menu-open {
    overflow: hidden;
}

.navbar-links a {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 20px 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}

.navbar-links a:hover,
.navbar-links a.active {
    color: var(--primary);
    background: var(--bg-subtle);
    border-bottom-color: var(--primary);
}

/* Language Dropdown */
.lang-dropdown {
    position: relative;
    display: inline-block;
}

.lang-dropdown-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 20px 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.lang-dropdown-btn:hover {
    color: var(--primary);
    background: var(--bg-subtle);
}

.lang-dropdown-btn i.fa-globe {
    font-size: 15px;
}

.lang-dropdown-btn i.fa-caret-down {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.lang-dropdown:hover .lang-dropdown-btn i.fa-caret-down {
    transform: rotate(180deg);
}

.lang-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #ffffff;
    min-width: 140px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden;
    z-index: 1001;
    border: 1px solid var(--border);
}

.lang-dropdown:hover .lang-dropdown-content {
    display: block;
    animation: dropdownFade 0.2s ease;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lang-dropdown-content a {
    display: block;
    padding: 12px 16px !important;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    border-bottom: none !important;
    transition: all 0.2s ease;
}

.lang-dropdown-content a:hover {
    background: var(--bg-subtle);
    color: var(--primary);
}

.lang-dropdown-content a.active {
    background: var(--primary-light);
    color: white;
    font-weight: 600;
}

/* ============================================
   STICKY TEAMS BAR
   ============================================ */
.sticky-teams-bar {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 999;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.3s ease;
}

.sticky-teams-bar.visible {
    transform: translateY(0);
    opacity: 1;
}

.sticky-teams-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px;
}

.sticky-teams-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sticky-teams-list::-webkit-scrollbar {
    display: none;
}

.sticky-team-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sticky-team-item:hover {
    background: var(--men-light);
    border-color: var(--men-secondary);
}

.sticky-team-item.men:hover {
    background: var(--men-light);
    border-color: var(--men-secondary);
}

.sticky-team-item.women:hover {
    background: var(--women-light);
    border-color: var(--women-secondary);
}

.sticky-team-item.active {
    background: var(--men-lighter);
    border-color: var(--men-primary);
}

.sticky-team-item.men.active {
    background: var(--men-lighter);
    border-color: var(--men-primary);
}

.sticky-team-item.women.active {
    background: var(--women-lighter);
    border-color: var(--women-primary);
}

.sticky-lot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--men-secondary);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}

.sticky-team-item.women .sticky-lot {
    background: var(--women-secondary);
}

.sticky-team-item.pending {
    opacity: 0.5;
    cursor: default;
}

.sticky-team-item.pending .sticky-lot {
    background: var(--bg-subtle);
    color: var(--text-muted);
    border: 1px dashed var(--border);
}

.sticky-team-item.pending:hover {
    background: var(--bg-subtle);
    border-color: var(--border);
}

.sticky-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    background: var(--bg-body);
    min-height: calc(100vh - 60px);
}

/* ============================================
   CARDS - Professional Style
   ============================================ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card-header {
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.card-header.men-theme {
    background: var(--men-primary);
    color: var(--text-light);
    border-bottom: none;
}

.card-header.women-theme {
    background: var(--women-primary);
    color: var(--text-light);
    border-bottom: none;
}

.card-header i {
    font-size: 16px;
    color: var(--text-muted);
}

.card-header.men-theme i,
.card-header.women-theme i {
    color: var(--gold);
}

.card-body {
    padding: 20px;
}

/* ============================================
   TABS - League Style
   ============================================ */
.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
}

.tab-btn {
    flex: 1;
    padding: 14px 24px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-card);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-right: 1px solid var(--border);
}

.tab-btn:last-child {
    border-right: none;
}

.tab-btn:hover:not(.active) {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.tab-btn[data-tab="men-results"].active,
.tab-btn[data-tab="men-schedule"].active,
.tab-btn.men-tab.active {
    background: var(--men-primary);
    color: var(--text-light);
}

.tab-btn[data-tab="women-results"].active,
.tab-btn[data-tab="women-schedule"].active,
.tab-btn.women-tab.active {
    background: var(--women-primary);
    color: var(--text-light);
}

/* Men tab hover */
.tab-btn.men-tab:hover:not(.active) {
    background: var(--men-light);
    color: var(--men-primary);
}

/* Women tab hover */
.tab-btn.women-tab:hover:not(.active) {
    background: var(--women-light);
    color: var(--women-primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ============================================
   RESULTS GRID - Team Cards
   ============================================ */
.results-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 12px;
}

.result-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 64px;
}

.result-item:hover {
    background: var(--men-light);
    border-color: var(--men-secondary);
}

.result-item.active {
    background: var(--men-lighter);
    border-color: var(--men-primary);
}

/* Men's results */
#men-results-tab .result-item:hover {
    background: var(--men-light);
    border-color: var(--men-secondary);
}

#men-results-tab .result-item.active {
    background: var(--men-lighter);
    border-color: var(--men-primary);
}

/* Women's results */
#women-results-tab .result-item:hover {
    background: var(--women-light);
    border-color: var(--women-secondary);
}

#women-results-tab .result-item.active {
    background: var(--women-lighter);
    border-color: var(--women-primary);
}

.result-number {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--men-primary);
    color: var(--text-light);
    font-weight: 700;
    font-size: 22px;
    flex-shrink: 0;
    border-radius: 0;
}

#men-results-tab .result-number {
    background: var(--men-primary);
}

#women-results-tab .result-number {
    background: var(--women-primary);
}

.result-number.pending {
    background: #f5f5f5;
    border: 2px solid var(--border);
    color: var(--text-muted);
    font-size: 20px;
}

#men-results-tab .result-number.pending {
    background: #f5f5f5;
    border: 2px solid var(--men-lighter);
}

#women-results-tab .result-number.pending {
    background: #f5f5f5;
    border: 2px solid var(--women-lighter);
}

.result-team {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--text-primary);
    line-height: 1;
}

.team-prefix {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 2px;
}

.team-main {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

/* Filter Indicator */
.filter-indicator {
    display: none;
    background: var(--men-lighter);
    border: 1px solid var(--men-secondary);
    border-radius: 0;
    color: var(--men-primary);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 13px;
    align-items: center;
    gap: 10px;
}

.filter-indicator.show {
    display: flex;
}

#women-filter-indicator.show {
    background: var(--women-lighter);
    border-color: var(--women-secondary);
    color: var(--women-primary);
}

.clear-filter {
    display: none;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    margin-left: auto;
    border-radius: 0;
    transition: all 0.2s ease;
}

.clear-filter.show {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.clear-filter:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-light);
}

/* ============================================
   SCHEDULE CONTAINER
   ============================================ */
.schedule-container {
    display: none;
}

.schedule-container.active {
    display: block;
}

.schedule-header {
    margin-bottom: 24px;
}

.schedule-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 100%);
    border-radius: 0;
}

.schedule-header h2 i {
    color: var(--gold);
    font-size: 18px;
}

#women-schedule-tab .schedule-header h2 {
    background: linear-gradient(90deg, var(--women-primary) 0%, var(--women-secondary) 100%);
}

/* ============================================
   SCHEDULE SECTIONS
   ============================================ */
.schedule-section {
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.week-header {
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 100%);
    border-bottom: none;
    color: var(--text-light);
}

.week-header.active {
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.week-header .week-title {
    font-weight: 700;
    color: var(--text-light);
}

.current-week-badge {
    background: rgba(255, 255, 255, 0.95);
    color: #d97706;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.week-header .week-venue {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 13px;
}

.week-header .date-range {
    margin-left: auto;
    font-weight: 600;
    font-size: 12px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 12px;
    border-radius: 4px;
    border: none;
}

#men-schedule-tab .week-header {
    background: #ffffff;
}

#women-schedule-tab .week-header {
    background: #ffffff;
}

/* ============================================
   SCHEDULE - DAY GROUP LAYOUT
   ============================================ */
.day-group {
    margin-bottom: 16px;
}

.day-header {
    background: linear-gradient(135deg, #e8f4fd 0%, #d1e9fc 100%);
    color: var(--primary-dark);
    padding: 12px 20px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
}

.day-header i {
    color: var(--primary);
    opacity: 0.9;
}

.matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
}

.match-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.match-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid var(--men-primary);
    cursor: pointer;
}

.match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.match-card.women {
    border-left-color: var(--women-primary);
}

.team-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team.home .team-info {
    flex-direction: row;
}

.team.away .team-info {
    flex-direction: row-reverse;
}

.match-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border-light);
    gap: 10px;
}

.match-card-header .match-number {
    font-weight: 700;
    font-size: 14px;
    color: var(--primary);
}

.match-card-header .match-time {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

.match-card-header .match-time i {
    font-size: 11px;
    opacity: 0.7;
}

.gender-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--men-primary);
    flex-shrink: 0;
}

.gender-indicator.women {
    background: var(--women-primary);
}

/* Match Centre Button */
.match-centre-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #fff;
    color: var(--men-primary);
    border: 1px solid var(--men-primary);
    white-space: nowrap;
}

.match-centre-btn:hover {
    background: var(--men-primary);
    color: #fff;
    transform: translateY(-1px);
}

.match-centre-btn.women {
    background: #fff;
    color: var(--women-primary);
    border-color: var(--women-primary);
}

.match-centre-btn.women:hover {
    background: var(--women-primary);
    color: #fff;
}

.match-centre-btn.men {
    background: #fff;
    color: var(--men-primary);
    border-color: var(--men-primary);
}

.match-centre-btn.men:hover {
    background: var(--men-primary);
    color: #fff;
}

/* ============================================
   DATE PICKER - Horizontal Scrollable Dates
   ============================================ */
.date-picker-section {
    margin: 20px 0;
}

.date-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #e8ecf0;
    border-radius: 16px;
    padding: 15px 10px;
}

.date-picker-track-container {
    flex: 1;
    overflow: hidden;
}

.date-picker-track {
    display: flex;
    gap: 10px;
    transition: transform 0.3s ease;
}

.date-item {
    flex-shrink: 0;
    width: 80px;
    padding: 12px 8px;
    background: #ffffff;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.date-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.date-item.active {
    background: linear-gradient(135deg, var(--men-secondary) 0%, var(--men-primary) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(26, 75, 140, 0.4);
}

.date-item.today {
    border: 3px solid var(--gold);
    position: relative;
}

.date-item.today::after {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
}

:lang(th) .date-item.today::after {
    content: 'วันนี้';
}

:lang(en) .date-item.today::after {
    content: 'Today';
}

.date-item .date-day {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    line-height: 1;
    margin-bottom: 2px;
}

.date-item.active .date-day {
    color: rgba(255,255,255,0.85);
}

.date-item .date-num {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.date-item.active .date-num {
    color: white;
}

.date-item .date-month {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    line-height: 1;
    margin-top: 2px;
}

.date-item.active .date-month {
    color: rgba(255,255,255,0.85);
}

.date-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--men-secondary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.date-nav-btn:hover {
    background: var(--men-primary);
    transform: scale(1.05);
}

.date-nav-btn:active {
    transform: scale(0.95);
}

/* Responsive - show fewer items on smaller screens */
@media (max-width: 768px) {
    .date-picker-wrapper {
        padding: 12px 8px;
    }
    
    .date-item {
        width: 65px;
        padding: 10px 6px;
    }
    
    .date-item .date-num {
        font-size: 1.4rem;
    }
    
    .date-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .date-item {
        width: 55px;
        padding: 8px 4px;
    }
    
    .date-item .date-day {
        font-size: 0.65rem;
    }
    
    .date-item .date-num {
        font-size: 1.2rem;
    }
    
    .date-item .date-month {
        font-size: 0.6rem;
    }
}

.match-card-teams {
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Index match cards: logos attached to score/VS */
.match-card-teams .team-logo,
.match-card-teams .team-logo-placeholder {
    display: none;
}

.match-card-teams .score-wrapper {
    gap: 6px;
}

.match-card-teams .team-logo-score {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 4px;
    background: #f8f9fa;
    padding: 2px;
}

.match-card-teams .team-logo-score-placeholder {
    background: #e2e8f0;
    padding: 0;
}

.match-card-teams .team {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.match-card-teams .team.home {
    justify-content: flex-end;
    text-align: right;
}

.match-card-teams .team.away {
    justify-content: flex-start;
    text-align: left;
}

.match-card-teams .team-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
    background: #f8f9fa;
    padding: 2px;
}

.match-card-teams .team-logo-placeholder {
    width: 36px;
    height: 36px;
    background: #e2e8f0;
    border-radius: 4px;
    flex-shrink: 0;
}

.match-card-teams .team-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.3;
}

.match-card-teams .vs-badge {
    background: var(--gold);
    color: white;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    flex-shrink: 0;
}

.match-card-teams .lot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: var(--men-secondary);
    color: white;
    font-weight: 700;
    font-size: 11px;
    border-radius: 4px;
    flex-shrink: 0;
}

.match-card.women .lot-badge {
    background: var(--women-secondary);
}

.match-card-teams .lot-badge.pending {
    background: #cbd5e0;
    color: #4a5568;
}

/* Match Result Styles */
.score-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.score-display .score-sets {
    color: var(--text-primary);
    font-weight: 800;
    font-size: 1.5rem;
    padding: 4px 10px;
}

.match-card-teams .team.winner .team-logo {
    border-radius: 50%;
}

/* Responsive */
@media (max-width: 768px) {
    .matches-grid {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 10px;
    }
    
    .match-card-teams .team-name {
        font-size: 12px;
    }
    
    .day-header {
        font-size: 14px;
        padding: 10px 16px;
    }
}

/* ============================================
   SCHEDULE TABLE (Legacy - kept for compatibility)
   ============================================ */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    table-layout: fixed;
}

.schedule-table th.col-match {
    width: 80px;
}

.schedule-table th.col-date {
    width: 120px;
}

.schedule-table th.col-time {
    width: 75px;
}

.schedule-table th.col-team {
    width: calc((100% - 80px - 120px - 75px - 70px) / 2);
}

.schedule-table th.col-vs {
    width: 70px;
}

.schedule-table th {
    background: #f8f9fa;
    color: var(--text-secondary);
    padding: 4px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
}

#men-schedule-tab .schedule-table th {
    border-bottom-color: var(--men-secondary);
}

#women-schedule-tab .schedule-table th {
    border-bottom-color: var(--women-secondary);
}

.schedule-table td {
    padding: 7px 12px;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
}

.schedule-table tbody tr {
    transition: background-color 0.15s ease;
    background: #ffffff;
}

.schedule-table tbody tr:nth-child(even) {
    background: #ffffff;
}

.schedule-table tbody tr:hover {
    background: #fafafa;
}

.schedule-table tbody tr:last-child td {
    border-bottom: 1px solid var(--border-light);
}

/* Filtered rows */
.schedule-table tr.highlight {
    background: var(--men-lighter) !important;
}

#women-schedule-tab .schedule-table tr.highlight {
    background: var(--women-lighter) !important;
}

#women-schedule-tab .schedule-table tbody tr:hover {
    background: #fdf2f8;
}

.schedule-table tr.dimmed {
    opacity: 0.35;
}

.schedule-table .match-number {
    font-weight: 700;
    font-size: 16px;
    color: var(--primary);
}

.schedule-table .match-date,
.schedule-table .match-time {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.schedule-table .team-home {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    padding-right: 12px;
}

.schedule-table .team-away {
    color: var(--text-primary);
    font-weight: 600;
    text-align: left;
    padding-left: 12px;
}

.schedule-table .vs {
    color: var(--gold);
    font-weight: 700;
    font-size: 12px;
}

/* ============================================
   LOT BADGE
   ============================================ */
.lot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    background: var(--men-secondary);
    color: var(--text-light);
    font-weight: 700;
    font-size: 12px;
    margin: 0 6px;
    border-radius: 0;
}

#women-schedule-tab .lot-badge {
    background: var(--women-secondary);
}

/* ============================================
   GENDER BADGE
   ============================================ */
.gender-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
}

.gender-badge.men {
    background: var(--men-primary);
    color: var(--text-light);
}

.gender-badge.women {
    background: var(--women-primary);
    color: var(--text-light);
}

/* ============================================
   SCHEDULE CONTENT TABS
   ============================================ */
.schedule-content {
    display: none;
}

.schedule-content.active {
    display: block;
}

/* ============================================
   FOOTER - Official Style
   ============================================ */
.footer {
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 32px 24px;
    margin-top: 40px;
}

.footer p {
    margin: 6px 0;
    font-size: 13px;
}

.footer strong {
    color: var(--text-light);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.footer a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
}

.footer a:hover {
    text-decoration: underline;
}

.footer .footer-fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #1877f2;
    border-radius: 50%;
    margin-bottom: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.footer .footer-fb i {
    font-size: 28px;
    color: #fff;
}

.footer .footer-fb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(24, 119, 242, 0.5);
    text-decoration: none;
}

/* ============================================
   ADMIN STYLES
   ============================================ */
.navbar-compact.admin {
    background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
}

/* Admin Menu Enhanced Styles */
.navbar-links a i {
    margin-right: 6px;
    font-size: 14px;
}

.navbar-links a.logout-btn {
    color: #dc3545;
    border-left: 1px solid var(--border);
    margin-left: 10px;
}

.navbar-links a.logout-btn:hover {
    background: #fff5f5;
    color: #c82333;
    border-bottom-color: #dc3545;
}

.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.team-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.team-number {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--men-primary);
    color: var(--text-light);
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
    border-radius: 0;
}

.team-number.pending {
    background: var(--bg-subtle);
    border: 2px dashed var(--border);
    color: var(--text-muted);
}

.team-number.editable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.team-number.editable:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

.team-info {
    flex: 1;
    min-width: 0;
}

.team-info h3 {
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-weight: 600;
}

.team-info p {
    font-size: 13px;
    color: var(--text-muted);
}

/* ============================================
   TEAMS (VIMS LOGOS)
   ============================================ */
.team-card.men {
    border-left: 4px solid var(--men-primary);
}

.team-card.women {
    border-left: 4px solid var(--women-primary);
}

.team-logo {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
}

.team-logo-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        rgba(0,0,0,0.04),
        rgba(0,0,0,0.04) 10px,
        rgba(0,0,0,0.08) 10px,
        rgba(0,0,0,0.08) 20px
    );
}

.team-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.team-meta {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.team-code {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.3px;
}

.team-gender-pill,
.gender-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
}

.team-gender-pill.men,
.gender-pill.men {
    color: var(--men-primary);
    border-color: rgba(30, 58, 95, 0.25);
}

.team-gender-pill.women,
.gender-pill.women {
    color: var(--women-primary);
    border-color: rgba(159, 34, 81, 0.25);
}

/* ============================================
   TEAMS MARQUEE (SCROLL)
   ============================================ */
.teams-marquee-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 0;
}

.teams-marquee-wrapper {
    overflow: hidden;
    position: relative;
    padding: 12px 0;
}

.teams-scroll-track {
    display: flex;
    gap: 32px;
    width: max-content;
    animation: scroll-left 60s linear infinite;
}

.team-scroll-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 120px;
    text-align: center;
}

.team-scroll-item.men .team-scroll-name {
    color: var(--men-primary);
}

.team-scroll-item.women .team-scroll-name {
    color: var(--women-primary);
}

.team-scroll-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.team-scroll-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team-scroll-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

@keyframes scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================
   SCHEDULE (COMBINED)
   ============================================ */
.schedule-table th.col-gender,
.schedule-table td.match-gender {
    width: 72px;
    text-align: center;
    white-space: nowrap;
}

/* Lot Buttons */
.lot-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.lot-btn {
    padding: 24px 16px;
    font-size: 28px;
    font-weight: 700;
    font-family: inherit;
    border: 2px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-card);
    color: var(--text-primary);
}

.lot-btn:hover:not(.used):not(:disabled) {
    background: var(--men-secondary);
    border-color: var(--men-secondary);
    color: var(--text-light);
}

.lot-btn.used {
    background: var(--bg-subtle);
    border-color: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.4;
}

.lot-btn:disabled {
    cursor: not-allowed;
}

/* Women Lot Buttons */
.women-theme .lot-btn:hover:not(.used):not(:disabled) {
    background: var(--women-secondary);
    border-color: var(--women-secondary);
}

.women-theme .team-number {
    background: var(--women-primary);
}

/* Women theme for Admin lot buttons (small) */
#women-tab .lot-btn:hover:not(.used):not(:disabled) {
    background: var(--women-secondary);
    border-color: var(--women-secondary);
}

/* ============================================
   DRAW MODE TABS (Admin)
   ============================================ */
.draw-mode-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.draw-mode-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.draw-mode-btn:first-child {
    border-right: 1px solid var(--border);
}

.draw-mode-btn:hover:not(.active) {
    background: var(--bg-card);
}

.draw-mode-btn.active {
    background: var(--primary);
    color: var(--text-light);
}

/* Men tab - draw mode buttons */
#men-tab .draw-mode-btn.active {
    background: var(--men-primary);
}

#men-tab .draw-mode-btn:hover:not(.active) {
    background: var(--men-light);
    color: var(--men-primary);
}

/* Women tab - draw mode buttons */
#women-tab .draw-mode-btn.active {
    background: var(--women-primary);
}

#women-tab .draw-mode-btn:hover:not(.active) {
    background: var(--women-light);
    color: var(--women-primary);
}

.draw-mode-content {
    display: none;
}

.draw-mode-content.active {
    display: block;
}

/* Lot Buttons Large (for Lot-First mode) */
.lot-buttons-large {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.lot-btn-large {
    padding: 30px 20px;
    font-size: 32px;
    font-weight: 700;
    font-family: inherit;
    border: 2px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-card);
    color: var(--text-primary);
}

.lot-btn-large:hover:not(.used):not(:disabled):not(.selected) {
    background: var(--men-light);
    border-color: var(--men-secondary);
}

.lot-btn-large.selected {
    background: var(--men-primary);
    border-color: var(--men-primary);
    color: var(--text-light);
}

.lot-btn-large.used {
    background: var(--bg-subtle);
    border-color: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.4;
}

.lot-btn-large:disabled {
    cursor: not-allowed;
}

#women-tab .lot-btn-large:hover:not(.used):not(:disabled):not(.selected) {
    background: var(--women-light);
    border-color: var(--women-secondary);
}

#women-tab .lot-btn-large.selected {
    background: var(--women-primary);
    border-color: var(--women-primary);
}

/* Lot Select Card */
.lot-select-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    padding: 20px;
    margin-top: 15px;
}

.lot-select-card h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.lot-select-card p {
    margin-bottom: 10px;
    color: var(--text-secondary);
}

/* Team Select Card */
.team-select-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    padding: 24px;
    margin-top: 20px;
}

.team-select-card h3 {
    font-size: 20px;
    margin-bottom: 16px;
    color: var(--text-primary);
    font-weight: 700;
}

.team-select-card p {
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ============================================
   TEAM BUTTONS GRID (Admin)
   ============================================ */
.section-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-label i {
    color: var(--primary);
}

.team-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.team-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.team-select-btn:hover:not(:disabled):not(.assigned):not(.selected) {
    background: var(--men-light);
    border-color: var(--men-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 75, 140, 0.15);
}

.team-select-btn.selected {
    background: var(--men-primary);
    border-color: var(--men-primary);
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(26, 75, 140, 0.3);
}

.team-select-btn.assigned {
    background: var(--bg-subtle);
    border-color: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.team-select-btn:disabled {
    cursor: not-allowed;
}

.team-btn-name {
    flex: 1;
}

.team-btn-lot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--men-secondary);
    color: var(--text-light);
    font-weight: 700;
    font-size: 14px;
    margin-left: 12px;
}

/* Women theme for team buttons */
#women-tab .team-select-btn:hover:not(:disabled):not(.assigned):not(.selected) {
    background: var(--women-light);
    border-color: var(--women-secondary);
    box-shadow: 0 4px 12px rgba(197, 48, 48, 0.15);
}

#women-tab .team-select-btn.selected {
    background: var(--women-primary);
    border-color: var(--women-primary);
    box-shadow: 0 4px 16px rgba(197, 48, 48, 0.3);
}

#women-tab .team-btn-lot {
    background: var(--women-secondary);
}

/* ============================================
   MODERN BUTTONS (Tailwind-style)
   ============================================ */
.btn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 15px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--text-light);
    box-shadow: 0 2px 8px rgba(26, 75, 140, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 4px 16px rgba(26, 75, 140, 0.4);
}

.btn-secondary {
    background: var(--bg-subtle);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-card);
    border-color: var(--primary);
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: var(--text-light);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.btn-danger:hover {
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: var(--text-light);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}

.btn-success:hover {
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.4);
}

.btn-warning {
    background: linear-gradient(135deg, #d69e2e 0%, #b7791f 100%);
    color: var(--text-light);
    box-shadow: 0 2px 8px rgba(214, 158, 46, 0.3);
}

.btn-warning:hover {
    box-shadow: 0 4px 16px rgba(214, 158, 46, 0.4);
}

/* ============================================
   MODERN FORM CONTROLS
   ============================================ */
.form-control {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    font-family: inherit;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control:hover {
    border-color: var(--primary-light);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(26, 75, 140, 0.1);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-container {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-card);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.login-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--text-light);
    padding: 30px 24px;
    text-align: center;
}

.login-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.login-header p {
    font-size: 0.9rem;
    opacity: 0.9;
}

.login-body {
    padding: 30px 24px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 14px;
    font-family: inherit;
    background: var(--bg-card);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* Alert Messages */
.alert {
    padding: 14px 18px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-content {
    background: var(--bg-card);
    border-radius: 0;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: var(--primary);
    color: var(--text-light);
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-light);
}

.modal-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ============================================
   DRAWING MODE
   ============================================ */
.drawing-mode-card {
    text-align: center;
}

.current-team-display {
    padding: 32px;
    background: var(--bg-subtle);
    border-radius: 0;
    margin-bottom: 20px;
}

.current-team-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.current-team-status {
    font-size: 14px;
    color: var(--text-muted);
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Mobile Navigation - 768px and below */
@media (max-width: 768px) {
    .container {
        padding: 16px 12px;
    }
    
    .navbar-compact {
        padding: 0 12px;
        position: relative;
    }
    
    .navbar-brand {
        font-size: 15px;
        padding: 12px 0;
    }
    
    .navbar-brand i {
        font-size: 18px;
    }
    
    /* Show hamburger menu */
    .navbar-toggle {
        display: flex;
    }
    
    /* Mobile menu styles */
    .navbar-links {
        position: fixed;
        top: 0;
        right: -280px;
        width: 280px;
        height: 100vh;
        background: white;
        flex-direction: column;
        padding: 70px 0 20px 0;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        transition: right 0.3s ease;
        z-index: 1001;
        overflow-y: auto;
    }
    
    .navbar-links.active {
        right: 0;
    }
    
    .navbar-links a {
        padding: 16px 24px;
        font-size: 15px;
        border-bottom: 1px solid var(--border-light);
        border-left: 4px solid transparent;
    }
    
    .navbar-links a:hover,
    .navbar-links a.active {
        border-bottom: 1px solid var(--border-light);
        border-left: 4px solid var(--primary);
        background: var(--bg-subtle);
    }
    
    .navbar-links a.admin-link {
        margin-top: auto;
        border-top: 1px solid var(--border);
        background: var(--bg-subtle);
    }
    
    /* Mobile language dropdown */
    .lang-dropdown {
        width: 100%;
    }
    
    .lang-dropdown-btn {
        width: 100%;
        padding: 16px 24px;
        justify-content: flex-start;
        font-size: 15px;
        border-bottom: 1px solid var(--border-light);
    }
    
    .lang-dropdown-content {
        position: static;
        display: none;
        width: 100%;
        box-shadow: none;
        border: none;
        background: var(--bg-subtle);
        border-radius: 0;
    }
    
    .lang-dropdown:hover .lang-dropdown-content,
    .lang-dropdown-content.show {
        display: block;
    }
    
    .lang-dropdown-content a {
        padding: 14px 40px !important;
        font-size: 14px;
        border-left: 4px solid transparent !important;
    }
    
    /* ========================================
       UPCOMING MATCHES - VERTICAL MOBILE LAYOUT
       ======================================== */
    .upcoming-section {
        margin-bottom: 16px;
        margin-left: -12px;
        margin-right: -12px;
        padding: 0 12px;
    }
    
    .section-title {
        font-size: 1.1rem;
        margin-bottom: 12px;
        padding: 0 4px;
    }
    
    /* Vertical layout for mobile */
    .upcoming-container {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    /* Show nav buttons as up/down arrows */
    .upcoming-nav-btn {
        display: flex;
        width: 100%;
        height: 40px;
        border-radius: 8px;
        order: 0;
    }
    
    .upcoming-nav-btn.prev {
        order: -1;
    }
    
    .upcoming-nav-btn.next {
        order: 1;
    }
    
    .upcoming-nav-btn.prev i::before {
        content: "\f077"; /* fa-chevron-up */
    }
    
    .upcoming-nav-btn.next i::before {
        content: "\f078"; /* fa-chevron-down */
    }
    
    /* Vertical scroll wrapper */
    .upcoming-scroll-wrapper {
        max-height: 520px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4px 0;
        margin: 0;
        scroll-behavior: smooth;
    }
    
    /* Vertical card layout */
    .upcoming-cards {
        flex-direction: column;
        gap: 12px;
        min-width: unset;
        width: 100%;
        padding: 0;
    }
    
    /* Day divider - horizontal for vertical layout */
    .upcoming-day-divider {
        width: 100%;
        padding: 8px 0;
        justify-content: center;
    }
    
    .upcoming-day-divider .day-label {
        writing-mode: horizontal-tb;
        transform: none;
        padding: 8px 20px;
        font-size: 0.85rem;
        border-radius: 20px;
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: white;
    }
    
    /* Full width cards */
    .upcoming-card {
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
        box-sizing: border-box;
    }
    
    .upcoming-card-link {
        width: 100%;
        display: block;
    }
    
    .upcoming-card-date {
        padding: 12px 16px;
    }
    
    .date-badge {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
    
    .upcoming-card-date .match-time {
        font-size: 1rem;
        font-weight: 700;
    }
    
    .upcoming-card-teams {
        padding: 16px;
        gap: 12px;
    }
    
    .upcoming-card-teams .team-logo {
        width: 50px;
        height: 50px;
    }
    
    .upcoming-card-teams .team-logo-placeholder {
        width: 50px;
        height: 50px;
    }
    
    .upcoming-card-teams .team-name {
        font-size: 0.8rem;
        max-width: 100px;
    }
    
    .vs-circle {
        width: 36px;
        height: 36px;
        font-size: 0.7rem;
    }
    
    .upcoming-card-footer {
        padding: 10px 16px;
    }
    
    .upcoming-card-footer .match-num {
        font-size: 0.8rem;
    }
    
    .upcoming-card-footer .gender-tag {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
    
    .results-grid-2col {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-auto-flow: row;
    }
    
    .tabs {
        flex-direction: column;
    }
    
    .tab-btn {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    
    .tab-btn:last-child {
        border-bottom: none;
    }
    
    .teams-grid {
        grid-template-columns: 1fr;
    }
    
    .lot-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .week-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .week-header .date-range {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 12px 8px;
    }
    
    .navbar-compact {
        padding: 0 8px;
    }
    
    .navbar-brand {
        font-size: 14px;
        gap: 8px;
    }
    
    .navbar-brand i {
        font-size: 16px;
    }
    
    /* Full width upcoming section on very small screens */
    .upcoming-section {
        margin-left: -8px;
        margin-right: -8px;
        padding: 0 8px;
    }
    
    .upcoming-scroll-wrapper {
        max-height: 550px;
    }
    
    .upcoming-cards {
        gap: 10px;
    }
    
    /* Full width cards on very small screens */
    .upcoming-card {
        width: 100%;
        max-width: 100%;
        border-radius: 10px;
    }
    
    .upcoming-card-date {
        padding: 10px 12px;
    }
    
    .date-badge {
        font-size: 0.75rem;
        padding: 3px 8px;
    }
    
    .upcoming-card-date .match-time {
        font-size: 0.95rem;
    }
    
    .upcoming-card-teams {
        padding: 14px 12px;
    }
    
    .upcoming-card-teams .team-logo {
        width: 45px;
        height: 45px;
    }
    
    .upcoming-card-teams .team-logo-placeholder {
        width: 45px;
        height: 45px;
    }
    
    .upcoming-card-teams .team-name {
        font-size: 0.75rem;
        max-width: 90px;
    }
    
    .vs-circle {
        width: 32px;
        height: 32px;
        font-size: 0.65rem;
    }
    
    .upcoming-day-divider .day-label {
        font-size: 0.8rem;
        padding: 6px 16px;
    }
    
    .section-title {
        font-size: 1rem;
    }
    
    .schedule-table {
        font-size: 12px;
    }
    
    .schedule-table th,
    .schedule-table td {
        padding: 10px 8px;
    }
    
    .lot-badge {
        min-width: 22px;
        height: 22px;
        font-size: 10px;
        padding: 0 4px;
    }
    
    .lot-btn {
        padding: 18px 12px;
        font-size: 22px;
    }
    
    .result-item {
        padding: 12px 16px;
    }
    
    .result-number {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* ============================================
   UTILITIES
   ============================================ */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection */
::selection {
    background: var(--men-light);
    color: var(--text-primary);
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Fade animation */
.fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SLIDE CONTROL PANEL (Admin)
   ============================================ */
.slide-control-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.slide-btn {
    flex: 1;
    min-width: 140px;
    padding: 15px 20px;
    border: 2px solid var(--border);
    background: var(--bg-card);
    font-family: inherit;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.slide-btn i {
    font-size: 24px;
    color: var(--text-muted);
}

.slide-btn span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.slide-btn small {
    font-size: 11px;
    color: var(--text-muted);
}

.slide-btn:hover {
    background: var(--bg-subtle);
    transform: translateY(-2px);
}

.slide-btn.active {
    border-color: var(--primary);
    background: var(--primary);
}

.slide-btn.active i,
.slide-btn.active span,
.slide-btn.active small {
    color: white;
}

.slide-btn.men {
    border-color: var(--men-secondary);
}

.slide-btn.men:hover {
    background: var(--men-light);
}

.slide-btn.men.active {
    background: var(--men-primary);
    border-color: var(--men-primary);
}

.slide-btn.women {
    border-color: var(--women-secondary);
}

.slide-btn.women:hover {
    background: var(--women-light);
}

.slide-btn.women.active {
    background: var(--women-primary);
    border-color: var(--women-primary);
}

.slide-image-upload {
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.slide-image-upload label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 14px;
}

.upload-area {
    display: flex;
    align-items: center;
    gap: 20px;
}

.upload-area input[type="file"] {
    flex: 1;
}

#current-slide-image {
    min-width: 200px;
    min-height: 80px;
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
}

#current-slide-image .no-image {
    color: var(--text-muted);
    font-size: 12px;
}

/* Current Slide Status */
.current-slide-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 16px;
    margin-bottom: 20px;
    border-radius: 0;
}

.current-slide-status i {
    font-size: 20px;
    animation: pulse 2s ease infinite;
}

.current-slide-status strong {
    font-size: 18px;
}

.current-slide-status.men {
    background: linear-gradient(135deg, var(--men-primary) 0%, var(--men-secondary) 100%);
}

.current-slide-status.women {
    background: linear-gradient(135deg, var(--women-primary) 0%, var(--women-secondary) 100%);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   TEAM LINKS (Clickable team names)
   ============================================ */
.team-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: inherit;
    align-items: center;
    gap: inherit;
    transition: all 0.2s ease;
}

.team-link:hover {
    opacity: 0.85;
    transform: scale(1.02);
}

.team-link:hover .team-name {
    text-decoration: underline;
}

/* Team block links (upcoming matches) */
.team-block .team-link {
    flex-direction: column;
    gap: 8px;
}

/* Match card team links */
.match-card .team.home .team-link {
    flex-direction: row;
}

.match-card .team.away .team-link {
    flex-direction: row;
}

/* Team scroll link (marquee) */
.team-scroll-link {
    text-decoration: none;
    color: inherit;
}

.team-scroll-link:hover .team-scroll-item {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.team-scroll-link:hover .team-scroll-name {
    text-decoration: underline;
}
/* ============================================
   HORIZONTAL BAR CHART STATS
   ============================================ */
.bar-chart-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 10px;
}

.bar-chart-header .team-left {
    text-align: left;
}

.bar-chart-header .team-right {
    text-align: right;
}

.stat-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-light);
}

.stat-bar-row:last-child {
    border-bottom: none;
}

.bar-label {
    flex: 0 0 90px;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.bar-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 24px;
}

.bar-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 24px;
}

.bar-left .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--women-secondary), var(--women-primary));
    border-radius: 4px 0 0 4px;
    transition: width 0.5s ease;
}

.bar-right .bar-fill {
    height: 100%;
    background: linear-gradient(270deg, var(--women-secondary), var(--women-primary));
    border-radius: 0 4px 4px 0;
    transition: width 0.5s ease;
}

.bar-left .bar-fill.men {
    background: linear-gradient(90deg, var(--men-secondary), var(--men-primary));
}

.bar-right .bar-fill.men {
    background: linear-gradient(270deg, var(--men-secondary), var(--men-primary));
}

.bar-value {
    font-weight: 700;
    font-size: 0.85rem;
    min-width: 25px;
    color: var(--text-primary);
}

.bar-left .bar-value {
    text-align: right;
}

.bar-right .bar-value {
    text-align: left;
}

/* Set Score Summary */
.set-score-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 15px;
    margin-top: 15px;
    background: var(--bg-subtle);
    border-radius: 8px;
}

.set-score-summary .score-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.set-score-summary .score-left,
.set-score-summary .score-right {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-secondary);
}

.set-score-summary .score-left.winner,
.set-score-summary .score-right.winner {
    color: #48bb78;
}

/* ============================================
   SCHEDULE PAGE STYLES
   ============================================ */

/* Global Link Styles */
a {
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    text-decoration: none;
}

/* Filter Section */
.filter-section {
    padding: 20px;
}

.filter-row {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    background: var(--bg-card);
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.filter-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-btn:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

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

.filter-btn.women.active {
    background: var(--women-primary);
}

.filter-btn.men.active {
    background: var(--men-primary);
}

/* Team Filter */
.team-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    padding: 10px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.team-filter label {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.team-select {
    padding: 8px 12px;
    border: 1px solid var(--bg-subtle);
    border-radius: 8px;
    background: white;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    min-width: 200px;
    transition: all 0.3s ease;
}

.team-select:hover {
    border-color: var(--primary);
}

.team-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(251, 110, 65, 0.1);
}

/* Matches Table */
.matches-table-wrapper {
    overflow-x: auto;
    margin-top: 15px;
}

.matches-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.matches-table thead {
    background: var(--bg-subtle);
}

.matches-table th {
    padding: 12px 16px;
    text-align: left;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.matches-table th:first-child {
    width: 60px;
}

.matches-table th:nth-child(2) {
    width: 80px;
}

.matches-table th:nth-child(3) {
    width: 30%;
}

.matches-table th:nth-child(4) {
    width: 180px;
    text-align: center;
}

.matches-table th:nth-child(5) {
    width: 30%;
}

.matches-table th:nth-child(6) {
    width: 80px;
    text-align: center;
}

.matches-table th:last-child {
    width: 120px;
    text-align: center;
}

.match-row {
    border-bottom: 1px solid var(--bg-subtle);
    transition: all 0.3s ease;
}

.match-row:hover {
    background: var(--bg-subtle);
}

.match-row.women {
    border-left: 3px solid var(--women-primary);
}

.match-row.men {
    border-left: 3px solid var(--men-primary);
}

.matches-table td {
    padding: 14px 16px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.match-num {
    font-weight: 600;
    color: var(--text-secondary);
}

.match-time {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.team-cell {
    font-weight: 500;
}

.team-cell.home {
    text-align: right;
}

.team-cell.home .team-link {
    justify-content: flex-end;
}

.team-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.team-link:hover {
    color: var(--primary);
}

.score-cell {
    text-align: center;
}

.score-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.team-logo-score {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
}

.score-link, .vs-link {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.score-sets {
    white-space: nowrap;
    font-size: 1rem;
}

.score-link {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.score-link:hover {
    background: var(--primary);
    color: white;
}

.vs-link {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.vs-link:hover {
    background: var(--primary);
    color: white;
}

.gender-cell {
    text-align: center;
}

.gender-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.gender-badge.women {
    background: var(--women-primary);
    color: white;
}

.gender-badge.men {
    background: var(--men-primary);
    color: white;
}

/* Action Cell */
.action-cell {
    text-align: center;
}

.match-centre-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
    text-decoration: none;
    background: #fff;
    color: var(--men-primary);
    border: 1px solid var(--men-primary);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.match-centre-btn.women {
    background: #fff;
    color: var(--women-primary);
    border-color: var(--women-primary);
}

.match-centre-btn.women:hover {
    background: var(--women-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 70, 145, 0.25);
}

.match-centre-btn.men {
    background: #fff;
    color: var(--men-primary);
    border-color: var(--men-primary);
}

.match-centre-btn.men:hover {
    background: var(--men-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(70, 130, 230, 0.25);
}

.match-centre-btn i {
    font-size: 0.8rem;
}

/* Schedule Page Section */
.schedule-page-section {
    margin-top: 20px;
}

/* Schedule page only: Match Centre button normal size */
.schedule-page-section .match-centre-btn {
    padding: 8px 16px;
    border-radius: 8px;
    gap: 6px;
    font-size: 0.85rem;
}

.schedule-page-section .match-centre-btn i {
    font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-buttons {
        justify-content: center;
    }
    
    .filter-btn {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
    
    .filter-btn i {
        display: none;
    }
    
    .team-filter {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .team-select {
        width: 100%;
    }
    
    .matches-table {
        font-size: 0.8rem;
    }
    
    .matches-table th,
    .matches-table td {
        padding: 10px 8px;
    }
    
    .team-logo-score {
        width: 28px;
        height: 28px;
    }
    
    .team-name {
        font-size: 0.85rem;
    }
}

/* ============================================
   WEEK SELECTOR SECTION
   ============================================ */
.week-selector-section {
    margin-top: 30px;
    margin-bottom: 10px;
}

.week-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.week-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.week-btn:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(26, 75, 140, 0.15);
    transform: translateY(-2px);
}

.week-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(26, 75, 140, 0.3);
}

.week-btn .week-num {
    font-weight: 700;
    font-size: 0.95rem;
}

.week-btn .week-date {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 4px;
}

.week-btn.active .week-num,
.week-btn.active .week-date {
    color: white;
}

/* ============================================
   TEAM RANKINGS SECTION
   ============================================ */
.rankings-section {
    margin-top: 40px;
    margin-bottom: 30px;
}

.rankings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ranking-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.ranking-card .ranking-header {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ranking-card .ranking-header.men {
    background: linear-gradient(135deg, var(--men-primary) 0%, var(--men-secondary) 100%);
    color: white;
}

.ranking-card .ranking-header.women {
    background: linear-gradient(135deg, var(--women-primary) 0%, var(--women-secondary) 100%);
    color: white;
}

.ranking-table-wrapper {
    overflow-x: auto;
}

.ranking-table-compact {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.ranking-table-compact th {
    background: var(--bg-subtle);
    padding: 8px 6px;
    text-align: center;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.ranking-table-compact td {
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.ranking-table-compact tbody tr:hover {
    background: var(--bg-subtle);
}

.ranking-table-compact .rank-num {
    font-weight: 700;
    color: var(--primary);
}

.ranking-table-compact .team-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
    text-align: left;
    min-width: 80px;
}

.ranking-table-compact .team-logo-sm {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
}

.ranking-table-compact .team-code-badge {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.ranking-table-compact .win {
    color: var(--success);
    font-weight: 600;
}

.ranking-table-compact .lose {
    color: var(--women-primary);
    font-weight: 600;
}

.ranking-table-compact .pts {
    font-weight: 700;
    color: var(--primary);
}

.ranking-table-compact .no-data {
    padding: 20px;
    color: var(--text-muted);
    font-style: italic;
}

.rankings-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 0.75rem;
    border-radius: 0 0 12px 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.rankings-footer .update-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rankings-view-all {
    text-align: center;
    padding: 15px;
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 75, 140, 0.3);
}

.btn-view-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 75, 140, 0.4);
}

.btn-view-all i {
    font-size: 1rem;
}

/* Mobile Responsive for Week Selector & Rankings */
@media (max-width: 768px) {
    .week-buttons {
        gap: 8px;
    }
    
    .week-btn {
        padding: 10px 14px;
        min-width: 100px;
    }
    
    .week-btn .week-num {
        font-size: 0.85rem;
    }
    
    .week-btn .week-date {
        font-size: 0.7rem;
    }
    
    .rankings-grid {
        grid-template-columns: 1fr;
    }
    
    .ranking-table-compact {
        font-size: 0.75rem;
    }
    
    .ranking-table-compact th,
    .ranking-table-compact td {
        padding: 6px 4px;
    }
    
    .ranking-table-compact .team-logo-sm {
        width: 20px;
        height: 20px;
    }
    
    .rankings-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}