/* Bootstrap carries the layout, spacing and components. This file only adds
   what a trading page needs on top: figures that do not jitter, and the one
   colour pair that means something here.

   Bootstrap is self-hosted rather than pulled from a CDN, so the page has no
   third-party dependency at load time and works from a single origin.

   It also pays forward: the /admin panel will need modals to confirm actions
   like closing a position, and those should be a tested component rather than
   something hand-rolled at the point where real money is involved. */

/* Every number on the page: fixed-width digits so columns stay aligned and
   values do not shift as they refresh every three seconds. */
.stat, .font-mono, table td, table th, #clock {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.stat {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.25;
  margin: .15rem 0 .1rem;
}

.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bs-secondary-color);
  transition: background-color .3s, box-shadow .3s;
}
.status-dot.on  { background: var(--bs-success); box-shadow: 0 0 0 3px rgba(25,135,84,.2); }
.status-dot.off { background: var(--bs-danger);  box-shadow: 0 0 0 3px rgba(220,53,69,.2); }

/* Profit and loss are the only things colour is used for. */
.up   { color: var(--bs-success); }
.down { color: var(--bs-danger); }

.empty {
  text-align: center;
  padding: 1.6rem;
  color: var(--bs-secondary-color);
}

table th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

/* Table sits flush inside the card, so drop the outer rounding it would
   otherwise fight with. */
.card > .table-responsive > .table { --bs-table-bg: transparent; }
.card-header { background: transparent; }