/* ============================================
   PAGE: Copy Trading
   ============================================ */

/* ===== Add Pair form sub-sections ===== */
.ct-section {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.ct-section-label {
  font: 600 12px/1 var(--font-sans, 'Inter', sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.two-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ===== Create Pair button + hint ===== */
.create-pair-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border-radius: var(--radius-sm);
  background: var(--color-success);
  color: #052e16;
  border: 0;
  font: 700 13.5px/1 var(--font-sans, 'Inter', sans-serif);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.2), 0 8px 22px rgba(34,197,94,0.18);
  transition: all 150ms ease;
  margin-bottom: 0;
}
.create-pair-btn:hover { background: #16a34a; transform: translateY(-1px); }
.create-pair-btn i { font-size: 13px; }

.create-pair-hint {
  text-align: center;
  font: 400 12px/1.5 var(--font-sans, 'Inter', sans-serif);
  color: var(--text-dim);
  margin: 12px 0 16px;
}

/* ===== Plans list scroll container ===== */
.plans-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 2px;
}

/* ===== Copy pair card (rendered by renderPlans JS) ===== */
.plan-item-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.plan-item-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.plan-item-accounts {
  display: contents;
}

.plan-item-account {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.plan-item-account-number {
  font: 600 13px/1.2 var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text);
  margin-top: 4px;
}

.plan-item-account-nickname {
  font: 400 11px/1.3 var(--font-sans, 'Inter', sans-serif);
  color: var(--text-dim);
  margin-top: 2px;
}

/* Role badge above account number */
.plan-item-account.master::before {
  content: 'MASTER';
  display: block;
  font: 600 9.5px/1 var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-success);
  margin-bottom: 2px;
}
.plan-item-account.slave::before {
  content: 'SLAVE';
  display: block;
  font: 600 9.5px/1 var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-info);
  margin-bottom: 2px;
}

.plan-item-arrow {
  color: var(--color-success);
  display: grid;
  place-items: center;
  font-size: 14px;
}

/* Status badge in header */
.plan-item-header .status-badge {
  font: 600 10px/1 var(--font-sans, 'Inter', sans-serif);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-item-header .status-badge.online {
  background: rgba(34,197,94,0.12);
  color: var(--color-success);
  border: 1px solid rgba(34,197,94,0.3);
}
.plan-item-header .status-badge.offline {
  background: rgba(100,100,100,0.1);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* Details row */
.plan-item-details {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 8px;
  font: 400 11.5px/1 var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text-dim);
}

.plan-item-detail {
  display: flex;
  align-items: center;
  gap: 5px;
}
.plan-item-detail i { font-size: 11px; }

/* Token row */
.plan-item-token {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: 500 11px/1 var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text-dim);
  margin-bottom: 8px;
}
.plan-item-token i { color: var(--color-success); font-size: 11px; flex-shrink: 0; }
.plan-item-token code {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-icon-small {
  background: none;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
  line-height: 1;
}
.btn-icon-small:hover { color: var(--color-success); }

/* Actions grid (3 columns, matching prototype .pair-actions) */
.plan-item-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

/* Pair action buttons — prototype .pair-act style */
.pair-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: 600 11px/1 var(--font-sans, 'Inter', sans-serif);
  border: 1px solid transparent;
  transition: background 120ms ease;
}
.pair-act i { font-size: 11px; }

.pair-act.add {
  background: var(--color-success-soft, rgba(34,197,94,0.12));
  color: var(--color-success);
  border-color: rgba(34,197,94,0.25);
}
.pair-act.add:hover { background: rgba(34,197,94,0.18); }

.pair-act.pause {
  background: rgba(245,158,11,0.1);
  color: var(--color-warning, #f59e0b);
  border-color: rgba(245,158,11,0.25);
}
.pair-act.pause:hover { background: rgba(245,158,11,0.18); }

.pair-act.resume {
  background: var(--color-success-soft, rgba(34,197,94,0.12));
  color: var(--color-success);
  border-color: rgba(34,197,94,0.25);
}
.pair-act.resume:hover { background: rgba(34,197,94,0.18); }

.pair-act.del {
  background: rgba(239,68,68,0.1);
  color: var(--color-danger, #ef4444);
  border-color: rgba(239,68,68,0.25);
}
.pair-act.del:hover { background: rgba(239,68,68,0.18); }

/* ===== Master/Slave columns ===== */
.ms-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ms-col {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.ms-col h4 {
  margin: 0 0 12px;
  font: 600 10px/1 var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ms-col h4 svg { width: 12px; height: 12px; stroke: currentColor; }
.ms-col h4 svg.master { color: var(--color-success); }
.ms-col h4 svg.slave  { color: var(--color-info, #6EA8FF); }

/* Account items rendered by renderMasterAccounts/renderSlaveAccounts */
.ms-col .account-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.ms-col .account-card:last-child { margin-bottom: 0; }

.ms-col .account-card-info { flex: 1; min-width: 0; }

.ms-col .account-card-number {
  font: 600 12.5px/1.2 var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ms-col .account-card-nickname {
  font: 400 11px/1.3 var(--font-sans, 'Inter', sans-serif);
  color: var(--text-dim);
  margin-top: 2px;
}

/* Status badge inside account-card-number */
.ms-col .account-card-number .status-badge {
  font: 600 9.5px/1 var(--font-sans, 'Inter', sans-serif);
  padding: 2px 7px;
  border-radius: 999px;
}
.ms-col .account-card-number .status-badge.online {
  background: rgba(34,197,94,0.12);
  color: var(--color-success);
  border: 1px solid rgba(34,197,94,0.25);
}
.ms-col .account-card-number .status-badge.offline {
  background: rgba(100,100,100,0.08);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.ms-col .account-card-actions { flex-shrink: 0; }

/* Status dot in ms-col empty state */
.ms-col .empty-state-small { padding: 28px 12px; }

/* ===== Active Pair Config table — flush (no card-body padding) ===== */
/* table-wrap already handles flush via global .card .table-wrap */

/* ===== Copy History card — flush ===== */
/* uses .table-wrap → flush by global styles */

/* ===== select element ===== */
.select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface-2);
  /* custom chevron (native arrow removed by appearance:none) — same svg pattern as .search-input */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E99B0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 400 12px/1 var(--font-sans, 'Inter', sans-serif);
  cursor: pointer;
}
.select:focus { outline: none; border-color: var(--color-success); }

/* ===== Pair modal sections (used in create/edit modal) ===== */
.pair-modal-section {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
}

.pair-modal-section-title {
  font: 600 11px/1 var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pair-modal-section-title i { color: var(--color-success); }

.pair-modal-settings { display: flex; flex-direction: column; gap: 12px; }

.pair-modal-setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.pair-modal-setting-info { flex: 1; }
.pair-modal-setting-label { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.pair-modal-setting-desc { font-size: 12px; color: var(--text-dim); }

/* ===== Empty states ===== */
.empty-state-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 16px;
  color: var(--text-dim);
}
.empty-state-small i { font-size: 2rem; margin-bottom: 10px; opacity: 0.4; display: block; }
.empty-state-small p { margin: 0; font-size: 13px; }

/* ===== 70/30 layout: Add form (left, wider) vs Pairs list (right) ===== */
#page-copytrading .two-column-layout {
  grid-template-columns: 2fr 1fr;
}

/* ===== Search input full-width override for pairs card ===== */
#page-copytrading #pairSearchInput {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  min-width: unset;
}

/* ===== Token columns in active pairs table ===== */
#page-copytrading .api-token-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--text-dim);
}
#page-copytrading .api-token-cell code {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
}

/* ===== Volume mode badge ===== */
.volume-mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 500 11px/1 var(--font-family);
  color: var(--text-dim);
}

/* ===== Pair table cell (master→slave layout in active pairs table) ===== */
.pair-table-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pair-table-master, .pair-table-slave { display: flex; align-items: center; gap: 6px; }
.copy-pair-role.master { color: var(--color-success); font-weight: 600; }
.copy-pair-role.slave  { color: var(--color-info, #6EA8FF); font-weight: 600; }
.pair-table-arrow { color: var(--color-success); font-size: 12px; }

/* ===== Prototype toggle (used in active pairs table) ===== */
.toggle {
  display: inline-flex;
  align-items: center;
  cursor: default;
}
.toggle input { display: none; }
.toggle .track {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  position: relative;
  transition: background 150ms;
}
.toggle .track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 150ms, background 150ms;
}
.toggle input:checked + .track {
  background: rgba(34,197,94,0.25);
  border-color: rgba(34,197,94,0.4);
}
.toggle input:checked + .track::after {
  transform: translateX(16px);
  background: var(--color-success);
}

/* ===== Hide elements per original spec ===== */
.token-input-group,
#pairApiToken,
#editPairApiToken {
  display: none !important;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .ms-columns { grid-template-columns: 1fr; }
  .two-input-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .plan-item-actions { grid-template-columns: 1fr 1fr; }
  .plan-item-header { grid-template-columns: 1fr auto 1fr; }
  .plan-item-header .status-badge { grid-column: 1 / -1; }
}