shoc-frontend-new/src/components/ActionBar.css

/* Action Bar - Top navigation bar above search controls */
.actionBar {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  padding: 0;
  margin-bottom: 0;
  position: relative;
  z-index: 10;
}

.actionBarNav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

.actionBarNav > li {
  position: relative;
  display: inline-block;
}

.actionBarLink {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.actionBarLink:hover {
  background-color: #e0e0e0;
  color: #000;
  text-decoration: none;
}

.actionBarLink i {
  font-size: 14px;
}

.actionBarText {
  font-size: 13px;
}

/* Dropdown */
.actionBarDropdown {
  position: relative;
  z-index: 100;
}

.actionBarDropdownMenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  display: block;
  min-width: 180px;
  padding: 5px 0;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.actionBarDropdownMenu li {
  display: block;
}

.actionBarDropdownMenu li a {
  display: block;
  padding: 8px 20px;
  color: #333;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}

.actionBarDropdownMenu li a:hover {
  background-color: #f5f5f5;
  color: #000;
}

.actionBarDropdownMenu li.divider {
  height: 1px;
  margin: 5px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.countLabel {
  color: #999;
  font-size: 12px;
}

.pull-right {
  float: right;
  margin-left: 10px;
}

/* Hide text on small screens */
@media (max-width: 768px) {
  .actionBarText {
    display: none;
  }
}

/* Close dropdowns when clicking outside */
.actionBarDropdown.open .actionBarDropdownMenu {
  display: block;
}

.actionBarDropdown:not(.open) .actionBarDropdownMenu {
  display: none;
}