/*
  Market table and toolbar module.
  Extracted from the former modules/30-market-economy.css; keep after 32-sidebar-rank-accuracy.css.
*/

/* === Market: toolbar (sticky) + table view === */
html.page-market .marketToolbar{
  position: sticky;
  top: var(--sticky-top);
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.18);
}
html.page-market .marketToolbar.is-stuck{
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
}

/*
  Sticky toolbar must not visually cover the first visible cards/rows.
  When the toolbar becomes stuck, market.js toggles `.is-stuck` and sets
  `--market-tb-h` on the toolbar element.

  We then add top padding to the immediate list sibling so its first row
  starts just below the toolbar (+ small gap).
*/
html.page-market .marketToolbar.is-stuck + .marketGroups,
html.page-market .marketToolbar.is-stuck + .marketAll{
  padding-top: calc(var(--market-tb-h, 0px) + 12px);
}

html.page-market .marketToolbar .shopsControls{
  align-items:center;
}

/* Market toolbar v4: predictable row-based layout (market.js outputs .marketTbRow wrappers) */
.marketTbRow{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.marketTbRow--top .marketSearch{ flex: 1 1 460px; min-width: 260px; }
.marketTbRow--top .marketSort{ margin-left: auto; }

@media (max-width: 820px){
  .marketTbRow--top .marketSearch{ flex-basis: 100%; }
  .marketTbRow--top .marketSort{ margin-left: 0; flex: 1 1 220px; }
}

.marketTbRow--cats{ padding-top: 2px; }
.marketTbRow--filters{ gap: 10px; }

/* Market toolbar: group filters into 3 logical columns (stable on wide, predictable wrap on narrow) */
.marketFiltersLeft,
.marketFiltersMid,
.marketFiltersRight{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.marketFiltersLeft{ flex: 1 1 520px; }
.marketFiltersMid{ flex: 0 0 auto; }
.marketFiltersRight{ flex: 0 0 auto; margin-left: auto; justify-content:flex-end; }

@media (max-width: 1100px){
  .marketFiltersLeft{ flex-basis: 100%; }
  .marketFiltersMid{ flex-basis: 100%; }
  .marketFiltersRight{ flex-basis: 100%; margin-left: 0; justify-content:flex-start; }
}

/* Make controls feel uniform (height, radius) without fighting existing button styles */
html.page-market .marketToolbar{ --market-control-h: 38px; }
.marketGrid input,
.marketNum,
.marketSort .marketSelect{
  min-height: var(--market-control-h);
}
.marketActionBtn{ min-height: var(--market-control-h); }
.marketCheck{ min-height: var(--market-control-h); }

.marketPresets{flex:1 0 100%;display:flex;gap:8px;overflow:auto;padding:4px 2px 2px;}
.marketPresets::-webkit-scrollbar{height:0;}
.marketPresets .shopsTab{min-width:unset;padding:6px 10px;font-size:12px;border-radius:999px;}


.marketGrid{
  display:flex;
  align-items:center;
  gap:8px;
}

.marketGrid input{
  width: clamp(110px, 14vw, 140px);
  min-width: 110px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text900);
}


.marketGrid input:focus{
  outline: none;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}

.marketRange,
.marketQty{
  display:flex;
  align-items:center;
  gap:8px;
}

.marketNum{
  width: clamp(110px, 14vw, 140px);
  min-width: 110px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text900);
}


.marketQty .marketNum{
  width: clamp(96px, 12vw, 120px);
}

.marketNum:focus{
  outline: none;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}

.marketNum:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.marketSort .marketSelect{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text900);
  min-width: clamp(160px, 18vw, 220px);
}


.marketSort .marketSelect:focus{
  outline:none;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}

.marketCheck{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  cursor:pointer;
  user-select:none;
}


.marketCheck input{ margin:0; }

.marketTabs--view .shopsTab{ min-width: 92px; }

.marketAll{
  margin-top: 10px;
}

.marketAllHead{
  display:grid;
  grid-template-columns: 1.2fr 1.3fr 1.4fr .6fr;
  gap: 12px;
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

.marketAllBody{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* Market "Все предложения" — virtualized mode
   When too many rows are shown, market.js switches to windowed rendering.
   We remove flex+gap here (spacers need exact pixel heights) and emulate
   spacing via margins on rows. */
.marketAllBody[data-virt-all="1"]{
  display:block;
  position:relative;
  gap: 0;
}
.marketAllBody[data-virt-all="1"] .mvSpacer{
  width:100%;
  height:0;
}
.marketAllBody[data-virt-all="1"] .mvRows{
  display:block;
}
.marketAllBody[data-virt-all="1"] .marketAllRow{
  margin: 0 0 10px 0;
}
.marketAllBody[data-virt-all="1"] .marketAllRow:last-child{
  margin-bottom: 0;
}

.marketAllHint{
  margin: 10px 0;
  font-size: 12px;
  opacity: .7;
  text-align: center;
}

.marketAllRow{
  display:grid;
  grid-template-columns: 1.2fr 1.3fr 1.4fr .6fr;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.10);
  border-radius: var(--radius-lg);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.marketAllRow:hover{
  background: rgba(0,0,0,.14);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}

.marketAllRow .c{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.marketAllRow .c .t{
  min-width:0;
}

.marketAllRow .c .t .l1{
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marketAllRow .c .t .l2{
  font-size: 12px;
  opacity: .75;
  margin-top: 2px;
}

.marketAllRow .c--grid{
  justify-content:flex-end;
  gap: 6px;
}

@media (max-width: 1000px){
  .marketAllHead{ display:none; }
  .marketAllRow{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .marketAllRow .c--grid{ justify-content:flex-start; }
  .marketSort .marketSelect{ min-width: 160px; }
}