@scope (.native-shell) {
/*
 * sidebar-nav.css — Sidebar primary navigation rail styles.
 *
 * Owned module: public/assets/css/core/sidebar/
 *
 * Covers the .nav block and its descendants:
 *   - .logo-row + .logo-svg + collapse-btn + collapsed/expanded logo swap
 *   - .nav scroll container (scrollbars hidden)
 *   - .item rows (default / hover / .on / .open + .ch chevron)
 *   - .label section heading ("Growth")
 *   - .submenu + .sub-item (Calendar / List / Waitlist)
 *   - .divider hairline
 *
 */

/* Paired message glyphs follow the same selected state in expanded/collapsed rails. */
.sb .item[data-key="messages"] .sb-icon-fill { display: none; }
.sb .item.on[data-key="messages"] .sb-icon-fill { display: inline; }
.sb .item.on[data-key="messages"] .sb-icon-outline { display: none; }

.logo-row {
  /* Logo row height tokenized to --ds-app-frame-topbar-height so the
   * sidebar logo row aligns with the calendar toolbar + drawer headers. */
  padding: 0 16px 0 21px;
  display: flex;
  align-items: center;
  height: var(--ds-app-frame-topbar-height, var(--ds-shell-header-height, 64px));
  min-height: var(--ds-app-frame-topbar-height, var(--ds-shell-header-height, 64px));
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--c-divider);
}
.logo-svg {
  height: 22px; display: block;
  filter: var(--logo-filter);
  opacity: 0.95;
  transition: opacity 0.2s ease, filter 0.35s ease;
}
.logo-word {
  position: absolute;
  left: 21px; top: 50%;
  transform: translateY(-50%);
}
.sb.collapsed .logo-word { opacity: 0; pointer-events: none; }
.sb.expanded .logo-mark { opacity: 0; pointer-events: none; }


.nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 10px;
  /* Scrollbar UI hidden — the rail still scrolls on very short viewports
   * but the scrollbar itself never paints. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.nav::-webkit-scrollbar-thumb { background: transparent; }
.nav::-webkit-scrollbar-track { background: transparent; }


/* ITEMS — proper breathing room between rows */
.item {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 13.5px;
  border-radius: 8px;
  color: var(--c-text-muted);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 4px;
  user-select: none;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.item:hover { color: var(--c-text-medium); background: var(--c-hover); }
.sb-lira-trigger { width:100%; border:0; background:transparent; font:inherit; text-align:left; }
.item.on { background: var(--c-active); color: var(--c-text); font-weight: 500; }
.item .ic { width: 18px; height: 18px; flex-shrink: 0; }
.sb-nav-icon { display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px; }
.sb-icon-fill { display:none; }
.sb .item .ic > .sb-calendar-day { fill:currentColor;stroke:none;font-size:12px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0; }
:scope[data-app-color] .sb .item.on .ic > .sb-calendar-day { fill:var(--sb-card-color); }
/* Active rows get a slightly heavier icon outline so the icon's
 * perceived weight balances the bold text. Mirrors the text bump
 * from font-weight 400 -> 500 on .item.on above. */
.item.on .ic.li,
.item.on .ch.li { stroke-width: 2; }
.item .ch {
  margin-left: auto; width: 12px; height: 12px;
  opacity: 0.7;
  transition: transform 0.2s, opacity 0.2s;
}
.item.open .ch { transform: rotate(180deg); }

/* Keyboard focus ring — the rows are focusable (tabindex/role in the markup),
 * so keyboard users need a visible focus indicator on every interactive row. */
.item:focus-visible,
.sub-item:focus-visible {
  outline: 2px solid var(--c-rail-active);
  outline-offset: -2px;
  border-radius: 10px;
}

.sb.collapsed .item-text,
.sb.collapsed .item .ch,
.sb.collapsed .label,
.sb.collapsed .submenu,
.sb.collapsed .uinfo,
.sb.collapsed .ucaret { display: none !important; }

.label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--c-text-dim);
  padding: 16px 12px 8px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.35s ease;
}


.submenu {
  position: relative;
  margin: 6px 0 8px 0;
  padding-left: 26px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.submenu.open { max-height: 320px; }
/* Reports submenu holds many grouped reports — let it grow and scroll instead of
 * clipping at the shared 220px cap (which hid reports past the first few). */
#reportsMenu.open { max-height: min(62vh, 600px); }
/* Scroll is enabled ONLY after the open animation settles: the controller adds
 * `.is-scrollable` on the max-height transitionend. Applying overflow-y:auto
 * during the transition flashed a scrollbar in and out — for the first frames
 * the full content overflows the still-small max-height, so `auto` paints a
 * scrollbar that vanishes the instant max-height passes the content height.
 * Keeping overflow:hidden (from the base .submenu) until settled clips cleanly
 * with no flash; the scrollbar then appears only if the content genuinely
 * exceeds the cap. `.is-scrollable` is removed at close start so closing never
 * flashes either. */
#reportsMenu.open.is-scrollable { overflow-y: auto; scrollbar-width: thin; }
/* Group header inside a submenu (report categories: Sales / Staff / Customers / …). */
.submenu .sub-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  font-weight: 600;
  padding: 10px 12px 3px;
  pointer-events: none;
  user-select: none;
}
.submenu .sub-label:first-child { padding-top: 2px; }
.submenu::before {
  content: '';
  position: absolute;
  left: 23px; top: 6px; bottom: 6px;
  width: 1.5px;
  background: var(--c-rail);
  border-radius: 1px;
  transition: background 0.35s ease;
}

.sub-item {
  position: relative;
  display: flex; align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--c-text-muted);
  cursor: pointer;
  border-radius: 7px;
  transition: color 0.2s ease, background 0.2s ease;
  margin-bottom: 3px;
}
.sub-item:last-child { margin-bottom: 0; }
.sub-item:hover { color: var(--c-text-medium); background: var(--c-hover); }
.sub-item.on { color: var(--c-text); font-weight: 500; }
.sub-item.on::before {
  content: '';
  position: absolute;
  left: -3px; top: 50%;
  transform: translateY(-50%);
  width: 1.5px; height: 16px;
  background: var(--c-rail-active);
  border-radius: 1px;
  box-shadow: 0 0 6px var(--c-rail-glow);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}


.divider {
  /* Both themes use identical dimensions: `height: 1px; margin: 12px`.
   * Light-mode invisibility comes from `--c-divider: transparent`. Margin
   * is intentionally OFF the transition list — animating layout on theme
   * toggle would shift every row below the divider. */
  height: 1px;
  background: var(--c-divider);
  margin: 12px 12px;
  transition: background 0.35s ease;
}

/* Gemini-style panel toggle. Expanded: sits at the right edge of the logo
 * row — a bare panel glyph whose arrow ("close" direction) fades in on
 * hover, with a circular hover wash. Collapsed: absolutely centered UNDER
 * the "O" mark at opacity 0; hovering the logo row crossfades mark → button
 * (arrow already pointing "open"). */
.collapse-btn {
  margin-left: auto;
  flex: 0 0 auto;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--ds-button-radius-icon);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-collapse-btn-text);
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s, color 0.15s, opacity 0.2s ease;
}
.collapse-btn:hover { background: var(--c-collapse-btn-hover-bg); color: var(--c-text); }
.collapse-btn .li { stroke-width: 1.5; }
/* Direction arrows inside the panel glyph — hidden at rest (Gemini shows the
 * bare panel), the relevant one fades in when the button is interactive. */
.cb-arrow { opacity: 0; transition: opacity 0.15s ease; }
.sb.expanded .collapse-btn:hover .cb-arrow--close { opacity: 1; }
.sb.collapsed .cb-arrow--open { opacity: 1; }
/* Collapsed rail — button hides beneath the centered "O" and swaps in on
 * logo-row hover (the mark fades out via its own opacity transition). */
.sb.collapsed .collapse-btn {
  position: absolute;
  left: 50%; top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.sb.collapsed .logo-row:hover .collapse-btn { opacity: 1; pointer-events: auto; }
.sb.collapsed .logo-row:hover .logo-mark { opacity: 0; }

}