/* ==========================================================================
   STEELCRAFT — Premium Modern Sidebar for Pipe ERP
   Aesthetic: Refined industrial minimalism
   Think: Linear.app / Notion sidebar meets clean manufacturing dashboard
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Manrope:wght@500;600;700;800&display=swap');

/* ── Design Tokens ── */
:root {
  --sc-sidebar-bg: #fafbfc;
  --sc-sidebar-border: #e8ecf1;
  --sc-header-bg: #fafbfc;
  --sc-text-primary: #1a1d26;
  --sc-text-secondary: #5c6370;
  --sc-text-muted: #9098a3;
  --sc-text-label: #8b919e;
  --sc-accent: #2563eb;
  --sc-accent-soft: rgba(37, 99, 235, 0.07);
  --sc-accent-softer: rgba(37, 99, 235, 0.04);
  --sc-hover-bg: rgba(0, 0, 0, 0.03);
  --sc-active-indicator: #2563eb;
  --sc-icon-color: #7c8493;
  --sc-icon-active: #2563eb;
  --sc-font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
  --sc-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --sc-radius-sm: 6px;
  --sc-radius-md: 8px;
  --sc-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --sc-submenu-line: #e2e6eb;
  --sc-submenu-dot: #c5cbd4;
  --sc-submenu-dot-active: #2563eb;
  --sc-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
}

/* ── Dark theme adaptation ── */
[data-bs-theme="dark"] {
  --sc-sidebar-bg: #111318;
  --sc-sidebar-border: rgba(255,255,255,0.08);
  --sc-header-bg: #111318;
  --sc-text-primary: #e4e7eb;
  --sc-text-secondary: #9ba1ad;
  --sc-text-muted: #6b7280;
  --sc-text-label: #505868;
  --sc-accent: #60a5fa;
  --sc-accent-soft: rgba(96, 165, 250, 0.1);
  --sc-accent-softer: rgba(96, 165, 250, 0.05);
  --sc-hover-bg: rgba(255, 255, 255, 0.04);
  --sc-active-indicator: #60a5fa;
  --sc-icon-color: #6b7280;
  --sc-icon-active: #60a5fa;
  --sc-submenu-line: rgba(255,255,255,0.06);
  --sc-submenu-dot: rgba(255,255,255,0.15);
  --sc-submenu-dot-active: #60a5fa;
  --sc-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Blue theme adaptation ── */
[data-bs-theme="blue-theme"] {
  --sc-sidebar-bg: #0c1029;
  --sc-sidebar-border: rgba(255,255,255,0.07);
  --sc-header-bg: #0c1029;
  --sc-text-primary: #e0e4ea;
  --sc-text-secondary: #8892a4;
  --sc-text-muted: #5a6478;
  --sc-text-label: #3d4663;
  --sc-accent: #38bdf8;
  --sc-accent-soft: rgba(56, 189, 248, 0.1);
  --sc-accent-softer: rgba(56, 189, 248, 0.04);
  --sc-hover-bg: rgba(255, 255, 255, 0.04);
  --sc-active-indicator: #38bdf8;
  --sc-icon-color: #5a6478;
  --sc-icon-active: #38bdf8;
  --sc-submenu-line: rgba(255,255,255,0.05);
  --sc-submenu-dot: rgba(255,255,255,0.12);
  --sc-submenu-dot-active: #38bdf8;
  --sc-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ── Semi-dark adaptation ── */
[data-bs-theme="semi-dark"] {
  --sc-sidebar-bg: #1a1d2b;
  --sc-sidebar-border: rgba(255,255,255,0.06);
  --sc-header-bg: #1a1d2b;
  --sc-text-primary: #dde0e6;
  --sc-text-secondary: #8b919e;
  --sc-text-muted: #5f6575;
  --sc-text-label: #464d5e;
  --sc-accent: #818cf8;
  --sc-accent-soft: rgba(129, 140, 248, 0.1);
  --sc-accent-softer: rgba(129, 140, 248, 0.04);
  --sc-hover-bg: rgba(255, 255, 255, 0.04);
  --sc-active-indicator: #818cf8;
  --sc-icon-color: #5f6575;
  --sc-icon-active: #818cf8;
  --sc-submenu-line: rgba(255,255,255,0.05);
  --sc-submenu-dot: rgba(255,255,255,0.12);
  --sc-submenu-dot-active: #818cf8;
  --sc-shadow: 0 1px 3px rgba(0,0,0,0.3);
}


/* ======================================================================
   SIDEBAR WRAPPER
   ====================================================================== */

.sidebar-wrapper {
  background-color: var(--sc-sidebar-bg) !important;
  border-right: 1px solid var(--sc-sidebar-border) !important;
  box-shadow: var(--sc-shadow) !important;
  transition: all var(--sc-transition) !important;
}


/* ======================================================================
   HEADER / BRAND
   ====================================================================== */

.sidebar-wrapper .sidebar-header {
  height: 70px !important;
  background-color: var(--sc-header-bg) !important;
  border-right: 1px solid var(--sc-sidebar-border) !important;
  border-bottom: 1px solid var(--sc-sidebar-border) !important;
  padding: 0 16px !important;
  gap: 10px !important;
}

/* Logo container — subtle brand badge */
.sidebar-wrapper .sidebar-header .logo-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sc-radius-md);
  background: var(--sc-accent-soft);
  border: 1px solid rgba(37, 99, 235, 0.12);
  transition: all var(--sc-transition);
  flex-shrink: 0;
}

.sidebar-wrapper .sidebar-header .logo-img {
  width: 22px !important;
  height: auto;
}

/* Brand title */
.sidebar-wrapper .sidebar-header .logo-name h5 {
  font-family: var(--sc-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  color: var(--sc-text-primary) !important;
  line-height: 1.2 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}

/* Close button */
.sidebar-wrapper .sidebar-header .sidebar-close {
  color: var(--sc-text-muted) !important;
  background: transparent !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--sc-radius-sm) !important;
  transition: all var(--sc-transition) !important;
}

.sidebar-wrapper .sidebar-header .sidebar-close:hover,
.sidebar-wrapper .sidebar-header .sidebar-close:focus {
  background: var(--sc-hover-bg) !important;
  color: var(--sc-text-primary) !important;
}


/* ======================================================================
   SIDEBAR NAV
   ====================================================================== */

.sidebar-wrapper .sidebar-nav {
  background-color: var(--sc-sidebar-bg) !important;
  margin-top: 70px !important;
}

.sidebar-wrapper .sidebar-nav ul {
  padding: 6px 8px !important;
}

.sidebar-wrapper .sidebar-nav .metismenu {
  gap: 1px !important;
}

.sidebar-wrapper .sidebar-nav .metismenu li + li {
  margin-top: 1px !important;
}

.sidebar-wrapper .sidebar-nav .metismenu li:first-child {
  margin-top: 0 !important;
}

.sidebar-wrapper .sidebar-nav .metismenu li:last-child {
  margin-bottom: 0 !important;
}


/* ======================================================================
   SECTION LABELS  (CATALOG, STOCK, SUPPLIER etc.)
   ====================================================================== */

.sidebar-wrapper .menu-label {
  font-family: var(--sc-font-heading) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: var(--sc-text-label) !important;
  padding: 18px 12px 5px 12px !important;
  line-height: 1 !important;
}


/* ======================================================================
   MENU LINKS — Parent level
   ====================================================================== */

.sidebar-wrapper .sidebar-nav .metismenu a {
  font-family: var(--sc-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--sc-text-secondary) !important;
  padding: 7px 10px !important;
  border-radius: var(--sc-radius-sm) !important;
  transition: all var(--sc-transition) !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  overflow: visible !important;
  border: 1px solid transparent !important;
}

/* Icon styling */
.sidebar-wrapper .sidebar-nav .metismenu a .parent-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.sidebar-wrapper .sidebar-nav .metismenu a .parent-icon i {
  font-size: 19px !important;
  color: var(--sc-icon-color) !important;
  transition: color var(--sc-transition) !important;
}

/* Menu title */
.sidebar-wrapper .sidebar-nav .metismenu a .menu-title {
  margin-left: 10px !important;
}


/* ── Hover ── */
.sidebar-wrapper .sidebar-nav .metismenu a:hover {
  color: var(--sc-text-primary) !important;
  background-color: var(--sc-hover-bg) !important;
  text-decoration: none !important;
}

.sidebar-wrapper .sidebar-nav .metismenu a:hover .parent-icon i {
  color: var(--sc-text-primary) !important;
}


/* ── Active / Focus ── */
.sidebar-wrapper .sidebar-nav .metismenu .mm-active > a,
.sidebar-wrapper .sidebar-nav .metismenu a:active,
.sidebar-wrapper .sidebar-nav .metismenu a:focus {
  color: var(--sc-accent) !important;
  background-color: var(--sc-accent-soft) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.sidebar-wrapper .sidebar-nav .metismenu .mm-active > a .parent-icon i {
  color: var(--sc-icon-active) !important;
}

/* Active indicator bar — left edge */
.sidebar-wrapper .sidebar-nav .metismenu .mm-active > a::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 20% !important;
  height: 60% !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: var(--sc-active-indicator) !important;
  transition: all var(--sc-transition) !important;
}


/* ======================================================================
   DROPDOWN ARROWS  (has-arrow chevron)
   ====================================================================== */

.sidebar-wrapper .sidebar-nav .metismenu .has-arrow::after {
  border-color: var(--sc-text-muted) !important;
  border-width: 1.5px 0 0 1.5px !important;
  width: 6px !important;
  height: 6px !important;
  right: 14px !important;
  transition: all var(--sc-transition) !important;
}

.sidebar-wrapper .sidebar-nav .metismenu .mm-active > .has-arrow::after {
  border-color: var(--sc-accent) !important;
}


/* ======================================================================
   SUBMENUS
   ====================================================================== */

.sidebar-wrapper .sidebar-nav .metismenu ul {
  background-color: transparent !important;
  padding: 2px 0 2px 0 !important;
  margin: 0 !important;
}

.sidebar-wrapper .sidebar-nav .metismenu ul a {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 10px 6px 42px !important;
  color: var(--sc-text-muted) !important;
  border: none !important;
  position: relative !important;
}

/* Hide old arrow_right icon text */
.sidebar-wrapper .sidebar-nav .metismenu ul a i,
.sidebar-wrapper .sidebar-nav .metismenu ul a i.material-icons-outlined {
  display: none !important;
}

/* Dot indicator replacing the old icon */
.sidebar-wrapper .sidebar-nav .metismenu ul a::before {
  content: '' !important;
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--sc-submenu-dot) !important;
  transition: all var(--sc-transition) !important;
}

/* Vertical connector line */
.sidebar-wrapper .sidebar-nav .metismenu ul li {
  position: relative !important;
}

.sidebar-wrapper .sidebar-nav .metismenu ul::before {
  content: '' !important;
  position: absolute !important;
  left: 33px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  background: var(--sc-submenu-line) !important;
}

/* Submenu hover */
.sidebar-wrapper .sidebar-nav .metismenu ul a:hover {
  color: var(--sc-text-primary) !important;
  background-color: var(--sc-hover-bg) !important;
}

.sidebar-wrapper .sidebar-nav .metismenu ul a:hover::before {
  background: var(--sc-text-primary) !important;
  transform: translateY(-50%) scale(1.3) !important;
}

/* Submenu active */
.sidebar-wrapper .sidebar-nav .metismenu ul .mm-active > a {
  color: var(--sc-accent) !important;
  background-color: var(--sc-accent-softer) !important;
  font-weight: 600 !important;
}

.sidebar-wrapper .sidebar-nav .metismenu ul .mm-active > a::before {
  background: var(--sc-submenu-dot-active) !important;
  box-shadow: 0 0 0 2px var(--sc-accent-soft) !important;
  transform: translateY(-50%) scale(1.3) !important;
}


/* ======================================================================
   SCROLLBAR
   ====================================================================== */

.sidebar-wrapper .simplebar-scrollbar::before {
  background: var(--sc-text-muted) !important;
  opacity: 0.3 !important;
  border-radius: 4px !important;
  width: 4px !important;
}


/* ======================================================================
   COLLAPSED SIDEBAR  (toggled state on desktop)
   ====================================================================== */

@media screen and (min-width: 1199px) {
  body.toggled .sidebar-wrapper:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
  }

  body.toggled:not(.sidebar-hovered) .sidebar-wrapper {
    background-color: var(--sc-sidebar-bg) !important;
  }

  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
    background-color: var(--sc-header-bg) !important;
    border-right: 1px solid var(--sc-sidebar-border) !important;
  }

  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-nav {
    background-color: var(--sc-sidebar-bg) !important;
  }

  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-nav .metismenu a {
    padding: 8px 0 !important;
    justify-content: center !important;
    border-radius: var(--sc-radius-sm) !important;
  }

  body.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-nav .metismenu .mm-active > a::before {
    top: 25% !important;
    height: 50% !important;
  }
}


/* ======================================================================
   RESPONSIVE (mobile) — keep sidebar dark glass on all themes
   ====================================================================== */

@media only screen and (max-width: 1199px) {
  .sidebar-wrapper .sidebar-header {
    background-color: var(--sc-header-bg) !important;
    border-right: 1px solid var(--sc-sidebar-border) !important;
  }
}

/* ======================================================================
   TOP HEADER & NAVBAR OVERRIDES
   ====================================================================== */

.top-header .navbar {
  background-color: var(--sc-sidebar-bg) !important;
  border-bottom: 1px solid var(--sc-sidebar-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all var(--sc-transition) !important;
}

/* Ensure left position adjusts when toggled */
@media screen and (min-width: 1199px) {
  body.toggled .top-header .navbar {
    left: 70px !important;
  }
}

/* ======================================================================
   TOGGLE MENU BUTTON
   ====================================================================== */

.top-header .btn-toggle a {
  color: var(--sc-text-secondary) !important;
  background-color: transparent !important;
  border: 1px solid var(--sc-sidebar-border) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--sc-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--sc-transition) !important;
}

.top-header .btn-toggle a i {
  font-size: 20px !important;
}

.top-header .btn-toggle a:hover,
.top-header .btn-toggle a:focus {
  color: var(--sc-text-primary) !important;
  background-color: var(--sc-hover-bg) !important;
  border-color: var(--sc-text-muted) !important;
}

/* ======================================================================
   SEARCH BAR
   ====================================================================== */

/* Constrain search bar width */
.top-header .navbar .search-bar {
  max-width: 320px !important;
  transition: max-width var(--sc-transition) !important;
}

.top-header .navbar .search-bar:focus-within {
  max-width: 400px !important;
}

.top-header .navbar .search-bar .position-relative {
  width: 100% !important;
}

/* Style the search input */
.top-header .navbar .search-bar .search-control {
  font-family: var(--sc-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--sc-text-primary) !important;
  background-color: var(--sc-hover-bg) !important;
  border: 1px solid var(--sc-sidebar-border) !important;
  border-radius: var(--sc-radius-md) !important;
  height: 38px !important;
  padding-left: 38px !important;
  padding-right: 48px !important;
  transition: all var(--sc-transition) !important;
}

.top-header .navbar .search-bar .search-control::placeholder {
  color: var(--sc-text-muted) !important;
  font-weight: 400 !important;
}

/* Icon placement */
.top-header .navbar .search-bar span.material-icons-outlined {
  color: var(--sc-icon-color) !important;
  transition: color var(--sc-transition) !important;
}

.top-header .navbar .search-bar span.material-icons-outlined.start-0 {
  left: 12px !important;
  font-size: 20px !important;
}

/* Shortcut badge */
.top-header .navbar .search-bar .search-shortcut-badge {
  right: 12px !important;
  font-family: var(--sc-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--sc-text-muted) !important;
  background-color: var(--sc-sidebar-bg) !important;
  border: 1px solid var(--sc-sidebar-border) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  height: 20px !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity var(--sc-transition) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,0.02) !important;
}

/* Hide shortcut badge when focused or containing text */
.top-header .navbar .search-bar .search-control:focus ~ .search-shortcut-badge {
  opacity: 0 !important;
}

/* Hide shortcut badge when search close button is visible */
.top-header .navbar .search-bar .search-close.d-block ~ .search-shortcut-badge {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Focus state of input */
.top-header .navbar .search-bar .search-control:focus {
  background-color: var(--sc-sidebar-bg) !important;
  border-color: var(--sc-accent) !important;
  box-shadow: 0 0 0 3px var(--sc-accent-soft) !important;
}

.top-header .navbar .search-bar .search-control:focus ~ span.material-icons-outlined.start-0 {
  color: var(--sc-accent) !important;
}

/* ======================================================================
   SEARCH POPUP
   ====================================================================== */

.top-header .navbar .search-bar .search-popup {
  top: 50px !important;
  border-radius: var(--sc-radius-md) !important;
  border: 1px solid var(--sc-sidebar-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  background-color: var(--sc-sidebar-bg) !important;
  overflow: hidden !important;
  padding: 12px !important;
  width: 480px !important;
}

[data-bs-theme="dark"] .top-header .navbar .search-bar .search-popup,
[data-bs-theme="blue-theme"] .top-header .navbar .search-bar .search-popup,
[data-bs-theme="semi-dark"] .top-header .navbar .search-bar .search-popup {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.top-header .navbar .search-bar .search-popup .card {
  background-color: transparent !important;
  border: none !important;
}

.top-header .navbar .search-bar .search-popup .search-title {
  font-family: var(--sc-font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--sc-text-label) !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}

.top-header .navbar .search-bar .search-popup .kewords-wrapper {
  margin-bottom: 12px !important;
}

.top-header .navbar .search-bar .search-popup .kewords {
  font-family: var(--sc-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--sc-text-secondary) !important;
  background-color: var(--sc-hover-bg) !important;
  border: 1px solid var(--sc-sidebar-border) !important;
  border-radius: var(--sc-radius-sm) !important;
  padding: 4px 10px !important;
  transition: all var(--sc-transition) !important;
}

.top-header .navbar .search-bar .search-popup .kewords:hover {
  color: var(--sc-text-primary) !important;
  background-color: var(--sc-accent-soft) !important;
  border-color: var(--sc-accent) !important;
}

.top-header .navbar .search-bar .search-popup hr {
  border-top: 1px solid var(--sc-sidebar-border) !important;
  margin: 12px 0 !important;
  opacity: 1 !important;
}

.top-header .navbar .search-bar .search-popup .search-list-item {
  padding: 8px 10px !important;
  border-radius: var(--sc-radius-sm) !important;
  transition: all var(--sc-transition) !important;
  color: var(--sc-text-secondary) !important;
}

.top-header .navbar .search-bar .search-popup .search-list-item:hover {
  color: var(--sc-text-primary) !important;
  background-color: var(--sc-hover-bg) !important;
}

.top-header .navbar .search-bar .search-popup .search-list-item .list-icon {
  width: 28px !important;
  height: 28px !important;
  background-color: var(--sc-hover-bg) !important;
  border-radius: var(--sc-radius-sm) !important;
  color: var(--sc-icon-color) !important;
}

.top-header .navbar .search-bar .search-popup .search-list-item:hover .list-icon {
  color: var(--sc-accent) !important;
  background-color: var(--sc-accent-soft) !important;
}

.top-header .navbar .search-bar .search-popup .search-list-item .search-list-title {
  font-family: var(--sc-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.top-header .navbar .search-bar .search-popup .memmber-img img {
  border: 1px solid var(--sc-sidebar-border) !important;
}

/* ======================================================================
   RIGHT LINKS & AVATAR DROPDOWN
   ====================================================================== */

.top-header .nav-right-links .nav-link {
  color: var(--sc-text-secondary) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--sc-radius-md) !important;
  border: 1px solid transparent !important;
  transition: all var(--sc-transition) !important;
}

.top-header .nav-right-links .nav-link:hover,
.top-header .nav-right-links .nav-link:focus {
  color: var(--sc-text-primary) !important;
  background-color: var(--sc-hover-bg) !important;
  border-color: var(--sc-sidebar-border) !important;
}

/* Avatar styling */
.top-header .dropdown-toggle img {
  border: 2px solid var(--sc-sidebar-border) !important;
  padding: 0 !important; /* remove spacing inside border */
  width: 38px !important;
  height: 38px !important;
  transition: all var(--sc-transition) !important;
}

.top-header .dropdown:hover .dropdown-toggle img,
.top-header .dropdown-toggle[aria-expanded="true"] img {
  border-color: var(--sc-accent) !important;
  box-shadow: 0 0 0 3px var(--sc-accent-soft) !important;
}

/* Modern dropdown card */
.top-header .navbar .dropdown-menu {
  background-color: var(--sc-sidebar-bg) !important;
  border: 1px solid var(--sc-sidebar-border) !important;
  border-radius: var(--sc-radius-md) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  padding: 8px !important;
  animation: 200ms cubic-bezier(0.16, 1, 0.3, 1) 0s normal forwards 1 animdropdown !important;
}

[data-bs-theme="dark"] .top-header .navbar .dropdown-menu,
[data-bs-theme="blue-theme"] .top-header .navbar .dropdown-menu,
[data-bs-theme="semi-dark"] .top-header .navbar .dropdown-menu {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Customize animation */
@keyframes animdropdown {
  from {
    transform: translateY(6px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Remove arrow pointer tip */
.top-header .navbar .dropdown-menu::after {
  display: none !important;
}

.top-header .navbar .dropdown-user {
  width: 240px !important;
}

.top-header .navbar .dropdown-user .user-name {
  font-family: var(--sc-font-heading) !important;
  color: var(--sc-text-primary) !important;
  font-size: 14px !important;
}

.top-header .navbar .dropdown-user hr.dropdown-divider {
  border-top: 1px solid var(--sc-sidebar-border) !important;
  margin: 8px -8px !important; /* extend divider to edges of padded dropdown */
  opacity: 1 !important;
}

.top-header .navbar .dropdown-user .dropdown-item {
  font-family: var(--sc-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sc-text-secondary) !important;
  border-radius: var(--sc-radius-sm) !important;
  padding: 8px 12px !important;
  transition: all var(--sc-transition) !important;
  display: flex !important;
  align-items: center !important;
}

.top-header .navbar .dropdown-user .dropdown-item i {
  font-size: 18px !important;
  color: var(--sc-icon-color) !important;
  transition: color var(--sc-transition) !important;
}

.top-header .navbar .dropdown-user .dropdown-item:hover {
  color: var(--sc-text-primary) !important;
  background-color: var(--sc-hover-bg) !important;
}

.top-header .navbar .dropdown-user .dropdown-item:hover i {
  color: var(--sc-text-primary) !important;
}

/* Logout item styling */
.top-header .navbar .dropdown-user .dropdown-item[href*="logout"]:hover {
  color: #dc2626 !important;
  background-color: rgba(220, 38, 38, 0.06) !important;
}

.top-header .navbar .dropdown-user .dropdown-item[href*="logout"]:hover i {
  color: #dc2626 !important;
}