/*
 * GNSCO365-QMS V138-R6
 * Hierarchical sidebar flyout tree repair
 *
 * Root cause:
 * The flyout container is a 2-column grid, but ModuleCatalog children are emitted
 * as a separate .nav-item-children sibling after the parent link. The child tree
 * therefore becomes a grid item of its own and inherited .nav-item rules force
 * child links into column-card layout. This produces the clipped LG/AD/ER badges
 * and distorted hierarchy seen in People & HR.
 *
 * R6 deliberately uses a single-column tree inside the flyout.
 */

@media (min-width: 993px) {
  body:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-stage {
    width: 390px !important;
    max-width: min(390px, calc(100vw - 96px)) !important;
    overflow: visible !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-shell {
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 14px !important;
  }

  /*
   * Critical fix: do not render a hierarchy in the generic 2-column card grid.
   * Every root module and its child tree gets the full flyout width.
   */
  body:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 2px 0 0 !important;
    width: 100% !important;
  }

  /* Root links: stable horizontal row instead of inherited vertical card. */
  body:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-links > .nav-item {
    align-items: center !important;
    box-sizing: border-box !important;
    display: grid !important;
    flex-direction: row !important;
    gap: 10px !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 42px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 8px 10px !important;
    transform: none !important;
    width: 100% !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-links > .nav-item > .nav-icon {
    box-sizing: border-box !important;
    flex: none !important;
    height: 30px !important;
    margin: 0 !important;
    min-height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    width: 30px !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-links > .nav-item > .nav-label {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    width: auto !important;
  }

  /*
   * Child tree is a full-width block under the parent.
   * Remove the old margins that made the child badges collide with the left rail.
   */
  body:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-links > .nav-item-children {
    border-left: 2px solid rgba(15, 118, 110, 0.20) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 4px 0 4px 12px !important;
    width: 100% !important;
  }

  body.dir-rtl:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-links > .nav-item-children,
  body.lang-ar:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-links > .nav-item-children {
    border-left: 0 !important;
    border-right: 2px solid rgba(15, 118, 110, 0.20) !important;
    padding-left: 0 !important;
    padding-right: 12px !important;
  }

  /*
   * Critical child-row reset:
   * brand-final.css applies flex-direction:column and card rules to every .nav-item
   * inside the flyout, including children. Reset children to a two-cell row.
   */
  body:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-links
  .nav-item-children > .nav-item-child {
    align-items: center !important;
    box-sizing: border-box !important;
    display: grid !important;
    flex-direction: row !important;
    gap: 8px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 38px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 6px 9px !important;
    transform: none !important;
    width: 100% !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-links
  .nav-item-children > .nav-item-child:hover {
    transform: none !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-links
  .nav-item-children > .nav-item-child > .nav-icon {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: none !important;
    font-size: 9px !important;
    height: 26px !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    width: 26px !important;
  }

  body:not(.login-body):not(.sidebar-fullscreen)
  .sidebar.sidebar-flyout-layout
  .sidebar-flyout-links
  .nav-item-children > .nav-item-child > .nav-label {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    text-align: start !important;
    white-space: normal !important;
    width: auto !important;
  }
}