/* The price table.

   The legacy has two near-identical stylesheets for it and they do not agree:
   `assets/scss/tokens-table.scss` is what `/crypto-price/` ships and
   `assets/scss/trade-table.scss` is what `/crypto-buy/` ships. The base rules
   here are the price page's, and every place the buy page departs is carried by
   a `--trade` modifier — `.crypto-table--trade` on the card, set alongside the
   "معامله" column, and `.crypto-table-grid--trade` on the table itself. Our own
   departures from both are noted where they happen. */
/* The gap below the table is paid for by the section beneath it, which is where
   the legacy spends it — as `padding-top`, not as this table's margin. */
.crypto-table {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  background-color: var(--gray-0);
  overflow: hidden;
}

/* The one value the two legacy stylesheets differ on that is visible before a
   single row is read: `#currency_table` is inset 16px and `#tokens_table` 24px. */
.crypto-table--trade {
  padding: 24px;
}

/* --- Search and the four orderings --- */

/* `wrap-reverse` is what puts the search box above the buttons once they stop
   fitting on one line, which is the legacy's arrangement on a phone. */
/* Searching, ordering and "نمایش بیشتر" are all this section's island. Without
   it they cannot do anything, so they are not offered — the same call the
   landing page's download form makes. `html.js` is set by an inline script in
   head.hbs before anything paints, so they never flash. */
.crypto-table-toolbar,
.crypto-table-footer {
  display: none;
}

html.js .crypto-table-footer {
  display: block;
}

html.js .crypto-table-toolbar {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.crypto-table-search {
  position: relative;
  display: flex;
  width: 100%;
}

.crypto-table-search-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 16px;
  margin: auto;
  color: var(--gray-500);
}

.crypto-table-search-input {
  width: 100%;
  padding: 8px 56px 8px 8px;
  border: none;
  border-radius: 12px;
  background-color: var(--gray-100);
  color: var(--gray-900);
  font-size: 16px;
  /* The legacy clears the field's own styling with `all: unset`, which lands it
     on the page's line height; `font: inherit` in the global reset does not
     reach an input. */
  line-height: inherit;
}

.crypto-table-search-input::placeholder {
  color: var(--gray-400);
  font-size: 16px;
  font-weight: 400;
}

.crypto-table-sorts {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: auto;
}

.crypto-table-sort {
  min-width: max-content;
  min-height: 30px;
  padding: 8px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background-color: var(--white);
  color: var(--gray-700);
  font-size: 16px;
  font-weight: 400;
  /* `font: inherit` in the global reset carries the page's 1.6 line height into
     every button; the legacy leaves these at the browser's `normal`, which is
     what sizes them. Three boxes on this page need it back. */
  line-height: normal;
  transition: 0.3s all ease;
}

.crypto-table-sort[aria-pressed='true'] {
  border-color: var(--identity);
  background-color: var(--low-identity);
}

/* --- The table itself --- */

/* The table is wider than a phone. This is what scrolls, rather than the page. */
.crypto-table-scroll {
  width: 100%;
  overflow: auto;
}

/* `fixed` is the whole reason the columns hold still. Under the default `auto`
   layout every column is measured from the rows that are in the box tree at the
   time, so filtering to three coins re-measures the table and every column
   jumps — between an empty box, "btc" and "تتر" the widths swung by up to
   100px. Fixed layout reads the shares declared below and never measures a cell
   again, so searching, ordering and "نمایش بیشتر" all leave the grid alone.

   It also means the table can no longer grow to fit its contents, which is what
   used to make it wider than a phone. `min-width` restores that: below the
   desktop breakpoint the table keeps a width no phone can hold and the wrapper
   scrolls, exactly as before — just at a width that no longer depends on which
   rows are showing. */
.crypto-table-grid {
  width: 100%;
  min-width: 460px;
  margin-bottom: 16px;
  border-collapse: collapse;
  table-layout: fixed;
}

/* `/crypto-buy/` carries a fifth column, so it needs more room — and its own
   share-out, below. */
.crypto-table-grid--trade {
  min-width: 520px;
}

.crypto-table-head {
  display: none;
}

.crypto-table-grid tr {
  border-bottom: 1px solid var(--gray-100);
}

/* The legacy's header row has four cells for a five-column body — its header
   list has no entry for the "معامله" column — so with `border-collapse` the rule
   under the headings is painted over four cells and stops short of the trade
   buttons. Ours keeps the fifth cell, because a column whose header is missing
   reads as belonging to nothing, and because a fixed layout takes its column
   widths from this row. So the row carries no rule and each header cell draws
   its own instead, which stops the line in the same place. */
.crypto-table-grid .crypto-table-head {
  border-bottom: none;
}

.crypto-table-head th {
  border-bottom: 1px solid var(--gray-100);
}

.crypto-table-head .crypto-cell--action {
  border-bottom: none;
}

/* `:last-child` alone lands on the empty-result row rather than on the last
   asset, and so spends the reset on a row nobody sees: the legacy removes that
   row from the DOM whenever there are results, where ours is always present and
   is kept pinned last by the island. Both are cleared. */
.crypto-table-body tr:last-child,
.crypto-table-body tr:nth-last-child(2) {
  border-bottom: none;
}

/* Rows the current filter and page do not include. Set by the island. */
.crypto-row.is-hidden {
  display: none;
}

.crypto-table-grid th {
  padding: 10px;
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

.crypto-table-grid td {
  padding: 12px 8px;
  color: var(--gray-900);
  font-size: 12px;
  font-weight: 400;
  text-align: right;
}

.crypto-table-grid td.crypto-cell--price {
  padding: 16px 0;
}

/* --- Column widths --- */

/* Shares rather than pixels, so the columns keep their proportions as the
   container grows: it is 918px at the desktop breakpoint and 1318px on a wide
   screen. Every share here is within a few pixels of what `auto` layout gave
   the full, unfiltered table, so an untouched page looks as it always did —
   what changes is that filtering it no longer moves anything.

   Each was checked against the widest content that column holds across all 58
   assets, at the narrowest container its breakpoint allows, and clears it.
   The slack is weighted towards the figures rather than the names: a price can
   gain a digit overnight and has nowhere to go if it does, where a name is
   bounded by the asset list and ellipsises cleanly if it ever is not.

   Both variants are selected two classes deep on purpose. Specificity beats
   source order across a media query, so a single-class rule in the desktop
   block below would lose to the `--trade` rule here and the buy page would keep
   its phone shares on a desktop. */
.crypto-table-grid .crypto-cell--name {
  width: 47%;
}

.crypto-table-grid .crypto-cell--price {
  width: 31%;
}

.crypto-table-grid .crypto-cell--change {
  width: 22%;
}

.crypto-table-grid--trade .crypto-cell--name {
  width: 42%;
}

.crypto-table-grid--trade .crypto-cell--price {
  width: 26%;
}

.crypto-table-grid--trade .crypto-cell--change {
  width: 16.5%;
}

.crypto-table-grid--trade .crypto-cell--action {
  width: 15.5%;
}

/* The dollar column is dropped on a phone; its figure moves under the Toman
   one instead — see `.crypto-usd--stacked`. */
.crypto-cell--usd {
  display: none;
}

/* --- The coin --- */

/* One link covers the row. `position: relative` on the row is what gives the
   stretched pseudo-element something to fill, which is how the whole row stays
   clickable with a single link in it. */
.crypto-row {
  position: relative;
}

.crypto-coin {
  display: flex;
  align-items: center;
  gap: 5px;
}

.crypto-coin-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* `min-width: 0` is what lets this shrink. A flex item starts at `min-width:
   auto`, which refuses to go below its content, so without this the names push
   the flex line past the fixed column instead of ellipsising inside it.

   Clipping here does not clip the row's link overlay. That overlay is absolutely
   positioned against `.crypto-row`, and an `overflow` ancestor only clips an
   absolutely positioned box when it is in that box's containing-block chain —
   neither this nor the link is positioned, so the overlay still covers the row.
   Verified in the browser rather than assumed. */
.crypto-coin-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
  overflow: hidden;
  /* Inert to the eye — nothing follows it in the row — but it is part of the
     width the column has to be able to hold. */
  margin-left: 6px;
}

/* The gap between the two names belongs to `/crypto-buy/` alone: it comes from
   `trade-analyz.scss`'s `.box__name`, which `/crypto-price/` does not ship — there
   the names sit flush and every row is 4px shorter. Only the gap differs; the
   column stays a flex column on both, because our names are inline elements and
   the legacy's are `h3`s that stack on their own. */
.crypto-table-grid--trade .crypto-coin-names {
  gap: 4px;
}

/* The only unbounded text in the table: prices and percentages have a known
   number of digits, an asset name does not. With the columns pinned, a name
   longer than every one of today's 58 would otherwise paint over the price
   beside it, so it ellipsises instead. The figures deliberately do not — a
   truncated number is worse than one that overflows its column, because it
   still reads as a number. */
.crypto-coin-link,
.crypto-coin-en {
  overflow: hidden;
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crypto-coin-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* --- Prices --- */

/* A flex row, as the legacy has it, and not only for the 4px gap: a flex line
   does not break, so the column can never be squeezed narrow enough to wrap a
   price onto two lines. */
.crypto-price {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 400;
}

.crypto-price-unit {
  color: var(--gray-400);
}

.crypto-usd {
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 400;
}

/* `/crypto-price/`'s desktop rule raises the figure to 16/600 but not its unit,
   which stays where the shared rule put it. `/crypto-buy/`'s declares no weight
   for the unit at all, so there it inherits the figure's — see the `--trade`
   rule in the desktop block. */
.crypto-usd-unit {
  color: var(--gray-400);
  font-size: 14px;
  font-weight: 400;
}

.crypto-usd--stacked {
  display: block;
}

.crypto-cell--usd .crypto-usd {
  display: block;
}

/* --- 24-hour change --- */

/* Block-level, not `inline-flex`: the badge fills the cell and is then capped
   at 60px, which is what gives it the same width in every row instead of one
   that shrinks to whatever that row's percentage happens to be. */
.crypto-change {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  max-width: 60px;
  padding: 4px;
  border-radius: 8px;
  background-color: var(--profit-color);
  color: var(--success);
  font-size: 14px;
  font-weight: 400;
}

.crypto-change[data-direction='down'] {
  background-color: var(--loss-color);
  color: var(--danger);
}

.crypto-change-arrow {
  flex: none;
}

.crypto-change[data-direction='down'] .crypto-change-arrow {
  transform: rotate(180deg);
}

/* --- Trade --- */

/* Deliberately NOT positioned. The row's link covers the row with a stretched
   pseudo-element, and positioning this badge would paint it above that overlay —
   which is exactly what it did: the one part of the row that looks pressable
   swallowed the press and showed no pointer, because a span is not a control.
   Left static, the overlay covers it, so a click here opens the asset like a
   click anywhere else in the row and the cursor is the link's. */
.crypto-trade {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 8px;
  background-color: var(--identity);
  color: var(--black);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.crypto-table-empty td {
  padding: 1rem;
  font-size: 1rem;
}

/* --- Show more --- */

/* Against the right edge of the card, not centred: the legacy wraps the button
   in a bare `div` and nothing on the page gives it a `text-align`, so it lands
   on `start` — which is the right in an RTL document. */
.crypto-table-footer {
  text-align: right;
}

.crypto-table-more {
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  color: var(--black);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

@media (min-width: 1000px) {
  .crypto-table-search,
  .crypto-table-search-input {
    width: fit-content;
  }

  .crypto-table-head {
    display: table-row;
  }

  .crypto-cell--usd {
    display: table-cell;
  }

  .crypto-usd--stacked {
    display: none;
  }

  .crypto-coin-icon {
    width: 25px;
    height: 25px;
  }

  .crypto-coin-link,
  .crypto-coin-en {
    font-size: 16px;
    font-weight: 600;
  }

  .crypto-cell--usd .crypto-usd,
  .crypto-price-value {
    color: var(--gray-900);
    font-size: 16px;
    font-weight: 600;
  }

  /* Only `/crypto-price/` grows its Toman figure here. `/crypto-buy/` never
     styles the figure from its table stylesheet at all — it is `trade-analyz`'s
     unscoped `.rial__value .value p` that reaches it, at one size for every
     width — so the primary figure in all 58 rows stays 14/400 on a desktop. */
  .crypto-table-grid--trade .crypto-price-value {
    font-size: 14px;
    font-weight: 400;
  }

  /* The other half of the same disagreement: `/crypto-buy/` leaves the unit's
     weight undeclared, so "دلار" inherits the 600 the figure beside it just
     took, where `/crypto-price/` pins it back to 400. */
  .crypto-table-grid--trade .crypto-usd-unit {
    font-weight: 600;
  }

  /* The dollar column is back, and the names and figures have grown to 16/600,
     so the shares are redealt. Narrowest container here is 918px on
     `/crypto-price/` and 902px on `/crypto-buy/`. */
  .crypto-table-grid .crypto-cell--name {
    width: 31%;
  }

  .crypto-table-grid .crypto-cell--price {
    width: 25%;
  }

  .crypto-table-grid .crypto-cell--usd {
    width: 17%;
  }

  .crypto-table-grid .crypto-cell--change {
    width: 27%;
  }

  .crypto-table-grid--trade .crypto-cell--name {
    width: 30%;
  }

  .crypto-table-grid--trade .crypto-cell--price {
    width: 21%;
  }

  .crypto-table-grid--trade .crypto-cell--usd {
    width: 16%;
  }

  .crypto-table-grid--trade .crypto-cell--change {
    width: 21.5%;
  }

  .crypto-table-grid--trade .crypto-cell--action {
    width: 11.5%;
  }
}