/* =============================================================================
   MENU MODERN REDESIGN
   Modern, glass morphism design for the sidebar navigation menu
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Variables - Menu Theme Colors
   Now references global theme variables from global-theme.css
   ----------------------------------------------------------------------------- */
:root {
    /* Menu-specific aliases to global theme variables */
    --menu-bg-primary: var(--theme-bg-glass, rgba(26, 32, 40, 0.85));
    --menu-bg-hover: var(--theme-bg-card-hover, rgba(48, 54, 61, 0.95));
    --menu-bg-active: var(--theme-accent-blue-bg, rgba(54, 127, 211, 0.15));
    --menu-bg-dropdown: var(--theme-bg-dropdown, rgba(22, 27, 34, 0.98));

    --menu-border-color: var(--theme-border-color, rgba(48, 54, 61, 0.6));
    --menu-border-accent: var(--theme-border-accent, rgba(54, 127, 211, 0.4));

    --menu-text-primary: var(--theme-text-primary, #e6edf3);
    --menu-text-secondary: var(--theme-text-secondary, #8b949e);
    --menu-text-muted: var(--theme-text-muted, #6e7681);

    --menu-accent-blue: var(--theme-accent-blue, #367fd3);
    --menu-accent-glow: var(--theme-accent-blue-glow, rgba(54, 127, 211, 0.35));

    --menu-shadow-md: var(--theme-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
    --menu-shadow-lg: var(--theme-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.35));
    --menu-shadow-glow: var(--theme-shadow-glow, 0 0 16px rgba(54, 127, 211, 0.15));
}

/* -----------------------------------------------------------------------------
   Sidebar Wrapper - Glass Morphism Container
   ----------------------------------------------------------------------------- */
#meniuLeft.page-sidebar-wrapper {
    background-color: transparent !important;
    z-index: 100 !important;
    position: absolute !important;
}

/* -----------------------------------------------------------------------------
   Navigation List
   ----------------------------------------------------------------------------- */
.navbar.sidebar {
    z-index: 10010 !important;
    position: fixed !important;
    /* Fixed was the original behavior */
}

.navbar.sidebar .nav.navbar-nav {
    padding: 12px 8px 130px 8px !important;
}

/* -----------------------------------------------------------------------------
   Menu Items - Base Styling
   ----------------------------------------------------------------------------- */
.navbar.sidebar .nav-item {
    margin-bottom: 4px;
    border-radius: 10px;
}

.navbar.sidebar .nav-item .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    color: var(--menu-text-secondary) !important;
    background: transparent !important;
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    position: relative !important;
}

/* Icon styling */
.navbar.sidebar .nav-item .nav-link .fa,
.navbar.sidebar .nav-item .nav-link img {
    opacity: 0.85;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.navbar.sidebar .nav-item .nav-link .fa {
    font-size: 16px !important;
    width: auto;
    height: auto;
    display: inline;
    color: inherit;
}

.navbar.sidebar .nav-item .nav-link img {
    width: 22px;
    height: 22px;
}

/* Menu title text */
.navbar.sidebar .nav-item .menuTitle {
    flex: 1;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    color: inherit;
}

/* Caret for dropdowns */
.navbar.sidebar .nav-item .menuTitle .caret {
    opacity: 0.6;
    margin-left: 8px;
    transition: all 0.25s ease;
}

/* -----------------------------------------------------------------------------
   Hover State
   ----------------------------------------------------------------------------- */
/* Use direct child combinator (>) to prevent hover from affecting dropdown items */
.navbar.sidebar .nav.navbar-nav>.nav-item:not(.disabled_menu):hover>.nav-link {
    color: var(--menu-text-primary) !important;
    background: var(--menu-bg-hover) !important;
    border-color: rgba(88, 166, 255, 0.3) !important;
    transform: translateX(2px);
}

.navbar.sidebar .nav.navbar-nav>.nav-item:not(.disabled_menu):hover>.nav-link .fa,
.navbar.sidebar .nav.navbar-nav>.nav-item:not(.disabled_menu):hover>.nav-link img {
    opacity: 1;
}

.navbar.sidebar .nav.navbar-nav>.nav-item:not(.disabled_menu):hover>.nav-link .fa {
    color: #58a6ff;
}

/* Rotate caret on click (when dropdown is open), not on hover */
.navbar.sidebar .nav-item.open .menuTitle .caret {
    opacity: 1;
    transform: rotate(180deg);
}

/* -----------------------------------------------------------------------------
   Active State - Blue Accent
   ----------------------------------------------------------------------------- */
.navbar.sidebar .nav-item.active>.nav-link {
    color: #ffffff !important;
    background: linear-gradient(145deg, rgba(54, 127, 211, 0.25) 0%, rgba(54, 127, 211, 0.15) 100%) !important;
    border-color: var(--menu-border-accent) !important;
    box-shadow: var(--menu-shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Blue line indicator removed */

.navbar.sidebar .nav-item.active>.nav-link .fa,
.navbar.sidebar .nav-item.active>.nav-link img {
    opacity: 1;
}

.navbar.sidebar .nav-item.active>.nav-link .fa {
    color: #ffffff !important;
}

.navbar.sidebar .nav-item.active>.nav-link .menuTitle {
    font-weight: 600;
    color: #ffffff;
}

/* -----------------------------------------------------------------------------
   Disabled Menu Items
   ----------------------------------------------------------------------------- */
.navbar.sidebar .nav-item.disabled_menu .nav-link {
    opacity: 0.4;
    cursor: not-allowed;
}

.navbar.sidebar .nav-item.disabled_menu:hover .nav-link {
    background: transparent !important;
    border-color: transparent !important;
    transform: none;
}

/* -----------------------------------------------------------------------------
   Dropdown Menus
   ----------------------------------------------------------------------------- */
.navbar.sidebar .dropdown-menu {
    background: var(--menu-bg-dropdown) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--menu-border-color) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    margin-left: 45px !important;
    margin-top: 0 !important;
}

/* Desktop (expanded sidebar) - dropdown expands INLINE, not as an absolute flyout */
.desktop .navbar.sidebar .dropdown-menu {
    position: static !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

.navbar.sidebar .dropdown-menu .nav-item {
    margin-bottom: 4px;
    border-radius: 10px;
}

.navbar.sidebar .dropdown-menu .nav-item .nav-link {
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    background: var(--menu-bg-dropdown) !important;
    border: 1px solid var(--menu-border-color) !important;
}

/* No hover effect on dropdown items - only active state when selected */

/* Reset dropdown items to default when parent Alerts is hovered */
.navbar.sidebar .nav-item:hover .dropdown-menu .nav-item .nav-link {
    color: var(--menu-text-secondary) !important;
    background: var(--menu-bg-dropdown) !important;
    border-color: var(--menu-border-color) !important;
    transform: none !important;
}

/* Hover effect for dropdown items - same as main menu buttons */
.navbar.sidebar .nav-item:hover .dropdown-menu .nav-item:hover>.nav-link {
    color: var(--menu-text-primary) !important;
    background: var(--menu-bg-hover) !important;
    border-color: rgba(88, 166, 255, 0.3) !important;
    transform: translateX(2px) !important;
}

.navbar.sidebar .dropdown-menu .nav-item.active .nav-link {
    background: var(--menu-accent-blue) !important;
    color: #ffffff !important;
}

.navbar.sidebar .dropdown-menu .nav-item.active .nav-link::before {
    display: none;
}

/* Company dropdown search input */
#companiesList .switchCompany {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--menu-border-color);
    border-radius: 6px;
    color: var(--menu-text-primary);
    font-size: 13px;
    transition: all 0.25s ease;
}

#companiesList .switchCompany:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--menu-border-accent);
    box-shadow: 0 0 0 2px rgba(54, 127, 211, 0.2);
}

#companiesList .switchCompany::placeholder {
    color: var(--menu-text-muted);
}

/* -----------------------------------------------------------------------------
   Collapse/Expand Button
   ----------------------------------------------------------------------------- */
.navbar.sidebar .nav-item.collapse {
    position: absolute !important;
    bottom: 80px !important;
    left: 8px;
    right: 8px;
    margin-bottom: 0 !important;
    z-index: 1000 !important;
}

.navbar.sidebar .nav-item.collapse .nav-link {
    background: rgba(54, 127, 211, 0.12) !important;
    border-color: rgba(54, 127, 211, 0.3) !important;
    color: #58a6ff !important;
}

.navbar.sidebar .nav-item.collapse .nav-link:hover {
    background: rgba(54, 127, 211, 0.2) !important;
    border-color: rgba(88, 166, 255, 0.5) !important;
    box-shadow: 0 0 12px rgba(54, 127, 211, 0.15) !important;
    transform: translateX(0) !important;
}

.navbar.sidebar .nav-item.collapse .nav-link img {
    opacity: 1;
    width: 22px;
    height: 22px;
}

.navbar.sidebar .nav-item.collapse .menuTitle {
    color: #58a6ff !important;
    font-weight: 600;
}

/* Prevent button expansion and animations on hover in mobile (minimized) mode */
/* Override style.css .mobile li.nav-item.start:hover that changes margin-left and width */
.mobile .navbar.sidebar .nav-item.collapse:hover {
    margin-left: 9px !important;
    width: auto !important;
    background-color: var(--menu-bg-hover) !important;
    filter: brightness(1.2) !important;
}

/* Keep menuTitle hidden */
.mobile .navbar.sidebar .nav-item.collapse:hover .menuTitle {
    display: none !important;
}

/* Keep showopacity exactly where it is - override style.css hover rules */
.mobile .navbar.sidebar .nav-item.collapse .showopacity,
.mobile .navbar.sidebar .nav-item.collapse:hover .showopacity {
    float: right !important;
    margin-left: 145px !important;
}

/* Disable all hover animations and transitions on nav-link */
.mobile .navbar.sidebar .nav-item.collapse .nav-link,
.mobile .navbar.sidebar .nav-item.collapse:hover .nav-link {
    background: rgba(54, 127, 211, 0.12) !important;
    border-color: rgba(54, 127, 211, 0.3) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Disable icon hover effects */
.mobile .navbar.sidebar .nav-item.collapse .nav-link .fa,
.mobile .navbar.sidebar .nav-item.collapse .nav-link img,
.mobile .navbar.sidebar .nav-item.collapse:hover .nav-link .fa,
.mobile .navbar.sidebar .nav-item.collapse:hover .nav-link img {
    opacity: 0.85 !important;
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Prevent dropdown buttons from resize animation when hovering/opening in mobile mode */
.mobile .navbar.sidebar .nav-item.dropdown:hover,
.mobile .navbar.sidebar .nav-item.dropdown.open {
    margin-left: 165px !important;
    width: 230px !important;
    background-color: var(--menu-bg-hover) !important;
}

/* Disable all transitions in mobile mode to prevent resize animations */
.mobile .navbar.sidebar .nav-item,
.mobile .navbar.sidebar .nav-item *,
.mobile .navbar.sidebar .nav-item .nav-link,
.mobile li.nav-item.start,
.mobile li.nav-item.start * {
    transition: none !important;
}

/* -----------------------------------------------------------------------------
   Scrollbar Styling
   ----------------------------------------------------------------------------- */
#bs-sidebar-navbar-collapse-1::-webkit-scrollbar {
    width: 6px;
}

#bs-sidebar-navbar-collapse-1::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

#bs-sidebar-navbar-collapse-1::-webkit-scrollbar-thumb {
    background: rgba(88, 166, 255, 0.3);
    border-radius: 3px;
    transition: all 0.25s ease;
}

#bs-sidebar-navbar-collapse-1::-webkit-scrollbar-thumb:hover {
    background: rgba(88, 166, 255, 0.5);
}

/* -----------------------------------------------------------------------------
   Responsive Adjustments
   ----------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .navbar.sidebar .nav-item .nav-link {
        padding: 10px 14px !important;
        gap: 10px !important;
    }

    .navbar.sidebar .nav-item .menuTitle {
        font-size: 13px;
    }
}

@media (max-width: 992px) {
    .navbar.sidebar .nav-item .nav-link {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    .navbar.sidebar .nav-item .menuTitle {
        font-size: 12px;
    }
}

/* Menu animation removed for better UX */

/* -----------------------------------------------------------------------------
   Collapsed State (Mobile Mode) - Small Rounded Buttons
   Override style.css li positioning to create visible small buttons
   ----------------------------------------------------------------------------- */

/* Make the li small and position it in the visible ~45px strip */
/* FIX: Ensure hovered/open items are above chart wrappers */
.mobile li.nav-item.start:hover,
.mobile li.nav-item.start.open {
    z-index: 10001 !important;
}

.mobile li.nav-item.start:not(:hover):not(.open) {
    width: 40px !important;
    height: 40px !important;
    margin-left: 163px !important;
    /* 165px offset + ~3px left margin = centered in 45px strip */
    margin-right: 3px !important;
    /* Equal margin on right */
    border-radius: 12px !important;
    background-color: var(--menu-bg-primary) !important;
    /* Same as expanded menu */
    border: none !important;
}

/* Only active item has the blue background */
.mobile li.nav-item.start.active:not(:hover):not(.open) {
    background-color: rgba(54, 127, 211, 0.12) !important;
}

/* Style the link inside to fill and center the icon */
.mobile .navbar.sidebar .nav-item.start:not(:hover):not(.open) .nav-link {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: center !important;
    border-radius: 10px !important;
}

/* Hide text in collapsed state (but not dropdown content) */
.mobile .navbar.sidebar .nav-item.start:not(:hover):not(.open)>.nav-link>.menuTitle {
    display: none !important;
}

/* Fix icon visibility - reset float and margin from style.css */
.mobile .navbar.sidebar .nav-item.start:not(:hover):not(.open) .showopacity {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure icon/image is visible and centered */
.mobile .navbar.sidebar .nav-item.start:not(:hover):not(.open) .nav-link img,
.mobile .navbar.sidebar .nav-item.start:not(:hover):not(.open) .nav-link .fa {
    opacity: 1 !important;
    margin: 0 !important;
}

/* Hide dropdown arrow in collapsed state */
.mobile .navbar.sidebar .nav-item.start:not(:hover):not(.open) .fa-angle-down,
.mobile .navbar.sidebar .nav-item.start:not(:hover):not(.open) .fa-angle-up,
.mobile .navbar.sidebar .nav-item.start:not(:hover):not(.open) .dropdown-toggle .fa,
.mobile .navbar.sidebar .nav-item.start:not(:hover):not(.open) .selected,
.mobile .navbar.sidebar .nav-item.start.dropdown:not(:hover):not(.open) .nav-link>.fa,
.mobile .navbar.sidebar .nav-item.start:not(:hover):not(.open) .caret,
.mobile .sidebar .caret {
    display: none !important;
}

/* Force menuTitle visibility and proper positioning when dropdown is open (fixes disappearing names bug) */
.mobile .navbar.sidebar .nav-item.open .menuTitle {
    display: block !important;
    margin-left: 30px !important;
}

/* Ensure open dropdown item has proper width and position like hover state */
.mobile li.nav-item.start.open {
    margin-left: 165px !important;
    width: 230px !important;
    background-color: var(--menu-bg-hover) !important;
}

/* Position icon correctly in open state */
.mobile .navbar.sidebar .nav-item.start.open .showopacity {
    float: left !important;
    margin-left: -8px !important;
}

/* -----------------------------------------------------------------------------
   LIGHT THEME OVERRIDES
   ----------------------------------------------------------------------------- */

/* Light theme: Sidebar container backgrounds */
[data-theme="light"] #meniuLeft.page-sidebar-wrapper,
[data-theme="light"] .navbar.sidebar,
[data-theme="light"] .navbar.sidebar .container-fluid,
[data-theme="light"] #bs-sidebar-navbar-collapse-1 {
    background: var(--theme-bg-tertiary) !important;
    background-color: var(--theme-bg-tertiary) !important;
    border-right: 1px solid var(--theme-border-color) !important;
}

/* Light theme collapsed: keep the narrow icon rail without a full-height panel */
[data-theme="light"] .mobile #meniuLeft.page-sidebar-wrapper,
[data-theme="light"] .mobile .navbar.sidebar,
[data-theme="light"] .mobile .navbar.sidebar .container-fluid,
[data-theme="light"] .mobile #bs-sidebar-navbar-collapse-1 {
    background: transparent !important;
    background-color: transparent !important;
    border-right-color: transparent !important;
}

/* Light theme collapsed: keep hover/expanded item visible */
[data-theme="light"] .mobile li.nav-item.start:hover,
[data-theme="light"] .mobile li.nav-item.start.open {
    background-color: var(--theme-bg-secondary) !important;
    border: 1px solid var(--theme-border-color) !important;
    box-shadow: var(--theme-shadow-md) !important;
}

[data-theme="light"] .mobile .navbar.sidebar .nav-item.start:hover .nav-link,
[data-theme="light"] .mobile .navbar.sidebar .nav-item.start.open .nav-link {
    background: var(--theme-bg-secondary) !important;
}

/* Light theme: Menu item base styles */
[data-theme="light"] .navbar.sidebar .nav-item .nav-link {
    color: var(--theme-text-secondary) !important;
    background: var(--theme-bg-secondary) !important;
    border-color: var(--theme-border-subtle) !important;
}

[data-theme="light"] .navbar.sidebar .nav-item .nav-link .menuTitle {
    color: var(--theme-text-dark) !important;
}

[data-theme="light"] .navbar.sidebar .nav-item .nav-link .fa,
[data-theme="light"] .navbar.sidebar .nav-item .nav-link i {
    color: var(--theme-text-secondary) !important;
}

/* Light theme: Invert menu icons */
[data-theme="light"] .navbar.sidebar .nav-item .nav-link img {
    filter: invert(0.4) sepia(1) saturate(0) !important;
}

/* Light theme: Hover state */
[data-theme="light"] .navbar.sidebar .nav.navbar-nav>.nav-item:not(.disabled_menu):hover>.nav-link {
    background: var(--theme-table-row-hover) !important;
    border-color: var(--theme-border-accent) !important;
}

[data-theme="light"] .navbar.sidebar .nav.navbar-nav>.nav-item:not(.disabled_menu):hover>.nav-link .menuTitle {
    color: var(--theme-accent-blue) !important;
}

[data-theme="light"] .navbar.sidebar .nav.navbar-nav>.nav-item:not(.disabled_menu):hover>.nav-link .fa {
    color: var(--theme-accent-blue) !important;
}

/* Light theme: Active menu item */
[data-theme="light"] .navbar.sidebar .nav-item.active .nav-link {
    color: var(--theme-accent-blue) !important;
    background: linear-gradient(145deg, var(--theme-accent-blue-bg) 0%, var(--theme-table-row-hover) 100%) !important;
}

[data-theme="light"] .navbar.sidebar .nav-item.active .menuTitle {
    color: var(--theme-accent-blue);
}

[data-theme="light"] .navbar.sidebar .nav-item.active .nav-link .fa,
[data-theme="light"] .navbar.sidebar .nav-item.active .nav-link img {
    opacity: 1;
}

[data-theme="light"] .navbar.sidebar .nav-item:not(.disabled_menu):hover>.nav-link .fa {
    color: var(--theme-accent-blue);
}

[data-theme="light"] .navbar.sidebar .dropdown-menu {
    background: var(--theme-bg-dropdown) !important;
    border-color: var(--theme-border-color) !important;
    box-shadow: var(--theme-shadow-lg) !important;
}

[data-theme="light"] .navbar.sidebar .dropdown-menu .nav-item .nav-link {
    background: var(--theme-bg-card) !important;
    border-color: var(--theme-border-color) !important;
}

[data-theme="light"] .navbar.sidebar .dropdown-menu .nav-item.active .nav-link {
    background: var(--theme-accent-blue-light) !important;
    color: var(--theme-text-inverse) !important;
}

[data-theme="light"] .navbar.sidebar .nav-item.collapse .nav-link {
    background: var(--theme-bg-secondary) !important;
    border-color: var(--theme-border-subtle) !important;
    color: var(--theme-text-secondary) !important;
}

[data-theme="light"] .navbar.sidebar .nav-item.collapse .menuTitle {
    color: var(--theme-accent-blue) !important;
}

/* Light theme: override legacy dark sidebar item backgrounds from style.css */
[data-theme="light"] .navbar.sidebar .nav>li.start.active:not(:hover):not(.open) {
    background-color: transparent !important;
}

[data-theme="light"] .navbar.sidebar .nav .open>a {
    background-color: var(--theme-accent-blue-bg-subtle) !important;
}

[data-theme="light"] .desktop li.nav-item.start,
[data-theme="light"] .mobile li.nav-item.start:not(:hover):not(.open) {
    background-color: transparent !important;
}

/* =============================================================================
   DROPDOWN BEHAVIOR FIX
   Disable hover-based opening, force click-only (requires .open class)
   ============================================================================= */
.navbar.sidebar .nav-item:hover>.dropdown-menu {
    display: none !important;
}

.navbar.sidebar .nav-item.open>.dropdown-menu:not(.ng-hide) {
    display: block !important;
}

/* Keep ng-hide respected - Angular's show/hide should work */
.navbar.sidebar .dropdown-menu.ng-hide {
    display: none !important;
}

/* Specific fix for Company Menu - hide on hover, show only on click */
#companyMenu:not(.open)>#companiesList,
#companyMenu:not(.open)>.dropdown-menu,
.navbar.sidebar #companyMenu:hover:not(.open)>.dropdown-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#companyMenu.open>#companiesList,
#companyMenu.open>.dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Override global style to prevent conflict with sidebar */
#meniuLeft .dropdown-menu li.active {
    background-color: transparent !important;
}