/* ============================================
   Left Sidebar Navigation
   ============================================
   Fixed left sidebar with menu items, icons,
   create dropdown, and page-content offset.
   ============================================ */

.sidebar {
  width:16%;
  background-color: var(--bg-primary);
  padding: 20px 0;
  border-right: 1px solid var(--border-subtle);
  position: fixed;
  min-width:230px;
}

.profile-icon-mobile {
  display: none;
}

.sidebar::after {
  content: '';
  display: block;
  position: absolute;
  top: 730px;
  left: 0;
  width: 100%;
  background-color: var(--bg-secondary);
  z-index: -1;
}

.logo {
  margin-left:27px;
}

.navbar-images{
  width: 30px;
  height: 30px;
}

.inner-image{
  width:28px;
  height:28px;
  padding:2px;
}

.search-inner-image{
  width:24px;
  height:25px;
  margin-top:2px;
}

.explore-inner-image{
  width:22px;
  height:28px;
}

.community-inner-image{
  width:26px;
  height:21px;
  margin-top:5px;
}

.event-inner-image{
  width:18px;
  height:28px;
  margin-left:3px;
}

.mythology-inner-image{
  width:23px;
  height:27px;
  margin-top:2px;
}

.services-inner-image{
  width:33px;
  height:19px;
  margin-top:3px;
}

.contribute-inner-image{
  width:25px;
  height:25px;
  margin-top:2px;
}

.profile-inner-image{
  width:27px;
  height:27px;
  margin-top:3px;
  border-radius:100%;
}

.notification-inner-image{
  width:26px;
  height:27px;
  margin-top:2px;
}

.setting-inner-image{
  width:26px;
  height:27px;
  margin-top:3px;
}

/* --- Create dropdown --- */

.create-dropdown-container {
  position: relative;
}

.create-menu-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.create-menu-item:hover {
  background-color: var(--bg-light);
}

.dropdown-arrow {
  margin-left: auto;
}

.dropdown-inner-image{
  width:19px;
  height:20px;
  margin-right:18px;
}

.sidebar-menu li.create-dropdown-menu {
  display: none;
  padding: 0;
  list-style: none;
}

.sidebar-menu li.create-dropdown-menu.show {
  display: block;
}

.create-dropdown-menu .dropdown-list {
  list-style: none;
  padding-left: 0;
  margin-left: 35px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  border-bottom: 1px solid var(--border-primary);
  cursor: pointer;
  transition: background-color 0.3s ease;
  list-style: none;
  margin: 0;
}

.dropdown-item:hover {
  background-color: var(--bg-tertiary);
}

.dropdown-item .navbar-images {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.dropdown-item .navbar-section {
  flex: 1;
  color: rgba(0, 0, 0, 0.90);
  font-family: var(--font-primary);
  font-size: 22px;
  font-style: normal;
}

.create-dropdown-container.active .create-menu-item {
  background-color: #e3f2fd;
}

.create-dropdown-container.active .plus-icon {
  color: #1976d2;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.create-dropdown-container .plus-icon {
  transition: transform 0.3s ease;
}

/* --- Menu items --- */

.navbar-section{
  color: rgba(0, 0, 0, 0.90);
  margin-left:19px;
  font-family: var(--font-primary);
  font-size: 22px;
  font-style: normal;
  line-height: 140%;
}

.sidebar-menu {
  list-style-type: none;
  padding-left:0;
}

.sidebar-menu li {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.sidebar-menu > li > a {
  display: flex;
  align-items: center;
  padding: 20px 0;
  padding-left: 2rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.sidebar-menu > li:not(:has(> a)) {
  padding: 20px 0;
  padding-left: 2rem;
}

.sidebar-menu li:hover:not(.create-dropdown-menu) {
  background-color: var(--bg-tertiary);
}

.sidebar-menu li i {
  margin-right: 10px;
  width: 24px;
  font-size: 20px;
}

.sidebar-menu li.active {
  font-weight: bold;
}

.sidebar-menu li.active .navbar-section {
  color: var(--brand-primary);
  font-weight: bold;
}

.sidebar-menu .profile-pic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
}

/* --- Page content offset --- */

.page-content {
  margin-left: max(16%, 230px);
  min-height: 100vh;
}

@media (max-width: 1160px) {
  .sidebar {
    width:20%;
  }
  .page-content {
    margin-left: max(20%, 230px);
  }
}

@media (max-width: 750px) {
  .sidebar {
    padding:0;
    border-right:none;
    height:60px;
    position:static;
  }
  .page-content {
    margin-left: 0;
  }
  .logo{
    margin-left:7%;
  }
  .devalay-icon {
    height: 42px;
    margin-top:9px;
  }
  .profile-icon-mobile {
    display: block;
    position: absolute;
    top: 10px;
    right: 5%;
  }
  .profile-icon{
    height:17px;
    margin-top:10px;
  }
}