/* Teams Page Specific Styles */
body.teams-page {
    min-height: 100vh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.teams-page .main-content {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    position: relative !important;
    padding-bottom: 6rem !important; /* Ensure space for content */
}

.teams-page #team-details {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    flex: 1 !important;
    position: relative !important;
}

.teams-page .container {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
    max-width: 2100px !important;
    margin: 0 auto !important;
    padding: 0 3rem 6rem 3rem !important; /* Match teams.html container */
    display: flow-root !important; /* Create block formatting context */
}

.teams-page .chroma-grid-wrapper {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
    padding-bottom: 6rem !important; /* Increased padding */
    margin-bottom: 4rem !important; /* Increased margin */
    display: flow-root !important; /* Create block formatting context */
}

.teams-page .content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    contain: layout !important; /* Ensure proper containment */
}

/* Override chroma-grid styles */
.teams-page .chroma-grid {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    /* Don't override grid-template-columns - let chroma-grid.css handle it */
    grid-auto-rows: minmax(500px, auto) !important;
    gap: 1.5rem !important;
    margin: 2rem auto 4rem auto !important; /* Increased bottom margin */
    padding: 0 0 6rem 0 !important; /* Increased padding */
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
    max-width: 2100px !important;
    contain: layout style !important; /* Better containment */
    z-index: 1 !important;
}

/* Ensure cards maintain correct dimensions */
.teams-page .chroma-card {
    max-width: 300px !important;
    height: 500px !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 2 !important;
}

/* Fix for chroma-roster-container */
.teams-page .chroma-roster-container {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 600px !important;
    overflow: visible !important;
    display: flow-root !important;
    padding-bottom: 6rem !important;
    margin-bottom: 4rem !important;
    z-index: 1 !important;
}

/* Fix for any potential overflow issues in the sidebar */
.teams-page .sidebar {
    overflow: visible !important;
    z-index: 1000 !important;
}

/* Clearfix for proper container expansion */
.teams-page .clearfix::after,
.teams-page .container::after,
.teams-page .chroma-grid-wrapper::after,
.teams-page .chroma-roster-container::after,
.teams-page .team-roster-section::after {
    content: "";
    display: table;
    clear: both;
}

/* Ensure footer stays below content */
.teams-page footer {
    position: relative !important;
    margin-top: auto !important;
    clear: both !important;
    z-index: 0 !important; /* Ensure footer is below content */
}

/* Fix for team roster display */
.teams-page #team-roster,
.teams-page .team-roster-section {
    overflow: visible !important;
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 6rem !important; /* Add space before footer */
    display: flow-root !important; /* Create block formatting context */
}

/* Force proper stacking context */
.teams-page {
    isolation: isolate !important;
}

/* ===== Roster Switcher + Stage (Teams page) ===== */
.teams-page .roster-switcher {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    justify-content: center;
    margin-top: 0.85rem;
    padding-bottom: 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.teams-page .roster-switcher::-webkit-scrollbar {
    display: none;
}

.teams-page .roster-tab {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(1, 190, 110, 0.28);
    /* Inactive: grey fill with green border */
    background: rgba(140, 140, 140, 0.16);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    min-width: 190px;
    text-align: center;
}

html[dir="rtl"] .teams-page .roster-tab {
    text-align: center;
}

[data-theme="light"] .teams-page .roster-tab {
    background: rgba(210, 210, 210, 0.55);
}

.teams-page .roster-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(1, 190, 110, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.teams-page .roster-tab.is-active {
    border-color: rgba(1, 190, 110, 0.9);
    /* Active: keep the same fill but add stronger glow */
    box-shadow: 0 18px 44px rgba(1, 190, 110, 0.22), 0 0 0 1px rgba(1, 190, 110, 0.25);
    background: #00c472;
    color: #122126;
}

[data-theme="light"] .teams-page .roster-tab.is-active {
    background: #00c472;
    color: #122126;
    box-shadow: 0 18px 44px rgba(1, 190, 110, 0.22), 0 0 0 1px rgba(1, 190, 110, 0.25);
}

.teams-page .roster-tab-name {
    font-weight: 900;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.teams-page .roster-tab-count {
    font-size: 0.86rem;
    color: var(--text-secondary);
    opacity: 0.9;
}

.teams-page .roster-single-title {
    margin-top: 0.75rem;
    font-weight: 900;
    color: #01BE6E;
    letter-spacing: 0.2px;
    font-size: 1.05rem;
}

.teams-page .roster-stage {
    margin-top: 1.1rem;
}

/* CSS fallback animation if GSAP isn't available */
@keyframes rosterPopIn {
    from { opacity: 0; transform: translateY(42px) scale(0.84); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.teams-page .roster-pop-in {
    animation: rosterPopIn 720ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@media (max-width: 768px) {
    .teams-page .roster-tab {
        min-width: 165px;
        padding: 0.7rem 0.8rem;
    }

    .teams-page .roster-tab-name {
        max-width: 220px;
    }
}