/**
 * BTFC Matches Template Styles
 * 
 * Styles for match listings, fixtures, and multi-month views
 * Extends base table styles from tables-base.css
 * 
 * RESPONSIVE BREAKPOINTS: Uses standardized values from breakpoints.css
 * - Mobile and smaller: max-width: 768px
 * - Small mobile only: max-width: 480px
 * 
 * @package BTFC_Stats
 */

/* ============================================================================
   SECTION 1: MATCHES TABLE CONTAINER
   ============================================================================
   Description: Container for match tables with overflow handling
   ============================================================================ */

.btfc-matches-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-5);
}

/* Mobile: No horizontal scroll */
@media (max-width: 768px) {
    .btfc-matches-container {
        overflow-x: hidden !important;
    }
}

/* Desktop/Tablet: Keep horizontal scroll for larger tables */
@media (min-width: 769px) {
    .btfc-matches-container {
        overflow-x: auto;
    }
}

/* ============================================================================
   SECTION 2: MULTI-MONTH FIXTURES TABLE
   ============================================================================
   Description: Multi-month fixtures/results view with gradient month headers
   All core classes defined in tables-base.css Section 15B
   This section is intentionally empty - uses shared styles
   ============================================================================ */

/* Note: The following classes are defined in tables-base.css:
   - .btfc-month-header-row
   - .btfc-month-header-text
   - .btfc-match-date
   - .btfc-match-time
   - .btfc-comp-badge / .btfc-comp-badge.cup
   - .btfc-ha-badge / .btfc-ha-badge.home / .btfc-ha-badge.away
   - .btfc-result-score / .btfc-result-score.win/draw/loss/upcoming
   - .btfc-venue-link
*/

/* ============================================================================
   SECTION 3: MATCH TABLE SPECIFIC STYLES
   ============================================================================
   Description: Additional styles specific to match/fixture tables
   All core table and column classes defined in tables-base.css Section 15
   This section is intentionally empty - uses shared styles
   ============================================================================ */

/* Note: The following classes are defined in tables-base.css:
   - .btfc-matches-table
   - .btfc-col-date
   - .btfc-col-comp / .btfc-col-type
   - .btfc-col-ha / .btfc-col-home-away
   - .btfc-col-opponent
   - .btfc-col-venue
   - .btfc-col-attendance
   - .btfc-col-score
   - .btfc-home-away / .btfc-home-away.home / .btfc-home-away.away
   - .btfc-match-type / .btfc-match-type-container
   - .btfc-score / .btfc-score.win/draw/loss/tbc
*/

/* ============================================================================
   SECTION 4: MOBILE-SPECIFIC COMPONENTS
   ============================================================================
   Description: Month filter tags and mobile view elements
   ============================================================================ */

/* Mobile Month Filter */
.btfc-month-filter-mobile {
    display: none;
    margin-bottom: var(--space-5);
}

.btfc-month-filter-header {
    text-align: center;
    margin-bottom: var(--space-4);
}

.btfc-month-filter-header h3 {
    color: var(--color-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}

.btfc-month-filter-header p {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

.btfc-month-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.btfc-month-tag {
    padding: var(--space-2) var(--space-4);
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    color: var(--color-primary);
}

.btfc-month-tag:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.btfc-month-tag.active {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Mobile Month Header */
.btfc-month-header-mobile {
    background: var(--color-gray-50);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
}

.btfc-month-name-mobile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.btfc-month-name-mobile h3 {
    color: var(--color-primary);
    font-family: 'Bebas Neue', sans-serif;
    margin: 0;
    font-size: var(--font-size-xl);
}

.btfc-month-icon-mobile {
    font-size: 1.5rem;
}

/* Desktop/Tablet views hidden on mobile */
.btfc-all-matches-desktop {
    display: block;
}

.btfc-month-content-container {
    display: none;
}

/* Season selector */
.btfc-season-selector {
    margin-bottom: var(--space-5);
}

.btfc-season-form {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
}

.btfc-season-form label {
    font-weight: 600;
    color: var(--color-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: var(--font-size-lg);
    letter-spacing: 0.05em;
}

.btfc-season-form select {
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    font-size: var(--font-size-base);
    background: white;
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
}

/* Season Info Box */
.btfc-season-info-box {
    background: var(--color-gray-50);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    border-radius: 8px;
    border-left: 4px solid var(--color-secondary);
}

/* No matches placeholder */
.btfc-no-matches {
    text-align: center;
    padding: var(--space-10);
    color: var(--color-gray-500);
}

.btfc-month-placeholder {
    text-align: center;
    padding: var(--space-8);
    color: var(--color-gray-500);
}

.btfc-placeholder-icon {
    font-size: 3rem;
    margin-bottom: var(--space-3);
}

/* Matches Summary */
.btfc-matches-summary {
    text-align: center;
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: 8px;
    margin-top: var(--space-5);
}

.btfc-matches-summary p {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--font-size-base);
}

/* ============================================================================
   SECTION 5: RESPONSIVE ADJUSTMENTS
   ============================================================================
   Description: Mobile and tablet specific styles and view switching
   ============================================================================ */

/* Mobile and smaller (768px and below) */
@media (max-width: 768px) {
    /* Show mobile filter, hide desktop view */
    .btfc-month-filter-mobile {
        display: block;
    }
    
    .btfc-all-matches-desktop {
        display: none;
    }
    
    .btfc-month-content-container {
        display: block;
    }
    
    /* Table adjustments */
    .btfc-matches-table th,
    .btfc-matches-table td {
        padding: var(--space-2);
        font-size: var(--font-size-xs);
    }
    
    /* Smaller badges on mobile */
    .btfc-comp-badge,
    .btfc-ha-badge {
        font-size: 0.65rem;
        padding: 3px 6px;
    }
    
    .btfc-result-score {
        font-size: 0.8rem;
        padding: 5px 8px;
    }
}

/* Small mobile only (480px and below) */
@media (max-width: 480px) {
    .btfc-month-header-row td {
        padding: 10px 15px !important;
    }
    
    .btfc-month-header-text {
        font-size: 1rem;
    }
    
    .btfc-match-date {
        font-size: 0.8rem;
    }
    
    .btfc-match-time {
        font-size: 0.7rem;
    }
}