/* SMC Bot Dashboard - Custom Styles */

/* --- Login --- */
.login-card {
  max-width: 400px;
  margin: 4rem auto;
}

/* --- Bot card grid --- */
.bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.bot-card {
  margin: 0;
}

.bot-card header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.bot-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bot-card-body .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  opacity: 0.6;
  display: block;
}

.bot-card-body .value {
  font-weight: 600;
  font-size: 1.1rem;
}

.bot-card-body .detail {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-left: 0.5rem;
}

.bot-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--pico-muted-border-color);
}

.bot-card-stats .stat {
  text-align: center;
}

.bot-card-stats .stat .label {
  font-size: 0.65rem;
}

.bot-card-stats .stat .value {
  font-size: 0.95rem;
}

/* --- Status indicators --- */
.status-indicator {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-on {
  background: #26a69a;
  color: #fff;
}

.status-off {
  background: #666;
  color: #ccc;
}

/* --- Trade status --- */
.status-pending,
.status-open,
.status-closed,
.status-cancelled {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-pending {
  background: #ff9800;
  color: #000;
}

.status-open {
  background: #2196f3;
  color: #fff;
}

.status-closed {
  background: #666;
  color: #ccc;
}

.status-cancelled {
  background: #9e9e9e;
  color: #444;
}

/* --- Side colors --- */
.side-long {
  color: #26a69a;
}

.side-short {
  color: #ef5350;
}

/* --- PnL colors --- */
.pnl-positive {
  color: #26a69a;
}

.pnl-negative {
  color: #ef5350;
}

/* --- Error messages --- */
.error-msg {
  color: #ef5350;
  font-weight: 600;
}

/* --- Status page grid --- */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.status-section h4 {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  opacity: 0.7;
}

.status-section table {
  margin: 0;
  font-size: 0.85rem;
}

.status-section table td:first-child {
  opacity: 0.7;
  white-space: nowrap;
}

/* --- Trades page --- */
.trades-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.trades-controls .inline-form {
  margin: 0;
}

.trades-controls select {
  margin: 0;
  width: auto;
  min-width: 180px;
}

.trade-summary {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}

/* --- Equity chart --- */
.equity-controls {
  margin-bottom: 1rem;
}

.equity-controls select {
  width: auto;
  min-width: 180px;
}

.chart-container {
  width: 100%;
  height: 450px;
  border-radius: 8px;
  overflow: hidden;
}

/* --- Config page --- */
details pre {
  max-height: 500px;
  overflow: auto;
}

/* --- Bot status card --- */
.bot-status-card {
  margin-bottom: 1.5rem;
}

.bot-status-card header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}