/* Custom Scrollbar Styling - Neat and Clean Look for All Admin Portal Pages */
/* Author: Iceberg Technologies */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    border-radius: 10px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4);
}

::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.05);
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: #2196F3 rgba(0, 0, 0, 0.05);
}

/* Custom scrollbar for sidebar navigation menu */
.menu-aside::-webkit-scrollbar {
    width: 6px;
}

.menu-aside::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.menu-aside::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    border-radius: 8px;
}

.menu-aside::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3));
}

/* Table scrollbar styling */
.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #FF9800, #F57C00);
    border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #F57C00, #E65100);
}

/* Category list horizontal scrollbar */
.category-list::-webkit-scrollbar {
    height: 6px;
}

.category-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}

.category-list::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #2196F3, #FF9800);
    border-radius: 6px;
}

.category-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #1976D2, #F57C00);
}

/* Content area scrollbar styling */
.content-main::-webkit-scrollbar {
    width: 8px;
}

.content-main::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}

.content-main::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    border-radius: 8px;
}

.content-main::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

/* Card body scrollbar styling */
.card-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.card-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
}

.card-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #FF9800, #F57C00);
    border-radius: 6px;
}

.card-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #F57C00, #E65100);
}

/* Form container scrollbar */
.form-container::-webkit-scrollbar,
.itemCreateForm::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.form-container::-webkit-scrollbar-track,
.itemCreateForm::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
}

.form-container::-webkit-scrollbar-thumb,
.itemCreateForm::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    border-radius: 6px;
}

.form-container::-webkit-scrollbar-thumb:hover,
.itemCreateForm::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #388E3C, #2E7D32);
}

/* Modal scrollbar styling */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
    border-radius: 6px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #7B1FA2, #6A1B9A);
}

/* Dropdown menu scrollbar */
.dropdown-menu::-webkit-scrollbar {
    width: 4px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #607D8B, #455A64);
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #455A64, #37474F);
}

/* Search results scrollbar */
.search-results::-webkit-scrollbar,
.searchform::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.search-results::-webkit-scrollbar-track,
.searchform::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
}

.search-results::-webkit-scrollbar-thumb,
.searchform::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #FF5722, #D84315);
    border-radius: 6px;
}

.search-results::-webkit-scrollbar-thumb:hover,
.searchform::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #D84315, #BF360C);
}

/* Dashboard specific scrollbars */
.dashboard-widget::-webkit-scrollbar,
.statistics-container::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.dashboard-widget::-webkit-scrollbar-track,
.statistics-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 5px;
}

.dashboard-widget::-webkit-scrollbar-thumb,
.statistics-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #00BCD4, #0097A7);
    border-radius: 5px;
}

.dashboard-widget::-webkit-scrollbar-thumb:hover,
.statistics-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0097A7, #00838F);
}

/* List containers scrollbar */
.list-group::-webkit-scrollbar,
.nav-pills::-webkit-scrollbar {
    width: 5px;
}

.list-group::-webkit-scrollbar-track,
.nav-pills::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 5px;
}

.list-group::-webkit-scrollbar-thumb,
.nav-pills::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #795548, #5D4037);
    border-radius: 5px;
}

.list-group::-webkit-scrollbar-thumb:hover,
.nav-pills::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5D4037, #4E342E);
}

/* Textarea and code editor scrollbar */
textarea::-webkit-scrollbar,
.code-editor::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

textarea::-webkit-scrollbar-track,
.code-editor::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}

textarea::-webkit-scrollbar-thumb,
.code-editor::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #9E9E9E, #757575);
    border-radius: 6px;
}

textarea::-webkit-scrollbar-thumb:hover,
.code-editor::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #757575, #616161);
}

/* Data tables and grid scrollbar */
.dataTables_wrapper::-webkit-scrollbar,
.grid-container::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.dataTables_wrapper::-webkit-scrollbar-track,
.grid-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 7px;
}

.dataTables_wrapper::-webkit-scrollbar-thumb,
.grid-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #3F51B5, #303F9F);
    border-radius: 7px;
}

.dataTables_wrapper::-webkit-scrollbar-thumb:hover,
.grid-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #303F9F, #283593);
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    .menu-aside::-webkit-scrollbar {
        width: 4px;
    }
    
    .table-responsive::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
}

/* Smooth scrolling behavior for all containers */
html {
    scroll-behavior: smooth;
}

* {
    scroll-behavior: smooth;
}

/* Sidebar menu scroll behavior enhancement */
.menu-aside {
    scroll-behavior: smooth !important;
}

.menu-aside .menu-item.active {
    scroll-margin-top: 20px !important;
    scroll-margin-bottom: 20px !important;
}

/* Hide Perfect Scrollbar rails in sidebar (avoid double scrollbars) */
#offcanvas_aside .ps__rail-y,
#offcanvas_aside .ps__rail-x {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Uniform Sidebar Width for All Pages */
.navbar-aside {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex: 0 0 280px !important;
}

/* Ensure main content adjusts to sidebar width */
.main-wrap {
    margin-left: 280px !important;
}

/* Brand wrap consistent sizing */
.brand-wrap {
    width: calc(100% - 30px) !important;
    margin: 15px !important;
    padding: 25px 15px !important;
    box-sizing: border-box !important;
}

/* Menu items consistent spacing */
.menu-aside .menu-link {
    margin: 5px 15px !important;
    padding: 12px 20px !important;
    width: calc(100% - 30px) !important;
    box-sizing: border-box !important;
}

.menu-aside .menu-item.active .menu-link {
    margin: 8px 15px !important;
    width: calc(100% - 30px) !important;
    box-sizing: border-box !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .navbar-aside {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        flex: 0 0 260px !important;
    }
    
    .main-wrap {
        margin-left: 260px !important;
    }
}

@media (max-width: 768px) {
    .navbar-aside {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        flex: 0 0 240px !important;
    }
    
    .main-wrap {
        margin-left: 0 !important;
    }
}