/* LOGO CONTROL */
.logo-long img,
.logo-short img {
  max-width: 180px;
  transition: 0.3s ease;
}
.logo-short {
  display: none;
}
/* Small mode → short logo visible */
.sidebar.small .logo-long {
  display: none;
}
.sidebar.small .logo-short {
  display: block;
}
.sidebar.small .logo-short img {
  max-width: 45px;
}
/* Toggle icon logic */
.sidebar-toggle img {
  width: 22px;
  transition: 0.3s ease;
}
.icon-close {
  display: none;
}

/* When small mode → show CLOSE icon */
.sidebar.small .icon-bar {
  display: none;
}
.sidebar.small .icon-close {
  display: block;
}

/* Hover expand effect remains same */
.sidebar.hover-expand .sidebar-nav span {
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
}

/* Short logo should also expand on hover */
.sidebar.hover-expand .logo-short {
  display: none !important;
}
.sidebar.hover-expand .logo-long {
  display: block !important;
}

/* ----------------------------------------
   SIDEBAR BASE
---------------------------------------- */
.sidebar {
  width: var(--sidebar-full);
  height: 100vh;

  background:
    linear-gradient(0deg, rgba(var(--white), 0.02), rgba(var(--white), 0.02)),
    linear-gradient(
      306.11deg,
      rgba(var(--white), 0) 42.55%,
      rgba(var(--white), 0.28) 107.3%
    );

  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.35s ease;
  position: relative;
}

/* SIDEBAR SMALL MODE */
.sidebar.small {
  width: var(--sidebar-small);
}

/* ----------------------------------------
   MAIN SECTION
---------------------------------------- */
.main-section {
  width: calc(100% - var(--sidebar-full));
  transition: width 0.35s ease;
}

.main-section.expanded {
  width: calc(100% - var(--sidebar-small));
}

/* Hover expand behavior */
.sidebar.hover-expand {
  width: var(--sidebar-full) !important;
}
.main-section.hover-expand {
  width: calc(100% - var(--sidebar-full)) !important;
}

/* ----------------------------------------
   LOGO & TOGGLE BUTTON
---------------------------------------- */
.logo {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  max-width: 180px;
  transition: 0.3s ease;
}

/* Small mode logo smaller but NOT hidden */
.sidebar.small .logo img {
  max-width: 35px;
  opacity: 1;
  width: auto;
  height: 30px;
}
.sidebar.hover-expand .logo img {
  max-width: 180px;
}

/* Bar button styling */
.sidebar-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
}

/* ----------------------------------------
   NAVIGATION
---------------------------------------- */
.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-nav {
  padding: 0 12px;
  padding-right: 14px;
}
.small .sidebar-nav {
  padding: 0 12px;
}
.sidebar-nav ul li {
  margin-bottom: 6px;
  border-radius: 6px;
  overflow: hidden;
}
.sidebar-nav li.active .nav-item-svg path {
  fill: rgba(var(--white), 1);
}
.nav-item-svg path {
  fill: rgba(var(--white), 0.9);
  transition: 0.5s;
}
.nav-item-svg-stroke path {
  stroke: rgba(var(--white), 0.9);
  transition: 0.5s;
}

/* MENU LINK */
.sidebar-nav a.menu-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 10px;
  color: rgba(var(--white), 0.95);
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.2s ease;
}
.menu-link:hover {
  background-color: rgba(var(--brand), 0.2);
}
/* .menu-link:hover .nav-item-svg path {
  stroke: rgba(var(--brand), 0.8);
} */
.sidebar-nav ul li:last-child a.menu-link {
  border: none;
}

/* Active parent item */
.sidebar-nav ul li.active > a.menu-link {
  background: linear-gradient(
    107.71deg,
    rgba(var(--brand), 0.2) 25.11%,
    rgba(var(--brand-secondary), 0.05) 74.18%
  );
  border-left: 3px solid rgba(var(--brand), 1);
}
.sidebar-nav ul li.active .menu-link span {
  color: rgba(var(--white), 1);
  font-weight: 600;
}
.sidebar-nav ul li.active .sidebar-submenu li.submenu-active {
  background: rgba(var(--brand), 0.1);
}
.sidebar-nav ul li.active .menu-link span {
  color: rgba(var(--white), 1);
}
.menu-link span {
  font-size: var(--font-base);
  padding-top: 1px;
  color: rgba(var(--white), 0.9);
}

/* HIDE TEXT IN SMALL MODE */
.sidebar.small .sidebar-nav span {
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
  line-height: 1px;
  white-space: nowrap !important;
  transition:
    opacity 0.6s ease,
    width 0.6s ease;
}

/* ----------------------------------------
   ARROW ICON
---------------------------------------- */
.dropdown-item-icon svg {
  transition: transform 0.35s ease;
  margin-left: -8px;
}

li:not(.has-dropdown) .dropdown-item-icon {
  display: none;
}

/* Rotate arrow when active */
li.active .dropdown-item-icon svg {
  transform: rotate(180deg);
}

/* ----------------------------------------
   SUBMENU
---------------------------------------- */
.sidebar-submenu {
  max-height: 0;
  overflow: hidden;
  background: rgba(var(--white), 0.05);
  transition: max-height 0.35s ease;
}

.sidebar-submenu ul li {
  transition: 0.5s;
  padding: 4px 12px;
  margin-bottom: 0;
  border-radius: 4px;
  position: relative;
  padding-left: 42px;
}
.sidebar-submenu ul li:after {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: rgba(var(--white), 0.5);
  outline: 0.5px solid rgba(var(--white), 0.5);
  outline-offset: 2px;
}
.sidebar-submenu ul li.submenu-active:after {
  background: rgba(var(--brand), 0.5);
  outline: 0.5px solid rgba(var(--brand), 0.5);
  outline-offset: 2px;
}
.sidebar-submenu ul li:hover {
  background: rgba(var(--brand), 0.2);
}
li.active .sidebar-submenu {
  max-height: 500px;
}

/* submenu content */

.sidebar-submenu ul li a {
  display: block;
  color: rgba(var(--white), 0.8);
  padding: 4px 0;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.sidebar-submenu ul li a:hover {
  opacity: 1;
}

/* ----------------------------------------
   SMALL MODE ICONS STYLE
---------------------------------------- */
.sidebar.small .nav-item-icon {
  margin: 0 auto;
}

/* ----------------------------------------
   SMOOTH SCROLLBAR STYLE (OPTIONAL) */
.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
/* ----------------------------------------
   MOBILE RESPONSIVE
---------------------------------------- */
.mobile-close-bar,
.mobile-bar {
  display: none;
}
.header-search-box {
  margin-right: 20px;
  min-width: 320px;
}
.sidebar-scroll {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--brand), 0.2) transparent;
  margin-bottom: 20px;
  height: calc(100vh - 290px);
}
.sidebar-scroll:hover {
  scrollbar-color: rgba(var(--brand), 0.5) transparent;
}
.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--brand), 0.2);
  border-radius: 10px;
  border: 2px solid transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--brand), 0.5);
}
@media all and (max-width: 1150px) {
  .sidebar-toggle {
    display: none;
  }
  .sidebar {
    position: absolute;
    left: -380px;
    transition: 0.6s;
    z-index: 9999 !important;
  }
  .main-section {
    width: 100%;
  }
  .sidebar-open {
    left: 0%;
    backdrop-filter: blur(40px);
  }
  .mobile-close-bar,
  .mobile-bar {
    display: block;
  }
}
.dashboard-header {
  z-index: 9;
}
/* header area */
.full-screen-icon img {
  width: 20px;
}
.profile img {
  max-width: 40px;
  width: 100%;
  border-radius: 50%;
}
.dropdown-menu:after {
  content: "";
  position: absolute;
  right: 10px;
  top: -31px;
  height: 25px;
  width: 25px;
  border-left: 15px solid transparent;
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid var(--dark);
}
.profile .dropdown-menu li a {
  padding: 8px 12px;
  display: block;
  transition: 0.5s;
  background: rgba(var(--black), 0.6);
  margin-bottom: 5px;
  border-radius: 4px;
}
.profile .dropdown-menu li a:hover {
  background: rgba(var(--black), 0.1);
}
.profile .dropdown-menu li a:hover {
  color: rgba(var(--black), 0.4);
}
.profile .dropdown-menu {
  min-width: 250px;
}
.cursor-pointer {
  cursor: pointer !important;
}
.circle-focus {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 4px;
  right: 8px;
  animation: pulseOpacity 1.1s infinite ease-in-out;
}
@keyframes pulseOpacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.dropdown-toggle::after {
  display: none;
}

.sidebar.small .has-dropdown .sidebar-submenu {
  max-height: 0px !important;
}
.sidebar.small.hover-expand .has-dropdown.active .sidebar-submenu {
  max-height: 100px !important;
}
.nav-item-icon {
  width: 25px;
  transform: scale(0.8);
}

/* theme icon css start */
.theme-toggle,
.full-screen-icon,
.bell-icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: transparent;
  transition: background 0.3s ease;
  cursor: pointer;
}
.theme-toggle:hover,
.full-screen-icon:hover,
.bell-icon:hover {
  background: rgba(var(--white), 0.1);
}
.theme-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 22px;
  height: 22px;
}
.theme-toggle .sun-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
.theme-toggle .moon-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.6);
}
.light-mode .theme-toggle .sun-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.6);
}
.light-mode .theme-toggle .moon-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
/* theme icon css end */
/* Start Notification dropdown css */
.notification-dropdown {
  min-width: 340px;
  box-shadow: 0px 4px 94px 0px #d9d9d91a;
  border: 1px solid rgba(var(--white), 0.06);
}
.notification-item-icon img {
  width: 20px;
  height: auto;
}
.unread-notification {
  background-color: rgba(var(--brand), 0.1);
}
.read-notification {
  background-color: rgba(var(--white), 0.05);
}
.read-notification p {
  color: rgba(var(--white), 0.4);
}
.unread-notification p {
  color: rgba(var(--white), 0.8);
}
@media all and (max-width: 480px) {
  .notification-dropdown {
    min-width: 300px;
  }
  .dropdown-menu:after {
    display: none;
  }
}
/* End Notification dropdown css */