/* Барахолка. Раскладка повторяет экран основной игры: фильтры слева, витрина
   справа, действие в строке. На телефоне сайдбар уезжает в шторку — 214px
   фильтров на ширине 360 не оставляют места под сам список. */

.flea-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 12px; align-items: start; }
.flea-side { display: flex; flex-direction: column; gap: 10px; }
.flea-filters-toggle { display: none; }
.flea-filters, .flea-tree {
  background: var(--panel); border: 1px solid var(--edge-soft); padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.flea-lbl {
  font-family: var(--display); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted, #6c685e);
}
.flea-input {
  background: #0F0F11; border: 1px solid var(--edge); color: var(--text);
  padding: 9px 10px; font-family: inherit; font-size: 14px; width: 100%;
  min-height: var(--tap-min, 44px); box-sizing: border-box;
}
.flea-input:focus { outline: none; border-color: var(--gold); }
.flea-input.good { border-color: var(--green, #7d9153); }
.flea-input.bad { border-color: var(--red, #a33a32); }
.flea-price-row { display: flex; gap: 8px; }
.flea-cycle { align-self: flex-start; }

.flea-tree-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: none; border: 0; border-bottom: 1px solid var(--edge-soft);
  color: var(--text-2); font-family: inherit; font-size: 14px; text-align: left;
  padding: 8px 4px; cursor: pointer; min-height: var(--tap-min, 44px); width: 100%;
}
.flea-tree-row:hover { color: var(--text); background: rgba(201, 162, 39, 0.06); }
.flea-tree-row.active { color: var(--gold-hi, #e0c068); box-shadow: inset 2px 0 0 var(--gold); }
.flea-tree-row .cnt { font-variant-numeric: tabular-nums; color: var(--muted, #6c685e); }

.flea-sortbar {
  display: flex; flex-wrap: wrap; gap: 1px; background: var(--edge-soft);
  border-bottom: 1px solid var(--edge);
}
.flea-sort {
  flex: 1 1 auto; background: var(--panel); border: 0; color: var(--muted, #6c685e);
  font-family: var(--display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 8px; cursor: pointer; min-height: var(--tap-min, 44px); white-space: nowrap;
}
.flea-sort.active { color: var(--gold-hi, #e0c068); background: rgba(201, 162, 39, 0.08); }

.flea-list { display: flex; flex-direction: column; }
.flea-row {
  display: grid; grid-template-columns: minmax(0, 2.2fr) 1fr 1.2fr 0.8fr auto;
  gap: 10px; align-items: center; padding: 10px 12px;
  border-bottom: 1px solid var(--edge-soft);
}
.flea-row.mine { box-shadow: inset 2px 0 0 var(--gold); }
.flea-row.expired { opacity: 0.75; }
.flea-row-item { display: flex; gap: 10px; align-items: center; min-width: 0; }
.flea-ico { width: 34px; height: 34px; object-fit: contain; flex: none; }
.flea-ico.small { width: 22px; height: 22px; }
.flea-name { font-size: 14.5px; color: #EDE9DE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flea-sub { font-size: 13px; color: var(--muted, #6c685e); }
.flea-seller { font-size: 14px; color: var(--text-2); min-width: 0; }
.flea-price { text-align: right; font-variant-numeric: tabular-nums; }
.flea-price .total { color: var(--gold-hi, #e0c068); font-size: 15px; }
.flea-dev { font-size: 12.5px; }
.flea-dev.down { color: var(--green, #7d9153); }
.flea-dev.up { color: var(--red, #a33a32); }
.flea-timer { font-size: 13px; color: var(--muted, #6c685e); font-variant-numeric: tabular-nums; text-align: right; }
.flea-action { display: flex; justify-content: flex-end; }

.flea-slots {
  padding: 10px 12px; font-size: 13.5px; color: var(--text-2);
  border-bottom: 1px solid var(--edge-soft);
}
.flea-hint { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.flea-summary {
  display: flex; flex-direction: column; gap: 3px; font-size: 14px;
  border-top: 1px solid var(--edge-soft); padding-top: 8px; margin-top: 4px;
}
.flea-summary .bad { color: var(--red, #a33a32); }
.flea-summary .gold { color: var(--gold-hi, #e0c068); }
.flea-dur { display: flex; gap: 8px; }
.flea-sell { display: flex; flex-direction: column; gap: 12px; }

.flea-hist {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-bottom: 1px solid var(--edge-soft); font-size: 13.5px;
}
.flea-hist .side {
  font-family: var(--display); font-size: 12.5px; letter-spacing: 0.1em;
  padding: 2px 7px; border: 1px solid var(--edge);
}
.flea-hist .side.sold { color: var(--green, #7d9153); }
.flea-hist .side.bought { color: var(--gold-hi, #e0c068); }
.flea-hist .nm { flex: 1 1 140px; min-width: 0; color: var(--text); }
.flea-hist .who { color: var(--text-2); }
.flea-hist .sum { font-variant-numeric: tabular-nums; }
.flea-hist .sum.sold { color: var(--green, #7d9153); }
.flea-hist .sum.bought { color: var(--red, #a33a32); }
.flea-hist .fee { color: var(--muted, #6c685e); font-size: 12.5px; }

/* Заявки на покупку — вторая половина барахолки (docs/design/buy-orders.md).
   Ряды переиспользуют .flea-row/.flea-row-item/... 1:1 с лотами — тут не
   отдельный визуальный язык, а зеркало того же рынка, только со стороны
   спроса, поэтому и мобильная раскладка выше подхватывается без правок. */
.flea-orders { display: flex; flex-direction: column; gap: 12px; }
.flea-order-create {
  padding: 12px; border-bottom: 1px solid var(--edge-soft);
  display: flex; flex-direction: column; gap: 8px;
}

/* Ссылка на заявки со стеллажей (вкладка «Выставить»): у тебя лежит вещь,
   и на неё уже есть чужая заявка. Метка декоративная (pointer-events:none,
   как .hide-mark/.listed-mark) — сам факт спроса читается наведением через
   уже существующий тултип предмета (extraText в bindItemTooltip), отдельный
   тап тут не нужен. */
.flea-screen .item-cell.has-demand { box-shadow: inset 0 0 0 1px var(--green, #7d9153); }
.flea-screen .item-cell .demand-badge {
  position: absolute; left: 2px; bottom: 2px; font-size: 11px; line-height: 1;
  color: var(--green, #7d9153); pointer-events: none;
}

@media (max-width: 900px) {
  .flea-layout { grid-template-columns: 1fr; }
  .flea-filters-toggle { display: inline-flex; }
  .flea-filters, .flea-side .flea-tree { display: none; }
  .flea-filters.open { display: flex; }
  .flea-filters.open ~ .flea-tree { display: flex; }
  .flea-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "item price" "seller timer" "action action";
    row-gap: 6px;
  }
  .flea-row-item { grid-area: item; }
  .flea-price { grid-area: price; }
  .flea-seller { grid-area: seller; }
  .flea-timer { grid-area: timer; text-align: left; }
  .flea-action { grid-area: action; }
  .flea-action .btn { width: 100%; }
}