.desktop-sidebar-rail {
  display: none;
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  height: 100%;
  transition: flex-basis 220ms cubic-bezier(.2,.8,.2,1), width 220ms cubic-bezier(.2,.8,.2,1);
}

.desktop-sidebar-rail[data-pinned='true'] { flex-basis: 272px; width: 272px; }
.desktop-sidebar-panel[data-pinned='true'] .sidebar-pin-button {
  background: rgb(218 240 230 / 82%);
  color: #187456;
}
html.dark .desktop-sidebar-panel[data-pinned='true'] .sidebar-pin-button {
  background: rgb(64 139 104 / 24%);
  color: #8fdbb8;
}

@media (min-width: 1280px) {
  .desktop-sidebar-rail { display: block; }
}

.desktop-sidebar-panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: 64px;
  overflow-x: hidden;
  background: #fff;
  border-right: 1px solid #eef0f3;
  box-shadow: 2px 0 8px rgb(15 23 42 / 3%);
  transition: width 180ms ease-out, box-shadow 180ms ease-out;
}

.desktop-sidebar-panel[data-expanded='true'] {
  width: 256px;
  box-shadow: 12px 0 28px -8px rgb(15 23 42 / 18%);
}

.desktop-sidebar-panel button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

/* Keep the native gutter stable so icons do not shift when the thumb appears.
   Pointer focus must not leave the scrollbar visible after the menu closes. */
.desktop-sidebar-panel .soft-scrollbar,
html.dark .desktop-sidebar-panel .soft-scrollbar {
  --scroll-thumb: transparent;
  --scroll-thumb-hover: transparent;
}

.desktop-sidebar-panel:hover .soft-scrollbar,
.desktop-sidebar-panel:has(:focus-visible) .soft-scrollbar {
  --scroll-thumb: rgba(92, 110, 116, .44);
  --scroll-thumb-hover: rgba(92, 110, 116, .44);
}

html.dark .desktop-sidebar-panel:hover .soft-scrollbar,
html.dark .desktop-sidebar-panel:has(:focus-visible) .soft-scrollbar {
  --scroll-thumb: rgba(173, 191, 199, .45);
  --scroll-thumb-hover: rgba(173, 191, 199, .45);
}

/* Touch devices have no hover; retain a discoverable native scroll control. */
@media (hover: none), (forced-colors: active) {
  .desktop-sidebar-panel .soft-scrollbar,
  html.dark .desktop-sidebar-panel .soft-scrollbar {
    --scroll-thumb: rgba(92, 110, 116, .44);
    --scroll-thumb-hover: rgba(92, 110, 116, .44);
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-sidebar-panel { transition: none; }
}

/* A quiet glass surface; opacity belongs to the surface, never the labels. */
.desktop-sidebar-panel {
  background: #f8fbfa;
  border-right-color: rgb(148 173 164 / 16%);
  transition: width 220ms cubic-bezier(.2,.8,.2,1), background-color 220ms ease, box-shadow 220ms ease;
}

.desktop-sidebar-panel[data-expanded='true'] {
  width: 272px;
  background: rgb(248 252 250 / 80%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border-right-color: rgb(255 255 255 / 75%);
  box-shadow: 16px 0 48px -18px rgb(28 64 51 / 20%), inset -1px 0 rgb(255 255 255 / 50%);
}

.desktop-sidebar-panel .sidebar-header {
  min-height: 60px;
  padding: 10px 12px;
  justify-content: space-between;
}
.desktop-sidebar-panel[data-expanded='false'] .sidebar-header { justify-content: center; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.sidebar-brand > span { font-size: 19px; font-weight: 650; letter-spacing: -.7px; color: #25473d; }
.desktop-sidebar-panel .sidebar-user-chip { margin-bottom: 14px; border-radius: 12px; }
.desktop-sidebar-panel .sidebar-user-chip > div:first-child { background: #d9eee5 !important; color: #33735d !important; }

.desktop-sidebar-panel .sidebar-nav-item {
  min-height: 43px;
  margin: 3px 0;
  border-radius: 12px;
  background: transparent;
  color: #586b64;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.desktop-sidebar-panel .sidebar-nav-icon { flex-shrink: 0; color: #788b83; }
.desktop-sidebar-panel .sidebar-nav-icon svg { stroke-width: 1.65; }
.desktop-sidebar-panel .sidebar-nav-label {
  color: #53675e;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05px;
  white-space: nowrap;
}
.desktop-sidebar-panel .sidebar-nav-item:hover { background: rgb(255 255 255 / 65%); }
.desktop-sidebar-panel .sidebar-nav-item:hover .sidebar-nav-icon,
.desktop-sidebar-panel .sidebar-nav-item:hover .sidebar-nav-label { color: #238266; }
.desktop-sidebar-panel .sidebar-nav-item[aria-current='page'] {
  background: rgb(218 240 230 / 82%);
  box-shadow: inset 0 0 0 1px rgb(105 173 143 / 10%);
}
.desktop-sidebar-panel .sidebar-nav-item[aria-current='page'] .sidebar-nav-icon,
.desktop-sidebar-panel .sidebar-nav-item[aria-current='page'] .sidebar-nav-label { color: #187456; }
.desktop-sidebar-panel .sidebar-nav-item > div.absolute { display: none; }
.desktop-sidebar-panel .sidebar-footer {
  padding: 12px 8px;
  border-color: rgb(148 173 164 / 15%);
  background: rgb(239 246 242 / 40%);
  backdrop-filter: none;
}
.desktop-sidebar-panel .sidebar-footer > div { gap: 4px; }
.desktop-sidebar-panel .sidebar-footer button { border-radius: 11px; }

html.dark .desktop-sidebar-panel { background: #18241f; border-color: rgb(166 198 182 / 12%); }
html.dark .desktop-sidebar-panel[data-expanded='true'] {
  background: rgb(24 38 32 / 83%);
  border-color: rgb(166 198 182 / 15%);
  box-shadow: 16px 0 48px -18px rgb(0 0 0 / 45%);
}
html.dark .sidebar-brand > span { color: #d8e9e0; }
html.dark .desktop-sidebar-panel .sidebar-nav-label { color: #bbcdc3; }
html.dark .desktop-sidebar-panel .sidebar-nav-icon { color: #94ada0; }
html.dark .desktop-sidebar-panel .sidebar-nav-item:hover { background: rgb(184 221 201 / 8%); }
html.dark .desktop-sidebar-panel .sidebar-nav-item[aria-current='page'] { background: rgb(64 139 104 / 24%); }
html.dark .desktop-sidebar-panel .sidebar-nav-item:is(:hover, [aria-current='page']) :is(.sidebar-nav-label, .sidebar-nav-icon) { color: #8fdbb8; }
html.dark .desktop-sidebar-panel .sidebar-footer { background: rgb(15 27 21 / 25%); border-color: rgb(166 198 182 / 12%); }

@supports not (backdrop-filter: blur(1px)) {
  .desktop-sidebar-panel[data-expanded='true'] { background: #f4f9f6; }
  html.dark .desktop-sidebar-panel[data-expanded='true'] { background: #182620; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-sidebar-rail, .desktop-sidebar-panel, .desktop-sidebar-panel .sidebar-nav-item { transition: none; }
}
@media (forced-colors: active) {
  .desktop-sidebar-panel .sidebar-nav-item[aria-current='page'] { outline: 1px solid Highlight; }
}