/*
 * trade-pills.css — P6.39
 *
 * Shared "trade plan" pill styling used across every surface that shows an
 * Entry / Stop / T1 / T1.5 / T2 ladder (or the position-calculator outcome
 * pills):
 *   - dashboard live alert cards   (public/assets/js/scanner-live.js)
 *   - drill-in position calculator (public/assets/js/position-calculator.js)
 *   - buy / confirm trade modal    (views/partials/tradeConfirmModal.ejs)
 *
 * Goal: readability. The old pills were flat gray with a small muted label
 * and a thin monospace value — hard to read at a glance while trading. These
 * give each pill a tinted background, a colored bottom accent, and a bold
 * uppercase colored label + large bold value so the numbers pop.
 *
 * Theme-aware by construction: colors come from the Phoenix theme's own
 * `--phoenix-*` subtle-background / text-emphasis / semantic tokens (each
 * defined for both light and dark), with the Bootstrap `--bs-*` names as a
 * fallback. The emphasis text tones are tuned for contrast on the matching
 * subtle background in either theme.
 */

.tp-pill {
  border-radius: 0.6rem;
  padding: 0.55rem 0.4rem;
  text-align: center;
  border-bottom: 3px solid transparent;
}

.tp-pill__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  line-height: 1.1;
  margin-bottom: 0.15rem;
}

.tp-pill__value {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
}

/* Optional subtext (position-calculator note: % move + R-multiple). Kept
   muted + subordinate so it doesn't compete with the value. */
.tp-pill__note {
  font-size: 0.68rem;
  line-height: 1.15;
  margin-top: 0.1rem;
  color: var(--phoenix-secondary-color, var(--bs-secondary-color));
}

/* Entry / Cost to enter — blue (primary). */
.tp-pill--entry {
  background-color: var(--phoenix-primary-bg-subtle, var(--bs-primary-bg-subtle));
  border-bottom-color: var(--phoenix-primary, var(--bs-primary));
}
.tp-pill--entry .tp-pill__label,
.tp-pill--entry .tp-pill__value {
  color: var(--phoenix-primary-text-emphasis, var(--bs-primary-text-emphasis));
}

/* Stop / If stop hits — red (danger). */
.tp-pill--stop {
  background-color: var(--phoenix-danger-bg-subtle, var(--bs-danger-bg-subtle));
  border-bottom-color: var(--phoenix-danger, var(--bs-danger));
}
.tp-pill--stop .tp-pill__label,
.tp-pill--stop .tp-pill__value {
  color: var(--phoenix-danger-text-emphasis, var(--bs-danger-text-emphasis));
}

/* Targets — T1 / T1.5 / T2 / If Tx hits — green (success). */
.tp-pill--target {
  background-color: var(--phoenix-success-bg-subtle, var(--bs-success-bg-subtle));
  border-bottom-color: var(--phoenix-success, var(--bs-success));
}
.tp-pill--target .tp-pill__label,
.tp-pill--target .tp-pill__value {
  color: var(--phoenix-success-text-emphasis, var(--bs-success-text-emphasis));
}