/* Navbar Component Styles */

/* Base navbar styling */
.navbar {
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid rgba(var(--bels-shadow-rgb), 0.05);
}

.navbar-brand {
  font-weight: 700;
  color: var(--bels-primary);
  transition: color var(--transition-base);
}

.navbar-brand:hover {
  color: var(--bels-secondary);
}

/* Desktop navigation styling */
@media (min-width: 992px) {
  .navbar-nav .nav-link {
    transition: all var(--transition-base);
    border-radius: var(--radius-md);
    margin: 0 var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    background-color: rgba(var(--bels-primary-rgb), 0.1);
    transform: translateY(-1px);
  }

  .navbar-nav .nav-link.text-danger:hover {
    background-color: rgba(var(--bels-accent-rgba), 0.1);
    color: var(--bels-danger);
  }

  .navbar-nav .nav-link .badge {
    font-size: 0.65rem;
  }

  .theme-toggle {
    border: none;
    background: transparent;
  }

  .theme-toggle:hover,
  .theme-toggle:focus {
    background-color: rgba(var(--bels-primary-rgb), 0.1);
  }
}

/* Mobile navbar styling */
@media (max-width: 991.98px) {
  .navbar {
    padding: 0.75rem var(--spacing-md);
    min-height: 70px;
    background: rgba(var(--bels-white-rgb), 0.95);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1030;
  }
}

@media (max-width: 375px) {
  .navbar {
    padding: 0.5rem var(--spacing-md);
    min-height: 56px;
  }

  .navbar-logo {
    height: 36px;
    margin-top: -4px;
    margin-bottom: -4px;
  }

  body {
    padding-top: 56px;
  }
}