/* KuCoin Scanner v5 — Trading Terminal Styles */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Core palette — warm off-white base */
  --bg-primary: #FAF9F7;
  --bg-secondary: #F3F1ED;
  --bg-tertiary: #EBE8E2;
  --bg-card: #FFFFFF;
  --border: #E2DFD8;
  --border-subtle: #EDEBE6;

  /* Text */
  --text-primary: #1A1814;
  --text-secondary: #5C5850;
  --text-tertiary: #8A8478;
  --text-inverse: #FAFAF9;

  /* Accent — deep teal */
  --accent: #0D9488;
  --accent-light: #14B8A6;
  --accent-subtle: #CCFBF1;

  /* Trading colors — muted, professional */
  --profit: #16A34A;
  --profit-bg: #F0FDF4;
  --loss: #DC2626;
  --loss-bg: #FEF2F2;

  /* Signal status */
  --signal-active: #D97706;
  --signal-traded: #16A34A;
  --signal-rejected: #9CA3AF;
  --signal-expired: #6B7280;

  /* System mode badges */
  --mode-trading: #16A34A;
  --mode-paper: #0D9488;
  --mode-manage: #D97706;
  --mode-paused: #F59E0B;
  --mode-frozen: #DC2626;

  /* Fonts */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
}

/* Dark mode */
.dark {
  --bg-primary: #111110;
  --bg-secondary: #1A1918;
  --bg-tertiary: #222120;
  --bg-card: #1A1918;
  --border: #2E2D2B;
  --border-subtle: #252422;

  --text-primary: #F5F5F0;
  --text-secondary: #A8A29E;
  --text-tertiary: #78716C;
  --text-inverse: #1A1814;

  --accent-subtle: #042F2E;
  --profit-bg: #052E16;
  --loss-bg: #450A0A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
}

/* Base */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
.font-mono { font-family: var(--font-mono); }
.text-price { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Stat Card */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-card__label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.stat-card__value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.stat-card__delta {
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: 4px;
}

/* Mode chips */
.mode-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mode-chip--trading, .mode-chip--paper { background: var(--accent-subtle); color: var(--mode-paper); }
.mode-chip--manage_only { background: #FEF3C7; color: var(--mode-manage); }
.mode-chip--paused { background: #FEF9C3; color: var(--mode-paused); }
.mode-chip--frozen { background: var(--loss-bg); color: var(--mode-frozen); }

/* Direction chips */
.dir-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.dir-chip--long, .dir-chip--buy { background: var(--profit-bg); color: var(--profit); }
.dir-chip--short, .dir-chip--sell { background: var(--loss-bg); color: var(--loss); }

/* Score bar */
.score-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.score-bar__track {
  width: 60px;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.score-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.status-badge--traded { background: var(--profit-bg); color: var(--profit); }
.status-badge--active { background: #FEF3C7; color: var(--signal-active); }
.status-badge--rejected { background: var(--bg-tertiary); color: var(--signal-rejected); }
.status-badge--expired { background: var(--bg-tertiary); color: var(--signal-expired); }

/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.data-table tr:hover td { background: var(--bg-secondary); }
.data-table .text-right { text-align: right; }
.data-table .text-center { text-align: center; }

/* Profit/loss coloring */
.pnl-positive { color: var(--profit); }
.pnl-negative { color: var(--loss); }

/* Toast notifications */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.3s ease;
  max-width: 400px;
}
.toast--success { background: var(--profit); color: white; }
.toast--error { background: var(--loss); color: white; }
.toast--info { background: var(--text-primary); color: var(--text-inverse); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(20px); }
}

/* Skeleton loading */
.skeleton {
  background: var(--bg-tertiary);
  border-radius: 6px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}

/* Nav */
.nav-link {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s;
}
.nav-link:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.nav-link--active {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-sans);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: white; }
.btn--primary:hover:not(:disabled) { background: var(--accent-light); }
.btn--secondary { background: var(--bg-tertiary); color: var(--text-primary); }
.btn--secondary:hover:not(:disabled) { background: var(--border); }
.btn--danger { background: var(--loss); color: white; }
.btn--danger:hover:not(:disabled) { background: #B91C1C; }
.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-tertiary); color: var(--text-primary); }
.btn--sm { padding: 4px 10px; font-size: 12px; }

/* Form inputs */
.input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color 0.15s;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.input--error { border-color: var(--loss); }

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fade-in 0.15s ease;
}
.modal {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 24px;
  max-width: 480px;
  width: 90%;
  box-shadow: var(--shadow-lg);
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Pulse dot (scan health) */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
.pulse-dot--healthy { background: var(--profit); }
.pulse-dot--stale { background: var(--loss); }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.pagination__btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
}
.pagination__btn:hover { background: var(--bg-secondary); }
.pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination__info { padding: 0 8px; color: var(--text-tertiary); }

/* Responsive */
@media (max-width: 768px) {
  .stat-card__value { font-size: 20px; }
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 8px; }
  .hide-mobile { display: none !important; }
}