/* =========================================
   UI/UX FIXES - Sticky Header & Z-Index
   December 17, 2025
   ========================================= */

/* =========================================
   Z-INDEX HIERARCHY
   Higher number = on top
   ========================================= */
.command-palette,
#commandPalette { 
    z-index: 10000 !important; 
}

.modal-backdrop { 
    z-index: 9998 !important; 
}

.modal,
.modal-dialog { 
    z-index: 9999 !important; 
}

.sticky-header-component,
.sticky-header { 
    z-index: 1050 !important; 
}

.layout-navbar,
.navbar {
    z-index: 1040 !important; 
}

.enterprise-sidebar,
.layout-menu,
#layout-menu { 
    z-index: 1030 !important; 
}

.layout-overlay { 
    z-index: 1020 !important; 
}

/* =========================================
   NAVBAR - ALWAYS ON TOP
   ========================================= */
.layout-navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    height: 60px;
}

/* Adjust navbar when sidebar is present */
.layout-wrapper .layout-navbar {
    left: 260px; /* Classic sidebar width */
}

.enterprise-sidebar ~ .layout-page .layout-navbar {
    left: 280px; /* Enterprise sidebar width */
}

/* Collapsed sidebar */
.layout-menu-collapsed ~ .layout-page .layout-navbar,
.enterprise-sidebar[data-collapsed="true"] ~ .layout-page .layout-navbar {
    left: 80px;
}

/* =========================================
   STICKY HEADER POSITIONING
   ========================================= */
.sticky-header-component,
.sticky-header {
    position: sticky;
    top: 60px; /* Below navbar */
    z-index: 1050;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 0;
    padding: 1rem;
    transition: all 0.3s ease;
}

/* Prevent double margins */
.content-wrapper > .sticky-header-component:first-child,
.content-wrapper > .sticky-header:first-child {
    margin-top: -1.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* =========================================
   CONTENT WRAPPER SPACING
   ========================================= */
.content-wrapper {
    padding-top: 80px; /* Navbar height + spacing */
    min-height: calc(100vh - 80px);
    position: relative;
}

/* When sticky header is present */
.content-wrapper:has(.sticky-header-component),
.content-wrapper:has(.sticky-header) {
    padding-top: 60px;
}

/* =========================================
   SIDEBAR ADJUSTMENTS
   ========================================= */

/* Enterprise Sidebar */
.enterprise-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--sidebar-bg, #0f0a1f);
    transition: transform 0.3s ease, width 0.3s ease;
}

.enterprise-sidebar[data-collapsed="true"] {
    width: 80px;
}

/* Classic Sidebar */
.layout-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.3s ease, width 0.3s ease;
}

.layout-menu-collapsed .layout-menu {
    width: 80px;
}

/* =========================================
   LAYOUT PAGE ADJUSTMENTS
   ========================================= */
.layout-page {
    padding-left: 260px; /* Classic sidebar */
    transition: padding-left 0.3s ease;
    min-height: 100vh;
}

.enterprise-sidebar ~ .layout-page {
    padding-left: 280px; /* Enterprise sidebar */
}

.layout-menu-collapsed ~ .layout-page,
.enterprise-sidebar[data-collapsed="true"] ~ .layout-page {
    padding-left: 80px;
}

/* =========================================
   PREVENT SCROLL ISSUES
   ========================================= */

/* Prevent body scroll when modals are open */
body.modal-open {
    overflow: hidden;
    padding-right: 0 !important; /* Prevent layout shift */
}

/* Scrollable sidebar */
.enterprise-sidebar,
.layout-menu {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.enterprise-sidebar::-webkit-scrollbar,
.layout-menu::-webkit-scrollbar {
    width: 6px;
}

.enterprise-sidebar::-webkit-scrollbar-track,
.layout-menu::-webkit-scrollbar-track {
    background: transparent;
}

.enterprise-sidebar::-webkit-scrollbar-thumb,
.layout-menu::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.enterprise-sidebar::-webkit-scrollbar-thumb:hover,
.layout-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

/* =========================================
   MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 1199px) {
    /* Remove sidebar offset on mobile */
    .layout-page {
        padding-left: 0 !important;
    }
    
    .layout-navbar {
        left: 0 !important;
        right: 0;
    }
    
    .sticky-header-component,
    .sticky-header {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Sidebar slides in from left */
    .enterprise-sidebar,
    .layout-menu {
        transform: translateX(-100%);
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    }
    
    /* Show sidebar when active */
    .enterprise-sidebar.active,
    .layout-menu.active,
    .layout-menu-expanded .layout-menu {
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    /* Reduce navbar height on mobile */
    .layout-navbar {
        height: 56px;
    }
    
    .sticky-header-component,
    .sticky-header {
        top: 56px;
        padding: 0.75rem;
    }
    
    .content-wrapper {
        padding-top: 70px;
    }
    
    /* Smaller font sizes for mobile */
    .sticky-header-component h1,
    .sticky-header h1 {
        font-size: 1.25rem !important;
    }
}

/* =========================================
   TABLET RESPONSIVE
   ========================================= */
@media (min-width: 768px) and (max-width: 1199px) {
    .enterprise-sidebar,
    .layout-menu {
        width: 240px;
    }
    
    .enterprise-sidebar[data-collapsed="true"],
    .layout-menu-collapsed .layout-menu {
        width: 70px;
    }
}

/* =========================================
   SMOOTH TRANSITIONS
   ========================================= */
.layout-page,
.layout-navbar,
.sticky-header-component,
.sticky-header,
.enterprise-sidebar,
.layout-menu {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   ACCESSIBILITY
   ========================================= */

/* Focus states */
.sticky-header-component:focus-within,
.sticky-header:focus-within {
    outline: 2px solid #6366f1;
    outline-offset: -2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .layout-page,
    .layout-navbar,
    .sticky-header-component,
    .sticky-header,
    .enterprise-sidebar,
    .layout-menu {
        transition: none;
    }
}

/* =========================================
   PRINT STYLES
   ========================================= */
@media print {
    .enterprise-sidebar,
    .layout-menu,
    .layout-navbar,
    .sticky-header-component,
    .sticky-header {
        display: none !important;
    }
    
    .layout-page {
        padding: 0 !important;
    }
    
    .content-wrapper {
        padding: 0 !important;
    }
}

/* =========================================
   DARK MODE SUPPORT
   ========================================= */
@media (prefers-color-scheme: dark) {
    .sticky-header-component,
    .sticky-header {
        background: #1a1a2e;
        color: #e2e8f0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .layout-navbar {
        background: #0f0f23;
        color: #e2e8f0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}

/* =========================================
   FIX SPECIFIC OVERLAPPING ISSUES
   ========================================= */

/* Ensure dropdown menus appear above sticky header */
.dropdown-menu,
.select2-dropdown {
    z-index: 1060 !important;
}

/* Ensure tooltips appear above everything except modals */
.tooltip {
    z-index: 9990 !important;
}

/* Date picker calendar */
.daterangepicker,
.bootstrap-datetimepicker-widget {
    z-index: 1070 !important;
}

/* Floating action buttons */
.chat-img,
.timer-img,
.enterprise-toggle {
    z-index: 1010 !important;
}

/* Command palette trigger */
.sidebar-search-box {
    z-index: inherit;
}

/* =========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================= */

/* Use GPU  acceleration for transforms */
.enterprise-sidebar,
.layout-menu,
.layout-page,
.sticky-header-component,
.sticky-header {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* =========================================
   END OF UI FIXES
   ========================================= */