/* 
 * Mobile Sidebar Extension for Shards Dashboard
 * This file extends Shards Dashboard with mobile sidebar functionality
 * Place this file in: static/css/mobile-sidebar.css
 */

/* Mobile Navigation Toggle Button */
.mobile-sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: #6c757d;
    font-size: 1.5rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mobile-sidebar-toggle:hover {
    color: #495057;
}

.mobile-sidebar-toggle:focus {
    outline: none;
    color: #495057;
}

/* Mobile User Menu */
.mobile-user-menu {
    margin-left: auto;
}

/* Mobile Navigation Container */
.mobile-nav-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

/* Sidebar Backdrop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-backdrop.show {
    display: block !important;
    opacity: 1;
}

/* Sidebar Close Button */
.sidebar-close-btn {
    display: none;
    position: absolute;
    top: 1.3rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    z-index: 1060;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* .sidebar-close-btn:hover {
    color: #495057;
} */

/* Body scroll lock */
body.sidebar-open {
    overflow: hidden !important;
}

/* Mobile-specific styles with high specificity for Shards compatibility */
@media (max-width: 767.98px) {
    
    /* Show mobile toggle button */
    .mobile-sidebar-toggle {
        display: block !important;
    }
    
    /* Show close button on mobile */
    .sidebar-close-btn {
        display: block !important;
    }
    
    /* High specificity transform sidebar for mobile - override Shards */
    .container-fluid .row .main-sidebar.main-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        height: 100vh !important;
        width: 280px !important;
        z-index: 1050 !important;
        background: #fff !important;
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        
        /* Override Shards column properties with high specificity */
        flex: none !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        
        /* Ensure visibility */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Show sidebar when active */
    .container-fluid .row .main-sidebar.main-sidebar.show {
        left: 0 !important;
    }
    
    /* High specificity sidebar header styling */
    .container-fluid .row .main-sidebar.main-sidebar .main-navbar {
        position: sticky !important;
        top: 0 !important;
        background: #fff !important;
        border-bottom: 1px solid #e3e7ed !important;
        z-index: 1051 !important;
        display: block !important;
    }
    
    .container-fluid .row .main-sidebar.main-sidebar .main-navbar .navbar {
        padding: 1rem !important;
        display: flex !important;
    }
    
    .container-fluid .row .main-sidebar.main-sidebar .main-navbar .navbar-brand {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        display: block !important;
    }
    
    /* Hide any existing toggle elements from Shards */
    .container-fluid .row .main-sidebar .toggle-sidebar {
        display: none !important;
    }
    
    /* High specificity navigation wrapper */
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper {
        height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        padding: 1rem 0 !important;
        display: block !important;
        position: static !important;
    }
    
    /* High specificity navigation styling */
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item {
        width: 100% !important;
        margin-bottom: 0 !important;
        display: block !important;
        flex: none !important;
    }
    
    /* High specificity navigation links */
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item .nav-link {
        display: flex !important;
        align-items: center !important;
        padding: 0.875rem 1.5rem !important;
        color: #5a6169 !important;
        text-decoration: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        width: 100% !important;
        text-align: left !important;
        transition: all 0.2s ease !important;
        margin: 0 !important;
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item .nav-link:hover {
        background-color: #f8f9fa !important;
        color: #495057 !important;
    }
    
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item .nav-link.active {
        background-color: #007bfc !important;
        color: #fff !important;
    }
    
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item .nav-link i.material-icons {
        margin-right: 0.75rem !important;
        font-size: 1.25rem !important;
        width: 24px !important;
        text-align: center !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item .nav-link span {
        flex: 1 !important;
        font-weight: 500 !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* High specificity button styling in sidebar */
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item .btn,
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item button,
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item label.btn {
        width: calc(100% - 1rem) !important;
        margin: 0.25rem 0.5rem !important;
        text-align: left !important;
        justify-content: flex-start !important;
        border-radius: 0.375rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        transform: none !important;
    }
    
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item .btn i.material-icons {
        margin-right: 0.5rem !important;
        display: inline-block !important;
    }
    
    /* Dividers and spacing */
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item hr {
        width: calc(100% - 2rem) !important;
        margin: 1rem auto !important;
        border-color: #e3e7ed !important;
        display: block !important;
    }
    
    /* Main content adjustments */
    .main-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
        transition: none !important;
    }
    
    /* Top navbar adjustments */
    .main-navbar .navbar {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .main-navbar .dropdown-menu {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        transform: translateX(0) !important;
    }
    
    /* Hide desktop search on mobile */
    .main-navbar__search {
        display: none !important;
    }
    
    /* Ensure proper mobile layout */
    .container-fluid .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Smooth animations with performance optimization */
@media (max-width: 767.98px) {
    .main-sidebar,
    .sidebar-backdrop {
        will-change: transform, opacity;
    }
    
    /* Reduce motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
        .main-sidebar,
        .sidebar-backdrop {
            transition: none !important;
        }
    }
}

/* Dark mode support (if needed) */
@media (max-width: 767.98px) and (prefers-color-scheme: dark) {
    .container-fluid .row .main-sidebar.main-sidebar {
        background: #2c3e50 !important;
        color: #ecf0f1 !important;
    }
    
    .container-fluid .row .main-sidebar.main-sidebar .main-navbar {
        background: #2c3e50 !important;
        border-bottom-color: #34495e !important;
    }
    
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item .nav-link {
        color: #bdc3c7 !important;
    }
    
    .container-fluid .row .main-sidebar.main-sidebar .nav-wrapper .nav .nav-item .nav-link:hover {
        background-color: #34495e !important;
        color: #ecf0f1 !important;
    }
}

/* Show sidebar when active */
.container-fluid .row .main-sidebar.main-sidebar.show {
    left: 0 !important;
    transform: translateX(0) !important;
}