/*
==========================================================================
LEONUX UI - LAYOUT SYSTEM
==========================================================================
Purpose: Structural skeleton, responsive logic, and container management.
Logic: Desktop Sidebar -> Mobile Bottom Bar.
==========================================================================
*/

/* ---------------------------------- */
/* 1. SIDEBAR / NAVIGATION RAIL       */
/* ---------------------------------- */
.app-rail {
    position: sticky;
    top: 0;
    width: clamp(5rem, 6vw, 8rem);
    height: 100vh;
    height: 100dvh; /* Dynamic viewport support */
    background-color: var(--color-bg-surface-1);
    border-right: 1px solid var(--glass-border);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    gap: var(--space-md);
    
    z-index: var(--z-sticky);
    flex-shrink: 0;
    transition: transform var(--duration-normal) var(--ease-smooth);
    will-change: transform;
}

/* ---------------------------------- */
/* 2. MAIN CONTENT AREA               */
/* ---------------------------------- */
.app-main {
    flex: 1;
    position: relative;
    /* Use grid for better centering logic */
    display: grid;
    place-items: center;
    grid-template-rows: 1fr;
    
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    
    padding: var(--space-md);
    /* Ensure content doesn't get cut off at bottom scroll */
    padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom)); 
    
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.03) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 20%);
    background-attachment: fixed;
    
    scroll-behavior: smooth;
    isolation: isolate; /* Create new stacking context */
}

/* ---------------------------------- */
/* 3. VIEW CONTAINER                  */
/* ---------------------------------- */
.view-container {
    position: relative;
    width: 100%;
    /* Optimal reading width, but allows full width on smaller devices */
    width: min(100% - var(--space-md), 45rem);
    
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    
    margin: auto;
    opacity: 0;
    animation: viewEnter var(--duration-normal) var(--ease-snappy) forwards;
}

/* Smooth entry animation */
@keyframes viewEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ---------------------------------- */
/* 4. THEME FLOATING BUTTON           */
/* ---------------------------------- */
.theme-float-btn {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    z-index: var(--z-sticky);
    
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    
    background: var(--color-bg-surface-2);
    border: 1px solid var(--glass-border);
    color: var(--color-text-dim);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    transition: all 0.3s var(--ease-smooth);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.theme-float-btn:hover {
    background: var(--color-bg-surface-3);
    color: var(--color-text-main);
    transform: rotate(15deg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* ---------------------------------- */
/* 5. RESPONSIVE BREAKPOINTS          */
/* ---------------------------------- */

/* Tablet & Mobile (Below 768px) */
@media (max-width: 768px) {
    body {
        flex-direction: column-reverse; /* Stack nav at bottom */
    }

    .app-rail {
        width: 100%;
        height: clamp(3.5rem, 8vh, 5rem);
        flex-direction: row;
        justify-content: space-evenly;
        
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom);
        
        border-right: none;
        border-top: 1px solid var(--glass-border);
        background: rgba(var(--color-bg-surface-1), 0.95); /* Fallback if hex */
        background: var(--color-bg-surface-1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        
        position: sticky;
        bottom: 0;
        left: 0;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    }

    .app-main {
        /* On mobile, align top instead of center to prevent keyboard hiding content */
        place-items: start center;
        height: auto;
        min-height: calc(100dvh - 5rem); /* Adjust based on rail height */
        padding-bottom: var(--space-2xl); /* Space for scrolling past bottom nav */
    }
    
    .view-container {
        width: 100%;
        margin-top: var(--space-lg);
        margin-bottom: var(--space-lg);
    }
    
    /* Adjust theme button on mobile to avoid overlap */
    .theme-float-btn {
        top: var(--space-sm);
        right: var(--space-sm);
    }
}

/* Small Mobile (Below 380px) */
@media (max-width: 380px) {
    .app-rail { gap: 0; }
    .view-container { gap: var(--space-md); }
}

/* Ultra Wide & 8K (Above 2000px) */
@media (min-width: 2000px) {
    .view-container {
        width: min(80%, 60rem); 
    }
    .app-rail {
        border-right-width: 2px;
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .app-rail { display: none; }
    .app-main { padding: var(--space-sm); }
    .view-container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
        max-width: none;
    }
}