/* Vertical Tabs Styling */

/* 1. Grid Container Setup */
.vertical-tabs .tabbed-set {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    align-items: start;
}

/* 2. Left Sidebar (Labels) */
.vertical-tabs .tabbed-labels {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    
    /* Remove default theme horizontal scroll styling */
    flex-wrap: nowrap;
    overflow: visible;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0;
}

/* 3. Label Items */
.vertical-tabs .tabbed-labels > label {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    margin: 0 0 4px 0;
    
    /* Typography */
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    
    /* Reset theme defaults */
    border-bottom: none;
    white-space: normal;
    
    /* Visual structure */
    border-left: 3px solid transparent;
    border-radius: 4px;
    transition: background-color 0.2s, border-left-color 0.2s;
}

.vertical-tabs .tabbed-labels > label:hover {
    background-color: var(--md-accent-bg-color--transparent, rgba(127, 127, 127, 0.05));
    cursor: pointer;
}

/* 4. Active State Styling 
   We hook into the standard Material for MkDocs mechanism:
   input:checked triggers sibling label styling.
   We cover up to 10 tabs which is plenty for this use case.
*/
.vertical-tabs .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
.vertical-tabs .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.vertical-tabs .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.vertical-tabs .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.vertical-tabs .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.vertical-tabs .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6),
.vertical-tabs .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7),
.vertical-tabs .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8),
.vertical-tabs .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > :nth-child(9),
.vertical-tabs .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > :nth-child(10) {
    background-color: var(--md-accent-bg-color--transparent, rgba(127, 127, 127, 0.1));
    border-left-color: var(--md-primary-fg-color);
    color: var(--md-primary-fg-color);
}


/* 5. Content Area */
.vertical-tabs .tabbed-content {
    grid-column: 2;
    margin-top: 0;
    padding-top: 0;
    box-shadow: none;
}

.vertical-tabs .tabbed-content .tabbed-block {
    padding-top: 0; /* Remove top padding inside the content block */
}


/* 6. Utility: Hide Scroll Buttons (if generated by theme) */
.vertical-tabs .tabbed-control {
    display: none;
}
.vertical-tabs .tabbed-labels::before,
.vertical-tabs .tabbed-labels::after {
    display: none; /* Hide scroll indicators */
}


/* 7. Mobile Responsive: Revert to standard horizontal tabs */
@media screen and (max-width: 60em) {
    .vertical-tabs .tabbed-set {
        display: block; /* Standard block layout */
    }
    
    .vertical-tabs .tabbed-labels {
        flex-direction: row; /* Horizontal again */
        overflow-x: auto; /* Scrollable */
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
        mask-image: linear-gradient(to right, #000 85%, transparent 100%);
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--md-default-fg-color--lighter);
    }
    
    .vertical-tabs .tabbed-labels > label {
        display: inline-block;
        width: auto;
        border-left: none; /* Remove side border */
        border-bottom: 2px solid transparent; /* Restore bottom border style */
        margin-bottom: 0;
        border-radius: 0;
    }
    
    /* Revert active state for mobile */
    .vertical-tabs .tabbed-set > input:checked ~ .tabbed-labels > label {
        border-left-color: transparent;
        border-bottom-color: var(--md-primary-fg-color);
        background-color: transparent;
    }
}

/* Utility: 2-Column Grid */
.cols-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2em 0;
}

@media screen and (min-width: 60rem) {
    .cols-2 {
        grid-template-columns: 1fr 1fr;
    }
}