.buttons-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 14px;
  align-items: center;
  overflow-x: auto;
}

.buttons-row button {
  min-width: 0;
}

button {
  border: 1px solid transparent;
  padding: 6px 22px;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  color: var(--text);
}

.button-active,
button.button-active {
  background: #1d4ed8;
  color: white;
  border-color: rgba(255,255,255,0.15);
}

.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-buttons button {
  flex: 1 1 120px;
}

.icon-button[hidden] {
  display: none !important;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 12px;
  min-width: 44px;
  min-height: 44px;
  background: rgba(43, 43, 43, 0.4);
  color: var(--text);
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.sidebar-nav .icon-button {
  flex: 1 1 0;
  min-width: 0;
}

.icon-button:not(:disabled):hover {
  background: #5b5b5b;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.icon-button svg {
  width: 1rem;
  height: 1rem;
}

.sidebar-nav {
  justify-content: flex-start;
  flex-wrap: wrap;
}

button.primary {
  background: #b0b0b0;
  color: white;
}

button:not(:disabled):hover {
  transform: none;
}

button:not(.primary):not(:disabled):hover {
  background: #303034;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}