/**


 * css/navigation.css


 * Focuses on Mobile Navigation Tab Bar, Bottom Sheets, Slide Sidebars, and FAB configurations


 */





/* Mobile-First Floating Global Bottom Navigation Menu Bar Layout */


.bottom-tabs {


    position: fixed; 


    left: 0; 


    right: 0; 


    bottom: 0; 


    height: var(--tab-height);


    display: flex; 


    justify-content: space-around; 


    align-items: center;


    background: linear-gradient(180deg, rgba(6,6,7,0.90), rgba(6,6,7,0.99));


    padding: 0 calc(env(safe-area-inset-left) + 4px) env(safe-area-inset-bottom);


    z-index: 50; 


    border-top: 1px solid rgba(255,255,255,0.08); 


    backdrop-filter: blur(16px);


    box-sizing: border-box;


}





/* Enlarged Touch Targets for Thumb Accessibility */


.tab-btn { 


    display: flex; 


    flex-direction: column; 


    align-items: center; 


    justify-content: center;


    gap: 4px; 


    color: var(--muted); 


    font-size: 12px;


    font-weight: 500;


    flex: 1; 


    min-height: 48px; /* Accessible physical touch-target boundary standard */


    cursor: pointer; 


    -webkit-tap-highlight-color: transparent;


}


.tab-btn .tab-icon {


    font-size: 18px; /* High visibility scaling for descriptive emoji glyph blocks */


    line-height: 1;


}


.tab-btn.active { color: #fff; }


.tab-btn:active { background: rgba(255,255,255,0.03); border-radius: 8px; }





/* Floating Action Button (FAB) configuration */


.fab {


    position: fixed; 


    right: 16px; 


    bottom: calc(var(--tab-height) + env(safe-area-inset-bottom) + 16px);


    width: 56px; 


    height: 56px; 


    border-radius: 16px; 


    background: linear-gradient(180deg, var(--accent), #00a88f);


    display: flex; 


    align-items: center; 


    justify-content: center; 


    box-shadow: 0 8px 24px rgba(0,0,0,0.5); 


    z-index: 60; 


    cursor: pointer;


}


.fab svg { width: 22px; height: 22px; fill: #02120f; }





/* Slide-out Left Navigation Engine Drawer */


.sidebar {


    position: fixed; 


    left: 0; 


    top: 0; 


    bottom: 0; 


    width: 320px; 


    max-width: 85%;


    transform: translateX(-110%); 


    transition: transform .28s cubic-bezier(.2, .9, .3, 1); 


    z-index: 70;


    padding: calc(env(safe-area-inset-top) + 12px) 12px 12px; 


    background: #050506; 


    border-right: 1px solid rgba(255,255,255,0.06); 


    overflow-y: auto;


}


.sidebar.open { transform: translateX(0); }





/* Backdrop dim overlay layer context rules */


.sidebar-backdrop { 


    position: fixed; 


    inset: 0; 


    background: rgba(0,0,0,0.6); 


    opacity: 0; 


    transition: opacity .2s; 


    z-index: 65; 


    pointer-events: none; 


}


.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }





/* Bottom Modal Sheet overlay for Calendar Day Rules Configuration */


.sheet {


    position: fixed; 


    left: 0; 


    right: 0; 


    bottom: 0; 


    background: linear-gradient(180deg, #0f0f10, #0b0b0c);


    border-top-left-radius: 16px; 


    border-top-right-radius: 16px; 


    padding: 16px 16px calc(env(safe-area-inset-bottom) + 16px);


    transform: translateY(110%); 


    transition: transform .28s cubic-bezier(.2, .9, .3, 1); 


    z-index: 80; 


    border-top: 1px solid rgba(255,255,255,0.08);


}


.sheet.open { transform: translateY(0); }