/* ===========================================================
   FIXTURES HERO
   (reuses .players-hero as a base — just a plain badge instead of the
   absolutely-positioned "Season" badge, since there's no photo subject
   here to position around)
===========================================================*/

.fixtures-hero{
    background:
        linear-gradient(90deg, rgba(11,18,32,0.97) 30%, rgba(11,18,32,0.55) 65%, rgba(11,18,32,0.25) 100%),
        url("../images/hero/fixtures-hero.webp");
    background-repeat:no-repeat;
    background-size:50%;
    background-position: right center;
    
}

/* ===========================================================
   TAB NAVIGATION
   (Same pattern duplicated in team-profile.css — each page keeps its
   own copy rather than linking an unrelated page's CSS file just for
   this one shared component.)
===========================================================*/

.match-tabs{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    border-bottom:1px solid var(--color-border);
    margin-bottom:var(--space-5);
    overflow-x:auto;
}

.match-tab{
    display:flex;
    align-items:center;
    gap:6px;
    padding:var(--space-3) var(--space-4);
    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    color:var(--color-text-muted);
    white-space:nowrap;
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    cursor:pointer;
    transition:all var(--transition-fast);
}

.match-tab:hover{ color:var(--color-text); }

.match-tab.active{
    color:var(--color-gold);
    border-bottom-color:var(--color-gold);
    font-weight:var(--fw-semibold);
}

.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.tab-placeholder{
    text-align:center;
    color:var(--color-text-muted);
    padding:var(--space-7) var(--space-5);
}

.vs-circle{
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    font-weight:var(--fw-bold);
    color:var(--color-text-muted);
    flex-shrink:0;
}

/* ===========================================================
   3-COLUMN LAYOUT: filters | fixtures list | calendar+next match
===========================================================*/

.fixtures-layout{
    display:grid;
    grid-template-columns:260px 1fr 320px;
    gap:var(--space-5);
    align-items:start;
}

.fixtures-main{
    min-width:0;

    /* Alignment fix: the sidebar/calendar titles sit inside a .card
       (1px border + 24px padding = 25px before the title text), but the
       tabs row above has no such wrapper (only its own 12px top padding),
       so "Upcoming Fixtures" sat noticeably higher than "Filter Fixtures"
       and "Match Calendar" next to it. This 13px nudge lines them up.
    */
    padding-top:13px;
}

.fixtures-sidebar{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
    position:sticky;
    top:var(--space-4);
}

/* ===========================================================
   FIXTURE LIST
===========================================================*/

.fixture-date-heading{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:var(--fw-semibold);
    color:var(--color-text-muted);
    margin:var(--space-5) 0 var(--space-3);
}

.fixture-date-heading:first-child{
    margin-top:0;
}

.fixture-row{
    display:grid;
    grid-template-columns:1fr auto 1fr auto;
    align-items:center;
    gap:var(--space-4);

    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-4);
    margin-bottom:var(--space-3);

    text-decoration:none;
    color:inherit;

    transition:border-color var(--transition-fast);
}

.fixture-row:hover{
    border-color:var(--color-gold);
}

.fixture-team{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    font-weight:var(--fw-semibold);
}

/* Same class-reuse fix as elsewhere: .crest-badge's own margin:0 auto
   fights this row layout, so cancel it here too. */
.fixture-team .crest-badge{
    margin:0;
    flex-shrink:0;
}

.fixture-team-right{
    justify-content:flex-end;
    text-align:right;
}

.fixture-center{
    text-align:center;
}

.fixture-time{
    display:block;
    font-family:var(--font-mono);
    font-weight:var(--fw-bold);
    font-size:var(--fs-h3);
}

.fixture-match-no{
    display:block;
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    margin-bottom:4px;
}

.fixture-status-badge{
    display:inline-block;
}

.fixture-venue{
    display:flex;
    align-items:flex-start;
    gap:6px;
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    max-width:150px;
}

.fixture-venue svg{
    margin-top:2px;
    flex-shrink:0;
}

/* ===========================================================
   TOURNAMENT SUMMARY STRIP
===========================================================*/

.fixtures-summary-strip{
    grid-template-columns:repeat(4, 1fr);
    margin:var(--space-6) 0 var(--space-7);
}

/* ===========================================================
   MATCH CALENDAR (right sidebar)
===========================================================*/

.calendar-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:var(--space-4);
}

.calendar-month{
    font-weight:var(--fw-semibold);
}

.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:4px;
    text-align:center;
}

.calendar-dow{
    font-size:9px;
    color:var(--color-text-faint);
    text-transform:uppercase;
    padding-bottom:4px;
}

.calendar-day{
    padding:6px 0;
    border-radius:var(--radius-sm);
    font-size:var(--fs-small);
    color:var(--color-text-muted);
}

.calendar-day.match-day{
    border:1px solid var(--color-gold);
    color:var(--color-gold);
    font-weight:var(--fw-semibold);
}

.calendar-day.match-day.today{
    background:var(--color-gold);
    color:#1A1305;
}

/* ===========================================================
   NEXT MATCH CARD
===========================================================*/

.next-match-card .next-match-teams{
    margin:var(--space-4) 0;
}

.next-match-card .next-match-team span{
    display:block;
    margin-top:4px;
}

.next-match-info{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:var(--fs-small);
    color:var(--color-text-muted);
    margin-bottom:6px;
}

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

@media (max-width: 1200px){
    .fixtures-layout{
        grid-template-columns:240px 1fr;
    }
    .fixtures-sidebar{
        grid-column:1 / -1;
        flex-direction:row;
        position:static;
    }
    .fixtures-sidebar > .card{
        flex:1;
    }
}

@media (max-width: 1024px){
    .fixtures-layout{
        grid-template-columns:1fr;
    }
    .players-filter-sidebar{
        position:static;
    }
    .fixtures-sidebar{
        flex-direction:column;
    }
}

@media (max-width: 768px){
    .fixture-row{
        grid-template-columns:1fr;
        text-align:center;
        gap:var(--space-3);
    }
    .fixture-team{
        justify-content:center;
    }
    .fixture-team-right{
        justify-content:center;
        text-align:center;
        flex-direction:row-reverse;
    }
    .fixture-venue{
        justify-content:center;
        max-width:none;
    }
    .fixtures-summary-strip{
        grid-template-columns:repeat(2, 1fr);
    }
}
/* ===========================================================
   MOBILE FILTER TOGGLE
   The filter panel used to just sit first in DOM order and get
   dumped above the fixtures list on mobile via position:static,
   pushing the actual matches below the fold. Hide it behind a
   toggle button instead, collapsed by default on phones/tablets.
===========================================================*/

.fixtures-filter-toggle{
    display:none;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4);
    color:var(--color-text);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-small);
    cursor:pointer;
    margin-bottom:var(--space-4);
}

.fixtures-filter-toggle span{
    display:flex;
    align-items:center;
    gap:8px;
}

.fixtures-filter-toggle-caret{
    transition:transform 0.2s ease;
}

.fixtures-filter-toggle[aria-expanded="true"] .fixtures-filter-toggle-caret{
    transform:rotate(180deg);
}

@media (max-width: 1024px){
    .fixtures-filter-toggle{
        display:flex;
    }

    #fixturesFilterPanel{
        display:none;
    }

    #fixturesFilterPanel.open{
        display:block;
        margin-bottom:var(--space-5);
    }
}