/* ═══════════════════════════════════════════════════════════════════════════
   QUANTUM TRADER — Global Styles
   Body, headings, links, form elements, interactive states, data display.
   EVERY selector below consumes specific design system tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Body ────────────────────────────────────────────────── */
body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--font-family-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: background-color var(--duration-normal) var(--easing-in-out),
              color var(--duration-normal) var(--easing-in-out);
}

/* ─── Links ───────────────────────────────────────────────── */
a, .link {
  color: var(--color-primary-500);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-out);
  cursor: pointer;
}

a:hover, .link:hover {
  color: var(--color-primary-400);
  text-decoration: underline;
}

a:active, .link:active {
  color: var(--color-primary-600);
}

/* Navigation links — used in header/sidebar */
.nav-link {
  font-family: var(--font-family-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--theme-text-secondary);
  padding: var(--space-2) var(--space-1);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--easing-out),
              border-color var(--duration-fast) var(--easing-out);
}

.nav-link:hover {
  color: var(--theme-text);
  text-decoration: none;
  border-bottom-color: var(--color-primary-700);
}

.nav-link.active {
  color: var(--theme-text);
  border-bottom-color: var(--color-primary-500);
}

/* ─── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-out);
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Primary — uses brand teal */
.btn-primary {
  background-color: var(--color-primary-600);
  color: #ffffff;
  border-color: var(--color-primary-600);
}

.btn-primary:hover {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.btn-primary:active {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

/* Secondary — uses surface with border */
.btn-secondary {
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

.btn-secondary:hover {
  background-color: var(--theme-surface-hover);
  border-color: var(--color-neutral-600);
}

/* Ghost — transparent until hover */
.btn-ghost {
  background-color: transparent;
  color: var(--theme-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--theme-surface-hover);
  color: var(--theme-text);
}

/* Danger — uses error color */
.btn-danger {
  background-color: var(--color-error);
  color: #ffffff;
  border-color: var(--color-error);
}

.btn-danger:hover {
  opacity: 0.9;
}

/* Success — uses success color */
.btn-success {
  background-color: var(--color-success);
  color: #ffffff;
  border-color: var(--color-success);
}

/* Sizes */
.btn-sm {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
}

.btn-lg {
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-6);
}

/* Disabled */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Icon Button ─────────────────────────────────────────── */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  color: var(--theme-text-secondary);
  transition: all var(--duration-fast) var(--easing-out);
  background: transparent;
  border: none;
  cursor: pointer;
}

.icon-button:hover {
  background-color: var(--theme-surface-hover);
  color: var(--theme-text);
}

/* ─── Chart Buttons (timeframe toggles) ──────────────────── */
.btn-chart {
  font-family: var(--font-family-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--theme-text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-out);
}

.btn-chart:hover {
  background-color: var(--theme-surface-hover);
  color: var(--theme-text);
}

.btn-chart.active {
  background-color: var(--color-primary-700);
  color: #ffffff;
  border-color: var(--color-primary-600);
}

/* ─── Form Elements ───────────────────────────────────────── */
.form-input {
  width: 100%;
  font-family: var(--font-family-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  padding: var(--space-2) var(--space-3);
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--easing-out),
              box-shadow var(--duration-fast) var(--easing-out);
}

.form-input::placeholder {
  color: var(--color-neutral-500);
}

.form-input:hover {
  border-color: var(--color-neutral-600);
}

.form-input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
  outline: none;
}

.form-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-input-error {
  border-color: var(--color-error);
}

.form-input-error:focus {
  box-shadow: 0 0 0 1px var(--color-error);
}

.form-label {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--theme-text);
  margin-bottom: var(--space-1);
}

.form-help {
  font-size: var(--text-xs);
  color: var(--theme-text-secondary);
  margin-top: var(--space-1);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* ─── Select ──────────────────────────────────────────────── */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b0b3b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: var(--space-8);
}

/* ─── Checkbox / Radio ────────────────────────────────────── */
.form-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary-500);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.form-radio {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary-500);
  cursor: pointer;
}

/* ─── Data Table ─────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table thead th {
  font-family: var(--font-family-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--theme-text-secondary);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--theme-border);
}

.data-table tbody td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--theme-border);
  color: var(--theme-text);
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background-color: var(--theme-surface-hover);
}

/* ─── Badges / Tags ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-0) var(--space-2);
  border-radius: var(--radius-sm);
  line-height: var(--leading-normal);
  height: 1.375rem;
}

.badge-buy {
  background-color: rgba(18, 183, 106, 0.15);
  color: var(--color-success);
}

.badge-sell {
  background-color: rgba(255, 59, 48, 0.15);
  color: var(--color-error);
}

.badge-fill {
  background-color: rgba(0, 212, 170, 0.12);
  color: var(--color-primary-500);
}

.badge-pending {
  background-color: rgba(245, 166, 35, 0.15);
  color: var(--color-warning);
}

.badge-active {
  background-color: rgba(18, 183, 106, 0.15);
  color: var(--color-success);
}

.badge-paused {
  background-color: rgba(176, 179, 185, 0.15);
  color: var(--theme-text-secondary);
}

.badge-draft {
  background-color: rgba(96, 100, 108, 0.15);
  color: var(--color-neutral-400);
}

/* ─── Status Dots ─────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
}

.status-dot-ok  { background-color: var(--color-success); }
.status-dot-warn { background-color: var(--color-warning); }
.status-dot-err { background-color: var(--color-error); }

/* ─── Chart Placeholder ──────────────────────────────────── */
.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-chart-grid);
  border-radius: var(--radius-md);
}

/* ─── Progress Bar ───────────────────────────────────────── */
.progress-bar {
  width: 100%;
  height: 0.5rem;
  background-color: var(--theme-surface-hover);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-500);
  transition: width var(--duration-slow) var(--easing-out);
}

/* ─── Tooltip ─────────────────────────────────────────────── */
.tooltip {
  position: relative;
}

.tooltip-content {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-100);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-out);
}

.tooltip:hover .tooltip-content {
  opacity: 1;
}

/* ─── Focus States ───────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}