/* Tabs Component Styles - Modern Mobile App Design */
.ui-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ui-tabs-list {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
}

.ui-tabs-scrollable .ui-tabs-list {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.ui-tabs-scrollable .ui-tabs-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.ui-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transform: scale(1);
    transform-origin: center;
}

.ui-tab:hover:not(.ui-tab-disabled) {
    color: var(--color-text);
}

.ui-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius-md);
}

/* Active Tab - только увеличение через transform для плавной анимации */
.ui-tab-active {
    transform: scale(1.15);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* Disabled Tab */
.ui-tab-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Tabs Variants */
.ui-tabs-pills .ui-tab {
    border-radius: var(--border-radius-full);
    padding: var(--spacing-xs) var(--spacing-lg);
}

.ui-tabs-pills .ui-tab-active {
    transform: scale(1.15);
    color: var(--color-text);
}

.ui-tabs-underline .ui-tabs-list {
    border-bottom: 2px solid var(--color-border);
}

/* Tabs with icons */
.ui-tab-icon {
    display: inline-flex;
    align-items: center;
    margin-right: var(--spacing-xs);
    font-size: 1.125rem;
}

/* Tab Panels */
.ui-tabs-panels {
    margin-top: var(--spacing-lg);
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
}

.ui-tab-panel {
    grid-row: 1;
    grid-column: 1;
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0.4s;
    will-change: opacity, transform;
    pointer-events: none;
    min-height: 0;
}

.ui-tab-panel-active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s;
    pointer-events: auto;
    z-index: 1;
}

/* Альтернативный вариант с горизонтальным slide */
.ui-tabs-panels.fade-slide .ui-tab-panel {
    transform: translateX(30px);
}

.ui-tabs-panels.fade-slide .ui-tab-panel-active {
    transform: translateX(0);
    animation: tabPanelSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tabPanelSlideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Вариант с scale */
.ui-tabs-panels.fade-scale .ui-tab-panel {
    transform: translateY(20px) scale(0.95);
}

.ui-tabs-panels.fade-scale .ui-tab-panel-active {
    transform: translateY(0) scale(1);
    animation: tabPanelScaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tabPanelScaleIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .ui-tabs-scrollable .ui-tabs-list {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    .ui-tab {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}