/* Custom Menu Styles */
.app-sidebar {
    background-color: #ffffff !important;
    top: 80px !important; /* Start from below header (h-20 = 80px) */
}

/* Menu item colors for white background */
.app-sidebar .side-menu__item {
    color: #374151 !important; /* Dark gray text */
}

.app-sidebar .side-menu__item:is(.dark *) {
    color: #374151 !important; /* Dark gray text */
}

/* Menu label colors */
.app-sidebar .side-menu__label {
    color: #374151 !important; /* Dark gray text */
}

.app-sidebar .side-menu__label:is(.dark *) {
    color: #374151 !important; /* Dark gray text */
}

/* Menu icon colors */
.app-sidebar .side-menu__icon {
    color: #6b7280 !important; /* Medium gray icons */
    border-radius: 0 !important; /* Remove border radius */
    display: block !important; /* Ensure full display */
    width: 20px !important; /* Set explicit width */
    height: 20px !important; /* Set explicit height */
    object-fit: contain !important; /* Ensure image fits properly */
}

.app-sidebar .side-menu__icon:is(.dark *) {
    color: #6b7280 !important; /* Medium gray icons */
    border-radius: 0 !important; /* Remove border radius */
    display: block !important; /* Ensure full display */
    width: 20px !important; /* Set explicit width */
    height: 20px !important; /* Set explicit height */
    object-fit: contain !important; /* Ensure image fits properly */
}

/* Specific styles for img elements in menu icons */
.app-sidebar .side-menu__icon img {
    border-radius: 0 !important; /* Remove border radius from images */
    display: block !important; /* Ensure full display */
    width: 20px !important; /* Set explicit width */
    height: 20px !important; /* Set explicit height */
    object-fit: contain !important; /* Ensure image fits properly */
    overflow: visible !important; /* Ensure no clipping */
}

/* Active/Hover states */
.app-sidebar .side-menu__item.active,
.app-sidebar .side-menu__item:hover {
    background-color: #f3f4f6 !important; /* Light gray background */
    color: #1f2937 !important; /* Darker text */
}

.app-sidebar .side-menu__item.active .side-menu__label,
.app-sidebar .side-menu__item:hover .side-menu__label {
    color: #1f2937 !important; /* Darker text */
}

.app-sidebar .side-menu__item.active .side-menu__icon,
.app-sidebar .side-menu__item:hover .side-menu__icon {
    color: #3b82f6 !important; /* Blue accent for active/hover icons */
}

/* Remove category styling since we removed the category */
.app-sidebar .slide__category {
    display: none !important;
}

/* Adjust main sidebar padding */
.app-sidebar .main-sidebar {
    padding-top: 0 !important;
}

/* Remove top margin from content area */
.content {
    margin-top: 0 !important;
}

/* Fix last sidebar menu item being hidden */
.app-sidebar .main-menu {
    padding-bottom: 80px !important;
}

/* Ensure sidebar fills available height on all screens */
.app-sidebar .main-sidebar {
    height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
}