/* r77q9c-sidenav-soft.css  (r77q9e rewrite)
 *
 * iOS-inspired sage/green sidenav for cojent.com.au mobile drawer + desktop
 * sidebar. Loaded AFTER cojent-r56-theme.css so its !important rules win.
 *
 * Design language:
 *   - Soft frosted-glass surface (backdrop-blur + tinted sage overlay).
 *   - iOS "Fitness / Health" palette: cool sage greens with warm neutrals.
 *   - SF-inspired type: -apple-system stack, 17px inline, semibold labels.
 *   - Row treatment: 44pt touch targets, iOS grouped-list feel with
 *     hairline separators and 10px inset.
 *   - Active row: solid pill fill (iOS accent), white label, subtle
 *     shadow — no motion, no bounce.
 *
 * Fixes vs first r77q9c cut:
 *   - Beats Tailwind .text-white / .text-gray-100 utilities that were
 *     bleeding through, making labels invisible on the light bg.
 *   - Higher specificity + explicit override list.
 *   - No filter-invert hack on the wordmark; instead the whole logo
 *     block inherits the sage-dark text color.
 *   - Stability rules kept from first cut: 140ms transitions, lock
 *     transform on data-state="open", overscroll:contain, no rubber-band.
 */

/* ================================================================
 * PALETTE — iOS greener
 * ================================================================ */
:root {
  --cj-sidebar-bg:               #E8F1E4;  /* soft sage tint */
  /* R77Q9L: flat single-tone bg (was a gradient) for a cleaner iOS look
   * with no perceived per-row "card" contrast. */
  --cj-sidebar-bg-gradient:      #E8F1E4;
  --cj-sidebar-surface:          rgba(255, 255, 255, 0.55);   /* frosted card fill */
  --cj-sidebar-text:             #1F3A2A;  /* deep forest — 10.8:1 on #E8F1E4 */
  --cj-sidebar-text-strong:      #0F2C1D;
  --cj-sidebar-text-muted:       #4E6B58;  /* muted sage — 5.4:1 */
  --cj-sidebar-text-faint:       #7B9585;
  --cj-sidebar-hairline:         rgba(31, 58, 42, 0.10);
  --cj-sidebar-hover-bg:         rgba(46, 125, 79, 0.09);
  --cj-sidebar-active-bg:        #2E7D4F;  /* iOS-ish accent green */
  --cj-sidebar-active-text:      #FFFFFF;
  --cj-sidebar-active-shadow:    0 1px 2px rgba(46, 125, 79, 0.20),
                                 0 2px 6px rgba(46, 125, 79, 0.16);
  --cj-sidebar-blur:             saturate(180%) blur(20px);
  --cj-sidebar-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                     'SF Pro', 'Inter', 'Helvetica Neue', system-ui,
                     sans-serif;
}

/* ================================================================
 * CONTAINER — frosted sage panel
 * ================================================================ */
nav[class*="sidebar" i],
aside[class*="sidebar" i],
[class*="Sidebar"],
[class*="sidebar"],
nav[aria-label*="main" i],
nav[role="navigation"],
body > div > nav,
body > div > aside {
  background: var(--cj-sidebar-bg) !important;
  background-color: var(--cj-sidebar-bg) !important;
  background-image: none !important;   /* R77Q9L: kill any inherited gradient for a flat look */
  color: var(--cj-sidebar-text) !important;
  border-right: 1px solid var(--cj-sidebar-hairline) !important;
  font-family: var(--cj-sidebar-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backdrop-filter: var(--cj-sidebar-blur);
  -webkit-backdrop-filter: var(--cj-sidebar-blur);
}

/* ================================================================
 * TEXT — beat Tailwind .text-white / .text-gray-100 / etc
 * ================================================================
 * The bundled sidebar leaves inline utilities like text-white and
 * text-gray-100 on labels. Those are single-class .text-white
 * rules with specificity (0,1,0). We chain nav-scope + tag +
 * :not(...) to reach (0,2,1) which beats them, and !important
 * closes the deal.
 */
nav[class*="sidebar" i] *:not(svg):not(path):not(circle):not(rect),
aside[class*="sidebar" i] *:not(svg):not(path):not(circle):not(rect),
[class*="Sidebar"] *:not(svg):not(path):not(circle):not(rect),
nav[role="navigation"] *:not(svg):not(path):not(circle):not(rect) {
  color: var(--cj-sidebar-text) !important;
  font-family: var(--cj-sidebar-font) !important;
}

/* Explicit override: kill inline light Tailwind text colours */
nav[class*="sidebar" i] .text-white,          nav[class*="sidebar" i] .text-gray-50,
nav[class*="sidebar" i] .text-gray-100,       nav[class*="sidebar" i] .text-gray-200,
nav[class*="sidebar" i] .text-slate-50,       nav[class*="sidebar" i] .text-slate-100,
nav[class*="sidebar" i] .text-slate-200,      nav[class*="sidebar" i] .text-slate-300,
nav[class*="sidebar" i] .text-neutral-50,     nav[class*="sidebar" i] .text-neutral-100,
nav[class*="sidebar" i] .text-neutral-200,    nav[class*="sidebar" i] .text-neutral-300,
nav[class*="sidebar" i] .text-zinc-50,        nav[class*="sidebar" i] .text-zinc-100,
nav[class*="sidebar" i] .text-zinc-200,       nav[class*="sidebar" i] .text-zinc-300,
aside[class*="sidebar" i] .text-white,        aside[class*="sidebar" i] .text-gray-100,
aside[class*="sidebar" i] .text-gray-200,     aside[class*="sidebar" i] .text-slate-100,
aside[class*="sidebar" i] .text-slate-200,    aside[class*="sidebar" i] .text-slate-300,
aside[class*="sidebar" i] .text-neutral-100,  aside[class*="sidebar" i] .text-neutral-200,
[class*="Sidebar"] .text-white,               [class*="Sidebar"] .text-gray-100,
[class*="Sidebar"] .text-gray-200,            [class*="Sidebar"] .text-slate-100,
[class*="Sidebar"] .text-slate-200,           [class*="Sidebar"] .text-slate-300,
[class*="Sidebar"] .text-neutral-100,         [class*="Sidebar"] .text-neutral-200,
nav[role="navigation"] .text-white,           nav[role="navigation"] .text-gray-100,
nav[role="navigation"] .text-slate-100,       nav[role="navigation"] .text-neutral-100 {
  color: var(--cj-sidebar-text) !important;
}

/* Section headers — "OPERATIONS", "CLIENTS", "CONSUMABLES" …
 *
 * R77Q9M: replace the chip look with a subtle top divider. The label
 * itself is small muted uppercase text sitting just above a hairline
 * line that spans the drawer. First section gets no divider. */
nav[class*="sidebar" i] h3,
aside[class*="sidebar" i] h3,
[class*="Sidebar"] h3,
.sidebar-section-label {
  color: var(--cj-sidebar-text-muted) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  margin-top: 14px !important;
  margin-bottom: 2px !important;
  padding: 10px 12px 4px !important;
  border-top: 1px solid var(--cj-sidebar-hairline) !important;
  line-height: 1.2 !important;
}

/* First section in the drawer: no top border/padding so it doesn't
 * look like a horizontal rule under the logo block. */
aside.sidebar > nav > div:first-child .sidebar-section-label,
[class~="sidebar"] > nav > div:first-child .sidebar-section-label,
aside.sidebar > nav .sidebar-section-label:first-child,
[class~="sidebar"] > nav .sidebar-section-label:first-child {
  border-top: 0 !important;
  margin-top: 6px !important;
  padding-top: 4px !important;
}

/* Wordmark block: stays sage-dark, no filter tricks */
nav[class*="sidebar" i] [class*="logo" i],
aside[class*="sidebar" i] [class*="logo" i],
[class*="Sidebar"] [class*="logo" i] {
  color: var(--cj-sidebar-text-strong) !important;
}
nav[class*="sidebar" i] [class*="logo" i] svg,
aside[class*="sidebar" i] [class*="logo" i] svg,
[class*="Sidebar"] [class*="logo" i] svg {
  filter: none !important;
  color: var(--cj-sidebar-text-strong) !important;
  fill: currentColor !important;
}
nav[class*="sidebar" i] [class*="logo" i] *,
aside[class*="sidebar" i] [class*="logo" i] *,
[class*="Sidebar"] [class*="logo" i] * {
  color: var(--cj-sidebar-text-strong) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* ================================================================
 * NAV ROWS — iOS grouped-list treatment
 * ================================================================ */
nav[class*="sidebar" i] a,        nav[class*="sidebar" i] button,
aside[class*="sidebar" i] a,      aside[class*="sidebar" i] button,
[class*="Sidebar"] a,             [class*="Sidebar"] button,
nav[role="navigation"] a,         nav[role="navigation"] button,
.sidebar-link {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--cj-sidebar-text) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  margin: 1px 6px !important;
  min-height: 34px !important;      /* R77Q9K: tighter than iOS 44 — nav has 20+ items, needs compact rows */
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;       /* R77Q9K: shrunk from 16px */
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
  transition: background-color 120ms linear, color 120ms linear !important;
}

/* R77Q9L: flatten any wrapper backgrounds around individual items.
 * The bundle wraps each item in <Zu href=...> and then <a>. If either
 * layer or a group <div> has a Tailwind bg-white or bg-card utility,
 * strip it so we get a purely flat drawer surface. */
aside.sidebar .sidebar-link,
aside.sidebar [class*="sidebar-link"],
aside.sidebar a,
aside.sidebar > nav > div,
aside.sidebar > nav > div > *,
[class~="sidebar"] .sidebar-link,
[class~="sidebar"] > nav > div,
[class~="sidebar"] > nav > div > *,
aside.sidebar .bg-card,
aside.sidebar .bg-white,
aside.sidebar .bg-background,
aside.sidebar .bg-surface,
[class~="sidebar"] .bg-card,
[class~="sidebar"] .bg-white,
[class~="sidebar"] .bg-background {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Re-affirm the active pill and hover chip after the blanket flatten above. */
aside.sidebar .sidebar-link.active,
aside.sidebar .sidebar-link[aria-current],
[class~="sidebar"] .sidebar-link.active,
[class~="sidebar"] .sidebar-link[aria-current] {
  background: var(--cj-sidebar-active-bg) !important;
  background-color: var(--cj-sidebar-active-bg) !important;
}
aside.sidebar .sidebar-link:hover,
[class~="sidebar"] .sidebar-link:hover {
  background: var(--cj-sidebar-hover-bg) !important;
  background-color: var(--cj-sidebar-hover-bg) !important;
}

/* Icons: match text color. R77Q9K: 16px so labels have more runway.
 * R77Q9M: opacity dropped from 0.85 -> 0.55 so labels read first. */
nav[class*="sidebar" i] svg,
aside[class*="sidebar" i] svg,
[class*="Sidebar"] svg,
nav[role="navigation"] svg,
.sidebar-link .icon {
  color: currentColor !important;
  fill: currentColor !important;
  opacity: 0.55 !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Active row: bring icon back to full opacity for the white-on-green pill. */
.sidebar-link.active .icon,
.sidebar-link[aria-current] .icon,
.sidebar-link.active svg,
.sidebar-link[aria-current] svg {
  opacity: 1 !important;
}

/* Hover — barely-there sage tint */
nav[class*="sidebar" i] a:hover,   nav[class*="sidebar" i] button:hover,
aside[class*="sidebar" i] a:hover, aside[class*="sidebar" i] button:hover,
[class*="Sidebar"] a:hover,        [class*="Sidebar"] button:hover,
nav[role="navigation"] a:hover,    nav[role="navigation"] button:hover,
.sidebar-link:hover {
  background: var(--cj-sidebar-hover-bg) !important;
  color: var(--cj-sidebar-text-strong) !important;
}

/* Active — solid iOS accent pill, white label, subtle shadow */
nav[class*="sidebar" i] [aria-current],
nav[class*="sidebar" i] .active,
nav[class*="sidebar" i] .selected,
aside[class*="sidebar" i] [aria-current],
aside[class*="sidebar" i] .active,
aside[class*="sidebar" i] .selected,
[class*="Sidebar"] [aria-current],
[class*="Sidebar"] .active,
[class*="Sidebar"] .selected,
nav[role="navigation"] [aria-current],
nav[role="navigation"] .active,
nav[role="navigation"] .selected,
.sidebar-link.active,
nav[class*="sidebar" i] .bg-blue-500,   nav[class*="sidebar" i] .bg-blue-600,
nav[class*="sidebar" i] .bg-sky-500,    nav[class*="sidebar" i] .bg-cyan-500,
aside[class*="sidebar" i] .bg-blue-500, aside[class*="sidebar" i] .bg-blue-600,
aside[class*="sidebar" i] .bg-sky-500,  aside[class*="sidebar" i] .bg-cyan-500,
[class*="Sidebar"] .bg-blue-500,        [class*="Sidebar"] .bg-blue-600,
[class*="Sidebar"] .bg-sky-500,         [class*="Sidebar"] .bg-cyan-500 {
  background: var(--cj-sidebar-active-bg) !important;
  color: var(--cj-sidebar-active-text) !important;
  box-shadow: var(--cj-sidebar-active-shadow) !important;
}
nav[class*="sidebar" i] [aria-current] *,
nav[class*="sidebar" i] .active *,
nav[class*="sidebar" i] .selected *,
aside[class*="sidebar" i] [aria-current] *,
aside[class*="sidebar" i] .active *,
aside[class*="sidebar" i] .selected *,
[class*="Sidebar"] [aria-current] *,
[class*="Sidebar"] .active *,
[class*="Sidebar"] .selected * {
  color: var(--cj-sidebar-active-text) !important;
  fill: var(--cj-sidebar-active-text) !important;
}

/* Trailing badge / count (e.g. "NDIS  4") — pill on right side */
nav[class*="sidebar" i] a > span:last-child,
aside[class*="sidebar" i] a > span:last-child,
[class*="Sidebar"] a > span:last-child {
  margin-left: auto !important;
  color: var(--cj-sidebar-text-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Hairline separators between iOS "sections" — use a top border on
 * each section header except the first. Scoped to .sidebar-section-label
 * only (not any .uppercase span, which would match label spans too). */
.sidebar-section-label ~ .sidebar-section-label,
aside[class*="sidebar" i] h3 ~ h3 {
  border-top: 1px solid var(--cj-sidebar-hairline) !important;
  padding-top: 20px !important;
}

/* ================================================================
 * STABILITY — drawer transitions locked down (kept from first cut)
 * ================================================================ */
nav[class*="sidebar" i],
aside[class*="sidebar" i],
[class*="Sidebar"],
nav[role="navigation"] {
  transition: transform 140ms cubic-bezier(0.4, 0.0, 0.2, 1),
              opacity 100ms linear !important;
  will-change: auto !important;
}

nav[class*="sidebar" i][data-state="open"],
aside[class*="sidebar" i][data-state="open"],
[class*="Sidebar"][data-state="open"],
nav[class*="sidebar" i].open,
aside[class*="sidebar" i].open,
[class*="Sidebar"].open,
nav[class*="sidebar" i].is-open,
aside[class*="sidebar" i].is-open,
[class*="Sidebar"].is-open {
  transform: translate3d(0, 0, 0) !important;
  animation: none !important;
}

[data-radix-dialog-overlay],
[class*="backdrop"][class*="fixed"],
[class*="Overlay"][class*="fixed"],
[class*="scrim" i] {
  transition: opacity 120ms linear !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  animation: none !important;
}

nav[class*="sidebar" i],
aside[class*="sidebar" i],
[class*="Sidebar"] {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: auto !important;
  touch-action: pan-y !important;
}

@media (prefers-reduced-motion: reduce) {
  nav[class*="sidebar" i],
  aside[class*="sidebar" i],
  [class*="Sidebar"],
  [data-radix-dialog-overlay],
  [class*="backdrop"][class*="fixed"],
  [class*="Overlay"][class*="fixed"] {
    transition: none !important;
    animation: none !important;
  }
}

/* ================================================================
 * R77Q9I FIXES (2 Aug 2026)
 *
 * The r48 inline block forced .sidebar-link { color:#ffffff } with
 * !important. That block has been disabled in index.html — but we
 * also want to make sure any late-injected utility or future bundle
 * change can't reintroduce white-on-sage.
 *
 * Also: the mobile drawer was clipping long labels (BULK CLAIM
 * EXPORT, COMPLIANCE REGISTER, AI CLINICAL DOCS) and its outer
 * aside could overflow the viewport during animation.
 * ================================================================ */

/* Contrast: force sage-dark text on the actual .sidebar / .sidebar-link
 * classes emitted by the bundle, with a higher-specificity selector
 * (attribute + class chain). This wins over both r48-style single-class
 * rules and the bundle's --sidebar-fg CSS variable. */
aside.sidebar,
nav.sidebar,
[class~="sidebar"],
aside.sidebar .sidebar-link,
aside.sidebar .sidebar-link span,
aside.sidebar .sidebar-link .flex-1,
aside.sidebar a span,
aside.sidebar button span,
aside.sidebar .sidebar-nav a,
aside.sidebar .sidebar-nav button,
aside.sidebar .sidebar-section-label,
[class~="sidebar"] .sidebar-link,
[class~="sidebar"] .sidebar-link span,
[class~="sidebar"] .sidebar-link .flex-1,
[class~="sidebar"] .sidebar-nav a,
[class~="sidebar"] .sidebar-nav button {
  color: var(--cj-sidebar-text) !important;
}

/* Section labels need muted (still legible on sage) — override in
 * case the bundle sets them to a low-contrast grey. */
aside.sidebar .sidebar-section-label,
[class~="sidebar"] .sidebar-section-label {
  color: var(--cj-sidebar-text-muted) !important;
  text-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-top: 18px !important;
  margin-bottom: 4px !important;
}

/* Icons on sidebar links: match the muted colour, but darker on
 * active/hover for contrast against the accent pill. */
aside.sidebar .sidebar-link .icon,
[class~="sidebar"] .sidebar-link .icon,
aside.sidebar .sidebar-link svg,
[class~="sidebar"] .sidebar-link svg {
  color: var(--cj-sidebar-text-muted) !important;
  fill: currentColor !important;
}
aside.sidebar .sidebar-link.active,
aside.sidebar .sidebar-link[aria-current],
[class~="sidebar"] .sidebar-link.active,
[class~="sidebar"] .sidebar-link[aria-current] {
  background: var(--cj-sidebar-active-bg) !important;
  color: var(--cj-sidebar-active-text) !important;
  box-shadow: var(--cj-sidebar-active-shadow) !important;
}
aside.sidebar .sidebar-link.active,
aside.sidebar .sidebar-link.active *,
aside.sidebar .sidebar-link[aria-current],
aside.sidebar .sidebar-link[aria-current] *,
[class~="sidebar"] .sidebar-link.active,
[class~="sidebar"] .sidebar-link.active *,
[class~="sidebar"] .sidebar-link[aria-current],
[class~="sidebar"] .sidebar-link[aria-current] * {
  color: var(--cj-sidebar-active-text) !important;
}
aside.sidebar .sidebar-link.active .icon,
[class~="sidebar"] .sidebar-link.active .icon,
aside.sidebar .sidebar-link[aria-current] .icon,
[class~="sidebar"] .sidebar-link[aria-current] .icon {
  color: var(--cj-sidebar-active-text) !important;
  opacity: 1 !important;
}

/* Long-label handling: allow the label to shrink and truncate with
 * an ellipsis rather than overflowing the drawer.
 *
 * The bundle emits <a class="sidebar-link w-full">
 *   <Icon class="icon" />
 *   <span class="flex-1">Bulk Claim Export</span>
 *   [optional trailing badge]
 * </a>
 *
 * We turn the flex row into a proper truncating row: the label span
 * gets min-width:0 and text-overflow:ellipsis. */
aside.sidebar .sidebar-link,
[class~="sidebar"] .sidebar-link {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
aside.sidebar .sidebar-link > *,
[class~="sidebar"] .sidebar-link > * {
  min-width: 0 !important;
}
aside.sidebar .sidebar-link .flex-1,
aside.sidebar .sidebar-link > span:not(:last-child),
aside.sidebar .sidebar-link > span:only-of-type,
[class~="sidebar"] .sidebar-link .flex-1,
[class~="sidebar"] .sidebar-link > span:not(:last-child),
[class~="sidebar"] .sidebar-link > span:only-of-type {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: normal !important;   /* undo the wide letter-spacing that was pushing labels out */
  text-transform: none !important;     /* labels are already Title Case; UPPERCASE was making them 20% wider */
  font-weight: 500 !important;
  font-size: 13px !important;          /* R77Q9K: matches .sidebar-link base */
  line-height: 1.25 !important;
}

/* If the bundle wraps the label in another div, make sure that
 * intermediate box also shrinks properly. */
aside.sidebar .sidebar-link .flex-1 > *,
[class~="sidebar"] .sidebar-link .flex-1 > * {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* R77Q9K: chrome now compact enough at the base rule; kept here as
 * belt-and-braces for pages where a stray utility overrides the base. */
aside.sidebar .sidebar-link,
[class~="sidebar"] .sidebar-link {
  padding: 6px 10px !important;
  margin: 1px 6px !important;
  gap: 10px !important;
  min-height: 34px !important;
}
aside.sidebar .sidebar-link .icon,
[class~="sidebar"] .sidebar-link .icon,
aside.sidebar .sidebar-link svg,
[class~="sidebar"] .sidebar-link svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}

/* Also shrink the icon's own background chip if the bundle wraps the
 * icon in a rounded container (visible in screenshots as the white
 * rounded square behind each icon). */
aside.sidebar .sidebar-link > *:first-child:not(span),
[class~="sidebar"] .sidebar-link > *:first-child:not(span) {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Drawer aside width guard.
 *
 * The bundled mobile drawer wraps in <div class="relative w-64 h-full">
 * (256px). We cap that and any similar drawer wrapper so it can never
 * overflow the viewport, and prevent horizontal scroll bleed. */
div.fixed.inset-0.z-50 > .relative,
div.fixed.inset-0.z-50 > div.relative,
.fixed.inset-0.z-50 .relative.w-64,
.fixed.inset-0.z-50 .relative[class*="w-64"],
.fixed.inset-0.z-50 .relative[class*="w-72"] {
  width: min(256px, 88vw) !important;
  max-width: 88vw !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Also cap the .sidebar aside itself (rendered inline-styled to 240px on
 * desktop or 64px collapsed — keep the desktop width but clamp mobile). */
@media (max-width: 767px) {
  aside.sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Contain the .sidebar and everything inside so a stray wide child
 * cannot push the drawer past the viewport. */
aside.sidebar,
[class~="sidebar"] {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.sidebar-nav,
.sidebar > * {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Kill the vertical decorative border on the right of each row that
 * appeared in the r77q9c screenshots. The bundle sometimes renders a
 * ::before pseudo-element via .sidebar-link that shows through when
 * we make the background transparent. We already set background
 * transparent everywhere; suppress any lingering right-side gradient. */
aside.sidebar .sidebar-link::before,
aside.sidebar .sidebar-link::after,
[class~="sidebar"] .sidebar-link::before,
[class~="sidebar"] .sidebar-link::after {
  content: none !important;
  display: none !important;
}

/* Trailing badge polish: keep it right-aligned but don't let it
 * consume space from the label. */
aside.sidebar .sidebar-link > span:last-child:not(:only-of-type),
[class~="sidebar"] .sidebar-link > span:last-child:not(:only-of-type) {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  padding-left: 6px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  max-width: 40% !important;
}