/**
 * Sliding Column Styles
 * 
 * Structure:
 * .sliding-column-wrapper (main container)
 * ├── .sliding-column-sidebar (collapsible sidebar - Container 1)
 * │   ├── .sliding-column-toggle (toggle button)
 * │   └── other widgets
 * └── .sliding-column-main (main content - Container 2)
 */

/* Main wrapper - contains both sidebar and main content */
.sliding-column-wrapper {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-height:calc(100vh - 67px);
}
.sliding-column-main > .elementor-widget-theme-post-content,
.sliding-column-main > .elementor-widget-theme-post-content > div,
#main-content {
    height:100%
}

/* Sidebar (Container 1) - collapsible column */
.sliding-column-sidebar {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Allow vertical scrolling for custom-scrollbar elements inside sidebar */
.sliding-column-sidebar .custom-scrollbar {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Main content (Container 2) - flexible column */
.sliding-column-main {
    flex: 1 !important;
    min-width: 0 !important;
    transition: all 0.3s ease !important;
}

/* Toggle Button */
.sliding-column-toggle {
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    padding: 10px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: left !important;
}

.sliding-column-toggle:hover {
    opacity: 0.8 !important;
}

/* Collapsed state - hide content in sidebar except toggle */
.sliding-column-wrapper.state-collapsed .sliding-column-sidebar > *:not(.sliding-column-toggle):not(.custom-scrollbar):not(.logout-button) {
    /*opacity: 0 !important;*/
    /*pointer-events: none !important;*/
    overflow: visible !important;
}

/* Keep scrollbar interactive when collapsed */
.sliding-column-wrapper.state-collapsed .sliding-column-sidebar .custom-scrollbar {
    pointer-events: auto !important;
}

/* Expanded state - show all content */
.sliding-column-wrapper.state-expanded .sliding-column-sidebar > * {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.sliding-column-wrapper.state-collapsed .sliding-column-sidebar > *:not(.sliding-column-toggle, .always-visible, .logout-button) {
    opacity: 0 !important;
}

/* Mantieni l'immagine stabile durante la transizione */
.always-visible.elementor-widget-image-box {
    display: flex !important;
    align-items: center !important;
}

.always-visible.elementor-widget-image-box .elementor-image-box-wrapper {
    display: flex !important;
    align-items: center !important;
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
}

.always-visible.elementor-widget-image-box .elementor-image-box-img {
    flex-shrink: 0 !important;
    width: 37px !important;
    height: 37px !important;
}

.always-visible.elementor-widget-image-box .elementor-image-box-img img {
    width: 37px !important;
    height: 37px !important;
    max-width: 37px !important;
    max-height: 37px !important;
    object-fit: cover !important;
}

.always-visible.gravatar-box.elementor-widget-image-box .elementor-image-box-wrapper {
    display: flex !important;
    align-items: center !important;
    height: 67px !important;
    min-height: 67px !important;
    max-height: 67px !important;
}

.always-visible.gravatar-box.elementor-widget-image-box .elementor-image-box-img {
    flex-shrink: 0 !important;
    width: 67px !important;
    height: 67px !important;
}

.always-visible.gravatar-box.elementor-widget-image-box .elementor-image-box-img img {
    width: 67px !important;
    height: 67px !important;
    max-width: 67px !important;
    max-height: 67px !important;
    object-fit: cover !important;
}

/* Default: testo nascosto (per evitare flash al caricamento) */
.always-visible .elementor-image-box-content {
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: max-width 0.3s ease, opacity 0.3s ease !important;
    width: auto !important;
}

/* Stato collapsed: testo nascosto */
.sliding-column-wrapper.state-collapsed .sliding-column-sidebar > .always-visible .elementor-image-box-content  {
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: max-width 0.3s ease, opacity 0s ease !important;
}

/* Stato expanded: testo visibile */
.sliding-column-wrapper.state-expanded .sliding-column-sidebar > .always-visible .elementor-image-box-content  {
    max-width: 500px !important;
    opacity: 1 !important;
    transition: max-width 0.3s ease, opacity 0.3s ease 0.1s !important;
}

/* Smooth opacity transition for sidebar content */
.sliding-column-sidebar > *:not(.sliding-column-toggle) {
    transition: opacity 0.5s ease !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sliding-column-wrapper {
        flex-direction: column !important;
    }
    
    .sliding-column-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    .sliding-column-wrapper.state-collapsed .sliding-column-sidebar {
        height: auto !important;
        min-height: 50px !important;
    }
}

/* Elementor Editor Specific */
.elementor-editor-active .sliding-column-wrapper {
    min-height: 100px !important;
}

.elementor-editor-active .sliding-column-sidebar,
.elementor-editor-active .sliding-column-main {
    min-height: 100px !important;
}

/* Helper class for toggle icon rotation */
.sliding-column-toggle i {
    transition: transform 0.3s ease !important;
}

.sliding-column-wrapper.state-collapsed .sliding-column-toggle i.rotate-on-collapse {
    transform: rotate(180deg) !important;
}

.sliding-column-wrapper.state-expanded .sliding-column-toggle i.rotate-on-collapse {
    transform: rotate(0deg) !important;
}

.sliding-column-wrapper.state-collapsed .sliding-column-toggle svg {height:15px}

/* Role-based sidebar colors */
/* 365 Admin - colore principale Elementor */
.user-role-365admin .sliding-column-sidebar {
    background-color: var(--e-global-color-primary) !important;
    border-left: 4px solid var(--e-global-color-primary) !important;
    filter: brightness(0.9);
}

.user-role-365admin .sliding-column-sidebar * {
    color: #ffffff !important;
}

/* 365 Progettista - colore in risalto Elementor */
.user-role-365designer .sliding-column-sidebar {
    background-color: var(--e-global-color-primary) !important;
    border-left: 4px solid var(--e-global-color-primary) !important;
    filter: brightness(0.9);
}

.user-role-365designer .sliding-column-sidebar * {
    color: #ffffff !important;
}

/* 365 Superuser - colore principale Elementor */
.user-role-365superuser .sliding-column-sidebar {
    background-color: var(--e-global-color-primary) !important;
    border-left: 4px solid var(--e-global-color-primary) !important;
    filter: brightness(0.9);
}

.user-role-365superuser .sliding-column-sidebar * {
    color: #ffffff !important;
}