/* AWS dev shared navigation: persistent tablet sidebar, compact mouse rail,
   and a phone drawer. Loaded after existing theme layers. */
@media (min-width: 768px) {
  #root #sidenav-main.sidenav {
    left: 0 !important;
    transform: none !important;
    width: 248px !important;
    max-width: none !important;
    z-index: 1200;
  }
  #root .sidebar-tab-open,
  #root #sidenav-main.sidenav .sidebar-close { display: none !important; }
  #root #sidenav-main .sidenav-header { margin: 12px 10px 16px; }
  #root #sidenav-main ~ .main-content { margin-left: 280px !important; min-width: 0; }
  #root #sidenav-main ~ .main-content .navbar-main { width: calc(100% - 328px) !important; }
  #root #sidenav-main ~ .main-content footer.footer { width: auto !important; }
  #root #sidenav-main ~ .main-content .inner-page-title { margin-left: 32px; }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  #root #sidenav-main.sidenav {
    width: 76px !important;
    max-width: none !important;
    z-index: 1200;
    transition: width 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
  }
  #root #sidenav-main.sidenav:is(:hover, :focus-within) { width: 288px !important; }
  #root #sidenav-main .sidenav-header { margin: 12px 10px 18px; height: 56px; }
  #root #sidenav-main .navbar-brand { padding: 12px 14px; width: 54px; }
  #root #sidenav-main .navbar-brand-img {
    width: 152px;
    min-width: 152px;
    max-width: none;
    max-height: none;
    height: 32px !important;
    object-fit: contain;
    object-position: left;
    clip-path: inset(0 126px 0 0);
  }
  #root #sidenav-main:is(:hover, :focus-within) .navbar-brand { width: 220px; padding-left: 16px; }
  #root #sidenav-main:is(:hover, :focus-within) .navbar-brand-img { clip-path: none; }
  #root #sidenav-main .menu__link {
    padding: 0 0 0 18px !important;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0 !important;
    transition: background-color 160ms ease;
  }
  #root #sidenav-main:is(:hover, :focus-within) .menu__link { font-size: .85rem !important; }
  #root #sidenav-main .menu__link::after { opacity: 0; }
  #root #sidenav-main:is(:hover, :focus-within) .menu__link::after { opacity: 1; }
  #root #sidenav-main .menu__list-item > .nav { display: none !important; }
  #root #sidenav-main:is(:hover, :focus-within) .menu__list-item > .nav { display: block !important; }
  #root #sidenav-main ~ .main-content { margin-left: 100px !important; }
  #root #sidenav-main ~ .main-content .navbar-main { width: calc(100% - 148px) !important; }
  #root #sidenav-main ~ .main-content footer.footer { width: auto !important; }
}


@media (max-width: 767.98px) {
  #root #sidenav-main.sidenav { transform: none !important; left: 0 !important; }
  #root #sidenav-main.sidenav.sidebar-on { left: -320px !important; visibility: hidden; }
  #root .sidebar-tab-open {
    display: grid !important;
    place-items: center;
    position: fixed;
    left: 20px;
    top: 28px;
    width: 44px;
    height: 44px;
    z-index: 1041;
    border-radius: 12px;
    color: var(--ref-ink, #27423f) !important;
  }
  #root .sidebar-tab-open:focus-visible { outline: 3px solid var(--ref-blue, #2854eb); outline-offset: 2px; }
  #root #sidenav-main ~ .main-content { margin-left: 0 !important; min-width: 0; }
  #root #sidenav-main ~ .main-content .navbar-main { width: calc(100% - 24px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  #root #sidenav-main.sidenav, #root #sidenav-main .menu__link { transition: none !important; }
}

/* The account header wraps on phones and narrow touch tablets. Reserve its height. */
@media (max-width: 767.98px) {
  #root .main-content > .container-fluid.mt-66 { margin-top: 8rem !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) and (hover: none) {
  #root .main-content > .container-fluid.mt-66 { margin-top: 8rem !important; }
}

/* Full touch navigation leaves a narrower content column at portrait tablet widths. */
@media (min-width: 768px) and (max-width: 991.98px) and (hover: none) {
  #root .main-content .sales-dashboard-hero { flex-direction: column; align-items: stretch; }
  #root .main-content .sales-dashboard-context { align-items: flex-start; text-align: left; }
}