/* Every sell tab (Dropped today, My Rivens, mods, arcanes, other items): selection bar, table, notices and the
   review dialog. Riven cards and the Riven draft form are in owned-rivens.css. */

/* Filters: the price boxes stay narrow beside the selects (the boxes take the shared input style) */
.tool:is([data-for="dropped"], [data-for="rivens"], [data-for="mods"], [data-for="sell-arcanes"], [data-for="sell-items"]) input[type="number"] { width: 5.5rem; }

/* Waiting for the first reply */
.sale-loading > p { margin: 0 0 var(--sp-3); font-size: var(--step--1); }

/* Notices above the list: a warn bar, red for failures */
.sale-notice {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--warn);
  border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  color: var(--ivory);
  font-size: var(--step--1);
}
.sale-notice.error { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.sale-notice a { color: var(--gold-hi); }

/* Selection bar: select all, the count, then the actions to the right */
.sale-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--hairline);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--lapis-950) 45%, transparent);
  font-size: var(--step--1);
}
.sale-bar .check { display: flex; align-items: center; gap: var(--sp-2); color: var(--ivory); }
.sale-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }
.sale-note { margin-top: var(--sp-5); font-size: var(--step--1); }

/* Status chips that link to the listing or order */
a.chip.sale-link { text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-soft); transition: box-shadow var(--fast) ease, color var(--fast) ease; }
a.chip.sale-link:hover { box-shadow: inset 0 0 0 1px currentColor; color: var(--ivory); }
a.chip.sale-link.ok:hover { color: var(--ok); }

/* Sellable stacks: a selectable table; the checkbox sits in the name cell */
.sale-table .cell-name input { flex: none; margin: 0; accent-color: var(--gold); }
.sale-table .cell-name a { color: inherit; text-decoration: none; }
.sale-table .cell-name a:hover { color: var(--gold-hi); }
.sale-table small.quiet, .sale-drafts small.quiet { font-size: 0.8em; }
.sale-table .sale-value { color: var(--gold-hi); }
.owned-mods tbody tr { cursor: pointer; }
.owned-mods tbody tr.picked td { background: var(--gold-soft); }
.owned-mods tbody tr.picked td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
/* Dropped today: the day boundary above the list; drops with nothing left to sell stay listed, dimmed */
.drop-period { margin: 0 0 var(--sp-3); font-size: var(--step--1); }
.owned-mods tbody tr.unsellable { cursor: default; }
.owned-mods tbody tr.unsellable td { color: var(--muted); }

/* ---------- review dialog ---------- */

.sale-dialog form { display: flex; flex-direction: column; gap: var(--sp-3); }
.sale-dialog p { margin: 0; }
.sale-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.sale-head h2 { margin: 0; }
.sale-dialog input { margin: 0; padding: 0.4rem 0.6rem; background: color-mix(in srgb, var(--lapis-950) 70%, transparent); }

/* One row of bulk price choices, the same on every sell tab */
.sale-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--lapis-950) 35%, transparent);
}
.sale-prices-label { color: var(--gold); font: 600 var(--step--2)/1.3 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; }
.sale-price-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sale-hint { font-size: var(--step--2); }
.sale-status { color: var(--gold-hi); }
/* Empty: no space taken, but kept in the accessibility tree so its first message is announced */
.sale-status:empty { margin-top: calc(-1 * var(--sp-3)); }

/* Price boxes: tabular figures with a "p" after them */
.plat-field, .qty-field { display: inline-flex; align-items: center; gap: var(--sp-1); }
.plat-field::after { content: "p"; color: var(--muted); font-family: var(--num); }
.sale-dialog input.num { width: 6.5rem; }

.sale-drafts thead th { position: static; background: none; backdrop-filter: none; }
.sale-drafts td { vertical-align: middle; }
.sale-drafts td p { margin: var(--sp-1) 0 0; font-size: var(--step--1); }
.sale-market { font-size: var(--step--1); white-space: nowrap; }
.sale-result { font-size: var(--step--1); }
.sale-result.ok { color: var(--ok); }
.sale-result.error { color: var(--danger); }

/* The total and the main button stay in view at the bottom of a long list */
.sale-foot {
  position: sticky;
  bottom: -1.5rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0 -1.5rem -1.5rem;
  padding: var(--sp-3) 1.5rem 1.5rem;
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
}
.sale-total { font-size: var(--step-0); font-weight: 600; }
/* Progress of the listing batch: above the total in the dialog, under the selection bar in the tab */
.sale-foot .batch-progress { flex: 1 1 100%; }
.owned-sales > .batch-progress { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }

@media (max-width: 40rem) {
  .sale-actions { width: 100%; margin-left: 0; }
  .sale-actions button { flex: 1 1 0; }
  .sale-bar { padding: var(--sp-3); }
  .owned-mods tbody tr.picked { border-left-color: var(--gold); background: var(--gold-soft); }
  .owned-mods tbody tr.picked td { background: none; }
  .owned-mods tbody tr.picked td:first-child { box-shadow: none; }
  .sale-table td:first-child .cell-name { font-weight: 500; }
  .sale-foot { bottom: calc(-1 * var(--sp-4)); margin: 0 calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .sale-foot .primary { flex: 1 1 100%; }
  .sale-price-buttons { width: 100%; }
  .sale-price-buttons button { flex: 1 1 auto; }
  .sale-market { white-space: normal; }
}

/* Arcane fusion choice: verdict chip, then r0 and max rank as aligned lines with a score bar */
.rank-advice { vertical-align: middle; }
.fuse { display: grid; grid-template-columns: auto auto minmax(2.5rem, 1fr) auto; gap: 0.15rem var(--sp-2); align-items: center; min-width: 13rem; max-width: 17rem; font-family: var(--num); font-size: var(--step--1); }
.fuse-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 0.15rem; }
.fuse-head small.quiet { font: 400 var(--step--2)/1.3 var(--ui); white-space: nowrap; }
.fuse-side { display: contents; color: var(--muted); }
.fuse-rank { font-weight: 600; }
.fuse-price, .fuse-vol { text-align: right; white-space: nowrap; }
.fuse-bar { height: 4px; border-radius: 2px; background: rgba(236, 230, 214, 0.07); overflow: hidden; }
.fuse-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--line-hover); }
.fuse-side.win { color: var(--ivory); }
.fuse-side.win .fuse-rank, .fuse-side.win .fuse-price { color: var(--gold-hi); }
.fuse-side.win .fuse-bar > span { background: var(--gold); }

@media (max-width: 40rem) {
  table.stack td.rank-advice { align-items: flex-start; }
  .fuse { flex: 1 1 auto; max-width: 16rem; }
}