/* ========================================
   ELEVENT NAVIGATION - LAYOUT ADJUSTMENTS
   Additional layout styles for nav shell integration

   VISUAL COMPARISON:

   OLD NAVIGATION:
   ┌─────────┬──────────┬────────────────────┐
   │ Primary │Secondary │   Main Content     │
   │ 150px   │  140px   │                    │
   │ (icons  │(submenu) │   (rest of page)   │
   │ +text)  │          │                    │
   └─────────┴──────────┴────────────────────┘
   Total Left Margin: 290px

   NEW NAVIGATION:
   ┌────┬─────────────────────────────────┐
   │Rail│     Main Content                │
   │65px│                                  │
   │    │   (more horizontal space!)      │
   │    │                                  │
   └────┴─────────────────────────────────┘
   Total Left Margin: 65px

   ON HOVER:
   ┌────┬────────┬────────────────────────┐
   │Rail│ Drawer │   Main Content         │
   │65px│ 240px  │                        │
   │    │(flyout)│   (drawer overlay)     │
   │    │        │                        │
   └────┴────────┴────────────────────────┘
   Total Width: 305px (temporary overlay)

   SPACE SAVED: 85px+ horizontal space reclaimed!
   ======================================== */

/* Container for navigation web component */
#elevent-nav-container {
  position: fixed;
  left: 0;
  top: 48px;
  bottom: 0;
  z-index: 1050;
}

.right-content {
  padding: 0 0 0 1rem !important; 
}
/* Adjust main content (always) */
.right-content,
.right-body-content,
[ng-view] {
  margin-left: 150px !important;
  width: calc(100% - 150px) !important;
}

/* Hide old navigation (always - keep in DOM for data access) */
.left-menu-primary-container,
.left-menu-secondary-container,
#left-navigation-module {
  display: none !important;
  visibility: hidden !important;
}

/* Ensure navbar stays on top */
.navbar.fixed-top,
.navbar-fixed-top {
  z-index: 1100 !important;
}

/* Responsive adjustments (1200px+ only) */
@media (min-width: 1200px) {
  #elevent-nav-container {
    display: block;
  }
}

/* Hide navigation on smaller screens (mobile optimization) */
@media (max-width: 1199px) {
  #elevent-nav-container {
    display: none !important;
  }

  .right-content,
  .right-body-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Show old nav on mobile */
  .left-menu-primary-container,
  .left-menu-secondary-container,
  #left-navigation-module {
    display: block !important;
    visibility: visible !important;
  }
}

/* Show navigation container immediately without animation */
#elevent-nav-container:empty {
  width: 150px;
  height: 100%;
  background-color: #000e28;
}