/* ==========================================================================
   Aim IT — Product interface mockups

   These are real HTML and CSS, not screenshots. That keeps them sharp on
   every screen, lets the labels translate with the rest of the site, and
   costs almost nothing to load.

   Rule for every mockup on this site: sample data only. No real customer
   information, no live market prices, and a visible label saying so.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DASHBOARD SHELL
   -------------------------------------------------------------------------- */

.mock__body.mock-app {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  padding: 0;
}

.mock-app__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-3);
  border-inline-end: 1px solid var(--border);
  background-color: var(--surface-2);
  color: var(--text);
}

.mock-app__nav span {
  padding: 0.4rem 0.55rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

.mock-app__nav .is-active {
  background-color: var(--eco-soft);
  color: var(--eco-ink);
  font-weight: var(--weight-semibold);
}

.mock-app__main {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  min-inline-size: 0;
}

@media (width < 34rem) {
  .mock__body.mock-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .mock-app__nav {
    flex-direction: row;
    overflow-x: auto;
    border-inline-end: 0;
    border-block-end: 1px solid var(--border);
  }
}

/* --------------------------------------------------------------------------
   2. KPI TILES
   -------------------------------------------------------------------------- */

.mock-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
}

.mock-kpis--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (width < 30rem) {
  .mock-kpis,
  .mock-kpis--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mock-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background-color: var(--surface);
  color: var(--text);
}

.mock-kpi span {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--text-muted);
}

.mock-kpi strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   3. PANELS, BARS AND LISTS
   -------------------------------------------------------------------------- */

.mock-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background-color: var(--surface);
  color: var(--text);
  padding: var(--s-3);
}

.mock-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  margin-block-end: var(--s-3);
}

.mock-tag {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.mock-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  block-size: 4.5rem;
}

.mock-bars i {
  flex: 1 1 0;
  block-size: var(--h, 50%);
  border-radius: 2px 2px 0 0;
  background-color: var(--eco);
  opacity: 0.75;
}

.mock-bars i:last-child {
  opacity: 1;
}

.mock-list {
  display: grid;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.mock-list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   4. TABLES AND STATUS PILLS
   -------------------------------------------------------------------------- */

.mock-table {
  inline-size: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: var(--fs-tiny);
  background-color: var(--surface);
  color: var(--text);
}

.mock-table--flush {
  border: 0;
  border-block-start: 1px solid var(--border);
  border-radius: 0;
}

.mock-table th {
  padding: 0.5rem 0.7rem;
  background-color: var(--surface-2);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  font-size: 0.6875rem;
  border-block-end: 1px solid var(--border);
}

.mock-table td {
  padding: 0.5rem 0.7rem;
  color: var(--text);
  border-block-end: 1px solid var(--border);
}

.mock-table tbody tr:last-child td {
  border-block-end: 0;
}

.pill {
  display: inline-block;
  padding: 0.08rem 0.45rem;
  border-radius: var(--r-xs);
  font-size: 0.625rem;
  font-weight: var(--weight-medium);

  /* Pills hold short status words. Translated they can double in length, so
     they wrap rather than stretch the mockup they sit in. */
  white-space: normal;
}

.pill--ok {
  background-color: var(--success-soft);
  color: var(--success);
}

.pill--warn {
  background-color: var(--warning-soft);
  color: var(--warning);
}

.pill--off {
  background-color: var(--surface-2);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. sTRADER TERMINAL

   A trading terminal is dark by nature, so this block carries its own dark
   token values. That way it looks correct on a light page, on a dark page
   and in dark mode, without a second copy of the markup.
   -------------------------------------------------------------------------- */

.mock--terminal {
  --surface: #0b1a2e;
  --surface-2: #122642;
  --text: #e6edf9;
  --text-strong: #ffffff;
  --text-muted: #91a3c0;
  --border: rgba(255, 255, 255, 0.12);
  --success: #3fbd80;
  --success-soft: rgba(63, 189, 128, 0.16);
  --warning: #e0a45e;
  --warning-soft: rgba(224, 164, 94, 0.16);
  --danger: #ef7b70;
  --eco: #c99a3c;
  --eco-soft: rgba(201, 154, 60, 0.18);
  --eco-ink: #e3c383;

  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.mock--terminal .mock__chrome {
  background-color: var(--surface-2);
  color: var(--text);
  border-block-end-color: var(--border);
}

.mock__body.mock-terminal {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr) minmax(0, 0.9fr);
  gap: 1px;
  padding: 0;
  background-color: var(--border);
}

.mock-terminal > * {
  padding: var(--s-3);
  background-color: var(--surface);
  color: var(--text);
  min-inline-size: 0;
}

@media (width < 52rem) {
  .mock__body.mock-terminal {
    grid-template-columns: minmax(0, 1fr);
  }

  .mock-terminal__watchlist {
    order: 2;
  }

  .mock-terminal__chart {
    order: 1;
  }

  .mock-terminal__ticket {
    order: 3;
  }
}

/* Market watch ------------------------------------------------------------ */

.mock-quotes {
  display: grid;
  gap: 1px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mock-quotes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0.4rem 0.35rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-tiny);
  color: var(--text);
}

.mock-quotes li:nth-child(odd) {
  background-color: var(--surface-2);
  color: var(--text);
}

.mock-quotes .up {
  color: var(--success);
}

.mock-quotes .down {
  color: var(--danger);
}

/* Chart ------------------------------------------------------------------- */

.mock-timeframes {
  display: flex;
  gap: 0.15rem;
}

.mock-timeframes i {
  font-style: normal;
  padding: 0.1rem 0.35rem;
  border-radius: var(--r-xs);
  font-size: 0.625rem;
  color: var(--text-muted);
}

.mock-timeframes .is-active {
  background-color: var(--surface-2);
  color: var(--text-strong);
}

.mock-candles {
  inline-size: 100%;
  block-size: auto;
  margin-block: var(--s-2) var(--s-3);
}

.mock-candles .grid path {
  stroke: var(--border);
  stroke-width: 1;
  fill: none;
}

.mock-candles .candle path {
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.mock-candles .candle rect {
  fill: currentColor;
}

.mock-candles .candle.up {
  color: var(--success);
}

.mock-candles .candle.down {
  color: var(--danger);
}

/* Order ticket ------------------------------------------------------------ */

.mock-ticket {
  display: grid;
  gap: var(--s-2);
}

.mock-ticket label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.625rem;
  color: var(--text-muted);
}

.mock-field {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background-color: var(--surface-2);
  color: var(--text-strong);
  font-size: var(--fs-tiny);
}

.mock-ticket__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-block-start: var(--s-2);
}

.mock-btn {
  padding: 0.5rem 0.35rem;
  border-radius: var(--r-xs);
  text-align: center;
  font-size: var(--fs-tiny);
  font-weight: var(--weight-semibold);
}

.mock-btn--buy {
  background-color: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success);
}

.mock-btn--sell {
  background-color: rgba(239, 123, 112, 0.16);
  color: var(--danger);
  border: 1px solid var(--danger);
}

/* The sample bar chart's heights live here rather than in a style attribute
   on each bar, so the Content-Security-Policy can stay strict and forbid
   inline styles entirely. These are fixed sample values, not real data. */
.mock-bars i:nth-child(1) { --h: 46%; }
.mock-bars i:nth-child(2) { --h: 58%; }
.mock-bars i:nth-child(3) { --h: 52%; }
.mock-bars i:nth-child(4) { --h: 71%; }
.mock-bars i:nth-child(5) { --h: 64%; }
.mock-bars i:nth-child(6) { --h: 88%; }
.mock-bars i:nth-child(7) { --h: 79%; }


/* --------------------------------------------------------------------------
   6. SMALL SCREENS
   A product mockup is a picture of an interface, so its type is smaller than
   the page around it. On a phone that has to stop somewhere: nothing inside
   a mockup goes below 12px, and the densest parts get more room.
   -------------------------------------------------------------------------- */

@media (width < 48rem) {
  .mock-kpi span,
  .mock-table th,
  .mock-table td,
  .mock-app__nav span,
  .mock-panel__head,
  .mock-list li,
  .mock-quotes li,
  .mock-ticket label,
  .mock-btn,
  .mock-field {
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .pill,
  .mock-tag,
  .mock-timeframes i {
    font-size: 0.6875rem;
  }

  .mock-kpi strong {
    font-size: 1.05rem;
  }

  .mock-table th,
  .mock-table td {
    padding: 0.55rem 0.6rem;
  }

  /* Four figures across a phone leaves no room for their labels. */
  .mock-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mock__body.mock-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .mock-app__nav {
    flex-direction: row;
    overflow-x: auto;
    border-inline-end: 0;
    border-block-end: 1px solid var(--border);
  }
}