/* ==========================================================================
   Sidebar rail.

   ── WHAT THIS REPLACES ──
   The file here was the template's own sidebar sheet: #6362e7 purple on a
   #f4f6fd lavender active state, repeated through nine !important rules, with
   a `svg.feather { width: 21px !important }` to size an icon set this portal
   no longer ships. admin-rebrand.css existed largely to paint over it. The
   colours are brand tokens now, so there is nothing left to paint over.

   ── WHY SO FEW !important ──
   Every rule below used to carry one, which is what happens when a sheet is
   written to beat another sheet rather than to describe a component. The two
   that remain are the ones genuinely fighting the Bootstrap link colour.
   ========================================================================== */

li.sidebar-list {
  display: block;
  width: 100%;
  padding: 5px 12px;
  position: relative;
}

.page-wrapper.compact-wrapper
  .page-body-wrapper
  div.sidebar-wrapper
  .sidebar-main
  .sidebar-links
  .simplebar-content > li {
  display: block;
  width: 100%;
  padding: 0 20px;
  position: relative;
}

.page-wrapper.compact-wrapper
  .page-body-wrapper
  div.sidebar-wrapper
  .sidebar-main
  .sidebar-links
  li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 15px;
  font-weight: 500;
  border-radius: 10px;
  color: inherit;
  /* A rail entry is tapped dozens of times a shift; the hover should arrive
     immediately, not ease in over half a second like the template's did. */
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ── the current page ───────────────────────────────────────────────────── */

a.sidebar-link.sidebar-title.active,
a.sidebar-link.sidebar-title.link-nav.active,
li.sidebar-list.sp-active > a.sidebar-link.sidebar-title {
  background-color: var(--milliyo-green-50, #E7EFEB);
  color: var(--milliyo-forest, #0E3A2C) !important;
}

a.sidebar-link.sidebar-title.active span,
a.sidebar-link.sidebar-title.active .mly-glyph,
li.sidebar-list.sp-active > a.sidebar-link.sidebar-title span,
li.sidebar-list.sp-active > a.sidebar-link.sidebar-title .mly-glyph {
  color: var(--milliyo-forest, #0E3A2C);
}

/* The marker that says which page you are on without relying on colour —
   the one cue that still works for anyone who cannot separate the green from
   the cream behind it. */
li.sidebar-list.sp-active > a.sidebar-link.sidebar-title::before,
a.sidebar-link.sidebar-title.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--milliyo-gold, #C9952A);
}

/* ── submenus ───────────────────────────────────────────────────────────── */

li.submenulist {
  margin-left: 44px;
  padding-top: 9px;
}

li.submenulist a {
  font-size: 13.5px;
  color: var(--milliyo-stone, #4C5C46) !important;
}

li.submenulist a:hover {
  color: var(--milliyo-forest, #0E3A2C) !important;
}

li.submenulist a.active {
  font-weight: 600;
  color: var(--milliyo-forest, #0E3A2C) !important;
}

/* ── glyphs ─────────────────────────────────────────────────────────────── */

.mly-glyph {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}