/**
 * Modern Tennis Tournament UI - Complete Design System
 * A comprehensive, modern tennis-themed CSS framework
 */

:root {
    /* Tennis Color Palette */
    --tennis-green: #4CAF50;
    --tennis-green-dark: #2E7D32;
    --tennis-green-light: #C8E6C9;
    --tennis-green-ultra-light: #E8F5E8;
    --court-orange: #FF6F00;
    --court-orange-light: #FFE0B2;
    --court-orange-dark: #E65100;

    /* Neutral Colors */
    --white: #FFFFFF;
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #EEEEEE;
    --gray-300: #E0E0E0;
    --gray-400: #BDBDBD;
    --gray-500: #9E9E9E;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;

    /* Status Colors */
    --success: #4CAF50;
    --warning: #FF9800;
    --error: #F44336;
    --info: #2196F3;
    --primary: var(--tennis-green);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition: 200ms ease;
    --transition-slow: 300ms ease;
}

/* ======================
   Compact Tournament Filters
   ====================== */
.tennis-filters-card {
    margin-bottom: var(--space-4) !important;
    padding: var(--space-3) !important;
    background: var(--white) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.tennis-filters-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: var(--space-3) !important;
    align-items: start !important;
}

.tennis-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.tennis-filter-group.search-group {
    grid-column: 1 / -1 !important;
    margin-bottom: -0.5rem !important;
}

.tennis-filter-label {
    color: var(--gray-600) !important;
    margin-bottom: 0.15rem !important;
    line-height: 1.2 !important;
    font-size: 14px !important;
}

.tennis-input-group {
    position: relative !important;
    width: 100% !important;
}

.tennis-input-icon {
    position: absolute !important;
    left: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--gray-400) !important;
    font-size: 0.8rem !important;
    pointer-events: none !important;
}

.tennis-input {
    width: 100% !important;
    padding: 0.35rem 0.75rem 0.35rem 1.75rem !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: var(--radius) !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    transition: all var(--transition) !important;
    background-color: var(--white) !important;
    height: 2rem !important;
    box-sizing: border-box !important;
}

.tennis-input:focus {
    border-color: var(--tennis-green) !important;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15) !important;
    outline: none !important;
}

.select-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
}

.tennis-select {
    width: 100% !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: var(--radius) !important;
    line-height: 1.4 !important;
    background-color: var(--white) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    height: 2rem !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    text-align: center;
    padding: 0px 10px;
    font-size: 14px !important;
}

.tennis-select:focus {
    border-color: var(--tennis-green) !important;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15) !important;
    outline: none !important;
}

.select-arrow {
    position: absolute !important;
    right: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--gray-500) !important;
    pointer-events: none !important;
    font-size: 0.6rem !important;
}

.tennis-filter-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: 0.25rem !important;
    padding-top: 0.25rem !important;
}

.tennis-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: var(--radius) !important;
    font-size: 0.75rem !important;
    font-weight: var(--font-medium) !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    border: 1px solid transparent !important;
    height: 2rem !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.tennis-btn i {
    font-size: 0.75rem !important;
    line-height: 1 !important;
}

.tennis-btn .btn-text {
    display: none;
}

.tennis-btn-primary {
    background-color: var(--tennis-green) !important;
    color: var(--white) !important;
    min-width: 2.5rem !important;
    padding: 0.3rem !important;
}

.tennis-btn-primary:hover {
    background-color: var(--tennis-green-dark) !important;
    transform: none !important;
}

.tennis-btn-secondary {
    background-color: var(--white) !important;
    color: var(--gray-700) !important;
    border-color: var(--gray-300) !important;
    min-width: 2rem !important;
    padding: 0.3rem !important;
}

.tennis-btn-secondary:hover {
    background-color: var(--gray-50) !important;
    transform: none !important;
}

/* Responsive Adjustments */
@media (min-width: 768px) {
    .tennis-filters-grid {
        grid-template-columns: 2fr repeat(3, 1fr) auto !important;
        gap: 0.75rem !important;
    }

    .tennis-filter-group.search-group {
        grid-column: auto !important;
        margin-bottom: 0 !important;
    }

    .tennis-btn .btn-text {
        display: inline !important;
    }

    .tennis-btn-primary {
        min-width: auto !important;
        padding: 0.3rem 0.75rem !important;
    }

    .tennis-btn-secondary {
        min-width: auto !important;
        padding: 0.3rem 0.75rem !important;
    }
}

@media (max-width: 767px) {
    .tennis-filters-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .tennis-filter-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 480px) {
    .tennis-filters-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--tennis-green-light) 100%);
    color: var(--gray-800);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tennis Court Background Pattern */
.tennis-court-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='60' viewBox='0 0 100 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234CAF50' fill-opacity='1'%3E%3Crect x='40' y='20' width='20' height='20'/%3E%3Crect x='0' y='0' width='20' height='20'/%3E%3Crect x='80' y='0' width='20' height='20'/%3E%3Crect x='0' y='40' width='20' height='20'/%3E%3Crect x='80' y='40' width='20' height='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Container */
.tennis-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

@media (max-width: 768px) {
    .tennis-container {
        padding: 0 var(--space-4);
    }
}

/* Tennis Tournament Wrapper - Medium Size */
.tennis-tournament {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Header Styles */
.tennis-header {
    background: linear-gradient(135deg, var(--tennis-green) 0%, var(--tennis-green-dark) 100%) !important;
    color: white !important;
    padding: var(--space-20) 0 var(--space-16) 0 !important;
    margin-bottom: var(--space-12) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-xl) !important;
}

.tennis-header::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 40% !important;
    height: 200% !important;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 7.5V9M15 9.5V12L21 11V9H15M15 12V16L21 15.5V13.5L15 14M15 16L9 15.5V13.5L15 14V16M9 13.5V11L15 11.5V13.5L9 13.5M9 11L3 10.5V12.5L9 12V11M3 12.5V16.5L9 16V14L3 13.5V12.5M9 16V18.5L15 18V16H9Z' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E") center/80px repeat !important;
    transform: rotate(-15deg) !important;
}

.tennis-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--court-orange), var(--tennis-green-light)) !important;
}

.tennis-header-content {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-8) !important;
}

.tennis-header-icon {
    width: 100px !important;
    height: 100px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 3px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 3rem !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: var(--shadow-lg) !important;
    flex-shrink: 0 !important;
}

.tennis-header-text {
    flex: 1 !important;
}

.tennis-header-text h1 {
    font-size: 2rem !important;
    font-weight: var(--font-extrabold) !important;
    margin-bottom: var(--space-3) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}

.tennis-header-text p {
    font-size: 1rem !important;
    opacity: 0.95 !important;
    font-weight: var(--font-normal) !important;
    line-height: 1.4 !important;
    max-width: 600px !important;
}

/* Card System */
.tennis-card {
    background: white !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
    margin-bottom: var(--space-6) !important;
    overflow: hidden !important;
    border: 1px solid var(--gray-200) !important;
    transition: all var(--transition-slow) !important;
    position: relative !important;
}


.tennis-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--tennis-green-light), transparent) !important;
}

.tennis-card-header {
    padding: var(--space-6) !important;
    border-bottom: 1px solid var(--gray-200) !important;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--tennis-green-ultra-light) 100%) !important;
    position: relative !important;
}

.tennis-card-title {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    font-size: 1.125rem !important;
    font-weight: var(--font-bold) !important;
    color: var(--gray-900) !important;
    margin: 0 !important;
}

.tennis-card-title i {
    color: var(--tennis-green) !important;
    font-size: 1.25rem !important;
    width: 24px !important;
    text-align: center !important;
}

.tennis-card-body {
    padding: var(--space-6) !important;
    position: relative !important;
}

.tennis-card-footer {
    padding: var(--space-6) !important;
    border-top: 1px solid var(--gray-200) !important;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--tennis-green-ultra-light) 100%) !important;
}

/* Tournament Card Specific */
.tournament-card {
    position: relative !important;
    overflow: hidden !important;
    animation: fadeInUp 0.6s ease forwards !important;
}

.tournament-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--tennis-green), var(--court-orange)) !important;
}

.tournament-card:nth-child(even) {
    animation-delay: 0.1s !important;
}

.tournament-card:nth-child(3n) {
    animation-delay: 0.2s !important;
}

/* Grid Layouts */
.tennis-grid {
    display: grid !important;
    gap: var(--space-8) !important;
}

.tennis-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

.tennis-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
}

.tennis-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

/* Filter System */
.tennis-filters {
    display: flex !important;
    gap: var(--space-4) !important;
    margin-bottom: var(--space-6) !important;
    flex-wrap: wrap !important;
}

.tennis-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-1) !important;
}

.tennis-filter-label {
    color: var(--gray-700) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Form Elements */
.tennis-input,
.tennis-select {
    border: 2px solid var(--gray-300) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition) !important;
    background: white !important;
    font-family: inherit !important;
    min-height: 40px !important;
    box-shadow: var(--shadow-sm) !important;
}

.tennis-input:focus,
.tennis-select:focus {
    outline: none !important;
    border-color: var(--tennis-green) !important;
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.15), var(--shadow) !important;
    transform: translateY(-1px) !important;
}

.tennis-input:hover,
.tennis-select:hover {
    border-color: var(--gray-400) !important;
    box-shadow: var(--shadow) !important;
}

.tennis-input-group {
    position: relative !important;
}

.tennis-input-icon {
    position: absolute !important;
    left: var(--space-4) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--tennis-green) !important;
    z-index: 1 !important;
    font-size: 1.1rem !important;
}

.tennis-input-group .tennis-input {
    padding-left: 3rem !important;
}

/* Button System */
.tennis-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    padding: var(--space-3) var(--space-6) !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-lg) !important;
    font-weight: var(--font-semibold) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
    min-height: 40px !important;
    justify-content: center !important;
}

.tennis-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left var(--transition-slow) !important;
}

.tennis-btn:hover::before {
    left: 100% !important;
}

.tennis-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.tennis-btn:disabled::before {
    display: none !important;
}

.tennis-btn i {
    font-size: 1rem !important;
}

.tennis-btn-primary {
    background: linear-gradient(135deg, var(--tennis-green) 0%, var(--tennis-green-dark) 100%) !important;
    color: white !important;
    border-color: var(--tennis-green-dark) !important;
    box-shadow: var(--shadow) !important;
}

.tennis-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--tennis-green-dark) 0%, #1B5E20 100%) !important;
    border-color: #1B5E20 !important;
}

.tennis-btn-secondary {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-300) !important;
}

.tennis-btn-secondary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%) !important;
    border-color: var(--gray-400) !important;
}

.tennis-btn-info {
    background: linear-gradient(135deg, var(--info) 0%, #1976D2 100%) !important;
    color: white !important;
    border-color: #1976D2 !important;
    box-shadow: var(--shadow) !important;
}

.tennis-btn-info:hover:not(:disabled) {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%) !important;
    border-color: #1565C0 !important;
}

.tennis-btn-warning {
    background: linear-gradient(135deg, var(--warning) 0%, #F57C00 100%) !important;
    color: white !important;
    border-color: #F57C00 !important;
    box-shadow: var(--shadow) !important;
}

.tennis-btn-warning:hover:not(:disabled) {
    background: linear-gradient(135deg, #F57C00 0%, #EF6C00 100%) !important;
    border-color: #EF6C00 !important;
}

.tennis-btn-error {
    background: linear-gradient(135deg, var(--error) 0%, #D32F2F 100%) !important;
    color: white !important;
    border-color: #D32F2F !important;
    box-shadow: var(--shadow) !important;
}

.tennis-btn-error:hover:not(:disabled) {
    background: linear-gradient(135deg, #D32F2F 0%, #C62828 100%) !important;
    border-color: #C62828 !important;
}

.tennis-btn-sm {
    padding: var(--space-2) var(--space-5) !important;
    font-size: 0.8rem !important;
    min-height: 36px !important;
    gap: var(--space-2) !important;
}

.tennis-btn-lg {
    padding: var(--space-5) var(--space-10) !important;
    font-size: 1.1rem !important;
    min-height: 56px !important;
    gap: var(--space-4) !important;
}

/* Badge System */
.tennis-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-1) !important;
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.75rem !important;
    font-weight: var(--font-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    border: 1px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
}

.tennis-badge::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transition: left 0.5s ease !important;
}

.tennis-badge:hover::before {
    left: 100% !important;
}

.tennis-badge-success {
    background: linear-gradient(135deg, var(--tennis-green-light) 0%, var(--tennis-green-ultra-light) 100%) !important;
    color: var(--tennis-green-dark) !important;
    border-color: var(--tennis-green) !important;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2) !important;
}

.tennis-badge-warning {
    background: linear-gradient(135deg, var(--court-orange-light) 0%, #FFF3E0 100%) !important;
    color: var(--court-orange-dark) !important;
    border-color: var(--court-orange) !important;
    box-shadow: 0 2px 4px rgba(255, 111, 0, 0.2) !important;
}

.tennis-badge-primary {
    background: linear-gradient(135deg, #E3F2FD 0%, #F3E5F5 100%) !important;
    color: #1565C0 !important;
    border-color: #2196F3 !important;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2) !important;
}

.tennis-badge-gray {
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-100) 100%) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-400) !important;
    box-shadow: 0 2px 4px rgba(117, 117, 117, 0.2) !important;
}

.tennis-badge-error {
    background: linear-gradient(135deg, #FFEBEE 0%, #FCE4EC 100%) !important;
    color: #C62828 !important;
    border-color: #F44336 !important;
    box-shadow: 0 2px 4px rgba(244, 67, 54, 0.2) !important;
}

.tennis-badge-info {
    background: linear-gradient(135deg, var(--tennis-green-ultra-light) 0%, #E8F5E8 100%) !important;
    color: var(--tennis-green-dark) !important;
    border-color: var(--tennis-green-light) !important;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.15) !important;
}

.tennis-badge-secondary {
    background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%) !important;
    color: #6A1B9A !important;
    border-color: #9C27B0 !important;
    box-shadow: 0 2px 4px rgba(156, 39, 176, 0.2) !important;
}

.tennis-badge-outline {
    background: transparent !important;
    color: var(--gray-700) !important;
    border: 1.5px solid var(--gray-300) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.tennis-badge-outline:hover {
    border-color: var(--tennis-green) !important;
    color: var(--tennis-green-dark) !important;
}

/* Compact badge styling for tournament lists */
.tennis-tournament-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
    margin-top: var(--space-3) !important;
    align-items: center !important;
}

.tennis-tournament-badges .tennis-badge {
    font-size: 0.7rem !important;
    padding: var(--space-1) var(--space-3) !important;
    transition: all 0.2s ease !important;
}

.tennis-tournament-badges .tennis-badge small {
    font-size: 0.6rem !important;
    opacity: 0.8 !important;
    margin-left: var(--space-1) !important;
}

/* Enhanced styling for multiple subcategory badges */
.tennis-tournament-badges .tennis-badge-outline {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1.5px solid var(--gray-300) !important;
    color: var(--gray-700) !important;
    font-weight: 600 !important;
    backdrop-filter: blur(4px) !important;
    transition: all 0.3s ease !important;
}

.tennis-tournament-badges .tennis-badge-outline:hover {
    border-color: var(--tennis-green) !important;
    color: var(--tennis-green-dark) !important;
    background: rgba(76, 175, 80, 0.1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.2) !important;
}

/* Subcategory badge grouping */
.tennis-tournament-badges .tennis-badge-outline+.tennis-badge-outline {
    margin-left: -2px !important;
    border-left: none !important;
    border-radius: var(--radius-full) !important;
}

.tennis-tournament-badges .tennis-badge-outline:first-of-type {
    border-radius: var(--radius-full) !important;
}

.tennis-tournament-badges .tennis-badge-outline:last-of-type {
    border-radius: var(--radius-full) !important;
}

.tennis-tournament-badges .tennis-badge-outline:only-of-type {
    border-radius: var(--radius-full) !important;
}

/* Subcategory count indicator */
.subcategory-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    background: var(--tennis-green) !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 0.6rem !important;
    font-weight: bold !important;
    margin-left: var(--space-1) !important;
}

/* Responsive subcategory badges */
@media (max-width: 768px) {
    .tennis-tournament-badges {
        gap: var(--space-1) !important;
    }

    .tennis-tournament-badges .tennis-badge {
        font-size: 0.65rem !important;
        padding: var(--space-1) var(--space-2) !important;
    }

    /* Stack subcategory badges on mobile */
    .tennis-tournament-badges .tennis-badge-outline+.tennis-badge-outline {
        margin-left: 0 !important;
        border-left: 1.5px solid var(--gray-300) !important;
        border-radius: var(--radius-full) !important;
        margin-top: var(--space-1) !important;
    }
}

/* Medium tournament card styling */
.tennis-tournament-item {
    margin-bottom: var(--space-5) !important;
}

/* This style is overridden by the more specific one below */

.tennis-tournament-title h3 {
    margin: 0 0 var(--space-2) 0 !important;
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
    font-weight: var(--font-semibold) !important;
}

.tennis-tournament-description {
    margin: 0 !important;
    color: var(--gray-600) !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

/* Compact filter styling */
.tennis-card-header {
    padding: var(--space-6) !important;
}

.tennis-card-body {
    padding: var(--space-6) !important;
}

.tennis-filters-form .tennis-btn {
    padding: var(--space-3) var(--space-6) !important;
    font-size: 0.9rem !important;
}

/* Tournament list grid - medium spacing */
.tennis-tournament-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: var(--space-6) !important;
}

/* Meta information medium */
.tennis-meta-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: var(--space-4) !important;
}

.tennis-meta-item {
    padding: var(--space-4) !important;
}

.tennis-meta-label {
    font-size: 0.65rem !important;
    font-weight: var(--font-semibold) !important;
    color: var(--gray-600) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: var(--space-1) !important;
}

.tennis-meta-value {
    font-size: 0.8rem !important;
    font-weight: var(--font-bold) !important;
    color: var(--gray-900) !important;
}

/* Results info medium */
.tennis-results-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    font-size: 0.875rem !important;
}

.tennis-results-count {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    font-weight: var(--font-semibold) !important;
    color: var(--gray-700) !important;
}

.pagination-info {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    font-size: 0.8rem !important;
    color: var(--gray-600) !important;
}

/* Empty state medium */
.tennis-empty-state {
    text-align: center !important;
    padding: var(--space-12) var(--space-6) !important;
}

.tennis-empty-title {
    font-size: 1.5rem !important;
    margin-bottom: var(--space-4) !important;
}

.tennis-empty-description {
    font-size: 1rem !important;
    color: var(--gray-600) !important;
}

.tennis-meta-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
}

/* Compact Tournament Images */
.tennis-tournament-image-compact {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    border: 1px solid var(--gray-200) !important;
    background: var(--gray-100) !important;
}

.tournament-logo-compact,
.tournament-banner-compact {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.tournament-logo-compact {
    object-fit: contain !important;
    padding: 2px !important;
}

/* Update tournament header layout for images */
.tennis-tournament-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
}

.tennis-tournament-title {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Meta Information */
.tennis-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: var(--space-5) !important;
    margin-bottom: var(--space-8) !important;
}

.tennis-meta-item {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    padding: var(--space-5) !important;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--tennis-green-ultra-light) 100%) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--gray-200) !important;
    transition: all var(--transition) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tennis-meta-item:hover {
    border-color: var(--tennis-green-light) !important;
}

.tennis-meta-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: linear-gradient(180deg, var(--tennis-green), var(--court-orange)) !important;
}

.tennis-meta-icon {
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, var(--tennis-green) 0%, var(--tennis-green-dark) 100%) !important;
    border-radius: var(--radius-xl) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
    box-shadow: var(--shadow) !important;
    position: relative !important;
}

.tennis-meta-icon::after {
    content: '' !important;
    position: absolute !important;
    inset: 2px !important;
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent) !important;
}

.tennis-meta-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.tennis-meta-label {
    display: block !important;
    font-size: 0.7rem !important;
    font-weight: var(--font-bold) !important;
    color: var(--gray-600) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: var(--space-1) !important;
}

.tennis-meta-value {
    font-weight: var(--font-bold) !important;
    color: var(--gray-900) !important;
    word-break: break-word !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
}

/* Progress Bar */
.tennis-progress-container {
    margin: var(--space-6) auto !important;
}

.tennis-progress-label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: var(--space-2) !important;
    font-size: 0.875rem !important;
    font-weight: var(--font-semibold) !important;
    color: var(--gray-700) !important;
}

.progress-count {
    color: var(--tennis-green) !important;
    font-weight: var(--font-bold) !important;
    font-size: 0.9rem !important;
}

.tennis-progress-bar {
    width: 100% !important;
    height: 8px !important;
    background: var(--gray-200) !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
}

.tennis-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--tennis-green), var(--court-orange)) !important;
    transition: width var(--transition-slow) !important;
}

/* Tournament List Styles */
.tennis-tournament-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-6) !important;
}

.tennis-tournament-item {
    background: white !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden !important;
    border: 1px solid var(--gray-200) !important;
    transition: all var(--transition) !important;
    position: relative !important;
}

.tennis-tournament-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--tennis-green), var(--court-orange)) !important;
}


.tennis-tournament-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: var(--space-4) !important;
    padding: var(--space-6) !important;
    border-bottom: 1px solid var(--gray-200) !important;
}

.tennis-tournament-title {
    flex: 1 !important;
}

.tennis-tournament-title h3 {
    margin: 0 0 var(--space-2) 0 !important;
    font-size: 1.5rem !important;
    font-weight: var(--font-bold) !important;
}

.tennis-tournament-title a {
    color: var(--gray-900) !important;
    text-decoration: none !important;
    transition: color var(--transition) !important;
}

.tennis-tournament-title a:hover {
    color: var(--tennis-green) !important;
}

.tennis-tournament-description {
    color: var(--gray-600) !important;
    line-height: 1.5 !important;
}

.tennis-tournament-body {
    padding: var(--space-6) !important;
}

.tennis-tournament-badges {
    display: flex !important;
    gap: var(--space-2) !important;
    flex-wrap: wrap !important;
    margin-bottom: var(--space-6) !important;
}

.tennis-tournament-actions {
    display: flex !important;
    gap: var(--space-3) !important;
    flex-wrap: wrap !important;
}

/* Empty State */
.tennis-empty-state {
    text-align: center !important;
    padding: var(--space-20) var(--space-8) !important;
    background: white !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow) !important;
}

.tennis-empty-icon {
    font-size: 4rem !important;
    margin-bottom: var(--space-4) !important;
    opacity: 0.5 !important;
}

.tennis-empty-title {
    font-size: 1.5rem !important;
    font-weight: var(--font-bold) !important;
    margin-bottom: var(--space-4) !important;
    color: var(--gray-900) !important;
}

.tennis-empty-description {
    color: var(--gray-600) !important;
    margin-bottom: var(--space-8) !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.6 !important;
}

/* Pagination */
.tennis-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    flex-wrap: wrap !important;
    padding: var(--space-6) !important;
}

.tennis-pagination a,
.tennis-pagination span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 var(--space-3) !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    font-weight: var(--font-medium) !important;
    transition: all var(--transition) !important;
}

.tennis-pagination a {
    background: white !important;
    color: var(--gray-700) !important;
    border: 1px solid var(--gray-300) !important;
}

.tennis-pagination a:hover {
    background: var(--tennis-green) !important;
    color: white !important;
    border-color: var(--tennis-green) !important;
}

.tennis-pagination .current {
    background: var(--tennis-green) !important;
    color: white !important;
    border: 1px solid var(--tennis-green) !important;
}

/* Bracket Styles */
.tennis-bracket {
    overflow-x: auto !important;
    padding: var(--space-6) !important;
}

.tennis-bracket-rounds {
    display: flex !important;
    gap: var(--space-8) !important;
    min-width: max-content !important;
}

.tennis-bracket-round {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4) !important;
    min-width: 250px !important;
}

.tennis-bracket-match {
    background: white !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
    border: 1px solid var(--gray-200) !important;
    overflow: hidden !important;
    transition: all var(--transition) !important;
}


.tennis-bracket-players {
    padding: var(--space-4) !important;
}

.tennis-bracket-player {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: var(--space-2) 0 !important;
    border-bottom: 1px solid var(--gray-200) !important;
}

.tennis-bracket-player:last-child {
    border-bottom: none !important;
}

.tennis-bracket-player.winner {
    font-weight: var(--font-bold) !important;
    color: var(--tennis-green-dark) !important;
}

.tennis-bracket-player-name {
    flex: 1 !important;
}

.tennis-bracket-player-score {
    font-weight: var(--font-bold) !important;
    margin-left: var(--space-2) !important;
}

/* Table Styles */
.tennis-table-container {
    overflow-x: auto !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--gray-200) !important;
}

.tennis-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: white !important;
}

.tennis-table th,
.tennis-table td {
    padding: var(--space-4) !important;
    text-align: left !important;
    border-bottom: 1px solid var(--gray-200) !important;
}

.tennis-table th {
    background: var(--gray-50) !important;
    font-weight: var(--font-semibold) !important;
    color: var(--gray-900) !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.tennis-table tr:hover {
    background: var(--gray-50) !important;
}

.tennis-table tr:last-child td {
    border-bottom: none !important;
}

/* Results Info */
.tennis-results-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: var(--space-4) !important;
    margin-bottom: var(--space-6) !important;
}

.tennis-results-count {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    font-weight: var(--font-semibold) !important;
    color: var(--gray-800) !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .tennis-meta-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        gap: var(--space-4) !important;
    }

    .tennis-grid-3 {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .tennis-header {
        padding: var(--space-16) 0 var(--space-12) 0 !important;
        margin-bottom: var(--space-8) !important;
    }

    .tennis-header-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--space-6) !important;
    }

    .tennis-header-icon {
        width: 80px !important;
        height: 80px !important;
        font-size: 2.5rem !important;
    }

    .tennis-header-text h1 {
        font-size: 1.75rem !important;
    }

    .tennis-header-text p {
        font-size: 0.875rem !important;
    }

    /* .tennis-filters { */
    /* grid-template-columns: 1fr !important;
        gap: var(--space-3) !important; */
    /* } */

    .tennis-tournament-list {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    .tennis-grid-2,
    .tennis-grid-3,
    .tennis-grid-4 {
        grid-template-columns: 1fr !important;
    }

    .tennis-tournament-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-4) !important;
    }

    .tennis-meta-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    .tennis-meta-item {
        padding: var(--space-4) !important;
    }

    .tennis-meta-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }

    .tennis-tournament-actions {
        flex-direction: column !important;
        gap: var(--space-3) !important;
    }

    .tennis-tournament-actions .tennis-btn {
        justify-content: center !important;
        width: 100% !important;
    }

    .tennis-bracket-rounds {
        flex-direction: column !important;
        gap: var(--space-6) !important;
    }

    .tennis-bracket-round {
        min-width: auto !important;
    }

    .tennis-results-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-3) !important;
    }

    .tennis-card-body,
    .tennis-card-header,
    .tennis-card-footer {
        padding: var(--space-5) !important;
    }
}

@media (max-width: 480px) {
    .tennis-container {
        padding: 0 var(--space-3) !important;
    }

    .tennis-header {
        padding: var(--space-12) 0 var(--space-8) 0 !important;
        margin-bottom: var(--space-6) !important;
    }

    .tennis-header-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 2rem !important;
    }

    .tennis-header-text h1 {
        font-size: 1.5rem !important;
    }

    .tennis-header-text p {
        font-size: 0.875rem !important;
    }

    .tennis-card-body,
    .tennis-card-header,
    .tennis-card-footer {
        padding: var(--space-4) !important;
    }

    .tennis-card {
        margin-bottom: var(--space-6) !important;
        border-radius: var(--radius-xl) !important;
    }

    .tennis-empty-state {
        padding: var(--space-8) var(--space-4) !important;
    }

    .tennis-meta-item {
        padding: var(--space-3) !important;
        gap: var(--space-3) !important;
    }

    .tennis-meta-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }

    .tennis-btn {
        padding: var(--space-3) var(--space-6) !important;
        min-height: 44px !important;
        font-size: 0.85rem !important;
    }

    .tennis-btn-lg {
        padding: var(--space-4) var(--space-8) !important;
        min-height: 52px !important;
        font-size: 1rem !important;
    }

    .tennis-input,
    .tennis-select {
        min-height: 44px !important;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(30px) !important;
    }

    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@keyframes slideInRight {
    from {
        opacity: 0 !important;
        transform: translateX(30px) !important;
    }

    to {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1 !important;
    }

    50% {
        opacity: 0.5 !important;
    }
}

/* Loading States */
.tennis-loading {
    animation: pulse 2s infinite !important;
}

/* Focus States for Accessibility */
.tennis-btn:focus,
.tennis-input:focus,
.tennis-select:focus {
    outline: 2px solid var(--tennis-green) !important;
    outline-offset: 2px !important;
}

/* Print Styles */
@media print {

    .tennis-header,
    .tennis-filters,
    .tennis-pagination,
    .tennis-tournament-actions {
        display: none !important;
    }

    .tennis-card {
        box-shadow: none !important;
        border: 1px solid var(--gray-300) !important;
        break-inside: avoid !important;
    }
}

/* Tournament Seeding Styles */
.tournament-seeding-info {
    margin: 20px 0 !important;
    padding: 20px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-radius: 8px !important;
    border-left: 4px solid #2271b1 !important;
}

.tournament-seeding-info h3 {
    margin: 0 0 12px 0 !important;
    color: #2271b1 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.seeding-meta {
    margin: 0 0 16px 0 !important;
    color: #646970 !important;
}

.seeded-players-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.seeded-player-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    background: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}


.seeded-player-item.more-players {
    background: #f8f9fa !important;
    border: 2px dashed #dee2e6 !important;
    color: #6c757d !important;
}


.player-name {
    font-weight: 500 !important;
    color: #1d2327 !important;
    flex: 1 !important;
}

.seeded-player-item.more-players .player-name {
    color: #6c757d !important;
    font-style: italic !important;
}

/* Player Seed Badges in Bracket */
.player-seed-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background: linear-gradient(135deg, #2271b1 0%, #1e5a8a 100%) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.tennis-bracket-player {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.tennis-bracket-player.winner .player-seed-badge {
    background: linear-gradient(135deg, #00a32a 0%, #007a1f 100%) !important;
    box-shadow: 0 2px 4px rgba(0, 163, 42, 0.3) !important;
}

/* Enhanced bracket player styling */
.tennis-bracket-player-name {
    flex: 1 !important;
    min-width: 0 !important;
}

.tennis-bracket-player-score {
    margin-left: auto !important;
    font-weight: 600 !important;
    color: #2271b1 !important;
}

.tennis-bracket-player.winner .tennis-bracket-player-score {
    color: #00a32a !important;
}

/* Seeding indicators for different seed ranges */
.player-seed-badge[data-seed="1"],
.player-seed-badge[data-seed="2"] {
    background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%) !important;
}

.player-seed-badge[data-seed="3"],
.player-seed-badge[data-seed="4"] {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
}

.player-seed-badge[data-seed="5"],
.player-seed-badge[data-seed="6"],
.player-seed-badge[data-seed="7"],
.player-seed-badge[data-seed="8"] {
    background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%) !important;
}

/**
 * Tournament Banner & Logo Styles
 * Clean, modern styling for tournament images
 */

/* Tournament Banner Container */
.tournament-banner-container {
    width: 100% !important;
    margin-bottom: var(--space-8, 2rem) !important;
    border-radius: var(--radius-lg, 1rem) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)) !important;
}

/* Main Tournament Banner */
.tournament-banner {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: var(--radius-lg, 1rem) !important;
    background: linear-gradient(135deg, var(--tennis-green, #4CAF50) 0%, var(--tennis-green-dark, #2E7D32) 100%) !important;
}

.tournament-banner-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform var(--transition, 200ms ease) !important;
}

.tournament-banner:hover .tournament-banner-image {
    transform: scale(1.05) !important;
}

/* Banner Overlay */
.tournament-banner-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.6) 100%) !important;
    z-index: 1 !important;
}

/* Banner Content */
.tournament-banner-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: var(--space-8, 2rem) !important;
    color: white !important;
    z-index: 2 !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3)) !important;
}

.tournament-logo-container {
    margin-bottom: var(--space-4, 1rem) !important;
}

.tournament-logo {
    border-radius: var(--radius, 0.5rem) !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: var(--shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1)) !important;
    object-fit: cover !important;
    background: white !important;
    padding: var(--space-2, 0.5rem) !important;
}

.tournament-banner-title {
    font-size: 2.5rem !important;
    font-weight: var(--font-bold, 700) !important;
    margin: 0 0 var(--space-2, 0.5rem) 0 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.2 !important;
}

.tournament-banner-description {
    font-size: 1.125rem !important;
    margin: 0 !important;
    opacity: 0.95 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.4 !important;
}

/* Logo Only Display */
.tournament-logo-only {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-6, 1.5rem) !important;
    padding: var(--space-8, 2rem) !important;
    background: linear-gradient(135deg, var(--gray-50, #FAFAFA) 0%, var(--tennis-green-ultra-light, #E8F5E8) 100%) !important;
    border-radius: var(--radius-lg, 1rem) !important;
    border: 1px solid var(--gray-200, #EEEEEE) !important;
}

.tournament-logo-standalone {
    border-radius: var(--radius, 0.5rem) !important;
    border: 2px solid var(--gray-300, #E0E0E0) !important;
    box-shadow: var(--shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1)) !important;
    object-fit: cover !important;
    background: white !important;
    padding: var(--space-2, 0.5rem) !important;
    flex-shrink: 0 !important;
}

.tournament-logo-text h1 {
    font-size: 2rem !important;
    font-weight: var(--font-bold, 700) !important;
    margin: 0 0 var(--space-2, 0.5rem) 0 !important;
    color: var(--gray-900, #212121) !important;
}

.tournament-logo-text p {
    font-size: 1rem !important;
    margin: 0 !important;
    color: var(--gray-600, #757575) !important;
    line-height: 1.5 !important;
}

/* Fallback Header */
.tournament-header-fallback {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-6, 1.5rem) !important;
    padding: var(--space-8, 2rem) !important;
    background: linear-gradient(135deg, var(--tennis-green, #4CAF50) 0%, var(--tennis-green-dark, #2E7D32) 100%) !important;
    color: white !important;
    border-radius: var(--radius-lg, 1rem) !important;
}

.tournament-header-icon {
    font-size: 3rem !important;
    opacity: 0.9 !important;
}

.tournament-header-text h1 {
    font-size: 2rem !important;
    font-weight: var(--font-bold, 700) !important;
    margin: 0 0 var(--space-2, 0.5rem) 0 !important;
}

.tournament-header-text p {
    font-size: 1rem !important;
    margin: 0 !important;
    opacity: 0.9 !important;
}

/* Tournament Card Images */
.tournament-card-image-container {
    margin-bottom: var(--space-4, 1rem) !important;
    border-radius: var(--radius, 0.5rem) !important;
    overflow: hidden !important;
}

.tournament-card-image {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: var(--radius, 0.5rem) !important;
    background: var(--gray-100, #F5F5F5) !important;
}

.tournament-banner-thumb,
.tournament-logo-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform var(--transition, 200ms ease) !important;
}

.tournament-logo-thumb {
    object-fit: contain !important;
    padding: var(--space-4, 1rem) !important;
    background: white !important;
}

.tournament-card-image:hover .tournament-banner-thumb,
.tournament-card-image:hover .tournament-logo-thumb {
    transform: scale(1.05) !important;
}

.tournament-card-image-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.05) 50%,
            rgba(0, 0, 0, 0.2) 100%) !important;
    opacity: 0 !important;
    transition: opacity var(--transition, 200ms ease) !important;
}

.tournament-card-image:hover .tournament-card-image-overlay {
    opacity: 1 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tournament-banner-content {
        padding: var(--space-6, 1.5rem) !important;
    }

    .tournament-banner-title {
        font-size: 1.875rem !important;
    }

    .tournament-banner-description {
        font-size: 1rem !important;
    }

    .tournament-logo-only {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--space-4, 1rem) !important;
    }

    .tournament-logo-text h1 {
        font-size: 1.5rem !important;
    }

    .tournament-header-fallback {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--space-4, 1rem) !important;
    }

    .tournament-header-text h1 {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .tournament-banner-content {
        padding: var(--space-4, 1rem) !important;
    }

    .tournament-banner-title {
        font-size: 1.5rem !important;
    }

    .tournament-banner-description {
        font-size: 0.875rem !important;
    }

    .tournament-logo-only,
    .tournament-header-fallback {
        padding: var(--space-6, 1.5rem) !important;
    }
}

/* Integration with existing tennis-modern.css */
.tennis-tournament .tournament-banner-container {
    margin-bottom: var(--space-8, 2rem) !important;
}

.tennis-card .tournament-card-image-container {
    margin: calc(var(--space-4, 1rem) * -1) calc(var(--space-4, 1rem) * -1) var(--space-4, 1rem) !important;
    border-radius: 0 !important;
}

.tennis-card .tournament-card-image {
    border-radius: 0 !important;
}

/* Accessibility */
.tournament-logo,
.tournament-logo-standalone,
.tournament-banner-thumb,
.tournament-logo-thumb {
    transition: transform var(--transition, 200ms ease), box-shadow var(--transition, 200ms ease) !important;
}

.tournament-logo:focus,
.tournament-logo-standalone:focus,
.tournament-banner-thumb:focus,
.tournament-logo-thumb:focus {
    outline: 2px solid var(--tennis-green, #4CAF50) !important;
    outline-offset: 2px !important;
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)) !important;
}

/* Loading states */
.tournament-banner-image[loading="lazy"],
.tournament-logo[loading="lazy"],
.tournament-logo-standalone[loading="lazy"],
.tournament-banner-thumb[loading="lazy"],
.tournament-logo-thumb[loading="lazy"] {
    background: var(--gray-200, #EEEEEE) !important;
}

/* Mobile responsive seeding */
@media (max-width: 768px) {
    .seeded-players-grid {
        grid-template-columns: 1fr !important;
    }

    .tournament-seeding-info {
        padding: 16px !important;
    }

    .player-seed-badge {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        margin-right: 6px !important;
    }

}

/* Google Maps Link Styling */
.google-maps-link {
    color: #1e73be !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.google-maps-link:hover {
    color: #135e96 !important;
    text-decoration: underline !important;
}

.google-maps-link i {
    margin-right: 4px !important;
    color: #1e73be !important;
}

.venue-maps-link {
    margin-top: 4px !important;
    display: inline-block !important;
}

.venue-maps-link a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 8px !important;
    background: rgba(30, 115, 190, 0.1) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
}

.venue-maps-link a:hover {
    background: rgba(30, 115, 190, 0.15) !important;
    text-decoration: none !important;
}

/* Venue Map Styling */
.venue-map-container {
    grid-column: 1 / -1 !important;
    /* Span full width */
    margin-top: 16px !important;
}

.venue-map-wrapper {
    margin-top: 8px !important;
    width: 100% !important;
}

.venue-map-iframe-container {
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 12px !important;
}

.venue-map-iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 8px !important;
}

.venue-map-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.venue-map-actions .tennis-btn-outline {
    border: 1px solid #1e73be !important;
    color: #1e73be !important;
    background: transparent !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.venue-map-actions .tennis-btn-outline:hover {
    background: #1e73be !important;
    color: white !important;
    text-decoration: none !important;
}

.venue-map-actions .tennis-btn-outline i {
    margin-right: 4px !important;
}

/* Mobile responsive for venue map */
@media (max-width: 768px) {
    .venue-map-iframe-container {
        height: 200px !important;
    }

    .venue-map-container .tennis-meta-content {
        padding-left: 8px !important;
    }

    .venue-map-wrapper {
        margin-top: 12px !important;
    }
}

/* Loading state for map */
.venue-map-iframe-container::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    z-index: 1 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.venue-map-iframe-container.loading::before {
    opacity: 1 !important;
}

.venue-map-iframe-container.loading::after {
    content: 'Loading map...' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #6c757d !important;
    font-size: 14px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Venue Map Preview for Tournaments List */
.venue-map-preview {
    margin-top: 8px !important;
    width: 100% !important;
}

.venue-map-preview-container {
    position: relative !important;
    width: 100% !important;
    height: 150px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 8px !important;
}

.venue-map-preview-iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 6px !important;
}

/* Loading state for map preview */
.venue-map-preview-container::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    z-index: 1 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.venue-map-preview-container.loading::before {
    opacity: 1 !important;
}

.venue-map-preview-container.loading::after {
    content: 'Loading map...' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #6c757d !important;
    font-size: 12px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Mobile responsive for venue map preview */
@media (max-width: 768px) {
    .venue-map-preview-container {
        height: 120px !important;
    }

    .venue-map-preview {
        margin-top: 6px !important;
    }
}

/* ========================================
   TOURNAMENT BRACKET STYLES
   ======================================== */

.tournament-bracket-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: var(--space-6) !important;
}

.tournament-bracket-header {
    background: var(--white) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-8) !important;
    margin-bottom: var(--space-8) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--gray-200) !important;
}

.tournament-bracket-title h1 {
    color: var(--gray-900) !important;
    font-size: 2rem !important;
    font-weight: var(--font-bold) !important;
    margin-bottom: var(--space-4) !important;
    text-align: center !important;
}

.bracket-filters {
    display: flex !important;
    justify-content: center !important;
    gap: var(--space-4) !important;
    flex-wrap: wrap !important;
    margin-top: var(--space-4) !important;
}

.bracket-filters>span {
    background: var(--tennis-green-light) !important;
    color: var(--tennis-green-dark) !important;
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--radius-full) !important;
    font-weight: var(--font-medium) !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.bracket-round {
    border-bottom: 1px solid var(--gray-200) !important;
}

.bracket-round:last-child {
    border-bottom: none !important;
}

.round-header {
    background: linear-gradient(135deg, var(--tennis-green) 0%, var(--tennis-green-dark) 100%) !important;
    color: var(--white) !important;
    padding: var(--space-4) var(--space-6) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.round-header h3 {
    font-size: 1.25rem !important;
    font-weight: var(--font-semibold) !important;
    margin: 0 !important;
}

.match-count {
    background: rgba(255, 255, 255, 0.2) !important;
    padding: var(--space-1) var(--space-3) !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.875rem !important;
    font-weight: var(--font-medium) !important;
}

/* Round Matches */
.round-matches {
    padding: var(--space-6) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-6) !important;
}

/* Bracket Match */
.bracket-match {
    background: var(--gray-50) !important;
    border: 2px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    transition: all var(--transition) !important;
    position: relative !important;
}

.bracket-match:hover {
    border-color: var(--tennis-green) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

.bracket-match.scheduled {
    border-color: var(--gray-300) !important;
}

.bracket-match.in-progress {
    border-color: var(--warning) !important;
    background: linear-gradient(135deg, var(--white) 0%, #FFF8E1 100%) !important;
}

.bracket-match.completed {
    border-color: var(--success) !important;
    background: linear-gradient(135deg, var(--white) 0%, var(--tennis-green-ultra-light) 100%) !important;
}

.match-header {
    margin-bottom: var(--space-4) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
}

.match-info {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    flex-wrap: wrap !important;
}

.match-number {
    background: var(--tennis-green) !important;
    color: var(--white) !important;
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--radius-full) !important;
    font-weight: var(--font-semibold) !important;
    font-size: 0.875rem !important;
}

.court-name {
    background: var(--court-orange-light) !important;
    color: var(--court-orange-dark) !important;
    padding: var(--space-1) var(--space-3) !important;
    border-radius: var(--radius) !important;
    font-size: 0.875rem !important;
    font-weight: var(--font-medium) !important;
}

.match-time {
    background: var(--gray-100) !important;
    color: var(--gray-700) !important;
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--radius) !important;
    font-size: 0.875rem !important;
    font-weight: var(--font-medium) !important;
}


/* No Matches Found */
.no-matches-found {
    text-align: center !important;
    padding: var(--space-12) !important;
    background: var(--white) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--gray-200) !important;
}

.no-matches-found p {
    color: var(--gray-600) !important;
    font-size: 1.125rem !important;
    font-weight: var(--font-medium) !important;
}

/* Error Messages */
.tennis-error {
    background: var(--error) !important;
    color: var(--white) !important;
    padding: var(--space-4) !important;
    border-radius: var(--radius) !important;
    margin: var(--space-4) 0 !important;
    font-weight: var(--font-medium) !important;
    text-align: center !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tournament-bracket-container {
        padding: var(--space-4) !important;
    }
	
	.draws-filters-grid{
		display:block !important;
	}

    .tournament-bracket-header {
        padding: var(--space-6) !important;
    }

    .tournament-bracket-title h1 {
        font-size: 1.5rem !important;
    }

    .round-header {
        flex-direction: column !important;
        gap: var(--space-2) !important;
        text-align: center !important;
    }

    .match-header {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
    }

    .singles-match,
    .doubles-match {
        flex-direction: column !important;
        gap: var(--space-4) !important;
    }

    .player,
    .team {
        min-width: unset !important;
    }

    .match-vs {
        order: -1 !important;
        align-self: center !important;
    }

    .legend-items {
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--space-3) !important;
    }
}

@media (max-width: 480px) {
    .bracket-filters {
        flex-direction: column !important;
        align-items: center !important;
    }

    .round-matches {
        padding: var(--space-4) !important;
        gap: var(--space-4) !important;
    }

    .bracket-match {
        padding: var(--space-4) !important;
    }
	.draws-filters-grid{
		display:block !important;
	}
}