/* r77q9n-drawer-blend.css
 *
 * Fixes remaining after r77q9m:
 *   (1) The logo still renders as a stark white "sticker" tile because the
 *       React bundle applies `filter:brightness(0) invert(1)` inline on the
 *       drawer <img>, AND the source PNG has an opaque white background.
 *       Solution: kill the inline invert filter on ALL descendants of the
 *       drawer, and set `mix-blend-mode: multiply` on the logo so the white
 *       pixels of the PNG disappear against the sage drawer surface.
 *
 *   (2) The <nav> zone (OPERATIONS, CLIENTS, ALLIED HEALTH) rendered as
 *       near-white (#FEFEFE) because the r77q9c container rule only matched
 *       elements whose className contains "sidebar" or role/aria pointers,
 *       and the inner <nav class="flex-1 px-2 py-3 space-y-0.5"> is NOT one
 *       of those. As a result the outer .sidebar aside picked up sage, but
 *       the inner <nav> and its <div> children inherited the underlying
 *       app background which is white. Force the sage all the way down.
 *
 * Loaded AFTER cojent-r77q9c-sidenav-soft.css so this file wins.
 */

/* ----------------------------------------------------------------
 * (1) LOGO BLEND — kill the invert filter + apply multiply blend
 * ---------------------------------------------------------------- */

/* Strip the inline `filter: brightness(0) invert(1)` on ANY image inside
 * the drawer top block. This is the header <div> right below the
 * <aside class="sidebar"> — first direct child, contains the wordmark
 * and the close (X) button. We match by finding img inside sidebar. */
aside.sidebar img,
aside[class*="sidebar" i] img,
[class~="sidebar"] img,
nav[class*="sidebar" i] img {
  filter: none !important;
  -webkit-filter: none !important;
  /* Multiply blend: the white background of the logo PNG becomes
   * transparent against the sage drawer, leaving only the coloured
   * mark and wordmark. Perfect for a solid-colour drawer surface. */
  mix-blend-mode: multiply !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Give the logo a bit more presence — the inline width:210 height:66 was
 * cramped and made the mark look like a small stamp. Bump the container
 * padding and let the image fill it. */
aside.sidebar > div:first-child {
  padding: 14px 14px 16px 14px !important;
  min-height: 88px;
  background: transparent !important;   /* inherit sage from aside */
  border-bottom: 1px solid var(--cj-sidebar-hairline, rgba(31,58,42,0.10)) !important;
}

aside.sidebar > div:first-child img {
  height: 60px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* The close (X) button — muted so it doesn't compete with the logo. */
aside.sidebar > div:first-child button {
  color: var(--cj-sidebar-text-muted, #4E6B58) !important;
  opacity: 0.6 !important;
}
aside.sidebar > div:first-child button:hover {
  opacity: 1 !important;
}

/* ----------------------------------------------------------------
 * (2) DRAWER SURFACE — force sage all the way down
 * ---------------------------------------------------------------- */

/* The inner <nav> in the drawer has classNames like
 *   "flex-1 px-2 py-3 space-y-0.5"
 * with none of the "sidebar" tokens, so the r77q9c container rule
 * missed it. Belt-and-braces: paint sage on the aside AND on every
 * direct + indirect descendant that could paint a bg. */
aside.sidebar,
aside.sidebar > nav,
aside.sidebar > nav > div,
aside.sidebar > nav > div > div,
aside.sidebar > div,
aside.sidebar > div > div {
  background: var(--cj-sidebar-bg, #E8F1E4) !important;
  background-color: var(--cj-sidebar-bg, #E8F1E4) !important;
  background-image: none !important;
}

/* The individual sidebar-link items and inner spans must NOT re-paint;
 * they stay transparent so hover/active pills read correctly. */
aside.sidebar .sidebar-link,
aside.sidebar .sidebar-link > *,
aside.sidebar a,
aside.sidebar a > * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Re-affirm active pill after the blanket transparent above. */
aside.sidebar .sidebar-link.active,
aside.sidebar .sidebar-link[aria-current],
aside.sidebar a.active {
  background: var(--cj-sidebar-active-bg, #2E7D4F) !important;
  background-color: var(--cj-sidebar-active-bg, #2E7D4F) !important;
  color: #FFFFFF !important;
  box-shadow: var(--cj-sidebar-active-shadow, 0 1px 2px rgba(46,125,79,0.20),
                                              0 2px 6px rgba(46,125,79,0.16)) !important;
}
aside.sidebar .sidebar-link.active .icon,
aside.sidebar .sidebar-link.active svg,
aside.sidebar .sidebar-link[aria-current] .icon,
aside.sidebar .sidebar-link[aria-current] svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  opacity: 1 !important;
}

/* Re-affirm hover pill after the blanket transparent above. */
aside.sidebar .sidebar-link:hover,
aside.sidebar a:hover {
  background: var(--cj-sidebar-hover-bg, rgba(46, 125, 79, 0.09)) !important;
  background-color: var(--cj-sidebar-hover-bg, rgba(46, 125, 79, 0.09)) !important;
}