/*
 * Trading table emphasis (current, pushtrade and historical tables).
 *
 * The PHP renderer (inc/print-tables/cell-renderer.php) marks cells with semantic classes; these rules style them.
 * No rule here depends on column position, column count or table id, so adding/removing columns never breaks styling.
 *
 *   td.is-key                 highlighted metric column (bold + pill background)
 *   td.is-positive/.is-negative sign of the value, colours the pill when combined with .is-key
 *   td.is-key--green/--red    fixed colour variants (take-profit / stop-loss levels)
 *   td.is-changed             value changed since the previous update (FX table)
 *   td.is-zero                zero value; the renderer omits is-key on it, so it stays a plain cell by design
 */

.trading-table td.is-key,
.trading-table td.is-changed {
    font-weight: 700;
    position: relative;
    z-index: 1; /* own stacking context so the ::after pill stays above the row background */
}

.trading-table td.is-key::after,
.trading-table td.is-changed::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 25px;
    margin-top: -13px;
    margin-left: -40px;
    border-radius: var(--border-radius-md);
    z-index: -1;
}

/* Signed metrics: green for gains, red for losses */
.trading-table td.is-key.is-positive,
.trading-table td.is-key.is-key--green {
    color: var(--rivkin-green);
}
.trading-table td.is-key.is-positive::after,
.trading-table td.is-key.is-key--green::after {
    background: var(--rivkin-green-bg);
}

.trading-table td.is-key.is-negative {
    color: var(--rivkin-red-light);
}
.trading-table td.is-key.is-negative::after {
    background: var(--rivkin-red-bg);
}

/* Fixed colours are declared after the signed rules and share their specificity, so they win on the same cell.
   Fixed red (stop-loss levels) uses the brand red, as the previous pushtrade tables did */
.trading-table td.is-key.is-key--red {
    color: var(--rivkin-red);
}
.trading-table td.is-key.is-key--red::after {
    background: var(--rivkin-red-bg);
}

/* Values that changed since the previous update (FX table) */
.trading-table td.is-changed {
    color: var(--rivkin-blue);
}
.trading-table td.is-changed::after {
    background: #d9ebff;
}

@media screen and (max-width: 767px) {
    .trading-table td.is-key::after,
    .trading-table td.is-changed::after {
        width: 66px;
        margin-left: -33px;
    }
}