/* App Layout Fixes for Dashboard App Pages */

/* Full width layout for app pages */
.dashboard-app-page {
    height: 100vh !important;
    overflow: hidden !important;
}

.dashboard-app-page .navbar .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Layout containers */
.dashboard-app-page .content-wrapper,
.dashboard-app-page .container-fluid {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dashboard-app-page .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.dashboard-app-page .container-fluid > .row {
    flex: 1;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

/* Sidebar - Desktop only styles */
@media (min-width: 992px) {
    .dashboard-app-page aside {
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        margin-top: 0 !important;
        padding-top: 1rem;
    }

    .dashboard-app-page aside .offcanvas-lg {
        height: 100%;
        position: static !important;
        transform: none !important;
    }

    .dashboard-app-page aside .offcanvas-body {
        height: 100%;
        overflow-y: auto;
        padding-bottom: 2rem;
    }

    /* Remove spacer div */
    .dashboard-app-page aside .d-none.d-lg-block[style*="height: 105px"] {
        display: none !important;
    }
}

/* Main content area */
.dashboard-app-page .col-lg-10 {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
}

/* App container */
.dashboard-app-page .app-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* App header */
.dashboard-app-page .app-header-desktop,
.dashboard-app-page .app-header-mobile {
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--fn-border-color, #e0e5eb);
    background-color: var(--fn-body-bg, #fff);
}

/* Loading and error states */
.dashboard-app-page #app-loading,
.dashboard-app-page #app-error {
    flex-shrink: 0;
    margin: 1rem 1.5rem;
}

/* Iframe wrapper - FIXED: Enable scrolling */
.dashboard-app-page .app-iframe-wrapper {
    flex: 1;
    margin: 0 1.5rem 1.5rem 1.5rem;
    border: 1px solid var(--fn-border-color, #e0e5eb);
    border-radius: 0.5rem;
    background: #fff;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.dashboard-app-page .app-iframe {
    width: 100%;
    border: none;
    flex: 1;
    min-height: 0;
}

/* Immersive iframe layout - FIXED: Better scrolling */
.dashboard-app-page .app-container--immersive {
    flex: 1;
    height: 100%;
    min-height: 0;
}

.dashboard-app-page .app-container--immersive #app-loading,
.dashboard-app-page .app-container--immersive #app-error {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.dashboard-app-page .app-container--immersive .app-iframe-wrapper {
    flex: 1;
    margin: 0;
    border: none;
    border-radius: 0;
    height: 100%;
    min-height: 0;
    display: flex;
    position: relative;
}

.dashboard-app-page .app-container--immersive .app-iframe {
    width: 100%;
    flex: 1;
    min-height: 100%;
    border: 0;
    display: block;
}

/* Mobile responsive adjustments */
@media (max-width: 991.98px) {
    /*
     * Key fix: The aside element must not interfere with Bootstrap's offcanvas-lg behavior.
     * We collapse the aside to width:0 but keep overflow:visible so the offcanvas can escape.
     * We do NOT override Bootstrap's visibility/transform - let Bootstrap JS handle that.
     */
    .dashboard-app-page aside {
        position: absolute !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /*
     * Only override z-index to ensure offcanvas appears above iframe.
     * Do NOT set visibility or transform - Bootstrap handles these via JS.
     */
    .dashboard-app-page aside .offcanvas-lg {
        z-index: 9999 !important;
    }

    /* Backdrop for offcanvas - must be just below the offcanvas */
    .dashboard-app-page .offcanvas-backdrop {
        z-index: 9998 !important;
    }
    
    /* Main content takes full width on mobile */
    .dashboard-app-page .col-lg-10 {
        width: 100% !important;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
    }
    
    .dashboard-app-page .container-fluid > .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    /* App container mobile adjustments */
    .dashboard-app-page .app-container .app-header-desktop {
        display: none !important;
    }
    
    .dashboard-app-page .app-container .app-header-mobile {
        display: block !important;
        padding: 0.75rem 1rem;
    }
    
    /* Mobile iframe adjustments */
    .dashboard-app-page .app-iframe-wrapper {
        margin: 0;
        border: none;
        border-radius: 0;
    }
    
    .dashboard-app-page .app-container--immersive .app-iframe-wrapper {
        margin: 0;
    }
    
    /* Adjust navbar for mobile */
    .dashboard-app-page .navbar .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Mobile navigation and login page fixes */
@media (max-width: 991.98px) {
    /* Ensure mobile offcanvas works like dashboard sidebar */
    #navbarNav.offcanvas {
        width: 280px;
    }
    
    /* Style mobile navigation links */
    #navbarNav .navbar-nav .nav-link {
        padding: 1rem 1.5rem;
        color: var(--fn-body-color);
        text-decoration: none;
        border-bottom: 1px solid var(--fn-border-color, #e0e5eb);
        display: block;
    }
    
    #navbarNav .navbar-nav .nav-link:hover,
    #navbarNav .navbar-nav .nav-link:focus {
        color: var(--fn-primary);
        background-color: var(--fn-tertiary-bg);
    }
    
    #navbarNav .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }
    
    /* Center login form better on mobile */
    .d-flex.flex-column.min-vh-100 {
        justify-content: center !important;
        align-items: center !important;
        padding: 1rem !important;
    }
    
    .d-flex.flex-column.min-vh-100 .container {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 !important;
    }
    
    .d-flex.flex-column.min-vh-100 .col-md-6,
    .d-flex.flex-column.min-vh-100 .col-lg-5 {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .d-flex.flex-column.min-vh-100 .card {
        margin-bottom: 1rem !important;
        border-radius: 1rem !important;
    }
}

@media (min-width: 992px) {
    .dashboard-app-page .navbar .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .dashboard-app-page aside {
        border-right: 1px solid var(--fn-border-color, #e0e5eb);
    }
}