/* CompStack Work theme layer, injected by nginx into every Huly page.
   Everything is scoped to html[data-cs-labels] so turning the toggle off restores stock Huly.
   Only the desktop (landscape) app bar is touched; the mobile layout is left alone. */

:root { --cs-appbar-width: 184px; }

html[data-cs-labels] .hamburger-container.landscape {
  width: var(--cs-appbar-width) !important;
  min-width: var(--cs-appbar-width) !important;
  align-items: stretch !important;
}

/* The bar's outer frame is a fixed 68px column that centers its child; widen it too. */
html[data-cs-labels] .antiPanel-application.vertical:has(> .hamburger-container.landscape) {
  width: var(--cs-appbar-width) !important;
  min-width: var(--cs-appbar-width) !important;
  align-items: stretch !important;
}

html[data-cs-labels] .hamburger-container.landscape .apps-vertical,
html[data-cs-labels] .hamburger-container.landscape .scroller-container,
html[data-cs-labels] .hamburger-container.landscape .horizontalBox,
html[data-cs-labels] .hamburger-container.landscape .scroll,
html[data-cs-labels] .hamburger-container.landscape .box {
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}

html[data-cs-labels] .hamburger-container.landscape a:has(> button.app) {
  display: block;
  width: 100%;
}

html[data-cs-labels] .hamburger-container.landscape button.app {
  width: calc(100% - 16px) !important;
  min-width: 0 !important;
  margin: 0 8px !important;
  padding: 0 8px !important;
  justify-content: flex-start !important;
  gap: 10px;
}

.cs-app-label { display: none; }

html[data-cs-labels] .antiPanel-application.vertical:has(> .hamburger-container.landscape) .cs-app-label {
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--theme-caption-color, currentColor);
}


/* Items outside the scrolling app list (logo, menu toggle, Inbox) line up with the list. */
html[data-cs-labels] .hamburger-container.landscape > a > button.app,
html[data-cs-labels] .hamburger-container.landscape .topmenu-container button.app {
  width: calc(100% - 40px) !important;
  margin: 0 20px !important;
}
html[data-cs-labels] .hamburger-container.landscape .logo-container {
  justify-content: flex-start !important;
  padding-left: 22px !important;
  box-sizing: border-box;
}

/* Bottom section: Settings, Help and the profile avatar. */
html[data-cs-labels] .antiPanel-application.vertical:has(> .hamburger-container.landscape) > .info-box {
  width: 100% !important;
  align-items: stretch !important;
}
html[data-cs-labels] .antiPanel-application.vertical:has(> .hamburger-container.landscape) > .info-box a {
  display: block;
  width: 100%;
}
html[data-cs-labels] .antiPanel-application.vertical:has(> .hamburger-container.landscape) > .info-box button.app {
  width: calc(100% - 40px) !important;
  min-width: 0 !important;
  margin: 0 20px !important;
  padding: 0 8px !important;
  justify-content: flex-start !important;
  gap: 10px;
}
html[data-cs-labels] .antiPanel-application.vertical:has(> .hamburger-container.landscape) > .info-box .flex-center:has(> #profile-button) {
  justify-content: flex-start !important;
  padding-left: 22px;
}
html[data-cs-labels] #profile-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto !important;
}