/* Dark Navbar Styling */

.navbar {
  background-color: var(--color-darknav--background) !important;
  border: none !important;
  border-radius: 0;
  padding: var(--spacing-2sm) var(--spacing-lg) var(--spacing-2sm) var(--spacing-md);
  height: auto !important;
  min-height: auto;
  box-shadow: none !important;
}

/* Mobile menu button */
.navbar .navbar-toggler {
  border: none;
  padding: 0;
  margin-right: var(--spacing-sm);
}

.navbar .navbar-toggler-icon {
  width: 18px;
  height: 18px;
}

/* Search bar container */
.navbar .flex-grow-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Search bar styling */
.navbar .input-group {
  background-color: transparent;
  border: 1px solid var(--color-neutral--300);
  border-radius: var(--spacing-xs);
  overflow: hidden;
  max-width: 400px;
}

.navbar .input-group-text {
  background-color: transparent;
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-neutral--300);
}

.navbar .input-group-text svg {
  width: 18px;
  height: 18px;
  color: var(--color-neutral--300);
}

.navbar .form-control {
  background-color: transparent;
  border: none;
  color: var(--color-neutral--300);
  font-family: var(--font-body-regular);
  font-size: var(--font-body-regular--size);
  font-weight: var(--font-body-regular--weight);
  padding: var(--spacing-sm) var(--spacing-md);
}

.navbar .form-control::placeholder {
  color: var(--color-neutral--300);
  font-family: var(--font-body-regular);
  font-size: var(--font-body-regular--size);
  font-weight: var(--font-body-regular--weight);
}

.navbar .form-control:focus {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-neutral--300);
  box-shadow: none;
  outline: none;
}

/* Search button styling */
.navbar .btn {
  border: none;
  background-color: transparent;
  color: var(--color-neutral--300);
  padding: var(--spacing-sm) var(--spacing-md);
}

.navbar .btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-neutral--300);
}

.navbar .btn svg {
  width: 18px;
  height: 18px;
}

/* Notification button styling */
.navbar .btn.position-relative {
  border: none;
  background-color: transparent;
  color: var(--color-neutral--300);
  padding: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}

.navbar .btn.position-relative:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-neutral--300);
}

.navbar .btn.position-relative svg {
  width: 18px;
  height: 18px;
  color: var(--color-neutral--300);
}

.navbar .btn.position-relative .badge {
  font-size: 0.6rem;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0;
}

/* Profile image styling */
.navbar .profile-image {
  width: var(--spacing-2md);
  height: var(--spacing-2md);
  border-radius: 50%;
  object-fit: cover;
}

/* Quick actions section */
.navbar .d-none.d-lg-flex {
  align-items: center;
  gap: var(--spacing-sm);
}

/* Notification button */
.navbar .btn-outline-secondary {
  border-color: var(--color-neutral--300);
  color: var(--color-neutral--300);
  background-color: transparent;
}

.navbar .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-neutral--300);
  color: var(--color-neutral--300);
}

/* Container adjustments */
.navbar .container {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Remove default Bootstrap navbar styling */
.navbar.navbar-light {
  background-color: var(--color-darknav--background) !important;
}

/* Dropdown menu styling to match dark theme */
.navbar .dropdown-menu {
  background-color: var(--color-darknav--background);
  border-color: var(--color-neutral--300);
}

.navbar .dropdown-item {
  color: var(--color-neutral--300);
}

.navbar .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-neutral--300);
}