/* Inventory pages (the Inventory mockup): the stock panel's game tabs with the actions at the right and the filter
   bar under them; item cells with the picture, the name with its variant badges and the cost line; the holders
   (stacked bot avatars) and the fold-out row of per-bot cards; the available number with its bar; the movements
   and counts panels. Items, History, Valuation and the item page reuse the item cell and the holders. Tokens and
   components come from app.css; nothing here moves under the pointer. */

/* ── the four-step checklist banner: its step buttons may wrap on a phone ── */
.checklist-banner .banner__actions { align-items: center; }
.checklist-banner .banner__actions .btn { white-space: normal; height: auto; min-height: 28px; padding: 5px 10px; text-align: left; line-height: 1.3; max-width: 100%; }

/* ── the stock panel's top rows ── */
.invtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 12px 0 8px; border-bottom: 1px solid var(--line); min-width: 0; }
.invtabs > .ftabs { border-bottom: 0; padding: 0; flex: 1 1 auto; }
.invtabs .ftab { height: 48px; gap: 8px; }
.invtabs .ftab .glogo { width: 18px; height: 18px; border-radius: 5px; vertical-align: 0; }
.invtabs__end { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 0; }
.invfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.invfilter__search { display: flex; align-items: center; gap: 8px; height: 34px; flex: 1 1 220px; max-width: 340px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); color: var(--ink-3); min-width: 0; }
.invfilter__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.invfilter__search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--ink); padding: 0; font-size: 13px; }
.invfilter__search input::placeholder { color: var(--ink-3); }
.invfilter__count { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.invfilter__clear { font-size: 12px; white-space: nowrap; }
.invfilter > .selchips { flex: none; }

/* ── the item cell: picture, name with its badges, the cost line ── */
.itemcell { display: inline-flex; align-items: center; gap: 11px; min-width: 0; max-width: 100%; color: var(--ink); vertical-align: middle; }
.itemcell:hover { text-decoration: none; }
a.itemcell:hover .itemcell__name { color: var(--accent); }
.itemcell__pic { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; background: var(--panel-2); border: 1px solid var(--line); flex: none; display: grid; place-items: center; color: var(--ink-3); }
.itemcell__pic--empty { background: repeating-linear-gradient(135deg, var(--stripe) 0 5px, var(--panel-2) 5px 10px); }
.itemcell__text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.itemcell__name { font-weight: 500; display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.3; }
.itemcell__name .iname { min-width: 0; }
.itemcell__name .iname__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itemcell__sub { display: flex; align-items: center; gap: 6px; font: 11.5px/1.3 var(--mono); color: var(--ink-3); white-space: nowrap; min-width: 0; }
.itemcell__sub .glogo { width: 14px; height: 14px; border-radius: 4px; vertical-align: 0; }
.itemcell__sub .gchip { gap: 4px; font-family: var(--sans); font-size: 11.5px; }
.itemcell--sm .itemcell__pic { width: 28px; height: 28px; border-radius: 7px; }
.itemcell--lg .itemcell__pic { width: 64px; height: 64px; border-radius: 16px; }
.itemcell--lg .itemcell__name { font-size: 24px; font-weight: 500; letter-spacing: -.015em; }
.itemcell--lg .itemcell__sub { font-size: 12.5px; gap: 8px; flex-wrap: wrap; white-space: normal; }

/* ── who holds an item: stacked avatars, and the per-bot cards of the opened row ── */
.holders { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.holders__stack { display: inline-flex; flex: none; }
.holders__stack .bavatar { --sz: 24px; }
.holders__stack .bavatar + .bavatar { margin-left: -8px; }
.holders__stack .bavatar__img { border: 2px solid var(--panel); border-radius: 7px; }
.holders__stack a:hover .bavatar__img { border-color: var(--accent); }
.holders__n { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.holders__n--none { color: var(--bad); }
.holdercards { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.holdercards > .holder, .holdercards > .cellbtn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.holdercards > .holder:hover, .holdercards > .cellbtn:hover, .holdercards > .cellbtn:focus-visible { border-color: var(--ink-3); text-decoration: none; background: var(--panel); outline: none; }
.holdercards > .cellbtn:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }
.holdercards .bavatar { --sz: 28px; }
.holder__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 1px; }
.holder__id { font: 600 12px/1.2 var(--mono); color: var(--ink); }
.holder__nums { font: 11px/1.3 var(--mono); color: var(--ink-3); white-space: nowrap; }
.holder__why { font: 11px/1.3 var(--sans); color: var(--warn); white-space: nowrap; }
.holder__avail { margin-left: 6px; font: 600 13px/1 var(--mono); color: var(--ok); flex: none; }
.holder--warn .holder__avail { color: var(--warn); }
.holder--bad .holder__avail { color: var(--bad); }
.holder--excluded { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--stripe) 6px 8px), var(--panel) !important; }
.holder--excluded .holder__avail { color: var(--ink-3); }
.holder--add { border-style: dashed !important; color: var(--ink-2) !important; }
.holder--add:hover { color: var(--ink) !important; }
.holder--add .holder__id { color: inherit; }
.holder--add .icon { color: var(--ink-3); }
.holdercards__none { font-size: 12px; color: var(--bad); align-self: center; }
.holdercards__hint { font-size: 12px; color: var(--ink-3); align-self: center; }

/* ── the stock table ── */
.stocktable th, .stocktable td { white-space: nowrap; }
.stocktable td { padding-top: 8px; padding-bottom: 8px; }
.stocktable .col-item { white-space: normal; min-width: 240px; }
.stocktable .col-held { min-width: 150px; }
.stocktable .col-more { width: 28px; }
.stocktable tr.is-low td:first-child { padding-left: 16px; }
.stocktable .stockrow.is-open td { background: var(--panel-2); border-bottom-style: solid; border-bottom-color: transparent; }
.stocktable .stockrow.is-open + .stockrow__detail > td { background: var(--panel-2); }
.stocktable .stockrow__detail > td { padding: 2px 18px 14px 65px; border-bottom: 1px dashed var(--line-2); white-space: normal; }
.stocktable .stockrow__detail:last-child > td { border-bottom: 0; }
.avail { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.avail__n { font: 600 13px/1 var(--mono); color: var(--ink); }
.avail--warn .avail__n { color: var(--warn); }
.avail--bad .avail__n { color: var(--bad); }
.avail__bar { width: 46px; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; flex: none; }
.avail__fill { display: block; height: 100%; background: var(--ink-2); }
.avail--warn .avail__fill { background: var(--warn); }
.avail--bad .avail__fill { background: var(--bad); }
.rowtoggle { all: unset; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; color: var(--ink-3); box-sizing: border-box; }
.rowtoggle:hover, .rowtoggle:focus-visible { background: var(--panel-2); color: var(--ink); }
.rowtoggle .icon { transition: transform .15s; }
.stockrow.is-open .rowtoggle .icon { transform: rotate(90deg); }
.stockfoot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line); flex-wrap: wrap; }
.pager { margin-left: auto; display: flex; gap: 4px; }
.pager__btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel); color: var(--ink); font: 500 12px/1 var(--mono); text-decoration: none; }
.pager__btn:hover { background: var(--panel-2); text-decoration: none; }
.pager__btn.is-active { border-color: var(--btn); background: var(--accent-bg); color: var(--accent); }
.pager__btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.stocknote { font-size: 12.5px; color: var(--ink-3); }
.stocknote strong { color: var(--ink-2); font-weight: 600; }

/* ── the movements and counts panels under the table ── */
.stockgrid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.moverow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px dashed var(--line-2); color: var(--ink); }
.moverow:last-child { border-bottom: 0; }
a.moverow:hover { background: var(--panel-2); text-decoration: none; }
.moverow__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.moverow__item { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; min-width: 0; }
.moverow__item .iname__text { overflow: hidden; text-overflow: ellipsis; }
.moverow__sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moverow__qty { font: 600 13px/1 var(--mono); color: var(--ink-2); }
.moverow__qty--ok { color: var(--ok); } .moverow__qty--bad { color: var(--bad); } .moverow__qty--warn { color: var(--warn); } .moverow__qty--wait { color: var(--wait); }
.moverow__time { font: 11.5px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.countrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px dashed var(--line-2); color: var(--ink); }
.countrow:last-child { border-bottom: 0; }
a.countrow:hover { background: var(--panel-2); text-decoration: none; }
.countrow .bavatar { --sz: 32px; }
.countrow__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.countrow__id { font: 600 12.5px/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.countrow__when { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── the other inventory pages: the same cells in their tables, chips for a bot's part ── */
.histtable th, .histtable td { white-space: nowrap; }
.histtable .col-item { min-width: 200px; }
.histtable .histtable__why { white-space: normal; min-width: 200px; max-width: 420px; }
.itempage .table th, .itempage .table td { white-space: nowrap; }
.itempage .table td.wrap { white-space: normal; min-width: 160px; }
.itempage .stack > .panel { width: 100%; }
.itempage .panel__body .picture { max-height: 240px; }
.botcell { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); min-width: 0; vertical-align: middle; }
.botcell .bavatar { --sz: 24px; }
.botcell__id { font: 500 12.5px/1 var(--mono); white-space: nowrap; }
a.botcell:hover { text-decoration: none; } a.botcell:hover .botcell__id { color: var(--accent); }
.bybot { display: flex; flex-wrap: wrap; gap: 4px; }
.bybot__chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 3px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); font: 11.5px/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.bybot__chip .bavatar { --sz: 18px; }
.bybot__chip .bavatar__img { border-radius: 5px; }
.delta { font: 600 12.5px/1 var(--mono); }
.delta--ok { color: var(--ok); } .delta--bad { color: var(--bad); } .delta--warn { color: var(--warn); } .delta--wait { color: var(--wait); } .delta--neutral { color: var(--ink-2); }
.itemhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.itemhead__chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.newitem .gamepick__opt { padding: 6px 10px 6px 6px; }
.newitem__toggles { gap: 18px; margin-top: 4px; }
.newitem__more { border-top: 1px solid var(--line); padding-top: 10px; }
.newitem__more > summary, .itemmore > summary { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.newitem__rows { display: grid; gap: 8px; margin-top: 10px; }
.newitem__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.newitem__row .input { width: 90px; }
.newitem__offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.newitem__offer .mchip { grid-column: 1 / -1; }
.newitem__offer:last-child { border-bottom: 0; }
.newitem__per { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.newitem__per .input { width: 70px; }
.sellon { flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); }
.sellon__label { font-size: 13px; }
.sellon select, .sellon .dd { width: auto; flex: 0 0 auto; }
.sellon__link { flex: 1 1 180px; min-width: 0; }
.itemmore { border-top: 1px solid var(--line); padding-top: 10px; }
.itemmore__body { display: grid; gap: 12px; margin-top: 12px; }
.lots-note { font-size: 12px; color: var(--ink-3); }

@media (max-width: 760px) {
  .invtabs__end { margin-left: 0; width: 100%; padding-top: 0; }
  .invfilter__search { max-width: none; }
  .stocktable .stockrow__detail > td { padding-left: 18px; }
  .stockgrid { grid-template-columns: minmax(0, 1fr); }
  .moverow { padding: 10px 14px; gap: 10px; }
  .countrow { padding: 10px 14px; }
  .itemcell--lg .itemcell__pic { width: 48px; height: 48px; border-radius: 12px; }
  .itemcell--lg .itemcell__name { font-size: 19px; }
  /* a panel's title keeps its whole word on a phone: the meta and buttons move under it instead */
  .stockgrid .panel__head, .itempage .panel__head { flex-wrap: wrap; row-gap: 6px; }
  .stockgrid .panel__title, .itempage .panel__title { flex: 1 0 auto; overflow: visible; }
}