/* ── Trade · Activity · Settings · Emergency stop ─────────────────────────
   Melanjutkan arah Swiss-console di app.css: token yang sama, angka tabular,
   warna hanya untuk makna. Beli/jual selalu berlabel teks (BUY/SELL), warna
   hanya penguat. */
:root {
  --c-buy: #1d6b3a;
  --c-buy-bg: #e3f2e7;
  --c-sell: #a3231b;
  --c-sell-bg: #fbe7e4;
  --c-stop: #b0140c;
  --c-stop-ink: #ffffff;
}

/* angka & label sisi */
.nowrap { white-space: nowrap; }
.block { display: block; }
.spacer { flex: 1; }
.num-input { width: 100%; min-width: 7ch; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.side {
  display: inline-block; min-width: 4.2ch; text-align: center;
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em;
  padding: 0 var(--sp-1); border-radius: var(--radius); border-left: 3px solid currentColor;
}
.side-buy { color: var(--c-buy); background: var(--c-buy-bg); }
.side-sell { color: var(--c-sell); background: var(--c-sell-bg); }
.side-select { font-weight: 700; border-left-width: 4px; }
.side-select[data-side="buy"] { border-left-color: var(--c-buy); color: var(--c-buy); }
.side-select[data-side="sell"] { border-left-color: var(--c-sell); color: var(--c-sell); }
.tag-warn { color: var(--c-warn); background: var(--c-warn-bg); border-color: transparent; }
.grid-dense th, .grid-dense td { padding: 2px var(--sp-2); }
.table-scroll { overflow-x: auto; }
.stat-value-sm { font-size: 16px; padding-top: var(--sp-1); }

/* trade: tiket kiri, buku kanan */
.trade-guards { margin-bottom: var(--sp-2); }
.trade-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--sp-4); align-items: start; }
.trade-grid .panel { margin-top: var(--sp-3); }
.trade-market { margin-bottom: var(--sp-3); }
.ticket-rows td { vertical-align: middle; }
.ticket-rows td:first-child { width: 2.5ch; }
.ticket-actions { align-items: center; margin-top: var(--sp-3); }
.btn-icon { min-width: 32px; padding: 0; font-size: 18px; line-height: 1; }
.book-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.book-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); margin: 0 0 var(--sp-3); }
.book-top div { background: var(--c-surface); padding: var(--sp-1) var(--sp-2); }
.book-top dt { font-size: var(--fs-small); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.book-top dd { margin: 0; text-align: left; font-family: var(--font-mono); }
.ladder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ladder caption { text-align: left; font-size: var(--fs-small); font-weight: 700; padding-bottom: var(--sp-1); }
.ladder-side:first-child caption { color: var(--c-buy); }
.ladder-side:last-child caption { color: var(--c-sell); }
.ladder-price {
  font: inherit; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  background: none; border: 0; padding: 0 var(--sp-1); cursor: pointer; border-radius: 2px;
  transition: background var(--dur);
}
.ladder-buy { color: var(--c-buy); }
.ladder-sell { color: var(--c-sell); }
.ladder-price:hover { background: var(--c-bg); text-decoration: underline; }
.ladder-price:active { background: var(--c-border); }

/* preview & konfirmasi */
.trade-preview { border-top: 4px solid var(--c-accent); }
.trade-preview.is-blocked { border-top-color: var(--c-error); }
.trade-preview tr.is-blocked td { background: var(--c-error-bg); }
.pv-totals { margin: var(--sp-3) 0; }
.pv-reasons { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.btn-confirm {
  background: var(--c-text); color: #fff; min-height: 40px; padding: 0 var(--sp-4); font-weight: 700;
}
.btn-confirm:not(:disabled):hover { background: var(--c-accent); filter: none; }
.trade-result { border-top: 4px solid var(--c-text); }
.fill-yes { font-family: var(--font-mono); font-weight: 700; color: var(--c-buy); }

/* activity */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.filter-actions { display: flex; gap: var(--sp-2); }
.filter-actions a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.activity-block { margin-bottom: var(--sp-5); }
.pager { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.pager a.btn { display: inline-flex; align-items: center; text-decoration: none; }

/* settings */
.settings-panel h2 { margin-bottom: var(--sp-1); }
.settings-panel .hint { margin-top: 0; }
.settings-readonly { background: var(--c-bg); border-style: dashed; }

/* emergency stop: sengaja beda bentuk, butuh dua langkah (buka + ketik STOP) */
.estop { position: relative; }
.estop-trigger {
  list-style: none; cursor: pointer; user-select: none;
  padding: 2px var(--sp-3); border: 2px solid var(--c-stop); border-radius: var(--radius);
  color: #ffb4ae; font-weight: 700; font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase;
  transition: background var(--dur), color var(--dur);
}
.estop-trigger::-webkit-details-marker { display: none; }
.estop-trigger:hover, .estop[open] .estop-trigger { background: var(--c-stop); color: var(--c-stop-ink); }
.estop-panel {
  position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 20;
  width: min(380px, calc(100vw - 2 * var(--sp-4)));
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border); border-top: 6px solid var(--c-stop); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.estop-title { margin: 0 0 var(--sp-1); font-weight: 700; color: var(--c-stop); }
.estop-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }
.estop-row input { flex: 1; font-family: var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; }
.estop .btn-danger { background: var(--c-stop); font-weight: 700; }
.estop-results { list-style: none; padding: 0; margin: var(--sp-2) 0 0; max-height: 240px; overflow-y: auto; }
.estop-results li { padding: 2px 0; border-bottom: 1px solid var(--c-border); }

@media (max-width: 1100px) {
  .trade-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ladder { grid-template-columns: 1fr; }
  .book-top { grid-template-columns: repeat(2, 1fr); }
  .ticket-rows th:nth-child(5), .ticket-rows td:nth-child(5) { display: none; }
  .estop-panel { position: fixed; left: var(--sp-2); right: var(--sp-2); top: 56px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ladder-price, .estop-trigger { transition: none; }
}