#dashboard .widget_nav_menu ul, 
.essentials .widget_nav_menu ul {
    display: grid !important; /* Overrides the existing flex display */
    grid-template-columns: repeat(2, 1fr); /* Creates two equal-width columns */
    gap: 15px; /* Slightly increased from the original 10px for breathing room */
    list-style-type: none;
    margin-top: 15px;
    padding: 0;
}

#dashboard .widget_nav_menu ul .menu-item a, 
.essentials .widget_nav_menu ul .menu-item a {
    display: flex;
    flex-direction: column; /* Stacks the icon above the text */
    align-items: center;
    justify-content: center;
    padding: 25px; /* Increased padding for a larger click target */
    
    /* Modern Card Styling */
    background-color: #ffffff !important; /* Overrides #dadbde */
    border: 1px solid #e2e8f0 !important; /* Overrides #9E9E9E */
    border-radius: 8px; /* Slightly rounder corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    
    /* Typography & Layout */
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    width: 100%; /* Ensures the button fills the grid cell */
    box-sizing: border-box;
    
    /* Smooth transition for hover effects */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#dashboard .widget_nav_menu ul .menu-item a:hover, 
.essentials .widget_nav_menu ul .menu-item a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
    border-color: #900000 !important; /* Subtle tie-in to the maroon brand color */
}

#dashboard .widget_nav_menu ul .menu-item a i, 
.essentials .widget_nav_menu ul .menu-item a i {
    font-size: 1.25em; /* Scales the icon up slightly */
    color: var(--wj-red) !important; /* Uses the maroon brand color for visual hierarchy */
    margin-bottom: 4px;
}