/* ==========================================================================
   FINTECH PRO 2026 UI COMPONENTS (BUTTONS, BADGES & CONTROLS)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

.btn-primary {
  background: var(--color-brand);
  color: #050a12;
  border-color: var(--color-brand);
  box-shadow: 0 2px 8px var(--color-brand-glow);
}
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 4px 14px var(--color-brand-glow); }

.btn-secondary {
  background: var(--surface-card-sub);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-secondary:hover { background: var(--surface-card-hover); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-card-sub); color: var(--text-primary); }

.btn-icon {
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-card-sub);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.btn-icon:hover { color: var(--text-primary); border-color: var(--border-strong); }
.btn-xs { font-size: 0.6875rem; padding: 4px 8px; gap: var(--space-1); }

.btn-buy {
  flex: 1;
  background: var(--color-success);
  color: #021a08;
  font-weight: 700;
  border: none;
  box-shadow: 0 2px 10px oklch(0.74 0.19 150 / 0.35);
}
.btn-buy:hover { filter: brightness(1.1); }

.btn-sell {
  flex: 1;
  background: var(--color-danger);
  color: #ffffff;
  font-weight: 700;
  border: none;
  box-shadow: 0 2px 10px oklch(0.65 0.23 25 / 0.35);
}
.btn-sell:hover { filter: brightness(1.1); }

.btn-destructive {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.btn-destructive:hover { background: var(--color-danger); color: #ffffff; }

.btn-killswitch {
  background: linear-gradient(135deg, oklch(0.55 0.25 25) 0%, oklch(0.40 0.22 25) 100%);
  color: #ffffff;
  border: 1px solid oklch(0.75 0.22 25 / 0.6);
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 0 14px oklch(0.65 0.23 25 / 0.45);
  animation: pulse-danger-glow 2.5s infinite;
}
.btn-killswitch:hover { filter: brightness(1.18); box-shadow: 0 0 24px oklch(0.65 0.23 25 / 0.7); }

.btn-killswitch-execute {
  background: var(--color-danger);
  color: #ffffff;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
}
.btn-killswitch-execute:disabled { opacity: 0.4; cursor: not-allowed; }

/* Badges */
.badge-v {
  font-size: 0.625rem;
  font-family: var(--font-mono);
  background: var(--color-brand-glow);
  color: var(--color-brand);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-brand);
}
.badge-accent {
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: var(--font-mono);
  background: oklch(0.65 0.22 290 / 0.15);
  color: var(--color-accent);
  border: 1px solid oklch(0.65 0.22 290 / 0.35);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}
.badge-neutral {
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  background: var(--surface-card-sub);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}
.badge-mono {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  background: var(--surface-inset);
  color: var(--text-secondary);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
}
.badge-sentiment {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.badge-sentiment.positive {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}
.badge-sentiment.negative {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.live-stream-badge {
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  animation: pulse-stream 1.8s infinite;
}

/* Indicators & Animations */
.pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.pulse-indicator::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  animation: ripple 2s infinite ease-out;
  opacity: 0.7;
}
.status-healthy { background: var(--color-success); color: var(--color-success); }
.status-analyzing { background: var(--color-warning); color: var(--color-warning); }
.status-routing { background: var(--color-brand); color: var(--color-brand); }
.status-veto { background: var(--color-danger); color: var(--color-danger); }
.mini-pulse-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 6px var(--color-success);
}

@keyframes ripple {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes pulse-danger-glow {
  0%, 100% { box-shadow: 0 0 10px oklch(0.65 0.23 25 / 0.3); }
  50% { box-shadow: 0 0 20px oklch(0.65 0.23 25 / 0.6); }
}
@keyframes pulse-stream {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Forms & Switches */
.form-field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-label { font-size: 0.75rem; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0.02em; }
.form-input, .form-select {
  height: 36px;
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: var(--surface-inset);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-fast);
}
.form-input:focus, .form-select:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px var(--color-brand-glow);
}
.switch-label { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; }
.switch-input { display: none; }
.switch-slider {
  width: 32px;
  height: 18px;
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  position: relative;
  transition: background var(--duration-fast);
}
.switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast);
}
.switch-input:checked + .switch-slider { background: var(--color-brand); border-color: var(--color-brand); }
.switch-input:checked + .switch-slider::before { transform: translateX(14px); background: #000000; }

.chip-btn {
  background: var(--surface-card-sub);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.chip-btn:hover { background: var(--surface-card-hover); color: var(--text-primary); }
.chip-btn.active { background: var(--color-brand); color: #050a12; border-color: var(--color-brand); font-weight: 700; }