/* ============================================
   TRADE / MARKETPLACE PAGE
   ============================================ */

/* Page-local overrides so secondary text isn't washed out. The site's
   global --text-muted (#555) is too dim for the data-dense table here;
   matching odin.fun's contrast with a brighter mid-gray. Only color
   and font-size are touched on these rules. */
:root .trade-page {
  --t-secondary: #a3a3a3;   /* readable sub-text on dark bg */
  --t-tertiary:  #cbcbcb;   /* slightly brighter for chips/labels */
}

/* Sticky-footer layout: when a page is short (Mint with only ZERO
   listed, or an empty Holdings view) the footer used to float up
   leaving a giant black band beneath it. Now the body is a flex
   column pinned to viewport height, the main grows to fill, and the
   footer sits at the bottom no matter how little content's above. */
.trade-page {
  padding-top: 70px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.trade-main {
  flex: 1 0 auto;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  /* Top padding tuned to match .section's 120px on the Deploy page
     so navigating Deploy ↔ Mint ↔ Trade ↔ Buy doesn't visually
     jump the page contents up or down. */
  padding: 120px 24px 80px;
}

.trade-page > .footer {
  flex-shrink: 0;
}

/* (.nav-links a.active moved to styles.css so it applies on every
   page, including Deploy which doesn't load trade.css.) */

/* ----- TOOLBAR ----- */
.market-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar-left {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.t-chip {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t-tertiary);
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}

.t-chip:hover { color: var(--text); border-color: var(--text-dim); }

.t-chip-active {
  background: var(--text);
  color: #000;
  border-color: var(--text);
}

.toolbar-right {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.quick-buy {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 12px;
}

/* Slimmer + no lift/white-glow for the toolbar CTA. The hero CTAs keep
   the default chunky styling — this is just a compact in-toolbar look. */
.toolbar-cta.btn {
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.toolbar-cta.btn-primary:hover {
  background: var(--accent-dim);
  transform: none;
}

.qb-icon {
  color: var(--accent);
  font-size: 14px;
}

.qb-label {
  letter-spacing: 0.08em;
  color: var(--t-secondary);
  font-size: 12px;
}

.quick-buy input {
  width: 80px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  text-align: right;
  outline: none;
}

.quick-buy input::-webkit-outer-spin-button,
.quick-buy input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qb-unit {
  color: var(--t-secondary);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  min-width: 260px;
}

.search-icon {
  color: var(--t-secondary);
  font-size: 14px;
}

.search-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
}

.search-wrap input::placeholder {
  color: var(--t-secondary);
}

/* ----- BIG TABLE ----- */
.big-table-wrap {
  border: 1px solid var(--line);
  background: var(--bg);
  /* NOTE: do NOT set overflow-x here at desktop. Setting overflow-x to
     anything other than 'visible' implicitly bumps overflow-y to 'auto',
     which changes the sticky-positioning containing block for .big-head
     from the viewport to this wrapper. With top:70px on the head, it
     then renders 70px DOWN from the wrap's top edge — visually BELOW
     the first data row, which looks like the table is upside-down.
     Mobile breakpoint below applies overflow-x only at narrow widths
     where we actually need it. */
}

.big-table {
  width: 100%;
}

.big-head,
.big-row {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.6fr)   /* token */
    70px                   /* age */
    minmax(100px, 1fr)     /* price (per token) */
    minmax(110px, 1fr)     /* mkt cap */
    minmax(90px, 1fr)      /* holders */
    70px                   /* 24h */
    minmax(100px, 1fr)     /* 24h vol */
    minmax(100px, 1fr)     /* volume */
    minmax(130px, 1.1fr)   /* minted progress */
    145px;                 /* action — wide enough for "Trade <ticker> →" without wrapping */
  gap: 12px;
  padding: 14px 20px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
}

/* Extra breathing room before the trade button — without it, the
   minted progress bar in the previous column sits right up against
   the Trade button. Targets the last cell of each .big-row (incl. the
   responsive shrunk grids further down). */
.big-row > div:last-child {
  padding-left: 14px;
}

.big-head {
  border-bottom: 1px solid var(--line);
  color: var(--t-secondary);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: sticky;
  top: 70px;
  background: var(--bg);
  z-index: 5;
}

.big-row {
  border-bottom: 1px solid var(--line);
  transition: background 0.12s ease;
  cursor: pointer;
}

.big-row:last-child { border-bottom: none; }
.big-row:hover { background: var(--bg-elev); }

.token-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.token-icon {
  width: 32px;
  height: 32px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

.token-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.token-ticker {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.token-addr {
  font-size: 11px;
  color: var(--t-secondary);
  letter-spacing: 0.04em;
}

.dual-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dual-line .primary { color: var(--text); }
.dual-line .secondary { color: var(--t-secondary); font-size: 11px; }

.change-pos { color: var(--green); }
.change-neg { color: var(--red); }
.change-flat { color: var(--t-secondary); }

.minted-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.minted-bar-track {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.minted-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
}

.minted-bar-fill.done { background: var(--green); }

.minted-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--t-secondary);
}

.row-action {
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: all 0.12s ease;
  width: 100%;
  /* Single-line; the column is sized to fit "Trade <TICKER> →" cleanly.
     If a future ticker is unusually long the text would overflow rather
     than wrap awkwardly — easier to spot + fix later. */
  white-space: nowrap;
  cursor: pointer;
}

.row-action:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* Default trade button: visible gold-on-dark rather than the previous
   faint gold-on-gold which washed out against the row background. */
.row-action.row-action-buy {
  background: rgba(244, 183, 40, 0.12);
  border-color: rgba(244, 183, 40, 0.6);
  color: var(--accent);
  font-weight: 500;
}

.row-action.row-action-buy:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.table-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t-secondary);
}

.legend {
  display: flex;
  gap: 18px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.legend-dot.live { background: var(--accent); }
.legend-dot.done { background: var(--green); }

/* ----- DEDICATED MINT PAGE GRID ----- */
.mint-page-grid-wrap {
  margin-top: 8px;
}

.mint-grid-page .mint-card {
  background: var(--bg);
}

/* ----- RESPONSIVE ----- */
@media (max-width: 1300px) {
  .big-head,
  .big-row {
    grid-template-columns:
      minmax(200px, 1.5fr)    /* token */
      minmax(95px, 1fr)       /* price */
      minmax(100px, 1fr)      /* mkt cap */
      minmax(80px, 1fr)       /* holders */
      70px                    /* 24h */
      minmax(100px, 1fr)      /* 24h vol */
      minmax(130px, 1fr)      /* minted */
      130px;                  /* action */
  }
  /* After dropping 1H/6H the full column list is:
     1:TOKEN 2:AGE 3:PRICE 4:MKT CAP 5:HOLDERS 6:24H 7:24H VOL 8:VOLUME 9:MINTED 10:ACTION
     Hide AGE(2) and VOLUME(8). */
  .big-head > div:nth-child(2),
  .big-head > div:nth-child(8),
  .big-row > div:nth-child(2),
  .big-row > div:nth-child(8) {
    display: none;
  }
}

@media (max-width: 980px) {
  .trade-main { padding: 24px 16px 60px; }
  .market-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-right { flex-direction: column; align-items: stretch; }
  .search-wrap { min-width: 0; }
  .big-head,
  .big-row {
    grid-template-columns:
      minmax(150px, 1.4fr)   /* token */
      minmax(90px, 1fr)      /* price */
      minmax(85px, 1fr)      /* mkt cap */
      70px                   /* 24h change */
      minmax(110px, 1fr)     /* minted */
      120px;                 /* action */
    font-size: 11px;
  }
  /* After dropping 1H/6H: 1:TOKEN 2:AGE 3:PRICE 4:MKT CAP 5:HOLDERS
     6:24H 7:24H VOL 8:VOLUME 9:MINTED 10:ACTION.
     Hide AGE(2), HOLDERS(5), 24H VOL(7), VOLUME(8). Keep PRICE(3),
     MKT CAP(4), 24H(6), MINTED(9), ACTION(10). */
  .big-head > div:nth-child(2),
  .big-head > div:nth-child(5),
  .big-head > div:nth-child(7),
  .big-head > div:nth-child(8),
  .big-row > div:nth-child(2),
  .big-row > div:nth-child(5),
  .big-row > div:nth-child(7),
  .big-row > div:nth-child(8) {
    display: none;
  }
}

/* Phone: collapse the tablet view further to "token / volume / action".
   Drops MKT CAP, 6H, MINTED so the row fits cleanly on a 360-420px phone
   without horizontal scroll. Font bumped to 12px (readability floor).
   Tablet rules above already hide 2,4,5,7,8 — these 3 are the rest. */
@media (max-width: 520px) {
  .trade-main { padding: 16px 12px 60px; }
  .market-toolbar { gap: 10px; }
  /* Mobile only: allow horizontal swipe on the table wrap as a fallback
     in case any column ends up wider than the phone viewport. Sticky
     head also stops being useful on a phone (limited vertical scroll),
     so dropping it removes the sticky-vs-overflow conflict that breaks
     desktop. */
  .big-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .big-head { position: static; }
  .big-head,
  .big-row {
    grid-template-columns:
      minmax(110px, 1.6fr)   /* token */
      minmax(80px, 1fr)      /* price */
      96px;                  /* action button */
    font-size: 12px;
    padding: 12px 10px;
    gap: 8px;
  }
  /* After dropping 1H/6H: 1:TOKEN 2:AGE 3:PRICE 4:MKT CAP 5:HOLDERS
     6:24H 7:24H VOL 8:VOLUME 9:MINTED 10:ACTION.
     On top of 980px hides (which already drops 2,5,7,8), also drop
     MKT CAP(4), 24H(6), MINTED(9) so phone shows just TOKEN(1),
     PRICE(3), ACTION(10). */
  .big-head > div:nth-child(4),
  .big-head > div:nth-child(6),
  .big-head > div:nth-child(9),
  .big-row > div:nth-child(4),
  .big-row > div:nth-child(6),
  .big-row > div:nth-child(9) {
    display: none;
  }
  .big-row .trade-btn { font-size: 11px; padding: 8px 6px; }
}