/* Tabs Component */
.tabs {
    width: 100%;
    margin: var(--spacing-lg) 0;
}

.tabs-nav {
    display: flex;
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-xs);
    background-color: var(--sys-color-background-elevated);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-lg);
    position: relative;
    box-shadow: var(--shadow-xs);
}

.tabs-nav::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--spacing-lg) / 2);
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        var(--sys-color-border-subtle) 20%, 
        var(--sys-color-border-subtle) 80%, 
        transparent 100%
    );
}

.tab {
    background: none;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--sys-color-text-secondary);
    cursor: pointer;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-speed-fast) var(--transition-easing);
    position: relative;
    white-space: nowrap;
    will-change: transform, background-color, color;
}

.tab:hover {
    color: var(--sys-color-text-primary);
    background-color: var(--sys-color-background-surface);
    transform: translateY(-1px);
}

.tab.active {
    color: var(--sys-color-primary-default);
    background-color: var(--sys-color-background-surface);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-sm);
}

.tab:focus {
    outline: 2px solid var(--sys-color-primary-default);
    outline-offset: 2px;
}

.tab:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    color: var(--sys-color-interactive-disabled);
}

.tab:disabled:hover {
    transform: none;
    background-color: transparent;
}

.tab-panel {
    animation: fade-in var(--transition-speed-normal) var(--transition-ease-out);
}

.tab-panel[hidden] {
    display: none;
}

/* Tab content sections */
.buttons-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.buttons-section h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--sys-color-heading);
    margin-bottom: var(--spacing-sm);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.forms-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.forms-section h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--sys-color-heading);
    margin-bottom: var(--spacing-sm);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-width: 400px;
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--sys-color-text-primary);
}

.form-controls-demo {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 500px;
}

/* Responsive */
@media (max-width: 768px) {
    .tabs-nav {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .tab {
        text-align: left;
        width: 100%;
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .button-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-group,
    .form-controls-demo {
        max-width: 100%;
    }
}