/* ============================================================
   Fancy MkDocs Material sidebar styling + clean active states
   - Leaf active: pill + left bar
   - Parent active (collapsible): left bar only
   - No right-side active bars
   - Dark mode readability tweaks
   ============================================================ */

/* ===== Sidebar framing ===== */
.md-sidebar__scrollwrap {
  border-right: 1px solid rgba(0,0,0,.08);
}

.md-sidebar__inner {
  padding-top: .35rem;
}

/* ===== Section titles (e.g., "Cards") ===== */
.md-nav__title {
  font-weight: 800;
  letter-spacing: .35px;
  opacity: 1;
}

.md-nav__title,
.md-nav__item--section > .md-nav__link {
  text-transform: uppercase;
  font-size: .72rem;
  color: rgba(0,0,0,.55);
}

/* ===== Nav items ===== */
.md-nav__link {
  padding: .28rem .55rem;
  border-radius: .55rem;
  font-weight: 550;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

/* Hover: subtle lift + background */
.md-nav__link:hover {
  background: rgba(0,0,0,.05);
  transform: translateX(1px);
}

/* ===== Hierarchy: indent + guide line (tree vibe) ===== */
.md-nav__list .md-nav__list {
  margin-left: .85rem;
  padding-left: .65rem;
  border-left: 1px solid rgba(0,0,0,.10);
}

.md-nav__list .md-nav__list .md-nav__link {
  font-size: .95em;
  opacity: .95;
}

/* Slight spacing between items so it feels less flat */
.md-nav__item {
  margin: .06rem 0;
}

/* ===== Chevron visibility (expand/collapse indicator) ===== */
.md-nav__toggle ~ .md-nav__link .md-nav__icon,
.md-nav__toggle ~ .md-nav__link .md-nav__icon::before {
  opacity: .85;
}

.md-nav__toggle ~ .md-nav__link:hover .md-nav__icon {
  opacity: 1;
}

/* ============================================================
   Active states
   ============================================================ */

/* Baseline: NEVER show any right-side indicator/pseudo elements */
.md-nav__link::after,
.md-nav__toggle::after,
.md-nav__toggle::before {
  display: none !important;
}

/* --- Leaf active (real page): pill + left bar --- */
.md-nav__link--active {
  font-weight: 800;
  background: rgba(0,0,0,.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  position: relative;
}

/* Left bar for active items (leaf by default) */
.md-nav__link--active::before {
  content: "";
  position: absolute;
  left: -0.55rem;
  top: .3rem;
  bottom: .3rem;
  width: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
}

/* --- Parent active (collapsible): LEFT BAR ONLY (no pill) --- */
.md-nav__item--nested > .md-nav__link.md-nav__link--active,
.md-nav__item--section > .md-nav__link.md-nav__link--active {
  background: transparent !important;
  box-shadow: none !important;
}

/* Parent left bar: slightly slimmer/softer than leaf */
.md-nav__item--nested > .md-nav__link.md-nav__link--active::before,
.md-nav__item--section > .md-nav__link.md-nav__link--active::before {
  width: 3px;
  opacity: .7;
}

/* Ensure the toggle (chevron area) never draws anything "active" */
.md-nav__item--nested > .md-nav__toggle,
.md-nav__item--section > .md-nav__toggle {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Extra safety: kill borders/shadows that can appear on the right */
.md-nav__item--nested > *,
.md-nav__item--section > * {
  border-right: 0 !important;
  box-shadow: none !important;
}

/* ===== Dark mode readability tweaks ===== */
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap {
  border-right-color: rgba(255,255,255,.10);
}

/* Sidebar title readable */
[data-md-color-scheme="slate"] .md-nav__title,
[data-md-color-scheme="slate"] .md-nav__title a,
[data-md-color-scheme="slate"] .md-nav__title .md-nav__button {
  color: rgba(255,255,255,.92) !important;
}

/* Section headings like CARDS / COMPONENTS */
[data-md-color-scheme="slate"] .md-nav__item--section > .md-nav__link {
  color: rgba(255,255,255,.60) !important;
}

/* Guide line visible in dark mode */
[data-md-color-scheme="slate"] .md-nav__list .md-nav__list {
  border-left-color: rgba(255,255,255,.12);
}

/* Hover in dark */
[data-md-color-scheme="slate"] .md-nav__link:hover {
  background: rgba(255,255,255,.06);
}

/* Leaf active pill in dark */
[data-md-color-scheme="slate"] .md-nav__link--active {
  background: rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

/* ===== Optional: tighter look on mobile sidebar ===== */
@media (max-width: 76.1875em) {
  .md-nav__link {
    padding: .32rem .6rem;
  }
}