/* journal.css - trade journal, risk lock and multi-account UI.
   Reuses the platform's existing card/grid vocabulary so the new tabs look
   native rather than bolted on. */

/* ── stat tiles ───────────────────────────────────────────────────────────
   .idx-grid is used by the dashboard markup but was never actually defined as
   a grid in any stylesheet, so the tiles stacked one per row. Defining it here
   fixes the new tabs and the existing dashboard alike. */
.idx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.idx-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.idx-card .idx-name {
  font-size: .74rem; color: var(--text-muted); margin-bottom: 6px;
}
.idx-card .idx-val {
  font-size: 1.22rem; font-weight: 700;
  direction: ltr; text-align: right;
  font-variant-numeric: tabular-nums;
}
.idx-card .idx-val.pos { color: #06d6a0; }
.idx-card .idx-val.neg { color: #ef4444; }

/* ── shared form grid ─────────────────────────────────────────────────── */
.jr-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.jr-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .82rem; color: var(--text-secondary);
}
.jr-hint {
  margin-top: 10px; font-size: .78rem; color: var(--text-muted); line-height: 1.9;
}
.jr-note {
  grid-column: 1 / -1;
  margin-top: 10px; padding: 10px 14px;
  border-right: 3px solid var(--gold);
  background: rgba(232, 169, 32, .06);
  border-radius: 8px;
  font-size: .78rem; color: var(--text-secondary); line-height: 1.9;
}
.jr-empty {
  padding: 28px; text-align: center;
  color: var(--text-muted); font-size: .88rem;
}

/* ── trade rows ───────────────────────────────────────────────────────── */
.jr-list { display: flex; flex-direction: column; }
.jr-row {
  display: grid;
  grid-template-columns: 150px 1fr 120px auto;
  align-items: center; gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--border);
}
.jr-row:last-child { border-bottom: 0; }

.jr-sym { display: flex; align-items: center; gap: 8px; }
.jr-sym b { direction: ltr; font-variant-numeric: tabular-nums; }
.jr-side {
  font-size: .7rem; padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.jr-side.buy  { color: #06d6a0; border-color: rgba(6, 214, 160, .3); background: rgba(6, 214, 160, .08); }
.jr-side.sell { color: #ef4444; border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .08); }

.jr-meta {
  font-size: .78rem; color: var(--text-muted);
  direction: ltr; text-align: right; unicode-bidi: plaintext;
}
.jr-meta i { color: var(--gold); font-style: normal; }

.jr-pnl {
  font-weight: 700; text-align: left;
  direction: ltr; font-variant-numeric: tabular-nums;
}
.jr-pnl.pos { color: #06d6a0; }
.jr-pnl.neg { color: #ef4444; }
/* The tilde marks a PnL the server derived rather than took from the broker.
   Small, but it has to be visible - the difference is fees and swap. */
.jr-pnl .est {
  margin-inline-start: 4px; font-size: .8em; opacity: .75; cursor: help;
}

.jr-act { display: flex; gap: 6px; justify-content: flex-end; }

@media (max-width: 760px) {
  .jr-row { grid-template-columns: 1fr auto; grid-template-areas: "sym pnl" "meta meta" "act act"; }
  .jr-sym { grid-area: sym; } .jr-meta { grid-area: meta; }
  .jr-pnl { grid-area: pnl; } .jr-act { grid-area: act; justify-content: flex-start; }
}

/* ── accounts ─────────────────────────────────────────────────────────── */
.acct-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 14px;
}
.acct-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.acct-head h3 { font-size: 1.02rem; }
.acct-sub { font-size: .78rem; color: var(--text-muted); }
.acct-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px;
}
.acct-grid > div { display: flex; flex-direction: column; gap: 3px; }
.acct-grid span { font-size: .72rem; color: var(--text-muted); }
.acct-grid b {
  font-size: 1.02rem; direction: ltr; text-align: right;
  font-variant-numeric: tabular-nums;
}
.acct-grid b.pos { color: #06d6a0; }
.acct-grid b.neg { color: #ef4444; }

/* ── risk panel ───────────────────────────────────────────────────────── */
.rk-ok, .rk-lock {
  padding: 16px 20px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); line-height: 2;
}
.rk-ok {
  background: rgba(6, 214, 160, .06);
  border-color: rgba(6, 214, 160, .25); color: #06d6a0;
}
.rk-lock {
  background: rgba(239, 68, 68, .07);
  border-color: rgba(239, 68, 68, .3); color: #fca5a5;
}
.rk-lock b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.rk-until { font-size: .82rem; opacity: .85; margin-bottom: 10px; direction: ltr; text-align: right; }
/* The warning is the whole point of a manual override existing at all. */
.rk-warn { margin-top: 10px; font-size: .76rem; color: var(--text-muted); }

.rk-bar-wrap { margin-bottom: 14px; }
.rk-bar-label { font-size: .78rem; color: var(--text-secondary); margin-bottom: 6px; }
.rk-bar {
  height: 8px; border-radius: var(--radius-pill);
  background: rgba(148, 163, 184, .12); overflow: hidden;
}
.rk-bar > i {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #06d6a0, #e8a920 65%, #ef4444);
  transition: width .4s ease;
}