/* The stash window borrows its chrome (frame, title, buttons) straight from market.css via
 * the shared "market-window" class on the root element; only the layout pieces that
 * market.css doesn't already provide -- the toolbar and the item grid -- are defined here. */

.market-window.stash-window {
  height: min(360px, calc(100% - 20px));
  min-height: 260px;
  min-width: 480px;
  width: min(660px, calc(100% - 24px));
}

.stash-toolbar {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 0 15px;
}

.stash-category,
.stash-trader {
  background: #272727;
  border: 1px inset #666;
  color: #eee;
  flex: 0 0 150px;
  height: 18px;
  min-width: 0;
}

.stash-search {
  align-items: center;
  color: #ccc;
  display: flex;
  flex: 1;
  gap: 4px;
}

.stash-search input[type="search"] {
  background: #272727;
  border: 1px inset #666;
  color: #eee;
  flex: 1;
  height: 18px;
  min-width: 0;
}

.stash-search button {
  min-height: 18px;
  padding: 0;
  width: 20px;
}

/* Wrapped by TibiaScrollbar (see tibia-scrollbar.js): the wrapper half carries the box (the
   background and its place in the window's own layout), the content half keeps the tiles
   wrapping into rows exactly as before. */
.stash-grid.tibia-scroll-wrapper {
  background: url("../png/bg.png") repeat;
  flex: 1;
  margin: 6px 15px 0;
  min-height: 0;
}

.stash-grid.tibia-scroll-content {
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
}

/* stash-slot is a plain div (see StashWindow.__createTile), so it just gets the game's
 * ordinary .slot look for free -- only the hover state needs adding here. A click withdraws
 * immediately, so there is no lingering "selected" state to style. */

.stash-slot:hover {
  box-shadow: 0 0 0 1px #fff inset;
}

.stash-footer nav {
  display: flex;
  gap: 5px;
  width: 100%;
  justify-content: space-between;
}

.stash-footer nav button:disabled {
  color: #858585 !important;
}