/* Custom styles for hover effects and transitions */
.menu-item:hover {
    background-color: #374151;
}

.accordion-content {
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
    opacity: 0;
}

.accordion-content.expanded {
    max-height: 200px;
    opacity: 1;
}

.sidebar-transition {
    transition: transform 0.3s ease-in-out;
}

.overlay {
    background-color: rgba(75, 85, 99, 0.75);
}

.main-content-transition {
    transition: margin-left 0.3s ease-in-out;
}

/* Smooth rotation for chevron icons */
.chevron-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chevron-icon.rotated {
    transform: rotate(90deg);
}

/* Additional animation classes for enhanced dropdown effect */
.accordion-content .menu-item {
    transform: translateY(-8px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-content.expanded .menu-item {
    transform: translateY(0);
    opacity: 1;
}

.accordion-content.expanded .menu-item:nth-child(1) { transition-delay: 0.05s; }
.accordion-content.expanded .menu-item:nth-child(2) { transition-delay: 0.1s; }
.accordion-content.expanded .menu-item:nth-child(3) { transition-delay: 0.15s; }
.accordion-content.expanded .menu-item:nth-child(4) { transition-delay: 0.2s; }

/* Desktop sidebar animation - apply transition to the sidebar element */
#desktopSidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#desktopSidebar.-translate-x-full {
    transform: translateX(-100%);
}

/* Main content transition for desktop */
#mainContent {
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mainContent.sidebar-closed {
    margin-left: -288px; /* 72 * 4 = 288px (width of sidebar) */
}

/* Tab transition animations */
.bg-\[\#F3F4F6\] button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-\[\#F3F4F6\] button:hover {
    transform: translateY(-1px);
}

/* Account card transitions */
.grid > div {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.grid > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Custom shadow class based on design settings */
.custom-shadow {
    box-shadow: 0 1px 40px 0 rgba(0, 0, 0, 0.09);
}

.table-shadow {
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.25);
}