/* Multi Paper Trading Dashboard — minimal dark theme */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
               "Noto Sans KR", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px; line-height: 1.4;
  background: #0e1116; color: #d8dee9;
}
button {
  font: inherit; cursor: pointer;
  background: #2c3340; color: #d8dee9;
  border: 1px solid #3b4252; border-radius: 4px;
  padding: 5px 10px;
}
button:hover { background: #3b4252; }
button.primary { background: #4a6fa5; border-color: #5e83b8; color: #fff; }
button.primary:hover { background: #5e83b8; }
button.danger  { background: #7c3a3a; border-color: #944848; color: #fff; }
button.danger:hover { background: #944848; }
button.close { background: transparent; border: none; font-size: 22px; padding: 0 8px; color: #88c0d0; }
button.link  { background: transparent; border: none; color: #88c0d0; text-decoration: underline; padding: 0; }
input, select {
  font: inherit;
  background: #1c2026; color: #d8dee9;
  border: 1px solid #3b4252; border-radius: 4px;
  padding: 5px 8px;
}

/* ─── 토스트 ───────────────────────────────────────────── */
.toast-stack {
  position: fixed; top: 60px; right: 16px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 200;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  max-width: 360px;
  word-break: break-all;
  background: #2c3340; color: #d8dee9;
  border-left: 3px solid #4a6fa5;
}
.toast-success { border-left-color: #6a994e; }
.toast-error   { border-left-color: #ff6b6b; background: #3a1a1a; }
.toast-info    { border-left-color: #88c0d0; }

button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── 헤더 ─────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  background: #161a21; border-bottom: 1px solid #2c3340;
}
.topbar .title { display: flex; align-items: center; gap: 12px; }
.topbar h1 { font-size: 16px; margin: 0; font-weight: 600; }
.ws-indicator {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: #444; color: #fff;
}
.ws-indicator.on  { background: #3b7a3b; }
.ws-indicator.off { background: #7c3a3a; }
.topbar .counts { display: flex; gap: 14px; font-size: 12px; color: #8794a6; }
.topbar .counts strong { color: #d8dee9; margin-left: 2px; }
.topbar .actions { margin-left: auto; display: flex; gap: 6px; }

/* ─── 툴바 ─────────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 18px;
  padding: 8px 16px;
  background: #11141a; border-bottom: 1px solid #2c3340;
  font-size: 12px;
}
.toolbar label { color: #8794a6; display: flex; align-items: center; gap: 6px; }
.toolbar .ts   { margin-left: auto; color: #6c7686; font-family: monospace; }

/* ─── runner 그리드 ──────────────────────────────────── */
.grid {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.empty { padding: 32px; text-align: center; color: #6c7686; grid-column: 1 / -1; }

.card {
  background: #1a1f27;
  border: 1px solid #2c3340;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.card:hover { background: #20262f; border-color: #4a6fa5; }
.card.status-running     { border-left: 3px solid #6a994e; }
.card.status-paused      { border-left: 3px solid #d4a82e; }
.card.status-stopped     { border-left: 3px solid #6c7686; opacity: 0.7; }
.card.status-reconnecting{ border-left: 3px solid #4a6fa5; }

.card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.card-head .id     { font-family: monospace; font-weight: 600; color: #88c0d0; }
.card-head .status { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: #2c3340; }

.card-body { display: flex; flex-direction: column; gap: 4px; }
.card .row { display: flex; justify-content: space-between; align-items: center; }
.card .symbol { font-weight: 600; }
.card .pnl { font-family: monospace; font-weight: 600; }
.card .meta { font-size: 11px; color: #8794a6; }
.card .meta .dir { font-weight: 600; }
.card .sub { font-family: monospace; font-size: 10px; color: #6c7686; gap: 8px; flex-wrap: wrap; }
.card .preset { font-family: monospace; font-size: 10px; color: #d4a82e; }

.pos { color: #84d04f; }
.neg { color: #ff6b6b; }

/* ─── 모달 ─────────────────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal {
  background: #161a21;
  border: 1px solid #2c3340; border-radius: 8px;
  width: 480px; max-width: 90vw; max-height: 90vh;
  overflow: auto;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #2c3340;
}
.modal-head h2 { font-size: 14px; margin: 0; }
.modal-body  { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.modal-body label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #8794a6; }
.modal-body input, .modal-body select { width: 100%; }
.modal-body .row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.modal-body .checkbox { flex-direction: row; align-items: center; }
.modal-body .templates { border: 1px solid #2c3340; border-radius: 4px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.modal-body .templates legend { color: #8794a6; padding: 0 4px; }
.modal-body .templates button { font-size: 11px; padding: 3px 8px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* ─── 상세 패널 (오버레이) ──────────────────────────── */
.detail {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 720px; max-width: 96vw;
  background: #11141a;
  border-left: 1px solid #2c3340;
  z-index: 90;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(0,0,0,0.4);
}
.detail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: #161a21; border-bottom: 1px solid #2c3340;
}
.detail-head h2 { margin: 0; font-size: 14px; font-family: monospace; }
.detail-head .actions { display: flex; gap: 6px; }
.detail-body { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.block { background: #161a21; border: 1px solid #2c3340; border-radius: 6px; padding: 10px 12px; }
.block h3 { margin: 0 0 8px; font-size: 12px; color: #88c0d0; }
.kv {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  font-family: monospace; font-size: 12px;
}
.kv > span:nth-child(odd) { color: #8794a6; }
.ascii-chart {
  font-family: monospace; font-size: 11px;
  background: #0e1116; padding: 8px; border-radius: 4px;
  white-space: pre; overflow-x: auto;
  color: #84d04f; line-height: 1.3;
}
.logtable {
  width: 100%; border-collapse: collapse; font-family: monospace; font-size: 11px;
}
.logtable th, .logtable td { padding: 4px 6px; text-align: left; border-bottom: 1px solid #2c3340; }
.logtable th { color: #8794a6; font-weight: 600; }
.logtable tr:hover { background: #1a1f27; }
.json {
  margin: 0; font-family: monospace; font-size: 11px;
  background: #0e1116; color: #b8c3d4;
  padding: 8px; border-radius: 4px;
  max-height: 200px; overflow: auto;
}