/* Universal Navbar Centering Fix
 * This file ensures navbar is properly centered across all pages
 * when the vertical menu is present
 */

/* Variables for easier maintenance */
:root {
  --menu-width: 260px;
  --menu-collapsed-width: 84px;
}

/* Fix for navbar-detached centering when vertical menu is present */
.layout-content-navbar:not(.layout-without-menu) .layout-navbar.navbar-detached.container-xxl {
  /* Remove any padding-left that might shift navbar off-center */
  padding-left: 0 !important;
  
  /* Ensure proper centering calculation */
  margin-left: auto !important;
  margin-right: auto !important;
  
  /* Ensure navbar spans the correct area accounting for menu */
  max-width: calc(100vw - var(--menu-width)) !important;
  position: relative !important;
  left: 0 !important;
}

/* When menu is collapsed */
.layout-menu-collapsed.layout-content-navbar:not(.layout-without-menu) .layout-navbar.navbar-detached.container-xxl {
  max-width: calc(100vw - var(--menu-collapsed-width)) !important;
}

/* Force remove any inline styles that might be applied by JavaScript */
.layout-navbar.navbar-detached[style*="padding-left"] {
  padding-left: 0 !important;
}

/* Ensure content area is also properly centered */
.layout-content-navbar:not(.layout-without-menu) .content-wrapper .container-xxl {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Additional fix for specific pages that might have issues */
.layout-content-navbar:not(.layout-without-menu) .layout-page {
  /* Ensure page content accounts for menu width */
  padding-left: var(--menu-width) !important;
}

.layout-menu-collapsed.layout-content-navbar:not(.layout-without-menu) .layout-page {
  padding-left: var(--menu-collapsed-width) !important;
}

/* Mobile responsiveness */
@media (max-width: 1199px) {
  .layout-content-navbar:not(.layout-without-menu) .layout-navbar.navbar-detached.container-xxl {
    max-width: 100vw !important;
    padding-left: 0 !important;
  }
  
  .layout-content-navbar:not(.layout-without-menu) .layout-page {
    padding-left: 0 !important;
  }
}

/* Clean up any conflicting styles from other CSS files */
.layout-navbar {
  transition: all 0.2s ease-in-out;
}

/* Specific fix for account settings and other pages */
body .layout-navbar.container-xxl {
  padding-left: 0 !important;
}

/* Override any vendor CSS that might interfere */
.layout-wrapper.layout-content-navbar .layout-navbar.container-xxl {
  padding-left: 0 !important;
  margin: 0 auto !important;
}