.search-wrap { display: inline-block; position: relative; }

.dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  background: white;
  border: 1px solid rgb(var(--color-gray-300));
  border-radius: var(--radius);
  max-height: 200px;
  overflow: auto;
  width: 100%;
  z-index: 10;
  box-shadow: var(--shadow-md);
}

.dropdown div { padding: var(--space-2) var(--space-3); cursor: pointer; border-bottom: 1px solid rgb(var(--color-gray-100)); }
.dropdown div:hover { background-color: rgb(var(--color-gray-50)); }
.dropdown div:last-child { border-bottom: none; }

.sort-btn { cursor: pointer; background: none; border: 0; padding: 0; color: rgb(var(--color-primary)); font-weight: 500; transition: color 0.2s; }
.sort-btn:hover { color: rgb(var(--color-primary-dark)); text-decoration: underline; }

.type.in { color: rgb(var(--color-success)); font-weight: 600; }
.type.out { color: rgb(var(--color-danger)); font-weight: 600; }

.table-container { overflow-x: auto; margin-bottom: var(--space-6); }

.note-cell { min-width: 150px; cursor: text; transition: background-color 0.2s; }
.note-cell:focus { background-color: rgb(var(--color-primary) / 0.05); outline: 2px solid rgb(var(--color-primary) / 0.5); border-radius: var(--radius-sm); }

@media (max-width: 768px) {
  .sort-controls { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .sort-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
}