/* --- Styles specific to the RadzenPanelMenu within the main sidebar --- */

/* Target the menu component within the sidebar context */
.sidebar .app-navmenu.rz-panel-menu {
    background: none; /* Remove default Radzen background, inherit from .sidebar */
    border: none; /* Remove default Radzen border */
    width: 100%;
    height: 100%;
}

/* Style top-level and nested menu item links */
.sidebar .app-navmenu .rz-navigation-item-link {
    color: #adb5bd; /* Default text color (adjust to match sidebar text) */
    padding: 0.75rem 1.5rem; /* Vertical and horizontal padding */
    display: flex;
    align-items: center;
    text-decoration: none;
    border-left: 3px solid transparent; /* Indicator space for active item */
    transition: background-color 0.2s ease, color 0.2s ease, border-left-color 0.2s ease;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Style the icons within menu items */
    .sidebar .app-navmenu .rz-navigation-item-link .rz-navigation-item-icon,
    .sidebar .app-navmenu .rz-navigation-item-link img /* Target your custom images too */ {
        color: #adb5bd; /* Match text color or use a specific icon color */
        margin-right: 10px; /* Space between icon and text */
        flex-shrink: 0; /* Prevent icon from shrinking */
        width: 20px; /* Ensure consistent icon/image width */
        height: 20px; /* Ensure consistent icon/image height */
        vertical-align: middle; /* Align icons/images nicely with text */
    }


    /* Style the text within menu items */
    .sidebar .app-navmenu .rz-navigation-item-link .rz-panel-menu-item-text,
    .sidebar .app-navmenu .rz-navigation-item-link .rz-navigation-item-text /* Radzen v4+ uses this class */ {
        font-size: 0.9rem; /* Adjust text size */
        flex-grow: 1; /* Allow text to take remaining space */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hover state for menu items */
    .sidebar .app-navmenu .rz-navigation-item-link:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Subtle background on hover */
        color: #ffffff; /* Lighter text on hover */
        border-left-color: #4a5568; /* Subtle border color hint on hover */
    }

        .sidebar .app-navmenu .rz-navigation-item-link:hover .rz-navigation-item-icon,
        .sidebar .app-navmenu .rz-navigation-item-link:hover img {
            color: #ffffff; /* Lighter icon on hover */
        }

/* Active state for menu items (when the path matches) */
.sidebar .app-navmenu .rz-navigation-item-wrapper-active > .rz-navigation-item-link {
    background-color: rgba(66, 153, 225, 0.1); /* Active background (e.g., light blue tint) */
    color: #ffffff; /* Active text color */
    border-left-color: #4299e1; /* Active indicator color (e.g., blue) */
    font-weight: 500; /* Slightly bolder text */
}

    .sidebar .app-navmenu .rz-navigation-item-wrapper-active > .rz-navigation-item-link .rz-navigation-item-icon,
    .sidebar .app-navmenu .rz-navigation-item-wrapper-active > .rz-navigation-item-link img {
        color: #ffffff; /* Active icon color */
    }


/* Style the expand/collapse icon for parent items */
.sidebar .app-navmenu .rz-navigation-item-link .rz-navigation-item-icon-children {
    font-size: 0.7rem; /* Smaller arrow */
    margin-left: auto; /* Push arrow to the right */
    transition: transform 0.2s ease;
}

/* Rotate the arrow when expanded */
.sidebar .app-navmenu .rz-navigation-item-expanded > .rz-navigation-item-link .rz-navigation-item-icon-children {
    transform: rotate(90deg);
}


/* Indentation for child menu items */
/* Target the nested menu structure */
.sidebar .app-navmenu .rz-navigation-menu .rz-navigation-item-link {
    padding-left: 2.5rem; /* Increase left padding for indentation */
}

/* Further indentation for grandchildren if needed */
.sidebar .app-navmenu .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link {
    padding-left: 3.5rem;
}

/* Active State */
.rz-navigation-item-wrapper-active > .rz-navigation-item-link {
    background-color: var(--sidebar-active-bg, rgba(255, 255, 255, 0.1)) !important;
    color: var(--sidebar-active-text, #ffffff) !important;
    border-left-color: var(--sidebar-active-border, currentColor) !important;
    font-weight: 500;
}

    /* Icon Color in Active State */
    .rz-navigation-item-wrapper-active > .rz-navigation-item-link .rz-navigation-item-icon,
    .rz-navigation-item-wrapper-active > .rz-navigation-item-link img {
        color: var(--sidebar-active-text, #ffffff) !important;
    }

/* Hover State */
.rz-navigation-item-link:hover {
    background-color: var(--sidebar-hover-bg, rgba(255, 255, 255, 0.05)) !important;
    color: #ffffff !important;
}