/* ========================================
   1. SIDEBAR LOGO STYLING
   ======================================== */
.unfold-sidebar .navigation_header {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.unfold-sidebar .navigation_header > div {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
}

.unfold-sidebar .navigation_header img {
    margin: 10px auto;
    border-radius: 0px;
}

/* ========================================
   2. GLOBAL LAYOUT & BOX SIZING
   ======================================== */
html,
body {
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ========================================
   3. MAIN PAGE LAYOUT - FLEX CONTAINER
   ======================================== */
#page {
    display: flex;
    width: 100%;
    min-height: 100vh;
    gap: 0;
}

#main {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    transition: margin-left 0.3s ease;
}

/* ========================================
   4. DESKTOP LAYOUT (XL: 1280px+)
      - Sidebar VISIBLE side-by-side
      - Main has left margin for sidebar
   ======================================== */
@media (min-width: 1280px) {
    /* Navigation wrapper container */
    div.relative.z-60 {
        position: relative;
        height: auto;
        z-index: 40;
        flex-shrink: 0;
    }
    
    /* Navigation sidebar div */
    div[class*="navigation_wrapper"] {
        position: relative;
        height: auto;
        background: transparent;
        z-index: 50;
    }
    
    /* Main nav-sidebar */
    #nav-sidebar {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 288px;
        height: 100vh;
        border-right: 1px solid #e5e7eb;
        background: white;
        z-index: 50;
        overflow-y: auto;
    }
    
    /* Main content expands to fill remaining space in flex container */
    #main {
        margin-left: 0;
        width: 100%;
    }
    
    /* Hide mobile backdrop on desktop */
    .bg-black\/50 {
        display: none !important;
    }
}

/* ========================================
   5. TABLET/MOBILE LAYOUT (< 1280px)
      - Sidebar OVERLAY by default
      - Main takes full width
      - Sidebar shows/hides with Alpine state
   ======================================== */
@media (max-width: 1279px) {
    /* Navigation wrapper container */
    div.relative.z-60 {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9998; /* High z-index but below sidebar */
        pointer-events: none;
    }
    
    /* Mobile overlay backdrop */
    .bg-black\/50 {
        pointer-events: auto;
        z-index: 9998;
    }
    
    /* Navigation sidebar - fixed overlay */
    div[class*="navigation_wrapper"] {
        display: block !important;
        position: fixed;
        left: 0;
        top: 0;
        width: 288px;
        height: 100vh;
        background: white;
        z-index: 9999 !important; /* Highest z-index */
        overflow-y: auto;
        pointer-events: auto !important;
    }
    
    /* Hide sidebar by default */
    div[class*="navigation_wrapper"].hidden {
        display: none !important;
    }
    
    /* Show sidebar when block class present */
    div[class*="navigation_wrapper"].block {
        display: block !important;
    }
    
    /* Main nav-sidebar inside the wrapper */
    #nav-sidebar {
        display: block;
        position: relative; /* Relative to wrapper */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: white;
        z-index: 9999;
        overflow-y: auto;
        border-right: 1px solid #e5e7eb;
        pointer-events: auto;
    }
    
    /* Main content full width on mobile */
    #main {
        width: 100%;
        margin-left: 0;
        position: relative;
        z-index: 10; /* Keep content below sidebar */
    }
}

/* ========================================
   6. ENSURE ALL BUTTONS ARE CLICKABLE
   ======================================== */
button,
[role="button"],
a[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: auto;
}

/* ========================================
   7. PREVENT LAYOUT SHIFT
   ======================================== */
html {
    scrollbar-gutter: stable;
}

/* ========================================
   8. ALPINE TRANSITIONS & STATES
   ======================================== */
[x-cloak] {
    display: none !important;
}