/*
 * Legacy coin tables on /coins/gainers-losers/ and /coins/categories/.
 * Aligns them with the shared coinschart2 table using semantic tokens only,
 * so light and dark themes share one rule set.
 */

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) {
    background: var(--arz-color-surface);
    color: var(--arz-color-text);
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) thead {
    background: var(--arz-color-surface-subtle);
    color: var(--arz-color-text-muted);
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) th {
    color: var(--arz-color-text-muted);
    font-weight: 400;
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) .arz-sort-span {
    color: inherit;
    font-weight: 400;
}

:is(#gainers-losers, #coin-categories-page) .arz-coin-table th {
    font-size: 14px;
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) :is(th, td) {
    border-bottom: 1px solid var(--arz-color-border);
    border-color: var(--arz-color-border);
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) tbody tr:last-child td {
    border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
    :is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) tbody tr:hover {
        background: var(--arz-color-surface-subtle);
    }
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) a {
    color: inherit;
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) :is(
    .arz-coin-table__number-td,
    .arz-coin-table__number-td-m,
    td[data-sort-name="rank"]
) {
    color: var(--arz-color-text-muted);
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) :is(
    .arz-coin-table__price-td,
    .arz-coin-table__price-td-m > .arz-cion-dollar-price-m
) {
    color: var(--arz-color-text);
    font-weight: 600;
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) :is(
    .arz-coin-table__price-td > span,
    .arz-coin-table__rial-price-td > span,
    .arz-coin-table__marketcap-td > span,
    .arz-coin-table__volume-td > span
) {
    color: inherit;
}

:is(#gainers-losers, #coin-categories-page) .arz-coin-table__price-td-m > .arz-cion-tomans-price-m {
    color: var(--arz-color-text-muted);
}

/* Price changes: colored text with a direction caret, as in the /coins/ table. */
:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) :is(
    .arz-coin-table__daily-swing-td,
    .arz-coin-table__daily-swing-td-m,
    .arz-coin-table__swing-td-m
) > span {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    color: var(--arz-color-text-muted);
    direction: ltr;
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    gap: 5px;
    height: auto;
    line-height: 1.4;
    min-width: 0;
    padding: 0;
    position: static;
    white-space: nowrap;
    z-index: auto;
}

:is(#gainers-losers, #coin-categories-page) .arz-coins-table-m :is(
    .arz-coin-table__daily-swing-td-m,
    .arz-coin-table__swing-td-m
) > span {
    font-size: 13px;
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) :is(
    .arz-coin-table__daily-swing-td,
    .arz-coin-table__daily-swing-td-m,
    .arz-coin-table__swing-td-m
) > span.arz-positive {
    color: var(--arz-color-positive-content);
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) :is(
    .arz-coin-table__daily-swing-td,
    .arz-coin-table__daily-swing-td-m,
    .arz-coin-table__swing-td-m
) > span.arz-negative {
    color: var(--arz-color-negative-content);
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) :is(
    .arz-coin-table__daily-swing-td,
    .arz-coin-table__daily-swing-td-m,
    .arz-coin-table__swing-td-m
) > span:is(.arz-positive, .arz-negative)::before {
    border-inline: 4px solid transparent;
    border-radius: 0;
    box-shadow: none !important;
    content: '';
    display: inline-block;
    flex: 0 0 auto;
    height: 0;
    position: static;
    width: 0;
    z-index: auto;
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) :is(
    .arz-coin-table__daily-swing-td,
    .arz-coin-table__daily-swing-td-m,
    .arz-coin-table__swing-td-m
) > span.arz-positive::before {
    border-bottom: 5px solid currentColor;
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) :is(
    .arz-coin-table__daily-swing-td,
    .arz-coin-table__daily-swing-td-m,
    .arz-coin-table__swing-td-m
) > span.arz-negative::before {
    border-top: 5px solid currentColor;
}

:is(#gainers-losers, #coin-categories-page) :is(.arz-coin-table, .arz-coins-table-m) .add-to-watchlist {
    stroke: var(--arz-color-text-muted);
}

/* Sticky first column shown while the desktop table scrolls horizontally. */
:is(#gainers-losers, #coin-categories-page) :is(.arz-scroll-box, .arz-table-responsive, .arz-scroll, .arz-scroll-content) {
    background-color: var(--arz-color-surface);
}

:is(#gainers-losers, #coin-categories-page) .arz-scroll-content {
    box-shadow: 0 -8px 0 var(--arz-color-surface), 1px 0 8px var(--arz-color-shadow);
}

:is(#gainers-losers, #coin-categories-page) .arz-scroll-box.arz-scroll-right .arz-scroll-content {
    box-shadow: 0 -8px 0 var(--arz-color-surface), -1px 0 8px var(--arz-color-shadow);
}