/* Tabs CSS - Tab navigation component */

/* ============================================
   Base Tabs Container
   ============================================ */
.tabs {
    width: 100%;
}

/* ============================================
   Tabs List (Tab Buttons Container)
   ============================================ */
.tabs-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    padding: 0.25rem;
    background-color: hsl(var(--muted));
    border-radius: var(--radius);
}

.tabs-list-full {
    display: flex;
    width: 100%;
}

.tabs-list-full .tabs-trigger {
    flex: 1;
}

/* ============================================
   Tab Trigger (Individual Tab Button)
   ============================================ */
.tabs-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    padding: 0.375rem 0.75rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    background-color: transparent;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: all var(--transition-fast) ease-in-out;
}

.tabs-trigger:hover {
    color: hsl(var(--foreground));
}

.tabs-trigger:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.tabs-trigger[data-state="active"],
.tabs-trigger.active {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.tabs-trigger:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.tabs-trigger svg,
.tabs-trigger .icon {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   Tab Content
   ============================================ */
.tabs-content {
    margin-top: var(--spacing-md);
}

.tabs-content[hidden],
.tabs-content.hidden {
    display: none;
}

/* Focus styles for accessibility */
.tabs-content:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* ============================================
   Tab Variants
   ============================================ */

/* Underline Tabs */
.tabs-underline .tabs-list {
    background-color: transparent;
    border-bottom: 1px solid hsl(var(--border));
    border-radius: 0;
    padding: 0;
    height: auto;
}

.tabs-underline .tabs-trigger {
    position: relative;
    padding: 0.75rem 1rem;
    border-radius: 0;
}

.tabs-underline .tabs-trigger[data-state="active"],
.tabs-underline .tabs-trigger.active {
    background-color: transparent;
    color: hsl(var(--primary));
    box-shadow: none;
}

.tabs-underline .tabs-trigger[data-state="active"]::after,
.tabs-underline .tabs-trigger.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: hsl(var(--primary));
}

/* Pill Tabs (default with more padding) */
.tabs-pill .tabs-list {
    padding: 0.25rem;
}

.tabs-pill .tabs-trigger {
    padding: 0.5rem 1rem;
}

/* Bordered Tabs */
.tabs-bordered .tabs-list {
    background-color: transparent;
    border: 1px solid hsl(var(--border));
    padding: 0.25rem;
}

/* ============================================
   Tabs Sizes
   ============================================ */

/* Small Tabs */
.tabs-sm .tabs-list {
    height: 2rem;
}

.tabs-sm .tabs-trigger {
    padding: 0.25rem 0.5rem;
    font-size: var(--text-xs);
}

/* Large Tabs */
.tabs-lg .tabs-list {
    height: 3rem;
}

.tabs-lg .tabs-trigger {
    padding: 0.5rem 1rem;
    font-size: var(--text-base);
}

/* ============================================
   Vertical Tabs
   ============================================ */
.tabs-vertical {
    display: flex;
    gap: var(--spacing-md);
}

.tabs-vertical .tabs-list {
    flex-direction: column;
    height: auto;
    width: auto;
    min-width: 10rem;
}

.tabs-vertical .tabs-trigger {
    width: 100%;
    justify-content: flex-start;
}

.tabs-vertical .tabs-content {
    flex: 1;
    margin-top: 0;
}

/* ============================================
   Scrollable Tabs (for many tabs)
   ============================================ */
.tabs-scrollable {
    position: relative;
}

.tabs-scrollable .tabs-list {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tabs-scrollable .tabs-list::-webkit-scrollbar {
    display: none;
}

.tabs-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tabs-scroll-btn:hover {
    background-color: hsl(var(--muted));
}

.tabs-scroll-btn-left {
    left: 0;
}

.tabs-scroll-btn-right {
    right: 0;
}

/* ============================================
   Tab with Badge/Count
   ============================================ */
.tabs-trigger .badge {
    margin-left: 0.5rem;
}

/* ============================================
   Tab Panel Animation (optional)
   ============================================ */
.tabs-animated .tabs-content {
    animation: tabFadeIn var(--transition-normal) ease-in-out;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Page Header with Tabs (common pattern)
   ============================================ */
.page-header-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .page-header-tabs {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.page-header-tabs h1 {
    margin: 0;
}