@scope (.native-shell) {
/*
 * sidebar-popovers.css — Sidebar popover overlays (tooltip + flyout).
 *
 * Owned module: public/assets/css/core/sidebar/
 *
 * Covers the popovers that anchor off the sidebar rail:
 *   - .tooltip  — collapsed-mode hover tip (shows .item .data-label)
 *   - .flyout + .flyout-header — collapsed-mode Appointments menu
 *   - .fly-item + .fly-badge — Calendar / List / Waitlist rows + colored badges
 *
 */

.tooltip {
  position: absolute;
  left: calc(100% + 14px);
  top: 0;
  /* Modern white chip — ink-dark text, a soft layered elevation shadow +
   * hairline ring. SOLID opaque white (no alpha, no backdrop-filter) so page
   * content — e.g. the calendar's red now-line at z-index 80, anything behind
   * it on any page — can NEVER bleed through. Same rule the flyout/popup keep:
   * a popover must fully occlude what's under it. White in BOTH themes. */
  background: #ffffff;
  color: #24262b;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow:
    0 12px 28px -10px rgba(17, 24, 39, 0.28),
    0 6px 14px -6px rgba(17, 24, 39, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.035);
  pointer-events: none;
  opacity: 0;
  transform-origin: left center;
  transform: translate(-5px, -50%) scale(0.96);
  transition:
    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  /* Above page content (sticky headers / cards sit at z-index 100–110). The
   * account popup at 200 already clears them; match it so collapsed-mode tips
   * and flyouts never sink behind the page. Stays below modals/drawers (600+). */
  z-index: 200;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* When already shown, the chip GLIDES to the next icon (top animates) instead
 * of disappearing + reappearing — one persistent box that follows the cursor.
 * `top` is only on the .show transition, so the FIRST appearance snaps into
 * place (no slide-in from a stale position) and only icon-to-icon moves glide. */
.tooltip.show {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
  transition:
    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Label crossfade — the word dips + lifts as the box glides, so it "morphs"
 * from one section to the next rather than hard-cutting. */
.tooltip__txt {
  display: inline-block;
  transition: opacity 0.1s ease, transform 0.1s ease;
}
.tooltip__txt.is-swapping { opacity: 0; transform: translateY(-3px); }
.sb.expanded .tooltip { display: none; }

/* Collapse-toggle tip — the Gemini black pill ("Close sidebar" / "Open
 * sidebar") with a left-pointing caret aimed at the toggle button. Unlike
 * .tooltip (collapsed-mode nav labels, JS-driven), this one is pure CSS:
 * anchored to the .sb rail at the logo-row's vertical center and revealed
 * via :has(.collapse-btn:hover) after a short Gemini-like delay. It lives
 * OUTSIDE .logo-row because that row clips (overflow: hidden). */
.collapse-tip {
  position: absolute;
  /* Hugs the toggle button (Gemini gap ≈ 3–4px between the hover circle and
   * the tail tip), NOT the rail edge — per-state left below closes the gap. */
  left: calc(100% - 10px);
  top: calc(var(--ds-app-frame-topbar-height, var(--ds-shell-header-height, 64px)) / 2);
  transform: translateY(-50%);
  /* SOLID (no gradient): the ::after tail must be the exact same paint so the
   * two shapes read as ONE seamless bubble. */
  background: var(--c-tooltip-bg-to, #18181b);
  color: var(--c-tooltip-text, #ffffff);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  -webkit-font-smoothing: antialiased;
}
.sb.collapsed .collapse-tip { left: calc(100% - 7px); }
/* No tail/caret — Armen's call (2026-07-02): the pointed wedge never renders
 * cleanly here, so the tip is a plain rounded pill. */
/* Reveal after a beat on button hover; hide snaps instantly (no delay,
 * no transition on the base rule). Collapsed keys off .logo-row:hover
 * instead — the button starts at pointer-events: none there (it sits
 * under the "O" mark), so its own :hover can never engage reliably. */
.sb.expanded:has(.collapse-btn:hover) .collapse-tip,
.sb.collapsed:has(.logo-row:hover) .collapse-tip {
  opacity: 1;
  transition: opacity 0.15s ease 0.3s;
}
.sb.expanded .collapse-tip__txt--open { display: none; }
.sb.collapsed .collapse-tip__txt--close { display: none; }


.flyout {
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  background: var(--c-popup-bg);
  border: 1px solid var(--c-popup-border);
  border-radius: 14px;
  padding: 8px;
  width: 220px;
  display: flex; flex-direction: column;
  gap: 4px;
  box-shadow: var(--c-popup-shadow);
  /* Tall sections (Reports/Marketing) can list many rows — cap height and
   * scroll inside instead of spilling past the viewport. */
  max-height: min(70vh, 520px);
  overflow-y: auto;
  scrollbar-width: thin;
  opacity: 0;
  pointer-events: none;
  /* Closed/initial state — also where the panel eases back to on close. It
   * emerges from the trigger icon (top-left) and barely travels: the appearance
   * is carried by a soft focus-in (blur→sharp) + a gentle scale, so the eye
   * reads "it's simply there", never "it slid in". */
  transform-origin: left top;
  transform: translateX(-4px) scale(0.94);
  filter: blur(5px);
  transition:
    opacity 0.17s ease,
    transform 0.17s cubic-bezier(0.4, 0, 1, 1),
    filter 0.17s ease,
    background 0.35s ease;
  will-change: transform, opacity, filter;
  /* Above page content (100–110), peer with the account popup, below modals. */
  z-index: 200;
}
/* Premium OPEN — a soft spring with a focus-in. The panel scales up from the
 * trigger with a whisper of overshoot (1.012, barely perceptible) and de-blurs
 * into focus, so the menu feels like it simply ARRIVES rather than animating in.
 * The blur lives on the panel, so every row sharpens together as one cohesive
 * material — the eye can't isolate "how" it appeared, only that it feels good. */
.flyout.open {
  pointer-events: auto;
  animation: flyoutSpring 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes flyoutSpring {
  0%   { opacity: 0; transform: translateX(-4px) scale(0.94);  filter: blur(5px); }
  55%  { opacity: 1; transform: translateX(0)    scale(1.012); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0)    scale(1);     filter: blur(0); }
}
.sb.expanded .flyout { display: none; }

/* ── Gliding rail flyout ────────────────────────────────────────────────────
 * One shared #railFlyout that glides between sections + morphs its contents.
 * Scroll + the height-morph clip can't share one box, so they nest: the rail
 * shell clips (overflow hidden) and animates `height`; the inner pane owns the
 * padding + scroll + the content crossfade. */
.flyout--rail {
  display: block;
  padding: 0;
  max-height: none;
  overflow: hidden;       /* clips the pane while `height` morphs */
}
/* While open, top + height glide smoothly (opacity/transform/filter are driven
 * by the flyoutSpring animation on first open, so they're left off here). */
.flyout--rail.open {
  transition:
    top    0.4s  cubic-bezier(0.22, 1, 0.36, 1),
    height 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.flyout__pane {
  padding: 8px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  scrollbar-width: thin;
  /* Soft blur-crossfade as the contents swap — no hard blink. */
  transition: opacity 0.14s ease, filter 0.14s ease;
}
.flyout__pane.is-out { opacity: 0; filter: blur(5px); }

/* Compact rail overlays are viewport overlays, not off-canvas layout. Keeping
 * their closed geometry inside the viewport prevents horizontal page scroll
 * on every mobile workspace while preserving their open interaction. */
@media (max-width: 900px) {
  .tooltip,
  .collapse-tip,
  .flyout {
    position: fixed;
    left: 72px;
    right: auto;
    max-width: calc(100vw - 82px);
  }
  .flyout { width: min(220px, calc(100vw - 82px)); }
  .sb.collapsed .collapse-tip { left: 72px; }
}
/* Staggered "assemble" of the incoming rows as the panel glides + morphs.
 * No per-row filter:blur here — blurring every row simultaneously re-rasterizes
 * N layers each frame (the dominant GPU cost on open). The single panel-level
 * focus-in (flyoutSpring) keeps the premium feel at a fraction of the cost. */
@keyframes flyRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.flyout--rail.is-morph .flyout-header,
.flyout--rail.is-morph .fly-item {
  animation: flyRowIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.flyout--rail.is-morph .fly-item:nth-child(2) { animation-delay: 32ms; }
.flyout--rail.is-morph .fly-item:nth-child(3) { animation-delay: 64ms; }
.flyout--rail.is-morph .fly-item:nth-child(4) { animation-delay: 96ms; }
.flyout--rail.is-morph .fly-item:nth-child(5) { animation-delay: 128ms; }
.flyout--rail.is-morph .fly-item:nth-child(6) { animation-delay: 160ms; }
.flyout--rail.is-morph .fly-item:nth-child(n + 7) { animation-delay: 192ms; }

.flyout-header {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  /* --c-text-soft is ~1.9:1 on the light popup — use --c-text-muted so the 8
   * generic flyout headers stay legible in light theme. */
  color: var(--c-text-muted); font-weight: 600;
  padding: 6px 10px 8px; margin-bottom: 2px;
  transition: color 0.35s ease;
}
.fly-item {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 9px;
  font-size: 13px; color: var(--c-text-medium);
  cursor: pointer; user-select: none; gap: 12px;
  /* Match the .sub-item/.item hover timing (was a faster, easing-less 0.12s). */
  transition: background 0.18s ease, color 0.18s ease;
}
.fly-item:hover { background: var(--c-popup-hover); color: var(--c-text); }
/* Active row must be distinguishable from a merely-hovered row — the badge-less
 * generic flyouts had no current-item cue beyond font-weight. Add an accent bar. */
.fly-item.on { background: var(--c-popup-hover); color: var(--c-text); font-weight: 500; }
.fly-item.on::before {
  content: '';
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 15px; border-radius: 2px;
  background: var(--c-rail-active);
}
.fly-item:focus-visible {
  outline: 2px solid var(--c-rail-active);
  outline-offset: -2px;
}
.fly-badge {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fly-badge svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fly-badge.cal { background: var(--app-theme-fill,#4ba3ff); }
.fly-badge.lst { background: var(--app-theme-line,#b78bff); }
.fly-badge.wat { background: #ff8a5c; }

}