#wrapper {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: calc(100svh - var(--ks-layout-topbar-height));
  overflow: visible;
}

@supports not (min-height: 100svh) {
  #wrapper {
    min-height: calc(100vh - var(--ks-layout-topbar-height));
  }
}

#page-content-wrapper {
  min-height: calc(100svh - var(--ks-layout-topbar-height));
}

@supports not (min-height: 100svh) {
  #page-content-wrapper {
    min-height: calc(100vh - var(--ks-layout-topbar-height));
  }
}

#sidebarMenu {
  width: var(--ks-layout-sidebar-width);
  background: var(--ks-color-surface);
  color: var(--ks-color-text);
  border-right: 1px solid var(--ks-color-border);
  position: sticky;
  top: var(--ks-layout-topbar-height);
  height: calc(100svh - var(--ks-layout-topbar-height));
  padding-top: 0;
  z-index: 1020;
  transition: width var(--ks-motion-normal) var(--ks-motion-ease);
  font-family: inherit;
  font-feature-settings: "liga", "kern";
  align-self: flex-start;
}

@supports not (height: 100svh) {
  #sidebarMenu {
    height: calc(100vh - var(--ks-layout-topbar-height));
  }
}

#sidebarMenu .sidebar-sticky {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#sidebarMenu .sidebar-sticky::-webkit-scrollbar {
  width: 6px;
}

#sidebarMenu .sidebar-sticky::-webkit-scrollbar-track {
  background: transparent;
}

#sidebarMenu .sidebar-sticky::-webkit-scrollbar-thumb {
  background: rgba(91, 53, 220, 0.18);
  border-radius: 6px;
}

#sidebarMenu .sidebar-sticky::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 53, 220, 0.32);
}

#sidebarMenu .sidebar-section {
  padding: 0.65rem 0.85rem;
}

#sidebarMenu .sidebar-section+.sidebar-section {
  margin-top: 0.5rem;
}

#sidebarMenu .sidebar-org-section .sidebar-section-title {
  margin-bottom: 0.4rem;
}

#sidebarMenu .sidebar-org-toggle {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--component-bg-alt);
  color: var(--text-color);
  font-weight: 600;
  padding: 0.55rem 0.75rem;
  gap: 0.6rem;
  transition: border-color var(--transition-duration) var(--transition-easing),
    background-color var(--transition-duration) var(--transition-easing);
}

#sidebarMenu .sidebar-org-toggle:hover,
#sidebarMenu .sidebar-org-toggle:focus {
  background: var(--hover-bg);
  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
}

#sidebarMenu .sidebar-org-label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

#sidebarMenu .sidebar-org-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

#sidebarMenu .sidebar-org-caret {
  font-size: 0.75rem;
  color: var(--text-color-muted);
}

#sidebarMenu .sidebar-org-switcher .dropdown-menu {
  min-width: 220px;
}

#sidebarMenu .sidebar-section-title {
  display: block;
  font-size: .66rem;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ks-color-text-faint);
  margin: .25rem 0 .45rem;
  font-weight: 600;
  transition: max-width .15s ease, opacity .15s ease;
}

#sidebarMenu .nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sidebarMenu .nav-link {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 40px;
  min-width: 0;
  padding: .5rem .6rem;
  border-radius: var(--ks-radius-control);
  color: var(--ks-color-text);   /* was text-muted (#6F7480) — it washed the section names out */
  background: transparent;
  margin-bottom: .18rem;
  width: 100%;
  white-space: nowrap;
  transition:
    background-color var(--ks-motion-fast) var(--ks-motion-ease),
    border-color var(--ks-motion-fast) var(--ks-motion-ease),
    box-shadow var(--ks-motion-fast) var(--ks-motion-ease),
    color var(--ks-motion-fast) var(--ks-motion-ease);
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.2;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 0 transparent;
}

/* Left gradient marker for the active item (fades in) */
#sidebarMenu .nav-link::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ks-color-brand), var(--ks-color-action));
  opacity: 0;
  transition: opacity .18s ease, top .18s ease, bottom .18s ease;
}

#sidebarMenu .nav-link.active::before {
  opacity: 1;
  top: 14%;
  bottom: 14%;
}

/* Icon chip: the brand rounded square */
#sidebarMenu .nav-link .nav-link-icon {
  align-items: center;
  border-radius: 9px;
  display: inline-flex;
  font-size: 0.88rem;
  height: 30px;
  justify-content: center;
  width: 30px;
  text-align: center;
  flex-shrink: 0;
  color: var(--ks-color-text-muted);
  background: var(--ks-color-surface-muted);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* A menu label is NEVER clipped and NEVER pushes its badge past the menu edge.
   It used to be nowrap + ellipsis. The label would not shrink, so a "label + badge"
   row outgrew 240px and the "beta" badge slid off the right edge — sellers saw "bet"
   (measured 11.08.2026 on two of the longest section names, 11px overflow).
   We do not widen the menu to fit the longest label: that breaks on the first
   translation, since every other language runs longer. A long label wraps to a
   second line instead — as in the "Coming soon" group — and the badge never shrinks. */
#sidebarMenu .nav-link-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;   /* wrap on words; break a word only if it is wider than the menu */
  line-height: 1.25;
}

#sidebarMenu .nav-link:hover {
  background: var(--ks-color-surface-subtle);
  color: var(--ks-color-text);
  border-color: var(--ks-color-border-subtle);
}

#sidebarMenu .nav-link.active {
  background: var(--ks-color-brand-soft);
  border-color: color-mix(in srgb, var(--ks-color-brand) 18%, var(--ks-color-border));
  color: var(--ks-color-brand-strong);
  font-weight: 600;
}

/* Active icon — gradient chip with a white glyph (the brand accent) */
#sidebarMenu .nav-link.active .nav-link-icon {
  background: linear-gradient(135deg, var(--ks-color-brand), var(--ks-color-action));
  color: var(--ks-color-surface);
  box-shadow: 0 4px 10px rgba(91, 53, 220, 0.35);
}

#sidebarMenu .nav-link:hover .nav-link-icon {
  background: color-mix(in srgb, var(--ks-color-brand) 12%, transparent);
  color: var(--ks-color-brand);
}

#sidebarMenu .nav-link.active:hover .nav-link-icon {
  background: linear-gradient(135deg, var(--ks-color-brand), var(--ks-color-action));
  color: var(--ks-color-surface);
}

#sidebarMenu .nav-link.is-locked {
  color: var(--text-color-secondary);
  background: transparent;
  border-left-color: transparent;
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
}

#sidebarMenu .nav-link.is-locked:hover {
  color: var(--text-color-secondary);
  background: transparent;
  border-left-color: transparent;
}

#sidebarMenu .nav-link.is-locked .nav-link-icon {
  color: var(--text-color-secondary);
}

#sidebarMenu .nav-link.is-locked .menu-badge {
  background: var(--component-bg-alt);
  color: var(--text-color-secondary);
}

#sidebarMenu .nav-link.is-upcoming {
  position: relative;
  pointer-events: auto;
}

/* "Coming soon" items carry a badge, and a long name leaves it no room. There used
   to be a max-width: 108px here — the label was silently cut to an ellipsis and the
   section became unreadable. Instead of a hard number we allow a wrap to a second
   line: the badge stays with the first, the text stays whole. Navigation must not
   ellipsise — it is not a table. */
#sidebarMenu .sidebar-section--soon .nav-link {
  align-items: flex-start;
  white-space: normal;
}

#sidebarMenu .sidebar-section--soon .nav-link .nav-link-icon,
#sidebarMenu .sidebar-section--soon .menu-badge {
  margin-top: 1px;
}

#sidebarMenu .sidebar-section--soon .nav-link-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

/* "Coming soon" section: roadmap items are muted and set off by a divider so they do
   not compete with working sections; hover restores full contrast. */
#sidebarMenu .sidebar-section--soon {
  border-top: 1px dashed rgba(15, 23, 42, 0.10);
  margin-top: .6rem;
  padding-top: .7rem;
}

#sidebarMenu .sidebar-section--soon .nav-link {
  opacity: .68;
}

#sidebarMenu .sidebar-section--soon .nav-link:hover,
#sidebarMenu .sidebar-section--soon .nav-link.active {
  opacity: 1;
}

#sidebarMenu .sidebar-footer {
  margin-top: auto;
  padding: .65rem .85rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

#sidebarMenu .sidebar-footer .nav-link {
  border: 1px dashed rgba(91, 53, 220, 0.28);
  border-radius: 12px;
}

#sidebarMenu .sidebar-footer .nav-link:hover {
  background: rgba(91, 53, 220, 0.06);
  border-style: solid;
}

#sidebarMenu .menu-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1;
  padding: .26rem .48rem;
  border-radius: 999px;
  background: var(--primary-light-bg);
  color: var(--primary-color);
  opacity: .95;
  user-select: none;
  flex: 0 0 auto;
}

/* "beta" — the brand gradient pill; "Planned" — a quiet outline that does not shout */
#sidebarMenu .menu-badge--beta {
  background: linear-gradient(135deg, var(--ks-color-brand), var(--ks-color-action));
  color: var(--ks-color-surface);
}

/* "Planned" is the quietest badge of all: the section is already titled "Coming soon",
   so the badge only qualifies rather than announces. Tightened horizontally so longer
   names still fit on one line. */
#sidebarMenu .menu-badge--plan {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.55);
  color: #94A3B8;
  font-size: .64rem;
  padding: .22rem .4rem;
  letter-spacing: .01em;
}

#sidebarMenu .nav-link.active .menu-badge {
  background: var(--primary-color);
  color: var(--ks-color-surface);
  opacity: 1;
}

#sidebarMenu .nav-link.active .menu-badge--beta {
  background: linear-gradient(135deg, var(--ks-color-brand), var(--ks-color-action));
}

body.app-shell--auth {
  --sidebar-width: var(--ks-layout-sidebar-width);
  --sidebar-collapsed-width: var(--ks-layout-sidebar-collapsed-width);
}

body.app-shell--auth #sidebarMenu .sidebar-section {
  padding: 0.42rem 0.48rem;
}

body.app-shell--auth #sidebarMenu .sidebar-sticky {
  padding: 0.6rem !important;
}

body.app-shell--auth #sidebarMenu .sidebar-section+.sidebar-section {
  margin-top: 0.35rem;
}

body.app-shell--auth #sidebarMenu .sidebar-section-title {
  font-size: 0.72rem;
  margin: 0.2rem 0 0.4rem;
}

body.app-shell--auth #sidebarMenu .nav-link {
  padding: 0.54rem 0.62rem;
  gap: 0.62rem;
  margin-bottom: 0.16rem;
  font-size: 0.86rem;
  line-height: 1.2;
}

body.app-shell--auth #sidebarMenu .nav-link .nav-link-icon {
  font-size: 0.92rem;
  height: 24px;
  width: 24px;
}

body.app-shell--auth #sidebarMenu .sidebar-footer {
  padding: 0.58rem 0.48rem;
}

body.app-shell--auth #sidebarMenu .menu-badge {
  font-size: 0.68rem;
  padding: 0.22rem 0.45rem;
}

@media (min-width: 992px) {
  body.app-shell--auth #wrapper.lg-toggled #sidebarMenu:hover .nav-link {
    padding: 0.54rem 0.62rem;
    gap: 0.62rem;
  }

  body.app-shell--auth #wrapper.lg-toggled #sidebarMenu:hover .sidebar-section,
  body.app-shell--auth #wrapper.lg-toggled #sidebarMenu:hover .sidebar-footer {
    padding-left: 0.48rem;
    padding-right: 0.48rem;
  }
}

@media (min-width:992px) {
  #sidebarMenu {
    position: fixed;
    top: var(--ks-layout-topbar-height);
    left: 0;
    bottom: 0;
  }

  #page-content-wrapper {
    flex-grow: 1;
    min-width: 0;
    margin-left: var(--ks-layout-sidebar-width);
    width: calc(100% - var(--ks-layout-sidebar-width));
    transition:
      width var(--transition-duration) var(--transition-easing),
      margin-left var(--transition-duration) var(--transition-easing);
  }
}

@media (min-width:992px) {

  #wrapper.lg-toggled #sidebarMenu {
    width: var(--ks-layout-sidebar-collapsed-width);
  }

  #wrapper.lg-toggled #page-content-wrapper {
    margin-left: var(--ks-layout-sidebar-collapsed-width);
    width: calc(100% - var(--ks-layout-sidebar-collapsed-width));
  }

  #wrapper.lg-toggled #sidebarMenu .nav-link {
    justify-content: center;
    gap: 0;
    min-height: 36px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  #wrapper.lg-toggled #sidebarMenu .sidebar-org-toggle {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  #wrapper.lg-toggled #sidebarMenu .sidebar-org-text,
  #wrapper.lg-toggled #sidebarMenu .sidebar-org-caret {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
  }

  #wrapper.lg-toggled #sidebarMenu .sidebar-section,
  #wrapper.lg-toggled #sidebarMenu .sidebar-footer {
    padding-left: .7rem;
    padding-right: .7rem;
  }

  /* A collapsed label MUST stay nowrap: at zero width, word wrapping lays the text out
     one letter per line, the row grows to dozens of lines, and the narrow rail shows
     two or three icons instead of thirteen (caught live on 11.08.2026, right after
     wrapping was enabled for the expanded menu). */
  #wrapper.lg-toggled #sidebarMenu .nav-link-text,
  #wrapper.lg-toggled #sidebarMenu .sidebar-section-title {
    max-width: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  #wrapper.lg-toggled #sidebarMenu .menu-badge {
    display: none;
  }

  /* Hover-expand sits OVER the content: the sidebar is fixed, its width grows and the
     content does NOT move (the content margin-left used to grow with it, so the whole
     page jumped). Depth comes from a soft shadow. */
  #wrapper.lg-toggled #sidebarMenu:hover {
    width: var(--ks-layout-sidebar-width);
    box-shadow: 10px 0 28px rgba(15, 23, 42, 0.10);
  }

  #wrapper.lg-toggled #sidebarMenu:hover .nav-link {
    justify-content: flex-start;
    gap: .7rem;
    padding: .5rem .6rem;
    text-align: left;
  }

  #wrapper.lg-toggled #sidebarMenu:hover .sidebar-section,
  #wrapper.lg-toggled #sidebarMenu:hover .sidebar-footer {
    padding-left: .85rem;
    padding-right: .85rem;
  }

  /* Expanding on hover removes the collapse (max-width: 0) rather than setting a new
     width. A numeric ceiling here would be a second source of truth about the menu
     width: it drifts from the token and starts clipping labels again. */
  #wrapper.lg-toggled #sidebarMenu:hover .nav-link-text,
  #wrapper.lg-toggled #sidebarMenu:hover .sidebar-section-title {
    max-width: 100%;
    opacity: 1;
    white-space: normal;   /* expanded — long labels may wrap again */
  }

  #wrapper.lg-toggled #sidebarMenu:hover .menu-badge {
    display: inline-flex;
  }
}

@media (max-width: 991.98px) {
  #wrapper {
    display: block;
  }

  #page-content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  #sidebarMenu {
    bottom: 0;
    box-shadow: 18px 0 48px rgba(15, 23, 42, 0.16);
    height: calc(100svh - var(--ks-layout-topbar-height)) !important;
    left: 0;
    max-width: 82vw;
    position: fixed !important;
    top: var(--ks-layout-topbar-height) !important;
    transform: translateX(-105%);
    transition: transform var(--transition-duration) var(--transition-easing);
    width: min(278px, 82vw);
    z-index: 1045;
  }

  @supports not (height: 100svh) {
    #sidebarMenu {
      height: calc(100vh - var(--ks-layout-topbar-height)) !important;
    }
  }

  #wrapper.toggled #sidebarMenu {
    transform: translateX(0);
  }

  .sidebar-overlay {
    background: rgba(15, 23, 42, 0.32);
    display: none;
    inset: var(--ks-layout-topbar-height) 0 0;
    position: fixed;
    z-index: 1040;
  }

  #wrapper.toggled .sidebar-overlay {
    display: block;
  }
}

[data-bs-theme="dark"] #sidebarMenu {
  background: var(--component-bg);
}

[data-bs-theme="dark"] #sidebarMenu .sidebar-section-title {
  color: rgba(255, 255, 255, .50);
}

[data-bs-theme="dark"] #sidebarMenu .nav-link {
  color: rgba(255, 255, 255, .72);
}

[data-bs-theme="dark"] #sidebarMenu .nav-link .nav-link-icon {
  color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] #sidebarMenu .nav-link:hover,
[data-bs-theme="dark"] #sidebarMenu .nav-link:hover .nav-link-text {
  color: #fff;
}

[data-bs-theme="dark"] #sidebarMenu .nav-link:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] #sidebarMenu .nav-link:hover .nav-link-icon {
  background: rgba(137, 99, 255, .18);
  color: #B9A3FF;
}

[data-bs-theme="dark"] #sidebarMenu .nav-link.active {
  background: rgba(137, 99, 255, .14);
  border-color: rgba(137, 99, 255, .22);
  color: #E4DBFF;
}

/* The active gradient chip is identical in both themes — it is the brand accent */
[data-bs-theme="dark"] #sidebarMenu .nav-link.active .nav-link-icon,
[data-bs-theme="dark"] #sidebarMenu .nav-link.active:hover .nav-link-icon {
  background: linear-gradient(135deg, var(--ks-color-brand), var(--ks-color-action));
  color: var(--ks-color-surface);
  box-shadow: 0 4px 12px rgba(91, 53, 220, 0.5);
}

[data-bs-theme="dark"] #sidebarMenu .sidebar-section--soon {
  border-top-color: rgba(255, 255, 255, .10);
}

[data-bs-theme="dark"] #sidebarMenu .sidebar-footer {
  border-top-color: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] #sidebarMenu .sidebar-footer .nav-link {
  border-color: rgba(137, 99, 255, .35);
}

[data-bs-theme="dark"] #sidebarMenu .sidebar-footer .nav-link:hover {
  background: rgba(137, 99, 255, .10);
}

[data-bs-theme="dark"] #sidebarMenu .menu-badge {
  background: rgba(137, 99, 255, .18);
  color: var(--primary-color);
}

[data-bs-theme="dark"] #sidebarMenu .menu-badge--beta {
  background: linear-gradient(135deg, var(--ks-color-brand), var(--ks-color-action));
  color: var(--ks-color-surface);
}

[data-bs-theme="dark"] #sidebarMenu .menu-badge--plan {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .55);
}

[data-bs-theme="dark"] #wrapper.lg-toggled #sidebarMenu:hover {
  box-shadow: 10px 0 28px rgba(0, 0, 0, 0.45);
}