/* app/static/css/containers/tabs.css */
/* Стили для вкладок (Tabs)
*/

/* ==================================================================
   1. БАЗОВЫЙ КОНТЕЙНЕР
================================================================== */

.app-tabs {
    position: relative;
    display: flex;
    width: 100%;
}

/* Скрываем радио-кнопки */
.app-tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ==================================================================
   2. БАЗОВЫЕ СТИЛИ ВКЛАДОК
      Используются для размеров, fullwidth и адаптивности
      Стили активных/неактивных состояний — в макросе
================================================================== */

.app-tabs__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-tabs__link,
.app-tabs__list label[for] {
    display: inline-flex;
    align-items: center;
    gap: var(--app-spacing-xs);
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    font-size: var(--app-font-size-sm);
    font-weight: 500;
    color: var(--app-color-text-secondary);
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: color var(--app-transition-fast) ease, border-color var(--app-transition-fast) ease;
    white-space: nowrap;
}

.app-tabs__icon {
    font-size: 0.9em;
    line-height: 1;
}

/* ==================================================================
   3. ПАНЕЛИ С КОНТЕНТОМ
      Базовые стили панелей (фон, границы, отступы)
================================================================== */

.app-tabs__panel {
    display: none;
    width: 100%;
    padding: var(--app-spacing-lg);
    background-color: var(--app-color-bg-body);
    border: 1px solid var(--app-color-border);
    border-radius: 0 0 var(--app-radius-md) var(--app-radius-md);
}

/* ==================================================================
   4. ГОРИЗОНТАЛЬНАЯ ОРИЕНТАЦИЯ
      Стили для bordered-варианта с рамкой
      Активное состояние генерируется в макросе
================================================================== */

.app-tabs--horizontal {
    flex-direction: column;
}

.app-tabs--horizontal .app-tabs__list {
    flex-direction: row;
    border-bottom: 1px solid var(--app-color-border);
    gap: var(--app-spacing-xs);
    padding-bottom: 0;
    margin-bottom: -1px;
}

.app-tabs--horizontal .app-tabs__link {
    border-radius: var(--app-radius-md) var(--app-radius-md) 0 0;
    border-bottom: none;
}

/* Активная вкладка - горизонтальная */
.app-tabs--horizontal input[type="radio"]:checked ~ .app-tabs__list .app-tabs__link {
    background-color: var(--app-color-bg-body);
    color: var(--app-color-primary);
    border-color: var(--app-color-border);
    border-bottom-color: transparent;
}

/* ==================================================================
   5. ВЕРТИКАЛЬНАЯ ОРИЕНТАЦИЯ
      Стили для bordered-варианта с рамкой слева
      Активное состояние генерируется в макросе
================================================================== */

.app-tabs--vertical {
    flex-direction: row;
    gap: var(--app-spacing-md);
}

.app-tabs--vertical .app-tabs__list {
    flex-direction: column;
    min-width: 200px;
    border-right: 1px solid var(--app-color-border);
    gap: var(--app-spacing-xs);
    padding-right: var(--app-spacing-sm);
}

.app-tabs--vertical .app-tabs__link,
.app-tabs--vertical .app-tabs__list label[for] {
    width: 100%;
    border-radius: var(--app-radius-md) 0 0 var(--app-radius-md);
    border-right: 1px solid transparent;
}

.app-tabs--vertical .app-tabs__panel {
    flex: 1;
    border-radius: 0 var(--app-radius-md) var(--app-radius-md) 0;
}

/* Активная вкладка - вертикальная */
.app-tabs--vertical input[type="radio"]:checked ~ .app-tabs__list .app-tabs__link {
    background-color: var(--app-color-bg-body);
    color: var(--app-color-primary);
    border-color: var(--app-color-border);
    border-right-color: transparent;
}

/* ==================================================================
   6. UNDERLINE — ТОЛЬКО АДАПТИВНОСТЬ
      Основные стили underline генерируются в макросе
      Здесь только вертикальный underline для мобильных
================================================================== */

/* Базовые стили вертикального underline (десктоп) */
.app-tabs--underline.app-tabs--vertical .app-tabs__list {
    border-bottom: none;
    border-right: 2px solid var(--app-color-border);
}

.app-tabs--underline.app-tabs--vertical .app-tabs__link,
.app-tabs--underline.app-tabs--vertical .app-tabs__list label[for] {
    border-bottom: none;
    border-right: 2px solid transparent;
    margin-bottom: 0;
    margin-right: -2px;
}

/* Вертикальный underline в адаптиве (мобильные) */
@media (max-width: 768px) {
    .app-tabs--underline.app-tabs--vertical .app-tabs__list {
        border-bottom: 2px solid var(--app-color-border);
        border-right: none;
    }

    .app-tabs--underline.app-tabs--vertical .app-tabs__link,
    .app-tabs--underline.app-tabs--vertical .app-tabs__list label[for] {
        border-right: none;
        border-bottom: 2px solid transparent;
        margin-right: 0;
        margin-bottom: -2px;
    }

    .app-tabs--underline.app-tabs--vertical input[type="radio"]:checked ~ .app-tabs__list .app-tabs__link {
        border-bottom: 2px solid var(--app-color-primary);
        border-right: none;
    }
}

/* ==================================================================
   7. РАЗМЕРЫ
================================================================== */

.app-tabs--sm .app-tabs__link {
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    font-size: var(--app-font-size-xs);
    gap: var(--app-spacing-xs);
}

.app-tabs--sm .app-tabs__panel {
    padding: var(--app-spacing-md);
}

.app-tabs--lg .app-tabs__link {
    padding: var(--app-spacing-md) var(--app-spacing-lg);
    font-size: var(--app-font-size-base);
    gap: var(--app-spacing-sm);
}

.app-tabs--lg .app-tabs__panel {
    padding: var(--app-spacing-xl);
}

/* ==================================================================
   8. FULLWIDTH (НА ВСЮ ШИРИНУ)
================================================================== */

.app-tabs--fullwidth {
    width: 100%;
}

.app-tabs--fullwidth .app-tabs__list {
    width: 100%;
}

.app-tabs--fullwidth .app-tabs__link {
    flex: 1 1 auto;
    justify-content: center;
}

/* ==================================================================
   9. ВНУТРИ КАРТОЧЕК
================================================================== */

.card .app-tabs {
    margin: calc(var(--app-spacing-md) * -1);
    width: calc(100% + var(--app-spacing-md) * 2);
}

.card .app-tabs__panel {
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0 0 var(--app-radius-md) var(--app-radius-md);
}

.card .app-tabs--horizontal .app-tabs__list {
    padding-left: var(--app-spacing-md);
    padding-right: var(--app-spacing-md);
}

/* ==================================================================
   10. АДАПТИВНОСТЬ
================================================================== */

@media (max-width: 768px) {
    /* Горизонтальные вкладки — прокрутка */
    .app-tabs--horizontal .app-tabs__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .app-tabs--horizontal .app-tabs__link {
        white-space: nowrap;
    }

    /* Вертикальные вкладки становятся горизонтальными */
    .app-tabs--vertical {
        flex-direction: column;
    }

    .app-tabs--vertical .app-tabs__list {
        flex-direction: row;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--app-color-border);
        padding-right: 0;
        padding-bottom: 4px;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .app-tabs--vertical .app-tabs__link {
        width: auto;
        border-radius: var(--app-radius-md) var(--app-radius-md) 0 0;
        border-right: 1px solid transparent;
        white-space: nowrap;
    }

    .app-tabs--vertical .app-tabs__panel {
        border-radius: 0 0 var(--app-radius-md) var(--app-radius-md);
    }

    /* Underline вертикальный — адаптация */
    .app-tabs--underline.app-tabs--vertical .app-tabs__list {
        border-bottom: 2px solid var(--app-color-border);
        border-right: none;
    }

    .app-tabs--underline.app-tabs--vertical .app-tabs__link {
        border-right: none;
        border-bottom: 2px solid transparent;
        margin-right: 0;
        margin-bottom: -2px;
    }

    .app-tabs--underline.app-tabs--vertical input[type="radio"]:checked ~ .app-tabs__list .app-tabs__link {
        border-bottom: 2px solid var(--app-color-primary);
        border-right: none;
    }

    /* Fullwidth на мобильных */
    .app-tabs--fullwidth .app-tabs__list {
        flex-wrap: wrap;
    }

    .app-tabs--fullwidth .app-tabs__link {
        flex: 1 1 calc(50% - var(--app-spacing-xs));
    }
}

@media (max-width: 480px) {
    /* Уменьшенные отступы для мобильных */
    .app-tabs__link {
        padding: var(--app-spacing-xs) var(--app-spacing-sm);
        font-size: var(--app-font-size-xs);
    }

    .app-tabs__panel {
        padding: var(--app-spacing-md);
    }

    /* Fullwidth — одна колонка */
    .app-tabs--fullwidth .app-tabs__link {
        flex: 1 1 100%;
    }
}

/* ==================================================================
   11. ТЕМНАЯ ТЕМА — ПАНЕЛИ
================================================================== */

[data-theme="dark"] .app-tabs__panel {
    background-color: var(--app-color-bg-secondary);
    border-color: var(--app-color-border);
}

[data-theme="dark"] .card .app-tabs__panel {
    background-color: var(--app-color-bg-body);
}

/* ==================================================================
   12. НЕВИДИМЫЕ ВКЛАДКИ (INVISIBLE)
================================================================== */

.app-tabs--invisible .app-tabs__panel {
    display: none;
    padding: 0;
    background-color: transparent;
    border: none;
}

/* Размер шрифта для заголовков прозрачных вкладок */
.app-tabs--invisible.app-tabs--text-base .app-tabs__link {
    font-size: var(--app-font-size-base);
}

.app-tabs--invisible .app-tabs__list {
    border-bottom: none;
}

/* Базовый стиль всех вкладок */
.app-tabs--invisible .app-tabs__link {
    border: none;
    background-color: transparent;
    color: var(--app-color-text-muted);
    transition: color var(--app-transition-fast) ease;
    border-bottom: 2px solid transparent;
}

/* Ховер для всех вкладок — только цвет, без подчеркивания */
.app-tabs--invisible .app-tabs__link:hover {
    color: var(--app-color-primary);
    background-color: transparent;
    border-bottom: 2px solid transparent;
}

/* Активная вкладка — подчеркивание primary */
.app-tabs--invisible.app-tabs--horizontal input[type="radio"]:checked ~ .app-tabs__list .app-tabs__link {
    color: var(--app-color-text-primary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--app-color-primary);
}

/* Активная вкладка при ховере — цвет primary, подчеркивание остается */
.app-tabs--invisible.app-tabs--horizontal input[type="radio"]:checked ~ .app-tabs__list .app-tabs__link:hover {
    color: var(--app-color-primary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--app-color-primary);
}

/* Отступ между вкладками и контентом */
.app-tabs--invisible.app-tabs--horizontal .app-tabs__list {
    border-bottom: none;
    margin-bottom: 10px;
}

/* ==================================================================
   13. ТЕМНАЯ ТЕМА — НЕВИДИМЫЕ ВКЛАДКИ
================================================================== */

[data-theme="dark"] .app-tabs--invisible .app-tabs__link {
    color: var(--app-color-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
}

[data-theme="dark"] .app-tabs--invisible .app-tabs__link:hover {
    color: var(--app-color-primary);
    background-color: transparent;
    border-bottom: 2px solid transparent;
}

[data-theme="dark"] .app-tabs--invisible.app-tabs--horizontal input[type="radio"]:checked ~ .app-tabs__list .app-tabs__link {
    color: var(--app-color-text-primary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--app-color-primary);
}

[data-theme="dark"] .app-tabs--invisible.app-tabs--horizontal input[type="radio"]:checked ~ .app-tabs__list .app-tabs__link:hover {
    color: var(--app-color-primary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--app-color-primary);
}