/* 50 Sounds Practice - Layout & Navigation */

/* ===========================================
   Container
   =========================================== */
.container {
    background: var(--bg-secondary);
    border-radius: 20px;
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 20px 40px var(--shadow-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    min-height: 400px;
    contain: layout;
}

.page-content {
    display: block;
}

.page-content.hidden {
    display: none;
}

/* ===========================================
   Navigation Tabs
   =========================================== */
.nav-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 5px;
    min-height: 56px;
    transition: background-color 0.3s ease;
    contain: layout;
}

.nav-tab {
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 8px;
    margin: 0 5px;
    transition: all 0.3s;
    font-weight: 500;
    color: var(--text-primary);
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-tab span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.nav-tab.active {
    background: var(--accent-primary);
    color: white;
}

.nav-tab:hover {
    background: var(--border-color);
}

.nav-tab.active:hover {
    background: var(--accent-secondary);
}

/* ===========================================
   Tab Content
   =========================================== */
.tab-content {
    display: none;
    min-height: 600px;
    transition: opacity 0.2s ease-in-out;
}

.tab-content.active {
    display: block;
    contain: layout;
    animation: fadeIn 0.2s ease-in-out;
}

#practice-tab {
    min-height: 600px;
    contain: layout;
}

#chart-tab {
    min-height: 500px;
    contain: layout;
}

#statistics-tab {
    min-height: 500px;
    contain: layout;
}