/* Collapsible Tabs Navigation Styles */

.ov-collapsible-tabs {
    position: relative;
    transition: all 0.3s ease;
}

    /* Debug styles removed - functionality working */

    /* Force collapsed state with maximum specificity to override existing CSS */
    .ov-collapsible-tabs.ov-tabs-collapsed .ov-screen-form.ov-screen-form-tab-cards > .rz-tabview > ul.rz-tabview-nav {
        min-width: 4em !important;
        max-width: 4em !important;
        width: 4em !important;
    }  

    .ov-collapsible-tabs.ov-tabs-collapsed > .rz-tabview > ul.rz-tabview-nav li a, .rz-tabview-nav li a:not([href]):not([class]) {
        padding-inline: 21px 0 !important;
    }

    .ov-collapsible-tabs.ov-tabs-collapsed.ov-screen-form > .rz-tabview > .rz-tabview-nav li {
        width: 100%;
    }

    .ov-collapsible-tabs.ov-tabs-collapsed .ov-screen-form.ov-screen-form-tab-cards > .rz-tabview > ul.rz-tabview-nav .rz-tabview-title {
        display: none !important;
        opacity: 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
    }

    /* Additional specificity using attribute selector */
    .ov-collapsible-tabs[data-collapsed="true"] .ov-screen-form.ov-screen-form-tab-cards > .rz-tabview > ul.rz-tabview-nav {
        min-width: 4em !important;
        max-width: 4em !important;
        width: 4em !important;
    }

        .ov-collapsible-tabs[data-collapsed="true"] .ov-screen-form.ov-screen-form-tab-cards > .rz-tabview > ul.rz-tabview-nav .rz-tabview-title {
            display: none !important;
            opacity: 0 !important;
            width: 0 !important;
            max-width: 0 !important;
            overflow: hidden !important;
        }

.ov-tabs-toggle-container {
    position: absolute;
    top: 0;
    left: 210px;
    z-index: 10;   
}

.ov-collapsible-tabs.ov-tabs-collapsed .ov-tabs-toggle-container {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 10;
}

.ov-tabs-toggle-btn {
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--rz-text-color) !important;
    transition: all 0.3s ease;
}

    .ov-tabs-toggle-btn:hover {
        background: var(--rz-state-hover-background-color) !important;
        color: var(--rz-state-hover-text-color) !important;
    }

/* Expanded state - normal width */
.ov-collapsible-tabs.ov-tabs-expanded .ov-screen-form > .rz-tabview > ul.rz-tabview-nav {
    min-width: 16em !important;
    max-width: 16em !important;
    transition: all 0.3s ease;
}

    .ov-collapsible-tabs.ov-tabs-expanded .ov-screen-form > .rz-tabview > ul.rz-tabview-nav .rz-tabview-title {
        opacity: 1 !important;
        transition: opacity 0.3s ease;
    }

/* Collapsed state - icon only - targeting the correct ul element with maximum specificity */
.ov-collapsible-tabs.ov-tabs-collapsed .ov-screen-form.ov-screen-form-tab-cards > .rz-tabview > ul.rz-tabview-nav {
    min-width: 4em !important;
    max-width: 4em !important;
    width: 4em !important;
    transition: all 0.3s ease !important;
}

    .ov-collapsible-tabs.ov-tabs-collapsed .ov-screen-form.ov-screen-form-tab-cards > .rz-tabview > ul.rz-tabview-nav .rz-tabview-title {
        opacity: 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
        display: none !important;
    }

    .ov-collapsible-tabs.ov-tabs-collapsed .ov-screen-form.ov-screen-form-tab-cards > .rz-tabview > ul.rz-tabview-nav > .rz-tabview-icon {
        margin-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ov-collapsible-tabs.ov-tabs-collapsed .ov-screen-form.ov-screen-form-tab-cards > .rz-tabview > ul.rz-tabview-nav > li {
        text-align: center !important;
        padding: 0 !important;
    }

        .ov-collapsible-tabs.ov-tabs-collapsed .ov-screen-form.ov-screen-form-tab-cards > .rz-tabview > ul.rz-tabview-nav > li a {
            padding: 11px 8px !important;
            justify-content: center !important;
            display: flex !important;
            align-items: center !important;
        }

/* Tooltip for collapsed tabs - handled by JavaScript */

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .ov-collapsible-tabs {
        /* Auto-collapse on mobile if CollapseOnMobile is true */
    }  

    .ov-tabs-toggle-btn {
        min-width: 36px !important;
        width: 36px !important;
        height: 36px !important;
    }

    /* Larger touch targets on mobile */
    .ov-collapsible-tabs.ov-tabs-collapsed .ov-screen-form.ov-screen-form-tab-cards > .rz-tabview > ul.rz-tabview-nav > li a {
        padding: 16px 8px !important;
        min-height: 48px !important;
    }

    /* Better tooltip positioning on mobile - handled by JavaScript */
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .ov-tabs-toggle-container {
        top: 8px;
        left: 8px;
    }
}

/* Ensure content area adjusts properly */
.ov-collapsible-tabs.ov-tabs-collapsed .ov-screen-form > .rz-tabview > .rz-tabview-panels {
    margin-left: 0 !important;
    transition: margin-left 0.3s ease;
}

.ov-collapsible-tabs.ov-tabs-expanded .ov-screen-form > .rz-tabview > .rz-tabview-panels {
    margin-left: 0 !important;
    transition: margin-left 0.3s ease;
}

/* Animation for smooth transitions */
.ov-collapsible-tabs * {
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
.ov-tabs-toggle-btn:focus {
    outline: 2px solid var(--ov-primary);
    outline-offset: 2px;
}

.ov-collapsible-tabs.ov-tabs-collapsed .ov-screen-form.ov-screen-form-tab-cards > .rz-tabview > ul.rz-tabview-nav > li a:focus {
    outline: 2px solid var(--ov-primary);
    outline-offset: -2px;
}

/* ULTRA SPECIFIC RULES - These should override everything */
.ov-collapsible-tabs.ov-tabs-collapsed.ov-screen-form.ov-screen-form-tab-cards .rz-tabview.rz-tabview-left ul.rz-tabview-nav {
    min-width: 4em !important;
    max-width: 4em !important;
    width: 4em !important;
}

    .ov-collapsible-tabs.ov-tabs-collapsed.ov-screen-form.ov-screen-form-tab-cards .rz-tabview.rz-tabview-left ul.rz-tabview-nav .rz-tabview-title {
        display: none !important;
        opacity: 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
    }

/* Ultra specific tooltip rules - handled by JavaScript */