/* Файл: dotascore/static/css/style_mode_toggler.css */
/* Стили для переключателя режимов таблицы лидеров с 3D флип-эффектом */

/* ========================================================= */
/* КОНТЕЙНЕР ПЕРЕКЛЮЧЕНИЯ ТАБЛИЦ */
/* ========================================================= */

#table-switch-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 20px 0 15px;
    padding: 10px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

/* ========================================================= */
/* КНОПКИ ПЕРЕКЛЮЧЕНИЯ ТАБЛИЦ (ПК) */
/* ========================================================= */

.table-switch-button {
    position: relative;
    width: 120px;
    height: 45px;
    perspective: 1000px; /* Задает 3D-пространство */
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
}

/* Внутренний контейнер для 3D флипа */
.table-switch-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.9s;
    transform-style: preserve-3d; /* Сохраняет 3D-преобразования для дочерних элементов */
}

/* Флип анимация (во время переключения) */
.table-switch-button.flipping .table-switch-inner {
    transform: rotateX(180deg);
    
}

/* Передняя и задняя стороны кнопки */
.table-switch-front,
.table-switch-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Скрывает заднюю сторону при нормальном просмотре */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1em;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
}

/* Передняя сторона (неактивная) */
.table-switch-front {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: #a0aec0;
    border: 2px solid #4a5568;
}

/* Задняя сторона (активная) - изначально перевёрнута на 180° */
.table-switch-back {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: 2px solid #764ba2;
    transform: rotateX(180deg);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Эффект при наведении */
.table-switch-button:hover .table-switch-front {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.table-switch-button:hover .table-switch-back {
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.6);
}

/* Активная кнопка: показывает заднюю сторону (т.к. поворачивает inner) */
.table-switch-button.active .table-switch-inner {
    transform: rotateX(180deg);
}


/* ========================================================= */
/* МОБИЛЬНЫЕ СТИЛИ (≤ 600px) */
/* ========================================================= */

@media (max-width: 600px) {
    
    /* Контейнер переключения таблиц */
    #table-switch-container {
        gap: 8px;
        margin: 15px 0 10px;
        padding: 8px 5px;
    }
    
    /* Кнопки переключения таблиц на мобильных */
    .table-switch-button {
        width: 90px;
        height: 38px;
    }
    
    .table-switch-front,
    .table-switch-back {
        font-size: 0.85em;
        border-radius: 6px;
    }
}