/**
 * sFOX Trade–inspired theme for Portfolio Manager
 * Aligns with trade.sfox.com / sFOX branding: dark UI, teal/green accents, professional typography.
 * (Trade app stylesheets are not publicly fetchable; this theme mirrors the look and feel.)
 */

:root {
  /* Backgrounds */
  --sfox-bg-page: #0a0e17;
  --sfox-bg-panel: #111827;
  --sfox-bg-elevated: #1a2234;
  --sfox-bg-input: #0d1321;
  --sfox-bg-row-hover: rgba(16, 185, 129, 0.06);

  /* Borders */
  --sfox-border: #1e293b;
  --sfox-border-strong: #334155;

  /* Text */
  --sfox-text-primary: #f1f5f9;
  --sfox-text-secondary: #94a3b8;
  --sfox-text-muted: #64748b;

  /* Accent – sFOX teal/green */
  --sfox-accent: #10b981;
  --sfox-accent-hover: #0d9668;
  --sfox-accent-muted: rgba(16, 185, 129, 0.15);

  /* Danger */
  --sfox-danger: #ef4444;
  --sfox-danger-bg: rgba(239, 68, 68, 0.12);

  /* Typography – clean sans for trading UIs */
  --sfox-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sfox-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

body {
  font-family: var(--sfox-font-sans);
  background-color: var(--sfox-bg-page);
  color: var(--sfox-text-primary);
}

.container {
  max-width: 1200px;
}

.header h1 {
  color: var(--sfox-text-secondary);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.panel {
  background: var(--sfox-bg-panel);
  border: 1px solid var(--sfox-border);
  border-radius: 10px;
}

.panel h2 {
  color: var(--sfox-text-primary);
  font-weight: 600;
  font-size: 1.15rem;
}

.form-group label {
  color: var(--sfox-text-secondary);
  font-weight: 500;
}

.form-group input,
.form-group select {
  background: var(--sfox-bg-input);
  border: 1px solid var(--sfox-border-strong);
  color: var(--sfox-text-primary);
  border-radius: 6px;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--sfox-accent);
  box-shadow: 0 0 0 2px var(--sfox-accent-muted);
}

.btn {
  background: var(--sfox-accent);
  color: #0a0e17;
  border: none;
  font-weight: 600;
  border-radius: 6px;
}

.btn:hover {
  background: var(--sfox-accent-hover);
}

.btn-secondary {
  background: var(--sfox-bg-elevated);
  color: var(--sfox-text-secondary);
  border: 1px solid var(--sfox-border-strong);
}

.btn-secondary:hover {
  background: var(--sfox-border-strong);
  color: var(--sfox-text-primary);
}

.btn-danger {
  background: var(--sfox-danger);
  color: #fff;
}

.btn-danger:hover {
  background: #dc2626;
}

.api-config-error {
  background: var(--sfox-danger-bg);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.stats-grid .stat-item {
  background: var(--sfox-bg-elevated);
  border: 1px solid var(--sfox-border);
}

.stat-number {
  color: var(--sfox-accent);
  font-weight: 700;
}

.stat-label {
  color: var(--sfox-text-muted);
}

.portfolio-info {
  background: var(--sfox-bg-input);
  border-radius: 8px;
}

.portfolio-info h3 {
  color: var(--sfox-accent);
  font-weight: 600;
}

.description {
  color: var(--sfox-text-muted);
}

.stat {
  background: var(--sfox-bg-elevated);
}

.label {
  color: var(--sfox-text-muted);
}

.value {
  color: var(--sfox-text-secondary);
  font-weight: 600;
}

.asset-row,
.setting-row {
  background: var(--sfox-bg-elevated);
}

.weight,
.setting-value {
  color: var(--sfox-accent);
  font-weight: 600;
}

.activity-log {
  background: var(--sfox-bg-elevated);
  border: 1px solid var(--sfox-border);
}

.log-entry {
  border-left-color: var(--sfox-accent);
  font-family: var(--sfox-font-mono);
}

.timestamp {
  color: var(--sfox-text-muted);
}

.modal {
  background-color: rgba(0, 0, 0, 0.75);
}

.modal-content {
  background: var(--sfox-bg-panel);
  border: 1px solid var(--sfox-border-strong);
  border-radius: 10px;
}

.modal h2 {
  color: var(--sfox-accent);
}

.close {
  color: var(--sfox-text-muted);
}

.close:hover {
  color: var(--sfox-text-primary);
}

/* Manage Subscribers */
.manage-subscribers-col-header {
  background: var(--sfox-bg-elevated);
  border-bottom: 1px solid var(--sfox-border);
  color: var(--sfox-text-secondary);
}

.manage-subscribers-col.subscribers-col .manage-subscribers-col-header {
  border-left: 3px solid var(--sfox-accent);
}

.manage-subscribers-col-actions {
  background: var(--sfox-bg-elevated);
  border-bottom: 1px solid var(--sfox-border);
}

.bulk-checkbox-label {
  color: var(--sfox-text-muted);
}

.btn-bulk {
  background: var(--sfox-bg-panel);
  border: 1px solid var(--sfox-border-strong);
  color: var(--sfox-text-secondary);
}

.btn-bulk:hover {
  background: var(--sfox-border-strong);
  color: var(--sfox-text-primary);
}

.subscriber-list {
  border: 1px solid var(--sfox-border);
  background: var(--sfox-bg-input);
}

.subscriber-row:hover {
  background: var(--sfox-bg-row-hover);
}

.subscriber-row .subscriber-details .email {
  color: var(--sfox-text-primary);
}

.subscriber-row .subscriber-details .name {
  color: var(--sfox-text-secondary);
}

.subscriber-row .subscriber-details .phone {
  color: var(--sfox-text-muted);
}

.subscriber-row .btn-add-remove.btn-add {
  background: var(--sfox-accent);
  color: #0a0e17;
}

.subscriber-row .btn-add-remove.btn-add:hover {
  background: var(--sfox-accent-hover);
}

.subscriber-row .btn-add-remove.btn-remove {
  border-color: var(--sfox-border-strong);
  color: var(--sfox-text-muted);
}

.subscriber-row .btn-add-remove.btn-remove:hover {
  color: var(--sfox-text-primary);
  border-color: var(--sfox-border-strong);
}

.manage-subscribers-empty {
  color: var(--sfox-text-muted);
}

.btn-icon-refresh {
  background: var(--sfox-bg-elevated);
  border: 1px solid var(--sfox-border-strong);
  color: var(--sfox-text-secondary);
}

.btn-icon-refresh:hover {
  color: var(--sfox-accent);
  border-color: var(--sfox-border-strong);
}

.modal-info,
.modal-buttons {
  border-color: var(--sfox-border);
}

.weight-indicator {
  color: var(--sfox-text-muted);
}

.chart-placeholder {
  color: var(--sfox-text-muted);
}

.control-panel {
  border: 1px solid var(--sfox-border);
}