/* Presentation-only navigation. Existing routes and permission rules remain in charge. */
#appWrapper.top-navigation-layout {
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100dvh !important;
}
#appWrapper.top-navigation-layout > .sb {
  position: relative;
  top: auto;
  z-index: 100;
  display: grid;
  grid-template-columns: 108px minmax(180px, 330px) 1fr;
  align-items: center;
  gap: 0 16px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  flex: 0 0 auto;
  padding: 0 24px;
  overflow: visible;
  border-right: 0;
  border-bottom: 1px solid var(--border);
  background: var(--navy-mid);
  box-shadow: 0 3px 12px rgba(15, 30, 53, .035);
}
#appWrapper.top-navigation-layout .sb-logo {
  grid-column: 1;
  grid-row: 1;
  min-height: 62px;
  padding: 10px 0 !important;
  justify-content: flex-start !important;
  border: 0;
}
#appWrapper.top-navigation-layout .sb-logo img {
  width: auto !important;
  height: 37px !important;
  max-width: 104px;
  object-fit: contain;
}
.top-navigation-company {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-width: 0;
  padding: 7px 0 !important;
  border: 0 !important;
}
#appWrapper.top-navigation-layout #companySwitcher {
  min-height: 42px;
  background: var(--navy) !important;
}
#appWrapper.top-navigation-layout #companyDropdown {
  position: fixed;
  z-index: 130;
  top: 62px;
  left: 12px;
  width: min(360px, calc(100vw - 24px));
  max-height: min(480px, calc(100dvh - 90px));
  margin: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  box-shadow: 0 16px 38px rgba(15, 30, 53, .16);
}
.top-navigation-account {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  justify-self: end;
}
.top-navigation-account > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.top-navigation-account > summary::-webkit-details-marker { display: none; }
.top-navigation-account > summary svg { width: 17px; height: 17px; flex-shrink: 0; }
.top-navigation-account > summary:hover,
.top-navigation-account[open] > summary { color: var(--accent-bright); background: var(--accent-pale); }
#appWrapper.top-navigation-layout .top-navigation-account > .sb-foot {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 140;
  width: min(300px, calc(100vw - 24px));
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--border2);
  border-radius: 12px;
  background: var(--navy-mid);
  box-shadow: 0 16px 38px rgba(15, 30, 53, .16);
}
.top-navigation-account:not([open]) > .sb-foot { display: none; }
#appWrapper.top-navigation-layout .sb-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  min-height: 46px;
  padding: 4px 0 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
  border-top: 1px solid var(--border);
  overscroll-behavior-x: contain;
}
#appWrapper.top-navigation-layout .sb-nav::-webkit-scrollbar { height: 5px; }
#appWrapper.top-navigation-layout .sb-nav::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; }
#appWrapper.top-navigation-layout .sb-nav > .sb-section { display: none; }
#appWrapper.top-navigation-layout .sb-nav > .sb-item,
#appWrapper.top-navigation-layout .sb-nav > .sb-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 7px;
  color: var(--text-2);
  font-size: 12.5px !important;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
#appWrapper.top-navigation-layout .sb-nav > .sb-toggle:hover { background: var(--card2); }
#appWrapper.top-navigation-layout .sb-nav > .sb-item.active,
#appWrapper.top-navigation-layout .sb-nav > .sb-toggle.has-active-page,
#appWrapper.top-navigation-layout .sb-nav > .sb-toggle[aria-expanded="true"] {
  color: var(--accent-bright);
  background: var(--accent-pale);
  box-shadow: inset 0 -2px 0 var(--accent);
}
#appWrapper.top-navigation-layout .sb-nav > .sb-toggle .sb-chevron { transform: rotate(90deg) !important; }
#appWrapper.top-navigation-layout .sb-nav > .sb-toggle[aria-expanded="true"] .sb-chevron { transform: rotate(-90deg) !important; }
#appWrapper.top-navigation-layout .sb-nav > .sb-collapsible {
  position: fixed;
  z-index: 120;
  display: none;
  width: min(280px, calc(100vw - 24px));
  min-width: 0;
  max-height: var(--top-navigation-menu-height, 65dvh);
  margin: 0 !important;
  padding: 8px !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--navy-mid) !important;
  border: 1px solid var(--border2);
  border-radius: 11px !important;
  box-shadow: 0 16px 38px rgba(15, 30, 53, .16);
  transition: none;
}
#appWrapper.top-navigation-layout .sb-nav > .sb-collapsible.open { display: block; }
#appWrapper.top-navigation-layout .sb-collapsible > .sb-item { min-height: 38px; padding: 9px 11px; }
#appWrapper.top-navigation-layout .sb :is(.sb-item, .sb-toggle, #companySwitcher, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
#appWrapper.top-navigation-layout > .main {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  flex: 1 1 0;
}
#appWrapper.top-navigation-layout .main > .topbar {
  height: auto;
  min-height: 52px;
  flex-wrap: wrap;
  padding: 10px 24px;
}
#appWrapper.top-navigation-layout #topbarActions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
@media (max-width: 700px) {
  #appWrapper.top-navigation-layout > .sb { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 0 9px; padding: 0 12px; }
  #appWrapper.top-navigation-layout .sb-logo { min-height: 58px; }
  #appWrapper.top-navigation-layout .sb-logo img { height: 31px !important; max-width: 44px; }
  .top-navigation-account > summary { padding: 8px; }
  .top-navigation-account > summary span,
  .top-navigation-account > summary svg:last-child { display: none; }
  #appWrapper.top-navigation-layout #companySwitcher { padding: 7px 8px !important; }
  #appWrapper.top-navigation-layout .main > .topbar { padding: 10px 12px; gap: 8px; }
  #appWrapper.top-navigation-layout #topbarActions { width: 100%; }
  #appWrapper.top-navigation-layout .content { padding: 16px 12px; }
}
@media print {
  #appWrapper.top-navigation-layout > .sb { display: none !important; }
}