/* SS Trading Platform — trading-specific styles
   Built to extend the existing portal design system in app.css. */

.trading-dashboard .panel { margin-bottom:14px; }

.trade-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.trade-header h1 { margin:0; font-size:22px; }
.trade-header p { margin:5px 0 0; }
.trade-header-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.connection-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.connection-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border:1px solid var(--border);
  border-radius:9999px;
  background:#fff;
  font-size:12px;
  font-weight:650;
  white-space:nowrap;
}
.connection-pill .dot { width:8px; height:8px; border-radius:999px; background:#94a3b8; }
.connection-pill.ok { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.connection-pill.ok .dot { background:#16a34a; }
.connection-pill.warn { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.connection-pill.warn .dot { background:#d97706; }
.connection-pill.off { background:#f8fafc; color:#475569; }
.connection-pill.off .dot { background:#64748b; }
.connection-pill.danger { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.connection-pill.danger .dot { background:#dc2626; }

.trade-kpis {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.trade-kpi {
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  min-width:0;
}
.trade-kpi .k {
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.trade-kpi .v { display:block; margin-top:4px; font-size:22px; font-weight:800; line-height:1.15; }
.trade-kpi .sub { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.money-pos { color:#065f46; }
.money-neg { color:#b91c1c; }
.money-warn { color:#b45309; }

.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);
  gap:12px;
  margin-top:12px;
}
.dashboard-stack { display:grid; gap:12px; }

.section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.section-head h2 { margin:0; font-size:16px; }
.section-head p { margin:3px 0 0; }

.pnl-card {
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:14px;
}
.pnl-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.pnl-summary > div { border-right:1px solid var(--border); padding-right:12px; }
.pnl-summary > div:last-child { border-right:0; padding-right:0; }
.pnl-summary span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.pnl-summary strong { display:block; margin-top:4px; font-size:20px; }

.mini-chart {
  height:120px;
  margin-top:14px;
  border:1px dashed #dbe2ea;
  border-radius:10px;
  background:
    linear-gradient(to bottom, rgba(37,99,235,.035), rgba(37,99,235,0)),
    repeating-linear-gradient(to bottom, transparent, transparent 29px, #f1f5f9 30px),
    repeating-linear-gradient(to right, transparent, transparent 59px, #f8fafc 60px);
  position:relative;
  overflow:hidden;
}
.mini-chart svg { width:100%; height:100%; display:block; }

.status-pills { display:flex; gap:6px; flex-wrap:wrap; }
.pill-count {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:9999px;
  font-size:11px;
  line-height:1;
  font-weight:700;
  border:1px solid var(--border);
  background:#fff;
  white-space:nowrap;
}
.pill-slate { background:rgba(100,116,139,.12); border-color:rgba(100,116,139,.35); color:#334155; }
.pill-blue { background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.35); color:#1d4ed8; }
.pill-purple { background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.35); color:#6d28d9; }
.pill-green { background:rgba(22,163,74,.12); border-color:rgba(22,163,74,.35); color:#166534; }
.pill-amber { background:rgba(217,119,6,.12); border-color:rgba(217,119,6,.35); color:#b45309; }
.pill-red { background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.35); color:#b91c1c; }
.pill-teal { background:rgba(13,148,136,.12); border-color:rgba(13,148,136,.35); color:#0f766e; }

.trade-table-wrap {
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.trade-table { width:100%; min-width:860px; border-collapse:collapse; }
.trade-table th {
  text-align:left;
  background:var(--blue-bg);
  color:var(--blue-text);
  border-bottom:1px solid var(--blue-border);
  padding:10px 11px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.trade-table td { padding:11px; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; }
.trade-table tbody tr:last-child td { border-bottom:0; }
.trade-table tbody tr:hover td { background:#fafafa; }
.trade-table .symbol { font-weight:800; }
.trade-table .meta { display:block; margin-top:2px; font-size:11px; color:var(--muted); }

.activity-list { display:grid; gap:0; }
.activity-item {
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
  padding:10px 0;
  border-bottom:1px dashed var(--border);
}
.activity-item:last-child { border-bottom:0; }
.activity-dot { width:8px; height:8px; border-radius:999px; margin-top:5px; background:#64748b; }
.activity-dot.green { background:#16a34a; }
.activity-dot.blue { background:#2563eb; }
.activity-dot.red { background:#dc2626; }
.activity-dot.amber { background:#d97706; }
.activity-title { font-weight:700; font-size:13px; }
.activity-meta { margin-top:2px; color:var(--muted); font-size:11px; line-height:1.35; }
.activity-time { color:var(--muted); font-size:11px; white-space:nowrap; }

.risk-card {
  border:1px solid #fde68a;
  background:#fffbeb;
  border-radius:12px;
  padding:12px;
}
.risk-card h3 { margin:0; font-size:14px; color:#92400e; }
.risk-card p { margin:5px 0 0; color:#78350f; font-size:12px; line-height:1.45; }
.risk-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

.webhook-box {
  border:1px solid var(--border);
  border-radius:10px;
  background:#f8fafc;
  padding:10px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:11px;
  color:#334155;
  overflow-wrap:anywhere;
}

.tool-sidebar .menu-section { margin-top:12px; }
.tool-sidebar .menu-section:first-child { margin-top:0; }
.tool-sidebar .menu-section-label {
  padding:0 8px 5px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.tool-link .badge-mini {
  min-width:22px;
  height:20px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#f1f5f9;
  color:#475569;
  font-size:10px;
  font-weight:800;
}

.btn.kill-switch {
  background:#fff;
  border-color:#fecaca;
  color:#b91c1c;
  font-weight:700;
}
.btn.kill-switch:hover { background:#fef2f2; }

@media (max-width:1200px) {
  .trade-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:980px) {
  .dashboard-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .trade-header { display:block; }
  .trade-header-actions { justify-content:flex-start; margin-top:12px; }
  .trade-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pnl-summary { grid-template-columns:1fr; }
  .pnl-summary > div { border-right:0; border-bottom:1px solid var(--border); padding:0 0 10px; }
  .pnl-summary > div:last-child { border-bottom:0; padding-bottom:0; }
}
@media (max-width:480px) {
  .trade-kpis { grid-template-columns:1fr; }
}

/* ===== Phase 1.1 layout hardening ===== */
.trading-dashboard {
  max-width:1560px;
}

.trading-dashboard .tool-main,
.trading-dashboard .dashboard-grid,
.trading-dashboard .dashboard-stack,
.trading-dashboard .panel,
.trading-dashboard .pnl-card,
.trading-dashboard .trade-table-wrap {
  min-width:0;
}

.trading-dashboard .tool-main {
  container-type:inline-size;
}

.dashboard-grid {
  align-items:start;
}

.dashboard-primary,
.dashboard-secondary {
  align-self:start;
}

.section-head {
  align-items:flex-start;
  flex-wrap:wrap;
}

.trade-table {
  min-width:760px;
}

.trade-table-wrap {
  max-width:100%;
  overscroll-behavior-x:contain;
}

.table-empty {
  padding:26px 14px !important;
  text-align:center !important;
  color:var(--muted);
  white-space:normal !important;
}

.muted-value {
  color:#64748b;
}

.empty-chart {
  min-height:150px;
  margin-top:14px;
  border:1px dashed #dbe2ea;
  border-radius:10px;
  background:#fbfdff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  color:var(--muted);
}
.empty-chart strong {
  display:block;
  color:#334155;
  font-size:14px;
}
.empty-chart span {
  display:block;
  margin-top:5px;
  font-size:12px;
}

.empty-compact {
  border:1px dashed var(--border);
  border-radius:10px;
  background:#fafafa;
  color:var(--muted);
  padding:14px;
  font-size:12px;
  line-height:1.45;
}

.disabled-link {
  pointer-events:none;
  opacity:.55;
}

.menu-button {
  width:100%;
  text-align:left;
  font:inherit;
  background:transparent;
  cursor:pointer;
}

.badge.yellow {
  background:#fffbeb;
  color:#92400e;
}

/* Auth screens */
.trading-login {
  max-width:440px;
}
.login-brand {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.login-panel h1 {
  margin-bottom:4px;
}
.login-panel > .muted {
  margin:0 0 16px;
}
.login-panel .alert {
  margin:0 0 14px;
}
.login-panel .form > div label {
  display:block;
  margin-bottom:6px;
}
.login-submit {
  width:100%;
  margin-top:2px;
  min-height:42px;
}
.setup-wrap {
  max-width:500px;
}

/* Collapse the secondary rail before it becomes cramped beside the sidebar. */
@media (max-width:1380px) {
  .dashboard-grid {
    grid-template-columns:1fr;
  }
  .dashboard-secondary {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-secondary > .panel:last-child {
    grid-column:1 / -1;
  }
}

@container (max-width:980px) {
  .dashboard-grid {
    grid-template-columns:1fr;
  }
  .dashboard-secondary {
    grid-template-columns:1fr;
  }
  .dashboard-secondary > .panel:last-child {
    grid-column:auto;
  }
}

@media (max-width:900px) {
  .trading-dashboard {
    margin-top:14px;
  }
  .dashboard-secondary {
    grid-template-columns:1fr;
  }
  .dashboard-secondary > .panel:last-child {
    grid-column:auto;
  }
  .tool-sidebar {
    position:static;
  }
}

@media (max-width:700px) {
  .trading-dashboard header {
    align-items:flex-start;
    gap:10px;
  }
  .trade-header-actions .btn {
    flex:1 1 auto;
  }
  .section-head > * {
    min-width:0;
  }
}

/* ===== Phase 1.2 Binance.US connection ===== */
.binance-page .connection-alert { margin:14px 0 0; }
.security-warning {
  margin-top:14px;
  border:1px solid #fde68a;
  background:#fffbeb;
  border-radius:12px;
  padding:12px 14px;
  display:grid;
  gap:4px;
  color:#78350f;
}
.security-warning strong { color:#92400e; }
.security-warning span { font-size:12px; line-height:1.5; }

.connection-grid {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);
  gap:12px;
  margin-top:12px;
  align-items:start;
}
.connection-kpis {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.connection-kpis > div {
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:12px;
  min-width:0;
}
.connection-kpis span {
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.035em;
  font-weight:700;
}
.connection-kpis strong {
  display:block;
  margin-top:4px;
  font-size:17px;
  overflow-wrap:anywhere;
}
.connection-kpis.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }

.connection-note { margin:12px 0 0; line-height:1.5; }
.connection-summary { display:grid; gap:0; }
.connection-summary-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:9px 0;
  border-bottom:1px dashed var(--border);
}
.connection-summary-row:last-child { border-bottom:0; }
.connection-summary-row span { color:var(--muted); font-size:12px; }
.connection-summary-row strong { font-size:13px; text-align:right; overflow-wrap:anywhere; }
.connection-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.connection-inline-alert { margin-top:12px; }

.binance-connect-form .hint { margin-top:5px; }
.confirm-row {
  display:flex;
  align-items:flex-start;
  gap:9px;
  border:1px solid #fde68a;
  background:#fffbeb;
  border-radius:10px;
  padding:10px 12px;
  color:#78350f;
  font-size:12px;
  line-height:1.45;
}
.confirm-row input { margin-top:2px; flex:0 0 auto; }

.connection-details { margin-top:12px; }
.connection-details > summary { display:flex; width:max-content; max-width:100%; }
.connection-details .drawer { margin-top:10px; }
.danger-details > summary { color:#991b1b; border-color:#fecaca; }
.connection-disconnect-form { max-width:520px; }

.balance-table { min-width:820px; }
.security-checklist { display:grid; gap:12px; }
.security-checklist > div {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
  align-items:start;
}
.security-check {
  width:26px;
  height:26px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  border:1px solid var(--border);
}
.security-check.ok { background:#ecfdf5; border-color:#a7f3d0; color:#166534; }
.security-check.warn { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.security-check.danger { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.security-checklist strong { display:block; font-size:13px; }
.security-checklist div div span { display:block; margin-top:2px; color:var(--muted); font-size:12px; line-height:1.45; }
.permission-note { line-height:1.55; }

@media (max-width:1380px) {
  .connection-grid { grid-template-columns:1fr; }
  .connection-grid > .dashboard-stack:last-child { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .connection-grid > .dashboard-stack:last-child > .panel:last-child { grid-column:1 / -1; }
}
@media (max-width:900px) {
  .connection-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .connection-grid > .dashboard-stack:last-child { grid-template-columns:1fr; }
  .connection-grid > .dashboard-stack:last-child > .panel:last-child { grid-column:auto; }
}
@media (max-width:600px) {
  .connection-kpis,
  .connection-kpis.compact { grid-template-columns:1fr; }
  .connection-summary-row { display:grid; gap:3px; }
  .connection-summary-row strong { text-align:left; }
}