/* v0.13.5 targeted scrollbar + compact Trade rules patch.
   Scope is intentionally targeted; this does not globally restyle every page/body scrollbar. */
:root {
  --req-scroll-track: rgba(8, 3, 1, 0.92);
  --req-scroll-track-border: rgba(116, 70, 28, 0.55);
  --req-scroll-thumb-a: #3b1f0c;
  --req-scroll-thumb-b: #7d4b21;
  --req-scroll-thumb-c: #c18a3f;
  --req-scroll-thumb-hover: #e0aa58;
  --req-scrollbar-wide: 18px;
}

/* Targeted list scrollbars: Compound DB template, widened roughly 100%. */
#compound-db * ,
.compound-db * ,
#compoundDb * ,
.compound-db-panel * ,
#reduction-db * ,
.reduction-db * ,
#reductionDb * ,
.reduction-db-panel * ,
#equipment-planner * ,
.equipment-planner * ,
#equipmentPlanner * ,
#trade * ,
.trade-page * {
  scrollbar-width: auto;
  scrollbar-color: var(--req-scroll-thumb-b) var(--req-scroll-track);
}

#compound-db *::-webkit-scrollbar,
.compound-db *::-webkit-scrollbar,
#compoundDb *::-webkit-scrollbar,
.compound-db-panel *::-webkit-scrollbar,
#reduction-db *::-webkit-scrollbar,
.reduction-db *::-webkit-scrollbar,
#reductionDb *::-webkit-scrollbar,
.reduction-db-panel *::-webkit-scrollbar,
#equipment-planner *::-webkit-scrollbar,
.equipment-planner *::-webkit-scrollbar,
#equipmentPlanner *::-webkit-scrollbar,
#trade *::-webkit-scrollbar,
.trade-page *::-webkit-scrollbar,
.req-scrollbar-compound-style::-webkit-scrollbar,
.req-scrollbar-compound-style *::-webkit-scrollbar {
  width: var(--req-scrollbar-wide) !important;
  height: var(--req-scrollbar-wide) !important;
}

#compound-db *::-webkit-scrollbar-track,
.compound-db *::-webkit-scrollbar-track,
#compoundDb *::-webkit-scrollbar-track,
.compound-db-panel *::-webkit-scrollbar-track,
#reduction-db *::-webkit-scrollbar-track,
.reduction-db *::-webkit-scrollbar-track,
#reductionDb *::-webkit-scrollbar-track,
.reduction-db-panel *::-webkit-scrollbar-track,
#equipment-planner *::-webkit-scrollbar-track,
.equipment-planner *::-webkit-scrollbar-track,
#equipmentPlanner *::-webkit-scrollbar-track,
#trade *::-webkit-scrollbar-track,
.trade-page *::-webkit-scrollbar-track,
.req-scrollbar-compound-style::-webkit-scrollbar-track,
.req-scrollbar-compound-style *::-webkit-scrollbar-track {
  background: linear-gradient(90deg, rgba(5,2,1,0.98), rgba(24,11,4,0.96)) !important;
  border-left: 1px solid var(--req-scroll-track-border) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.65) !important;
}

#compound-db *::-webkit-scrollbar-thumb,
.compound-db *::-webkit-scrollbar-thumb,
#compoundDb *::-webkit-scrollbar-thumb,
.compound-db-panel *::-webkit-scrollbar-thumb,
#reduction-db *::-webkit-scrollbar-thumb,
.reduction-db *::-webkit-scrollbar-thumb,
#reductionDb *::-webkit-scrollbar-thumb,
.reduction-db-panel *::-webkit-scrollbar-thumb,
#equipment-planner *::-webkit-scrollbar-thumb,
.equipment-planner *::-webkit-scrollbar-thumb,
#equipmentPlanner *::-webkit-scrollbar-thumb,
#trade *::-webkit-scrollbar-thumb,
.trade-page *::-webkit-scrollbar-thumb,
.req-scrollbar-compound-style::-webkit-scrollbar-thumb,
.req-scrollbar-compound-style *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--req-scroll-thumb-c), var(--req-scroll-thumb-b) 42%, var(--req-scroll-thumb-a)) !important;
  border: 3px solid rgba(5,2,1,0.95) !important;
  border-radius: 10px !important;
  min-height: 38px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,205,112,0.35),
    inset 0 -6px 10px rgba(0,0,0,0.38) !important;
}

#compound-db *::-webkit-scrollbar-thumb:hover,
.compound-db *::-webkit-scrollbar-thumb:hover,
#compoundDb *::-webkit-scrollbar-thumb:hover,
.compound-db-panel *::-webkit-scrollbar-thumb:hover,
#reduction-db *::-webkit-scrollbar-thumb:hover,
.reduction-db *::-webkit-scrollbar-thumb:hover,
#reductionDb *::-webkit-scrollbar-thumb:hover,
.reduction-db-panel *::-webkit-scrollbar-thumb:hover,
#equipment-planner *::-webkit-scrollbar-thumb:hover,
.equipment-planner *::-webkit-scrollbar-thumb:hover,
#equipmentPlanner *::-webkit-scrollbar-thumb:hover,
#trade *::-webkit-scrollbar-thumb:hover,
.trade-page *::-webkit-scrollbar-thumb:hover,
.req-scrollbar-compound-style::-webkit-scrollbar-thumb:hover,
.req-scrollbar-compound-style *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--req-scroll-thumb-hover), var(--req-scroll-thumb-b) 48%, var(--req-scroll-thumb-a)) !important;
}

/* Direct aliases for the lists that have been added by recent Trade patches. */
.trade-saved-scroll,
.trade-attached-scroll,
.trade-item-search-results,
.trade-item-results,
.trade-search-results,
#tradeItemResults,
#tradeSearchResults,
#itemList,
.item-list,
.equipment-item-list,
#xeonList,
.xeon-list,
.reduction-results,
#reductionResults,
.compound-results,
#compoundResults {
  scrollbar-width: auto !important;
  scrollbar-color: var(--req-scroll-thumb-b) var(--req-scroll-track) !important;
}

/* Compact Trade Board Fee & Rules card. JS only adds these classes to the one static rules panel. */
.req-trade-rules-compact {
  padding: 16px 18px !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(290px, 0.92fr) minmax(360px, 1.08fr) !important;
  gap: 16px 28px !important;
  align-items: stretch !important;
}

.req-trade-rules-compact-left,
.req-trade-rules-compact-right {
  min-width: 0 !important;
}

.req-trade-rules-compact-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
}

.req-trade-rules-compact-right {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-left: 1px solid rgba(178, 117, 45, 0.45) !important;
  padding-left: 22px !important;
}

.req-trade-rules-compact h1,
.req-trade-rules-compact h2,
.req-trade-rules-compact h3,
.req-trade-rules-compact p,
.req-trade-rules-compact ul,
.req-trade-rules-compact li {
  margin-top: 0 !important;
}

.req-trade-rules-compact ul {
  margin-bottom: 0 !important;
  padding-left: 18px !important;
}

.req-trade-rules-compact li {
  margin: 3px 0 !important;
}

.req-trade-rules-compact .req-trade-rules-fee-line,
.req-trade-rules-compact [class*="fee"],
.req-trade-rules-compact [class*="payment"] {
  margin-bottom: 2px !important;
}

@media (max-width: 900px) {
  .req-trade-rules-compact {
    grid-template-columns: 1fr !important;
  }
  .req-trade-rules-compact-right {
    border-left: 0 !important;
    border-top: 1px solid rgba(178, 117, 45, 0.45) !important;
    padding-left: 0 !important;
    padding-top: 12px !important;
  }
}