// ── Shared placeholders ───────────────────────────────────────────────────

%btn-disabled {
  opacity: 0.45;
  cursor: default;
}

%btn-inline-flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

// ── Button base reset ─────────────────────────────────────────────────────

button {
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 18px;
  white-space: nowrap;
  transition: background var(--transition), opacity var(--transition), color var(--transition);

  &:disabled { @extend %btn-disabled; }
}

// ── btn-primary  (blue filled — "＋ New Call", "Save Call") ───────────────

.btn-primary {
  @extend %btn-inline-flex;
  background: var(--blue-dark);
  color: #fff;
  gap: 8px;

  &:hover:not(:disabled) { background: var(--blue-darker); }
  &:disabled { opacity: 0.5; }
}

// ── btn-catalyst  (blue filled — "📰 Today Market") ──────────────────────

.btn-catalyst {
  @extend %btn-inline-flex;
  background: var(--blue-dark);
  color: #fff;
  gap: 6px;
  padding: 10px 20px;

  &:hover:not(:disabled) { background: var(--blue-darker); }
}

// ── btn-ghost  (dark border — "🔍 Search tickers") ───────────────────────

.btn-ghost {
  background: var(--bg-card);
  color: var(--text-dim);
  border: 1px solid var(--border-input);
  font-size: 12px;
  padding: 8px 14px;

  &:hover { background: #263347; color: var(--text-muted); }
}

// ── btn-screen  (muted blue — "Screen" inside search row) ────────────────

.btn-screen {
  @extend %btn-inline-flex;
  background: var(--blue-surface);
  color: var(--blue-muted);
  border: 1px solid var(--blue-surface);
  min-width: 80px;

  &:hover:not(:disabled) { background: #163356; }
}

// ── btn-analyze  (ghost blue — "✦ Analyze" in section header) ────────────

.btn-analyze {
  @extend %btn-inline-flex;
  background: transparent;
  color: #7c93b0;
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  gap: 5px;
  margin-left: 8px;
  white-space: nowrap;

  &:hover:not(:disabled) {
    background: var(--blue-deep);
    color: #93c5fd;
    border-color: var(--blue-surface);
  }

  &:disabled { @extend %btn-disabled; opacity: 0.4; }
}