body {
   
}
.custom-drawer {
    /*margin-top: 12px;  To lift from top */
    margin-right: 12px; /* Space from left edge */
    /*border-radius: 20px;*/ /* Rounded corners */
    overflow: hidden;
    /*box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.8)!important;*/ /* Optional */  
    /*backdrop-filter: blur(17px)!important;*/ /* Optional glass effect */
}

/* Sidebar 3D icon style (Figma-like) */
.custom-drawer .sidebar-3d .mud-nav-link-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 11px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: #ffffff !important;
    box-shadow:
        0 7px 14px rgba(15, 23, 42, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
    --nav3d-icon: none;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 72% 72% !important;
    background-image: var(--nav3d-icon);
}

.custom-drawer .sidebar-3d .mud-nav-link .mud-icon-root,
.custom-drawer .sidebar-3d .mud-nav-group .mud-nav-link .mud-icon-root {
    color: transparent !important;
    font-size: 19px !important;
    filter: none;
    opacity: 0;
}

.custom-drawer .sidebar-3d .mud-nav-link:hover .mud-nav-link-icon,
.custom-drawer .sidebar-3d .mud-nav-group .mud-nav-link:hover .mud-nav-link-icon {
    transform: translateY(-1px);
    filter: saturate(1.1) brightness(1.03);
}

.custom-drawer .sidebar-3d .mud-nav-link.mud-nav-link-active .mud-nav-link-icon,
.custom-drawer .sidebar-3d .mud-nav-group .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
    box-shadow:
        0 9px 18px rgba(79, 70, 229, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Per section icon palettes */
.custom-drawer .sidebar-3d .nav3d-catalog .mud-nav-link-icon {
    background: linear-gradient(145deg, #38bdf8 0%, #3b82f6 100%);
    --nav3d-icon: url('/icons/sidebar/catalog.png');
}

.custom-drawer .sidebar-3d .nav3d-pos .mud-nav-link-icon {
    background: linear-gradient(145deg, #6366f1 0%, #8b5cf6 100%);
    --nav3d-icon: url('/icons/sidebar/pos.png');
}

.custom-drawer .sidebar-3d .nav3d-restaurant .mud-nav-link-icon {
    background: linear-gradient(145deg, #f59e0b 0%, #ef4444 100%);
    --nav3d-icon: url('/icons/sidebar/restaurant.png');
}

.custom-drawer .sidebar-3d .nav3d-customers .mud-nav-link-icon,
.custom-drawer .sidebar-3d .nav3d-users .mud-nav-link-icon {
    background: linear-gradient(145deg, #10b981 0%, #14b8a6 100%);
    --nav3d-icon: url('/icons/sidebar/customers.png');
}

.custom-drawer .sidebar-3d .nav3d-billing .mud-nav-link-icon {
    background: linear-gradient(145deg, #ec4899 0%, #f43f5e 100%);
    --nav3d-icon: url('/icons/sidebar/billing.png');
}

.custom-drawer .sidebar-3d .nav3d-report .mud-nav-link-icon {
    background: linear-gradient(145deg, #06b6d4 0%, #0ea5e9 100%);
    --nav3d-icon: url('/icons/sidebar/report.png');
}

.custom-drawer .sidebar-3d .nav3d-settings .mud-nav-link-icon {
    background: linear-gradient(145deg, #64748b 0%, #475569 100%);
    --nav3d-icon: url('/icons/sidebar/settings.png');
}

/* Fallback mapping by route (if custom classes are not emitted by Mud components) */
.custom-drawer .sidebar-3d .mud-nav-link[href="/catalog"] .mud-nav-link-icon { --nav3d-icon: url('/icons/sidebar/catalog.png'); }
.custom-drawer .sidebar-3d .mud-nav-link[href="/pos"] .mud-nav-link-icon { --nav3d-icon: url('/icons/sidebar/pos.png'); }
.custom-drawer .sidebar-3d .mud-nav-link[href="/customers"] .mud-nav-link-icon { --nav3d-icon: url('/icons/sidebar/customers.png'); }
.custom-drawer .sidebar-3d .mud-nav-link[href="/billing/bills"] .mud-nav-link-icon { --nav3d-icon: url('/icons/sidebar/billing.png'); }
.custom-drawer .sidebar-3d .mud-nav-link[href="/reports/sales-summary"] .mud-nav-link-icon { --nav3d-icon: url('/icons/sidebar/report.png'); }
.custom-drawer .sidebar-3d .mud-nav-link[href="/pos-settings"] .mud-nav-link-icon,
.custom-drawer .sidebar-3d .mud-nav-link[href="/settings"] .mud-nav-link-icon { --nav3d-icon: url('/icons/sidebar/settings.png'); }

.nav-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sidebar-img-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-inline-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    margin-left: 6px;
    vertical-align: text-bottom;

}