/*
 * WorkBench brand chrome reskin — sidebar (Metronic "kt-aside") + topbar
 * ("kt-header"). Targets the standard Metronic classes directly; no markup
 * changes are required in nav.html / header.html, so Metronic's own JS
 * (aside toggle, submenu open/close, header offcanvas) is untouched.
 *
 * Covers: base/nav.html + base/header.html (shared by base/base.html,
 * client/base.html, padmin/base.html) and collateral_manager/nav.html,
 * which all use the same kt-aside / kt-menu__* markup.
 */

/* ---------------------------------------------------------------------- */
/* Sidebar (kt-aside)                                                      */
/* ---------------------------------------------------------------------- */

.kt-aside {
  background-color: var(--wb-green-dark) !important;
  box-shadow: var(--wb-shadow-lg);
}

.kt-aside__brand {
  background-color: var(--wb-green-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kt-aside__brand-logo img.logo-size {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

.kt-aside-menu-wrapper,
.kt-aside-menu {
  background-color: var(--wb-green-dark) !important;
}

/* thin, brand-colored scrollbar inside the sidebar */
.kt-aside-menu::-webkit-scrollbar {
  width: 6px;
}
.kt-aside-menu::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: var(--wb-radius-pill);
}

.kt-menu__nav > .kt-menu__item {
  margin: 2px 12px;
}

.kt-menu__link {
  border-radius: var(--wb-radius-md) !important;
  font-family: var(--wb-font);
  transition: background-color 0.15s ease;
}

.kt-menu__link-text {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
}

.kt-menu__link-icon {
  color: rgba(255, 255, 255, 0.7) !important;
}

.kt-menu__ver-arrow {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* hover state — bright brand green, rounded, matches the new Sidebar's
   `hover:bg-afexgreen hover:bg-opacity-20 hover:rounded-xl` */
.kt-menu__item > .kt-menu__link:hover,
.kt-menu__item:hover > .kt-menu__link {
  background-color: rgba(var(--wb-green-rgb), 0.3) !important;
}
.kt-menu__item > .kt-menu__link:hover .kt-menu__link-text,
.kt-menu__item:hover > .kt-menu__link .kt-menu__link-text,
.kt-menu__item > .kt-menu__link:hover .kt-menu__link-icon,
.kt-menu__item:hover > .kt-menu__link .kt-menu__link-icon {
  color: #fff !important;
}

/* active / current state — solid brand green pill, bold white text, matches
   the new Sidebar's `activeStyle` */
.kt-menu__item.kt-menu__item--active > .kt-menu__link,
.kt-menu__item.kt-menu__item--here > .kt-menu__link,
.kt-menu__item.kt-menu__item--open > .kt-menu__link {
  background-color: var(--wb-green) !important;
  border-radius: var(--wb-radius-md) !important;
}
.kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text,
.kt-menu__item.kt-menu__item--here > .kt-menu__link .kt-menu__link-text,
.kt-menu__item.kt-menu__item--open > .kt-menu__link .kt-menu__link-text {
  color: #fff !important;
  font-weight: 700;
}
.kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-icon,
.kt-menu__item.kt-menu__item--here > .kt-menu__link .kt-menu__link-icon,
.kt-menu__item.kt-menu__item--open > .kt-menu__link .kt-menu__link-icon {
  color: #fff !important;
}

/* nested submenus */
.kt-menu__submenu .kt-menu__subnav {
  padding-left: 0.5rem;
}
.kt-menu__submenu .kt-menu__link-text {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 400;
}
.kt-menu__submenu .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text {
  color: #fff !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Topbar (kt-header)                                                     */
/* ---------------------------------------------------------------------- */

.kt-header {
  background-color: var(--wb-surface) !important;
  box-shadow: var(--wb-shadow-sm);
  border-bottom: 1px solid var(--wb-border);
}

.kt-header-mobile {
  background-color: var(--wb-green-dark) !important;
}

/* hamburger (aside toggler) — its bars default to a dark grey (#4e4c5f)
   which is nearly invisible against the dark green header above; make it
   white so it reads clearly, same as the rest of the header's icons */
.kt-header-mobile__toolbar-toggler span,
.kt-header-mobile__toolbar-toggler span::before,
.kt-header-mobile__toolbar-toggler span::after {
  background: #fff !important;
}
.kt-header-mobile__toolbar-toggler:hover span,
.kt-header-mobile__toolbar-toggler:hover span::before,
.kt-header-mobile__toolbar-toggler:hover span::after,
.kt-header-mobile__toolbar-toggler.kt-header-mobile__toolbar-toggler--active span,
.kt-header-mobile__toolbar-toggler.kt-header-mobile__toolbar-toggler--active span::before,
.kt-header-mobile__toolbar-toggler.kt-header-mobile__toolbar-toggler--active span::after {
  background: var(--wb-green) !important;
}

.kt-header__topbar-icon,
.not-icon-container {
  border-radius: var(--wb-radius-pill) !important;
  color: var(--wb-text) !important;
  transition: background-color 0.15s ease;
}
.kt-header__topbar-icon:hover,
.not-icon-container:hover {
  background-color: var(--wb-green-lighter) !important;
  color: var(--wb-green-dark) !important;
}

.kt-header__topbar-item.dropdown .kt-header__topbar-wrapper {
  border-radius: var(--wb-radius-pill);
}

.kt-quick-search__input {
  border-radius: var(--wb-radius-pill) !important;
}

.kt-header__topbar-username {
  color: var(--wb-text) !important;
  font-weight: 500;
}

/* language switcher — plain native <select>, no Bootstrap classes in the
   markup, so it needs its own rule instead of piggybacking on .form-control */
.kt-lang-select {
  border: 1px solid var(--wb-border);
  background-color: var(--wb-bg);
  border-radius: var(--wb-radius-pill);
  color: var(--wb-text);
  font-family: var(--wb-font);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4rem 1.6rem 0.4rem 0.9rem;
  height: auto;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354565B' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kt-lang-select:hover {
  border-color: var(--wb-green);
}
.kt-lang-select:focus {
  outline: none;
  border-color: var(--wb-green);
  background-color: #fff;
  box-shadow: 0 0 0 3px var(--wb-green-lighter);
}

/* notification unread mark */
.not-icon-container mark {
  background-color: var(--wb-danger) !important;
  color: #fff !important;
  border-radius: var(--wb-radius-pill) !important;
  padding: 0 5px !important;
}