/* Microsoft Dynamics Style Menu CSS */

/* Override Radzen defaults for cleaner look */
.rz-body {
    padding: 0 !important;
}

.rz-layout > .rz-body {
    transition: margin-left 0.3s ease;
}

/* Ensure proper layout structure */
.dynamics-layout {
    --header-height: 48px;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 60px;
    --secondary-sidebar-width: 320px;
}

/* Fix for Radzen components inside new layout */
.dynamics-main .rz-card {
    border: 1px solid #e1dfdd;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Profile Menu Customization */
.rz-profile-menu {
    border: none;
    background: transparent;
}

/*.rz-profile-menu:hover {
    background-color: #f3f2f1;
}*/

.rz-profile-menu-popup {
    border: 1px solid #e1dfdd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* Notification styles */
.header-notifications {
    position: relative;
}

.header-notifications .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #d83b01;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
}

/* Secondary sidebar tree styles */
.dynamics-sidebar-secondary .rz-tree {
    border: none;
}

.dynamics-sidebar-secondary .rz-treenode-content {
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 2px;
}

.dynamics-sidebar-secondary .rz-treenode-content:hover {
    background-color: #f3f2f1;
}

.dynamics-sidebar-secondary .rz-treenode-content-selected {
    background-color: #e6f2ff !important;
    color: #0078d4 !important;
}

/* Smooth transitions */
* {
    transition-property: background-color, color, border-color, transform;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .dynamics-layout {
        --sidebar-width: 280px;
        --secondary-sidebar-width: 100%;
    }
    
    .dynamics-sidebar-secondary {
        position: fixed;
        height: 100%;
        right: 0;
        top: var(--header-height);
        z-index: 998;
    }
    
    /* Overlay for mobile */
    .dynamics-body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        z-index: 997;
        display: none;
    }
    
    .dynamics-body:has(.dynamics-sidebar.open)::before,
    .dynamics-body:has(.dynamics-sidebar-secondary)::before {
        display: block;
    }
}

/* Print styles */
@media print {
    .dynamics-header,
    .dynamics-sidebar,
    .dynamics-sidebar-secondary,
    .nav-quick-actions {
        display: none !important;
    }
    
    .dynamics-main {
        margin: 0 !important;
    }
}

/* Accessibility improvements */
.nav-menu-item:focus,
.nav-group-header:focus,
.quick-action-btn:focus {
    outline: 2px solid #0078d4;
    outline-offset: 2px;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here if needed */
}

/* Loading states */
.nav-menu-item.loading {
    opacity: 0.6;
    pointer-events: none;
}

.nav-menu-item.loading::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid #0078d4;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}