/* eihoshop Admin Sidebar — Dark v6 (soft text, real logo) */
:root {
  --side-bg: #131628;
  --side-bg-2: #1c2038;
  --side-border: #2a2f4a;
  --side-accent: #ff8a3c;
  --side-text: #c7cce0;
  --side-text-strong: #e6e9f5;
}

.navbar-vertical.navbar,
.navbar-vertical .nav-scroller,
.navbar-vertical.bg-white,
.navbar-vertical .bg-white {
  background: var(--side-bg) !important;
  border-right: 1px solid var(--side-border) !important;
}
.navbar-vertical hr.horizontal.dark { display: none !important; }

/* Logo — keep original image, just contain & light bg pad for transparent PNGs */
.navbar-vertical .sidenav-header {
  padding: 1.1rem 1rem !important;
  border-bottom: 1px solid var(--side-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.navbar-vertical .navbar-brand {
  display: inline-block !important;
  background: rgba(255,255,255,0.06) !important;
  padding: 0.4rem 0.7rem !important;
  border-radius: 8px !important;
}
.navbar-vertical .navbar-brand-img {
  max-height: 44px !important;
  width: auto !important;
  filter: none !important;
  opacity: 1 !important;
  display: block !important;
}

/* Search */
.navbar-vertical input.menuSearch,
.navbar-vertical input.form-control.menuSearch {
  background: var(--side-bg-2) !important;
  border: 1px solid var(--side-border) !important;
  color: var(--side-text-strong) !important;
  border-radius: 10px !important;
  padding: 0.7rem 1rem !important;
  font-size: 0.9rem !important;
  margin: 0.85rem 0 !important;
  height: auto !important;
}
.navbar-vertical .menuSearch::placeholder { color: rgba(199, 204, 224, 0.55) !important; }
.navbar-vertical .menuSearch:focus {
  border-color: var(--side-accent) !important;
  box-shadow: 0 0 0 2px rgba(255, 138, 60, 0.18) !important;
  color: var(--side-text-strong) !important;
}

/* Section accordion headers */
.navbar-vertical .sidebar-title {
  color: var(--side-text-strong) !important;
  font-size: 0.95rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 600 !important;
  padding: 0.85rem 1.1rem !important;
  margin: 0.15rem 0.6rem !important;
  cursor: pointer !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border-radius: 10px !important;
  border-top: none !important;
  transition: background 0.18s ease !important;
  list-style: none !important;
}
.navbar-vertical .sidebar-title:hover { background: rgba(255, 138, 60, 0.10) !important; }
.navbar-vertical .sidebar-title:not(.section-collapsed) {
  background: rgba(255,255,255,0.04) !important;
}
.navbar-vertical .sidebar-title i {
  color: var(--side-text-strong) !important;
  margin-right: 0.8rem !important;
  font-size: 1.15rem !important;
  width: 22px !important;
  text-align: center !important;
  opacity: 0.9;
}
.navbar-vertical .sidebar-title::after {
  content: "\f078" !important;
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
  font-weight: 900 !important;
  margin-left: auto !important;
  font-size: 0.75rem !important;
  color: var(--side-text) !important;
  opacity: 0.75;
  transition: transform 0.25s ease !important;
}
.navbar-vertical .sidebar-title.section-collapsed::after {
  transform: rotate(-90deg) !important;
}
.navbar-vertical .section-item-hidden { display: none !important; }

/* Nav links */
.navbar-vertical .nav-link {
  color: var(--side-text) !important;
  padding: 0.7rem 1.1rem !important;
  margin: 0.18rem 0.6rem !important;
  border-radius: 10px !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  transition: all 0.18s ease !important;
  display: flex !important;
  align-items: center !important;
  letter-spacing: normal !important;
}
.navbar-vertical .nav-link i,
.navbar-vertical .nav-link .icon {
  color: var(--side-text) !important;
  margin-right: 0.75rem !important;
  font-size: 1.05rem !important;
  width: 20px !important;
  text-align: center !important;
  opacity: 0.85;
}
.navbar-vertical .nav-link-text,
.navbar-vertical .nav-link span { color: var(--side-text) !important; font-size: inherit !important; }

/* Hover */
.navbar-vertical .nav-link:hover {
  background: rgba(255, 138, 60, 0.14) !important;
  color: var(--side-text-strong) !important;
}
.navbar-vertical .nav-link:hover i { color: var(--side-accent) !important; opacity: 1; }
.navbar-vertical .nav-link:hover span,
.navbar-vertical .nav-link:hover .nav-link-text { color: var(--side-text-strong) !important; }

/* Active — keep WHITE on orange gradient for max contrast */
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-item.active > .nav-link {
  background: linear-gradient(135deg, #ff8a3c 0%, #ff6b35 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35) !important;
}
.navbar-vertical .nav-link.active i,
.navbar-vertical .nav-link.active span,
.navbar-vertical .nav-link.active .nav-link-text,
.navbar-vertical .nav-item.active > .nav-link i { color: #ffffff !important; opacity: 1; }

/* Sub-items inside .collapse */
.navbar-vertical .collapse .nav-link,
.navbar-vertical .collapsing .nav-link,
.navbar-vertical .collapse .nav-item .nav-link,
.navbar-vertical .nav-item .collapse .nav-link {
  padding-left: 3rem !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  font-size: 0.875rem !important;
  color: var(--side-text) !important;
  position: relative !important;
  opacity: 0.95;
}
.navbar-vertical .collapse .nav-link span,
.navbar-vertical .collapse .nav-link .nav-link-text { color: var(--side-text) !important; font-size: 0.875rem !important; }
.navbar-vertical .collapse .nav-link::before {
  content: "" !important;
  position: absolute !important;
  left: 2rem !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(199, 204, 224, 0.55) !important;
  transform: translateY(-50%) !important;
}
.navbar-vertical .collapse .nav-link:hover {
  opacity: 1;
  background: rgba(255, 138, 60, 0.12) !important;
  color: var(--side-text-strong) !important;
}
.navbar-vertical .collapse .nav-link:hover span,
.navbar-vertical .collapse .nav-link:hover .nav-link-text { color: var(--side-text-strong) !important; }
.navbar-vertical .collapse .nav-link:hover::before,
.navbar-vertical .collapse .nav-link.active::before { background: var(--side-accent) !important; }

/* Caret on collapse parent */
.navbar-vertical .nav-link[data-bs-toggle="collapse"]::after {
  content: "\f078" !important;
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
  font-weight: 900 !important;
  margin-left: auto !important;
  font-size: 0.7rem !important;
  color: var(--side-text) !important;
  opacity: 0.7;
  transition: transform 0.25s !important;
}
.navbar-vertical .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
  transform: rotate(180deg) !important;
  color: var(--side-accent) !important;
  opacity: 1;
}

/* Generic catch-all so nothing turns black */
.navbar-vertical a, .navbar-vertical li, .navbar-vertical span:not(.badge) { color: var(--side-text); }

/* Scrollbar */
.navbar-vertical::-webkit-scrollbar,
.navbar-vertical .nav-scroller::-webkit-scrollbar { width: 6px !important; }
.navbar-vertical::-webkit-scrollbar-track,
.navbar-vertical .nav-scroller::-webkit-scrollbar-track { background: var(--side-bg) !important; }
.navbar-vertical::-webkit-scrollbar-thumb,
.navbar-vertical .nav-scroller::-webkit-scrollbar-thumb {
  background: #3a4170 !important;
  border-radius: 3px !important;
}

/* Badges */
.navbar-vertical .badge {
  background: var(--side-accent) !important;
  color: #fff !important;
  font-size: 0.7rem !important;
  margin-left: 0.4rem !important;
}

/* Logout */
.navbar-vertical .nav-link[href*="logout"] { color: #ff8a8a !important; }


/* Fix bullets, white bg, arrows, hover, active */
.navbar-vertical .navbar-nav .nav .nav-item :hover { background-color: transparent !important; }
.navbar-nav .nav .nav-item .nav-link .nav-link-text::before { display: none !important; content: none !important; }
.navbar-vertical .nav-link[data-bs-toggle="collapse"] i.fas.fa-angle-down { display: none !important; }
.navbar-vertical .collapse .nav, .navbar-vertical .collapsing .nav { position: static !important; padding-left: 1rem !important; margin-left: 0 !important; width: 100% !important; background: transparent !important; }
.navbar-vertical .collapse .nav-item .nav-link { margin: 0.18rem 0.6rem !important; padding-left: 2rem !important; background: transparent !important; }
.navbar-vertical .collapse .nav-item .nav-link:hover { background: rgba(255,138,60,0.14) !important; color: #e6e9f5 !important; border-radius: 10px !important; }
.navbar-vertical .collapse .nav-item .nav-link.active { background: linear-gradient(135deg,#ff8a3c,#ff6b35) !important; color: #fff !important; border-radius: 10px !important; border-right: none !important; }

/* Kill custom.css white hover on ALL submenu items */
.navbar-vertical .navbar-nav .nav .nav-item:hover,
.navbar-vertical .navbar-nav .nav .nav-item *:hover,
.navbar-vertical .navbar-nav .nav .nav-item a:hover,
.navbar-vertical .navbar-nav .nav .nav-item span:hover,
.navbar-vertical .navbar-nav .nav .nav-item > *:hover {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Final uniform fix */
.navbar-vertical .collapse .nav-item .nav-link,
.navbar-vertical .collapse .nav-item .nav-link:hover,
.navbar-vertical .collapse .nav-item.active .nav-link {
    position: static !important;
    transform: none !important;
    left: 0 !important;
    margin: 0.18rem 0.6rem !important;
    padding-left: 3rem !important;
    border-radius: 10px !important;
}
.navbar-vertical .collapse .nav-item .nav-link:hover {
    background: rgba(255,138,60,0.14) !important;
    color: #e6e9f5 !important;
}
.navbar-vertical .collapse .nav-item.active .nav-link,
.navbar-vertical .collapse .nav-item .nav-link.active {
    background: linear-gradient(135deg,#ff8a3c,#ff6b35) !important;
    color: #fff !important;
    border-right: none !important;
}
