/* ==========================================================================
   TABS COMPONENT STYLES
   ========================================================================== */

.aitsc-tabs-component {
    margin-bottom: 4rem;
}

.aitsc-tabs-component h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--aitsc-text-primary);
    margin-bottom: 1.5rem;
}

.aitsc-tabs {
    background: var(--aitsc-bg-primary);
    border: 1px solid var(--aitsc-border);
    border-radius: 12px;
    overflow: hidden;
}

/* Navigation */
.aitsc-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    background: var(--aitsc-bg-secondary);
    border-bottom: 1px solid var(--aitsc-border);
}

.aitsc-tab__input {
    display: none;
}

.aitsc-tab__label {
    flex: 1;
    min-width: 140px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--aitsc-text-secondary);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-right: 1px solid var(--aitsc-border);
    user-select: none;
}

.aitsc-tab__label:last-child {
    border-right: none;
}

.aitsc-tab__label:hover {
    background: rgba(0, 92, 178, 0.05);
    color: var(--aitsc-primary);
}

.aitsc-tab__label .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Active State Styles */
.aitsc-tab__input:checked+.aitsc-tab__label {
    background: #fff;
    color: var(--aitsc-primary);
    box-shadow: inset 0 -3px 0 var(--aitsc-primary);
}

/* Panels */
.aitsc-tab__panel {
    display: none;
    padding: 2rem;
    animation: fadeIn 0.3s ease;
}

/* Content List Styles */
.aitsc-tab__panel ul,
.aitsc-tab__panel ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aitsc-tab__panel li {
    margin-bottom: 0.5rem;
    color: var(--aitsc-text-secondary);
}

/* Visibility Logic - Modern :has() */
/* Visibility Logic - Universal Nth-of-type approach */
.aitsc-tabs:has(.aitsc-tabs__nav .aitsc-tab__input:nth-of-type(1):checked) .aitsc-tabs__content .aitsc-tab__panel:nth-child(1),
.aitsc-tabs:has(.aitsc-tabs__nav .aitsc-tab__input:nth-of-type(2):checked) .aitsc-tabs__content .aitsc-tab__panel:nth-child(2),
.aitsc-tabs:has(.aitsc-tabs__nav .aitsc-tab__input:nth-of-type(3):checked) .aitsc-tabs__content .aitsc-tab__panel:nth-child(3),
.aitsc-tabs:has(.aitsc-tabs__nav .aitsc-tab__input:nth-of-type(4):checked) .aitsc-tabs__content .aitsc-tab__panel:nth-child(4),
.aitsc-tabs:has(.aitsc-tabs__nav .aitsc-tab__input:nth-of-type(5):checked) .aitsc-tabs__content .aitsc-tab__panel:nth-child(5),
.aitsc-tabs:has(.aitsc-tabs__nav .aitsc-tab__input:nth-of-type(6):checked) .aitsc-tabs__content .aitsc-tab__panel:nth-child(6) {
    display: block;
}

/* Fallback visibility logic using sibling combinators (less robust but workable for simple cases) */
@supports not selector(:has(*)) {

    /* We can't easily do generic n-tabs with pure CSS siblings structure here because inputs are grouped. 
       JavaScript fallback would be ideal, or just show all panels stacked.
       For now, we'll just show the first one as a static fallback. */
    .aitsc-tab__panel:first-child {
        display: block;
    }
}

/* Responsive */
@media (max-width: 47.9375rem) {
    .aitsc-tab__label {
        font-size: 0.9rem;
        padding: 0.75rem;
    }

    .aitsc-tab__panel {
        padding: 1.5rem;
    }
}

@media (max-width: 35.9375rem) {
    .aitsc-tabs__nav {
        flex-direction: column;
    }

    .aitsc-tab__label {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--aitsc-border);
        justify-content: flex-start;
        padding-left: 1.5rem;
    }

    .aitsc-tab__input:checked+.aitsc-tab__label {
        box-shadow: inset 3px 0 0 var(--aitsc-primary);
        /* Side highlight instead of bottom */
    }
}